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.
Bevor Sie beginnen, stellen Sie sicher, dass Folgendes auf Ihrem Computer installiert ist:
Erstellen Sie zunächst eine HTML-Datei mit dem Namen index.html, die die Struktur unserer Chat-Anwendung definiert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with Ollama's Llama 3</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="chat-container">
<div id="chat-window">
<div id="messages"></div>
</div>
<input type="text" id="user-input" placeholder="Type your message here...">
<button id="send-button">Send</button>
</div>
<script src="script.js"></script>
</body>
</html>
Diese HTML-Datei enthält einen Container für die Chat-Nachrichten, ein Eingabefeld für Benutzernachrichten und eine Schaltfläche zum Senden.
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.
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 der Schaltfläche „Senden“ und dem Eingabefeld Ereignis-Listener hinzu, sendet Benutzernachrichten an das Backend und zeigt sowohl Benutzer- als auch KI-Antworten an.
Stellen Sie sicher, dass Node.js installiert ist. Erstellen Sie dann eine server.js-Datei für das Backend.
Express installieren:
npm install express body-parser
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}`);
});
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.
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.
Zögern Sie nicht, die Funktionalität Ihrer Chat-Anwendung zu erkunden und zu erweitern. Viel Spaß beim Codieren!
Das obige ist der detaillierte Inhalt vonErstellen einer Chat-Anwendung mit Ollamas Llama-Odel unter Verwendung von JavaScript, HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
