Update SR110 results card design and remove emojis

- Changed from dark theme to light card design matching MobileNet demo
- Removed all emojis from section headers and error messages
- Applied consistent styling with gradient headers and clean layout
- Maintained 4-card grid structure for performance metrics

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -106,12 +106,14 @@ def run_vela(model_file):
         ]
         if any(pat in vela_stdout for pat in unsupported_patterns):
             summary_html = (
-                "<div class='sr110-results' style='background:#fff3f3;border-radius:14px;padding:24px 18px 18px 18px;"
-                "max-width:430px;min-width:320px;width:100%;margin:auto;color:#d32f2f;font-family:sans-serif;"
-                "font-size:1.1em;text-align:left;font-weight:600;'>"
-                "This model has unsupported layers and needs investigation based on layers.<br>"
-                "Please use Vela compiler on your Host Machine for further analysis."
+                "<div class='sr110-results card' style='background:#fafafa;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;margin-bottom:1.5rem;max-width:500px;width:100%;margin:auto;overflow:hidden;'>"
+                "<div class='card-header' style='background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:white;padding:1rem 1.5rem;border-radius:12px 12px 0 0;font-weight:600;font-size:1.1rem;'>"
+                "<span style='color:white;font-weight:600;'>Unsupported Model</span>"
                 "</div>"
+                "<div class='card-content' style='padding:1.5rem;color:#4b5563;line-height:1.6;background:#fafafa;text-align:center;'>"
+                "This model has unsupported layers and needs investigation based on layers.<br><br>"
+                "Please use Vela compiler on your Host Machine for further analysis."
+                "</div></div>"
             )
             # Try to provide per-layer.csv if available for download
             per_layer_csv = None
@@ -139,34 +141,33 @@ def run_vela(model_file):
             return val.lstrip("= ").strip() if isinstance(val, str) else val
 
         summary_html = (
-            "<div class='sr110-results' style='background:#1e1e2f;border-radius:18px;padding:18px 18px 12px 18px;"
-            "max-width:430px;min-width:320px;width:100%;margin:auto;color:#eee;font-family:sans-serif;'>"
-            "<h3 class='sr110-title' style='margin-top:0;margin-bottom:12px;font-size:1.35em;color:#00b0ff;text-align:left;'>Estimated Results on SR110</h3>"
-            "<div style='display:flex;flex-wrap:wrap;gap:10px;justify-content:center;'>"
+            "<div class='sr110-results card' style='background:#fafafa;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;margin-bottom:1.5rem;max-width:500px;width:100%;margin:auto;overflow:hidden;'>"
+            "<div class='card-header' style='background:linear-gradient(135deg,#1975cf 0%,#1557b0 100%);color:white;padding:1rem 1.5rem;border-radius:12px 12px 0 0;font-weight:600;font-size:1.1rem;'>"
+            "<span style='color:white;font-weight:600;'>Estimated Results on SR110</span>"
+            "</div>"
+            "<div class='card-content' style='padding:1.5rem;color:#4b5563;line-height:1.6;background:#fafafa;'>"
+            "<div style='display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;'>"
             # Card 1: Accelerator
-            "<div class='sr110-card' style='flex:1 1 170px;min-width:170px;max-width:180px;background:#23233a;border-radius:12px;padding:10px 10px 8px 10px;'>"
-            "<div class='sr110-title' style='font-size:1em;font-weight:520;margin-bottom:6px;color:#00b0ff;'>🚀 Accelerator</div>"
-            f"<div style='margin-bottom:2px;'><span class='sr110-label' style='color:#ccc;'>Configuration:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{summary_dict.get('Accelerator configuration','-')}</span></div>"
-            f"<div><span class='sr110-label' style='color:#ccc;'>Accelerator clock:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{summary_dict.get('Accelerator clock','-')}</span></div>"
+            "<div class='stat-item' style='background:#f8fafc;padding:1rem;border-radius:8px;border-left:4px solid #1975cf;'>"
+            "<div class='stat-label' style='font-weight:600;color:#1975cf;font-size:0.9rem;margin-bottom:0.5rem;'>Accelerator</div>"
+            f"<div class='stat-value' style='color:#4b5563;font-size:0.85rem;'><strong>Configuration:</strong> {summary_dict.get('Accelerator configuration','-')}<br><strong>Clock:</strong> {summary_dict.get('Accelerator clock','-')}</div>"
             "</div>"
             # Card 2: Memory Usage
-            "<div class='sr110-card' style='flex:1 1 170px;min-width:170px;max-width:180px;background:#23233a;border-radius:12px;padding:10px 10px 8px 10px;'>"
-            "<div class='sr110-title' style='font-size:1em;font-weight:520;margin-bottom:6px;color:#00b0ff;'>💾 Memory Usage</div>"
-            f"<div style='margin-bottom:2px;'><span class='sr110-label' style='color:#ccc;'>Total SRAM:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{summary_dict.get('Total SRAM used','-')}</span></div>"
-            f"<div><span class='sr110-label' style='color:#ccc;'>Total On-chip Flash:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{summary_dict.get('Total On-chip Flash used','-')}</span></div>"
+            "<div class='stat-item' style='background:#f8fafc;padding:1rem;border-radius:8px;border-left:4px solid #1975cf;'>"
+            "<div class='stat-label' style='font-weight:600;color:#1975cf;font-size:0.9rem;margin-bottom:0.5rem;'>Memory Usage</div>"
+            f"<div class='stat-value' style='color:#4b5563;font-size:0.85rem;'><strong>Total SRAM:</strong> {summary_dict.get('Total SRAM used','-')}<br><strong>Total Flash:</strong> {summary_dict.get('Total On-chip Flash used','-')}</div>"
             "</div>"
             # Card 3: Operator Distribution
-            "<div class='sr110-card' style='flex:1 1 170px;min-width:170px;max-width:180px;background:#23233a;border-radius:12px;padding:10px 10px 8px 10px;'>"
-            "<div class='sr110-title' style='font-size:1em;font-weight:520;margin-bottom:6px;color:#00b0ff;'>📈 Operator Distribution</div>"
-            f"<div style='margin-bottom:2px;'><span class='sr110-label' style='color:#ccc;'>CPU Operators:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{clean_ops(summary_dict.get('CPU operators','-'))}</span></div>"
-            f"<div><span class='sr110-label' style='color:#ccc;'>NPU Operators:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{clean_ops(summary_dict.get('NPU operators','-'))}</span></div>"
+            "<div class='stat-item' style='background:#f8fafc;padding:1rem;border-radius:8px;border-left:4px solid #1975cf;'>"
+            "<div class='stat-label' style='font-weight:600;color:#1975cf;font-size:0.9rem;margin-bottom:0.5rem;'>Operator Distribution</div>"
+            f"<div class='stat-value' style='color:#4b5563;font-size:0.85rem;'><strong>CPU Operators:</strong> {clean_ops(summary_dict.get('CPU operators','-'))}<br><strong>NPU Operators:</strong> {clean_ops(summary_dict.get('NPU operators','-'))}</div>"
             "</div>"
             # Card 4: Performance
-            "<div class='sr110-card' style='flex:1 1 170px;min-width:170px;max-width:180px;background:#23233a;border-radius:12px;padding:10px 10px 8px 10px;'>"
-            "<div class='sr110-title' style='font-size:1em;font-weight:520;margin-bottom:6px;color:#00b0ff;'>⚡ Performance</div>"
-            f"<div><span class='sr110-label' style='color:#ccc;'>Inference time:</span> <span class='sr110-value' style='color:#fff;font-weight:500'>{summary_dict.get('Inference time','-')}</span></div>"
+            "<div class='stat-item' style='background:#f8fafc;padding:1rem;border-radius:8px;border-left:4px solid #1975cf;'>"
+            "<div class='stat-label' style='font-weight:600;color:#1975cf;font-size:0.9rem;margin-bottom:0.5rem;'>Performance</div>"
+            f"<div class='stat-value' style='color:#4b5563;font-size:0.85rem;'><strong>Inference time:</strong> {summary_dict.get('Inference time','-')}</div>"
             "</div>"
-            "</div></div>"
+            "</div></div></div>"
         ) if summary_items else "<div style='color:red'>Summary info not found in log.</div>"
 
         for fname in os.listdir(output_dir):
