Update app.py

app.py

@@ -8,25 +8,137 @@ import matplotlib.pyplot as plt
 from transformers import AutoModel, AutoProcessor
 from ultralytics import YOLO
 
-# Custom CSS for NextUI inspired look
+# Custom CSS for shadcn/Radix UI inspired look
+custom_css = """
+:root {
+  --primary: #0f172a;
+  --primary-foreground: #f8fafc;
+  --background: #f8fafc;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --border: #e2e8f0;
+  --ring: #94a3b8;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --primary: #f8fafc;
+  --primary-foreground: #0f172a;
+  --background: #0f172a;
+  --card: #1e293b;
+  --card-foreground: #f8fafc;
+  --border: #334155;
+  --ring: #94a3b8;
+}
+
+.gradio-container {
+  margin: 0 !important;
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+
+.main-container {
+  background-color: var(--background);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 1rem;
+}
+
+.header h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 0.5rem;
+}
+
+.header p {
+  color: var(--card-foreground);
+  opacity: 0.8;
+}
+
+.tab-nav {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.tab-nav button {
+  border-radius: calc(var(--radius) - 0.25rem) !important;
+  font-weight: 500 !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+.tab-nav button.selected {
+  background-color: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+}
+
+.input-panel, .output-panel {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.gr-button-primary {
+  background-color: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border-radius: var(--radius) !important;
+  font-weight: 500 !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+.gr-button-primary:hover {
+  opacity: 0.9 !important;
+}
+
+.gr-form {
+  border: none !important;
+  background: transparent !important;
+}
+
+.gr-input, .gr-select {
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius) !important;
+  padding: 0.5rem 0.75rem !important;
+}
+
+.gr-panel {
+  border: none !important;
+}
+
+.footer {
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1rem;
+  font-size: 0.875rem;
+  color: var(--card-foreground);
+  opacity: 0.7;
+}"""
+# Custom CSS for a more modern UI inspired by NextUI
 custom_css = """
 :root {
   --primary: #0070f3;
   --primary-foreground: #ffffff;
-  --secondary: #7928ca;
-  --background: #fafafa;
+  --background: #f5f5f5;
   --card: #ffffff;
   --card-foreground: #111111;
   --border: #eaeaea;
   --ring: #0070f3;
-  --shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.2);
-  --radius: 0.75rem;
+  --shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.1);
 }
 
 .dark {
   --primary: #0070f3;
   --primary-foreground: #ffffff;
-  --secondary: #9353d3;
   --background: #000000;
   --card: #111111;
   --card-foreground: #ffffff;
@@ -43,31 +155,27 @@ custom_css = """
 .main-container {
   background-color: var(--background);
   padding: 2rem;
-  min-height: 100vh;
 }
 
 .header {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2rem;
   text-align: center;
 }
 
 .header h1 {
-  font-size: 3rem;
+  font-size: 2.5rem;
   font-weight: 800;
   color: var(--card-foreground);
-  margin-bottom: 0.75rem;
-  background: linear-gradient(to right, var(--primary), var(--secondary));
+  margin-bottom: 0.5rem;
+  background: linear-gradient(to right, #0070f3, #00bfff);
   -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.2rem;
-  max-width: 600px;
-  margin: 0 auto;
+  font-size: 1.1rem;
 }
 
 .tab-nav {
@@ -76,67 +184,57 @@ custom_css = """
   padding: 0.5rem;
   margin-bottom: 2rem;
   box-shadow: var(--shadow);
-  overflow: hidden;
 }
 
 .tab-nav button {
-  border-radius: calc(var(--radius) - 0.25rem) !important;
+  border-radius: var(--radius) !important;
   font-weight: 600 !important;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition: all 0.2s ease-in-out !important;
   padding: 0.75rem 1.5rem !important;
-  margin: 0.25rem !important;
 }
 
 .tab-nav button.selected {
-  background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
+  background-color: var(--primary) !important;
   color: var(--primary-foreground) !important;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.25);
 }
 
 .input-panel, .output-panel {
   background-color: var(--card);
   border-radius: var(--radius);
-  padding: 1.75rem;
+  padding: 1.5rem;
   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: 1.25rem;
+  margin-bottom: 1rem;
   color: var(--card-foreground);
-  border-bottom: 2px solid;
-  border-image: linear-gradient(to right, var(--primary), var(--secondary)) 1;
+  border-bottom: 2px solid var(--primary);
   padding-bottom: 0.5rem;
   display: inline-block;
 }
 
 .gr-button-primary {
-  background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
+  background-color: var(--primary) !important;
   color: var(--primary-foreground) !important;
   border-radius: var(--radius) !important;
   font-weight: 600 !important;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition: all 0.2s ease-in-out !important;
   padding: 0.75rem 1.5rem !important;
-  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.3) !important;
+  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.25) !important;
   width: 100%;
-  margin-top: 1.25rem;
-  border: none !important;
+  margin-top: 1rem;
 }
 
 .gr-button-primary:hover {
   transform: translateY(-2px) !important;
-  box-shadow: 0 6px 20px rgba(0, 118, 255, 0.4) !important;
+  box-shadow: 0 6px 20px rgba(0, 118, 255, 0.35) !important;
 }
 
 .gr-form {
@@ -148,14 +246,12 @@ custom_css = """
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   padding: 0.75rem 1rem !important;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  background-color: var(--card) !important;
+  transition: all 0.2s ease-in-out !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 {
@@ -166,88 +262,37 @@ 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: 3rem;
+  margin-top: 2rem;
   border-top: 1px solid var(--border);
-  padding-top: 2rem;
-  font-size: 0.95rem;
+  padding-top: 1.5rem;
+  font-size: 0.9rem;
   color: var(--card-foreground);
-  opacity: 0.8;
+  opacity: 0.7;
   text-align: center;
 }
 
 .footer-card {
   background-color: var(--card);
   border-radius: var(--radius);
-  padding: 1.75rem;
+  padding: 1.5rem;
   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(220px, 1fr));
-  gap: 1.25rem;
-  margin-top: 1.25rem;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
 }
 
 .tip-card {
   background-color: var(--card);
   border-radius: var(--radius);
-  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;
+  padding: 1rem;
+  border-left: 3px solid var(--primary);
 }
 """
 
@@ -467,10 +512,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 = ""
     
-    # NextUI-inspired color palette
+    # Color palette for different classes
     colors = [
-        "#0070F3", "#7928CA", "#FF0080", "#50E3C2", 
-        "#F5A623", "#FF4D4D", "#0070F3", "#7928CA"
+        "#FF3B30", "#FF9500", "#FFCC00", "#4CD964", 
+        "#5AC8FA", "#007AFF", "#5856D6", "#FF2D55"
     ]
     
     for i, result in enumerate(json_results):
@@ -487,7 +532,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 with rounded corners
+        # Create rectangle element
         svg_content += f'''
   <rect 
     x="{x:.2f}" 
@@ -495,30 +540,17 @@ def create_svg_from_detections(json_results, img_width, img_height):
     width="{width:.2f}" 
     height="{height:.2f}" 
     stroke="{color}" 
-    stroke-width="2.5" 
+    stroke-width="2" 
     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+5:.2f}" 
-    y="{y-8:.2f}" 
+    x="{x:.2f}" 
+    y="{y-5:.2f}" 
     font-family="Arial" 
     font-size="12" 
-    font-weight="bold"
-    fill="white"
+    fill="{color}"
   >{label} ({score:.2f})</text>'''
     
     svg_footer = "\n</svg>"
@@ -529,10 +561,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 = ""
     
-    # NextUI-inspired color palette
+    # Color palette for different classes
     colors = [
-        "#0070F3", "#7928CA", "#FF0080", "#50E3C2", 
-        "#F5A623", "#FF4D4D", "#0070F3", "#7928CA"
+        "#FF3B30", "#FF9500", "#FFCC00", "#4CD964", 
+        "#5AC8FA", "#007AFF", "#5856D6", "#FF2D55"
     ]
     
     for i, result in enumerate(json_results):
@@ -553,7 +585,7 @@ def create_svg_from_segmentation(json_results, img_width, img_height):
   <polygon 
     points="{points_str}" 
     stroke="{color}" 
-    stroke-width="2.5" 
+    stroke-width="2" 
     fill="{color}33" 
     data-label="{label}"
     data-score="{score:.2f}"
@@ -573,29 +605,16 @@ def create_svg_from_segmentation(json_results, img_width, img_height):
     width="{width:.2f}" 
     height="{height:.2f}" 
     stroke="{color}" 
-    stroke-width="1.5" 
+    stroke-width="1" 
     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+5:.2f}" 
-    y="{y-8:.2f}" 
+    x="{x:.2f}" 
+    y="{y-5:.2f}" 
     font-family="Arial" 
     font-size="12" 
-    font-weight="bold"
-    fill="white"
+    fill="{color}"
   >{label} ({score:.2f})</text>'''
     
     svg_footer = "\n</svg>"
@@ -650,10 +669,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, elem_classes="image-container")
+                        input_image = gr.Image(label="Upload Image", type="numpy", height=300)
                         text_prompt = gr.Textbox(
                             label="Text Prompt", 
-                            placeholder="Enter objects to detect (e.g., person, car, dog)",
+                            placeholder="person, car, dog",
                             value="person, car, dog",
                             elem_classes="gr-input"
                         )
@@ -671,7 +690,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")
@@ -689,7 +708,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, elem_classes="image-container")
+                        seg_input_image = gr.Image(label="Upload Image", type="numpy", height=300)
                         with gr.Row():
                             seg_confidence = gr.Slider(
                                 minimum=0.1, 
@@ -704,7 +723,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")
@@ -723,19 +742,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