A newer version of the Streamlit SDK is available:
1.51.0
metadata
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
streamlit
Pillow
beautifulsoup4
cssutils
langchain
langchain-google-genai
google-generativeai