""" 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 inspect 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, get_certificate_image_path 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 = '
Project {project_name}
' PROJECT_SECTION_EMPTY = "" # ----------------------------------------------------------------------------- renderer client _gradio_client = None def get_gradio_client(): """Lazy init of the HTML->image renderer client (avoids event-loop issues). The auth kwarg for gradio_client.Client changed across versions (`hf_token` vs `token`), so pick whichever the installed version exposes. """ global _gradio_client if _gradio_client is None: params = inspect.signature(Client.__init__).parameters attempts = [] if "hf_token" in params: attempts.append({"hf_token": HF_TOKEN}) if "token" in params: attempts.append({"token": HF_TOKEN}) attempts.append({"headers": {"Authorization": f"Bearer {HF_TOKEN}"}}) last_err = None for kwargs in attempts: try: _gradio_client = Client(RENDERER_SPACE, **kwargs) break except TypeError as e: last_err = e if _gradio_client is None: raise last_err 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, pre-fills the form, and — if the user already generated a certificate — shows it and reveals the 'Recreate' control.""" reset_cb = gr.update(value=False) # never toggle the checkbox's own visibility (keeps it interactive) 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 None, # certificate_image None, # certificate_file reset_cb, # recreate_checkbox "", # generation_status ) username = profile.username profile_name = profile.name or username state, full_name, space_name = lookup_participant(username) if state in ("not_found", "error"): return ( f"Signed in as **{username}**.", gr.update(visible=False), gr.update(visible=True), "", gr.update(value="", visible=True), "", None, None, reset_cb, "", ) 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) # Already generated a certificate before? Fetch and show it, with guidance up top. existing = None try: existing = get_certificate_image_path(username) except Exception: existing = None if existing: gen_status = ( "### 📜 You already have a certificate\n" "It's shown below — **download it** and use it however you like (LinkedIn, socials, etc.).\n\n" "- Want a version with **different details**? Edit your name/project and click " "**Generate my certificate** — that's just a fresh preview to download and **won't change** " "the copy saved in our records.\n" "- Want to **replace** your saved copy? Tick **Recreate certificate** below, then generate. " "There's one certificate per participant, so the new one overwrites the old." ) cb = reset_cb else: gen_status = "" cb = reset_cb return ( f"Signed in as **{username}**.", gr.update(visible=True), gr.update(visible=False), name_value, project_update, status, existing, existing, cb, gen_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, recreate, oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): hide_cb = gr.update(value=False) if profile is None: return None, None, "❌ Please sign in first to generate your certificate.", "", hide_cb 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}." ), "", hide_cb if state == "error": return None, None, "❌ Couldn't reach the hackathon records right now. Please try again shortly.", "", hide_cb # Does a saved certificate already exist for this user? existing_path = None try: existing_path = get_certificate_image_path(username) except Exception: existing_path = None # Always render a fresh certificate from the CURRENT field values. 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}", "", gr.update(value=False) show_cb = gr.update(value=False) linkedin_url = generate_linkedin_url(participant_name, project_name) # Decide what happens to the SAVED copy in the dataset. if existing_path is None: # First time — save it. try: ok, msg = upload_user_certificate(Image.open(image_path), username, overwrite=False) note = ("🎉 Your certificate is ready and has been **saved to our records**. Download it " "below — you can edit your details and regenerate anytime.") if ok else \ f"⚠️ Certificate generated, but saving hit an issue: {msg}" except Exception as e: note = f"⚠️ Certificate generated, but saving was skipped: {e}" return image_path, image_path, note, linkedin_url, show_cb if recreate: # Replace the saved copy. try: ok, msg = upload_user_certificate(Image.open(image_path), username, overwrite=True) note = ("🔁 **Done — your new certificate has replaced the previous one saved in our " "records.** Download the updated copy below.") if ok else \ f"⚠️ Generated, but replacing the saved copy hit an issue: {msg}" except Exception as e: note = f"⚠️ Generated, but replacing the saved copy was skipped: {e}" return image_path, image_path, note, linkedin_url, show_cb # Existing copy + recreate NOT ticked → fresh preview only, dataset untouched. note = ( "👀 **Here's a new preview with your latest details** — download it below. " "Your **saved** certificate in our records is **unchanged**. " "To make this version the official one, tick **Recreate certificate** above and generate again." ) return image_path, image_path, note, linkedin_url, show_cb def render_linkedin_button(url): if not url: return "
Generate your certificate to enable LinkedIn sharing.
" return f""" Add to LinkedIn profile →

