compute_pool / templates /index.html
oscarwang2's picture
Create templates/index.html
3b405b9 verified
raw
history blame
3.58 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CPU Resource Manager</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="container mx-auto">
<h1 class="text-3xl font-bold mb-6">CPU Resource Manager</h1>
<div class="mb-6">
<label for="script_name" class="block text-lg font-medium text-gray-700">Python Script Name:</label>
<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">
</div>
<div class="mb-6">
<label for="file" class="block text-lg font-medium text-gray-700">Upload Folder:</label>
<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">
</div>
<div class="mb-6">
<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>
</div>
<div class="mb-6">
<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>
</div>
<div class="mb-6">
<h2 class="text-2xl font-bold">Log Output:</h2>
<pre id="log_output" class="bg-white p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
</div>
<div class="mb-6">
<h2 class="text-2xl font-bold">Connected CPUs Info:</h2>
<pre id="cpu_info" class="bg-white p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
</div>
</div>
<script>
document.getElementById('run_button').addEventListener('click', async function () {
const script_name = document.getElementById('script_name').value;
const files = document.getElementById('file').files;
const formData = new FormData();
formData.append('script_name', script_name);
for (const file of files) {
formData.append('file', file);
}
const response = await fetch('/upload', {
method: 'POST',
body: formData,
});
const result = await response.json();
document.getElementById('log_output').textContent = result.log_output;
if (result.status === 'success' && result.download_url) {
const downloadLink = document.createElement('a');
downloadLink.href = result.download_url;
downloadLink.textContent = 'Download Output Folder';
downloadLink.classList.add('text-blue-500', 'hover:underline');
document.getElementById('log_output').appendChild(document.createElement('br'));
document.getElementById('log_output').appendChild(downloadLink);
}
});
document.getElementById('reload_button').addEventListener('click', async function () {
const response = await fetch('/cpu_info');
const result = await response.json();
document.getElementById('cpu_info').textContent = result.cpu_info;
});
// Initial load of CPU info
document.getElementById('reload_button').click();
</script>
</body>
</html>