Update app.py

app.py

@@ -1,20 +1,66 @@
 import streamlit as st
 from PIL import Image
 
-# UI Layout
-st.title("Florence-2 Demo")
+# Custom CSS to style the UI
+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;
+        }
+        .sidebar .sidebar-content a {
+            color: #f39c12;
+        }
+        .title {
+            color: #34495e;
+            font-family: 'Arial', sans-serif;
+            font-weight: bold;
+            font-size: 36px;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .upload-button {
+            background-color: #1abc9c;
+            color: white;
+            border-radius: 5px;
+            padding: 10px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .run-button {
+            background-color: #2980b9;
+            color: white;
+            border-radius: 5px;
+            padding: 10px;
+            font-weight: bold;
+            text-align: center;
+            cursor: pointer;
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+# Main UI layout
+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 = st.text_input("Task Prompt", value="Caption the image:")
+task_prompt = st.text_input("Task Prompt", value="Describe the image in detail:")
 
 # Text input (optional)
-text_input = st.text_input("Text Input (Optional)")
+text_input = st.text_area("Additional Text Input (Optional)", height=150)
 
 # Image upload
 uploaded_image = st.file_uploader("Upload an Image", type=["jpg", "jpeg", "png"])
@@ -23,22 +69,29 @@ uploaded_image = st.file_uploader("Upload an Image", type=["jpg", "jpeg", "png"]
 if uploaded_image is not None:
     image = Image.open(uploaded_image)
     st.image(image, caption="Uploaded Image", use_column_width=True)
-
-    # Run the model
-    if st.button("Run"):
-        # Assuming `run_example` function and others are defined as per the previous code snippet.
+    
+    # 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.subheader("Generated Output")
-        st.write(result["text"])  # Display the generated text
-
+        st.markdown("### Generated Caption")
+        st.success(result["text"])  # Display the generated text
+        
         # Display bounding boxes 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)
             st.image(processed_image, caption="Image with Polygons", use_column_width=True)
+
+st.markdown('</div>', unsafe_allow_html=True)