Visual Novel Generator

An AI-powered visual novel generator that creates immersive stories with stunning illustrations using Google Gemini 3 Pro Preview.

Features

• AI Story Generation: Create complete visual novel stories from simple prompts
• AI Image Generation: Generate beautiful anime/manga-style illustrations for each scene
• Interactive Reader: Navigate through your story with an immersive reading experience
• Customizable: Choose the number of scenes (3-10) for your story
• Responsive Design: Works beautifully on both desktop and mobile devices

Tech Stack

• Frontend: React + TypeScript + Vite + Tailwind CSS
• Backend: Node.js + Express + TypeScript
• AI: Google Gemini 3 Pro Preview (gemini-3-pro-image-preview)

Prerequisites

• Node.js 18 or higher
• npm or yarn
• Google Gemini API key (Get one here)

Installation

1. Clone or navigate to the project directory

   cd visualnovelgenerator

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   cp .env.example .env

   Edit .env and add your Google Gemini API key:

   GEMINI_API_KEY=your_actual_api_key_here
   PORT=3001
   VITE_API_URL=http://localhost:3001
   

Usage

Development Mode

Run both the client and server in development mode:

npm run dev

This will start:

• Client on http://localhost:5173
• Server on http://localhost:3001

Running Separately

Client only:

npm run dev:client

Server only:

npm run dev:server

Production Build

npm run build

How to Use

1. Enter a Story Prompt

   • Describe your visual novel idea (e.g., "A detective solving a mystery in a cyberpunk city")
   • Minimum 10 characters, maximum 1000 characters

2. Choose Scene Count

   • Select between 3-10 scenes using the slider

3. Generate

   • Click "Generate Visual Novel" and wait 2-5 minutes
   • The AI will create your story and generate images for each scene

4. Read Your Visual Novel

   • Navigate through scenes using the arrow buttons or keyboard (← →)
   • Enjoy the immersive reading experience with text and images

5. Create Another Story

   • Click "Create New Story" to start over

Project Structure

visualnovelgenerator/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # UI components
│   │   ├── hooks/         # React hooks
│   │   ├── types/         # TypeScript types
│   │   └── utils/         # Utility functions
│   └── package.json
│
├── server/                # Express backend
│   ├── src/
│   │   ├── routes/       # API routes
│   │   ├── services/     # Business logic (Gemini API)
│   │   └── types/        # TypeScript types
│   └── package.json
│
├── .env                  # Environment variables (not tracked)
├── .env.example         # Environment template
└── package.json         # Root workspace config

API Endpoints

POST /api/generate

Generate a visual novel story with images.

Request:

{
  "prompt": "Your story idea",
  "sceneCount": 5
}

Response:

{
  "success": true,
  "story": {
    "title": "Generated Title",
    "scenes": [
      {
        "sceneNumber": 1,
        "text": "Scene description...",
        "imageData": "base64_encoded_image",
        "mimeType": "image/png"
      }
    ]
  }
}

Troubleshooting

API Key Issues

• Make sure your .env file exists in the root directory
• Verify your API key is correct and active
• Check the server console for error messages

Image Generation Fails

• Some scenes might fail to generate images due to API rate limits
• The story will still be created with text
• Try generating fewer scenes or wait a moment before retrying

Server Not Starting

• Ensure port 3001 is not already in use
• Check that all dependencies are installed (npm install)
• Verify your Node.js version is 18 or higher

Client Connection Issues

• Ensure the server is running
• Check that VITE_API_URL in .env matches your server URL
• Verify CORS is enabled on the server

Performance Notes

• Generation time: 2-5 minutes depending on scene count
• Images are generated at 2K resolution (16:9 aspect ratio)
• Each scene's image is typically 500KB-2MB in size

License

MIT

Credits

Powered by Google Gemini AI