Adicionar web/index.html

2026-08-19 20:26:34 -03:00
parent eec3e54db8
commit 1af414fa43
1 changed files with 92 additions and 0 deletions
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Safira AI Gateway</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background: #f5f5f5;
+    padding: 40px;
+    max-width: 800px;
+    margin: auto;
+  }
+  h1 {
+    color: #333;
+  }
+  textarea {
+    width: 100%;
+    height: 150px;
+    margin-top: 10px;
+  }
+  select, button {
+    padding: 10px;
+    margin-top: 10px;
+  }
+  #output {
+    margin-top: 20px;
+    padding: 20px;
+    background: #fff;
+    border-radius: 8px;
+    white-space: pre-wrap;
+  }
+</style>
+</head>
+
+<body>
+
+<h1>Safira AI Gateway</h1>
+<p>This interface allows you to send prompts to the local Ollama models.</p>
+
+<!-- Model selector -->
+<label for="model">Choose a model:</label>
+<select id="model">
+  <option value="llama3.2">Llama 3.2</option>
+  <option value="gemma4">Gemma 4</option>
+  <option value="qwen2.5">Qwen 2.5</option>
+</select>
+
+<!-- Prompt input -->
+<textarea id="prompt" placeholder="Type your prompt here..."></textarea>
+
+<!-- Submit button -->
+<button onclick="sendPrompt()">Generate</button>
+
+<!-- Output area -->
+<div id="output"></div>
+
+<script>
+// All comments are in English.
+
+// Sends the prompt to the backend API.
+async function sendPrompt() {
+  const model = document.getElementById("model").value;
+  const prompt = document.getElementById("prompt").value;
+
+  document.getElementById("output").innerText = "Processing...";
+
+  try {
+    const response = await fetch("/api/generate", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({ model, prompt })
+    });
+
+    if (!response.ok) {
+      document.getElementById("output").innerText =
+        "Error: " + response.status + " " + response.statusText;
+      return;
+    }
+
+    const data = await response.json();
+    document.getElementById("output").innerText = data.output || "(no output)";
+  } catch (err) {
+    document.getElementById("output").innerText = "Request failed: " + err;
+  }
+}
+</script>
+
+</body>
+</html>