@@ -354,11 +355,13 @@ def compile_uploaded_model(model_file):
     """Compile uploaded model with Vela and return results"""
     if model_file is None:
         error_html = (
-            "<div class='sr110-results' style='background:#fff3f3;border-radius:14px;padding:24px 18px 18px 18px;"
-            "max-width:430px;min-width:320px;width:100%;margin:auto;color:#d32f2f;font-family:sans-serif;"
-            "font-size:1.1em;text-align:center;font-weight:600;'>"
-            "No model file uploaded."
+            "<div class='sr110-results card' style='background:#fafafa;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;margin-bottom:1.5rem;max-width:500px;width:100%;margin:auto;overflow:hidden;'>"
+            "<div class='card-header' style='background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:white;padding:1rem 1.5rem;border-radius:12px 12px 0 0;font-weight:600;font-size:1.1rem;'>"
+            "<span style='color:white;font-weight:600;'>No Model</span>"
             "</div>"
+            "<div class='card-content' style='padding:1.5rem;color:#4b5563;line-height:1.6;background:#fafafa;text-align:center;'>"
+            "No model file uploaded."
+            "</div></div>"
         )
         return (
             error_html,
@@ -377,11 +380,13 @@ def compile_uploaded_model(model_file):
         )
     except Exception as e:
         error_html = (
-            "<div class='sr110-results' style='background:#fff3f3;border-radius:14px;padding:24px 18px 18px 18px;"
-            "max-width:430px;min-width:320px;width:100%;margin:auto;color:#d32f2f;font-family:sans-serif;"
-            "font-size:1.1em;text-align:center;font-weight:600;'>"
-            f"Vela compilation failed: {str(e)}"
+            "<div class='sr110-results card' style='background:#fafafa;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;margin-bottom:1.5rem;max-width:500px;width:100%;margin:auto;overflow:hidden;'>"
+            "<div class='card-header' style='background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:white;padding:1rem 1.5rem;border-radius:12px 12px 0 0;font-weight:600;font-size:1.1rem;'>"
+            "<span style='color:white;font-weight:600;'>Compilation Failed</span>"
             "</div>"
+            "<div class='card-content' style='padding:1.5rem;color:#4b5563;line-height:1.6;background:#fafafa;text-align:center;'>"
+            f"Vela compilation failed: {str(e)}"
+            "</div></div>"
         )
         return (
             error_html,
@@ -622,7 +627,7 @@ with gr.Blocks(
     
     gr.HTML("""
     <div class="main-header">
-        <h1>🎤 DSCNN Wake Word Detection</h1>
+        <h1>DSCNN Wake Word Detection</h1>
     </div>
     """)
     

requirements.txt

@@ -1,5 +1,5 @@
 tensorflow>=2.10.0
-gradio>=4.44.1
+gradio==4.44.0
 librosa>=0.10.0
 soundfile>=0.12.0
 numpy>=1.21.0