Update app.py

app.py

@@ -1,94 +1,104 @@
 import streamlit as st
 from PIL import Image
 
-# Custom CSS to style the UI
+# Custom CSS for enhanced styling
 st.markdown("""
     <style>
-        .main {
-            background-color: #f0f2f6;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-        }
-        .sidebar .sidebar-content {
-            background-color: #2c3e50;
-            color: white;
+        body {
+            background-color: #f7f9fc;
+            font-family: 'Arial', sans-serif;
         }
-        .sidebar .sidebar-content a {
-            color: #f39c12;
+        .main {
+            background-color: #ffffff;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
         }
         .title {
-            color: #34495e;
-            font-family: 'Arial', sans-serif;
-            font-weight: bold;
-            font-size: 36px;
+            color: #2c3e50;
+            font-size: 40px;
+            font-weight: 700;
             text-align: center;
-            margin-bottom: 30px;
+            margin-bottom: 40px;
         }
-        .upload-button {
-            background-color: #1abc9c;
-            color: white;
-            border-radius: 5px;
-            padding: 10px;
+        .upload-area {
+            background-color: #e8f4f8;
+            padding: 20px;
+            border-radius: 10px;
+            border: 2px dashed #1abc9c;
             text-align: center;
-            font-weight: bold;
+            margin-bottom: 20px;
+        }
+        .upload-area:hover {
+            background-color: #d1ecf1;
         }
-        .run-button {
-            background-color: #2980b9;
+        .generate-button {
+            background-color: #1abc9c;
             color: white;
             border-radius: 5px;
             padding: 10px;
             font-weight: bold;
-            text-align: center;
             cursor: pointer;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .generate-button:hover {
+            background-color: #16a085;
+        }
+        .result-section {
+            margin-top: 40px;
+        }
+        .result-title {
+            color: #34495e;
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 20px;
+        }
+        .success {
+            background-color: #dff0d8;
+            color: #3c763d;
+            padding: 15px;
+            border-radius: 5px;
         }
     </style>
 """, unsafe_allow_html=True)
 
-# Main UI layout
+# Main UI container
 st.markdown('<div class="main">', unsafe_allow_html=True)
 st.markdown('<div class="title">Florence-2 Image Captioning Demo</div>', unsafe_allow_html=True)
 
-# Sidebar for model selection
-st.sidebar.markdown("## Model Configuration")
-model_option = st.sidebar.selectbox(
-    "Select Model",
-    ("microsoft/Florence-2-large-ft", "microsoft/Florence-2-large", "microsoft/Florence-2-base-ft", "microsoft/Florence-2-base")
-)
-
-# Task prompt selection
+# Task prompt input
 task_prompt = st.text_input("Task Prompt", value="Describe the image in detail:")
 
-# Text input (optional)
-text_input = st.text_area("Additional Text Input (Optional)", height=150)
+# Image upload area
+st.markdown('<div class="upload-area">', unsafe_allow_html=True)
+uploaded_image = st.file_uploader("Upload your image here", type=["jpg", "jpeg", "png"])
+st.markdown('</div>', unsafe_allow_html=True)
 
-# Image upload
-uploaded_image = st.file_uploader("Upload an Image", type=["jpg", "jpeg", "png"])
+# Additional text input (optional)
+text_input = st.text_area("Additional Text Input (Optional)", height=150)
 
-# Process the image if one is uploaded
+# Display the uploaded image and process it if available
 if uploaded_image is not None:
     image = Image.open(uploaded_image)
     st.image(image, caption="Uploaded Image", use_column_width=True)
-    
-    # Space between the image and the button
-    st.markdown("<br>", unsafe_allow_html=True)
-    
-    # Run button
-    if st.button("Generate Caption", key="run"):
-        # Assuming `run_example` function and others are defined
-        result = run_example(task_prompt, image, text_input, model_option)
-        
-        # Display results
-        st.markdown("### Generated Caption")
-        st.success(result["text"])  # Display the generated text
-        
-        # Display bounding boxes if available
+
+    # Generate Caption button
+    if st.button("Generate Caption", key="generate"):
+        # Assuming `run_example` function is defined
+        result = run_example(task_prompt, image, text_input)
+
+        # Display the generated caption
+        st.markdown('<div class="result-section">', unsafe_allow_html=True)
+        st.markdown('<div class="result-title">Generated Caption</div>', unsafe_allow_html=True)
+        st.markdown(f'<div class="success">{result["text"]}</div>', unsafe_allow_html=True)
+
+        # Display bounding boxes or polygons if available
         if "bboxes" in result:
             st.markdown("### Detected Objects")
             fig = plot_bbox(image, result)
             st.pyplot(fig)
-        
-        # Display polygons if available
+
         if "polygons" in result:
             st.markdown("### Image with Polygons")
             processed_image = draw_polygons(image.copy(), result)