Add UI and Result Info

app.py

@@ -3,29 +3,7 @@ import gradio as gr
 import tempfile
 import os
 import sr100_model_compiler
-#from huggingface_hub import HfApi
-#from huggingface_hub import whoami
-# Get top-level authorizations
-#oauth_info = {'username' : None, 'token' : None}
-#api = HfApi()
-#
-#def get_oauth_info(profile: gr.OAuthProfile | None, oauth_token: gr.OAuthToken | None) -> str:
-#    global oauth_info
-#    global api
-
-#    print(f'profile = {profile}')
-#    if profile is None:
-#        oauth_info['username'] = None
-#        oauth_info['token'] = None        
-#        return "Please login to the Huggingface with login button"
-#    else:
-#        #print(f'Testing {profile} for username')
-#        oauth_info['username'] = profile.username
-#        oauth_info['token'] = oauth_token.token
-#        org_names = [org["name"] for org in whoami(oauth_token.token)["orgs"]]
-#
-#        return print(f'{profile.username}: {org_names}')
-
+import html
 
 def compile_model(model_name, vmem_value, lpmem_value):
 
@@ -47,32 +25,40 @@ def compile_model(model_name, vmem_value, lpmem_value):
         )
         print(results)
 
-    output_text = ''
-
+    # Format results in nicely styled HTML like in old.py
+    output = []
+    
     if results['cycles_npu'] == 0:
-        output_text = 'FAILURE cannot optimize TFLITE model for SR100'
-        output_text += '<br><br>Compiler log<br>---------------------------------------'
-        output_text += f'<br>{results["vela_log"]}'
+        output.append(
+            "<div style='color:#d32f2f; font-weight:bold; font-size:1.2em;'>"
+            "❌ FAILURE: This model does not utilize NPU, Please see if model has supported ops, thus cannot optimize for SR100</div>"
+        )
+        output.append("<div style='margin-top:0.5em;color:#000;'>Compiler log:</div>")
+        output.append(
+            f"<pre style='white-space:pre-wrap; background:#f6f8fa; padding:8px; border-radius:6px; color:#000;'>"
+            f"{html.escape(results.get('vela_log', 'No log available'))}</pre>"
+        )
     else:
         if success:
-            output_text = 'SUCCESS, model fits on SR100'
+            output.append(
+                "<div style='color:#007dc3; font-weight:bold; font-size:1.2em;'>"
+                "✅ SUCCESS: Model fits on SR100 and below is the estimates Performance</div>"
+            )
         else:
-            output_text = 'FAILURE, model does not fit on SR100'
+            output.append(
+                "<div style='color:#d32f2f; font-weight:bold; font-size:1.2em;'>"
+                "❌ FAILURE: Model does not fit on SR100, Please check Memory usage of Model</div>"
+            )
 
+        # Format metrics in a nice table
+        table_rows = []
+        
+        # Calculate all the metrics
         weights_size = results['weights_size'] / 1000.0
         arena_size = results['arena_cache_size'] / 1000.0
-        clock = results['core_clock']  / 1.0e6
+        clock = results['core_clock'] / 1.0e6
         infer_time = results['inference_time'] * 1000.0
         infer_fps = results['inferences_per_sec']
-        
-        output_text += f'<br>clock = {clock:0.1f} MHz'
-
-        output_text += f'<br>inference time = {infer_time:0.1f}ms - {infer_fps:0.1f} fps'
-        output_text += f'<br>Arena cache size = {arena_size:0.3f} kB'
-        output_text += f'<br>Model size = {weights_size:0.3f} kB'
-        output_text += f'<br>model loc = {results["model_loc"]}'
-        output_text += f'<br>System config = {results["system_config"]}'
-
         vmem_size = results['vmem_size'] / 1000.0
         lpmem_size = results['lpmem_size'] / 1000.0
         vmem_size_limit = results['vmem_size_limit'] / 1000.0
@@ -80,18 +66,83 @@ def compile_model(model_name, vmem_value, lpmem_value):
         vmem_perc = results['vmem_size'] * 100.0 / results['vmem_size_limit']
         lpmem_perc = results['lpmem_size'] * 100.0 / results['lpmem_size_limit']
         
