Gemini Image Generation & Editing

A powerful HTML5 chat application powered by Google’s Gemini AI with Image Generation capabilities.

Nano Banana Update:
Change the model in the script.js file, line number 3:
const MODEL_ID = 'gemini-2.5-flash-image-preview';
Note this model requires a PAID API Key.

Overview

Gemini Chat with Image Generation is a modern, responsive web application that allows users to interact with Google’s powerful Gemini AI model. This application not only supports intelligent text-based chat but also features advanced image generation and editing capabilities, allowing users to create images from text prompts, upload their own images for editing, and modify AI-generated images directly within the chat interface.

Built with pure HTML5, CSS, and JavaScript, this application is lightweight, easy to deploy, and works on any modern web hosting environment without requiring server-side processing.

Perfect For:

• Websites needing an AI chat assistant
• Creative tools for generating images from text
• ️ Graphic designers looking for AI-assisted image editing
• Educational platforms with AI-powered learning tools
• Content creation websites needing AI-generated images
• ‍ Developers looking to integrate Gemini AI into their projects

Key Features

• AI Chat Capability: Engage in intelligent conversations with Google’s powerful Gemini AI model
• ️ Image Generation: Create images from text prompts using Gemini’s image generation capabilities
• ✏️ Image Editing: Edit both uploaded and AI-generated images directly within the chat interface
• Image Upload: Upload images to include in your conversations with the AI or to edit them
• ️ Real-time Image Modifications: Request specific edits to images and see changes applied instantly
• Chat History: Save and manage conversations with automatic chat titles based on content
• Responsive Design: Works perfectly on both desktop and mobile devices
• Light/Dark Mode: Built-in theme toggle for comfortable viewing in any environment
• Download Generated Images: Save AI-generated and edited images to your device with one click
• Debug Console: Built-in debug panel for developers to monitor API responses and events
• ✨ Clean Code: Well-structured and commented code for easy customization
• No Dependencies: No external libraries or frameworks required (except Font Awesome for icons)

Responsive & Modern

The application features a clean, modern interface that adapts perfectly to any screen size. The sidebar automatically adjusts for mobile devices, and all features remain fully functional across all platforms.

⚡ Easy Installation

Getting started with Gemini Chat is incredibly easy:

1. Download the package files
2. ☁️ Upload to any web hosting service
3. Add your Google Gemini API key to the script.js file
4. Open in a browser and start chatting!

️ Customization Options

The application is designed to be easily customizable:

• Color themes can be modified through CSS variables
• ⚙️ API parameters can be adjusted for different Gemini models
• ️ UI elements can be customized to match your brand
• ️ Storage mechanisms can be altered for different persistence options

✏️ Image Generation & Editing

The application offers powerful image capabilities:

• Generate images from textual descriptions
• Upload your own images for AI-assisted editing
• Edit AI-generated images directly in the chat
• Request style changes, filters, object removal, and more
• ⚡ See edits applied in real-time during the chat
• Export edited images in high quality

Detailed Documentation

The package includes comprehensive documentation covering:

• Installation instructions
• API key setup
• ⚙️ Configuration options
• Usage guides
• Customization tutorials
• Troubleshooting tips

API Information & Pricing

This application is powered by Google’s Gemini API:

Free Tier Available:

• ✅ Input processing: Completely free
• ✅ Output generation: Completely free
• ✅ Perfect for testing and small-scale usage
• ✅ No credit card required to start

Paid Tier (per 1M tokens):

• Input: $0.10 (text/image)
• Output: $0.40

⚠️ Important API Disclaimer:

• You’ll need to obtain your own Google Gemini API key
• Get started at Google AI Studio
• Usage costs are billed directly by Google and are not included in the purchase price
• Pricing may change – always check the official pricing page
• ⏱️ Implement rate limiting and monitoring for cost control

Privacy & Security

The application is designed with privacy in mind:

• All conversations are stored locally in the browser
• No server-side storage or tracking
• All API requests are made directly from the user’s browser to Google’s servers

Technical Requirements

• Any modern web hosting service
• Modern web browser (Chrome, Firefox, Safari, Edge)
• Google Gemini API key
• ✅ No server-side processing required

Purchase includes full source code, documentation, and free updates.