Hugging Face's logo

Spaces:
Trigger82
/
Try
Paused

App Files Community
Trigger82 commited on
Commit
4a0ce95
·
verified ·
1 Parent(s): 5c9db77

Create public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +163 -0
public/index.html ADDED
@@ -0,0 +1,163 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bot Deployment Panel</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Courier New', monospace;
10
+ background-color: #1e1e1e;
11
+ color: #f0f0f0;
12
+ margin: 0;
13
+ padding: 20px;
14
+ }
15
+ .container {
16
+ max-width: 1000px;
17
+ margin: 0 auto;
18
+ }
19
+ .terminal {
20
+ background-color: #252525;
21
+ border-radius: 5px;
22
+ padding: 15px;
23
+ height: 500px;
24
+ overflow-y: auto;
25
+ margin-bottom: 20px;
26
+ }
27
+ .output {
28
+ white-space: pre-wrap;
29
+ font-family: 'Courier New', monospace;
30
+ line-height: 1.5;
31
+ }
32
+ .input-area {
33
+ display: flex;
34
+ margin-top: 10px;
35
+ }
36
+ input {
37
+ flex-grow: 1;
38
+ background-color: #252525;
39
+ border: 1px solid #444;
40
+ color: #f0f0f0;
41
+ padding: 8px;
42
+ font-family: 'Courier New', monospace;
43
+ }
44
+ button {
45
+ background-color: #4CAF50;
46
+ border: none;
47
+ color: white;
48
+ padding: 8px 15px;
49
+ margin-left: 5px;
50
+ cursor: pointer;
51
+ }
52
+ .panel {
53
+ background-color: #252525;
54
+ border-radius: 5px;
55
+ padding: 15px;
56
+ margin-bottom: 20px;
57
+ }
58
+ .tabs {
59
+ display: flex;
60
+ margin-bottom: 10px;
61
+ }
62
+ .tab {
63
+ padding: 8px 15px;
64
+ background-color: #333;
65
+ margin-right: 5px;
66
+ cursor: pointer;
67
+ }
68
+ .tab.active {
69
+ background-color: #4CAF50;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <div class="container">
75
+ <h1>Bot Deployment Panel</h1>
76
+
77
+ <div class="panel">
78
+ <h2>Repository Setup</h2>
79
+ <div class="input-area">
80
+ <input type="text" id="repoUrl" placeholder="GitHub repository URL (https://github.com/user/repo)">
81
+ <button id="cloneBtn">Clone</button>
82
+ </div>
83
+ </div>
84
+
85
+ <div class="panel">
86
+ <h2>Dependencies</h2>
87
+ <div class="input-area">
88
+ <select id="packageManager">
89
+ <option value="npm">npm</option>
90
+ <option value="yarn">yarn</option>
91
+ </select>
92
+ <button id="installBtn">Install Dependencies</button>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="panel">
97
+ <h2>Run Application</h2>
98
+ <div class="input-area">
99
+ <input type="text" id="startCommand" placeholder="Start command (e.g., npm start, node index.js)">
100
+ <button id="startBtn">Start</button>
101
+ <button id="stopBtn">Stop</button>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="terminal">
106
+ <div id="output" class="output">Welcome to Bot Deployment Panel. Clone a repository to get started.</div>
107
+ </div>
108
+ </div>
109
+
110
+ <script src="/socket.io/socket.io.js"></script>
111
+ <script>
112
+ const socket = io();
113
+ const outputEl = document.getElementById('output');
114
+ const repoUrlEl = document.getElementById('repoUrl');
115
+ const cloneBtn = document.getElementById('cloneBtn');
116
+ const packageManagerEl = document.getElementById('packageManager');
117
+ const installBtn = document.getElementById('installBtn');
118
+ const startCommandEl = document.getElementById('startCommand');
119
+ const startBtn = document.getElementById('startBtn');
120
+ const stopBtn = document.getElementById('stopBtn');
121
+
122
+ // Generate a random user ID for this session
123
+ const userId = 'user-' + Math.random().toString(36).substr(2, 9);
124
+
125
+ // Handle output from the server
126
+ socket.on('output', (data) => {
127
+ outputEl.innerHTML += data + '\n';
128
+ outputEl.scrollTop = outputEl.scrollHeight;
129
+ });
130
+
131
+ // Clone repository
132
+ cloneBtn.addEventListener('click', () => {
133
+ const repoUrl = repoUrlEl.value.trim();
134
+ if (!repoUrl) return;
135
+
136
+ outputEl.innerHTML += `Cloning repository: ${repoUrl}\n`;
137
+ socket.emit('cloneRepo', { userId, repoUrl });
138
+ });
139
+
140
+ // Install dependencies
141
+ installBtn.addEventListener('click', () => {
142
+ const packageManager = packageManagerEl.value;
143
+ outputEl.innerHTML += `Installing dependencies with ${packageManager}...\n`;
144
+ socket.emit('installDeps', { userId, packageManager });
145
+ });
146
+
147
+ // Start application
148
+ startBtn.addEventListener('click', () => {
149
+ const startCommand = startCommandEl.value.trim();
150
+ if (!startCommand) return;
151
+
152
+ outputEl.innerHTML += `Starting application: ${startCommand}\n`;
153
+ socket.emit('startApp', { userId, startCommand });
154
+ });
155
+
156
+ // Stop application
157
+ stopBtn.addEventListener('click', () => {
158
+ outputEl.innerHTML += 'Stopping application...\n';
159
+ socket.emit('stopApp');
160
+ });
161
+ </script>
162
+ </body>
163
+ </html>