Build Small certificate generator

README.md

@@ -1,13 +1,25 @@
 ---
-title: Certificate Generator
-emoji: 📉
-colorFrom: purple
-colorTo: blue
+title: Build Small Hackathon Certificate Generator
+emoji: 🪵
+colorFrom: green
+colorTo: yellow
 sdk: gradio
-sdk_version: 6.19.0
-python_version: '3.13'
+sdk_version: 6.1.0
 app_file: app.py
-pinned: false
+pinned: true
+license: mit
+hf_oauth: true
+short_description: Claim your Build Small Hackathon certificate
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Build Small — Certificate Generator
+
+Sign in with Hugging Face to generate your **Build Small Hackathon** certificate of
+participation. Your name and (if you shipped a Space) your project are auto-filled from the
+hackathon records — all fields are editable before you generate.
+
+Eligibility is validated against `build-small-hackathon/build-small-apps-for-certificates`
+(registered participants ∪ org Space contributors). Generated certificates are saved to the
+public gallery dataset `build-small-hackathon/build-small-certificates`.
+
+Check the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,344 @@
+"""
+Build Small Hackathon — Certificate Generator
+=============================================
+Workflow:
+  1. User signs in with Hugging Face (OAuth).
+  2. We take their HF username and look it up in the private eligibility dataset
+     `build-small-hackathon/build-small-apps-for-certificates`
+     (registered participants ∪ org Space contributors).
+       • username found WITH a space  -> autofill full name + project name
+       • username found WITHOUT a space -> autofill full name, no project
+       • username not found             -> show contact message, do not proceed
+  3. All autofilled fields are editable.
+  4. A button generates the certificate (HTML -> PNG via the renderer Space) and
+     saves it to the public gallery dataset `build-small-hackathon/build-small-certificates`.
+"""
+import os
+import uuid
+import tempfile
+import urllib.parse
+from functools import lru_cache
+
+import gradio as gr
+import pandas as pd
+from PIL import Image
+from datasets import load_dataset
+from gradio_client import Client, handle_file
+
+from certificate_upload_module import upload_user_certificate
+
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+ELIGIBILITY_DATASET = "build-small-hackathon/build-small-apps-for-certificates"
+RENDERER_SPACE = "https://ysharma-hackathon-certificate-html-to-image.hf.space/"
+
+DISCORD_INVITE = "https://discord.gg/92sEPT2Zhv"
+CONTACT_EMAIL = "hello@gradio.app"
+
+_TEMPLATE_PATH = os.path.join(os.path.dirname(__file__), "certificate_template.html")
+with open(_TEMPLATE_PATH, encoding="utf-8") as _f:
+    CERTIFICATE_HTML_TEMPLATE = _f.read()
+
+PROJECT_SECTION_WITH_NAME = '<div class="project"><span class="lbl">Project</span> {project_name}</div>'
+PROJECT_SECTION_EMPTY = ""
+
+
+# ----------------------------------------------------------------------------- renderer client
+_gradio_client = None
+
+
+def get_gradio_client():
+    """Lazy init of the HTML->image renderer client (avoids event-loop issues)."""
+    global _gradio_client
+    if _gradio_client is None:
+        _gradio_client = Client(RENDERER_SPACE, hf_token=HF_TOKEN)
+    return _gradio_client
+
+
+# ----------------------------------------------------------------------------- eligibility lookup
+@lru_cache(maxsize=1)
+def _eligibility_index():
+    """Load the eligibility dataset once into {username_lower: (full_name, space_name)}."""
+    ds = load_dataset(ELIGIBILITY_DATASET, split="train", token=HF_TOKEN)
+    df = ds.to_pandas().fillna("")
+    index = {}
+    for _, row in df.iterrows():
+        uname = str(row.get("hf_username", "")).strip()
+        if not uname:
+            continue
+        index[uname.lower()] = (
+            str(row.get("full_name", "")).strip(),
+            str(row.get("space_name", "")).strip(),
+        )
+    return index
+
+
+def lookup_participant(username: str):
+    """Return (state, full_name, space_name).
+
+    state ∈ {"found_project", "found_no_project", "not_found"}.
+    """
+    if not username:
+        return "not_found", "", ""
+    try:
+        index = _eligibility_index()
+    except Exception as e:
+        print(f"[ERROR] eligibility load failed: {e}")
+        return "error", "", ""
+
+    entry = index.get(username.strip().lower())
+    if entry is None:
+        return "not_found", "", ""
+    full_name, space_name = entry
+    if space_name:
+        return "found_project", full_name, space_name
+    return "found_no_project", full_name, ""
+
+
+# ----------------------------------------------------------------------------- on login
+def on_load(profile: gr.OAuthProfile | None):
+    """Runs on page load. Drives which panel is shown and pre-fills the form."""
+    if profile is None:
+        return (
+            "Please sign in with your Hugging Face account to continue.",
+            gr.update(visible=False),   # main_interface
+            gr.update(visible=False),   # contact_box
+            "",                          # name
+            gr.update(value="", visible=True),  # project
+            "",                          # data_status
+        )
+
+    username = profile.username
+    profile_name = profile.name or username
+    state, full_name, space_name = lookup_participant(username)
+
+    if state == "not_found":
+        return (
+            f"Signed in as **{username}**.",
+            gr.update(visible=False),
+            gr.update(visible=True),
+            "",
+            gr.update(value="", visible=True),
+            "",
+        )
+    if state == "error":
+        return (
+            f"Signed in as **{username}**.",
+            gr.update(visible=False),
+            gr.update(visible=True),
+            "",
+            gr.update(value="", visible=True),
+            "",
+        )
+
+    name_value = full_name or profile_name
+
+    if state == "found_project":
+        status = f"✅ Found your submission — **{space_name}**. Review the details below, then generate."
+        project_update = gr.update(value=space_name, visible=True)
+    else:  # found_no_project
+        status = (
+            "✅ You're on the participant list! We couldn't find a Space submission under your "
+            "name — you can add a project below or leave it blank."
+        )
+        project_update = gr.update(value="", visible=True)
+
+    return (
+        f"Signed in as **{username}**.",
+        gr.update(visible=True),
+        gr.update(visible=False),
+        name_value,
+        project_update,
+        status,
+    )
+
+
+# ----------------------------------------------------------------------------- LinkedIn helper
+def generate_linkedin_url(participant_name, project_name):
+    params = {
+        "startTask": "CERTIFICATION_NAME",
+        "name": "Build Small Hackathon 2026",
+        "organizationName": "Hugging Face",
+        "issueYear": "2026",
+        "issueMonth": "6",
+    }
+    return "https://www.linkedin.com/profile/add?" + urllib.parse.urlencode(
+        params, quote_via=urllib.parse.quote
+    )
+
+
+# ----------------------------------------------------------------------------- generate
+def create_certificate(participant_name, project_name,
+                       oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None):
+    if profile is None:
+        return None, None, "❌ Please sign in first to generate your certificate.", ""
+
+    username = profile.username
+    state, _, _ = lookup_participant(username)
+    if state == "not_found":
+        return None, None, (
+            "❌ We couldn't find you in the Build Small Hackathon records, so we can't issue a "
+            f"certificate. Please reach out on [Discord]({DISCORD_INVITE}) or email {CONTACT_EMAIL}."
+        ), ""
+    if state == "error":
+        return None, None, "❌ Couldn't reach the hackathon records right now. Please try again shortly.", ""
+
+    participant_name = (participant_name or "").strip() or (profile.name or username)
+    project_name = (project_name or "").strip()
+
+    project_section = (
+        PROJECT_SECTION_WITH_NAME.replace("{project_name}", project_name)
+        if project_name else PROJECT_SECTION_EMPTY
+    )
+
+    html = CERTIFICATE_HTML_TEMPLATE.replace("{participant_name}", participant_name)
+    html = html.replace("{project_section}", project_section)
+
+    with tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".html", encoding="utf-8") as f:
+        f.write(html)
+        html_path = f.name
+
+    try:
+        client = get_gradio_client()
+        image_path = client.predict(html_file=handle_file(html_path), api_name="/predict")[0]
+    except Exception as e:
+        return None, None, f"❌ Error generating certificate image: {e}", ""
+
+    # Save to the public gallery dataset
+    try:
+        cert_image = Image.open(image_path)
+        ok, msg = upload_user_certificate(cert_image, username)
+        save_note = msg if ok else f"(generated — gallery save note: {msg})"
+    except Exception as e:
+        save_note = f"(generated — gallery save skipped: {e})"
+
+    linkedin_url = generate_linkedin_url(participant_name, project_name)
+    status = f"🎉 Your certificate is ready, {participant_name}! {save_note}"
+    return image_path, image_path, status, linkedin_url
+
+
+def render_linkedin_button(url):
+    if not url:
+        return "<div style='padding:.5rem;color:var(--ink-soft)'>Generate your certificate to enable LinkedIn sharing.</div>"
+    return f"""
+    <a href="{url}" target="_blank" class="bs-linkedin">Add to LinkedIn profile →</a>
+    <p style="margin-top:8px;font-size:.85rem;color:#6b6655">
+      Opens LinkedIn with the certification pre-filled — then upload your downloaded image.</p>
+    """
+
+
+# ----------------------------------------------------------------------------- theming
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Spline+Sans+Mono:wght@400;500;600&display=swap');
+:root{
+  --paper:#f4eee1; --kraft:#e4d5b7; --kraft-deep:#d6c19a; --line:#cdbb95;
+  --ink:#33312b; --ink-soft:rgba(51,49,43,.62); --forest:#3d6a55; --forest-ink:#20392d; --amber:#e0913a;
+}
+.gradio-container{max-width:880px !important;margin:auto !important;
+  font-family:'Archivo',system-ui,sans-serif !important;background:var(--paper) !important;}
+.gradio-container .prose, .gradio-container label, .gradio-container p{color:var(--ink) !important;}
+.bs-hero{position:relative;overflow:hidden;background:var(--kraft);border:2px solid var(--ink);
+  box-shadow:6px 6px 0 var(--ink);padding:30px 34px;margin-bottom:22px;}
+.bs-hero .kick{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.24em;
+  text-transform:uppercase;color:var(--forest);font-weight:600;}
+.bs-hero h1{font-family:'Archivo';font-weight:900;font-stretch:120%;font-size:46px;line-height:.95;
+  letter-spacing:-.02em;color:var(--ink);margin:8px 0 6px;}
+.bs-hero p{color:#5a5446;font-size:15px;margin:0;}
+.bs-section{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.18em;
+  text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:6px 0 2px;display:flex;
+  align-items:center;gap:9px;}
+.bs-section::before{content:"";width:20px;height:2px;background:var(--amber);display:inline-block;}
+button.primary, .bs-generate button{background:var(--forest) !important;border:2px solid var(--forest-ink) !important;
+  color:#fff !important;border-radius:0 !important;font-family:'Archivo' !important;font-weight:800 !important;
+  box-shadow:4px 4px 0 var(--forest-ink) !important;transition:transform .1s,box-shadow .1s !important;}
+.bs-generate button:hover{transform:translate(2px,2px) !important;box-shadow:2px 2px 0 var(--forest-ink) !important;}
+.bs-contact{background:#fbeee0;border:2px solid var(--amber);box-shadow:4px 4px 0 var(--ink);padding:18px 22px;}
+.bs-contact a{color:var(--forest);font-weight:700;}
+.bs-linkedin{display:inline-block;background:var(--ink);color:var(--paper) !important;text-decoration:none;
+  font-weight:800;padding:11px 20px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--amber);}
+input, textarea{border-radius:0 !important;border:2px solid var(--ink) !important;
+  background:#fff !important;font-family:'Spline Sans Mono',monospace !important;}
+footer{display:none !important;}
+"""
+
+BS_THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.green,
+    secondary_hue=gr.themes.colors.orange,
+    neutral_hue=gr.themes.colors.stone,
+    font=gr.themes.GoogleFont("Archivo"),
+).set(button_large_radius="0px", button_small_radius="0px", block_radius="0px")
+
+
+# ----------------------------------------------------------------------------- UI
+with gr.Blocks(title="Build Small — Certificate Generator", theme=BS_THEME, css=CUSTOM_CSS) as demo:
+    gr.HTML(
+        """
+        <div class="bs-hero">
+          <div class="kick">Hugging Face × Gradio · 2026</div>
+          <h1>Build Small — Certificate</h1>
+          <p>Sign in with Hugging Face to claim your certificate of participation. Built something
+             small, local, and yours? Let's make it official.</p>
+        </div>
+        """
+    )
+
+    with gr.Group():
+        login_btn = gr.LoginButton(value="Sign in with Hugging Face")
+        login_status = gr.Markdown("Please sign in with your Hugging Face account to continue.")
+
+    contact_box = gr.HTML(
+        f"""
+        <div class="bs-contact">
+          <strong>We couldn't find you in the Build Small Hackathon records.</strong><br>
+          Certificates are issued to registered participants and Build Small org Space contributors.
+          If you think this is a mistake, reach out on
+          <a href="{DISCORD_INVITE}" target="_blank">Discord</a> or email
+          <a href="mailto:{CONTACT_EMAIL}">{CONTACT_EMAIL}</a>.
+        </div>
+        """,
+        visible=False,
+    )
+
+    with gr.Column(visible=False) as main_interface:
+        gr.HTML('<div class="bs-section">Your details</div>')
+        data_status = gr.Markdown("")
+        participant_name = gr.Textbox(
+            label="Full name",
+            info="This appears on your certificate — edit if you'd like it shown differently.",
+        )
+        project_name = gr.Textbox(
+            label="Project / Space name (optional)",
+            info="Auto-filled from your Build Small submission. Leave blank for a certificate without a project.",
+        )
+        with gr.Row(elem_classes=["bs-generate"]):
+            generate_btn = gr.Button("Generate my certificate", variant="primary", size="lg")
+
+        gr.HTML('<div class="bs-section">Your certificate</div>')
+        certificate_image = gr.Image(label="Preview", type="filepath", interactive=False, show_download_button=True)
+        certificate_file = gr.File(label="Download (PNG)", interactive=False)
+        generation_status = gr.Markdown("")
+
+        gr.HTML('<div class="bs-section">Share</div>')
+        linkedin_html = gr.HTML(render_linkedin_button(""))
+
+    linkedin_state = gr.State("")
+
+    demo.load(
+        fn=on_load,
+        inputs=None,
+        outputs=[login_status, main_interface, contact_box, participant_name, project_name, data_status],
+    )
+
+    generate_btn.click(
+        fn=create_certificate,
+        inputs=[participant_name, project_name],
+        outputs=[certificate_image, certificate_file, generation_status, linkedin_state],
+    ).then(
+        fn=lambda url: render_linkedin_button(url),
+        inputs=[linkedin_state],
+        outputs=[linkedin_html],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

certificate_template.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Build Small — Certificate</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..900&family=Spline+Sans+Mono:wght@400;500;600&display=swap');
+
+:root{
+  --paper:#f4eee1; --paper-2:#efe7d4; --kraft:#e4d5b7; --kraft-deep:#d6c19a; --line:#cdbb95;
+  --ink:#33312b; --ink-2:#4a4639; --ink-soft:rgba(51,49,43,.62); --ink-faint:rgba(51,49,43,.40);
+  --forest:#3d6a55; --forest-deep:#2b4d3d; --forest-ink:#20392d;
+  --amber:#e0913a; --amber-deep:#c2762a; --clay:#bd5f37;
+  --font-display:'Archivo',system-ui,sans-serif;
+  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
+}
+*{margin:0;padding:0;box-sizing:border-box;}
+body{width:2000px;height:1414px;overflow:hidden;}
+
+.certificate{
+  width:2000px;height:1414px;position:relative;overflow:hidden;
+  background:var(--paper);color:var(--ink);
+  font-family:var(--font-display);
+  print-color-adjust:exact;-webkit-print-color-adjust:exact;
+}
+
+/* paper grain (from the field-guide global.css) */
+.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
+
+/* topographic contour backdrops — corners, forest tint */
+.topo{position:absolute;z-index:1;pointer-events:none;opacity:.32;}
+.topo--br{right:-260px;bottom:-300px;width:1100px;height:1100px;}
+.topo--tl{left:-320px;top:-340px;width:1000px;height:1000px;opacity:.22;}
+
+/* frame */
+.frame{position:absolute;inset:46px;z-index:3;border:3px solid var(--ink);background:transparent;}
+.frame::after{content:"";position:absolute;inset:13px;border:2px solid var(--ink-faint);pointer-events:none;}
+
+/* registration corner ticks */
+.tick{position:absolute;z-index:5;width:46px;height:46px;}
+.tick path{stroke:var(--ink);stroke-width:3;fill:none;}
+.tick--tl{top:30px;left:30px;} .tick--tr{top:30px;right:30px;transform:scaleX(-1);}
+.tick--bl{bottom:30px;left:30px;transform:scaleY(-1);} .tick--br{bottom:30px;right:30px;transform:scale(-1,-1);}
+
+.content{position:relative;z-index:4;height:100%;padding:60px 120px 50px;
+  display:flex;flex-direction:column;text-align:center;}
+
+/* ---- top bar ---- */
+.topbar{display:flex;justify-content:space-between;align-items:center;}
+.eyebrow{font-family:var(--font-mono);font-size:18px;font-weight:500;letter-spacing:.30em;
+  text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:14px;}
+.eyebrow::before{content:"";width:34px;height:2px;background:var(--amber);display:inline-block;}
+.coord{font-family:var(--font-mono);font-size:16px;letter-spacing:.10em;color:var(--ink-faint);}
+
+/* ---- lockup ---- */
+.lockup{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:30px;}
+.lockup img{height:48px;display:block;}
+.lockup .hf-wm{font-weight:800;font-stretch:112%;font-size:34px;letter-spacing:-.01em;color:var(--ink);}
+.lockup .cross{font-family:var(--font-mono);font-size:30px;color:var(--ink-faint);font-weight:400;}
+.hf-mark{display:inline-flex;align-items:center;gap:16px;}
+
+/* ---- title ---- */
+.kicker{font-family:var(--font-mono);font-size:19px;font-weight:600;letter-spacing:.26em;
+  text-transform:uppercase;color:var(--forest);margin-top:30px;}
+.title{font-weight:900;font-stretch:122%;font-size:142px;line-height:.92;letter-spacing:-.02em;
+  margin-top:12px;color:var(--ink);}
+.subtitle{font-family:var(--font-mono);font-size:21px;font-weight:500;letter-spacing:.42em;
+  text-transform:uppercase;color:var(--ink-2);margin-top:16px;}
+
+/* ---- body ---- */
+.body{flex-grow:1;display:flex;flex-direction:column;justify-content:center;}
+.certifies{font-family:var(--font-mono);font-size:23px;color:var(--ink-soft);letter-spacing:.04em;margin-bottom:6px;}
+.name{font-weight:800;font-stretch:105%;font-size:98px;line-height:1;letter-spacing:-.01em;
+  color:var(--forest-deep);padding:14px 0 20px;display:inline-block;margin:6px auto 0;
+  border-bottom:3px solid var(--ink);}
+.desc{font-size:25px;line-height:1.58;color:var(--ink-2);max-width:1300px;margin:32px auto 0;font-weight:500;text-wrap:pretty;}
+.desc strong{font-weight:800;color:var(--ink);}
+.project{margin:22px auto 0;display:inline-flex;align-items:center;gap:16px;
+  font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--ink);
+  background:var(--kraft);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
+  padding:18px 34px;}
+.project .lbl{color:var(--forest);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:18px;}
+
+/* ---- stats ---- */
+.stats{display:flex;justify-content:center;width:fit-content;margin:32px auto 0;
+  border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);}
+.stat{padding:18px 50px;border-right:2px solid var(--ink);}
+.stat:last-child{border-right:none;}
+.stat b{display:block;font-weight:800;font-stretch:118%;font-size:44px;line-height:1;color:var(--ink);}
+.stat span{display:block;font-family:var(--font-mono);font-size:15px;letter-spacing:.10em;
+  text-transform:uppercase;color:var(--ink-soft);margin-top:10px;}
+
+/* ---- signature row ---- */
+.sigrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:0;padding-top:30px;}
+.sig{display:flex;flex-direction:column;gap:10px;}
+.sig--l{align-items:flex-start;text-align:left;} .sig--r{align-items:flex-end;text-align:right;}
+.sig__val{font-weight:800;font-stretch:110%;font-size:26px;color:var(--ink);}
+.sig__lbl{font-family:var(--font-mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
+.sig__rule{width:280px;height:0;border-top:2px solid var(--ink);margin-bottom:2px;}
+
+/* circular stamp seal */
+.seal{width:152px;height:152px;position:relative;transform:rotate(-7deg);}
+
+/* ---- sponsors ---- */
+.sponsors{margin-top:24px;padding-top:22px;border-top:2px dashed var(--line);}
+.sponsors__t{font-family:var(--font-mono);font-size:15px;letter-spacing:.24em;text-transform:uppercase;
+  color:var(--ink-faint);margin-bottom:18px;}
+.sponsors__l{font-weight:800;font-stretch:108%;font-size:31px;color:var(--ink);letter-spacing:-.005em;}
+.sponsors__l i{color:var(--kraft-deep);font-style:normal;font-weight:400;margin:0 16px;
+  position:relative;top:-3px;font-size:24px;}
+</style>
+</head>
+<body>
+<div class="certificate">
+  <div class="grain"></div>
+
+  <!-- topo contour backdrops -->
+  <svg class="topo topo--br" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#3d6a55" stroke-width="1.4">
+    <path d="M200 40C120 60 60 120 50 210s40 150 130 150 160-70 150-160S280 20 200 40Z"/>
+    <path d="M200 80C140 96 96 142 90 210s34 116 110 116 128-54 122-120S262 64 200 80Z"/>
+    <path d="M200 120C158 132 128 166 124 212s26 84 78 84 96-40 92-86S240 108 200 120Z"/>
+    <path d="M200 160C176 168 158 188 156 214s16 52 46 52 58-24 56-50S224 152 200 160Z"/>
+    <path d="M200 196c-14 4-24 16-24 30s12 26 26 26 28-12 28-28-16-30-30-28Z"/>
+  </svg>
+  <svg class="topo topo--tl" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#e0913a" stroke-width="1.4">
+    <path d="M200 40C120 60 60 120 50 210s40 150 130 150 160-70 150-160S280 20 200 40Z"/>
+    <path d="M200 90C146 104 104 146 98 208s32 110 104 110 122-50 116-114S256 76 200 90Z"/>
+    <path d="M200 140C166 150 142 180 138 214s22 74 68 74 84-34 80-74S232 130 200 140Z"/>
+    <path d="M200 190c-18 4-32 20-32 38s14 32 34 32 34-16 34-36-18-38-36-34Z"/>
+  </svg>
+
+  <div class="frame"></div>
+  <svg class="tick tick--tl" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
+  <svg class="tick tick--tr" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
+  <svg class="tick tick--bl" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
+  <svg class="tick tick--br" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
+
+  <div class="content">
+    <div class="topbar">
+      <span class="eyebrow">Certificate of Participation</span>
+      <span class="coord">June 15, 2026</span>
+    </div>
+
+    <div class="lockup">
+      <span class="hf-mark">
+        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face">
+        <span class="hf-wm">Hugging&nbsp;Face</span>
+      </span>
+      <span class="cross">×</span>
+      <img src="https://www.gradio.app/_app/immutable/assets/gradio-logo-with-title.3SNGTZpF.svg" alt="Gradio">
+    </div>
+
+    <div>
+      <div class="kicker">Hugging Face × Gradio Hackathon</div>
+      <div class="title">Build Small</div>
+      <div class="subtitle">Small · Local · Yours</div>
+    </div>
+
+    <div class="body">
+      <div class="certifies">This certifies that</div>
+      <div class="name" id="participantName">{participant_name}</div>
+      <div class="desc">
+        has successfully participated in <strong>Build Small</strong>, a Hugging&nbsp;Face&nbsp;×&nbsp;Gradio
+        hackathon celebrating small, local, open-weight models — building real, tinkerable apps
+        powered entirely by models <strong>under 32B parameters</strong>.
+      </div>
+      {project_section}
+      <div class="stats">
+        <div class="stat"><b>&lt; 32B</b><span>Params · Local-first</span></div>
+        <div class="stat"><b>$48K+</b><span>Prize Pool</span></div>
+      </div>
+    </div>
+
+    <div class="sponsors">
+      <div class="sponsors__t">Proudly supported by</div>
+      <div class="sponsors__l">
+        OpenBMB <i>·</i> Black Forest Labs <i>·</i> OpenAI <i>·</i> NVIDIA <i>·</i> Modal <i>·</i> JetBrains <i>·</i> Cohere Labs
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

certificate_upload_module.py

@@ -0,0 +1,99 @@
+"""Upload generated certificates to the public Build Small gallery dataset."""
+import os
+import time
+import tempfile
+import logging
+
+from PIL import Image as PILImage
+from datasets import Dataset, Image, load_dataset, concatenate_datasets
+from huggingface_hub import HfApi
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# PUBLIC dataset that acts as the gallery of issued certificates
+CERTIFICATE_DATASET_NAME = "build-small-hackathon/build-small-certificates"
+
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+
+def safe_add_certificate_to_dataset(certificate_image, hf_username, max_retries=5, retry_delay=3):
+    """Append a certificate image to the dataset, handling empty/existing datasets and dedup."""
+    try:
+        if not hf_username or not hf_username.strip():
+            return False, "❌ Error: HF username is required"
+        if certificate_image is None:
+            return False, "❌ Error: Certificate image is required"
+        hf_username = hf_username.strip()
+        logger.info(f"Processing certificate for user: {hf_username}")
+
+        existing_dataset = None
+        load_successful = False
+        is_empty_dataset = False
+
+        for attempt in range(max_retries):
+            try:
+                existing_dataset = load_dataset(CERTIFICATE_DATASET_NAME, split="train", token=HF_TOKEN)
+                logger.info(f"Loaded {len(existing_dataset)} existing certificates")
+                load_successful = True
+                break
+            except Exception as load_error:
+                error_str = str(load_error).lower()
+                if "corresponds to no data" in error_str or "no data" in error_str or "doesn't exist" in error_str or "not found" in error_str:
+                    logger.info("Dataset empty / not yet created — will create first entry")
+                    is_empty_dataset = True
+                    load_successful = True
+                    existing_dataset = None
+                    break
+                logger.warning(f"Attempt {attempt + 1} failed: {str(load_error)[:120]}")
+                if attempt < max_retries - 1:
+                    time.sleep(retry_delay)
+
+        if not load_successful:
+            return False, ("❌ Certificate upload temporarily unavailable. Please try again in a few minutes.")
+
+        # Dedup by username (stored in the 'label' column)
+        if existing_dataset is not None:
+            if hf_username in existing_dataset["label"]:
+                return True, f"a certificate for '{hf_username}' already exists in the gallery."
+
+        with tempfile.TemporaryDirectory() as temp_dir:
+            if isinstance(certificate_image, PILImage.Image):
+                temp_image_path = os.path.join(temp_dir, f"certificate_{hf_username}_{int(time.time())}.png")
+                certificate_image.save(temp_image_path, "PNG")
+            elif isinstance(certificate_image, str) and os.path.exists(certificate_image):
+                temp_image_path = certificate_image
+            else:
+                return False, "❌ Error: Invalid image format provided"
+
+            new_dataset = Dataset.from_dict(
+                {"image": [temp_image_path], "label": [hf_username]}
+            ).cast_column("image", Image())
+
+            if existing_dataset is not None and not is_empty_dataset:
+                combined_dataset = concatenate_datasets([existing_dataset, new_dataset])
+            else:
+                combined_dataset = new_dataset
+
+            try:
+                combined_dataset.push_to_hub(CERTIFICATE_DATASET_NAME, private=False, token=HF_TOKEN)
+                logger.info(f"Saved certificate. Total now: {len(combined_dataset)}")
+                return True, f"✅ saved to the gallery for {hf_username}."
+            except Exception as upload_error:
+                msg = str(upload_error).lower()
+                if any(i in msg for i in ("rate limit", "429", "too many requests")):
+                    return False, "⏳ Upload busy due to high load — please try again in 10–15 minutes."
+                logger.error(f"Upload failed: {upload_error}")
+                return False, f"❌ Certificate upload failed: {str(upload_error)}"
+    except Exception as e:
+        logger.error(f"Unexpected error in certificate upload: {e}")
+        return False, f"❌ Certificate upload failed: {str(e)}"
+
+
+def upload_user_certificate(certificate_image, hf_username):
+    """Public entry point — returns (success, message)."""
+    if not certificate_image:
+        return False, "❌ No certificate image provided"
+    if not hf_username or not hf_username.strip():
+        return False, "❌ HF username is required"
+    return safe_add_certificate_to_dataset(certificate_image, hf_username)

requirements.txt

@@ -0,0 +1,3 @@
+datasets
+pandas
+gradio_client