AI Canvas Studio Pro

This is a powerful, browser-based creative tool that leverages multiple AI models to enable advanced image and video generation on a dynamic canvas.

Features

• Modern UI: A sleek, intuitive interface with floating toolbars.
• Advanced Drawing Tools: Draw freehand, create shapes (rectangles, circles, triangles), pan the canvas, and erase objects.
• Undo/Redo: Easily correct mistakes and iterate on your designs.
• Contextual AI Prompt Bar: Select images to bring up a powerful bar for editing. Use text prompts and quick effects to modify your images.
• Multi-Image Composition: (Gemini only) Select multiple images and use a text prompt to generate a new composite image.
• Single Image Editing: Select a single image and describe your desired changes in the prompt bar.
• Text-to-Image Generation: (Doubao only) Create new images from a text prompt using the toolbar.
• Image-to-Video Generation: (Gemini only) Generate a short video from a single image.
• Interactive Canvas: Upload, move, resize, and manage the layer order of objects.
• API Key Storage: Securely save your API keys in your browser's local storage.

Prerequisites

To run this application, you need one of the following installed on your computer:

• Python 3 (most macOS and Linux systems have it pre-installed)
• Node.js and npx (which comes with Node.js)

How to Run (Required)

This application must be run from a local web server due to browser security policies (CORS). Simply opening the index.html file in a browser will not work.

1. Download the Files

Download all project files and place them in a single folder.

2. Start a Local Server

Open your terminal or command prompt, navigate into the project directory, and run one of the following commands:

Option A: Using Python

# This command starts a server.
python3 -m http.server

Option B: Using Node.js

# This command downloads and runs a temporary server package.
npx serve

3. Open the Application

Once the server is running, your terminal will show a local URL. Open your web browser and navigate to that address. It will usually be:

http://localhost:8000 (for Python) or http://localhost:3000 (for npx serve)

API Key Configuration

To use the AI features, you must provide your own API keys. The app will prompt you to enter a key the first time you try to use an AI feature. You can also open the settings manually from the toolbar.

1. Click the Settings button in the top toolbar to open the API key modal.
2. Enter your respective API keys in the input fields.
3. Click Save.
4. Your keys are now saved in the browser's local storage for future sessions.