Update app.py

app.py

@@ -8,23 +8,25 @@ import matplotlib.pyplot as plt
 from transformers import AutoModel, AutoProcessor
 from ultralytics import YOLO
 
-
-# Custom CSS for a more modern UI inspired by NextUI
+# Custom CSS for NextUI inspired look
 custom_css = """
 :root {
   --primary: #0070f3;
   --primary-foreground: #ffffff;
-  --background: #f5f5f5;
+  --secondary: #7928ca;
+  --background: #fafafa;
   --card: #ffffff;
   --card-foreground: #111111;
   --border: #eaeaea;
   --ring: #0070f3;
-  --shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.1);
+  --shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.2);
+  --radius: 0.75rem;
 }
 
 .dark {
   --primary: #0070f3;
   --primary-foreground: #ffffff;
+  --secondary: #9353d3;
   --background: #000000;
   --card: #111111;
   --card-foreground: #ffffff;
@@ -45,24 +47,27 @@ custom_css = """
 }
 
 .header {
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem;
   text-align: center;
 }
 
 .header h1 {
-  font-size: 2.5rem;
+  font-size: 3rem;
   font-weight: 800;
   color: var(--card-foreground);
-  margin-bottom: 0.5rem;
-  background: linear-gradient(to right, #0070f3, #00bfff);
+  margin-bottom: 0.75rem;
+  background: linear-gradient(to right, var(--primary), var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  letter-spacing: -0.025em;
 }
 
 .header p {
   color: var(--card-foreground);
   opacity: 0.8;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
 .tab-nav {
@@ -71,57 +76,67 @@ custom_css = """
   padding: 0.5rem;
   margin-bottom: 2rem;
   box-shadow: var(--shadow);
+  overflow: hidden;
 }
 
 .tab-nav button {
-  border-radius: var(--radius) !important;
+  border-radius: calc(var(--radius) - 0.25rem) !important;
   font-weight: 600 !important;
-  transition: all 0.2s ease-in-out !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
   padding: 0.75rem 1.5rem !important;
+  margin: 0.25rem !important;
 }
 
 .tab-nav button.selected {
-  background-color: var(--primary) !important;
+  background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
   color: var(--primary-foreground) !important;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.25);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.3);
 }
 
 .input-panel, .output-panel {
   background-color: var(--card);
   border-radius: var(--radius);
-  padding: 1.5rem;
+  padding: 1.75rem;
   box-shadow: var(--shadow);
   height: 100%;
   display: flex;
   flex-direction: column;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.input-panel:hover, .output-panel:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 118, 255, 0.25);
 }
 
 .input-panel h3, .output-panel h3 {
   font-size: 1.25rem;
   font-weight: 600;
-  margin-bottom: 1rem;
+  margin-bottom: 1.25rem;
   color: var(--card-foreground);
-  border-bottom: 2px solid var(--primary);
+  border-bottom: 2px solid;
+  border-image: linear-gradient(to right, var(--primary), var(--secondary)) 1;
   padding-bottom: 0.5rem;
   display: inline-block;
 }
 
 .gr-button-primary {
-  background-color: var(--primary) !important;
+  background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
   color: var(--primary-foreground) !important;
   border-radius: var(--radius) !important;
   font-weight: 600 !important;
-  transition: all 0.2s ease-in-out !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
   padding: 0.75rem 1.5rem !important;
-  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.25) !important;
+  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.3) !important;
   width: 100%;
-  margin-top: 1rem;
+  margin-top: 1.25rem;
+  border: none !important;
 }
 
 .gr-button-primary:hover {
   transform: translateY(-2px) !important;
-  box-shadow: 0 6px 20px rgba(0, 118, 255, 0.35) !important;
+  box-shadow: 0 6px 20px rgba(0, 118, 255, 0.4) !important;
 }
 
 .gr-form {
@@ -133,12 +148,14 @@ custom_css = """
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   padding: 0.75rem 1rem !important;
-  transition: all 0.2s ease-in-out !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  background-color: var(--card) !important;
 }
 
 .gr-input:focus, .gr-select:focus {
   border-color: var(--primary) !important;
   box-shadow: 0 0 0 2px rgba(0, 118, 255, 0.25) !important;
+  outline: none !important;
 }
 
 .gr-panel {
@@ -149,37 +166,88 @@ custom_css = """
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   overflow: hidden;
+  margin-top: 1rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.gr-accordion:hover {
+  border-color: var(--primary) !important;
 }
 
 .footer {
-  margin-top: 2rem;
+  margin-top: 3rem;
   border-top: 1px solid var(--border);
-  padding-top: 1.5rem;
-  font-size: 0.9rem;
+  padding-top: 2rem;
+  font-size: 0.95rem;
   color: var(--card-foreground);
-  opacity: 0.7;
+  opacity: 0.8;
   text-align: center;
 }
 
 .footer-card {
   background-color: var(--card);
   border-radius: var(--radius);
-  padding: 1.5rem;
+  padding: 1.75rem;
   box-shadow: var(--shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.footer-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 118, 255, 0.25);
 }
 
 .tips-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.25rem;
+  margin-top: 1.25rem;
 }
 
 .tip-card {
   background-color: var(--card);
   border-radius: var(--radius);
-  padding: 1rem;
-  border-left: 3px solid var(--primary);
+  padding: 1.25rem;
+  border-left: 3px solid;
+  border-image: linear-gradient(to bottom, var(--primary), var(--secondary)) 1 100%;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.tip-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 118, 255, 0.15);
+}
+
+/* Image upload area styling */
+.image-container {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  text-align: center;
+  transition: all 0.2s ease;
+}
+
+.image-container:hover {
+  border-color: var(--primary);
+}
+
+/* Slider styling */
+input[type=range] {
+  height: 6px;
+  border-radius: 10px;
+  background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  background: var(--primary) !important;
+  border: 2px solid white;
+  box-shadow: 0 2px 6px rgba(0, 118, 255, 0.3);
+}
+
+/* Loading animation */
+.gr-progress {
+  background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
 }
 """
 
@@ -399,10 +467,10 @@ def create_svg_from_detections(json_results, img_width, img_height):
     svg_header = f'<svg width="{img_width}" height="{img_height}" xmlns="http://www.w3.org/2000/svg">'
     svg_content = ""
     
-    # Color palette for different classes
+    # NextUI-inspired color palette
     colors = [
-        "#FF3B30", "#FF9500", "#FFCC00", "#4CD964", 
-        "#5AC8FA", "#007AFF", "#5856D6", "#FF2D55"
+        "#0070F3", "#7928CA", "#FF0080", "#50E3C2", 
+        "#F5A623", "#FF4D4D", "#0070F3", "#7928CA"
     ]
     
     for i, result in enumerate(json_results):
@@ -419,7 +487,7 @@ def create_svg_from_detections(json_results, img_width, img_height):
         # Select color based on class index
         color = colors[i % len(colors)]
         
-        # Create rectangle element
+        # Create rectangle element with rounded corners
         svg_content += f'''
   <rect 
     x="{x:.2f}" 
@@ -427,17 +495,30 @@ def create_svg_from_detections(json_results, img_width, img_height):
     width="{width:.2f}" 
     height="{height:.2f}" 
     stroke="{color}" 
-    stroke-width="2" 
+    stroke-width="2.5" 
     fill="none" 
+    rx="4"
+    ry="4"
     data-label="{label}"
     data-score="{score:.2f}"
   />
+  <rect
+    x="{x:.2f}"
+    y="{y-24:.2f}"
+    width="{min(width, len(label)*8 + 60):.2f}"
+    height="24"
+    fill="{color}"
+    rx="4"
+    ry="4"
+    opacity="0.9"
+  />
   <text 
-    x="{x:.2f}" 
-    y="{y-5:.2f}" 
+    x="{x+5:.2f}" 
+    y="{y-8:.2f}" 
     font-family="Arial" 
     font-size="12" 
-    fill="{color}"
+    font-weight="bold"
+    fill="white"
   >{label} ({score:.2f})</text>'''
     
     svg_footer = "\n</svg>"
@@ -448,10 +529,10 @@ def create_svg_from_segmentation(json_results, img_width, img_height):
     svg_header = f'<svg width="{img_width}" height="{img_height}" xmlns="http://www.w3.org/2000/svg">'
     svg_content = ""
     
-    # Color palette for different classes
+    # NextUI-inspired color palette
     colors = [
-        "#FF3B30", "#FF9500", "#FFCC00", "#4CD964", 
-        "#5AC8FA", "#007AFF", "#5856D6", "#FF2D55"
+        "#0070F3", "#7928CA", "#FF0080", "#50E3C2", 
+        "#F5A623", "#FF4D4D", "#0070F3", "#7928CA"
     ]
     
     for i, result in enumerate(json_results):
@@ -472,7 +553,7 @@ def create_svg_from_segmentation(json_results, img_width, img_height):
   <polygon 
     points="{points_str}" 
     stroke="{color}" 
-    stroke-width="2" 
+    stroke-width="2.5" 
     fill="{color}33" 
     data-label="{label}"
     data-score="{score:.2f}"
@@ -492,16 +573,29 @@ def create_svg_from_segmentation(json_results, img_width, img_height):
     width="{width:.2f}" 
     height="{height:.2f}" 
     stroke="{color}" 
-    stroke-width="1" 
+    stroke-width="1.5" 
     fill="none" 
+    rx="4"
+    ry="4"
     stroke-dasharray="5,5"
   />
+  <rect
+    x="{x:.2f}"
+    y="{y-24:.2f}"
+    width="{min(width, len(label)*8 + 60):.2f}"
+    height="24"
+    fill="{color}"
+    rx="4"
+    ry="4"
+    opacity="0.9"
+  />
   <text 
-    x="{x:.2f}" 
-    y="{y-5:.2f}" 
+    x="{x+5:.2f}" 
+    y="{y-8:.2f}" 
     font-family="Arial" 
     font-size="12" 
-    fill="{color}"
+    font-weight="bold"
+    fill="white"
   >{label} ({score:.2f})</text>'''
     
     svg_footer = "\n</svg>"
@@ -556,10 +650,10 @@ with gr.Blocks(title="YOLO Vision Suite", css=custom_css) as demo:
                 with gr.Row(equal_height=True):
                     with gr.Column(elem_classes="input-panel", scale=1):
                         gr.Markdown("### Input")
-                        input_image = gr.Image(label="Upload Image", type="numpy", height=300)
+                        input_image = gr.Image(label="Upload Image", type="numpy", height=300, elem_classes="image-container")
                         text_prompt = gr.Textbox(
                             label="Text Prompt", 
-                            placeholder="person, car, dog",
+                            placeholder="Enter objects to detect (e.g., person, car, dog)",
                             value="person, car, dog",
                             elem_classes="gr-input"
                         )
@@ -577,7 +671,7 @@ with gr.Blocks(title="YOLO Vision Suite", css=custom_css) as demo:
                                 label="Model Size",
                                 elem_classes="gr-select"
                             )
-                        detect_button = gr.Button("Detect Objects", elem_classes="gr-button-primary")
+                        detect_button = gr.Button("✨ Detect Objects", elem_classes="gr-button-primary")
                     
                     with gr.Column(elem_classes="output-panel", scale=1):
                         gr.Markdown("### Results")
@@ -595,7 +689,7 @@ with gr.Blocks(title="YOLO Vision Suite", css=custom_css) as demo:
                 with gr.Row(equal_height=True):
                     with gr.Column(elem_classes="input-panel", scale=1):
                         gr.Markdown("### Input")
-                        seg_input_image = gr.Image(label="Upload Image", type="numpy", height=300)
+                        seg_input_image = gr.Image(label="Upload Image", type="numpy", height=300, elem_classes="image-container")
                         with gr.Row():
                             seg_confidence = gr.Slider(
                                 minimum=0.1, 
@@ -610,7 +704,7 @@ with gr.Blocks(title="YOLO Vision Suite", css=custom_css) as demo:
                                 label="Model Size",
                                 elem_classes="gr-select"
                             )
-                        segment_button = gr.Button("Segment Image", elem_classes="gr-button-primary")
+                        segment_button = gr.Button("✨ Segment Image", elem_classes="gr-button-primary")
                     
                     with gr.Column(elem_classes="output-panel", scale=1):
                         gr.Markdown("### Results")
@@ -629,19 +723,19 @@ with gr.Blocks(title="YOLO Vision Suite", css=custom_css) as demo:
                 gr.Markdown("### Tips & Information")
                 with gr.Row(elem_classes="tips-grid"):
                     with gr.Column(elem_classes="tip-card"):
-                        gr.Markdown("**Detection**")
+                        gr.Markdown("**🔍 Detection**")
                         gr.Markdown("Enter comma-separated text prompts to specify what objects to detect")
                     
                     with gr.Column(elem_classes="tip-card"):
-                        gr.Markdown("**Segmentation**")
+                        gr.Markdown("**🧩 Segmentation**")
                         gr.Markdown("The model will identify and segment common objects automatically")
                     
                     with gr.Column(elem_classes="tip-card"):
-                        gr.Markdown("**Models**")
+                        gr.Markdown("**⚙️ Models**")
                         gr.Markdown("Larger models provide better accuracy but require more processing power")
                     
                     with gr.Column(elem_classes="tip-card"):
-                        gr.Markdown("**Output**")
+                        gr.Markdown("**📊 Output**")
                         gr.Markdown("JSON output provides coordinates as percentages, compatible with SVG")
     
     # Set up event handlers
@@ -658,5 +752,4 @@ with gr.Blocks(title="YOLO Vision Suite", css=custom_css) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(share=True)  # Set share=True to create a public link
-    
+    demo.launch(share=True)  # Set share=True to create a public link