En este artículo, crearemos un chatbot simple usando OpenAI GPT-4 y la biblioteca aiohttp en Python. Usaremos un servidor asíncrono para manejar las solicitudes de chat y JavaScript para administrar el historial de conversaciones y la interacción del usuario.
exploraremos cómo crear un chatbot que pueda ayudar a los usuarios a administrar sus Finanzas personales. Específicamente, nos centraremos en crear un bot que esté bien informado y pueda proporcionar consejos de presupuesto, sugerencias de inversión. Llamaremos a esto FinGPT.
Comencemos por crear el código del lado del servidor. Usaremos aiohttp, un marco HTTP asincrónico popular para Python. Primero, instale aiohttp:
pip install aiohttp
Ahora, crea un archivo llamado server.py y agrega el siguiente código:
import json
import openai
from aiohttp import webopenai.api_key = "YOUR_OPENAI_API_KEY"
async def handle_chat(request):
data = await request.json()
conversation = data['conversation']
# Add system message to the conversation
system_message = {"role": "system", "content": "You are a knowledgeable bot which can help users manage their personal finances. You can provide budgeting tips, investment suggestions, and reminders for upcoming bills."}
conversation.insert(0, system_message)
response = openai.ChatCompletion.create(
model="gpt-4",
messages=conversation,
)
También te puede interesarDónde Chatgpt encuentra la informaciónchatbot_message = response.choices[0].message.content.strip()
return web.json_response({"chatbot_message": chatbot_message})
app = web.Application()
app.router.add_post("/chat", handle_chat)
if __name__ == "__main__":
web.run_app(app, host="localhost", port=8080)
En este código, primero importamos las bibliotecas requeridas, configuramos la clave API de OpenAI y definimos una función asincrónica llamada handle_chat. Esta función toma una solicitud de chat entrante, lee el conversation datos de la solicitud y los pasa al modelo GPT-4. El modelo GPT-4 genera una respuesta, que luego se devuelve como una respuesta JSON.
Luego creamos un aiohttp web.Application instancia y agregue el handle_chat funcionar como un controlador para las solicitudes POST en el /chat punto final Finalmente, ejecutamos la aplicación en el host local con el puerto especificado (8080).
Ahora, vamos a crear el código del lado del cliente. Crear un index.html archivo y agregue el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Help Chatbot</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>FinGPT</h2>
</div>
<div class="chat-content" id="chat-content">
<!-- Chat messages will be displayed here -->
</div>
<div class="chat-input">
<input type="text" id="user-input" placeholder="Type your question...">
<button id="send-btn">Send</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Este es un archivo HTML simple con un contenedor de chat, un campo de entrada para que el usuario escriba su mensaje y un botón de envío para enviar el mensaje.
Luego crea un style.css archivo con este código:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}.chat-container {
width: 400px;
background-color: white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.chat-header {
background-color: #4caf50;
padding: 20px;
color: white;
}
.chat-content {
max-height: 400px;
overflow-y: auto;
padding: 20px;
}
.chat-message {
margin-bottom: 10px;
}
.user, .assistant {
display: inline-block;
border-radius: 5px;
padding: 5px 10px;
margin-bottom: 2px;
}
.user {
background-color: #e1ffc7;
color: #266600;
}
.assistant {
background-color: #e0e0e0;
color: #333;
}
.chat-input {
display: flex;
background-color: #f0f0f0;
padding: 10px;
}
input[type="text"] {
flex-grow: 1;
border: none;
padding: 10px;
border-radius: 3px;
}
button {
background-color: #4caf50;
border: none;
color: white;
padding: 10px;
margin-left: 10px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
También incluimos un archivo JavaScript, script.jsque crearemos a continuación.
Ahora, crea un script.js archivo y agregue el siguiente código:
const chatContent = document.getElementById("chat-content");
const userInput = document.getElementById("chat-input");
const sendBtn = document.getElementById("send-btn");let conversation = [];
function createChatMessage(role, text) {
const messageElem = document.createElement("div");
messageElem.className = role === "user" ? "user-message" : "chatbot-message";
messageElem.textContent = text;
return messageElem;
}
function appendMessage(role, text) {
const messageElem = createChatMessage(role, text);
chatContent.appendChild(messageElem);
chatContent.scrollTop = chatContent.scrollHeight;
conversation.push({ role, content: text });
}
async function sendMessage(userMessage) {
appendMessage("user", userMessage);
try {
const response = await fetch("http://localhost:8080/chat", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ conversation }),
});
const data = await response.json();
const chatbotMessage = data.chatbot_message;
appendMessage("chatbot", chatbotMessage);
} catch (error) {
console.error("Error while sending message:", error);
}
}
sendBtn.addEventListener("click", () => {
const userMessage = userInput.value.trim();
if (userMessage) {
sendMessage(userMessage);
userInput.value = "";
}
});
userInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
const userMessage = userInput.value.trim();
if (userMessage) {
sendMessage(userMessage);
userInput.value = "";
}
}
});
En este código, primero obtenemos referencias a los elementos HTML para el contenido del chat, la entrada del usuario y el botón de envío. Luego definimos la conversación inicial con un mensaje del sistema que explica el propósito del chatbot.
A continuación, creamos un createChatMessage función que asume un rol (ya sea «usuario» o «chatbot») y una cadena de texto. Esta función crea un nuevo elemento DOM con un nombre de clase basado en el rol y establece su contenido de texto en el texto proporcionado. La función devuelve el elemento DOM creado.
El appendMessage La función se utiliza para agregar un mensaje al contenido del chat, tanto visualmente como en el conversation lista. llama al createChatMessage para crear un nuevo elemento de mensaje y lo agrega a la chatContent. También actualiza la posición de desplazamiento del contenido del chat y agrega el mensaje al conversation lista.
El sendMessage La función es una función asíncrona que primero agrega el mensaje del usuario al contenido del chat y luego envía una solicitud POST al servidor con el historial completo de la conversación. Cuando se recibe la respuesta del chatbot, también agrega la respuesta al contenido del chat.
Finalmente, agregamos detectores de eventos para el botón de envío y el campo de entrada del usuario. Cuando se hace clic en el botón Enviar o se presiona la tecla «Enter» en el campo de entrada, el mensaje del usuario se envía al servidor y se muestra la respuesta del chatbot.
Ahora, puede ejecutar el servidor ejecutando el siguiente comando:
python server.py
Abre tu navegador y visita http://localhost:8080 para interactuar con el chatbot. El chatbot responderá a sus mensajes utilizando el modelo GPT-4 y el historial de conversaciones se mantendrá en el lado del cliente.
¡Eso es todo! Ha creado con éxito un chatbot simple usando GPT-4 y aiohttp. El código del lado del servidor maneja las solicitudes de chat de forma asincrónica, y el código del lado del cliente administra el historial de conversaciones y las interacciones del usuario. Ahora puede ampliar este ejemplo para crear chatbots más sofisticados o integrarlo en aplicaciones web existentes.
