Hugging Face's logo

Spaces:
GoalZero
/
compute_pool
Sleeping

App Files Community
Oscar Wang commited on
Commit
b56caca
·
verified ·
1 Parent(s): 2ffe902

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +61 -26
templates/index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>File Upload and Command Execution</title>
7
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
  <script>
9
  async function handleUpload(event) {
@@ -15,6 +15,7 @@
15
  });
16
  let result = await response.json();
17
  document.getElementById('uploadStatus').innerText = result.message || '';
 
18
  if (result.download_url) {
19
  document.getElementById('downloadLink').href = result.download_url;
20
  document.getElementById('downloadLink').style.display = 'inline';
@@ -42,33 +43,67 @@
42
  setInterval(refreshCpuInfo, 2000);
43
  </script>
44
  </head>
45
- <body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen py-6">
46
- <div class="w-full max-w-4xl bg-white p-6 rounded-lg shadow-lg">
47
- <h1 class="text-2xl font-bold mb-4">Upload Files and Run Python Code</h1>
48
- <form id="uploadForm" class="space-y-4" onsubmit="handleUpload(event)">
49
- <div>
50
- <label class="block text-sm font-medium text-gray-700">Upload Files:</label>
51
- <input type="file" name="file" multiple class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
 
 
 
 
52
  </div>
53
- <div>
54
- <label class="block text-sm font-medium text-gray-700">Python Script:</label>
55
- <textarea name="script_content" rows="6" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
56
- </div>
57
- <button type="submit" class="mt-4 px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700">Run Script</button>
58
- <p id="uploadStatus" class="mt-2 text-red-600"></p>
59
- <a id="downloadLink" href="#" class="mt-4 text-indigo-600" style="display:none">Download Output</a>
60
- </form>
61
- <h2 class="text-xl font-bold mt-8">Execute Commands</h2>
62
- <form id="commandForm" class="space-y-4 mt-4" onsubmit="executeCommand(event)">
63
- <div>
64
- <label class="block text-sm font-medium text-gray-700">Command:</label>
65
- <input id="commandInput" type="text" name="command" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
- <button type="submit" class="mt-4 px-4 py-2 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700">Execute Command</button>
68
- <p id="commandOutput" class="mt-2 text-gray-700"></p>
69
- </form>
70
- <h2 class="text-xl font-bold mt-8">CPU Information</h2>
71
- <pre id="cpuInfo" class="mt-4 bg-gray-200 p-4 rounded-md"></pre>
72
  </div>
73
  </body>
74
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dashboard</title>
7
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
  <script>
9
  async function handleUpload(event) {
 
15
  });
16
  let result = await response.json();
17
  document.getElementById('uploadStatus').innerText = result.message || '';
18
+ document.getElementById('uploadLog').innerText = result.log_output || '';
19
  if (result.download_url) {
20
  document.getElementById('downloadLink').href = result.download_url;
21
  document.getElementById('downloadLink').style.display = 'inline';
 
43
  setInterval(refreshCpuInfo, 2000);
44
  </script>
45
  </head>
46
+ <body class="bg-gray-100">
47
+ <div class="min-h-screen flex flex-col">
48
+ <!-- Header -->
49
+ <header class="bg-indigo-600 text-white py-4">
50
+ <div class="container mx-auto flex justify-between items-center px-4">
51
+ <h1 class="text-2xl font-bold">Dashboard</h1>
52
+ <nav>
53
+ <a href="#uploadSection" class="text-white hover:text-gray-300 px-4">Upload & Run</a>
54
+ <a href="#commandSection" class="text-white hover:text-gray-300 px-4">Commands</a>
55
+ <a href="#cpuInfoSection" class="text-white hover:text-gray-300 px-4">CPU Info</a>
56
+ </nav>
57
  </div>
58
+ </header>
59
+
60
+ <!-- Main Content -->
61
+ <main class="flex-grow container mx-auto px-4 py-6">
62
+ <!-- Upload & Run Section -->
63
+ <section id="uploadSection" class="bg-white shadow-md rounded-lg p-6 mb-6">
64
+ <h2 class="text-xl font-semibold mb-4">Upload Files and Run Python Code</h2>
65
+ <form id="uploadForm" class="space-y-4" onsubmit="handleUpload(event)">
66
+ <div>
67
+ <label class="block text-sm font-medium text-gray-700">Upload Files:</label>
68
+ <input type="file" name="file" multiple class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
69
+ </div>
70
+ <div>
71
+ <label class="block text-sm font-medium text-gray-700">Python Script:</label>
72
+ <textarea name="script_content" rows="6" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
73
+ </div>
74
+ <button type="submit" class="mt-4 px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700">Run Script</button>
75
+ <p id="uploadStatus" class="mt-2 text-red-600"></p>
76
+ <pre id="uploadLog" class="mt-4 bg-gray-200 p-4 rounded-md"></pre>
77
+ <a id="downloadLink" href="#" class="mt-4 text-indigo-600" style="display:none">Download Output</a>
78
+ </form>
79
+ </section>
80
+
81
+ <!-- Command Execution Section -->
82
+ <section id="commandSection" class="bg-white shadow-md rounded-lg p-6 mb-6">
83
+ <h2 class="text-xl font-semibold mb-4">Execute Commands</h2>
84
+ <form id="commandForm" class="space-y-4" onsubmit="executeCommand(event)">
85
+ <div>
86
+ <label class="block text-sm font-medium text-gray-700">Command:</label>
87
+ <input id="commandInput" type="text" name="command" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
88
+ </div>
89
+ <button type="submit" class="mt-4 px-4 py-2 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700">Execute Command</button>
90
+ <pre id="commandOutput" class="mt-4 bg-gray-200 p-4 rounded-md"></pre>
91
+ </form>
92
+ </section>
93
+
94
+ <!-- CPU Information Section -->
95
+ <section id="cpuInfoSection" class="bg-white shadow-md rounded-lg p-6">
96
+ <h2 class="text-xl font-semibold mb-4">CPU Information</h2>
97
+ <pre id="cpuInfo" class="bg-gray-200 p-4 rounded-md"></pre>
98
+ </section>
99
+ </main>
100
+
101
+ <!-- Footer -->
102
+ <footer class="bg-gray-800 text-white py-4">
103
+ <div class="container mx-auto text-center">
104
+ <p>&copy; 2024 Your Dashboard</p>
105
  </div>
106
+ </footer>
 
 
 
 
107
  </div>
108
  </body>
109
  </html>