Opens LinkedIn with the certification pre-filled — then upload your downloaded image.

""" # ----------------------------------------------------------------------------- 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; } /* Theme-proof: force the light "paper" look for ALL visitors, even on Gradio dark mode. We override Gradio's theme CSS variables for both :root and .dark so blocks, inputs, labels and text never go dark-on-dark or light-on-light. */ .gradio-container, .dark, body, body.dark{ color-scheme: light !important; --body-background-fill:#f4eee1 !important; --background-fill-primary:#ffffff !important; --background-fill-secondary:#efe7d4 !important; --block-background-fill:#ffffff !important; --block-label-background-fill:#efe7d4 !important; --panel-background-fill:#efe7d4 !important; --block-label-text-color:#33312b !important; --block-title-text-color:#33312b !important; --block-info-text-color:rgba(51,49,43,.62) !important; --body-text-color:#33312b !important; --body-text-color-subdued:rgba(51,49,43,.60) !important; --input-background-fill:#ffffff !important; --input-text-color:#33312b !important; --input-placeholder-color:rgba(51,49,43,.45) !important; --border-color-primary:#33312b !important; --checkbox-background-color:#ffffff !important; --checkbox-background-color-selected:#3d6a55 !important; --checkbox-border-color:#33312b !important; --link-text-color:#3d6a55 !important; } .gradio-container{max-width:880px !important;margin:auto !important; font-family:'Archivo',system-ui,sans-serif !important;background:var(--paper) !important;color:var(--ink) !important;} .gradio-container .prose, .gradio-container .prose *, .gradio-container label, .gradio-container p, .gradio-container span, .gradio-container .md{color:var(--ink) !important;} .gradio-container .prose strong{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:not([type='checkbox']):not([type='radio']), textarea{border-radius:0 !important; border:2px solid var(--ink) !important;background:#fff !important;color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; font-family:'Spline Sans Mono',monospace !important;} input::placeholder, textarea::placeholder{color:rgba(51,49,43,.45) !important;-webkit-text-fill-color:rgba(51,49,43,.45) !important;} /* Download (PNG) file row — force light bg + readable ink text in any theme */ #cert-file, #cert-file *{background-color:#fff !important;color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;border-color:var(--ink) !important;fill:var(--ink) !important;} #cert-file a, #cert-file a *{color:var(--forest) !important;-webkit-text-fill-color:var(--forest) !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") as demo: gr.HTML( """
Hugging Face × Gradio · 2026

Build Small — Certificate

Sign in with Hugging Face to claim your certificate of participation. Built something small, local, and yours? Let's make it official.

""" ) 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"""
We couldn't find you in the Build Small Hackathon records.
Certificates are issued to registered participants and Build Small org Space contributors. If you think this is a mistake, reach out on Discord or email {CONTACT_EMAIL}.
""", visible=False, ) with gr.Column(visible=False) as main_interface: gr.HTML('
Your details
') data_status = gr.Markdown("") # status / "you already have a certificate" notice — kept at the TOP, above the form generation_status = gr.Markdown("") gr.Markdown( "✏️ **These details were auto-filled from the Build Small Hackathon records — " "you can edit both your name and your project/Space name** below before generating " "your certificate." ) participant_name = gr.Textbox( label="Full name (editable)", info="This appears on your certificate — edit if you'd like it shown differently.", ) project_name = gr.Textbox( label="Project / Space name (editable, optional)", info="Auto-filled from your Build Small submission. Edit it, or leave blank for a certificate without a project.", ) recreate_checkbox = gr.Checkbox( label="Recreate certificate — replace the copy saved in our records", info="Only matters once you already have a saved certificate — tick it to overwrite the stored copy.", value=False, visible=True, interactive=True, ) with gr.Row(elem_classes=["bs-generate"]): generate_btn = gr.Button("Generate my certificate", variant="primary", size="lg") gr.HTML('
Your certificate
') certificate_image = gr.Image(label="Preview", type="filepath", interactive=False) certificate_file = gr.File(label="Download (PNG)", interactive=False, elem_id="cert-file") gr.HTML('
Share
') 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, certificate_image, certificate_file, recreate_checkbox, generation_status], ) generate_btn.click( fn=create_certificate, inputs=[participant_name, project_name, recreate_checkbox], outputs=[certificate_image, certificate_file, generation_status, linkedin_state, recreate_checkbox], ).then( fn=lambda url: render_linkedin_button(url), inputs=[linkedin_state], outputs=[linkedin_html], ) if __name__ == "__main__": demo.launch(theme=BS_THEME, css=CUSTOM_CSS)