Steuerkram/BEISPIELE/O-CHAT.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Ollama Chat</title>
  <style>
    body {
      font-family: Arial;
      max-width: 800px;
      margin: 40px auto;
      background: #f5f5f5;
    }
    #chat {
      background: white;
      padding: 20px;
      border-radius: 10px;
      height: 400px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }
    .msg {
      margin-bottom: 10px;
    }
    .user {
      font-weight: bold;
      color: blue;
    }
    .bot {
      font-weight: bold;
      color: green;
    }
    #inputArea {
      margin-top: 10px;
      display: flex;
    }
    input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
    }
    button {
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>

<h2>🤖 Ollama Chat (Mistral)</h2>

<div id="chat"></div>

<div id="inputArea">
  <input id="input" placeholder="Nachricht eingeben..." />
  <button onclick="sendMessage()">Senden</button>
</div>

<script>
  const chatDiv = document.getElementById('chat');
  const input = document.getElementById('input');

  let messages = [];

  function addMessage(role, text) {
    const div = document.createElement('div');
    div.classList.add('msg');

    if (role === 'user') {
      div.innerHTML = `<span class="user">Du:</span> ${text}`;
    } else {
      div.innerHTML = `<span class="bot">KI:</span> ${text}`;
    }

    chatDiv.appendChild(div);
    chatDiv.scrollTop = chatDiv.scrollHeight;
  }

  async function sendMessage() {
    const text = input.value.trim();
    if (!text) return;

    addMessage('user', text);
    input.value = '';

    messages.push({ role: 'user', content: text });

    try {
      const res = await fetch('http://localhost:11434/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          model: 'mistral',
          messages: messages,
          stream: false
        })
      });

      const data = await res.json();

      const reply = data.message.content;
      addMessage('assistant', reply);

      messages.push({ role: 'assistant', content: reply });

    } catch (err) {
      console.error(err);
      addMessage('assistant', 'Fehler: Verbindung zu Ollama fehlgeschlagen');
    }
  }

  // Enter-Taste senden
  input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });
</script>

</body>
</html>