Spaces:
Running
Running
| title: Nano Banana AIO | |
| emoji: 🍌 | |
| colorFrom: gray | |
| colorTo: purple | |
| 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. |