Hugging Face's logo

Spaces:
geethareddy
/
AI_Coach
Sleeping

App Files Community
geethareddy commited on
Commit
d101800
·
verified ·
1 Parent(s): 9e99feb

Create Templates/index.html

Browse files
Files changed (1) hide show
  1. Templates/index.html +122 -0
Templates/index.html ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Coach for Supervisors</title>
7
+ <link rel="stylesheet" href="/styles.css">
8
+ </head>
9
+ <body class="bg-light-gray min-h-screen flex flex-col items-center justify-center p-4">
10
+ <div class="bg-white rounded shadow p-6 w-full max-w-4xl">
11
+ <h1 class="text-2xl font-bold text-blue mb-4 text-center">AI Coach API Tester</h1>
12
+ <form id="coachingForm" class="space-y-4">
13
+ <div>
14
+ <label for="projectId" class="block text-sm font-medium text-gray">Project ID</label>
15
+ <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>
16
+ </div>
17
+ <div>
18
+ <label for="projectName" class="block text-sm font-medium text-gray">Project Name</label>
19
+ <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>
20
+ </div>
21
+ <div>
22
+ <label for="milestones" class="block text-sm font-medium text-gray">Milestones</label>
23
+ <textarea id="milestones" name="milestones" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue"></textarea>
24
+ </div>
25
+ <div>
26
+ <label for="weatherLogs" class="block text-sm font-medium text-gray">Weather Logs</label>
27
+ <textarea id="weatherLogs" name="weatherLogs" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue"></textarea>
28
+ </div>
29
+ <div>
30
+ <label for="safetyLogs" class="block text-sm font-medium text-gray">Safety Logs</label>
31
+ <textarea id="safetyLogs" name="safetyLogs" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue"></textarea>
32
+ </div>
33
+ <div>
34
+ <label for="role" class="block text-sm font-medium text-gray">Supervisor Role</label>
35
+ <select id="role" name="role" class="mt-1 block w-full rounded border-gray shadow-sm focus-border-blue focus-ring-blue" required>
36
+ <option value="Site Manager">Site Manager</option>
37
+ <option value="Safety Officer">Safety Officer</option>
38
+ <option value="Project Lead">Project Lead</option>
39
+ </select>
40
+ </div>
41
+ <button type="submit" class="w-full bg-blue text-white py-2 px-4 rounded hover-bg-blue-dark">Generate Coaching Data</button>
42
+ </form>
43
+ <div id="result" class="mt-6 hidden">
44
+ <h2 class="text-lg font-semibold text-dark-gray">Results</h2>
45
+ <pre id="output" class="bg-light-gray p-4 rounded overflow-auto"></pre>
46
+ </div>
47
+ </div>
48
+ <script>
49
+ let lastProjectId = null;
50
+
51
+ async function fetchLatestProject() {
52
+ try {
53
+ const response = await fetch('/api/latest-project');
54
+ const data = await response.json();
55
+ if (response.ok) {
56
+ // Check if this is a new project
57
+ if (data.projectId !== lastProjectId) {
58
+ lastProjectId = data.projectId;
59
+ // Auto-populate form fields
60
+ document.getElementById('projectId').value = data.projectId || '';
61
+ document.getElementById('projectName').value = data.projectName || '';
62
+ document.getElementById('milestones').value = data.milestones || '';
63
+ document.getElementById('weatherLogs').value = data.weatherLogs || '';
64
+ document.getElementById('safetyLogs').value = data.safetyLogs || '';
65
+ document.getElementById('role').value = data.role || 'Site Manager';
66
+
67
+ // Auto-submit the form
68
+ submitForm();
69
+ }
70
+ } else {
71
+ console.error('Error fetching latest project:', data.detail);
72
+ }
73
+ } catch (error) {
74
+ console.error('Error fetching latest project:', error.message);
75
+ }
76
+ }
77
+
78
+ async function submitForm() {
79
+ const form = document.getElementById('coachingForm');
80
+ const formData = new FormData(form);
81
+ const data = {
82
+ projectId: formData.get('projectId'),
83
+ projectName: formData.get('projectName'),
84
+ milestones: formData.get('milestones'),
85
+ weatherLogs: formData.get('weatherLogs'),
86
+ safetyLogs: formData.get('safetyLogs'),
87
+ role: formData.get('role')
88
+ };
89
+ try {
90
+ const response = await fetch('/api/generate', {
91
+ method: 'POST',
92
+ headers: { 'Content-Type': 'application/json' },
93
+ body: JSON.stringify(data)
94
+ });
95
+ const result = await response.json();
96
+ if (response.ok) {
97
+ document.getElementById('output').textContent = JSON.stringify(result, null, 2);
98
+ document.getElementById('result').classList.remove('hidden');
99
+ } else {
100
+ document.getElementById('output').textContent = `Error: ${result.detail}`;
101
+ document.getElementById('result').classList.remove('hidden');
102
+ }
103
+ } catch (error) {
104
+ document.getElementById('output').textContent = `Error: ${error.message}`;
105
+ document.getElementById('result').classList.remove('hidden');
106
+ }
107
+ }
108
+
109
+ // Poll for new projects every 5 seconds
110
+ setInterval(fetchLatestProject, 5000);
111
+
112
+ // Initial fetch on page load
113
+ fetchLatestProject();
114
+
115
+ // Manual form submission (optional, for user-triggered submissions)
116
+ document.getElementById('coachingForm').addEventListener('submit', async (e) => {
117
+ e.preventDefault();
118
+ submitForm();
119
+ });
120
+ </script>
121
+ </body>
122
+ </html>