import gradio as gr import pandas as pd import tempfile import os import uuid import urllib.parse from datasets import load_dataset from datetime import datetime from gradio_client import Client, handle_file from certificate_upload_module import upload_user_certificate from PIL import Image from functools import lru_cache hf_token = os.getenv("HF_TOKEN") # Lazy initialization of gradio_client to avoid event loop issues _gradio_client = None def get_gradio_client(): """Lazy initialization of the Gradio client to avoid asyncio event loop conflicts""" global _gradio_client if _gradio_client is None: _gradio_client = Client("https://ysharma-hackathon-certificate-html-to-image.hf.space/", token=hf_token) return _gradio_client def check_username_in_cell(cell_value, target_username): """ Check if target_username exists in a cell that may contain comma-separated usernames. Handles: "ysharma", "Gideon, jjin6573", "Lucian25, SJLee-0525, Sungjoon Lee", etc. """ if pd.isna(cell_value) or cell_value is None: return False # Split by comma and strip whitespace, then compare case-insensitively usernames_in_cell = [u.strip().lower() for u in str(cell_value).split(',')] return target_username.lower() in usernames_in_cell # HTML template for the certificate CERTIFICATE_HTML_TEMPLATE = """ MCP's 1st Birthday - Certificate

This certifies that

{participant_name}

has successfully participated in and completed MCP's 1st Birthday Hackathon, a global virtual developer event celebrating one year of Model Context Protocol, hosted by Anthropic and Gradio.

{project_section}

7,200+

Participants

530+

Submissions

$55,000+

Total Prizes

Proudly Sponsored By

""" # Project section template (conditional - only shown if project exists) PROJECT_SECTION_WITH_NAME = """

Project: {project_name}

