Update app.py

app.py

@@ -6,7 +6,6 @@ from quread.engine import QuantumStateVector
 from quread.exporters import to_openqasm2, to_qiskit, to_cirq
 from quread.llm_explain import explain_circuit_with_hf, ExplainConfig
 
-
 # ---------- Helpers ----------
 def _new_sim(n_qubits: int):
     qc = QuantumStateVector(int(n_qubits))
@@ -14,7 +13,6 @@ def _new_sim(n_qubits: int):
     selected_gate = "H"
     return qc, last_counts, selected_gate
 
-
 def _probs_top(qc, n_qubits: int, k: int = 6):
     probs = (np.abs(qc.state) ** 2)
     top = sorted(
@@ -24,79 +22,62 @@ def _probs_top(qc, n_qubits: int, k: int = 6):
     )[:k]
     return top
 
-
 def _counts_str(counts):
     if not counts:
-        return "No counts yet. Click **Sample shots**."
+        return ""
     return "\n".join([f"{k}: {v}" for k, v in counts.items()])
 
+def update_views(qc, last_counts, n_qubits):
+    ket = qc.ket_notation(max_terms=16)
 
-def _ket_str(qc, max_terms: int = 16):
-    return qc.ket_notation(max_terms=max_terms)
+    qasm = to_openqasm2(qc.history, n_qubits=int(n_qubits))
+    qiskit = to_qiskit(qc.history, n_qubits=int(n_qubits))
+    cirq = to_cirq(qc.history, n_qubits=int(n_qubits))
 
+    probs_top = _probs_top(qc, int(n_qubits), k=6)
+    counts_text = _counts_str(last_counts)
+
+    return ket, counts_text, qasm, qiskit, cirq, probs_top
 
-# ---------- Actions ----------
 def init_or_reset(n_qubits):
     qc, last_counts, selected_gate = _new_sim(n_qubits)
     return qc, last_counts, selected_gate, "✅ Reset done."
 
-
-def set_gate(gate, selected_gate):
+def set_gate(gate):
     return gate, f"✅ Selected gate: {gate}"
 
-
-def apply_selected_gate(qc, last_counts, selected_gate, target, n_qubits):
+def apply_selected_gate(qc, last_counts, selected_gate, target):
     qc.apply_single(selected_gate, target=int(target))
     last_counts = None
     return qc, last_counts, f"✅ Applied {selected_gate} on q{target}."
 
-
-def apply_cnot(qc, last_counts, control, target, n_qubits):
+def apply_cnot(qc, last_counts, control, target):
     if int(control) == int(target):
         return qc, last_counts, "❌ Control and target must be different."
     qc.apply_cnot(control=int(control), target=int(target))
     last_counts = None
     return qc, last_counts, f"✅ Applied CNOT (q{control} -> q{target})."
 
-
 def sample_shots(qc, shots):
     last_counts = qc.sample(shots=int(shots))
     return last_counts, "✅ Sampled shots."
 
-
 def measure_collapse(qc, shots):
     res = qc.measure_collapse()
     last_counts = qc.sample(shots=int(shots))
     return last_counts, f"✅ Collapsed to |{res}⟩ and sampled shots."
 
-
-def update_views(qc, last_counts, n_qubits):
-    ket = _ket_str(qc, max_terms=16)
-    probs_top = _probs_top(qc, n_qubits, k=6)
-
-    qasm = to_openqasm2(qc.history, n_qubits=int(n_qubits))
-    qiskit = to_qiskit(qc.history, n_qubits=int(n_qubits))
-    cirq = to_cirq(qc.history, n_qubits=int(n_qubits))
-
-    counts_text = _counts_str(last_counts)
-
-    return ket, counts_text, qasm, qiskit, cirq, probs_top
-
-
 def explain_llm(qc, n_qubits, shots, hf_model_id):
-    # Use the same state/prob logic you already implemented in Streamlit
     state_ket = qc.ket_notation(max_terms=6)
     probs_top = _probs_top(qc, int(n_qubits), k=6)
 
     cfg = ExplainConfig(
-        # IMPORTANT: model id must be like "google/flan-t5-large" (no extra prefix)
-        # We'll sanitize in llm_explain if you implemented that.
-        model_id=hf_model_id.strip(),
+        model_id=hf_model_id.strip(),  # use exact repo id like "google/flan-t5-base"
         max_new_tokens=280,
         temperature=0.2,
     )
 
