Spaces:
Running
Running
File size: 6,319 Bytes
c6c7485 |
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 111 112 113 114 115 116 117 118 119 120 121 122 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Coach for Supervisors</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body class="bg-light-gray min-h-screen flex flex-col items-center justify-center p-4">
<div class="bg-white rounded shadow p-6 w-full max-w-4xl">
<h1 class="text-2xl font-bold text-blue mb-4 text-center">AI Coach API Tester</h1>
<form id="coachingForm" class="space-y-4">
<div>
<label for="projectId" class="block text-sm font-medium text-gray">Project ID</label>
<input type="text" id="projectId" name="projectId" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue" required>
</div>
<div>
<label for="projectName" class="block text-sm font-medium text-gray">Project Name</label>
<input type="text" id="projectName" name="projectName" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue" required>
</div>
<div>
<label for="milestones" class="block text-sm font-medium text-gray">Milestones</label>
<textarea id="milestones" name="milestones" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue"></textarea>
</div>
<div>
<label for="weatherLogs" class="block text-sm font-medium text-gray">Weather Logs</label>
<textarea id="weatherLogs" name="weatherLogs" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue"></textarea>
</div>
<div>
<label for="safetyLogs" class="block text-sm font-medium text-gray">Safety Logs</label>
<textarea id="safetyLogs" name="safetyLogs" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue"></textarea>
</div>
<div>
<label for="role" class="block text-sm font-medium text-gray">Supervisor Role</label>
<select id="role" name="role" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue" required>
<option value="Site Manager">Site Manager</option>
<option value="Safety Officer">Safety Officer</option>
<option value="Project Lead">Project Lead</option>
</select>
</div>
<button type="submit" class="w-full bg-blue text-white py-2 px-4 rounded hover-bg-blue-dark">Generate Coaching Data</button>
</form>
<div id="result" class="mt-6 hidden">
<h2 class="text-lg font-semibold text-dark-gray">Results</h2>
<pre id="output" class="bg-light-gray p-4 rounded overflow-auto"></pre>
</div>
</div>
<script>
let lastProjectId = null;
async function fetchLatestProject() {
try {
const response = await fetch('/api/latest-project');
const data = await response.json();
if (response.ok) {
// Check if this is a new project
if (data.projectId !== lastProjectId) {
lastProjectId = data.projectId;
// Auto-populate form fields
document.getElementById('projectId').value = data.projectId || '';
document.getElementById('projectName').value = data.projectName || '';
document.getElementById('milestones').value = data.milestones || '';
document.getElementById('weatherLogs').value = data.weatherLogs || '';
document.getElementById('safetyLogs').value = data.safetyLogs || '';
document.getElementById('role').value = data.role || 'Site Manager';
// Auto-submit the form
submitForm();
}
} else {
console.error('Error fetching latest project:', data.detail);
}
} catch (error) {
console.error('Error fetching latest project:', error.message);
}
}
async function submitForm() {
const form = document.getElementById('coachingForm');
const formData = new FormData(form);
const data = {
projectId: formData.get('projectId'),
projectName: formData.get('projectName'),
milestones: formData.get('milestones'),
weatherLogs: formData.get('weatherLogs'),
safetyLogs: formData.get('safetyLogs'),
role: formData.get('role')
};
try {
const response = await fetch('/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const result = await response.json();
if (response.ok) {
document.getElementById('output').textContent = JSON.stringify(result, null, 2);
document.getElementById('result').classList.remove('hidden');
} else {
document.getElementById('output').textContent = `Error: ${result.detail}`;
document.getElementById('result').classList.remove('hidden');
}
} catch (error) {
document.getElementById('output').textContent = `Error: ${error.message}`;
document.getElementById('result').classList.remove('hidden');
}
}
// Poll for new projects every 5 seconds
setInterval(fetchLatestProject, 5000);
// Initial fetch on page load
fetchLatestProject();
// Manual form submission (optional, for user-triggered submissions)
document.getElementById('coachingForm').addEventListener('submit', async (e) => {
e.preventDefault();
submitForm();
});
</script>
</body>
</html> |