Upload app.py with huggingface_hub

app.py

@@ -274,6 +274,46 @@ def simulated_tps(tau, method, baseline_tps, load):
     return baseline_tps * tau / (1.0 + overhead) * (1.0 - load_pressure * waste)
 
 
+def apply_dark_plot_layout(fig):
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="#0b1220",
+        plot_bgcolor="#0f172a",
+        font=dict(color="#e5efff", family="Inter, ui-sans-serif, system-ui, sans-serif"),
+        title_font=dict(color="#f8fafc", size=18),
+        legend=dict(font=dict(color="#dbeafe")),
+        hoverlabel=dict(
+            bgcolor="#111827",
+            bordercolor="#475569",
+            font=dict(color="#f8fafc"),
+        ),
+    )
+    fig.update_xaxes(
+        gridcolor="rgba(148, 163, 184, 0.18)",
+        zerolinecolor="rgba(148, 163, 184, 0.22)",
+        linecolor="rgba(148, 163, 184, 0.34)",
+        tickcolor="rgba(148, 163, 184, 0.34)",
+        title_font=dict(color="#dbeafe"),
+        tickfont=dict(color="#cbd5e1"),
+    )
+    fig.update_yaxes(
+        gridcolor="rgba(148, 163, 184, 0.18)",
+        zerolinecolor="rgba(148, 163, 184, 0.22)",
+        linecolor="rgba(148, 163, 184, 0.34)",
+        tickcolor="rgba(148, 163, 184, 0.34)",
+        title_font=dict(color="#dbeafe"),
+        tickfont=dict(color="#cbd5e1"),
+    )
+    fig.update_traces(
+        colorbar=dict(
+            tickfont=dict(color="#dbeafe"),
+            title_font=dict(color="#f8fafc"),
+        ),
+        selector=dict(type="heatmap"),
+    )
+    return fig
+
+
 def metric_cards(target, task, method, baseline_tps, load):
     dspark = method_tau(target, "DSpark", task)
     dflash = method_tau(target, "DFlash", task)
@@ -317,6 +357,7 @@ def acceptance_bar(target, task):
         y=values,
         marker_color=[COLORS[method] for method in METHODS],
         text=[f"{v:.2f}" for v in values],
+        textfont=dict(color="#f8fafc", size=13),
         textposition="outside",
         hovertemplate="%{x}<br>Accepted length: %{y:.2f}<extra></extra>",
     )
@@ -326,12 +367,9 @@ def acceptance_bar(target, task):
         xaxis_title="Draft family",
         height=360,
         margin=dict(l=35, r=20, t=55, b=35),
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font=dict(color="#dbeafe"),
         yaxis=dict(gridcolor="rgba(148,163,184,0.18)", range=[0, max(values) + 1.0]),
     )
-    return fig
+    return apply_dark_plot_layout(fig)
 
 
 def acceptance_heatmap(target):
@@ -357,12 +395,9 @@ def acceptance_heatmap(target):
         title=f"DeepSpec Table 1 matrix for {target}",
         height=405,
         margin=dict(l=75, r=25, t=55, b=70),
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font=dict(color="#dbeafe"),
         xaxis=dict(tickangle=-30),
     )
-    return fig
+    return apply_dark_plot_layout(fig)
 
 
 def production_plot():
@@ -377,6 +412,7 @@ def production_plot():
             textposition="top center",
             line=dict(color="#14b8a6", width=3),
             marker=dict(size=12),
+            textfont=dict(color="#f8fafc"),
             hovertemplate="V4-Flash SLA %{x} tok/s/user<br>Throughput uplift %{y}%<extra></extra>",
         )
     )
@@ -390,6 +426,7 @@ def production_plot():
             textposition="top center",
             line=dict(color="#f97316", width=3),
             marker=dict(size=12),
+            textfont=dict(color="#f8fafc"),
             hovertemplate="V4-Pro SLA %{x} tok/s/user<br>Throughput uplift %{y}%<extra></extra>",
         )
     )
@@ -399,13 +436,10 @@ def production_plot():
         yaxis_title="Aggregate throughput uplift vs MTP-1",
         height=380,
         margin=dict(l=45, r=25, t=55, b=45),
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font=dict(color="#dbeafe"),
         yaxis=dict(gridcolor="rgba(148,163,184,0.18)"),
         legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="left", x=0),
     )
