demo: replace plain-text outputs with HTML cards in Recommend and Compare tabs

app.py

@@ -239,7 +239,7 @@ def run_recommend(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
     try:
         import quprep as qd
     except ImportError:
-        return "❌ quprep is not installed in this Space."
+        return "<p>❌ quprep is not installed in this Space.</p>"
 
     try:
         if csv_file is not None:
@@ -248,11 +248,11 @@ def run_recommend(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
         elif sample_name and sample_name in SAMPLES:
             df = pd.read_csv(io.StringIO(SAMPLES[sample_name]()))
         else:
-            return "⚠️ Please upload a CSV or select a sample dataset."
+            return "<p>⚠️ Please upload a CSV or select a sample dataset.</p>"
 
         df = df.select_dtypes(include="number").dropna()
         if df.empty:
-            return "⚠️ No numeric columns found."
+            return "<p>⚠️ No numeric columns found.</p>"
 
         import tempfile, os
         with tempfile.NamedTemporaryFile(
@@ -263,10 +263,56 @@ def run_recommend(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
 
         qubits_arg = n_qubits if n_qubits > 0 else None
         rec = qd.recommend(tmp_path, task=task, qubits=qubits_arg)
-        return str(rec)
+
+        nisq_badge = (
+            '<span style="color:#4ade80;font-weight:600">✓ Yes</span>'
+            if rec.nisq_safe else
+            '<span style="color:#f87171;font-weight:600">✗ No</span>'
+        )
+
+        alt_rows = "".join(
+            f"""<tr>
+              <td style="padding:6px 12px">{a.method}</td>
+              <td style="padding:6px 12px;text-align:center">{a.score:.0f}</td>
+              <td style="padding:6px 12px;color:#94a3b8">{a.depth}</td>
+            </tr>"""
+            for a in rec.alternatives
+        )
+        alt_html = f"""
+        <div style="margin-top:20px">
+          <p style="margin:0 0 8px;font-size:0.8rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em">Alternatives</p>
+          <table style="width:100%;border-collapse:collapse;font-size:0.85rem">
+            <thead>
+              <tr style="border-bottom:1px solid #334155">
+                <th style="padding:6px 12px;text-align:left;color:#64748b;font-weight:500">Encoding</th>
+                <th style="padding:6px 12px;text-align:center;color:#64748b;font-weight:500">Score</th>
+                <th style="padding:6px 12px;text-align:left;color:#64748b;font-weight:500">Depth</th>
+              </tr>
+            </thead>
+            <tbody>{alt_rows}</tbody>
+          </table>
+        </div>""" if rec.alternatives else ""
+
+        return f"""
+<div style="font-family:sans-serif;font-size:0.9rem;line-height:1.6">
+  <div style="display:flex;align-items:baseline;gap:12px;margin-bottom:16px">
+    <span style="font-size:1.6rem;font-weight:700;color:#e2e8f0">{rec.method}</span>
+    <span style="font-size:0.8rem;color:#a78bfa;font-weight:600">recommended</span>
+  </div>
+  <div style="display:grid;grid-template-columns:auto 1fr;gap:4px 24px;margin-bottom:16px">
+    <span style="color:#64748b">Qubits needed</span>  <span>{rec.qubits}</span>
+    <span style="color:#64748b">Circuit depth</span>  <span style="font-family:monospace">{rec.depth}</span>
+    <span style="color:#64748b">NISQ safe</span>      <span>{nisq_badge}</span>
+    <span style="color:#64748b">Score</span>          <span>{rec.score:.0f}</span>
+  </div>
+  <div style="padding:12px 16px;background:#1e293b;border-radius:8px;color:#cbd5e1;font-size:0.85rem;line-height:1.6">
+    {rec.reason}
+  </div>
+  {alt_html}
+</div>"""
 
     except Exception as exc:
-        return f"❌ {exc}"
+        return f"<p>❌ {exc}</p>"
     finally:
         try:
             os.unlink(tmp_path)
@@ -282,7 +328,7 @@ def run_compare(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
     try:
         import quprep as qd
     except ImportError:
-        return "❌ quprep is not installed in this Space."
+        return "<p>❌ quprep is not installed in this Space.</p>"
 
     try:
         if csv_file is not None:
@@ -291,11 +337,11 @@ def run_compare(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
         elif sample_name and sample_name in SAMPLES:
             df = pd.read_csv(io.StringIO(SAMPLES[sample_name]()))
         else:
-            return "⚠️ Please upload a CSV or select a sample dataset."
+            return "<p>⚠️ Please upload a CSV or select a sample dataset.</p>"
 
         df = df.select_dtypes(include="number").dropna()
         if df.empty:
-            return "⚠️ No numeric columns found."
+            return "<p>⚠️ No numeric columns found.</p>"
 
         import tempfile, os
         with tempfile.NamedTemporaryFile(
@@ -306,10 +352,50 @@ def run_compare(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
 
         qubits_arg = n_qubits if n_qubits > 0 else None
         result = qd.compare_encodings(tmp_path, task=task, qubits=qubits_arg)
-        return str(result)
+
+        rows_html = ""
+        for r in result.rows:
+            nisq = '<span style="color:#4ade80">Yes</span>' if r.nisq_safe else '<span style="color:#f87171">No</span>'
+            name = f"{r.encoding} ★" if r.encoding == result.recommended else r.encoding
+            style = "background:#1e293b" if r.encoding == result.recommended else ""
+            rows_html += f"""<tr style="{style}">
+              <td style="padding:8px 14px;font-weight:{'600' if r.encoding == result.recommended else '400'}">{name}</td>
+              <td style="padding:8px 14px;text-align:center">{r.n_qubits}</td>
+              <td style="padding:8px 14px;text-align:center">{r.gate_count}</td>
+              <td style="padding:8px 14px;text-align:center">{r.circuit_depth}</td>
+              <td style="padding:8px 14px;text-align:center">{r.two_qubit_gates}</td>
+              <td style="padding:8px 14px;text-align:center">{nisq}</td>
+            </tr>"""
+
+        footnote = "<p style='margin:12px 0 0;font-size:0.78rem;color:#475569'>★ recommended for the specified task / budget</p>" if result.recommended else ""
+
+        warnings = [r for r in result.rows if r.warning]
+        warn_html = "".join(
+            f"<p style='margin:4px 0;font-size:0.78rem;color:#fbbf24'>⚠️ [{r.encoding}] {r.warning}</p>"
+            for r in warnings
+        )
+
+        return f"""
+<div style="font-family:sans-serif;font-size:0.88rem">
+  <table style="width:100%;border-collapse:collapse">
+    <thead>
+      <tr style="border-bottom:1px solid #334155">
+        <th style="padding:8px 14px;text-align:left;color:#64748b;font-weight:500">Encoding</th>
+        <th style="padding:8px 14px;text-align:center;color:#64748b;font-weight:500">Qubits</th>
+        <th style="padding:8px 14px;text-align:center;color:#64748b;font-weight:500">Gate Count</th>
+        <th style="padding:8px 14px;text-align:center;color:#64748b;font-weight:500">Depth</th>
+        <th style="padding:8px 14px;text-align:center;color:#64748b;font-weight:500">2Q Gates</th>
+        <th style="padding:8px 14px;text-align:center;color:#64748b;font-weight:500">NISQ Safe</th>
+      </tr>
+    </thead>
+    <tbody>{rows_html}</tbody>
+  </table>
+  {footnote}
+  {warn_html}
+</div>"""
 
     except Exception as exc:
-        return f"❌ {exc}"
+        return f"<p>❌ {exc}</p>"
     finally:
         try:
             os.unlink(tmp_path)
@@ -323,40 +409,63 @@ def run_compare(csv_file, sample_name: str, task: str, n_qubits: int) -> str:
 
 THEME = gr.themes.Soft(primary_hue="violet", secondary_hue="blue")
 
-with gr.Blocks(theme=THEME, title="QuPrep — Quantum Data Preparation") as demo:
+CSS = """
+#info-panel, #data-panel {
+    border: 1px solid #334155 !important;
+    border-radius: 12px !important;
+    padding: 20px 24px !important;
+    box-sizing: border-box;
+    min-height: 320px !important;
+}
+#data-panel {
+    gap: 12px !important;
+}
+"""
+
+with gr.Blocks(title="QuPrep — Quantum Data Preparation", css=CSS) as demo:
 
     with gr.Row(equal_height=True):
         # ── Left: package info ─────────────────────────────────────────────
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, elem_id="info-panel"):
             gr.HTML("""
-<div style="height:100%;display:flex;flex-direction:column;justify-content:center;padding:16px 24px;border-radius:12px;border:1px solid #334155">
-  <p style="margin:0 0 4px;font-size:1.4rem;font-weight:700;color:#e2e8f0">⚛️ QuPrep</p>
-  <p style="margin:0 0 12px;font-size:0.9rem;font-weight:500;color:#a78bfa">Quantum Data Preparation</p>
-  <p style="margin:0 0 16px;font-size:0.85rem;color:#94a3b8;line-height:1.5">
+<div style="display:flex;flex-direction:column;justify-content:center">
+  <p style="margin:0 0 2px;font-size:1.5rem;font-weight:700;color:#e2e8f0">⚛️ QuPrep</p>
+  <p style="margin:0 0 14px;font-size:0.9rem;font-weight:500;color:#a78bfa">Quantum Data Preparation</p>
+  <p style="margin:0 0 14px;font-size:0.85rem;color:#94a3b8;line-height:1.6">
     The missing preprocessing layer between classical datasets and quantum computing.
     Framework-agnostic: Qiskit · PennyLane · Cirq · TKET · Braket · Q# · IQM · OpenQASM 3.0.
   </p>
   <div style="display:flex;flex-direction:column;gap:8px;font-size:0.85rem">
-    <div>📦 <code style="background:#1e293b;padding:2px 6px;border-radius:4px">pip install quprep</code></div>
+    <div>📦 <code style="background:#1e293b;padding:2px 8px;border-radius:4px">pip install quprep</code></div>
     <div>📖 <a href="https://docs.quprep.org" target="_blank" style="color:#818cf8">docs.quprep.org</a></div>
     <div>💻 <a href="https://github.com/quprep/quprep" target="_blank" style="color:#818cf8">github.com/quprep/quprep</a></div>
     <div>🌐 <a href="https://quprep.org" target="_blank" style="color:#818cf8">quprep.org</a></div>
   </div>
-  <p style="margin:16px 0 0;font-size:0.75rem;color:#475569">
+  <p style="margin:14px 0 0;font-size:0.75rem;color:#475569">
     11 encodings · 8 export frameworks · Apache 2.0 · Python ≥ 3.10
   </p>
 </div>
 """)
 
         # ── Right: data inputs ─────────────────────────────────────────────
-        with gr.Column(scale=1):
-            csv_upload = gr.File(label="Upload CSV", file_types=[".csv", ".tsv"])
+        with gr.Column(scale=1, elem_id="data-panel"):
+            gr.HTML("""
+<p style="margin:0 0 2px;font-size:1.5rem;font-weight:700;color:#e2e8f0">📂 Load Dataset</p>
+<p style="margin:0 0 4px;font-size:0.9rem;font-weight:500;color:#a78bfa">Upload a CSV or pick a sample</p>
+""")
+            csv_upload = gr.File(
+                label="Upload CSV  (.csv / .tsv)",
+                file_types=[".csv", ".tsv"],
+                height=150,
+            )
             sample_dd = gr.Dropdown(
                 choices=[""] + list(SAMPLES.keys()),
                 value="Iris (150 samples, 4 features)",
-                label="Or use a sample dataset",
+                label="Or use a built-in sample dataset",
             )
-            gr.Markdown("*Uploaded file takes priority over the sample selector.*")
+            gr.HTML("""
+<p style="margin:0;font-size:0.75rem;color:#475569">Uploaded file takes priority over the sample selector.</p>
+""")
 
     with gr.Tabs():
 
@@ -441,7 +550,14 @@ with gr.Blocks(theme=THEME, title="QuPrep — Quantum Data Preparation") as demo
                     )
                     rec_btn = gr.Button("Recommend →", variant="primary")
                 with gr.Column(scale=2):
-                    rec_out = gr.Textbox(label="Recommendation", lines=15, interactive=False)
+                    rec_out = gr.HTML(
+                        label="Recommendation",
+                        value="""
+<div style="font-family:sans-serif;color:#475569;font-size:0.9rem;padding:24px 0">
+  <p style="margin:0 0 8px;font-size:1rem;font-weight:600;color:#64748b">No recommendation yet</p>
+  <p style="margin:0;line-height:1.6">Select a task, set an optional qubit budget, and click <strong>Recommend →</strong> to get a dataset-aware encoding suggestion with ranked alternatives.</p>
+</div>""",
+                    )
 
             rec_btn.click(
                 fn=run_recommend,
@@ -464,7 +580,14 @@ with gr.Blocks(theme=THEME, title="QuPrep — Quantum Data Preparation") as demo
                     )
                     cmp_btn = gr.Button("Compare →", variant="primary")
                 with gr.Column(scale=2):
-                    cmp_out = gr.Textbox(label="Comparison table", lines=20, interactive=False)
+                    cmp_out = gr.HTML(
+                        label="Comparison table",
+                        value="""
+<div style="font-family:sans-serif;color:#475569;font-size:0.9rem;padding:24px 0">
+  <p style="margin:0 0 8px;font-size:1rem;font-weight:600;color:#64748b">No comparison yet</p>
+  <p style="margin:0;line-height:1.6">Select a task, set an optional qubit budget, and click <strong>Compare →</strong> to see a side-by-side cost breakdown for all encoders.</p>
+</div>""",
+                    )
 
             cmp_btn.click(
                 fn=run_compare,
@@ -525,4 +648,4 @@ Apache 2.0 license · Python ≥ 3.10
             )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(theme=THEME)