s
This commit is contained in:
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>NutriAI Elite v15.0</title>
|
<title>NutriAI Elite v16.0</title>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.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">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
@@ -12,7 +12,6 @@
|
|||||||
<style>
|
<style>
|
||||||
:root { --primary: #3b82f6; --bg: #020617; --sidebar: #0f172a; --card: #1e293b; --accent: #60a5fa; }
|
:root { --primary: #3b82f6; --bg: #020617; --sidebar: #0f172a; --card: #1e293b; --accent: #60a5fa; }
|
||||||
|
|
||||||
/* Theme Variants */
|
|
||||||
body.theme-dark { --bg: #020617; --sidebar: #0f172a; --primary: #3b82f6; }
|
body.theme-dark { --bg: #020617; --sidebar: #0f172a; --primary: #3b82f6; }
|
||||||
body.theme-emerald { --bg: #064e3b; --sidebar: #065f46; --primary: #10b981; }
|
body.theme-emerald { --bg: #064e3b; --sidebar: #065f46; --primary: #10b981; }
|
||||||
body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; }
|
body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; }
|
||||||
@@ -59,13 +58,11 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4 col-xl-3 sidebar">
|
<div class="col-lg-4 col-xl-3 sidebar">
|
||||||
<h3 class="fw-extrabold mb-4"><i class="fas fa-bolt text-primary"></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="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" value="110" oninput="update()"></div>
|
<div class="col-6"><label class="label-pro" id="txtW">Current (kg)</label><input type="number" id="w" class="form-control glass-input" value="110" 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" value="85" 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" value="85" oninput="update()"></div>
|
||||||
<div class="col-6"><label class="label-pro" id="txtH">Height (cm)</label><input type="number" id="h" class="form-control glass-input" value="176" oninput="update()"></div>
|
<div class="col-6"><label class="label-pro" id="txtH">Height (cm)</label><input type="number" id="h" class="form-control glass-input" value="176" oninput="update()"></div>
|
||||||
<div class="col-6"><label class="label-pro">Age</label><input type="number" id="age" class="form-control glass-input" value="30" oninput="update()"></div>
|
<div class="col-6"><label class="label-pro">Age</label><input type="number" id="age" class="form-control glass-input" value="30" oninput="update()"></div>
|
||||||
|
|
||||||
<div class="col-12"><label class="label-pro">Detailed Activity Level</label>
|
<div class="col-12"><label class="label-pro">Detailed Activity Level</label>
|
||||||
<select id="act" class="form-select glass-input" onchange="update()">
|
<select id="act" class="form-select glass-input" onchange="update()">
|
||||||
<option value="1.2">Sedentary (Office/No Exercise)</option>
|
<option value="1.2">Sedentary (Office/No Exercise)</option>
|
||||||
@@ -80,17 +77,14 @@
|
|||||||
<input type="range" id="agg" class="form-range" min="-1000" max="1000" step="50" value="-300" oninput="update()">
|
<input type="range" id="agg" class="form-range" min="-1000" max="1000" step="50" value="-300" oninput="update()">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-panel text-center">
|
<div class="stat-panel text-center">
|
||||||
<h1 class="fw-bold mb-0" id="kcal">2500</h1>
|
<h1 class="fw-bold mb-0" id="kcal">2500</h1>
|
||||||
<p class="text-uppercase fw-bold m-0 opacity-75 small">Daily Calorie Target</p>
|
<p class="text-uppercase fw-bold m-0 opacity-75 small">Daily Calorie Target</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="water-hub">
|
<div class="water-hub">
|
||||||
<h2 class="fw-bold text-info mb-0" id="h2o">3.9L</h2>
|
<h2 class="fw-bold text-info mb-0" id="h2o">3.9L</h2>
|
||||||
<span class="label-pro"><i class="fas fa-droplet me-1"></i> Daily Hydration</span>
|
<span class="label-pro"><i class="fas fa-droplet me-1"></i> Daily Hydration</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="macro-hub">
|
<div class="macro-hub">
|
||||||
<canvas id="mChart" style="max-height: 160px;"></canvas>
|
<canvas id="mChart" style="max-height: 160px;"></canvas>
|
||||||
<div class="row mt-3 text-center fw-bold">
|
<div class="row mt-3 text-center fw-bold">
|
||||||
@@ -100,18 +94,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-8 col-xl-9 p-0 bg-opacity-10 bg-black">
|
<div class="col-lg-8 col-xl-9 p-0 bg-opacity-10 bg-black">
|
||||||
<div id="chat" class="chat-container">
|
<div id="chat" class="chat-container">
|
||||||
<div class="msg ai shadow">
|
<div class="msg ai shadow">
|
||||||
<h4 class="fw-bold text-primary">System Unified.</h4>
|
<h4 class="fw-bold text-primary">Elite Engine Synced.</h4>
|
||||||
Themes are back, units are synced, and your macros are front-and-center.
|
Enter key is now enabled. Type your request and press Enter to generate.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-3 border-top border-secondary d-flex gap-2">
|
<div class="p-3 border-top border-secondary d-flex gap-2">
|
||||||
<div class="input-group input-group-lg flex-grow-1">
|
<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="Ask for a meal plan...">
|
<input type="text" id="uIn" class="form-control bg-dark text-white border-primary" placeholder="Type message and press Enter..." onkeydown="if(event.key === 'Enter') talk()">
|
||||||
<button class="btn btn-primary px-4" onclick="talk()"><i class="fas fa-paper-plane"></i></button>
|
<button class="btn btn-primary px-4" onclick="talk()"><i class="fas fa-paper-plane"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn-shop shadow" onclick="talk('Generate shopping list for current plan')">
|
<button class="btn-shop shadow" onclick="talk('Generate shopping list for current plan')">
|
||||||
@@ -151,15 +143,12 @@
|
|||||||
const wv = parseFloat(document.getElementById('w').value)||0, hv = parseFloat(document.getElementById('h').value)||0;
|
const wv = parseFloat(document.getElementById('w').value)||0, hv = parseFloat(document.getElementById('h').value)||0;
|
||||||
const av = parseFloat(document.getElementById('age').value)||0, act = parseFloat(document.getElementById('act').value);
|
const av = parseFloat(document.getElementById('age').value)||0, act = parseFloat(document.getElementById('act').value);
|
||||||
const agg = parseInt(document.getElementById('agg').value);
|
const agg = parseInt(document.getElementById('agg').value);
|
||||||
|
|
||||||
const wc = isMetric ? wv : wv/2.205, hc = isMetric ? hv : hv*2.54;
|
const wc = isMetric ? wv : wv/2.205, hc = isMetric ? hv : hv*2.54;
|
||||||
const bmr = (10 * wc) + (6.25 * hc) - (5 * av) + 5;
|
const bmr = (10 * wc) + (6.25 * hc) - (5 * av) + 5;
|
||||||
const total = Math.round((bmr * act) + agg);
|
const total = Math.round((bmr * act) + agg);
|
||||||
|
|
||||||
document.getElementById('kcal').innerText = total;
|
document.getElementById('kcal').innerText = total;
|
||||||
document.getElementById('aggDisp').innerText = (agg>0?'+':'')+agg+" kcal";
|
document.getElementById('aggDisp').innerText = (agg>0?'+':'')+agg+" kcal";
|
||||||
document.getElementById('h2o').innerText = (wc * 0.035).toFixed(1) + "L";
|
document.getElementById('h2o').innerText = (wc * 0.035).toFixed(1) + "L";
|
||||||
|
|
||||||
const pG = Math.round((total * 0.3)/4), cG = Math.round((total * 0.4)/4), fG = Math.round((total * 0.3)/9);
|
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";
|
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(); }
|
if(mChart) { mChart.data.datasets[0].data = [pG*4, cG*4, fG*9]; mChart.update(); }
|
||||||
@@ -169,18 +158,18 @@
|
|||||||
const box = document.getElementById('chat'), input = document.getElementById('uIn');
|
const box = document.getElementById('chat'), input = document.getElementById('uIn');
|
||||||
const text = custom || input.value; if(!text) return;
|
const text = custom || input.value; if(!text) return;
|
||||||
if(!custom) { box.innerHTML += `<div class="msg user shadow-sm">${text}</div>`; input.value=""; }
|
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">...</div>`;
|
const id = 'ai-'+Date.now(); box.innerHTML += `<div id="${id}" class="msg ai shadow">Generating...</div>`;
|
||||||
box.scrollTop = box.scrollHeight;
|
box.scrollTop = box.scrollHeight;
|
||||||
|
|
||||||
const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
|
const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
|
||||||
method: "POST", headers: {"Content-Type":"application/json", "Authorization":`Bearer ${API}`},
|
method: "POST", headers: {"Content-Type":"application/json", "Authorization":`Bearer ${API}`},
|
||||||
body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[
|
body: JSON.stringify({ model:"llama-3.3-70b-versatile", messages:[
|
||||||
{role:"system", content:`Expert Nutritionist. Target: ${document.getElementById('kcal').innerText} kcal. Macros: P:${document.getElementById('pG').innerText}, C:${document.getElementById('cG').innerText}, F:${document.getElementById('fG').innerText}. Use clean Markdown Tables and bold headers.`},
|
{role:"system", content:`Pro Nutritionist. Target: ${document.getElementById('kcal').innerText} kcal. P:${document.getElementById('pG').innerText}. Use clean Markdown Tables.`},
|
||||||
{role:"user", content:text}
|
{role:"user", content:text}
|
||||||
]})
|
]})
|
||||||
});
|
});
|
||||||
const d = await res.json();
|
const d = await res.json();
|
||||||
document.getElementById(id).innerHTML = marked.parse(d.choices[0].message.content);
|
document.getElementById(id).innerHTML = marked.parse(d.choices[0].message.content);
|
||||||
|
box.scrollTop = box.scrollHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user