---
title: Gemini HTML/CSS Chatbot
emoji: 💬
colorFrom: yellow
colorTo: purple
sdk: streamlit
sdk_version: 1.32.0
app_file: app.py
pinned: false
license: apache-2.0
---

# Gemini HTML/CSS Chatbot

This Streamlit app uses **Gemini 2.5 Flash** (via LangChain + Google Generative AI) to convert website UI screenshots into **semantic, accessible, and responsive HTML + CSS** code.

---

## Features

- 📁 Upload a screenshot of a website UI
- 🧠 Gemini 2.5 Flash analyzes the layout
- 🏗️ Generates HTML5 with proper semantic tags
- 🎨 Outputs CSS with Flexbox/Grid and media queries
- ♿ Adds accessibility (alt text, ARIA labels)
- 📱 Mobile-first responsive design
- ⚡ Live typing animation just like ChatGPT
- 🌐 Runs entirely on Hugging Face Spaces

---

## Tech Stack

| Component         | Description                              |
|------------------|------------------------------------------|
| Streamlit        | Web UI framework                         |
| LangChain        | LLM orchestration                        |
| Gemini 2.5 Flash | Vision-language model by Google          |
| BeautifulSoup    | HTML parsing & cleanup                   |
| Pillow (PIL)     | Image processing                         |
| cssutils         | CSS parsing and selective rule handling  |

---

## Requirements

```txt
streamlit
Pillow
beautifulsoup4
cssutils
langchain
langchain-google-genai
google-generativeai