Update app.py

app.py

@@ -924,105 +924,82 @@ def clear_cb():
 
 # ───── Gradio interface definition ───────────────────────────────
 css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
 :root{
-  --bg:#f8fafc; --card:#f8fafc; --text:#0f172a;
-  --muted:#6b7280; --border:#e5e7eb; --shadow:0 6px 24px rgba(2,6,23,.06);
-  --radius:14px; --icon-size:20px;
+  --bg:#f8fafc;
+  --card:#f8fafc;
+  --text:#0f172a;
+  --muted:#6b7280;
+  --border:#e5e7eb;
+  --shadow:0 6px 24px rgba(2,6,23,.06);
+  --radius:14px;
+  --icon-size:20px;
 }
 
 *{box-sizing:border-box}
-html,body{background:#fff!important;color:var(--text)!important}
-.gradio-container{max-width:1120px;margin:0 auto}
 
-/* Title and subtitle */
-h1{
-  font-family:Inter,ui-sans-serif;letter-spacing:.2px;font-weight:700;
-  font-size:32px;margin:22px 0 12px;text-align:center
+html, body, .gradio-container {
+  background:#fff !important;
+  color:var(--text) !important;
+  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
 }
-.subtle{color:var(--muted);font-size:14px;text-align:center;margin:-6px 0 18px}
 
-/* Card style */
-.card{
-  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
-  box-shadow:var(--shadow); padding:22px;
+.gradio-container{
+  max-width:1120px;
+  margin:0 auto;
 }
 
-/* Top links */
-.link-row{display:flex;justify-content:center;gap:14px;margin:0 auto 18px;flex-wrap:wrap}
-
-/* Two-column grid: left=input, right=controls */
-.grid-2{display:grid;grid-template-columns:1.4fr .9fr;gap:16px}
-.grid-2 .col{display:flex;flex-direction:column;gap:12px}
-
-/* Buttons */
-.gr-button{border-radius:12px !important;font-weight:700 !important;letter-spacing:.2px}
-#extract-btn{background:linear-gradient(90deg,#EFAFB2,#EFAFB2); color:#0f172a}
-#inference-btn{background:linear-gradient(90deg,#B2CBDF,#B2CBDF); color:#0f172a}
-#clear-btn{background:#FFE2B5; color:#0A0A0A; border:1px solid var(--border)}
+/* ───── Title and subtitle ───── */
+h1{
+  font-family:'Inter', system-ui, sans-serif !important;
+  letter-spacing:.2px;
+  font-weight:700 !important;
+  font-size:32px !important;
+  margin:22px 0 12px;
+  text-align:center;
+}
 
-/* Result spacing */
-#result-table{margin-bottom:16px}
+.subtle{
+  color:var(--muted);
+  font-size:14px;
+  text-align:center;
+  margin:-6px 0 18px;
+}
 
-/* Figure container */
-.figure-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
-.figure-wrap img{display:block;width:100%;height:auto}
+/* ───── Card style ───── */
+.card{
+  background:var(--card);
+  border:1px solid var(--border);
+  border-radius:var(--radius);
+  box-shadow:var(--shadow);
+  padding:22px;
+}
 
-/* Right pane: vertical radio layout and full-width controls (kept for button styling) */
-.right-pane .gr-button{
-  width:100% !important;
-  height:48px !important;
+/* ───── Buttons ───── */
+.gr-button{
   border-radius:12px !important;
   font-weight:700 !important;
   letter-spacing:.2px;
 }
-/* ───────── Publication links (Bulma-like) ───────── */
-
-.publication-links {
-  display: flex;
-  justify-content: center;
-  gap: 14px;
-  flex-wrap: wrap;
-  margin: 6px 0 18px;
-}
-
-.link-block a {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 18px;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 9999px;
-  text-decoration: none;
-  transition: all 0.15s ease-in-out;
-}
-
-/* colour variants */
-.btn-danger  { background:#e2e8f0; color:#0f172a; }
-.btn-dark    { background:#e2e8f0; color:#0f172a; }
-.btn-link    { background:#e2e8f0; color:#0f172a; }
-.btn-warning { background:#e2e8f0; color:#0f172a; }
 
-.link-block a:hover {
-  filter: brightness(0.95);
-  transform: translateY(-1px);
+#extract-btn{
+  background:linear-gradient(90deg,#EFAFB2,#EFAFB2);
+  color:#0f172a;
 }
 
-.loscalzo-block img {
-  height: 100px;          
-  width: auto;     
-  object-fit: contain;
+#inference-btn{
+  background:linear-gradient(90deg,#B2CBDF,#B2CBDF);
+  color:#0f172a;
 }
 
-.loscalzo-block {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  margin: 0 auto;
-  justify-content: center;
+#clear-btn{
+  background:#FFE2B5;
+  color:#0A0A0A;
+  border:1px solid var(--border);
 }
 
+/* ───── SVG Link Buttons ───── */
 .link-btn{
   display:inline-flex !important;
   align-items:center !important;
@@ -1043,6 +1020,27 @@ h1{
   transform:translateY(-1px);
 }
 
+/* ───── Figure container ───── */
+.figure-wrap{
+  border:1px solid var(--border);
+  border-radius:12px;
+  overflow:hidden;
+  box-shadow:var(--shadow);
+}
+
+.figure-wrap img{
+  display:block;
+  width:100%;
+  height:auto;
+}
+
+/* ───── Right pane buttons full width ───── */
+.right-pane .gr-button{
+  width:100% !important;
+  height:48px !important;
+}
+
+
 """
 with gr.Blocks() as demo: