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>