Hugging Face's logo

Spaces:
Gymawy
/
Inbody
Sleeping

App Files Community
Gymawy commited on
Commit
d24ade2
·
verified ·
1 Parent(s): e47b95f

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +92 -96
static/index.html CHANGED
@@ -2,46 +2,66 @@
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>InBody AI Analysis</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
  body {
10
- background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/images/RegisterAsTrainee.webp') center/cover no-repeat;
11
- color: #e0e0e0;
12
- font-family: 'Segoe UI', sans-serif;
13
- min-height: 100vh;
14
- padding: 2rem;
 
15
  }
16
- .form-card {
17
- background-color: #121212;
18
- border-radius: 15px;
19
- padding: 2rem;
20
- box-shadow: 0 0 20px rgba(0, 255, 100, 0.2);
21
  }
22
- .form-control, .form-select {
23
- background-color: #1e1e1e;
 
 
 
24
  color: #fff;
25
  border: 1px solid #444;
26
  }
27
- .form-control::placeholder {
28
- color: #aaa;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
  .scrollable-section {
31
- max-height: 160px;
32
  overflow-y: auto;
33
- background-color: #1b1b1b;
34
- border: 1px solid #333;
35
- padding: 1rem;
36
- border-radius: 8px;
37
- color: #ccc;
 
38
  }
39
  .loader {
40
  border: 4px solid #222;
41
- border-top: 4px solid #00c853;
42
  border-radius: 50%;
43
- width: 20px;
44
- height: 20px;
45
  animation: spin 1s linear infinite;
46
  display: inline-block;
47
  vertical-align: middle;
@@ -54,70 +74,44 @@
54
  </style>
55
  </head>
56
  <body>
57
- <div class="container">
58
- <div class="form-card mx-auto" style="max-width: 700px;">
59
- <h2 class="text-center mb-4">InBody AI Analysis</h2>
60
- <div class="row g-3">
61
- <div class="col-md-6">
62
- <label for="name" class="form-label">Name:</label>
63
- <input id="name" type="text" class="form-control" placeholder="Enter your name">
64
- </div>
65
- <div class="col-md-3">
66
- <label for="age" class="form-label">Age:</label>
67
- <input id="age" type="number" class="form-control" placeholder="Age">
68
- </div>
69
- <div class="col-md-3">
70
- <label for="sex" class="form-label">Sex:</label>
71
- <select id="sex" class="form-select">
72
- <option value="male">Male</option>
73
- <option value="female">Female</option>
74
- </select>
75
- </div>
76
- <div class="col-12">
77
- <label for="report" class="form-label">InBody Report:</label>
78
- <textarea id="report" class="form-control" rows="5" placeholder="Paste your raw InBody report..."></textarea>
79
- </div>
80
- </div>
81
-
82
- <div class="text-end mt-3">
83
- <button id="analyze-btn" class="btn btn-success">
84
- <span class="spinner-border spinner-border-sm d-none" id="spinner"></span>
85
- Analyze
86
- </button>
87
- </div>
88
-
89
- <div id="loading" class="mt-3 text-info d-none">
90
- <span class="loader"></span> Processing your InBody report...
91
- </div>
92
-
93
- <!-- Results Sections -->
94
- <div class="row row-cols-1 row-cols-md-2 g-3 mt-4">
95
- <div class="col">
96
- <div class="scrollable-section">
97
- <h5 class="text-success">🧠 Analysis</h5>
98
- <div id="analysis"></div>
99
- </div>
100
- </div>
101
- <div class="col">
102
- <div class="scrollable-section">
103
- <h5 class="text-warning">💪 Training Plan</h5>
104
- <div id="training"></div>
105
- </div>
106
- </div>
107
- <div class="col">
108
- <div class="scrollable-section">
109
- <h5 class="text-primary">🥗 Nutrition Plan</h5>
110
- <div id="nutrition"></div>
111
- </div>
112
- </div>
113
- <div class="col">
114
- <div class="scrollable-section">
115
- <h5 class="text-info">📅 Weekly Regime</h5>
116
- <div id="regime"></div>
117
- </div>
118
- </div>
119
- </div>
120
- </div>
121
  </div>
122
 
123
  <script>
@@ -126,10 +120,10 @@
126
  const age = parseInt(document.getElementById("age").value);
127
  const sex = document.getElementById("sex").value;
128
  const report = document.getElementById("report").value;
 
129
  const loadingDiv = document.getElementById("loading");
130
- const spinner = document.getElementById("spinner");
131
- loadingDiv.classList.remove("d-none");
132
- spinner.classList.remove("d-none");
133
  try {
134
  const response = await fetch("http://localhost:8000/inbody", {
135
  method: "POST",
@@ -138,7 +132,9 @@
138
  },
139
  body: JSON.stringify({ name, age, sex, report })
140
  });
 
141
  const result = await response.json();
 
142
  document.getElementById("analysis").textContent = result.analysis;
143
  document.getElementById("training").textContent = result.training_plan;
144
  document.getElementById("nutrition").textContent = result.nutrition_plan;
@@ -147,10 +143,10 @@
147
  alert("Something went wrong. Please check your backend.");
148
  console.error(error);
149
  } finally {
150
- loadingDiv.classList.add("d-none");
151
- spinner.classList.add("d-none");
152
  }
153
  });
