ionelcataon/it_school
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
Ionel Andrei Cataon
2026-02-18 18:09:19 +02:00
parent 4ac65420b7
commit 9e302f9778
1 changed files with 64 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
proiect-nutritie-java/src/main/webapp/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>NutriAI Elite v26.5 - Professional Suite</title>
<title>NutriAI Elite v26.3</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -15,35 +15,37 @@
.main-wrapper { display: flex; height: 100dvh; flex-direction: row; }
@media (max-width: 991px) {
.main-wrapper { flex-direction: column; overflow-y: auto; height: auto; }
.sidebar { width: 100% !important; height: auto !important; border-right: none !important; }
.chat-section { height: 800px !important; }
.sidebar { width: 360px !important; height: auto !important; border-right: none !important; margin: 0 auto; }
.chat-section { height: 700px !important; }
body { overflow-y: auto; }
}
.sidebar { width: 380px; background: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; overflow-y: auto; flex-shrink: 0; }
.sidebar { width: 360px; background: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; overflow-y: auto; flex-shrink: 0; }
.chat-section { flex-grow: 1; display: flex; flex-direction: column; background: rgba(0,0,0,0.2); position: relative; }
.label-pro { color: var(--accent); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 5px; display: block; }
.glass-input { background: #fff !important; color: #000 !important; border: 3px solid var(--primary) !important; border-radius: 10px; font-weight: 800 !important; height: 48px; }
.stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 20px; padding: 1.5rem; margin: 15px 0; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); }
.water-hub { background: rgba(59, 130, 246, 0.1); border: 2px solid var(--primary); border-radius: 18px; padding: 15px; margin: 12px 0; text-align: center; }
.macro-hub { background: rgba(255,255,255,0.03); border-radius: 24px; padding: 20px; margin-top: 15px; border: 1px solid rgba(255,255,255,0.08); }
.chat-container { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.msg { padding: 1.2rem; border-radius: 1.2rem; font-size: 1rem; max-width: 92%; color: #fff !important; line-height: 1.6; }
.ai { background: var(--card); border-left: 6px solid var(--primary); align-self: flex-start; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.user { background: var(--primary); align-self: flex-end; box-shadow: 0 5px 20px rgba(59, 130, 246, 0.2); }
.top-ctrl { padding: 15px 25px; display: flex; justify-content: flex-end; gap: 12px; background: rgba(0,0,0,0.5); border-bottom: 1px solid rgba(255,255,255,0.1); }
.input-area { padding: 25px; background: var(--sidebar); border-top: 1px solid rgba(255,255,255,0.1); display: flex; gap: 15px; }
.btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 12px; padding: 0 25px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-reset { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid #ef4444; border-radius: 12px; padding: 14px; font-weight: 700; width: 100%; margin-top: 25px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; background: rgba(0,0,0,0.3); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); }
th { background: rgba(59, 130, 246, 0.2); color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; }
.glass-input { background: #fff !important; color: #000 !important; border: 3px solid var(--primary) !important; border-radius: 8px; font-weight: 800 !important; height: 45px; }
.stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 15px; padding: 1.5rem; margin: 15px 0; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.water-hub { background: rgba(59, 130, 246, 0.1); border: 2px solid var(--primary); border-radius: 15px; padding: 15px; margin: 10px 0; text-align: center; }
.macro-hub { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 20px; margin-top: 10px; border: 1px solid rgba(255,255,255,0.1); }
.chat-container { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.msg { padding: 1.2rem; border-radius: 1rem; font-size: 1rem; max-width: 90%; color: #fff !important; line-height: 1.5; }
.ai { background: var(--card); border-left: 5px solid var(--primary); align-self: flex-start; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.user { background: var(--primary); align-self: flex-end; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.top-ctrl { padding: 12px 20px; display: flex; justify-content: flex-end; gap: 10px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,255,255,0.1); }
.input-area { padding: 20px; background: var(--sidebar); border-top: 1px solid rgba(255,255,255,0.1); display: flex; gap: 12px; }
.btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 10px; padding: 0 20px; transition: 0.2s; }
.btn-shop:hover { background: #d97706; transform: translateY(-2px); }
.btn-reset { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid #ef4444; border-radius: 10px; padding: 12px; font-weight: 700; width: 100%; margin-top: 20px; transition: 0.2s; }
.btn-reset:hover { background: rgba(239, 68, 68, 0.2); }
table { width: 100%; border-collapse: collapse; margin: 15px 0; background: rgba(0,0,0,0.3); border-radius: 10px; overflow: hidden; }
th, td { border: 1px solid rgba(255,255,255,0.1); padding: 12px; text-align: left; }
th { background: rgba(59, 130, 246, 0.2); color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 0.75rem; }
</style>
</head>
<body>
<body class="theme-dark">
<div class="main-wrapper">
<div class="sidebar">
<h3 class="fw-extrabold mb-4"><i class="fas fa-bolt text-primary me-2"></i>NUTRI ELITE</h3>
<h3 class="fw-extrabold mb-4"><i class="fas fa-bolt text-primary"></i> NUTRI ELITE</h3>
<div class="row g-3">
<div class="col-6"><label class="label-pro" id="txtW">Current (kg)</label><input type="number" id="w" class="form-control glass-input" placeholder="--" oninput="update()"></div>
<div class="col-6"><label class="label-pro" id="txtT">Target (kg)</label><input type="number" id="t" class="form-control glass-input" placeholder="--" oninput="update()"></div>
@@ -57,57 +59,58 @@
<option value="1.375">Lightly Active (1-2 days/week)</option>
<option value="1.55">Moderately Active (3-5 days/week)</option>
<option value="1.725">Very Active (6-7 days/week)</option>
<option value="1.9">Extra Active (Athlete/Physical Work)</option>
<option value="1.9">Extra Active (Physical Job + Training)</option>
</select>
</div>
<div class="col-12">
<div class="d-flex justify-content-between"><label class="label-pro">Daily Adjustment</label><span id="aggDisp" class="badge bg-primary">0 kcal</span></div>
<div class="d-flex justify-content-between"><label class="label-pro">Calorie Adjustment</label><span id="aggDisp" class="badge bg-primary">0 kcal</span></div>
<input type="range" id="agg" class="form-range" min="-1000" max="1000" step="50" value="0" oninput="update()">
</div>
</div>
<div class="stat-panel">
<h1 class="fw-bold mb-0" id="kcal">0</h1>
<p class="text-uppercase fw-bold m-0 opacity-75 small">Target Calories</p>
<p class="text-uppercase fw-bold m-0 opacity-75 small">Daily Calorie Target</p>
</div>
<div class="water-hub">
<h2 class="fw-bold text-info mb-0" id="h2o">0.0L</h2>
<span class="label-pro mb-0"><i class="fas fa-droplet me-1"></i>Daily Hydration</span>
<span class="label-pro mb-0"><i class="fas fa-droplet me-1"></i> Daily Hydration</span>
</div>
<div class="macro-hub">
<canvas id="mChart" style="max-height: 150px;"></canvas>
<div class="row mt-4 text-center fw-bold small">
<div class="col-4 text-info">PROTEIN<br><span id="pG" class="fs-6">0g</span></div>
<div class="col-4 text-danger">CARBS<br><span id="cG" class="fs-6">0g</span></div>
<div class="col-4 text-warning">FATS<br><span id="fG" class="fs-6">0g</span></div>
<canvas id="mChart" style="max-height: 140px;"></canvas>
<div class="row mt-3 text-center fw-bold small">
<div class="col-4 text-info">P<br><span id="pG">0g</span></div>
<div class="col-4 text-danger">C<br><span id="cG">0g</span></div>
<div class="col-4 text-warning">F<br><span id="fG">0g</span></div>
</div>
</div>
<button class="btn-reset" onclick="resetAll()"><i class="fas fa-sync-alt me-2"></i>RESET DASHBOARD</button>
<button class="btn-reset" onclick="resetAll()"><i class="fas fa-undo me-2"></i> RESET DASHBOARD</button>
</div>
<div class="chat-section">
<div class="top-ctrl">
<button id="btnMetric" class="btn btn-primary btn-sm active px-4" onclick="setUnits('metric')">METRIC</button>
<button id="btnImperial" class="btn btn-outline-primary btn-sm px-4" onclick="setUnits('imperial')">IMP</button>
<button id="btnMetric" class="btn btn-primary btn-sm active px-3" onclick="setUnits('metric')">METRIC</button>
<button id="btnImperial" class="btn btn-outline-primary btn-sm px-3" onclick="setUnits('imperial')">IMP</button>
<button class="btn btn-dark btn-sm rounded-circle" style="width:32px; height:32px;"><i class="fas fa-palette"></i></button>
</div>
<div id="chat" class="chat-container">
<div class="msg ai shadow">
<h5 class="fw-bold text-primary">Biometric Intelligence Active.</h5>
I am ready. Please fill in your data. I can now handle custom ingredient requests, high-protein focuses, and complex variety while maintaining strict caloric math.
<h5 class="fw-bold text-primary">System Ready.</h5>
The nutritional database is online. I can now handle varied ingredients, specific protein requests, and precise caloric targets.
</div>
</div>
<div class="input-area">
<div class="input-group input-group-lg flex-grow-1">
<input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Try: 'Give me a high protein plan with salmon and steak'..." onkeydown="if(event.key === 'Enter') talk()">
<input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Ask for a meal plan..." onkeydown="if(event.key === 'Enter') talk()">
<button class="btn btn-primary" onclick="talk()"><i class="fas fa-paper-plane"></i></button>
</div>
<button class="btn-shop shadow-sm" onclick="talk('GENERATE_SHOPPING_LIST')">
<i class="fas fa-cart-plus me-1"></i>LIST
<i class="fas fa-shopping-basket me-1"></i> SHOPPING LIST
</button>
</div>
</div>
@@ -120,17 +123,15 @@
function setUnits(mode) {
if((mode==='metric' && !isMetric) || (mode==='imperial' && isMetric)) {
isMetric = !isMetric;
['w','t'].forEach(id => {
let v = document.getElementById(id).value;
if(v) document.getElementById(id).value = isMetric ? (v/2.205).toFixed(1) : (v*2.205).toFixed(1);
});
let hv = document.getElementById('h').value;
if(hv) document.getElementById('h').value = isMetric ? (hv*2.54).toFixed(0) : (hv/2.54).toFixed(1);
const w = document.getElementById('w'), t = document.getElementById('t'), h = document.getElementById('h');
if(w.value) w.value = isMetric ? (w.value/2.205).toFixed(0) : (w.value*2.205).toFixed(0);
if(t.value) t.value = isMetric ? (t.value/2.205).toFixed(0) : (t.value*2.205).toFixed(0);
if(h.value) h.value = isMetric ? (h.value*2.54).toFixed(0) : (h.value/2.54).toFixed(0);
document.getElementById('txtW').innerText = isMetric ? "Current (kg)" : "Current (lb)";
document.getElementById('txtT').innerText = isMetric ? "Target (kg)" : "Target (lb)";
document.getElementById('txtH').innerText = isMetric ? "Height (cm)" : "Height (in)";
document.getElementById('btnMetric').className = isMetric ? "btn btn-primary active btn-sm px-4" : "btn btn-outline-primary btn-sm px-4";
document.getElementById('btnImperial').className = !isMetric ? "btn btn-primary active btn-sm px-4" : "btn btn-outline-primary btn-sm px-4";
document.getElementById('btnMetric').className = isMetric ? "btn btn-primary active btn-sm px-3" : "btn btn-outline-primary btn-sm px-3";
document.getElementById('btnImperial').className = !isMetric ? "btn btn-primary active btn-sm px-3" : "btn btn-outline-primary btn-sm px-3";
update();
}
}
@@ -146,51 +147,54 @@
document.getElementById('kcal').innerText = total;
document.getElementById('h2o').innerText = isMetric ? (wc * 0.035).toFixed(1) + "L" : (wv * 0.6).toFixed(0) + "oz";
document.getElementById('aggDisp').innerText = (agg>0?'+':'')+agg+" kcal";
const pG = Math.round((total * 0.35)/4), cG = Math.round((total * 0.35)/4), fG = Math.round((total * 0.3)/9);
document.getElementById( 'pG' ).innerText = pG+"g"; document.getElementById( 'cG' ).innerText = cG+"g"; document.getElementById( 'fG' ).innerText = fG+"g";
const pG = Math.round((total * 0.3)/4), cG = Math.round((total * 0.4)/4), fG = Math.round((total * 0.3)/9);
document.getElementById('pG').innerText = pG+"g"; document.getElementById('cG').innerText = cG+"g"; document.getElementById('fG').innerText = fG+"g";
if(mChart) { mChart.data.datasets[0].data = [pG*4, cG*4, fG*9]; mChart.update(); }
}
function resetAll() {
['w','t','h','age','agg'].forEach(id => document.getElementById(id).value = id==='agg'?0:"");
['w','t','h','age','agg'].forEach(id => document.getElementById(id).value = id === 'agg' ? 0 : "");
document.getElementById('act').selectedIndex = 0;
document.getElementById('kcal').innerText = "0";
document.getElementById('chat').innerHTML = `<div class="msg ai">Reset successful. Standing by.</div>`;
conversationHistory = []; update();
document.getElementById('pG').innerText = "0g"; document.getElementById('cG').innerText = "0g"; document.getElementById('fG').innerText = "0g";
document.getElementById('chat').innerHTML = `<div class="msg ai shadow">System Reset.</div>`;
conversationHistory = [];
update();
}
async function talk(custom) {
const box = document.getElementById('chat'), input = document.getElementById('uIn'), targetKcal = document.getElementById('kcal').innerText;
const text = custom === 'GENERATE_SHOPPING_LIST' ? "Sum all ingredients from the plan into a weekly shopping list." : (custom || input.value);
const text = custom === 'GENERATE_SHOPPING_LIST' ? "Provide a full shopping list based on the plan above." : (custom || input.value);
if(!text) return;
if(!custom) { box.innerHTML += `<div class="msg user shadow-sm">${text}</div>`; input.value=""; }
const id = 'ai-'+Date.now(); box.innerHTML += `<div id="${id}" class="msg ai shadow">Generating meal architecture...</div>`;
const id = 'ai-'+Date.now(); box.innerHTML += `<div id="${id}" class="msg ai shadow">Consulting database...</div>`;
box.scrollTop = box.scrollHeight;
const sysPrompt = {role:"system", content: `Advanced Clinical Nutritionist. GOAL: EXACTLY ${targetKcal} kcal.
1. MATH AUDIT: You MUST verify sums. 100g RAW Brown Rice = 360 kcal. 100g RAW Oats = 380 kcal.
2. FOOD DIVERSITY: Use Steak, Salmon, Eggs, Avocado, Berries, Quinoa, Sweet Potato, Nut Butters. NEVER just chicken/rice unless asked.
3. CUSTOMIZATION: If user asks for "Dense Protein" or "Specific Ingredients", prioritize those while scaling portions to hit ${targetKcal} kcal EXACTLY.
4. STRUCTURE: Provide daily totals for P/C/F. Ensure Math checks: (P*4)+(C*4)+(F*9) = Total Kcal.`};
const sysPrompt = {role:"system", content: `Expert Dietitian. TARGET: ${targetKcal} kcal.
1. MATH: 100g RAW Brown Rice = 360 kcal. 100g RAW Oats = 380 kcal.
2. VERSATILITY: You have full freedom to use salmon, steak, eggs, avocado, olive oil, and diverse veggies. Do not repeat chicken/rice endlessly.
3. CUSTOMER PREFERENCE: Prioritize high-protein or specific ingredients if requested.
4. ACCURACY: Scale portion grams (e.g., 140g, 90g) to ensure the total is EXACTLY ${targetKcal} kcal.
Output: Markdown tables with Weight (RAW), Calories, P, C, F.`};
conversationHistory.push({role: "user", content: text});
try {
const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
method: "POST", headers: {"Content-Type":"application/json", "Authorization":`Bearer ${API}`},
body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[sysPrompt, ...conversationHistory], temperature: 0.2 })
body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[sysPrompt, ...conversationHistory], temperature: 0.15 })
});
const d = await res.json();
const aiMsg = d.choices[0].message.content;
conversationHistory.push({role: "assistant", content: aiMsg});
document.getElementById(id).innerHTML = marked.parse(aiMsg);
} catch(e) { document.getElementById(id).innerText = "API Error."; }
} catch(e) { document.getElementById(id).innerText = "Error."; }
box.scrollTop = box.scrollHeight;
}
window.onload = () => {
mChart = new Chart(document.getElementById('mChart').getContext('2d'), {
type: 'doughnut', data: { datasets: [{ data: [1,1,1], backgroundColor: ['#0dcaf0','#dc3545','#ffc107'], borderWeight:0 }] },
options: { plugins: { legend: { display: false } }, cutout: '78%' }
options: { plugins: { legend: { display: false } }, cutout: '75%' }
});
}
</script>