| import streamlit as st | |
| import time | |
| from chatbot import generate_html_css_from_image | |
| st.set_page_config(page_title="Gemini 2.5 Flash HTML/CSS Chatbot", layout="wide") | |
| st.markdown(""" | |
| <div style='text-align: center; padding: 10px 0;'> | |
| <h1>Welcome, Gemini 2.5 Flash HTML/CSS Chatbot</h1> | |
| </div> | |
| <div style='text-align: center;'> | |
| <p style='font-size: 18px; background-color: #e6f0ff; padding: 10px; border-radius: 8px; display: inline-block;'> | |
| 📁 Please upload an image of a website UI | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| left, right = st.columns([1, 7]) | |
| with left: | |
| st.markdown("### 📁 Upload Image") | |
| uploaded_image = st.file_uploader("Drag and drop or browse", type=["jpg", "jpeg", "png"]) | |
| with right: | |
| if uploaded_image: | |
| with st.spinner("Generating HTML + CSS using Gemini 2.5 Flash..."): | |
| try: | |
| output = generate_html_css_from_image(uploaded_image) | |
| if output: | |
| st.subheader("💬 Generated HTML + CSS:") | |
| placeholder = st.empty() | |
| typed_text = "" | |
| for char in output: | |
| typed_text += char | |
| placeholder.code(typed_text, language="html") | |
| time.sleep(0.007) | |
| else: | |
| st.error("No output generated. Please try again.") | |
| except Exception as e: | |
| st.error(f"Error: {e}") | |