154
  </script>
 
155
  </body>
156
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>InBody Analysis</title>
 
 
6
  <style>
7
  body {
8
+ font-family: Arial, sans-serif;
9
+ padding: 40px;
10
+ max-width: 700px;
11
+ margin: auto;
12
+ background-color: #000;
13
+ color: #fff;
14
  }
15
+ label {
16
+ display: block;
17
+ margin-top: 10px;
 
 
18
  }
19
+ textarea, input, select {
20
+ width: 100%;
21
+ padding: 8px;
22
+ margin-top: 5px;
23
+ background-color: #222;
24
  color: #fff;
25
  border: 1px solid #444;
26
  }
27
+ button {
28
+ margin-top: 20px;
29
+ padding: 10px 20px;
30
+ font-size: 16px;
31
+ background-color: #444;
32
+ color: white;
33
+ border: none;
34
+ cursor: pointer;
35
+ }
36
+ button:hover {
37
+ background-color: #666;
38
+ }
39
+ .output {
40
+ margin-top: 30px;
41
+ padding: 20px;
42
+ background-color: #111;
43
+ border-radius: 10px;
44
+ border: 1px solid #333;
45
+ }
46
+ .output h3 {
47
+ margin-top: 20px;
48
  }
49
  .scrollable-section {
50
+ max-height: 150px;
51
  overflow-y: auto;
52
+ padding-right: 10px;
53
+ margin-top: 10px;
54
+ background-color: #000;
55
+ border: 1px solid #444;
56
+ padding: 10px;
57
+ border-radius: 5px;
58
  }
59
  .loader {
60
  border: 4px solid #222;
61
+ border-top: 4px solid #3498db;
62
  border-radius: 50%;
63
+ width: 18px;
64
+ height: 18px;
65
  animation: spin 1s linear infinite;
66
  display: inline-block;
67
  vertical-align: middle;
 
74
  </style>
75
  </head>
76
  <body>
77
+
78
+ <h2>InBody AI Analysis</h2>
79
+
80
+ <label for="name">Name:</label>
81
+ <input id="name" type="text" placeholder="Enter your name" required>
82
+
83
+ <label for="age">Age:</label>
84
+ <input id="age" type="number" placeholder="Enter your age" required>
85
+
86
+ <label for="sex">Sex:</label>
87
+ <select id="sex">
88
+ <option value="male">Male</option>
89
+ <option value="female">Female</option>
90
+ </select>
91
+
92
+ <label for="report">InBody Report:</label>
93
+ <textarea id="report" rows="6" placeholder="Enter raw InBody report..."></textarea>
94
+
95
+ <button id="analyze-btn">Analyze</button>
96
+
97
+ <!-- Loading animation -->
98
+ <div id="loading" style="display: none; margin-top: 20px; font-weight: bold; color: lightblue;">
99
+ <span class="loader"></span> Processing your InBody report...
100
+ </div>
101
+
102
+ <!-- Output -->
103
+ <div class="output">
104
+ <h3>🧠 Analysis:</h3>
105
+ <div class="scrollable-section" id="analysis"></div>
106
+
107
+ <h3>💪 Training Plan:</h3>
108
+ <div class="scrollable-section" id="training"></div>
109
+
110
+ <h3>🥗 Nutrition Plan:</h3>
111
+ <div class="scrollable-section" id="nutrition"></div>
112
+
113
+ <h3>📅 Weekly Regime:</h3>
114
+ <div class="scrollable-section" id="regime"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
116
 
117
  <script>
 
120
  const age = parseInt(document.getElementById("age").value);
121
  const sex = document.getElementById("sex").value;
122
  const report = document.getElementById("report").value;
123
+
124
  const loadingDiv = document.getElementById("loading");
125
+ loadingDiv.style.display = "block";
126
+
 
127
  try {
128
  const response = await fetch("http://localhost:8000/inbody", {
129
  method: "POST",
 
132
  },
133
  body: JSON.stringify({ name, age, sex, report })
134
  });
135
+
136
  const result = await response.json();
137
+
138
  document.getElementById("analysis").textContent = result.analysis;
139
  document.getElementById("training").textContent = result.training_plan;
140
  document.getElementById("nutrition").textContent = result.nutrition_plan;
 
143
  alert("Something went wrong. Please check your backend.");
144
  console.error(error);
145
  } finally {
146
+ loadingDiv.style.display = "none";
 
147
  }
148
  });
149
  </script>
150
+
151
  </body>
152
+ </html>