Introducción

En esta publicación de blog, recorreremos el proceso de creación de una aplicación de chat simple que interactúa con el modelo Llama 3 de Ollama. Usaremos JavaScript, HTML y CSS para el frontend y Node.js con Express para el backend. Al final, tendrá una aplicación de chat funcional que envía mensajes de usuario al modelo de IA y muestra las respuestas en tiempo real.

Requisitos previos

Antes de comenzar, asegúrese de tener lo siguiente instalado en su máquina:

• Nodo.js
• npm (Administrador de paquetes de nodos)

Paso 1: configurar la interfaz

HTML

Primero, crea un archivo HTML llamado index.html que define la estructura de nuestra aplicación de chat.

    
    
    
    


    

        

            

        
        
        Send
    
    

Este archivo HTML incluye un contenedor para los mensajes de chat, un campo de entrada para mensajes de usuario y un botón de enviar.

CSS

A continuación, cree un archivo CSS llamado estilos.css para aplicar estilo a la aplicación 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;
}

Este archivo CSS garantiza que la aplicación de chat se vea limpia y moderna.

javascript

Cree un archivo JavaScript llamado script.js para manejar la funcionalidad del 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
}

Este archivo JavaScript agrega detectores de eventos al botón de envío y al campo de entrada, envía mensajes de usuario al backend y muestra las respuestas del usuario y de la IA.

Paso 2: configurar el backend

Node.js y Express

Asegúrese de tener Node.js instalado. Luego, crea un archivo server.js para el backend.

1. Instalar rápido:
   

   npm install express body-parser
   

2. Crear el archivo 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}`);
   });
   

3. Ejecutar el servidor:
   

   node server.js
   

En esta configuración, su servidor Node.js manejará las solicitudes entrantes, interactuará con el modelo Llama 3 de Ollama y devolverá respuestas.

Conclusión

Al seguir estos pasos, habrá creado una aplicación de chat que envía mensajes de usuario al modelo Llama 3 de Ollama y muestra las respuestas. Esta configuración se puede ampliar y personalizar según sus requisitos específicos y las características que ofrece el modelo Llama 3.

Siéntete libre de explorar y mejorar la funcionalidad de tu aplicación de chat. ¡Feliz codificación!