DeepLearningSG/Platform

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">6    <title>LM Platform Nutrition Guide</title>7    <style>8        body {9          max-width: 760px;10          margin: 48px auto;11          padding: 0 20px;12          font-family: Arial, sans-serif;13          color: #202124;14        }15        textarea, button {16          width: 100%;17          box-sizing: border-box;18          font: inherit;19        }20        textarea {21          min-height: 120px;22          padding: 12px;23          margin: 12px 0;24        }25        button {26          padding: 12px;27          border: 0;28          border-radius: 6px;29          background: #e87524;30          color: white;31          cursor: pointer;32        }33        button:disabled {34          opacity: 0.65;35          cursor: wait;36        }37        #answer {38          white-space: pre-wrap;39          margin-top: 24px;40          padding: 16px;41          border-radius: 6px;42          background: #f5f5f5;43        }44    </style>45</head>46<body>47<h1>LM Platform Nutrition Guide</h1>48<p>Ask nutrition questions based on curated WHO guidance.</p>49<p><em>Educational demo only — not medical advice.</em></p>50 51<textarea52        id="question"53        placeholder="What does WHO recommend about free sugar intake?"54></textarea>55 56<button id="ask-button">Ask</button>57 58<div id="answer">Ask a question to begin.</div>59 60<script>61    const API_URL = "https://roots-scheduled-electrical-prostate.trycloudflare.com";62    const question = document.getElementById("question");63    const askButton = document.getElementById("ask-button");64    const answer = document.getElementById("answer");65 66    askButton.addEventListener("click", async () => {67      const text = question.value.trim();68 69      if (!text) {70        answer.textContent = "Please enter a question.";71        return;72      }73 74      askButton.disabled = true;75      askButton.textContent = "Answering...";76      answer.textContent = "Searching nutrition guidance...";77 78      try {79        const response = await fetch(80          `${API_URL}/demo/questions`,81          {82            method: "POST",83            headers: {84              "Content-Type": "application/json",85            },86            body: JSON.stringify({87              question: text,88            }),89          }90        );91 92        const result = await response.json();93 94        if (!response.ok) {95          throw new Error(result.detail || "Request failed.");96        }97 98        answer.textContent = result.answer;99      } catch (error) {100        answer.textContent = `Demo unavailable: ${error.message}`;101      } finally {102        askButton.disabled = false;103        askButton.textContent = "Ask";104      }105    });106</script>107</body>108</html>