Spaces:
Runtime error
Runtime error
| 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 = """<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gradio Agents & MCP Hackathon 2025 - Certificate of Participation</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| width: 2000px; | |
| height: 1414px; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .certificate { | |
| width: 2000px; | |
| height: 1414px; | |
| background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FF8C00 100%); | |
| position: relative; | |
| margin: 0; | |
| border-radius: 0; | |
| overflow: hidden; | |
| box-shadow: 0 33px 100px rgba(0,0,0,0.3); | |
| print-color-adjust: exact; | |
| -webkit-print-color-adjust: exact; | |
| } | |
| .certificate::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat; | |
| opacity: 0.3; | |
| } | |
| .inner-border { | |
| position: absolute; | |
| top: 50px; | |
| left: 50px; | |
| right: 50px; | |
| bottom: 50px; | |
| border: 5px solid rgba(255,255,255,0.8); | |
| border-radius: 0; | |
| background: rgba(255,255,255,0.97); | |
| } | |
| .content { | |
| position: relative; | |
| padding: 100px 133px; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| text-align: center; | |
| z-index: 2; | |
| } | |
| .header { | |
| margin-bottom: 33px; | |
| } | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 33px; | |
| margin-bottom: 33px; | |
| } | |
| .gradio-logo { | |
| height: 66px; | |
| } | |
| .hf-logo { | |
| height: 58px; | |
| } | |
| .logo-text { | |
| font-size: 46px; | |
| font-weight: bold; | |
| color: #E85D04; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .event-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 60px; | |
| font-weight: 700; | |
| color: #2d3748; | |
| margin-bottom: 17px; | |
| line-height: 1.2; | |
| } | |
| .certificate-type { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 30px; | |
| color: #E85D04; | |
| font-weight: 500; | |
| letter-spacing: 3.3px; | |
| text-transform: uppercase; | |
| } | |
| .main-content { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin: 66px 0; | |
| } | |
| .certifies-text { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 33px; | |
| color: #4a5568; | |
| margin-bottom: 33px; | |
| } | |
| .participant-name { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 80px; | |
| font-weight: 700; | |
| color: #2d3748; | |
| margin: 33px 0; | |
| padding: 17px 0; | |
| border-bottom: 5px solid #E85D04; | |
| border-top: 2px solid #e2e8f0; | |
| background: linear-gradient(90deg, transparent 0%, rgba(232, 93, 4, 0.1) 50%, transparent 100%); | |
| } | |
| .description { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 30px; | |
| color: #4a5568; | |
| line-height: 1.6; | |
| max-width: 1333px; | |
| margin: 50px auto; | |
| } | |
| .project-info { | |
| background: rgba(232, 93, 4, 0.1); | |
| padding: 33px; | |
| border-radius: 17px; | |
| margin: 33px 0; | |
| border-left: 7px solid #E85D04; | |
| } | |
| .project-title { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 26px; | |
| color: #2d3748; | |
| font-weight: 600; | |
| } | |
| .track-info { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 23px; | |
| color: #E85D04; | |
| margin-top: 8px; | |
| } | |
| .footer { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 66px; | |
| align-items: end; | |
| margin-top: 50px; | |
| } | |
| .date-section { | |
| text-align: left; | |
| } | |
| .signatures-section { | |
| text-align: center; | |
| } | |
| .verification-section { | |
| text-align: right; | |
| } | |
| .date, .certificate-id { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 23px; | |
| color: #4a5568; | |
| margin-bottom: 8px; | |
| } | |
| .date-value, .id-value { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 26px; | |
| font-weight: 600; | |
| color: #2d3748; | |
| } | |
| .signature-line { | |
| border-top: 3px solid #2d3748; | |
| width: 333px; | |
| margin: 33px auto 17px; | |
| } | |
| .signature-title { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 20px; | |
| color: #4a5568; | |
| text-transform: uppercase; | |
| letter-spacing: 1.7px; | |
| } | |
| .sponsors { | |
| margin-top: 66px; | |
| padding-top: 50px; | |
| border-top: 2px solid #e2e8f0; | |
| } | |
| .sponsors-title { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 20px; | |
| color: #4a5568; | |
| text-transform: uppercase; | |
| letter-spacing: 1.7px; | |
| margin-bottom: 25px; | |
| } | |
| .sponsor-logos { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 25px; | |
| } | |
| .sponsor-logo { | |
| background: #E85D04; | |
| color: white; | |
| padding: 13px 26px; | |
| border-radius: 33px; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 50px; | |
| margin: 33px 0; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 23px; | |
| color: #E85D04; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-weight: 700; | |
| font-size: 30px; | |
| color: #2d3748; | |
| } | |
| @media print { | |
| body { margin: 0; } | |
| .certificate { | |
| margin: 0; | |
| box-shadow: none; | |
| page-break-inside: avoid; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="certificate"> | |
| <div class="inner-border"> | |
| <div class="content"> | |
| <div class="header"> | |
| <div class="logo-section"> | |
| <img src="https://www.gradio.app/_app/immutable/assets/gradio-logo-with-title.3SNGTZpF.svg" alt="Gradio" class="gradio-logo"> | |
| <img src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo-with-title.svg" alt="Hugging Face" class="hf-logo"> | |
| </div> | |
| <div class="event-title">Gradio Agents & MCP Hackathon 2025</div> | |
| <div class="certificate-type">Certificate of Participation</div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="certifies-text">This certifies that</div> | |
| <div class="participant-name" id="participantName"> | |
| {participant_name} | |
| </div> | |
| <div class="description"> | |
| has successfully participated in and completed the <strong>Gradio Agents & MCP Hackathon 2025</strong>, | |
| a global developer event focused on building AI agents using Gradio and Model Context Protocol. | |
| </div> | |
| <div class="project-info"> | |
| <div class="project-title">Project: <span id="projectTitle">{project_name}</span></div> | |
| <div class="track-info">Track: <span id="trackName">{track_name}</span></div> | |
| </div> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div class="stat-number">4,200+</div> | |
| <div>Participants</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">630+</div> | |
| <div>Submissions</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">$16,500</div> | |
| <div>Total Prizes</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="date-section"> | |
| <div class="date">Event Date</div> | |
| <div class="date-value">June 2-8, 2025</div> | |
| </div> | |
| <div class="signatures-section"> | |
| <div class="signature-line"></div> | |
| <div class="signature-title">Gradio & Hugging Face Team</div> | |
| </div> | |
| <div class="verification-section"> | |
| <div class="certificate-id">Certificate ID</div> | |
| <div class="id-value" id="certificateId">{certificate_id}</div> | |
| </div> | |
| </div> | |
| <div class="sponsors"> | |
| <div class="sponsors-title">Proudly Sponsored By</div> | |
| <div class="sponsor-logos"> | |
| <div class="sponsor-logo">Anthropic</div> | |
| <div class="sponsor-logo">OpenAI</div> | |
| <div class="sponsor-logo">Nebius</div> | |
| <div class="sponsor-logo">SambaNova</div> | |
| <div class="sponsor-logo">LlamaIndex</div> | |
| <div class="sponsor-logo">Hyperbolic</div> | |
| <div class="sponsor-logo">Modal Labs</div> | |
| <div class="sponsor-logo">Mistral AI</div> | |
| <div class="sponsor-logo">Hugging Face</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html>""" | |
| 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(""" | |
| <div id="linkedin-button-container" style="margin-top: 10px;"> | |
| <p>Generate your certificate first to enable LinkedIn integration</p> | |
| </div> | |
| """) | |
| 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""" | |
| <div style="margin-top: 10px;"> | |
| <a href="{linkedin_url}" target="_blank" style="display: inline-block; text-decoration: none;"> | |
| <div style="background: #0077B5; color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: background 0.2s;"> | |
| 🔗 Add to LinkedIn Profile | |
| </div> | |
| </a> | |
| <div style="margin-top: 8px; padding: 8px; background: #e3f2fd; border-radius: 6px; font-size: 12px; color: #1565c0;"> | |
| <strong>Ready to add to LinkedIn!</strong> Click the button to open LinkedIn with pre-filled details, then upload your certificate image manually. | |
| </div> | |
| </div> | |
| """ | |
| else: | |
| return """ | |
| <div style="margin-top: 10px;"> | |
| <p style="color: #666; font-style: italic;">Generate your certificate first to enable LinkedIn integration</p> | |
| </div> | |
| """ | |
| # 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() |