-    explanation = explain_circuit_with_hf(
+    return explain_circuit_with_hf(
         n_qubits=int(n_qubits),
         history=qc.history,
         state_ket=state_ket,
@@ -104,84 +85,129 @@ def explain_llm(qc, n_qubits, shots, hf_model_id):
         shots=int(shots),
         cfg=cfg,
     )
-    return explanation
-
 
-# ---------- UI ----------
-with gr.Blocks(title="Quread.ai — State Vector Studio (Gradio)") as demo:
-    gr.Markdown("# Quread.ai — State Vector Studio (Dev Tool Edition)")
-    gr.Markdown("Build circuits, inspect the statevector, export to QASM/Qiskit/Cirq, and get grounded explanations.")
+def _refresh_choices(n):
+    opts = list(range(int(n)))
+    return (
+        gr.Dropdown(choices=opts, value=0),
+        gr.Dropdown(choices=opts, value=0),
+        gr.Dropdown(choices=opts, value=min(1, int(n)-1)),
+    )
 
+# ---------- Streamlit-like styling ----------
+CSS = """
+#title h1 { font-size: 42px !important; margin-bottom: 6px; }
+#subtitle { color: #6b7280; margin-top: 0px; }
+.sidebar {
+  background: #f6f7fb;
+  border-right: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 18px 14px;
+  height: calc(100vh - 34px);
+  position: sticky;
+  top: 16px;
+}
+.card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 14px;
+}
+.section-title { font-size: 22px; font-weight: 700; margin: 6px 0 10px; }
+.small-note { color: #6b7280; font-size: 12px; }
+"""
+
+theme = gr.themes.Soft(
+    radius_size="lg",
+    text_size="md"
+)
+
+with gr.Blocks(theme=theme, css=CSS, title="Quread.ai — State Vector Studio") as demo:
     qc_state = gr.State()
     last_counts_state = gr.State()
     selected_gate_state = gr.State()
 
     with gr.Row():
-        n_qubits = gr.Slider(1, 10, value=2, step=1, label="Number of qubits")
-        shots = gr.Slider(128, 8192, value=1024, step=128, label="Shots (for sampling)")
-
-    with gr.Row():
-        hf_model_id = gr.Textbox(value="google/flan-t5-large", label="HF model repo id for Explain")
-        status = gr.Markdown("")
-
-    reset_btn = gr.Button("Reset Simulator")
-
-    with gr.Row():
-        gate_btns = []
-        for g in ["H", "X", "Y", "Z", "S", "T"]:
-            gate_btns.append(gr.Button(g))
-        target = gr.Dropdown(choices=[0, 1], value=0, label="Target qubit")
-
-    with gr.Row():
-        apply_gate_btn = gr.Button("Apply Selected Gate")
-        control = gr.Dropdown(choices=[0, 1], value=0, label="CNOT Control")
-        cnot_target = gr.Dropdown(choices=[0, 1], value=1, label="CNOT Target")
-        apply_cnot_btn = gr.Button("Apply CNOT")
-
-    with gr.Row():
-        sample_btn = gr.Button("Sample shots")
-        measure_btn = gr.Button("Measure + Collapse")
-        explain_btn = gr.Button("Explain (LLM)")
-
-    with gr.Row():
-        ket_out = gr.Code(label="Statevector (ket notation)", language="python")
-        counts_out = gr.Textbox(label="Counts", lines=10)
-
-    with gr.Row():
-        qasm_out = gr.Textbox(label="OpenQASM 2.0", lines=10)
-        qiskit_out = gr.Textbox(label="Qiskit code", lines=10)
-        cirq_out = gr.Textbox(label="Cirq code", lines=10)
-
-    probs_out = gr.Dataframe(headers=["bitstring", "prob"], label="Top probabilities")
-    llm_out = gr.Markdown()
-
-    def _refresh_dropdowns(n):
-        opts = list(range(int(n)))
-        return (
-            gr.Dropdown(choices=opts, value=0),                    # target
-            gr.Dropdown(choices=opts, value=0),                    # control
-            gr.Dropdown(choices=opts, value=min(1, int(n)-1)),     # cnot target
-        )
-
+        # ----- Sidebar -----
+        with gr.Column(scale=3, elem_classes=["sidebar"]):
+            gr.Markdown("### Simulator Settings")
+            n_qubits = gr.Slider(1, 10, value=2, step=1, label="Number of qubits")
+            shots = gr.Slider(128, 8192, value=1024, step=128, label="Shots (for sampling)")
+
+            gr.Markdown("---")
+            gr.Markdown("### LLM Explanation (Hugging Face)")
+            hf_model_id = gr.Textbox(value="google/flan-t5-base", label="HF model repo id")
+            gr.Markdown("<div class='small-note'>Set secret in HF Space: <b>HF_TOKEN</b></div>")
+
+            reset_btn = gr.Button("Reset Simulator", variant="secondary")
+
+        # ----- Main content -----
+        with gr.Column(scale=9):
+            gr.Markdown("<div id='title'><h1>Quread.ai — State Vector Studio (Dev Tool Edition)</h1></div>")
+            gr.Markdown("<div id='subtitle'>Build circuits, inspect the statevector, visualize the circuit, export to QASM/Qiskit/Cirq, and get grounded explanations.</div>")
+
+            status = gr.Markdown("")
+
+            # Gate palette (Streamlit-like buttons row)
+            with gr.Group(elem_classes=["card"]):
+                gr.Markdown("<div class='section-title'>Gate Palette</div>")
+                with gr.Row():
+                    gate_H = gr.Button("H")
+                    gate_X = gr.Button("X")
+                    gate_Y = gr.Button("Y")
+                    gate_Z = gr.Button("Z")
+                    gate_S = gr.Button("S")
+                    gate_T = gr.Button("T")
+
+                target = gr.Dropdown(choices=[0, 1], value=0, label="Target qubit for single-qubit gates")
+
+                with gr.Row():
+                    apply_gate_btn = gr.Button("Apply Selected Gate", variant="primary")
+                    sample_btn = gr.Button("Sample shots")
+                    measure_btn = gr.Button("Measure + Collapse")
+
+                gr.Markdown("**CNOT**")
+                with gr.Row():
+                    control = gr.Dropdown(choices=[0, 1], value=0, label="Control")
+                    cnot_target = gr.Dropdown(choices=[0, 1], value=1, label="Target")
+                    apply_cnot_btn = gr.Button("Apply CNOT")
+
+            # Outputs (two-column like your screenshots)
+            with gr.Row():
+                with gr.Column(scale=7):
+                    with gr.Group(elem_classes=["card"]):
+                        gr.Markdown("<div class='section-title'>Statevector (human-readable)</div>")
+                        ket_out = gr.Code(label="", language="python")
+                        gr.Markdown("<div class='section-title'>Top probabilities</div>")
+                        probs_out = gr.Dataframe(headers=["bitstring", "prob"], label="", interactive=False)
+
+                with gr.Column(scale=5):
+                    with gr.Group(elem_classes=["card"]):
+                        gr.Markdown("<div class='section-title'>Measurement distribution</div>")
+                        counts_out = gr.Textbox(label="", lines=10, placeholder="Click 'Sample shots' or 'Measure + Collapse' to generate counts.")
+                    with gr.Group(elem_classes=["card"]):
+                        gr.Markdown("<div class='section-title'>Export</div>")
+                        qasm_out = gr.Textbox(label="OpenQASM 2.0", lines=8)
+                        qiskit_out = gr.Textbox(label="Qiskit code", lines=8)
+                        cirq_out = gr.Textbox(label="Cirq code", lines=8)
+
+            with gr.Group(elem_classes=["card"]):
+                gr.Markdown("<div class='section-title'>Explain (HF Inference)</div>")
+                explain_btn = gr.Button("Explain (LLM)", variant="primary")
+                llm_out = gr.Markdown("")
+                gr.Markdown("<div class='small-note'>Tip: Sample shots first for better explanations.</div>")
+
+    # init
     def _init_all(n):
         qc, last_counts, selected_gate = _new_sim(n)
         return qc, last_counts, selected_gate
 
-    # Initialize once
-    demo.load(
-        fn=_init_all,
-        inputs=[n_qubits],
-        outputs=[qc_state, last_counts_state, selected_gate_state],
-    )
+    demo.load(fn=_init_all, inputs=[n_qubits], outputs=[qc_state, last_counts_state, selected_gate_state])
 
-    # Keep dropdowns in sync with n_qubits
-    n_qubits.change(
-        fn=_refresh_dropdowns,
-        inputs=[n_qubits],
-        outputs=[target, control, cnot_target],
-    )
+    # keep dropdowns synced with n_qubits
+    n_qubits.change(fn=_refresh_choices, inputs=[n_qubits], outputs=[target, control, cnot_target])
 
-    # Reset
+    # reset
     reset_btn.click(
         fn=init_or_reset,
         inputs=[n_qubits],
@@ -192,18 +218,18 @@ with gr.Blocks(title="Quread.ai — State Vector Studio (Gradio)") as demo:
         outputs=[ket_out, counts_out, qasm_out, qiskit_out, cirq_out, probs_out],
     )
 
-    # Gate selection buttons
-    for btn, g in zip(gate_btns, ["H", "X", "Y", "Z", "S", "T"]):
-        btn.click(
-            fn=lambda _, cur, gg=g: set_gate(gg, cur),
-            inputs=[btn, selected_gate_state],
-            outputs=[selected_gate_state, status],
-        )
+    # gate select
+    gate_H.click(fn=lambda: set_gate("H"), outputs=[selected_gate_state, status])
+    gate_X.click(fn=lambda: set_gate("X"), outputs=[selected_gate_state, status])
+    gate_Y.click(fn=lambda: set_gate("Y"), outputs=[selected_gate_state, status])
+    gate_Z.click(fn=lambda: set_gate("Z"), outputs=[selected_gate_state, status])
+    gate_S.click(fn=lambda: set_gate("S"), outputs=[selected_gate_state, status])
+    gate_T.click(fn=lambda: set_gate("T"), outputs=[selected_gate_state, status])
 
-    # Apply selected gate
+    # apply gate
     apply_gate_btn.click(
         fn=apply_selected_gate,
-        inputs=[qc_state, last_counts_state, selected_gate_state, target, n_qubits],
+        inputs=[qc_state, last_counts_state, selected_gate_state, target],
         outputs=[qc_state, last_counts_state, status],
     ).then(
         fn=update_views,
@@ -211,10 +237,10 @@ with gr.Blocks(title="Quread.ai — State Vector Studio (Gradio)") as demo:
         outputs=[ket_out, counts_out, qasm_out, qiskit_out, cirq_out, probs_out],
     )
 
-    # Apply CNOT
+    # cnot
     apply_cnot_btn.click(
         fn=apply_cnot,
-        inputs=[qc_state, last_counts_state, control, cnot_target, n_qubits],
+        inputs=[qc_state, last_counts_state, control, cnot_target],
         outputs=[qc_state, last_counts_state, status],
     ).then(
         fn=update_views,
@@ -222,7 +248,7 @@ with gr.Blocks(title="Quread.ai — State Vector Studio (Gradio)") as demo:
         outputs=[ket_out, counts_out, qasm_out, qiskit_out, cirq_out, probs_out],
     )
 
-    # Sample shots
+    # sample
     sample_btn.click(
         fn=sample_shots,
         inputs=[qc_state, shots],
@@ -233,7 +259,7 @@ with gr.Blocks(title="Quread.ai — State Vector Studio (Gradio)") as demo:
         outputs=[ket_out, counts_out, qasm_out, qiskit_out, cirq_out, probs_out],
     )
 
-    # Measure + collapse
+    # measure
     measure_btn.click(
         fn=measure_collapse,
         inputs=[qc_state, shots],
@@ -244,7 +270,7 @@ with gr.Blocks(title="Quread.ai — State Vector Studio (Gradio)") as demo:
         outputs=[ket_out, counts_out, qasm_out, qiskit_out, cirq_out, probs_out],
     )
 
-    # Explain
+    # explain
     explain_btn.click(
         fn=explain_llm,
         inputs=[qc_state, n_qubits, shots, hf_model_id],