frontend: manage light/dark mode

app.py

@@ -14,6 +14,7 @@ import torch.nn.functional as F
 from torchvision import transforms
 
 from utils import align_crop
+from title import title_css, title_with_logo
 
 # ───────────────────────────────
 # Data & models
@@ -36,42 +37,33 @@ PRIMARY = "#F97316"
 PRIMARY_DARK = "#C2410C"
 ACCENT_LIGHT = "#FFEAD2"
 BG_LIGHT = "#FFFBF7"
+CARD_BG_DARK = "#473f38"
+BG_DARK = "#332a22"
 TEXT_DARK = "#0F172A"
+TEXT_LIGHT = "#f8fafc"
 
 CSS = f"""
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
 /* ─── palette ───────────────────────────────────────────── */
-body {{
-  font-family:'Inter',sans-serif;
-  background:{BG_LIGHT};
-  color:{TEXT_DARK};
+body, .gradio-container {{
+  font-family: 'Inter', sans-serif;
+  background: {BG_LIGHT};
+  color: {TEXT_DARK};
 }}
 
 a {{
-  color:{PRIMARY};
-  text-decoration:none;
-  font-weight:600;
+  color: {PRIMARY};
+  text-decoration: none;
+  font-weight: 600;
 }}
-a:hover {{color:{PRIMARY_DARK}}}
+a:hover {{ color: {PRIMARY_DARK}; }}
 
 /* ─── headline ──────────────────────────────────────────── */
 #titlebar {{
-  text-align:center;
-  margin-top:2.4rem;
-  margin-bottom:.9rem;
-}}
-#edgeface-title {{
-  font-size:2.6rem;
-  font-weight:800;
-  margin:0;
-  line-height:1.25;
-  color: #0F172A;
-}}
-#edgeface-title .brand {{
-  background:linear-gradient(90deg,{PRIMARY} 0%,{PRIMARY_DARK} 90%);
-  -webkit-background-clip:text;
-  color:transparent;
+  text-align: center;
+  margin-top: 2.4rem;
+  margin-bottom: .9rem;
 }}
 
 /* ─── card look ─────────────────────────────────────────── */
@@ -79,94 +71,155 @@ a:hover {{color:{PRIMARY_DARK}}}
 .gr-box,
 .gr-row,
 #cite-wrapper {{
-  border:1px solid #F8C89B;
-  border-radius:10px;
-  background:#fff;
-  box-shadow:0 3px 6px rgba(0,0,0,.05);
+  border: 1px solid #F8C89B;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, .05);
 }}
-.gr-gallery-item {{background:#fff}}
+
+.gr-gallery-item {{ background: #fff; }}
 
 /* ─── controls / inputs ─────────────────────────────────── */
 .gr-button-primary,
 #copy-btn {{
-  background:linear-gradient(90deg,{PRIMARY} 0%,{PRIMARY_DARK} 100%);
-  border:none;
-  color:#fff;
-  border-radius:6px;
-  font-weight:600;
-  transition:transform .12s ease,box-shadow .12s ease;
+  background: linear-gradient(90deg, {PRIMARY} 0%, {PRIMARY_DARK} 100%);
+  border: none;
+  color: #fff;
+  border-radius: 6px;
+  font-weight: 600;
+  transition: transform .12s ease, box-shadow .12s ease;
 }}
+
 .gr-button-primary:hover,
 #copy-btn:hover {{
-  transform:translateY(-2px);
-  box-shadow:0 4px 12px rgba(249,115,22,.35);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
+}}
+
+.gr-dropdown input {{
+  border: 1px solid {PRIMARY}99;
 }}
-.gr-dropdown input {{border:1px solid {PRIMARY}99}}
 
 .preview img,
-.preview canvas {{object-fit:contain!important}}
+.preview canvas {{ object-fit: contain !important; }}
 
 /* ─── hero section ─────────────────────────────────────── */
-#hero-wrapper {{text-align:center}}
-
+#hero-wrapper {{ text-align: center; }}
 #hero-badge {{
-  display:inline-block;
-  padding:.85rem 1.2rem;
-  border-radius:8px;
-  background:{ACCENT_LIGHT};
-  border:1px solid {PRIMARY}55;
-  font-size:.95rem;
-  font-weight:600;
-  margin-bottom:.5rem;
+  display: inline-block;
+  padding: .85rem 1.2rem;
+  border-radius: 8px;
+  background: {ACCENT_LIGHT};
+  border: 1px solid {PRIMARY}55;
+  font-size: .95rem;
+  font-weight: 600;
+  margin-bottom: .5rem;
 }}
 
 #hero-links {{
-  font-size:.95rem;
-  font-weight:600;
-  margin-bottom:1.6rem;
+  font-size: .95rem;
+  font-weight: 600;
+  margin-bottom: 1.6rem;
 }}
+
 #hero-links img {{
-  height:22px;
-  vertical-align:middle;
-  margin-left:.55rem;
+  height: 22px;
+  vertical-align: middle;
+  margin-left: .55rem;
 }}
 
 /* ─── score area ───────────────────────────────────────── */
 #score-area {{
-  text-align:center;      /* ← centres the badge */
+  text-align: center;
+}}
+.title-container {{
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: center;
+    margin-bottom: 10px;
+    text-align: center;
 }}
-
 .match-badge {{
-  display:inline-block;
-  padding:.35rem .9rem;
-  border-radius:9999px;
-  font-weight:600;
-  font-size:1.25rem;      /* ← slightly larger */
+  display: inline-block;
+  padding: .35rem .9rem;
+  border-radius: 9999px;
+  font-weight: 600;
+  font-size: 1.25rem;
 }}
 
 /* ─── citation card ���───────────────────────────────────── */
 #cite-wrapper {{
-  position:relative;
-  padding:.9rem 1rem;
-  margin-top:2rem;
+  position: relative;
+  padding: .9rem 1rem;
+  margin-top: 2rem;
 }}
+
 #cite-wrapper code {{
   font-family: SFMono-Regular, Consolas, monospace;
   font-size: .84rem;
   white-space: pre-wrap;
-  color: #0F172A; 
+  color: {TEXT_DARK};
 }}
+
 #copy-btn {{
-  position:absolute;
-  top:.55rem;
-  right:.6rem;
-  padding:.18rem .7rem;
-  font-size:.72rem;
-  line-height:1;
+  position: absolute;
+  top: .55rem;
+  right: .6rem;
+  padding: .18rem .7rem;
+  font-size: .72rem;
+  line-height: 1;
+}}
+
+/* ─── dark mode ────────────────────────────────────── */
+.dark body,
+.dark .gradio-container {{
+  background-color: {BG_DARK};
+  color: #e5e7eb;
+}}
+
+.dark .gr-block,
+.dark .gr-box,
+.dark .gr-row {{
+  background-color: {BG_DARK};
+  border: 1px solid #4b5563;
+}}
+
+.dark .gr-dropdown input {{
+  background-color: {BG_DARK};
+  color: #f1f5f9;
+  border: 1px solid {PRIMARY}aa;
+}}
+
+.dark #hero-badge {{
+  background: #334155;
+  border: 1px solid {PRIMARY}55;
+  color: #fefefe;
 }}
+
+.dark #cite-wrapper {{
+  background-color: {CARD_BG_DARK};
+
+}}
+
+.dark #bibtex {{
+    color: {TEXT_LIGHT} !important;
+}}
+
+.dark .card {{
+  background-color: {CARD_BG_DARK};
+}}
+
+/* ─── switch logo for light/dark theme ─────────────── */
+.logo-dark {{ display: none; }}
+.dark .logo-light {{ display: none; }}
+.dark .logo-dark {{ display: inline; }}
 """
 
 
