Gradio Agents & MCP Hackathon 2025 - Certificate of Participation

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 hf_token = os.getenv("HF_TOKEN") # HTML template for the certificate (unchanged) CERTIFICATE_HTML_TEMPLATE = """ Gradio Agents & MCP Hackathon 2025 - Certificate of Participation

This certifies that

{participant_name}

has successfully participated in and completed the Gradio Agents & MCP Hackathon 2025, a global developer event focused on building AI agents using Gradio and Model Context Protocol.

Project: {project_name}

Track: {track_name}

4,200+

Participants

630+

Submissions

$16,500

Total Prizes

Proudly Sponsored By

""" gradio_client = Client("https://ysharma-hackathon-certificate-html-to-image.hf.space/",hf_token=hf_token) def load_user_data(oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """Load user data from the private dataset""" if not oauth_token or not profile: return None, None, "❌ Please log in first to access your certificate data." try: # Get username from profile username = profile.username if hasattr(profile, 'username') else profile.name # Get HF_TOKEN from environment variable hf_token = os.environ.get('HF_TOKEN') if not hf_token: return None, None, "❌ HF_TOKEN environment variable not set. Please contact administrators." # Load the private dataset dataset = load_dataset("ysharma/hackathon-data-for-certificates", token=hf_token, split="train") # Convert to pandas for easier filtering df = dataset.to_pandas() # Find user by HF username user_row = df[df['HF-username'] == username] if user_row.empty: return None, None, f"❌ Unable to find your project in the hackathon database. Username searched: {username}. Please contact the organizers on our Discord: https://discord.gg/Qe3jMKVczR" # Get user data user_data = user_row.iloc[0] project_name = user_data['Space-Name'] track = user_data['Hackathon-Track'] # Handle "No Track" case if track == "No Track": track = "Agent Demo Track" return project_name, track, f"✅ Found your project: {project_name} in track: {track}" except Exception as e: return None, None, f"❌ Error loading data: {str(e)}. Please contact the organizers on our Discord: https://discord.gg/Qe3jMKVczR" def show_login_status(profile: gr.OAuthProfile | None): """Display login status""" if profile: username = profile.username if hasattr(profile, 'username') else profile.name return f"✅ Logged in as: {username}" else: return "❌ Please log in with your Hugging Face account" def show_main_interface(profile: gr.OAuthProfile | None): """Show/hide main interface based on login status""" if profile: return gr.update(visible=True) else: return gr.update(visible=False) def get_participant_name(profile: gr.OAuthProfile | None): """Get participant name from profile""" print(f">>>>>>inside get_participant_name :: profile: {profile}") if profile: name = profile.name if hasattr(profile, 'name') else "" username = profile.username if hasattr(profile, 'username') else "" return name, username return "", "" def get_user_project_data(oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """Get user project data for project name field""" if not oauth_token or not profile: return "" project_name, track, status = load_user_data(oauth_token, profile) return project_name or "" def get_user_track_data(oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """Get user track data for track field""" if not oauth_token or not profile: return "" project_name, track, status = load_user_data(oauth_token, profile) return track or "" def get_data_status(oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """Get data loading status message""" if not oauth_token or not profile: return "❌ Please log in first" project_name, track, status = load_user_data(oauth_token, profile) return status def generate_linkedin_url(participant_name, project_name, track_name, certificate_id): """Generate LinkedIn Add to Profile URL with pre-populated certificate details""" # Certificate details for LinkedIn cert_name = "Gradio Agents & MCP Hackathon 2025" organization_name = "Hugging Face" issue_year = "2025" issue_month = "6" # June # Build the LinkedIn URL parameters params = { 'startTask': 'CERTIFICATION_NAME', 'name': cert_name, 'organizationName': organization_name, 'issueYear': issue_year, 'issueMonth': issue_month, 'certId': certificate_id } # URL encode the parameters 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, track_name: str, oauth_token: gr.OAuthToken | None, profile: gr.OAuthProfile | None): """Generate the certificate HTML and create LinkedIn integration""" print(f">>>>>>1. Inside create_certificate :: profile: {profile}") if not oauth_token or not profile: return None, "❌ Please log in first to generate your certificate.", "" if not participant_name.strip(): participant_name = profile.name if hasattr(profile, 'name') else "Participant" if not project_name.strip(): return None, "❌ Please enter a project name.", "" if not track_name.strip(): track_name = "Agent Demo Track" # Generate unique certificate ID certificate_id = f"GRADIO2025-{str(uuid.uuid4())[:8].upper()}" # Use string replacement instead of format to avoid CSS conflicts certificate_html = CERTIFICATE_HTML_TEMPLATE.replace("{participant_name}", participant_name) certificate_html = certificate_html.replace("{project_name}", project_name) certificate_html = certificate_html.replace("{track_name}", track_name) certificate_html = certificate_html.replace("{certificate_id}", certificate_id) # 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 image_temp_path = gradio_client.predict( html_file=handle_file(html_temp_path), api_name="/predict" )[0] certificate_image = Image.open(image_temp_path) print(f">>>>>>2. Inside create_certificate :: profile: {profile}") _, hf_username = get_participant_name(profile) print(f">>>>>>hf_username: {hf_username}") # 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, track_name, certificate_id) 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}" # Create the Gradio interface with gr.Blocks(title="Gradio Agents & MCP Hackathon 2025 - Certificate Generator", ) as demo: gr.Markdown(""" # 🎓 Gradio Agents & MCP Hackathon 2025 ### Certificate Generator - Generate your personalized certificate of participation for the Gradio Agents & MCP Hackathon 2025! """) # Login section with gr.Row(): with gr.Column(): login_btn = gr.LoginButton(value="🔐 Sign in with Hugging Face", variant="primary") login_status = gr.Markdown("❌ Please log in with your Hugging Face account") # Main interface (initially hidden) with gr.Column(visible=False) as main_interface: gr.Markdown("### 📝 Certificate Information") # Status message for data fetching data_status = gr.Markdown("") with gr.Row(): with gr.Column(): participant_name = gr.Textbox( label="👤 Participant Name", placeholder="Your name (will be 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", placeholder="Your project name will be auto-loaded", info="Edit this if you want to change the project name on your certificate" ) track_name = gr.Textbox( label="🎯 Hackathon Track", placeholder="Your track will be auto-loaded", info="Edit this if you want to change the track name on your certificate" ) with gr.Row(): generate_btn = gr.Button("🎓 Generate Certificate", variant="primary", size="lg") # Output section with gr.Row(): with gr.Column(): certificate_file = gr.File( label="📄 Download Your Certificate", type="filepath", interactive=False ) generation_status = gr.Markdown("") # LinkedIn integration section with gr.Row(): with gr.Column(): gr.Markdown("### 🔗 LinkedIn Integration") linkedin_url_display = gr.Textbox( label="LinkedIn Add to Profile URL", placeholder="Generate your certificate first to get the LinkedIn URL", interactive=False, info="This URL will pre-populate your LinkedIn certification form" ) linkedin_btn = gr.HTML("""

