nanomanga-studio

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #golang #linux #windows #kubernetes #awesome-list #ios #mcp #open-source

nanomanga-studio

(★ 7)

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.

nanomanga-studio 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# NanoManga Studio 🎨✨

**Your AI-powered co-creator for crafting unique manga stories.**

[![Deployed on Vercel](https://vercel.com/button)](https://nanomanga-studio.vercel.app/)

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](https://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](https://nextjs.org/) 15+ (App Router)
* **UI Components:** [shadcn/ui](https://ui.shadcn.com/)
* **Styling:** [Tailwind CSS](https://tailwindcss.com/)
* **AI Integration:** [Google AI JavaScript SDK (`@google/generative-ai`)](https://github.com/googleapis/js-genai)
* **Models:** `gemini-2.5-flash-image-preview` & `gemini-2.5-flash`
* **Language:** [TypeScript](https://www.typescriptlang.org/)
* **Deployment:** [Vercel](https://vercel.com/)

## Getting Started

To run this project locally, follow these steps:

1. **Clone the repository:**

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

2. **Install dependencies:**

```bash
    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](https://aistudio.google.com/).

4. **Run the development server:**

```bash
    npm run dev
    ```

5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.

---
Built with ❤️ for the Google Nano Banana Hackathon.

nanomanga-studio

nanomanga-studio 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

nanomanga-studio

nanomanga-studio 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README