+FULL_CSS = CSS + title_css(TEXT_DARK, PRIMARY, PRIMARY_DARK, TEXT_LIGHT)
+
+
 # ───────────────────────────────
 # Torch / transforms
 # ───────────────────────────────
@@ -214,19 +267,14 @@ def compare(img_left,img_right,variant):
 # ───────────────────────────────
 # Static HTML
 # ───────────────────────────────
-TITLE_HTML = """
-<h1 id='edgeface-title'>
-  <span class="brand">EdgeFace:</span> Efficient Face Recognition Model for Edge Devices
-</h1>
-"""
+TITLE_HTML = title_with_logo("""<span class="brand">EdgeFace:</span> Efficient Face Recognition Model for Edge Devices""")
 
 # <div id="hero-badge">
 #   🏆 Winner of IJCB 2023 Efficient Face Recognition Competition
 # </div><br/>
-  
+
 HERO_HTML = f"""
 <div id="hero-wrapper">
-
   <div id="hero-links">
     <a href="https://www.idiap.ch/paper/edgeface/">Project</a>&nbsp;•&nbsp;
     <a href="https://publications.idiap.ch/attachments/papers/2024/George_IEEETBIOM_2024.pdf">Paper</a>&nbsp;•&nbsp;
@@ -255,26 +303,28 @@ CITATION_HTML = """
 # ───────────────────────────────
 # Gradio UI
 # ───────────────────────────────
