Update app.py

app.py

@@ -138,12 +138,12 @@ def build_trace(problem, displayed, first_fail, done=False):
             lbl, conf = probe_step(problem, displayed[:i+1])
             if lbl == "FAIL": faults += 1
             dot   = f"<span class='dot dot-{'ok' if lbl == 'OK' else 'fail'}'></span>"
-            rows += f"<div class='trace-row'>{dot} Step {i+1} &mdash; {int(conf*100)}%</div>"
+            rows += f"<div class='trace-row'>{dot} Step {i+1} <span class='trace-conf'>&mdash; {int(conf*100)}%</span></div>"
         else:
             rows += "<div class='trace-row'><span class='dot dot-final'></span> Final Answer</div>"
 
     health    = max(0, 100 - faults * 20)
-    bar_color = "#16a34a" if health > 60 else "#dc2626"
+    bar_color = "#10b981" if health > 60 else "#ef4444"
     summary   = f"""
     <div class='trace-summary'>
         <div class='trace-label'>Reasoning Health</div>
@@ -153,50 +153,245 @@ def build_trace(problem, displayed, first_fail, done=False):
     return f"{rows}{summary}"
 
 
-# ── CSS ───────────────────────────────────────────────────────────────────────
+# ── CSS (SaaS / Modern Professional Upgrade) ──────────────────────────────────
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* Globals */
 *, *::before, *::after { box-sizing: border-box; }
-body, .gradio-container, .gradio-container * { font-family: 'Inter', sans-serif !important; }
-.gradio-container { background: #f8fafc !important; max-width: 1200px !important; }
-.twt-header { text-align: center; padding: 2rem 1rem 1.25rem; border-bottom: 2px solid #e2e8f0; margin-bottom: 1.5rem; background: #ffffff; border-radius: 12px 12px 0 0; }
-.twt-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: #0f172a; font-family: 'JetBrains Mono', monospace !important; }
-.twt-title span { color: #7c3aed; }
-.twt-sub { font-size: 0.75rem; color: #94a3b8; margin-top: 0.35rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
-.input-label { font-size: 0.7rem; font-weight: 700; color: #64748b; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; }
-textarea { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 8px !important; color: #0f172a !important; font-size: 0.95rem !important; line-height: 1.6 !important; transition: border-color 0.15s !important; padding: 0.75rem !important; }
-textarea:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important; outline: none !important; }
+body, .gradio-container, .gradio-container * {
+    font-family: 'Inter', -apple-system, sans-serif !important;
+}
+.gradio-container {
+    background-color: #f8fafc !important;
+    max-width: 1280px !important;
+}
+
+/* Header */
+.twt-header {
+    text-align: center;
+    padding: 3rem 1rem 2rem;
+    margin-bottom: 2.5rem;
+    background: transparent;
+    border-bottom: 1px solid #e2e8f0;
+}
+.twt-title {
+    font-size: 2.75rem;
+    font-weight: 800;
+    letter-spacing: -0.04em;
+    color: #0f172a;
+    font-family: 'JetBrains Mono', monospace !important;
+    margin-bottom: 0.5rem;
+}
+.twt-title span {
+    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.twt-sub {
+    font-size: 0.85rem;
+    color: #64748b;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+}
+
+/* Typography & Labels */
+.input-label, .panel-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #475569;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-bottom: 0.75rem;
+    display: block;
+}
+.panel-label {
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #e2e8f0;
+}
+
+/* Inputs & Forms */
+textarea {
+    background: #ffffff !important;
+    border: 1px solid #cbd5e1 !important;
+    border-radius: 12px !important;
+    color: #0f172a !important;
+    font-size: 0.95rem !important;
+    line-height: 1.6 !important;
+    padding: 1rem !important;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.2s ease-in-out !important;
+}
+textarea:focus {
+    border-color: #7c3aed !important;
+    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
+    outline: none !important;
+}
 textarea::placeholder { color: #94a3b8 !important; }
-button.primary { background: #7c3aed !important; color: #ffffff !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; border: none !important; border-radius: 8px !important; padding: 0.65rem 1.5rem !important; font-size: 0.9rem !important; transition: background 0.15s, transform 0.1s !important; cursor: pointer !important; width: 100% !important; }
-button.primary:hover { background: #6d28d9 !important; transform: translateY(-1px) !important; }
-.panel-label { font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e2e8f0; }
-.step-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; line-height: 1.65; animation: fadeUp 0.2s ease both; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
-.step-card.step-fault { border-color: #fca5a5; background: #fff5f5; }
-@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-.step-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
-.step-text { flex: 1; color: #1e293b; font-family: 'Inter', sans-serif !important; font-size: 0.875rem; }
-.badge { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; font-family: 'JetBrains Mono', monospace !important; letter-spacing: 0.04em; padding: 0.18rem 0.5rem; border-radius: 4px; align-self: flex-start; margin-top: 3px; }
-.badge-ok    { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
-.badge-fail  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
-.badge-final { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }
-.trace-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: #475569; font-family: 'JetBrains Mono', monospace !important; padding: 0.35rem 0; border-bottom: 1px solid #f1f5f9; }
-.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.dot-ok    { background: #22c55e; }
-.dot-fail  { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,0.4); }
-.dot-final { background: #7c3aed; }
-.trace-summary { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; }
-.trace-label { font-size: 0.65rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
-.trace-bar-bg { background: #e2e8f0; border-radius: 999px; height: 6px; overflow: hidden; }
-.trace-bar { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
-.trace-pct { font-size: 0.72rem; color: #475569; margin-top: 0.3rem; font-family: 'JetBrains Mono', monospace !important; font-weight: 500; }
-.msg { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; }
-.msg.warn  { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
-.msg.error { background: #fff5f5; color: #b91c1c; border: 1px solid #fca5a5; }
-.msg.empty { color: #94a3b8; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace !important; padding: 1rem; }
+
+/* Primary Button */
+button.primary {
+    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
+    color: #ffffff !important;
+    font-weight: 600 !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 0.75rem 1.5rem !important;
+    font-size: 0.95rem !important;
+    letter-spacing: 0.02em !important;
+    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3), 0 2px 4px -1px rgba(124, 58, 237, 0.2) !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+    width: 100% !important;
+}
+button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3), 0 4px 6px -2px rgba(124, 58, 237, 0.2) !important;
+}
+button.primary:active {
+    transform: translateY(0) !important;
+}
+
+/* Step Cards */
+.step-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.25rem;
+    margin-bottom: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.step-card:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+    border-color: #cbd5e1;
+}
+.step-card.step-fault {
+    border: 1px solid #fecaca;
+    background: #fff1f2;
+}
+.step-card.step-fault:hover {
+    border-color: #fca5a5;
+}
+
+@keyframes fadeUp {
+    from { opacity: 0; transform: translateY(12px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.step-icon {
+    font-size: 1.1rem;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+.step-text {
+    flex: 1;
+    color: #1e293b;
+}
+
+/* Badges */
+.badge {
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace !important;
+    letter-spacing: 0.05em;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px; /* Pill shape */
+    align-self: flex-start;
+    margin-top: 2px;
+}
+.badge-ok    { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
+.badge-fail  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
+.badge-final { background: #f3e8ff; color: #7c3aed; border: 1px solid #d8b4fe; }
+
+/* Trace Panel */
+.trace-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.8rem;
+    color: #334155;
+    font-family: 'JetBrains Mono', monospace !important;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #f1f5f9;
+}
+.trace-conf {
+    color: #94a3b8;
+    font-weight: 500;
+}
+.dot {
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+.dot-ok    { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
+.dot-fail  { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
+.dot-final { background: #8b5cf6; box-shadow: 0 0 0 3px #ede9fe; }
+
+.trace-summary {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e2e8f0;
+}
+.trace-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #475569;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.5rem;
+}
+.trace-bar-bg {
+    background: #e2e8f0;
+    border-radius: 999px;
+    height: 8px;
+    overflow: hidden;
+}
+.trace-bar {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.trace-pct {
+    font-size: 0.75rem;
+    color: #334155;
+    margin-top: 0.4rem;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-weight: 600;
+}
+
+/* System Messages */
+.msg {
+    padding: 1rem 1.25rem;
+    border-radius: 10px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+.msg.warn  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
+.msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
+.msg.empty {
+    color: #94a3b8;
+    font-size: 0.85rem;
+    font-family: 'JetBrains Mono', monospace !important;
+    padding: 1.5rem 1rem;
+    text-align: center;
+    border: 1px dashed #cbd5e1;
+    border-radius: 12px;
+}
+
+/* Gradio Overrides */
 .gradio-container .prose { color: #1e293b !important; }
-label span { color: #374151 !important; font-size: 0.85rem !important; }
+.gr-box, .gr-form { background: transparent !important; border: none !important; }
 """
 
