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}")