Einführung

In diesem Blogbeitrag gehen wir durch den Prozess der Erstellung einer einfachen Chat-Anwendung, die mit Ollamas Llama 3-Modell interagiert. Wir verwenden JavaScript, HTML und CSS für das Frontend und Node.js mit Express für das Backend. Am Ende verfügen Sie über eine funktionierende Chat-Anwendung, die Benutzernachrichten an das KI-Modell sendet und die Antworten in Echtzeit anzeigt.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Folgendes auf Ihrem Computer installiert ist:

• Node.js
• npm (Node Package Manager)

Schritt 1: Einrichten des Frontends

HTML

Erstellen Sie zunächst eine HTML-Datei mit dem Namen index.html, die die Struktur unserer Chat-Anwendung definiert.

    
    
    
    


    

        

            

        
        
        Send
    
    

Diese HTML-Datei enthält einen Container für die Chat-Nachrichten, ein Eingabefeld für Benutzernachrichten und eine Schaltfläche zum Senden.

CSS

Als nächstes erstellen Sie eine CSS-Datei mit dem Namen „styles.css“, um die Chat-Anwendung zu formatieren.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

#chat-container {
    width: 400px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#chat-window {
    height: 300px;
    padding: 10px;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
}

#messages {
    display: flex;
    flex-direction: column;
}

.message {
    padding: 8px;
    margin: 4px 0;
    border-radius: 4px;
}

.user-message {
    align-self: flex-end;
    background-color: #007bff;
    color: #fff;
}

.ai-message {
    align-self: flex-start;
    background-color: #e0e0e0;
    color: #000;
}

#user-input {
    width: calc(100% - 60px);
    padding: 10px;
    border: none;
    border-radius: 0;
    outline: none;
}

#send-button {
    width: 60px;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

Diese CSS-Datei sorgt dafür, dass die Chat-Anwendung sauber und modern aussieht.

JavaScript

Erstellen Sie eine JavaScript-Datei mit dem Namen script.js, um die Frontend-Funktionalität zu verwalten.

document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

function sendMessage() {
    const userInput = document.getElementById('user-input');
    const messageText = userInput.value.trim();

    if (messageText === '') return;

    displayMessage(messageText, 'user-message');
    userInput.value = '';

    // Send the message to the local AI and get the response
    getAIResponse(messageText).then(aiResponse => {
        displayMessage(aiResponse, 'ai-message');
    }).catch(error => {
        console.error('Error:', error);
        displayMessage('Sorry, something went wrong.', 'ai-message');
    });
}

function displayMessage(text, className) {
    const messageElement = document.createElement('div');
    messageElement.textContent = text;
    messageElement.className = `message ${className}`;
    document.getElementById('messages').appendChild(messageElement);
    document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
}

async function getAIResponse(userMessage) {
    // Example AJAX call to a local server interacting with Ollama Llama 3
    const response = await fetch('http://localhost:5000/ollama', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: userMessage }),
    });

    if (!response.ok) {
        throw new Error('Network response was not ok');
    }

    const data = await response.json();
    return data.response; // Adjust this based on your server's response structure
}

Diese JavaScript-Datei fügt Ereignis-Listener zur Schaltfläche „Senden“ und zum Eingabefeld hinzu, sendet Benutzernachrichten an das Backend und zeigt sowohl Benutzer- als auch KI-Antworten an.

Schritt 2: Einrichten des Backends

Node.js und Express

Stellen Sie sicher, dass Node.js installiert ist. Erstellen Sie dann eine server.js-Datei für das Backend.

1. Express installieren:
   

   npm install express body-parser
   

2. Erstellen Sie die server.js-Datei:
   

   const express = require('express');
   const bodyParser = require('body-parser');
   const app = express();
   const port = 5000;
   
   app.use(bodyParser.json());
   
   app.post('/ollama', async (req, res) => {
       const userMessage = req.body.message;
   
       // Replace this with actual interaction with Ollama's Llama 3
       // This is a placeholder for demonstration purposes
       const aiResponse = await getLlama3Response(userMessage);
   
       res.json({ response: aiResponse });
   });
   
   // Placeholder function to simulate AI response
   async function getLlama3Response(userMessage) {
       // Replace this with actual API call to Ollama's Llama 3
       return `Llama 3 says: ${userMessage}`;
   }
   
   app.listen(port, () => {
       console.log(`Server running at http://localhost:${port}`);
   });
   

3. Führen Sie den Server aus:
   

   node server.js
   

In diesem Setup verarbeitet Ihr Node.js-Server eingehende Anfragen, interagiert mit Ollamas Llama-3-Modell und gibt Antworten zurück.

Abschluss

Indem Sie diese Schritte ausführen, haben Sie eine Chat-Anwendung erstellt, die Benutzernachrichten an Ollamas Llama 3-Modell sendet und die Antworten anzeigt. Dieses Setup kann basierend auf Ihren spezifischen Anforderungen und den Funktionen des Llama 3-Modells erweitert und angepasst werden.

Fühlen Sie sich frei, die Funktionalität Ihrer Chat-Anwendung zu erkunden und zu erweitern. Viel Spaß beim Codieren!