+# ── Layout ────────────────────────────────────────────────────────────────────
 HEADER = """
 <div class='twt-header'>
     <div class='twt-title'>Think<span>While</span>Thinking</div>
@@ -216,17 +411,25 @@ with gr.Blocks(css=CSS, title="ThinkWhileThinking") as demo:
     with gr.Row():
         with gr.Column(scale=2):
             gr.HTML("<div class='input-label'>Problem</div>")
-            problem_input = gr.Textbox(placeholder="Enter a math, logic, or reasoning problem...", lines=5, show_label=False)
+            problem_input = gr.Textbox(
+                placeholder="Enter a math, logic, or reasoning problem...",
+                lines=5,
+                show_label=False,
+            )
             run_btn = gr.Button("▶  Analyze Reasoning", variant="primary")
             gr.Examples(examples=EXAMPLES, inputs=problem_input, label="Try an example")
         with gr.Column(scale=3):
             with gr.Row():
                 with gr.Column(scale=3):
                     gr.HTML("<div class='panel-label'>Chain of Thought · Step Scores</div>")
-                    cot_output = gr.HTML(value="<div class='msg empty'>// awaiting problem input</div>")
+                    cot_output = gr.HTML(
+                        value="<div class='msg empty'>// awaiting problem input</div>"
+                    )
                 with gr.Column(scale=1):
                     gr.HTML("<div class='panel-label'>Step Trace</div>")
-                    trace_output = gr.HTML(value="<div class='msg empty'>// trace</div>")
+                    trace_output = gr.HTML(
+                        value="<div class='msg empty'>// trace</div>"
+                    )
     raw_output = gr.Textbox(visible=False)
     run_btn.click(fn=run_twt, inputs=[problem_input], outputs=[raw_output, cot_output, trace_output])
     problem_input.submit(fn=run_twt, inputs=[problem_input], outputs=[raw_output, cot_output, trace_output])