Hugging Face's logo

Spaces:
smolagents
/
computer-agent
Running on CPU Upgrade

App Files Community
6
computer-agent
File size: 2,729 Bytes 
7348730
 
 
 
 
87e2e66
7348730
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8a999a
 
 
 
 
 
 
 
 
 
 
 
7348730
7986fba
 
 
 
 
 
 
7348730
 
 
 
d8a999a
7348730
 
 
 
 
 
 
 
d8a999a
7348730
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8a999a
 
7348730
 
 
 
 
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
import gradio as gr
import os
from e2b_desktop import Sandbox


E2B_API_KEY = os.getenv("E2B_API_KEY")
DEFAULT_MAX_TOKENS = 512
SANDBOXES = {}
TMP_DIR = './tmp/'
if not os.path.exists(TMP_DIR):
    os.makedirs(TMP_DIR)


custom_css = """
/* Outer wrapper to handle centering without scrolling */
.sandbox-outer-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
    overflow: hidden; /* Changed from overflow-x: auto */
}

.sandbox-container {
    position: relative;
    width: 800px;
    height: 500px;
    flex-shrink: 0; /* Prevents container from shrinking */
    overflow: hidden;
}

.sandbox-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sandbox-iframe {
    position: absolute;
    top: 10%;
    left: 25%;
    width: 1032px;
    height: 776px;
    border: 4px solid #444444;
    transform-origin: 0 0;
    transform: scale(0.392);
}
"""

html_template = """
    <div class="sandbox-outer-wrapper">
      <div class="sandbox-container">
          <img src="https://huggingface.co/datasets/lvwerra/admin/resolve/main/desktop_scaled.png" class="sandbox-background" />
          <iframe 
              src="{stream_url}" 
              class="sandbox-iframe"
              allowfullscreen>
          </iframe>
      </div>
    </div>"""


def update_placeholder_text(request: gr.Request):

    if request.session_hash not in SANDBOXES:
        SANDBOXES[request.session_hash] = Sandbox(api_key=E2B_API_KEY, resolution=(1024, 768), dpi=96)
    desktop = SANDBOXES[request.session_hash]
    
    #desktop = Sandbox(api_key=E2B_API_KEY, resolution=(1024, 768), dpi=96)
    desktop.stream.start(require_auth=True)
    auth_key = desktop.stream.get_auth_key()
    stream_url = desktop.stream.get_url(auth_key=auth_key)
    
    html_content = html_template.format(stream_url=stream_url)
    return html_content

# Create a Gradio app with Blocks
with gr.Blocks(css=custom_css) as demo:
    gr.HTML("""<h1 style="text-align: center">Personal Computer Assistant</h1>""")
    
    # HTML output with simulated image and iframe
    html_output = gr.HTML(
        value=html_template,
        label="Output"
    )

    # Text input for placeholder text
    placeholder_input = gr.Textbox(
        value="Find picture of cute puppies",
        label="Enter your command"
    )
    
    # Update button
    update_btn = gr.Button("Let's go!")
    
    # Connect the components
    update_btn.click(
        fn=update_placeholder_text,
        inputs=None,
        outputs=[html_output]
    )

    demo.load(update_placeholder_text, None, html_output)

# Launch the app
if __name__ == "__main__":
    demo.launch()