Visual AI Prompting Canvas

Welcome to the Visual AI Prompting Canvas! This is an innovative, node-based web application that allows you to visually compose and interact with generative AI. Instead of just writing text prompts, you can connect images and ideas in a freeform canvas, creating a powerful and intuitive workflow for generating new visuals with the Google Gemini API.

✨ Key Features

• Node-Based Interface: Create and manage different types of nodes:
  • Upload/Image: Add your own images to the canvas as inputs.
  • Prompt: Write text prompts that can take images as context.
  • Generated: View and use AI-generated images as inputs for further prompts.
• Visual Connections: Intuitively connect nodes by dragging lines between them to build complex creative workflows.
• AI-Powered Image Generation: Leverages the Google Gemini API's multimodal capabilities to edit and generate images based on a combination of text and image inputs.
• Infinite Interactive Canvas: Pan and zoom around a limitless canvas to organize your ideas without constraints.
• Dynamic UI: Elements like the prompt node automatically resize to fit your content, ensuring a clean and user-friendly experience.
• High-Performance Interactions: Enjoy smooth, lag-free dragging of nodes and connections, thanks to direct DOM manipulation during high-frequency events.
• Modern & Clean Aesthetic: A polished and visually appealing interface that makes the creative process enjoyable.

🚀 Technology Stack

This project is built with a modern frontend stack, focusing on performance, scalability, and a great developer experience.

• Framework: React
• Language: TypeScript
• Styling: Tailwind CSS
• Generative AI: Google Gemini API (@google/genai)
• Unique IDs: UUID

🛠️ Getting Started: Running Locally

To run the Visual AI Prompting Canvas on your local machine, please follow these steps.

Prerequisites

• Node.js: Ensure you have a recent version of Node.js installed (LTS version recommended). You can download it from nodejs.org.
• Package Manager: This guide uses npm, which is included with Node.js. You can also use yarn or pnpm.
• Google Gemini API Key: You'll need an API key to use the generative AI features.
  1. Go to Google AI Studio.
  2. Click "Get API key" and create a new API key in a project.
  3. Copy the key securely. Do not commit it to your repository.

Installation & Setup

1. Clone the Repository

   git clone https://github.com/your-username/visual-ai-canvas.git
   cd visual-ai-canvas

2. Install Dependencies

   Since this project is set up as a static application without a package.json, you would typically introduce a build tool like Vite or Create React App. For the purpose of running this specific structure, let's assume you'll set up a minimal environment.

   If you were to use Vite (recommended):

   # In a new project initialized with Vite + React + TS
   npm install @google/genai uuid
   npm install -D @types/uuid

3. Set Up Environment Variables

   The application expects your Gemini API key to be available as an environment variable. In a typical local development setup (like with Vite), you would:

   a. Create a file named .env.local in the root of your project directory.

   b. Add your API key to this file. Remember to replace YOUR_GEMINI_API_KEY with your actual key.

   # .env.local
   API_KEY=YOUR_GEMINI_API_KEY
   

   The geminiService.ts file is configured to read this key. In a Vite project, you would access it via import.meta.env.VITE_API_KEY after renaming the variable in the .env.local file.

4. Run the Development Server

   If you are using a simple static server, you can use a tool like serve:

   # Install serve globally if you don't have it
   npm install -g serve
   
   # Serve the project directory
   serve .

   You will then be able to access the application in your browser at the local address provided by the server (e.g., http://localhost:3000).

   Note: For process.env.API_KEY to work correctly in a browser environment, a build tool like Vite is required to substitute the variable at build time. The serve method above will not work out-of-the-box without modifying the code to either hardcode the key (not recommended) or load it from a configuration file.