|
|
--- |
|
|
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 |
