Update log.html

log.html

@@ -23,6 +23,13 @@ body {
   border: 1px solid #10b981;
   box-shadow: 0 20px 30px rgba(0,0,0,0.08);
 }
+
+/* AI TEXT STYLE */
+#aiText {
+  font-family: 'Inter', sans-serif;
+  line-height: 1.6;
+  font-size: 15px;
+}
 </style>
 </head>
 
@@ -44,8 +51,13 @@ body {
 <section class="px-10 py-10">
   <h1 class="text-4xl font-extrabold">Log Surplus Food</h1>
   <p class="text-gray-600 mt-2 text-lg">
-    AI-powered food redistribution system
+    AI + Location-based redistribution system
   </p>
+
+  <button onclick="getUserLocation()"
+    class="mt-4 bg-emerald-600 text-white px-4 py-2 rounded-full">
+    📍 Use My Location
+  </button>
 </section>
 
 <!-- INPUT -->
@@ -76,13 +88,13 @@ body {
 
   </div>
 
-  <!-- AI -->
+  <!-- AI OUTPUT -->
   <div class="card bg-white p-8 rounded-xl">
 
     <h2 class="text-2xl font-bold mb-4">AI Recommendation</h2>
 
     <div id="aiText" class="text-gray-600">
-      Click “Ask AI” to generate recommendation...
+      Click “Ask AI” to generate analysis...
     </div>
 
     <button onclick="runAI()"
@@ -140,13 +152,59 @@ portions.addEventListener("input", () => {
   portionValue.innerText = portions.value;
 });
 
-// locations for map
+// map locations
 const locations = {
   "Elderly Home": "Al Rahma Elderly Home Dubai",
   "Refugee Center": "Hope Refugee Center Dubai",
   "Food Bank": "Dubai Food Bank"
 };
 
+// clean AI formatter
+function formatAIText(text) {
+
+  text = text.replace(/\*\*/g, "");
+
+  const lines = text.split("\n").filter(l => l.trim() !== "");
+
+  let html = "";
+
+  lines.forEach(line => {
+
+    if (line.toLowerCase().includes("priority")) {
+      html += `<div class="text-lg font-bold text-emerald-700 mt-3">${line}</div>`;
+    }
+
+    else if (line.toLowerCase().includes("recipient")) {
+      html += `<div class="text-md font-semibold text-gray-800 mt-2">${line}</div>`;
+    }
+
+    else if (line.toLowerCase().includes("action")) {
+      html += `<div class="text-md font-semibold text-blue-700 mt-2">${line}</div>`;
+    }
+
+    else {
+      html += `<div class="text-gray-600 mt-1">${line}</div>`;
+    }
+  });
+
+  return html;
+}
+
+// get location
+function getUserLocation() {
+
+  navigator.geolocation.getCurrentPosition((pos) => {
+
+    const lat = pos.coords.latitude;
+    const lng = pos.coords.longitude;
+
+    document.getElementById("mapFrame").src =
+      `https://www.google.com/maps?q=${lat},${lng}&output=embed`;
+
+  });
+
+}
+
 // AI FUNCTION
 async function runAI() {
 
@@ -157,11 +215,9 @@ async function runAI() {
   let hours = expiryText.includes("6") ? 3 : expiryText.includes("24") ? 12 : 30;
 
   const prompt = `
-You are NourishNet AI (food logistics system).
-
-DO NOT give diets or meals.
+You are NourishNet AI (logistics system ONLY).
 
-ONLY analyze redistribution.
+Do NOT give diet or meal suggestions.
 
 INPUT:
 Meals: ${meals}
@@ -169,10 +225,10 @@ Hours: ${hours}
 Food: ${foodType}
 
 OUTPUT FORMAT:
-Priority: HIGH / MEDIUM / LOW
-Recipient: Elderly Home / Refugee Center / Food Bank
-Reason: short
-Action: short
+Priority:
+Recipient:
+Reason:
+Action:
 `;
 
   try {
@@ -181,7 +237,7 @@ Action: short
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Authorization": "Bearer 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"
+        "Authorization": "Bearer YOUR_GROQ_API_KEY"
       },
       body: JSON.stringify({
         model: "llama-3.1-8b-instant",
@@ -192,9 +248,11 @@ Action: short
     const data = await response.json();
     const result = data.choices[0].message.content;
 
-    // show AI output
+    // clean UI output
     document.getElementById("aiText").innerHTML =
-      `<pre class="whitespace-pre-wrap bg-emerald-50 p-4 rounded-lg border border-emerald-200">${result}</pre>`;
+      `<div class="bg-emerald-50 border border-emerald-200 rounded-xl p-5 shadow-sm">
+        ${formatAIText(result)}
+      </div>`;
 
     // detect recipient
     let recipient = "Refugee Center";