""" PROJECT_SECTION_EMPTY = "" def load_user_data(oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """ Load user data with two-tier lookup: 1. First check mcp-birthday-hackathon-apps-for-certificates (submissions) 2. If not found, check gradio-hackathon-registrations-winter-2025 (registrations) 3. If not in either, return error Returns: (project_name, status_message, user_state) user_state: 'submitted' | 'registered_only' | 'not_found' """ if not oauth_token or not profile: return None, "❌ Please log in first to access your certificate data.", "not_logged_in" try: username = profile.username if hasattr(profile, 'username') else profile.name hf_token = os.environ.get('HF_TOKEN') if not hf_token: return None, "❌ HF_TOKEN environment variable not set. Please contact administrators.", "error" # === TIER 1: Check submissions dataset === try: submissions_dataset = load_dataset( "ysharma/mcp-birthday-hackathon-apps-for-certificates", token=hf_token, split="train" ) submissions_df = submissions_dataset.to_pandas() # Debug: Print column names and sample data to logs print(f"[DEBUG] Submissions dataset columns: {submissions_df.columns.tolist()}") print(f"[DEBUG] Looking for username: {username}") print(f"[DEBUG] First few rows of hf_username column: {submissions_df['hf_username'].head().tolist()}") # Find user by HF username (handles comma-separated usernames like "Gideon, jjin6573") # Column name: hf_username mask = submissions_df['hf_username'].apply(lambda x: check_username_in_cell(x, username)) user_rows = submissions_df[mask] if not user_rows.empty: # Found in submissions - use first match user_data = user_rows.iloc[0] print(f"[DEBUG] Found user row data: {user_data.to_dict()}") # Column name: space_name project_name = str(user_data.get('space_name', '')).strip() if user_data.get('space_name') else '' print(f"[DEBUG] Extracted project_name: '{project_name}'") result = ( project_name, f"✅ Found your submission: **{project_name}**", "submitted" ) return result except Exception as e: print(f"[ERROR] Error loading submissions dataset: {e}") import traceback traceback.print_exc() # Continue to tier 2 if submissions dataset fails # === TIER 2: Check registrations dataset === try: registrations_dataset = load_dataset( "ysharma/gradio-hackathon-registrations-winter-2025", token=hf_token, split="train" ) registrations_df = registrations_dataset.to_pandas() # Debug: Print column names print(f"[DEBUG] Registrations dataset columns: {registrations_df.columns.tolist()}") print(f"[DEBUG] First few rows of hf_username column: {registrations_df['hf_username'].head().tolist()}") # Column name: hf_username (also handle comma-separated just in case) mask = registrations_df['hf_username'].apply(lambda x: check_username_in_cell(x, username)) user_rows = registrations_df[mask] if not user_rows.empty: print(f"[DEBUG] Found user in registrations dataset") # Found in registrations but NOT in submissions result = ( None, # No project name "✅ Found your **registration**! However, we couldn't locate a project submission for you. " "You can enter your project name below, or leave it blank to generate a certificate without a project name.", "registered_only" ) return result except Exception as e: print(f"[ERROR] Error loading registrations dataset: {e}") import traceback traceback.print_exc() # === NOT FOUND IN EITHER === result = ( None, f"❌ We couldn't find your username (**{username}**) in our MCP 1st Birthday Hackathon records. " "Please contact the Gradio team on Discord: https://discord.gg/92sEPT2Zhv", "not_found" ) return result except Exception as e: return ( None, f"❌ Error loading data: {str(e)}. Please contact the Gradio team on Discord: " "https://discord.gg/92sEPT2Zhv", "error" ) def load_all_user_data(oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """ Single consolidated function to load all user data at once. Returns: (login_status, main_interface_visible, participant_name, participant_username, project_name, data_status) """ # Default values for logged out state if not profile: return ( "❌ Please log in with your Hugging Face account", # login_status gr.update(visible=False), # main_interface "", # participant_name "", # participant_username "", # project_name "" # data_status ) # User is logged in username = profile.username if hasattr(profile, 'username') else profile.name name = profile.name if hasattr(profile, 'name') else "" login_status = f"✅ Logged in as: **{username}**" # Load user data (fresh lookup every time) project_name, status_message, user_state = load_user_data(oauth_token, profile) return ( login_status, gr.update(visible=True), name, username, project_name or "", status_message ) def get_participant_name(profile: gr.OAuthProfile | None): """Get participant name from profile - used by create_certificate""" if profile: name = profile.name if hasattr(profile, 'name') else "" username = profile.username if hasattr(profile, 'username') else "" return name, username return "", "" def generate_linkedin_url(participant_name, project_name): """Generate LinkedIn Add to Profile URL with pre-populated certificate details""" cert_name = "MCP's 1st Birthday Hackathon 2025" organization_name = "Hugging Face" issue_year = "2025" issue_month = "12" # December params = { 'startTask': 'CERTIFICATION_NAME', 'name': cert_name, 'organizationName': organization_name, 'issueYear': issue_year, 'issueMonth': issue_month, } encoded_params = urllib.parse.urlencode(params, quote_via=urllib.parse.quote) linkedin_url = f"https://www.linkedin.com/profile/add?{encoded_params}" return linkedin_url def create_certificate(participant_name: str, project_name: str, oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """Generate the certificate HTML and create LinkedIn integration""" if not oauth_token or not profile: return None, "❌ Please log in first to generate your certificate.", "" # Get user state to validate they're allowed to generate _, _, user_state = load_user_data(oauth_token, profile) if user_state == "not_found": return None, "❌ You're not registered for this hackathon. Please contact us on Discord: https://discord.gg/92sEPT2Zhv", "" if user_state == "error": return None, "❌ Error accessing hackathon data. Please try again later.", "" # Handle participant name if not participant_name.strip(): participant_name = profile.name if hasattr(profile, 'name') else "Participant" # Handle project name - can be empty for registered_only users project_name = project_name.strip() if project_name else "" # Build project section (conditional) if project_name: project_section = PROJECT_SECTION_WITH_NAME.replace("{project_name}", project_name) else: project_section = PROJECT_SECTION_EMPTY # Fill in the template certificate_html = CERTIFICATE_HTML_TEMPLATE.replace("{participant_name}", participant_name) certificate_html = certificate_html.replace("{project_section}", project_section) # Save to a temporary HTML file with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix='.html', encoding='utf-8') as f: f.write(certificate_html) html_temp_path = f.name # Generate certificate image via Playwright Space try: client = get_gradio_client() image_temp_path = client.predict( html_file=handle_file(html_temp_path), api_name="/predict" )[0] except Exception as e: return None, f"❌ Error generating certificate image: {str(e)}", "" certificate_image = Image.open(image_temp_path) _, hf_username = get_participant_name(profile) # Upload certificate and get status upload_status = certificate_upload(certificate_image, hf_username) # Generate LinkedIn URL linkedin_url = generate_linkedin_url(participant_name, project_name) return image_temp_path, f"{upload_status}", linkedin_url def certificate_upload(certificate_image, hf_username): """Upload to dataset and return status""" success, message = upload_user_certificate(certificate_image, hf_username) if success: return f"✅ Certificate generated and saved! {message}" else: return f"⚠️ Certificate generated but upload failed: {message}" # Custom CSS for modern UI CUSTOM_CSS = """ /* Global styling */ .gradio-container { max-width: 900px !important; margin: auto !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* Header styling */ .header-section { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; margin-bottom: 1.5rem; color: white; } .header-section h1 { margin: 0 0 0.5rem 0; font-size: 2rem; font-weight: 700; } .header-section p { margin: 0; opacity: 0.9; font-size: 1.1rem; } /* Card styling */ .info-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; } /* Status messages */ .status-success { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 0.75rem 1rem; color: #065f46; } .status-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 0.75rem 1rem; color: #991b1b; } /* Button styling */ .primary-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; border: none !important; border-radius: 10px !important; padding: 12px 32px !important; font-weight: 600 !important; font-size: 1rem !important; transition: transform 0.2s, box-shadow 0.2s !important; } .primary-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important; } /* Input fields */ .gradio-textbox input { border-radius: 8px !important; border: 1px solid #e2e8f0 !important; padding: 12px !important; font-size: 1rem !important; } .gradio-textbox input:focus { border-color: #667eea !important; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important; } /* File download area */ .file-download { border: 2px dashed #e2e8f0; border-radius: 12px; padding: 1.5rem; text-align: center; background: #f8fafc; } /* LinkedIn section */ .linkedin-section { background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%); border-radius: 12px; padding: 1.5rem; color: white; } /* Instructions section */ .instructions { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px; padding: 1.5rem; font-size: 0.95rem; } /* Section headers */ .section-header { font-size: 1.25rem; font-weight: 600; color: #1e293b; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } /* Hide footer */ footer { display: none !important; } /* Smooth animations */ * { transition: background-color 0.2s, border-color 0.2s; } """ # Create the Gradio interface with gr.Blocks(title="MCP's 1st Birthday Hackathon - Certificate Generator",) as demo: # Header gr.HTML("""

🎂 MCP's 1st Birthday Hackathon

Generate your personalized certificate of participation

""") # Login section with gr.Group(): with gr.Row(): with gr.Column(): login_btn = gr.LoginButton(value="🔐 Sign in with Hugging Face") login_status = gr.Markdown("Please log in with your Hugging Face account to continue") # Main interface (initially hidden) with gr.Column(visible=False) as main_interface: # Certificate Information Card gr.HTML('

📝 Certificate Information

') data_status = gr.Markdown("") with gr.Group(): participant_name = gr.Textbox( label="Participant Name", placeholder="Your name (auto-filled from HF profile)", info="This will appear on your certificate" ) participant_username = gr.Textbox( label="Participant username", visible=False, ) project_name = gr.Textbox( label="Project Name (Optional)", placeholder="Your project name (auto-loaded if you submitted)", info="Leave blank if you don't have a project submission" ) generate_btn = gr.Button( "🎂 Generate Certificate", variant="primary", size="lg", elem_classes=["primary-btn"] ) # Output section gr.HTML('

📄 Your Certificate

') with gr.Group(): certificate_file = gr.File( label="Download Your Certificate", type="filepath", interactive=False ) generation_status = gr.Markdown("") # LinkedIn integration section gr.HTML('

🔗 LinkedIn Integration

') with gr.Group(): linkedin_url_display = gr.Textbox( label="LinkedIn Add to Profile URL", placeholder="Generate your certificate first to get the LinkedIn URL", interactive=False, info="Opens LinkedIn with pre-filled certification details" ) linkedin_btn = gr.HTML("""

Generate your certificate first to enable LinkedIn integration

""") # Instructions gr.HTML('

📋 How it works

') gr.Markdown(""" 1. **Verify your details** — Your name and project are auto-filled. Edit if needed. 2. **Generate** — Click the button to create your personalized certificate. 3. **Download** — Save the certificate image to your device. 4. **Share on LinkedIn** — Use the button to add to your profile with pre-filled details. > 💡 **Tip:** LinkedIn doesn't allow automatic image uploads, so you'll need to manually upload your certificate image in the "Certification media" field. ❓ **Need help?** [Contact us on Discord](https://discord.gg/92sEPT2Zhv) """) # Hidden state to store LinkedIn URL linkedin_url_state = gr.State("") # Single consolidated load function demo.load( fn=load_all_user_data, inputs=None, outputs=[login_status, main_interface, participant_name, participant_username, project_name, data_status] ) # Function to update LinkedIn button def update_linkedin_button(linkedin_url): if linkedin_url: return f"""

🔗 Add to LinkedIn Profile

Click to open LinkedIn with pre-filled details, then upload your certificate image.

""" else: return """

Generate your certificate first to enable LinkedIn integration

""" # Generate certificate button generate_btn.click( fn=create_certificate, inputs=[participant_name, project_name], outputs=[certificate_file, generation_status, linkedin_url_state] ).then( fn=lambda url: (url, update_linkedin_button(url)), inputs=[linkedin_url_state], outputs=[linkedin_url_display, linkedin_btn] ) demo.launch( css=CUSTOM_CSS, theme=gr.themes.Soft( primary_hue="violet", secondary_hue="purple", neutral_hue="slate", font=gr.themes.GoogleFont("Inter") ), )