Generate your certificate first to enable LinkedIn integration

""") gr.Markdown(""" 📋 **How it works:** 1. The app fetches your name, project name, and Hackathon track details. You can update this information. **Please ensure the details are accurate before proceeding to generate the certificate.** 2. Click "Generate Certificate" to create your personalized certificate. You can't make multiple entries; regenerating gives a new image but doesn't replace it in the dataset. The dataset is mainly for records, so no need to worry if you have entered incorrect info initially. 2. Download the certificate image file 3. Click "Add to LinkedIn Profile" - this opens LinkedIn with pre-filled details: - ✅ Certificate name: "Gradio Agents & MCP Hackathon 2025" - ✅ Organization: "Hugging Face" - ✅ Issue date: June 2025 - ✅ Certificate ID 4. **Upload your certificate image** in the "Certification media" field 5. **Add skills**: MCP, AI Agents, Gradio, Hugging Face 6. Click "Add" to save to your LinkedIn profile! 💡 **Note**: LinkedIn doesn't allow automatic image uploads for security reasons, so you'll need to manually upload your certificate image. """, elem_id="instructions") # Hidden state to store LinkedIn URL linkedin_url_state = gr.State("") # Event handlers - using the correct OAuth pattern # Update login status demo.load( fn=show_login_status, inputs=None, outputs=[login_status] ) # Show/hide main interface based on login demo.load( fn=show_main_interface, inputs=None, outputs=[main_interface] ) # Auto-populate participant name demo.load( fn=get_participant_name, inputs=None, outputs=[participant_name, participant_username] ) # Auto-populate project data demo.load( fn=get_user_project_data, inputs=None, outputs=[project_name] ) # Auto-populate track data demo.load( fn=get_user_track_data, inputs=None, outputs=[track_name] ) # Show data status demo.load( fn=get_data_status, inputs=None, outputs=[data_status] ) # Function to update LinkedIn button def update_linkedin_button(linkedin_url): if linkedin_url: return f"""

🔗 Add to LinkedIn Profile

Ready to add to LinkedIn! Click the button to open LinkedIn with pre-filled details, then upload your certificate image manually.

""" else: return """

Generate your certificate first to enable LinkedIn integration

""" # Generate certificate button generate_btn.click( fn=create_certificate, inputs=[participant_name, project_name, track_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()