-        output_text += f'<br>vmem_size = {vmem_size:0.3f} kB ({vmem_perc:0.1f}% of {vmem_size_limit:0.3f} kB limit)'
-        output_text += f'<br>lpmem_size = {lpmem_size:0.3f} kB ({lpmem_perc:0.1f}% of {lpmem_size_limit:0.3f} kB limit)'
+        # Add rows to the table
+        metrics = [
+            ("Clock Frequency", f"{clock:0.1f} MHz"),
+            ("Inference Time", f"{infer_time:0.1f} ms"),
+            ("Inferences Per Second", f"{infer_fps:0.1f} fps"),
+            ("Arena Cache Size", f"{arena_size:0.3f} kB"),
+            ("Model Size", f"{weights_size:0.3f} kB"),
+            ("Model Location", f"{results['model_loc']}"),
+            ("System Configuration", f"{results['system_config']}"),
+            ("VMEM Size", f"{vmem_size:0.3f} kB ({vmem_perc:0.1f}% of {vmem_size_limit:0.3f} kB limit)"),
+            ("LPMEM Size", f"{lpmem_size:0.3f} kB ({lpmem_perc:0.1f}% of {lpmem_size_limit:0.3f} kB limit)")
+        ]
+        
+        for label, value in metrics:
+            table_rows.append(
+                "<tr>"
+                f"<td style='padding:4px 12px; font-weight:bold; border-bottom:1px solid #eee; color:#000;'>{label}</td>"
+                f"<td style='padding:4px 12px; border-bottom:1px solid #eee; color:#000;'>{value}</td>"
+                "</tr>"
+            )
+        
+        output.append(
+            "<table style='margin-top:1em; border-collapse:collapse; color:#000;'>"
+            + "".join(table_rows) + "</table>"
+        )
 
-    
-    return output_text
+    return "".join(output)
 
 # Get all available models
 model_choices = glob.glob('models/*.tflite')
+
+# Custom CSS from old.py
+custom_css = """
+:root {
+    --color-accent: #007dc3;
+    --color-primary-500: #007dc3;
+    --color-primary-600: #007dc3;
+}
+body, .gradio-container, #root {
+    background: #fff !important;
+}
+/* Hide Gradio footer and settings */
+footer, .gradio-footer, .svelte-1ipelgc, .gradio-logo, .gradio-app__settings {
+    display: none !important;
+}
+/* Style input labels and controls */
+.gradio-slider label,
+.gradio-radio label,
+.gradio-dropdown label,
+.gradio-file label {
+    color: #007dc3 !important;
+    font-weight: bold;
+}
+.gradio-slider input[type="range"]::-webkit-slider-thumb,
+.gradio-slider input[type="range"]::-moz-range-thumb,
+.gradio-slider input[type="range"]::-ms-thumb {
+    background: #007dc3 !important;
+}
+.gradio-radio input[type="radio"]:checked + span {
+    background: #007dc3 !important;
+    border-color: #007dc3 !important;
+}
+.gradio-dropdown select,
+.gradio-file input[type="file"] {
+    border-color: #007dc3 !important;
+}
+.gradio-button {
+    background: #007dc3 !important;
+    color: #fff !important;
+    border: none !important;
+}
+"""
     
-with gr.Blocks() as demo:
+with gr.Blocks(css=custom_css) as demo:
     #gr.LoginButton()
-    text1 = gr.Markdown("SR100 Model Optimizer Demo - Compile a tflite model to SR100 and see if it fits")
+    gr.Markdown("<h1 style='font-size:2.5em; color:#007dc3; margin-bottom:0;'>SR100 Model Compiler</h1>", elem_id="main_title")
+    gr.Markdown("<h3 style='margin-top:0; color:#000;'>Bring a TFlite INT8 model and compile it for Synaptics Astra SR100. Learn more at <a href='https://developer.synaptics.com/docs/sr/sr100/quick-start?utm_source=hf' target='_blank' style='color:#007dc3; text-decoration:underline;'>Synaptics AI Developer Zone</a></h3>", elem_id="subtitle")
     #user_text = gr.Markdown("")
 
     # Setup model inputs
@@ -108,11 +159,21 @@ with gr.Blocks() as demo:
     
     # Run the compile
     compile_btn = gr.Button("Compile Model")
-    compile_text = gr.Markdown("Waiting for model results")
+    compile_text = gr.Markdown("<span style='color:#000;'>Waiting for model results</span>")
     
     # Compute options
     compile_btn.click(compile_model, inputs=[model_dropdown, vmem_slider, lpmem_slider], outputs=[compile_text])
     #demo.load(get_oauth_info, inputs=None, outputs=user_text)
+    
+    # Add footer content from old.py
+    gr.HTML("""
+    <div style="max-width: 800px; margin: 2rem auto; background: white; color: black; 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; padding: 1.5rem; text-align: center;">
+        For a detailed walkthrough, please see our
+        <a href="http://localhost:3000/sr/evaluate-sr" target="_blank" style="color: #1a0dab;">Evaluate Model Guide</a>.<br>
+        To get started quickly, visit our
+        <a href="http://localhost:3000/sr/quick-start" target="_blank" style="color: #1a0dab;">SR Quick Start page</a>.
+    </div>
+    """)
 
 if __name__ == "__main__":
     demo.launch()