| """ |
| 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 = '<div class="project"><span class="lbl">Project</span> {project_name}</div>' |
| PROJECT_SECTION_EMPTY = "" |
|
|
|
|
| |
| _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 |
|
|
|
|
| |
| @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, "" |
|
|
|
|
| |
| 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) |
|
|
| if profile is None: |
| return ( |
| "Please sign in with your Hugging Face account to continue.", |
| gr.update(visible=False), |
| gr.update(visible=False), |
| "", |
| gr.update(value="", visible=True), |
| "", |
| None, |
| None, |
| reset_cb, |
| "", |
| ) |
|
|
| 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: |
| 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) |
|
|
| |
| 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, |
| ) |
|
|
|
|
| |
| 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 |
| ) |
|
|
|
|
| |
| 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 |
|
|
| |
| existing_path = None |
| try: |
| existing_path = get_certificate_image_path(username) |
| except Exception: |
| existing_path = None |
|
|
| |
| 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) |
|
|
| |
| if existing_path is None: |
| |
| 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: |
| |
| 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 |
|
|
| |
| 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 "<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> |
| """ |
|
|
|
|
| |
| 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") |
|
|
|
|
| |
| with gr.Blocks(title="Build Small — Certificate Generator") 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("") |
| |
| 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('<div class="bs-section">Your certificate</div>') |
| 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('<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, 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) |
|
|
