Spaces:
Runtime error
Runtime error
File size: 6,319 Bytes
b2b6961 6b31990 6169c04 6b31990 6169c04 94c81b3 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 6b31990 6169c04 |
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> |