Spaces:
Running
title: Nano Banana AIO
emoji: 🍌
colorFrom: gray
colorTo: purple
sdk: docker
pinned: true
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 |
| GitHub | PRITHIVSAKTHIUR/Nano-Banana-AIO-HF |
| 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.