File size: 3,153 Bytes
1c11297 332de48 1c11297 0721d3f 1c11297 8f1ef48 ca8bf05 f89068a 1c11297 332de48 c712fcf 332de48 c712fcf f89068a 332de48 c712fcf 332de48 c712fcf 332de48 1c11297 ca8bf05 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import streamlit as st
import time
from chatbot import generate_html_css_from_image
def main():
st.set_page_config(page_title="Gemini 2.5 Flash HTML/CSS Chatbot", layout="wide")
if "output_html" not in st.session_state:
st.session_state.output_html = None
if "last_image" not in st.session_state:
st.session_state.last_image = None
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, 5])
with left:
st.markdown(
"""
<div style='
border: 2px dashed #cccccc;
border-radius: 10px;
padding: 20px;
text-align: center;
background-color: #f9f9f9;
width: 100%;
'>
<h3 style="margin-top: 0;">📁 Upload Image</h3>
<p>Drag and drop or browse</p>
</div>
""",
unsafe_allow_html=True
)
uploaded_image = st.file_uploader(
label="Upload a website UI screenshot",
type=["jpg", "jpeg", "png"],
label_visibility="collapsed"
)
if uploaded_image:
st.image(uploaded_image, caption="Uploaded UI Image", use_column_width=True)
with right:
if uploaded_image:
current_name = getattr(uploaded_image, "name", "uploaded_image")
if st.session_state.last_image != current_name or st.session_state.output_html is None:
with st.spinner("Generating HTML + CSS using Gemini 2.5 Flash..."):
try:
output = generate_html_css_from_image(uploaded_image)
st.session_state.output_html = output
st.session_state.last_image = current_name
except Exception as e:
st.error(f"Error: {e}")
return
output = st.session_state.get("output_html")
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.002)
st.download_button(
"💾 Download HTML file",
data=output,
file_name="generated_ui.html",
mime="text/html"
)
else:
st.error("No output generated.")
else:
st.session_state.output_html = None
st.session_state.last_image = None
if __name__ == "__main__":
main() |