CinemaSketch

Transform your story ideas into professional cinematic sketches with AI-generated black and white artwork.

🎬 Overview

CinemaSketch is an AI-powered application that converts text prompts into complete cinematic storyboards featuring professional black and white sketches. Using advanced AI models, it generates detailed scene descriptions and creates atmospheric artwork perfect for film pre-production, creative writing, or visual storytelling.

✨ Features

• AI-Powered Story Generation: Advanced LLM creates detailed scene descriptions from your prompts
• Professional Cinematic Sketches: High-quality black and white artwork generated using NVIDIA Sana model
• Fast Processing: Complete storyboards with 3-5 scenes generated in under a minute
• User Authentication: Secure sign-in/sign-up with Clerk
• Real-time Processing: Live updates on storyboard generation progress
• Cost-Effective: Professional sketches starting at $0.12-0.20 per complete set
• Responsive Design: Works seamlessly on desktop and mobile devices

🚀 Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS, shadcn/ui components
• Backend: Convex (real-time database and functions)
• Authentication: Clerk
• AI Services:
  • Text Generation: AI/ML API (GPT-5-nano-2025-08-07)
  • Image Generation: NVIDIA Sana Sprint 1.6B via Replicate
• Deployment: Vercel + Convex Cloud

🛠️ Installation

Prerequisites

• Node.js 18+
• npm or yarn
• Convex account
• Clerk account
• AI/ML API key
• Replicate API key

Setup

1. Clone the repository

   git clone https://github.com/yourusername/cinemasketch.git
   cd cinemasketch

2. Install dependencies

   npm install

3. Set up environment variables

   Create .env.local:

   # Database - Development
   NEXT_PUBLIC_CONVEX_URL=your-dev-convex-url
   
   # Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
   CLERK_SECRET_KEY=your-clerk-secret-key
   
   # AI Services (also set in Convex environment)
   AIMLAPI_KEY=your-aiml-api-key
   REPLICATE_API_TOKEN=your-replicate-token
   
   # Convex Deployment
   CONVEX_DEPLOYMENT=dev:your-convex-dev-deployment

4. Deploy Convex functions

   npx convex dev

5. Set Convex environment variables

   npx convex env set AIMLAPI_KEY your-aiml-api-key
   npx convex env set REPLICATE_API_TOKEN your-replicate-token

6. Start development server

   npm run dev

🔧 Configuration

Clerk Authentication

1. Create a Clerk application
2. Configure the domain in convex/auth.config.ts
3. Add your Clerk keys to environment variables

Convex Database

The application uses these main tables:

• users - User profiles and settings
• storyboards - Main storyboard records
• scenes - Individual scene data and images
• storyboard_queue - Processing queue for image generation

AI Services

• Text Generation: Uses AI/ML API with GPT-5-nano model for story structure
• Image Generation: Uses NVIDIA Sana Sprint 1.6B via Replicate for sketch creation

📦 Deployment

Production Setup

1. Deploy to Vercel

   vercel --prod

2. Set production environment variables in Vercel:

   NEXT_PUBLIC_CONVEX_URL=your-prod-convex-url
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-key
   CLERK_SECRET_KEY=your-clerk-secret

3. Deploy Convex to production

   npx convex deploy --prod

4. Set production Convex environment variables

   npx convex env set AIMLAPI_KEY your-key --prod
   npx convex env set REPLICATE_API_TOKEN your-token --prod

🎯 Usage

1. Sign Up/Sign In: Create an account or sign in with existing credentials
2. Create Story: Enter a detailed story prompt (minimum 20 characters)
3. Generate: Click "Create CinemaSketch" to start the AI generation process
4. View Results: Watch real-time progress and view completed cinematic sketches
5. Manage: Access your previous storyboards from the sidebar

Example Prompts

• "A detective investigates mysterious disappearances in a neon-lit cyberpunk city"
• "A robot making coffee in a modern kitchen while learning about human emotions"
• "Two astronauts discover an ancient alien artifact on Mars during a routine mission"

🏗️ Project Structure

cinemasketch/
├── convex/                 # Convex backend functions
│   ├── schema.ts          # Database schema
│   ├── storyboards.ts     # Storyboard CRUD operations
│   ├── scenes.ts          # Scene management
│   ├── storyboardWorkflow.ts # AI story generation
│   ├── storyboardProcessor.ts # Image generation
│   └── auth.config.ts     # Authentication configuration
├── src/
│   ├── app/               # Next.js app router
│   ├── components/        # React components
│   │   ├── ui/           # shadcn/ui components
│   │   ├── StoryCreator.tsx
│   │   ├── StoryboardViewer.tsx
│   │   └── AppLayout.tsx
│   └── lib/               # Utilities
├── public/                # Static assets
└── README.md

🔒 Security

• Environment variables are properly isolated
• API keys are stored securely in Convex environment
• User authentication handled by Clerk
• No sensitive data exposed to client-side

📊 Performance

• Story Generation: ~3-5 seconds using GPT-5-nano
• Image Generation: ~15-20 seconds per scene using NVIDIA Sana
• Complete Storyboard: ~60-90 seconds for 3-5 scenes
• Real-time Updates: Instant progress tracking via Convex

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Convex for the real-time backend platform
• Clerk for authentication services
• AI/ML API for text generation
• Replicate for NVIDIA Sana image generation
• shadcn/ui for beautiful UI components

📞 Support

For support, please open an issue in the GitHub repository or contact the development team.

---

Built with ❤️ for creative storytellers and filmmakers.