Hugging Face's logo

Spaces:
GoalZero
/
compute_pool
Sleeping

App Files Community
Oscar Wang commited on
Commit
12c761b
·
verified ·
1 Parent(s): 9e95bc6

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +51 -15
templates/index.html CHANGED
@@ -5,40 +5,69 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>CPU Resource Manager</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
- <body class="bg-gray-100 p-8">
10
- <div class="container mx-auto">
11
- <h1 class="text-3xl font-bold mb-6">CPU Resource Manager</h1>
12
  <div class="mb-6">
13
- <label for="script_name" class="block text-lg font-medium text-gray-700">Python Script Name:</label>
14
- <input type="text" id="script_name" name="script_name" class="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
15
- </div>
16
- <div class="mb-6">
17
- <label for="file" class="block text-lg font-medium text-gray-700">Upload Folder:</label>
18
  <input type="file" id="file" name="file" multiple class="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
19
  </div>
20
  <div class="mb-6">
21
- <button id="run_button" class="px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm hover:bg-blue-600">Run Script</button>
 
22
  </div>
23
- <div class="mb-6">
24
- <button id="reload_button" class="px-4 py-2 bg-green-500 text-white rounded-md shadow-sm hover:bg-green-600">Reload CPU Info</button>
 
25
  </div>
26
  <div class="mb-6">
27
  <h2 class="text-2xl font-bold">Log Output:</h2>
28
- <pre id="log_output" class="bg-white p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
29
  </div>
30
  <div class="mb-6">
31
  <h2 class="text-2xl font-bold">Connected CPUs Info:</h2>
32
- <pre id="cpu_info" class="bg-white p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
33
  </div>
34
  </div>
35
 
36
  <script>
37
  document.getElementById('run_button').addEventListener('click', async function () {
38
- const script_name = document.getElementById('script_name').value;
39
  const files = document.getElementById('file').files;
40
  const formData = new FormData();
41
- formData.append('script_name', script_name);
42
  for (const file of files) {
43
  formData.append('file', file);
44
  }
@@ -66,6 +95,13 @@
66
  document.getElementById('cpu_info').textContent = result.cpu_info;
67
  });
68
 
 
 
 
 
 
 
 
69
  // Initial load of CPU info
70
  document.getElementById('reload_button').click();
71
  </script>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>CPU Resource Manager</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ background-color: #f7fafc;
11
+ }
12
+ .container {
13
+ max-width: 600px;
14
+ }
15
+ .button {
16
+ display: inline-block;
17
+ margin: 5px;
18
+ padding: 10px 20px;
19
+ font-size: 16px;
20
+ font-weight: bold;
21
+ text-align: center;
22
+ text-decoration: none;
23
+ border-radius: 5px;
24
+ color: white;
25
+ }
26
+ .button-primary {
27
+ background-color: #3b82f6;
28
+ }
29
+ .button-primary:hover {
30
+ background-color: #2563eb;
31
+ }
32
+ .button-secondary {
33
+ background-color: #10b981;
34
+ }
35
+ .button-secondary:hover {
36
+ background-color: #059669;
37
+ }
38
+ </style>
39
  </head>
40
+ <body class="flex items-center justify-center min-h-screen">
41
+ <div class="container bg-white shadow-md rounded-lg p-8">
42
+ <h1 class="text-3xl font-bold mb-6 text-center">CPU Resource Manager</h1>
43
  <div class="mb-6">
44
+ <label for="file" class="block text-lg font-medium text-gray-700">Upload Files:</label>
 
 
 
 
45
  <input type="file" id="file" name="file" multiple class="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
46
  </div>
47
  <div class="mb-6">
48
+ <label for="script_content" class="block text-lg font-medium text-gray-700">Python Script Content:</label>
49
+ <textarea id="script_content" name="script_content" rows="10" class="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
50
  </div>
51
+ <div class="mb-6 flex justify-center">
52
+ <button id="run_button" class="button button-primary">Run Script</button>
53
+ <button id="reload_button" class="button button-secondary">Reload CPU Info</button>
54
  </div>
55
  <div class="mb-6">
56
  <h2 class="text-2xl font-bold">Log Output:</h2>
57
+ <pre id="log_output" class="bg-gray-100 p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
58
  </div>
59
  <div class="mb-6">
60
  <h2 class="text-2xl font-bold">Connected CPUs Info:</h2>
61
+ <pre id="cpu_info" class="bg-gray-100 p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
62
  </div>
63
  </div>
64
 
65
  <script>
66
  document.getElementById('run_button').addEventListener('click', async function () {
67
+ const script_content = document.getElementById('script_content').value;
68
  const files = document.getElementById('file').files;
69
  const formData = new FormData();
70
+ formData.append('script_content', script_content);
71
  for (const file of files) {
72
  formData.append('file', file);
73
  }
 
95
  document.getElementById('cpu_info').textContent = result.cpu_info;
96
  });
97
 
98
+ // Refresh CPU info every 2 seconds
99
+ setInterval(async function () {
100
+ const response = await fetch('/cpu_info');
101
+ const result = await response.json();
102
+ document.getElementById('cpu_info').textContent = result.cpu_info;
103
+ }, 2000);
104
+
105
  // Initial load of CPU info
106
  document.getElementById('reload_button').click();
107
  </script>