README.md

---
title: Nano Banana AIO
emoji: 🍌
colorFrom: pink
colorTo: gray
sdk: docker
pinned: false
license: apache-2.0
app_port: 3000
short_description: All in One Banana for you!
---

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

---

## **Nano Banana AIO**

Nano Banana AIO is an all-in-one image manipulation application powered by the Gemini API. It offers multiple modes: an "Editor" for single-image modifications, a "Multi-Image Edit" for combining or editing several images, a "Canvas" for freehand drawing with undo/redo functionality, and an "Image Gen" mode for generating images from text prompts. Users can upload images via drag-and-drop or file input, clear their workspace, and submit prompts to the AI for various image generation and editing tasks, with error handling for a smooth experience.

| **Built by**           | **Link**                                                                            |
| ---------------------- | ----------------------------------------------------------------------------------- |
| **Prithiv Sakthi U R** |                                                                                     |
| **Hugging Face**       | [huggingface.co/spaces/prithivMLmods](https://huggingface.co/spaces/prithivMLmods/) |
| **GitHub**             | [PRITHIVSAKTHIUR/Nano-Banana-AIO-HF](https://github.com/PRITHIVSAKTHIUR/Nano-Banana-AIO-HF)                    |
| **LinkedIn**           | [linkedin.com/in/prithiv-sakthi](https://www.linkedin.com/in/prithiv-sakthi/)       |

> The tech stack for Nano Banana AIO includes:

This project is built with a modern and efficient tech stack focused on creating an interactive and responsive user experience. The frontend is developed using **React**, providing a dynamic component-based architecture for building the user interface. For styling, it uses **Tailwind CSS**, which offers a utility-first approach and ensures responsive, clean, and consistent design using classes like `p-2`, `flex`, `rounded-full`, and `shadow`. To enhance the visual interface, **Lucide React** is used for incorporating scalable SVG icons such as `ChevronDown`, `Library`, `LoaderCircle`, and others, adding clarity and interactivity to the UI elements.

On the backend and AI side, the application integrates the **Google Gemini API (@google/genai)**, specifically leveraging the `gemini-2.5-flash-image-preview` model for image generation and manipulation tasks. It securely manages API keys through **environment variables** (`process.env.API_KEY`), ensuring sensitive data is not exposed. Additionally, the project implements **native Canvas API** for drawing and image manipulation functionalities within the Canvas mode, while **FileReader** and DOM events are used to handle file uploads through drag-and-drop or input-based interactions, enabling smooth media handling directly in the browser.