README.md

metadata

title: VN-AI Studio
emoji: 🦀
colorFrom: yellow
colorTo: green
sdk: static
pinned: false
license: mit

VN-AI Studio

AI-Assisted Visual Novel Authoring Tool (Web-Based)

🚀 Live Demo
https://huggingface.co/spaces/devmeta/visual-novel-creator-v2

VN-AI Studio is a web-based visual novel creation tool that leverages generative AI to reduce the entry barriers of game development—such as story planning, character art creation, and scripting—and enables users to rapidly create, test, and export playable visual novel games.

---

Overview

Creating a visual novel traditionally requires multidisciplinary expertise in writing, illustration, and programming.
VN-AI Studio introduces an AI-assisted creation workflow that allows creators to focus on narrative structure and experimentation rather than technical implementation.

Core philosophy:

Generate many playable prototypes quickly, then curate and refine the best result.

---

Key Features

AI-Assisted Content Generation

• Automatic story generation from a simple theme input
• Character sprite generation with consistent visual style
• Automatic generation of four emotional expressions (neutral, happy, sad, angry)
• Background image generation from scene descriptions
• Automatic background removal using Canvas API and pixel-level chroma key analysis

Visual Novel Editor

• Scene creation and deletion
• Branching narrative structure with choice-based flow
• Dialogue editing with character and narration support
• Character management with prompt-based customization

Scene Tree Visualization

• Hierarchical scene tree for at-a-glance understanding
• Clear visualization of cause-and-effect between choices and outcomes
• Detection of unreachable (orphan) scenes
• Structural awareness of loops and branching complexity

Three-Stage Scene Architecture

1. Intro (Start Scene)
2. Development (Branching Scenes)
3. Ending (Result Scenes)

This structure guides coherent narrative pacing while preventing uncontrolled branching.

Play & Export

• In-browser preview player
• Standalone HTML export
• Ren’Py (.rpy) script export
• JSON-based project backup and restore

---

Technology Stack

• Frontend: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• AI Integration: Google Gemini API
  • gemini-2.5-flash (text)
  • gemini-2.5-flash-image (image)
• State Management: React Hooks
• Build Tools: Vite / Webpack
• Image Processing: HTML Canvas API

---

System Architecture

• Client-side processing only (no backend server)
• All logic, image processing, and file handling run in the browser
• Reduced operational cost and improved data privacy
• Entire project stored as a single JSON object for easy save/load/export

---

Data Schema (JSON Example)

{
  "title": "String",
  "characters": [
    {
      "id": "UUID",
      "name": "String",
      "expressions": [
        { "id": "UUID", "imageUrl": "Base64" }
      ]
    }
  ],
  "scenes": [
    {
      "id": "UUID",
      "dialogue": [
        { "text": "String", "characterId": "UUID" }
      ],
      "choices": [
        { "text": "String", "nextSceneId": "UUID" }
      ]
    }
  ]
}

---

User Workflow

1. Enter a theme and generate a story draft or demo project.
2. Configure game settings (title, synopsis, cover image, start scene).
3. Add characters and generate or upload expression sprites.
4. Review and adjust the branching scene tree.
5. Edit scene details: backgrounds, dialogue, and choices.
6. Preview the game and export as JSON, HTML, or Ren’Py scripts.

---

Expected Outcomes

• AI-Assisted Creation Support
  Enables non-experts to create playable visual novel games with AI assistance.

• Rapid Prototyping
  Quickly visualize and validate narrative ideas during the planning phase.

• Iterative Design Optimization
  Generate multiple prototypes and select the most promising one for refinement.

• Structure-Oriented Narrative Design
  Scene tree visualization encourages logical and coherent storytelling.

• Reduced Development Cost
  Serverless, client-side architecture minimizes infrastructure requirements.

• Scalability
  Ren’Py export allows seamless transition from prototype to commercial development.

---

Credits

Created by: Tae-wan Kim