# Proyecto de Chat Este proyecto de chat muestra cómo construir un Asistente de Chat utilizando GitHub Models. Así es como se ve el proyecto terminado:  Un poco de contexto: construir asistentes de chat utilizando IA generativa es una excelente manera de comenzar a aprender sobre IA. Lo que aprenderás es cómo integrar IA generativa en una aplicación web a lo largo de esta lección. ¡Comencemos! ## Conexión con IA generativa Para el backend, estamos utilizando GitHub Models. Es un excelente servicio que te permite usar IA de forma gratuita. Ve a su playground y obtén el código que corresponde al lenguaje de backend que elijas. Así es como se ve en [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)  Como mencionamos, selecciona la pestaña "Code" y tu entorno de ejecución preferido.  ### Usando Python En este caso, seleccionamos Python, lo que significa que elegimos este código: ```python """Run this model in Python > pip install openai """ import os from openai import OpenAI # To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. # Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens client = OpenAI( base_url="https://models.github.ai/inference", api_key=os.environ["GITHUB_TOKEN"], ) response = client.chat.completions.create( messages=[ { "role": "system", "content": "", }, { "role": "user", "content": "What is the capital of France?", } ], model="openai/gpt-4o-mini", temperature=1, max_tokens=4096, top_p=1 ) print(response.choices[0].message.content) ``` Limpiemos un poco este código para que sea reutilizable: ```python def call_llm(prompt: str, system_message: str): response = client.chat.completions.create( messages=[ { "role": "system", "content": system_message, }, { "role": "user", "content": prompt, } ], model="openai/gpt-4o-mini", temperature=1, max_tokens=4096, top_p=1 ) return response.choices[0].message.content ``` Con esta función `call_llm` ahora podemos tomar un prompt y un prompt del sistema, y la función devuelve el resultado. ### Personalizar el Asistente de IA Si deseas personalizar el asistente de IA, puedes especificar cómo quieres que se comporte llenando el prompt del sistema de esta manera: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## Exponerlo a través de una API Web Genial, ya tenemos la parte de IA lista. Veamos cómo podemos integrarla en una API Web. Para la API Web, elegimos usar Flask, pero cualquier framework web debería funcionar. Veamos el código: ### Usando Python ```python # api.py from flask import Flask, request, jsonify from llm import call_llm from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com @app.route("/", methods=["GET"]) def index(): return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload" @app.route("/hello", methods=["POST"]) def hello(): # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") response = call_llm(message, "You are a helpful assistant.") return jsonify({ "response": response }) if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` Aquí, creamos una API con Flask y definimos una ruta predeterminada "/" y "/chat". Esta última está destinada a ser utilizada por nuestro frontend para enviar preguntas. Para integrar *llm.py*, esto es lo que necesitamos hacer: - Importar la función `call_llm`: ```python from llm import call_llm from flask import Flask, request ``` - Llamarla desde la ruta "/chat": ```python @app.route("/hello", methods=["POST"]) def hello(): # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") response = call_llm(message, "You are a helpful assistant.") return jsonify({ "response": response }) ``` Aquí analizamos la solicitud entrante para recuperar la propiedad `message` del cuerpo JSON. Después, llamamos al LLM con esta llamada: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` Genial, ahora hemos hecho lo que necesitamos. ## Configurar Cors Debemos mencionar que configuramos algo como CORS, el intercambio de recursos de origen cruzado. Esto significa que, dado que nuestro backend y frontend se ejecutarán en diferentes puertos, necesitamos permitir que el frontend llame al backend. ### Usando Python Hay un fragmento de código en *api.py* que configura esto: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` Actualmente está configurado para permitir "*", que son todos los orígenes, y eso es un poco inseguro. Deberíamos restringirlo una vez que pasemos a producción. ## Ejecutar tu proyecto Para ejecutar tu proyecto, primero necesitas iniciar tu backend y luego tu frontend. ### Usando Python Bien, tenemos *llm.py* y *api.py*. ¿Cómo podemos hacer que esto funcione con un backend? Bueno, hay dos cosas que necesitamos hacer: - Instalar dependencias: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - Iniciar la API: ```sh python api.py ``` Si estás en Codespaces, necesitas ir a Puertos en la parte inferior del editor, hacer clic derecho sobre él, seleccionar "Port Visibility" y elegir "Public". ### Trabajar en un frontend Ahora que tenemos una API en funcionamiento, vamos a crear un frontend para esto. Un frontend mínimo que mejoraremos paso a paso. En una carpeta *frontend*, crea lo siguiente: ```text backend/ frontend/ index.html app.js styles.css ``` Comencemos con **index.html**: ```html

Send