-    return fig
+    return apply_dark_plot_layout(fig)
 
 
 def inventory_plot():
@@ -432,13 +466,10 @@ def inventory_plot():
         xaxis_title="Target model family",
         height=380,
         margin=dict(l=45, r=25, t=55, b=45),
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font=dict(color="#dbeafe"),
         yaxis=dict(gridcolor="rgba(148,163,184,0.18)"),
         legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="left", x=0),
     )
-    return fig
+    return apply_dark_plot_layout(fig)
 
 
 def architecture_panel():
@@ -593,14 +624,98 @@ CSS = """
   --panel: rgba(15, 23, 42, 0.86);
   --line: rgba(148, 163, 184, 0.18);
   --text: #e5efff;
-  --muted: #9fb0c8;
+  --muted: #b8c4d6;
 }
 .gradio-container {
+  color-scheme: dark;
+  --body-background-fill: #070b13;
+  --body-text-color: #e5efff;
+  --block-background-fill: rgba(15, 23, 42, 0.92);
+  --block-border-color: rgba(148, 163, 184, 0.24);
+  --border-color-primary: rgba(148, 163, 184, 0.28);
+  --input-background-fill: #0b1220;
+  --input-border-color: rgba(148, 163, 184, 0.36);
+  --input-placeholder-color: #94a3b8;
+  --button-primary-background-fill: #0f766e;
+  --button-primary-background-fill-hover: #0d9488;
+  --button-primary-text-color: #f8fafc;
+  --link-text-color: #67e8f9;
   background:
     radial-gradient(circle at 12% 0%, rgba(20, 184, 166, 0.18), transparent 28%),
     linear-gradient(135deg, #070b13 0%, #0f172a 52%, #111827 100%);
   color: var(--text);
 }
+.gradio-container label,
+.gradio-container .label,
+.gradio-container .prose,
+.gradio-container .prose * {
+  color: #dbeafe !important;
+}
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  background: #0b1220 !important;
+  color: #f8fafc !important;
+  border-color: rgba(148, 163, 184, 0.36) !important;
+}
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder {
+  color: #94a3b8 !important;
+}
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus {
+  border-color: rgba(20, 184, 166, 0.76) !important;
+  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18) !important;
+}
+.gradio-container button {
+  border-color: rgba(148, 163, 184, 0.28) !important;
+}
+.gradio-container button[role="tab"],
+.gradio-container .tab-nav button {
+  background: #0b1220 !important;
+  color: #cbd5e1 !important;
+  border-color: rgba(148, 163, 184, 0.2) !important;
+}
+.gradio-container button[aria-selected="true"],
+.gradio-container button[role="tab"][aria-selected="true"] {
+  background: rgba(20, 184, 166, 0.18) !important;
+  color: #f8fafc !important;
+  border-color: rgba(20, 184, 166, 0.48) !important;
+}
+.gradio-container .wrap,
+.gradio-container .block,
+.gradio-container .panel,
+.gradio-container .form {
+  background: rgba(15, 23, 42, 0.72) !important;
+  border-color: rgba(148, 163, 184, 0.22) !important;
+  color: #e5efff !important;
+}
+.gradio-container .dataframe,
+.gradio-container .table-wrap,
+.gradio-container table {
+  background: #0b1220 !important;
+  color: #e5efff !important;
+  border-color: rgba(148, 163, 184, 0.24) !important;
+}
+.gradio-container th {
+  background: #111827 !important;
+  color: #f8fafc !important;
+  border-color: rgba(148, 163, 184, 0.24) !important;
+}
+.gradio-container td {
+  background: #0b1220 !important;
+  color: #e2e8f0 !important;
+  border-color: rgba(148, 163, 184, 0.18) !important;
+}
+.gradio-container tr:nth-child(even) td {
+  background: #0f172a !important;
+}
+.gradio-container .plot-container,
+.gradio-container .js-plotly-plot {
+  background: #0b1220 !important;
+  border-radius: 8px;
+}
 .main-shell {
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -658,7 +773,7 @@ CSS = """
   border-radius: 8px;
   padding: 14px;
   min-height: 118px;
-  background: rgba(2, 6, 23, 0.42);
+  background: rgba(2, 6, 23, 0.66);
   position: relative;
   overflow: hidden;
 }