-with gr.Blocks(css=CSS, title="EdgeFace Demo") as demo:
+with gr.Blocks(css=FULL_CSS, title="EdgeFace Demo") as demo:
     gr.HTML(TITLE_HTML, elem_id="titlebar")
     gr.HTML(HERO_HTML)
 
     with gr.Row():
         gal_a = gr.Gallery(PRELOADED, columns=[5], height=120,
-                           label="Image A", object_fit="contain")
+                           label="Image A", object_fit="contain",
+                           elem_classes="card")
         gal_b = gr.Gallery(PRELOADED, columns=[5], height=120,
-                           label="Image B", object_fit="contain")
+                           label="Image B", object_fit="contain",
+                           elem_classes="card")
 
     with gr.Row():
         # img_a = gr.Image(type="numpy", height=300, label="Image A",
         #                  elem_classes="preview")
         # img_b = gr.Image(type="numpy", height=300, label="Image B",
         #                  elem_classes="preview")
-        
+
         img_a = gr.Image(type="numpy", height=300, label="Image A (click or drag-drop)",
-                 interactive=True, elem_classes="preview")
+                 interactive=True, elem_classes="preview card")
         img_b = gr.Image(type="numpy", height=300, label="Image B (click or drag-drop)",
-                        interactive=True, elem_classes="preview")
+                        interactive=True, elem_classes="preview card")
 
     def _fill(evt: gr.SelectData):
         return _as_rgb(PRELOADED[evt.index]) if evt.index is not None else None
@@ -282,12 +332,12 @@ with gr.Blocks(css=CSS, title="EdgeFace Demo") as demo:
     gal_b.select(_fill, outputs=img_b)
 
     variant_dd = gr.Dropdown(EDGE_MODELS, value="edgeface_base",
-                             label="Model variant")
+                             label="Model variant", elem_classes="card")
     btn = gr.Button("Compare", variant="primary")
 
     with gr.Row():
-        out_a = gr.Image(label="Aligned A (112×112)")
-        out_b = gr.Image(label="Aligned B (112×112)")
+        out_a = gr.Image(label="Aligned A (112×112)", elem_classes="card")
+        out_b = gr.Image(label="Aligned B (112×112)", elem_classes="card")
     score_html = gr.HTML(elem_id="score-area")
 
     btn.click(compare, [img_a, img_b, variant_dd],

title.py

@@ -0,0 +1,58 @@
+# SPDX-FileCopyrightText: 2025 Idiap Research Institute
+# SPDX-FileContributor: Zangger Alicia
+# SPDX-License-Identifier: BSD-3-Clause
+
+import base64
+
+
+def encode_image(path):
+    with open(path, "rb") as img:
+        return base64.b64encode(img.read()).decode("utf-8")
+
+
+light_logo_b64 = encode_image("static/idiap-black.png")
+dark_logo_b64 = encode_image("static/idiap-white.png")
+
+
+def title_css(TEXT_DARK, PRIMARY, PRIMARY_DARK, TEXT_LIGHT):
+  return f"""
+#title {{
+  font-size: 2.6rem;
+  font-weight: 800;
+  margin: 0;
+  line-height: 1.25;
+  color: {TEXT_DARK};
+}}
+
+/* brand class is passed in title parameter */
+#title .brand {{
+  background: linear-gradient(90deg, {PRIMARY} 0%, {PRIMARY_DARK} 90%);
+  -webkit-background-clip: text;
+  color: transparent;
+}}
+
+.dark #title {{
+  color: {TEXT_LIGHT};
+}}
+
+.title-container {{
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: center;
+    margin-bottom: 10px;
+    text-align: center;
+}}
+"""
+
+
+def title_with_logo(title):
+    return f"""
+<div class="title-container">
+  <img class="logo-light" src="data:image/png;base64,{light_logo_b64}" alt="EdgeFace Logo Light" style="height: 50px;">
+  <img class="logo-dark" src="data:image/png;base64,{dark_logo_b64}" alt="EdgeFace Logo Dark" style="height: 50px;">
+  <h1 id="title" style="margin: 0;">
+    {title}
+  </h1>
+</div>
+"""