UI changesi still on CPU

interface.py

@@ -2,36 +2,68 @@ import gradio as gr
 from analyzer import analyze_ad_copy
 
 def create_interface():
+    css = """
+        .report-container { font-family: 'Arial', sans-serif; padding: 20px; }
+        .status { font-size: 1.2em; margin-bottom: 20px; padding: 10px; border-radius: 5px; }
+        .compliant { background-color: #e7f5e7; color: #0d5f0d; }
+        .non-compliant { background-color: #fce8e8; color: #c41e3a; }
+        .section { margin: 15px 0; }
+        .section-title { font-weight: bold; color: #2c3e50; margin: 10px 0; }
+        .item { margin: 5px 0 5px 20px; }
+        .severity-high { color: #c41e3a; }
+        .severity-medium { color: #f39c12; }
+        .severity-low { color: #27ae60; }
+        .risk-high { background-color: #fce8e8; }
+        .risk-medium { background-color: #fff3cd; }
+        .risk-low { background-color: #e7f5e7; }
+        .channel { margin: 10px 0; padding: 10px; border-radius: 5px; }
+        .details { margin-left: 20px; font-size: 0.9em; color: #555; }
+        .placeholder { 
+            padding: 20px; 
+            background-color: #f8f9fa;
+            border: 1px dashed #dee2e6;
+            border-radius: 5px;
+            color: #6c757d;
+            text-align: center;
+        }
+    """
+
+    # Create a placeholder HTML
+    placeholder_html = """
+    <div class="report-container">
+        <div class="placeholder">
+            <h3>📋 Compliance Report Will Appear Here</h3>
+            <p>Upload a marketing material image and click "Submit" to analyze compliance with financial regulations.</p>
+            <p>The report will check:</p>
+            <ul style="list-style-type: none; padding: 0;">
+                <li>✓ Prohibited financial terms</li>
+                <li>✓ Required disclaimers</li>
+                <li>✓ Multi-region compliance</li>
+                <li>✓ Channel-specific risks</li>
+            </ul>
+        </div>
+    </div>
+    """
+
     demo = gr.Interface(
         fn=analyze_ad_copy,
-        inputs=gr.Image(
-            type="numpy",
-            label="Upload Marketing Material",
-            height=300,
-            width=400,
-        ),
-        outputs=gr.HTML(
-            label="Compliance Report",
-        ),
+        inputs=[
+            gr.Image(
+                type="numpy",
+                label="Upload Marketing Material",
+                height=300,
+                width=400
+            )
+        ],
+        outputs=[
+            gr.HTML(
+                label="Compliance Report",
+                value=placeholder_html  # Set the initial placeholder
+            )
+        ],
         title="Marketing Campaign Compliance Checker",
         description="Upload marketing material to check compliance with US (SEC), UK (FCA), and EU financial regulations.",
-        theme=gr.themes.Default(),
-        css="""
-            .report-container { font-family: 'Arial', sans-serif; padding: 20px; }
-            .status { font-size: 1.2em; margin-bottom: 20px; padding: 10px; border-radius: 5px; }
-            .compliant { background-color: #e7f5e7; color: #0d5f0d; }
-            .non-compliant { background-color: #fce8e8; color: #c41e3a; }
-            .section { margin: 15px 0; }
-            .section-title { font-weight: bold; color: #2c3e50; margin: 10px 0; }
-            .item { margin: 5px 0 5px 20px; }
-            .severity-high { color: #c41e3a; }
-            .severity-medium { color: #f39c12; }
-            .severity-low { color: #27ae60; }
-            .risk-high { background-color: #fce8e8; }
-            .risk-medium { background-color: #fff3cd; }
-            .risk-low { background-color: #e7f5e7; }
-            .channel { margin: 10px 0; padding: 10px; border-radius: 5px; }
-            .details { margin-left: 20px; font-size: 0.9em; color: #555; }
-        """
+        css=css,
+        theme=gr.themes.Default()
     )
     return demo