NanoManga Studio 🎨✨

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.

🚀 Live Demo: nanomanga-studio.vercel.app 🚀

---

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.

3. Contextual Page Generation (gemini-2.5-flash-image-preview)

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.

Tech Stack

• Framework: Next.js 15+ (App Router)
• UI Components: shadcn/ui
• Styling: Tailwind CSS
• AI Integration: Google AI JavaScript SDK (@google/generative-ai)
• Models: gemini-2.5-flash-image-preview & gemini-2.5-flash
• Language: TypeScript
• Deployment: Vercel

Getting Started

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Abubakr-Alsheikh/nanomanga-studio.git
   cd nanomanga-studio

2. Install dependencies:

   npm install

3. 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"
   

   You can get an API key from Google AI Studio.

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser to see the result.

---

Built with ❤️ for the Google Nano Banana Hackathon.