File size: 3,114 Bytes
1b7550e
 
0ce3e5e
 
 
 
 
e092640
0ce3e5e
 
1b7550e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6224e41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1b7550e
 
 
 
 
6224e41
1b7550e
 
 
 
6224e41
1b7550e
 
 
6224e41
 
 
 
1b7550e
6224e41
 
 
1b7550e
 
 
 
 
 
 
 
 
 
6224e41
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import gradio as gr
from scrape_fake_app import get_homework,get_timetable
import subprocess
import os
from dotenv import load_dotenv

if os.getenv('ENVIRONMENT')=="PROD":
    print("installing playwright firefox")
    subprocess.run(["playwright","install","firefox"])

def fetch_homework(date:str='today') -> str:
    """
    description:
        fetch the homeworks.
    Args: 
        date: any string, default "today"
    Returns:
        The string describing the homeworks    
    """
    return get_homework()


def fetch_timetable(date:str='today') -> str:
    """
    description:
        fetch the timetable
    Args: 
        date: any string, default "today"
    Returns:
        The string describing the timetable    
    """
    return get_timetable()


title="<h2>Gradio MCP Hackathon: fake-app-scraper</h2>"
description="""<div style="font-family: sans-serif; line-height: 1.6;">
  <p>
    This app uses Playwright to log in and scrape the content of the dashboard of the fake app
    <a href="https://fake-app-omega.vercel.app" target="_blank">fake-app-omega.vercel.app</a>.
  </p>    
  <p>
    The starting point was to provide an LLM-friendly, API-fied version of a real app that does not provide any API. Used as an MCP server, any user of the app could simply ask their AI assistant to fetch information from their dashboard.
  </p>
  <h3>Problem</h3>
  <p>
    When run locally, the app can take the credentials as environment variables to log into the user's dashboard. However, when hosted as a Hugging Face Space, I couldn't find a way to send the credentials securely—i.e., without explicitly providing them to the LLM.
  </p>
  <p>
    In conclusion, as it stands, this app together with the fake Next.js app only serves demonstration or educational purposes and does not solve a real-life problem.
  </p>
  <p><strong>I’d be happy to get any suggestions on how to send credentials in the context of a Gradio HF Space–hosted app.</strong></p>
</div>
"""

images="""<img src="gradio_api/file=login.png" alt="login" style="max-width: 35%; margin-right: 10px;" />
        <img src="gradio_api/file=dashboard.png" alt="dashboard" style="max-width: 35%;" />
"""

with gr.Blocks() as demo:
    
        # Add title and markdown
    with gr.Row():
        gr.HTML(title)    
    
    with gr.Row():
        with gr.Column():
            homeworks_btn = gr.Button("Homeworks")
            homeworks_output = gr.Textbox(label="Homeworks Result", lines=5)
        
        with gr.Column():
            timetable_btn = gr.Button("Timetable")
            timetable_output = gr.Textbox(label="Timetable Result", lines=5)
    
    with gr.Row():
        date = gr.Textbox(label="date",visible=False)

    with gr.Row():
        gr.HTML(description)
        gr.HTML(images)

    homeworks_btn.click(fn=fetch_homework,
                        inputs=[date],
                        outputs=homeworks_output)


    timetable_btn.click(fn=fetch_timetable,
                        inputs=[date],
                        outputs=timetable_output)

demo.launch(mcp_server=True,allowed_paths=["/"])