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:

Download the package files
☁️ Upload to any web hosting service
Add your Google Gemini API key to the script.js file
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.

Gemini Image Generation & Editing