An AI-powered web application built for the Google Nano Banana (Gemini 2.5 Flash Image) Hackathon. This tool transforms you from a reader into a creator, allowing you to generate complete manga stories from a simple idea to the final, downloadable pages.
Your AI-powered co-creator for crafting unique manga stories.
Welcome to NanoManga Studio, an AI-powered web application built for the Google Nano Banana (Gemini 2.5 Flash Image) Hackathon. This tool transforms you from a reader into a creator, allowing you to generate complete manga stories from a simple idea to the final, downloadable pages.
<!-- RECOMMENDED: Replace this with a GIF of your application in action! -->
<!--  -->
Key Features
AI-Powered Ideation: Don't have an idea? The "Inspire Me" feature uses gemini-2.5-flash to generate a unique genre, story summary, and art style to kickstart your creativity.
Detailed Story Planning: Expand a simple idea into a full narrative plan. The AI acts as a story editor, breaking down your concept into a detailed summary, character descriptions, key environments, and a page-by-page plot with a clear narrative arc.
Context-Aware Asset Generation: Generate character sheets and environment art. The AI acts as an art director, creating full-body character designs on neutral backgrounds and atmospheric, character-free environment shots.
Sequential Page Generation: The core of the studio! Generate manga pages one by one. The AI uses visual memory, referencing previously generated pages and asset designs to maintain stunning visual and narrative consistency.
Interactive Manga Viewer & Editor: Your generated manga isn't static. Click any page to view it in high resolution, download it, or edit the prompt and regenerate it. The AI will re-draw the page while respecting the context of the pages before it.
Fully Editable AI Output: The entire story plan generated by the AI is a live workspace. You can edit character names, tweak plot points, and refine descriptions before you even start generating images.
The AI Core: How It Works with Gemini
NanoManga Studio's magic comes from its deep and nuanced integration with the Google Gemini API. We don't just ask for images; we have a conversation with an AI co-creator.
1. Foundation & Planning (gemini-2.5-flash)
The process begins with a structured dialogue. We ask the AI to act as a story editor, providing a complete narrative plan in a strict JSON format. This plan becomes the "source of truth" for the entire project.
2. Asset Art Direction (gemini-2.5-flash & gemini-2.5-flash-image-preview)
When generating assets, the AI is given a specific persona:
For characters, it's a character concept artist tasked with creating a full-body character sheet.
For environments, it's a background artist focused on atmospheric shots with no people.
This role-playing results in much higher-quality, more usable assets.
This is the most innovative use of the API. When generating a new page (e.g., Page 3), the prompt is a rich, multi-modal package:
Text Prompt: A detailed, panel-by-panel description of the page's action, inspired by the master story plan.
Visual Context (Previous Pages): The images for Page 1 and Page 2 are included as the first image inputs. The AI is explicitly told to use these for continuity.
Visual References (Assets): The images for the specific characters and environments that appear on Page 3 are also included. The AI is told to use these as the primary reference for drawing those elements.
This multi-modal, context-rich prompting allows the AI to maintain consistency in character appearance, clothing, and environment across multiple pages.
git clone https://github.com/Abubakr-Alsheikh/nanomanga-studio.git
cd nanomanga-studio
Install dependencies:
npm install
Set up your environment variables:
Create a new file named .env.local or copy from .env.example in the root of the project and add your Google AI Studio API key:
GEMINI_API_KEY="YOUR_API_KEY_HERE"
# Model Names (these are the recommended defaults)
GEMINI_IMAGE_MODEL="gemini-2.5-flash-image-preview"
GEMINI_TEXT_MODEL="gemini-2.5-flash"