Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| custom_css = """ | |
| /* ────────────────────────────────────────────── | |
| Base / layout | |
| ────────────────────────────────────────────── */ | |
| body { | |
| background: linear-gradient(135deg, #020617 0%, #1e0b45 50%, #020617 100%); | |
| } | |
| .gradio-container { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", | |
| "Segoe UI", sans-serif; | |
| max-width: 1200px !important; | |
| margin: 0 auto !important; | |
| padding: 36px 36px 48px 36px !important; | |
| color: #f9fafb; | |
| } | |
| .gradio-container .block { | |
| background: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| } | |
| /* Give all rows breathing room between columns */ | |
| .gradio-container .row > .column { | |
| padding: 0 6px; | |
| } | |
| .gradio-container .row { | |
| gap: 18px !important; | |
| } | |
| /* Tabs spacing */ | |
| .gradio-container .tab-nav, | |
| .gradio-container .tabs > .tab-nav { | |
| margin-bottom: 18px !important; | |
| } | |
| .gradio-container .tab-nav button { | |
| padding: 10px 18px !important; | |
| font-size: 14px !important; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Glass card shell | |
| ────────────────────────────────────────────── */ | |
| .glass-card { | |
| background: rgba(15, 23, 42, 0.96) !important; | |
| border-radius: 22px !important; | |
| border: 1px solid rgba(148, 163, 184, 0.28) !important; | |
| box-shadow: 0 24px 60px rgba(15, 23, 42, 0.55) !important; | |
| overflow: hidden; | |
| margin-bottom: 18px !important; | |
| } | |
| /* Padding via ID selectors (beats Svelte scoped styles) */ | |
| #input-card, | |
| #result-card, | |
| #hiw-intro-card, | |
| #hiw-step1-card, | |
| #hiw-step2-card, | |
| #hiw-step3-card, | |
| #about-intro-card, | |
| #about-thesis-card, | |
| #fb-intro-card, | |
| #fb-form-card, | |
| #fb-faq-card { | |
| padding: 28px 30px !important; | |
| } | |
| /* Inner Gradio form wrapper (Svelte renders this inside every Group) */ | |
| #input-card > .form, | |
| #result-card > .form, | |
| #hiw-intro-card > .form, | |
| #hiw-step1-card > .form, | |
| #hiw-step2-card > .form, | |
| #hiw-step3-card > .form, | |
| #about-intro-card > .form, | |
| #about-thesis-card > .form, | |
| #fb-intro-card > .form, | |
| #fb-form-card > .form, | |
| #fb-faq-card > .form { | |
| padding: 0 !important; | |
| gap: 16px !important; | |
| } | |
| /* Markdown blocks inside cards — vertical rhythm */ | |
| .glass-card .prose, | |
| .glass-card .markdown-body { | |
| margin: 0 !important; | |
| } | |
| .glass-card h2, | |
| .glass-card h3, | |
| .glass-card h4 { | |
| margin-top: 0 !important; | |
| margin-bottom: 12px !important; | |
| color: #f8fafc !important; | |
| } | |
| .glass-card p, | |
| .glass-card li { | |
| color: #e5e7eb !important; | |
| line-height: 1.65 !important; | |
| } | |
| .glass-card blockquote { | |
| border-left: 3px solid rgba(148, 163, 184, 0.45) !important; | |
| padding: 10px 14px !important; | |
| margin: 4px 0 !important; | |
| color: #cbd5f5 !important; | |
| background: rgba(148, 163, 184, 0.06) !important; | |
| border-radius: 8px !important; | |
| } | |
| /* Equal-height card rows */ | |
| .card-row { | |
| align-items: stretch !important; | |
| } | |
| .card-row .glass-card { | |
| height: 100%; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Hero section | |
| ────────────────────────────────────────────── */ | |
| .hero-section { | |
| max-width: 1120px; | |
| margin: 4px auto 28px auto; | |
| padding: 0 4px; | |
| } | |
| .hero-title { | |
| font-size: 34px; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| line-height: 1.25; | |
| color: #f1f5f9; | |
| margin-bottom: 12px; | |
| } | |
| .hero-subtitle { | |
| font-size: 14.5px; | |
| line-height: 1.6; | |
| max-width: 720px; | |
| color: #cbd5f5; | |
| opacity: 0.92; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Confidence display | |
| ────────────────────────────────────────────── */ | |
| .conf-text-row { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| margin-top: 14px; | |
| margin-bottom: 10px; | |
| } | |
| .conf-val { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: #f8fafc; | |
| line-height: 1; | |
| letter-spacing: -0.01em; | |
| } | |
| .conf-caption { | |
| font-size: 12px; | |
| opacity: 0.75; | |
| color: #cbd5f5; | |
| padding-bottom: 4px; | |
| } | |
| .conf-bar-bg { | |
| width: 100%; | |
| height: 10px; | |
| border-radius: 999px; | |
| background: rgba(148, 163, 184, 0.22); | |
| box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); | |
| overflow: hidden; | |
| margin-top: 4px; | |
| } | |
| .conf-bar-fill { | |
| height: 100%; | |
| border-radius: inherit; | |
| background: linear-gradient(90deg, #f97316, #fb923c); | |
| transition: width 0.4s ease; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Label badges | |
| ────────────────────────────────────────────── */ | |
| .badge-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 6px 18px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .badge-fake { background: #f97316; color: #111827; } | |
| .badge-real { background: #22c55e; color: #022c22; } | |
| .badge-neutral { | |
| background: rgba(148, 163, 184, 0.25); | |
| color: #cbd5f5; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Textboxes & inputs | |
| ────────────────────────────────────────────── */ | |
| #news-textbox textarea, | |
| #fb-textbox textarea, | |
| #fb-email-textbox textarea, | |
| #fb-email-textbox input { | |
| background: #020617 !important; | |
| border-radius: 12px !important; | |
| border: 1px solid rgba(148, 163, 184, 0.30) !important; | |
| color: #f9fafb !important; | |
| font-size: 14px !important; | |
| padding: 16px 18px !important; | |
| line-height: 1.6 !important; | |
| box-sizing: border-box !important; | |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| #news-textbox textarea:focus, | |
| #fb-textbox textarea:focus, | |
| #fb-email-textbox input:focus { | |
| border-color: rgba(165, 180, 252, 0.7) !important; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; | |
| outline: none !important; | |
| } | |
| #news-textbox textarea::placeholder, | |
| #fb-textbox textarea::placeholder, | |
| #fb-email-textbox input::placeholder { | |
| color: #94a3b8 !important; | |
| opacity: 1 !important; | |
| } | |
| /* Labels */ | |
| .gradio-container label { | |
| margin-bottom: 8px !important; | |
| font-size: 13px !important; | |
| color: #e2e8f0 !important; | |
| } | |
| /* Dropdown */ | |
| .gradio-container .wrap.svelte-1ipelgc, | |
| .gradio-container select, | |
| .gradio-container .gr-dropdown { | |
| background: #020617 !important; | |
| color: #f9fafb !important; | |
| border-radius: 12px !important; | |
| border: 1px solid rgba(148, 163, 184, 0.30) !important; | |
| } | |
| /* Checkbox label spacing */ | |
| .gradio-container .gr-checkbox label, | |
| .gradio-container input[type="checkbox"] + span { | |
| color: #e2e8f0 !important; | |
| font-size: 13px !important; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Buttons | |
| ────────────────────────────────────────────── */ | |
| .btn-row { | |
| gap: 12px !important; | |
| margin-top: 4px !important; | |
| } | |
| .btn-primary-custom, | |
| .btn-secondary-custom { | |
| border-radius: 12px !important; | |
| font-size: 14px !important; | |
| font-weight: 600 !important; | |
| padding: 11px 22px !important; | |
| min-height: 42px !important; | |
| transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important; | |
| border: 1px solid transparent !important; | |
| cursor: pointer !important; | |
| } | |
| .btn-primary-custom { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; | |
| color: #ffffff !important; | |
| box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35) !important; | |
| } | |
| .btn-primary-custom:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 10px 22px rgba(99, 102, 241, 0.45) !important; | |
| } | |
| .btn-primary-custom:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary-custom { | |
| background: rgba(148, 163, 184, 0.12) !important; | |
| color: #e5e7eb !important; | |
| border: 1px solid rgba(148, 163, 184, 0.35) !important; | |
| } | |
| .btn-secondary-custom:hover { | |
| background: rgba(148, 163, 184, 0.20) !important; | |
| transform: translateY(-1px); | |
| } | |
| /* ────────────────────────────────────────────── | |
| Helper text | |
| ────────────────────────────────────────────── */ | |
| .helper-text { | |
| font-size: 12px; | |
| opacity: 0.75; | |
| color: #cbd5f5; | |
| display: inline-block; | |
| margin-top: 4px; | |
| } | |
| /* ────────────────────────────────────────────── | |
| Responsive | |
| ────────────────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .gradio-container { | |
| padding: 20px 18px 32px 18px !important; | |
| } | |
| .two-col { | |
| flex-direction: column !important; | |
| } | |
| .hero-title { | |
| font-size: 26px; | |
| } | |
| #input-card, | |
| #result-card, | |
| #hiw-intro-card, | |
| #hiw-step1-card, | |
| #hiw-step2-card, | |
| #hiw-step3-card, | |
| #about-intro-card, | |
| #about-thesis-card, | |
| #fb-intro-card, | |
| #fb-form-card, | |
| #fb-faq-card { | |
| padding: 22px 22px !important; | |
| } | |
| } | |
| """ | |
| def header(): | |
| return gr.HTML( | |
| """ | |
| <div style="max-width:1120px;margin:0 auto 4px auto;"> | |
| <header style="display:flex;align-items:center;justify-content:space-between; | |
| margin-bottom:22px;padding:0 4px;"> | |
| <div style="display:flex;align-items:center;gap:12px;"> | |
| <div style="width:36px;height:36px;border-radius:999px; | |
| background:radial-gradient(circle at 30% 30%, #a5b4fc, #6366f1); | |
| display:flex;align-items:center;justify-content:center; | |
| color:#020617;font-weight:700;font-size:17px; | |
| box-shadow:0 6px 16px rgba(99,102,241,0.35);"> | |
| C | |
| </div> | |
| <div style="line-height:1.25;"> | |
| <div style="font-weight:600;font-size:13px;letter-spacing:0.10em; | |
| text-transform:uppercase;color:#f1f5f9;"> | |
| CMD‑BERT | |
| </div> | |
| <div style="font-size:11.5px;color:#94a3b8;margin-top:2px;"> | |
| Cebuano Misinformation Detector | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display:flex;align-items:center;gap:10px;font-size:13px; | |
| color:#e5e7eb;opacity:0.9;"> | |
| <span>About CMD‑BERT</span> | |
| <div style="width:26px;height:26px;border-radius:999px; | |
| background:rgba(148,163,184,0.30); | |
| border:1px solid rgba(148,163,184,0.35);"></div> | |
| </div> | |
| </header> | |
| </div> | |
| """ | |
| ) | |