This is a web-based visual storytelling platform to enable advertisers create text to proffesional video ads at scale
| Projects | Scenes |
|---|---|
| Manage multiple projects | Create storyboards in minutes |
To get the project up and running on your local machine, follow these simple steps.
You need to have Node.js and npm installed on your system.
- Clone the repository to your local machine:
git clone https://github.com/google-marketing-solutions/cinematech.git
- Navigate to the project directory:
cd cinematech - Install the required dependencies:
npm install
To start the development server, run the following command:
npm run devThe application will be available at http://localhost:3001.
- ✍️ Create a Project: On the left-hand panel, enter a name for your new project and click "Create Project."
- 📂 Select a Project: Click on a project name in the list to open it.
- 📝 Add Scenes: Use the "Prompt" section to describe the scenes for your video. Each prompt will be treated as a separate scene.
- 🖼️ Generate Media:
- For each scene, you can generate an image by clicking the "Generate image" button.
- Once you have an image, you can generate a video for that scene by clicking the "Generate video" button.
- 💾 Manage Media: You can upload, download, or delete the media for each scene using the icons in the media slots.
- 🤖 AI-Powered Generation: Automatically create images and video clips from simple text descriptions.
- 🎬 Scene-Based Workflow: Break down your story into individual scenes, making it easy to manage and organize your video project.
- ⚡ Rapid Prototyping: Quickly visualize your ideas and create video prototypes without needing complex video editing software.
- 🎨 Creative Storytelling: A powerful tool for writers, marketers, and creators to bring their stories to life through video.
- 📦 Media Management: Easily upload your own assets, download generated content, and manage your project files.
To use the AI-powered features of this application, you will need to configure it with your Google Cloud Platform (GCP) credentials. You can do this from the "Config" page within the application.
| Setting | Description |
|---|---|
| Gemini Text Model | The name of the Gemini model to use for text generation (e.g., gemini-2.5-pro). |
| Vertex Video Model | The name of the Vertex AI model for video generation (e.g., veo-3.1-generate-001). |
| Vertex Image Model | The name of the Vertex AI model for image generation (e.g., imagen-4.0-ultra-generate). |
| Google Cloud Project ID | Your GCP project ID. |
| GCS Bucket Name | The name of the Google Cloud Storage bucket where your media files will be stored. |
| GCP Location ID | The GCP location where your resources are hosted (e.g., us-central1). |
Note: You will need a Google Cloud Platform account with the Vertex AI and Cloud Storage APIs enabled to obtain these values.
| Icon | Description |
|---|---|
| ↻ | Redo/Generate: Generates or re-generates the media (image or video). |
| ⇧ | Upload: Upload your own image or video file. |
| 🗑 | Delete Media: Deletes the image or video from the scene. |
| ⇩ | Download: Downloads the media to your local machine. |
| ⤦ | Upscale: Enhances the resolution of the generated image. |
| < | Collapse Panel: Hides the project list panel. |
| > | Expand Panel: Shows the project list panel. |
| 🗑 | Delete Project: Deletes the entire project. |
The project includes scripts for deploying to Firebase hosting.
- Development:
npm run deploy-dev
- Production:
npm run deploy-prod