🤖 Gemini AI Chat Application

A Fully Functional AI Chat Application Powered by Google's Gemini

---

✨ View Live Demo »

---

📹 Demo Video

Screencast from 2025-06-06 11-43-36.webm

📌 Introduction

Welcome to the Gemini AI Chat Application! This is a fully functional AI chat application powered by Google's Gemini API. Experience natural conversations, code assistance, and creative content generation through a beautifully designed, responsive web application. This project demonstrates the practical implementation of AI capabilities using modern web technologies.

✨ Key Features

• 🎯 Pixel-Perfect UI - Meticulously crafted interface matching Google's Gemini design
• 📱 Responsive Design - Seamless experience across all devices and screen sizes
• 🚀 Performance Optimized - Lightning-fast responses and smooth animations
• 🔑 API Integration - Pre-configured API key for instant testing and deployment
• 🎨 Modern Interface - Clean, intuitive design with attention to detail
• 🛠️ Developer Friendly - Well-structured codebase with comprehensive documentation

🎯 Core Functionality

• 🤖 Advanced AI Chat - Natural language processing and understanding
• 💡 Smart Responses - Contextual and informative AI-powered replies
• ⚡ Real-time Processing - Instant response generation and display
• 🔍 Code Intelligence - Syntax highlighting and code explanation
• 📝 Rich Text Support - Markdown rendering and formatting
• 🛡️ Error Handling - Graceful error recovery and user feedback
• 🌐 Cross-platform - Works seamlessly across all modern browsers

🛠️ Technical Stack

Category	Technologies
Frontend
Libraries
UI Components
Deployment
Version Control

📁 Project Structure

Gemini-Clone/
├── assets/                  # Static assets directory
│   ├── gemini.svg          # Gemini logo
│   ├── Logo.png            # Project logo
│   ├── profile.png         # Profile images
│   ├── boxicons-2.1.4/     # Boxicons library
│   ├── highlight-js/       # Code syntax highlighting
│   └── marked/             # Markdown parsing
├── index.html              # Main HTML file
├── style.css              # Main stylesheet
├── script.js             # Main JavaScript file
├── config.js            # Configuration file
├── README.md           # Project documentation
└── LICENSE.txt        # MIT license

🚀 Quick Start

Prerequisites

• Modern web browser
• Basic understanding of web technologies
• Git installed on your machine

Installation

1. Clone the repository

   git clone https://github.com/GourangaDasSamrat/Gemini-Clone.git
   

2. Navigate to project directory

   cd Gemini-Clone
   

3. Open in browser

   # On Linux/macOS
   open index.html
   # Or simply double-click index.html in your file explorer
   

📝 Important Note: The project includes a demo API key for testing. For production use, please replace it with your own API key in config.js.

Live Demo

Experience the live version: Gemini Clone Demo

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

⚠️ Disclaimer

This project is an independent creation and is not affiliated with, endorsed by, or connected to Google or the official Gemini product in any way. It is built solely for educational and demonstration purposes.

👤 Author & Contact

📊 Performance & Lighthouse Report

Desktop Performance Scores

Key Metrics

Metric	Score
First Contentful Paint
Largest Contentful Paint
Total Blocking Time
Cumulative Layout Shift
Speed Index

Bundle Size Analysis

Resource	Size
JavaScript
CSS