Création d'une application de chat avec le modèle Llama d'Ollama en utilisant JavaScript, HTML et CSS-js tutoriel-php.cn

Création d'une application de chat avec le modèle Llama d'Ollama en utilisant JavaScript, HTML et CSS

WBOY

Libérer： 2024-07-19 15:03:09

original

1281 Les gens l'ont consulté

Building a Chat Application with Ollama

Introduction

Dans cet article de blog, nous expliquerons le processus de création d'une application de chat simple qui interagit avec le modèle Llama 3 d'Ollama. Nous utiliserons JavaScript, HTML et CSS pour le frontend, et Node.js avec Express pour le backend. À la fin, vous disposerez d'une application de chat fonctionnelle qui envoie des messages utilisateur au modèle d'IA et affiche les réponses en temps réel.

Conditions préalables

Avant de commencer, assurez-vous que les éléments suivants sont installés sur votre ordinateur :

Node.js
npm (gestionnaire de packages de nœuds)

Étape 1 : configuration du frontend

HTML

Tout d'abord, créez un fichier HTML nommé index.html qui définit la structure de notre application de chat.

<!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>

Copier après la connexion

Ce fichier HTML comprend un conteneur pour les messages de discussion, un champ de saisie pour les messages des utilisateurs et un bouton d'envoi.

CSS

Ensuite, créez un fichier CSS nommé styles.css pour styliser l'application de chat.

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;
}

Copier après la connexion

Ce fichier CSS garantit que l'application de chat semble propre et moderne.

Javascript

Créez un fichier JavaScript nommé script.js pour gérer la fonctionnalité frontend.

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
}

Copier après la connexion

Ce fichier JavaScript ajoute des écouteurs d'événements au bouton d'envoi et au champ de saisie, envoie les messages de l'utilisateur au backend et affiche les réponses de l'utilisateur et de l'IA.

Étape 2 : configuration du backend

Node.js et Express

Assurez-vous que Node.js est installé. Ensuite, créez un fichier server.js pour le backend.

Installer Express :
```
npm install express body-parser
```
Copier après la connexion

Créez le fichier server.js :

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}`);
});

Copier après la connexion

Exécuter le serveur :
```
node server.js
```
Copier après la connexion

Dans cette configuration, votre serveur Node.js gérera les requêtes entrantes, interagira avec le modèle Llama 3 d'Ollama et renverra les réponses.

Conclusion

En suivant ces étapes, vous avez créé une application de chat qui envoie des messages utilisateur au modèle Llama 3 d'Ollama et affiche les réponses. Cette configuration peut être étendue et personnalisée en fonction de vos besoins spécifiques et des fonctionnalités offertes par le modèle Llama 3.

N'hésitez pas à explorer et à améliorer les fonctionnalités de votre application de chat. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!