Revoluciona tus Aplicaciones con useLLM: El Poder del Chat Inteligente en React
¡Bienvenidos al artículo sobre `useLLM`, Revoluciona tus Aplicaciones con useLLM: El Poder del Chat Inteligente en React, un hook para React y Modelos de Inteligencia Artificial!
En este ejemplo, vamos a crear una interfaz gráfica que tendra un encabezado, una caja de texto donde podremos ingresar el prompt para hacer consultas al modelo de inteligencia artificial, y un contenedor para mostrar los resultados generados por el modelo.
Además, te invito a compartir este artículo con tus amigos y colegas que también estén interesados en el mundo de la inteligencia artificial y la programación. ¡Cuanta más gente se beneficie de este conocimiento, mejor!
Y si quieres mantenerte actualizado con todos los artículos y tutoriales que publico, no olvides suscribirte a mi blog Y al canal de Youtube, para recibir notificaciones cada vez que se publique un nuevo contenido.
¡Tu apoyo y participación son muy valiosos! Estoy emocionado de tener esta oportunidad de aprender y crecer juntos en este fascinante campo. ¡Comencemos con el tutorial y no dudes en dejar tus comentarios y preguntas en la sección de comentarios del artículo!
En un video que vi en un canal de un Desarrollador que sigo llama Fatz Code, hacia uso de useLLM, con React y Hook. Donde podemos ver en la imagen siguiente o si ingresan en la URL el mensaje siguiente: Integre modelos de lenguaje grandes como ChatGPT y agregue funciones impulsadas por IA a sus aplicaciones React en minutos.
Accede desde aqui y prueba cada uno de esos modelos, en nuestro caso vamos a desarrollar el primero, el chat simular a ChatGPT utilizando sus funcionalidades, donde podremos hacer consultas de todo tipo. https://usellm.org/
En el mundo de la programación, es importante comprender algunos conceptos clave antes de adentrarnos en el uso de herramientas como React, frameworks como Next.js y el uso de Modelos de Lenguaje Grande (LLM) en aplicaciones de inteligencia artificial. A continuación, proporcionaré breves definiciones de estos términos para facilitar su comprensión:
React: React es una biblioteca de JavaScript de código abierto desarrollada por Facebook. Se utiliza para construir interfaces de usuario interactivas y eficientes. React utiliza un enfoque basado en componentes, donde los componentes encapsulan el comportamiento y la interfaz de usuario de una parte específica de una aplicación.
Framework: Un framework es un conjunto de herramientas, bibliotecas y estándares que proporcionan una estructura para el desarrollo de aplicaciones. Los frameworks simplifican la tarea de construir aplicaciones al proporcionar abstracciones y funcionalidades comunes, lo que acelera el proceso de desarrollo y promueve buenas prácticas.
Next.js: Next.js es un framework de React que se utiliza para construir aplicaciones web del lado del servidor (SSR) y aplicaciones de una sola página (SPA). Proporciona características adicionales, como enrutamiento, renderizado en el servidor, generación estática y pre-renderizado, entre otros. Next.js simplifica el desarrollo de aplicaciones React al ofrecer una estructura y características listas para usar.
Modelos de Lenguaje Grande (LLM): Los Modelos de Lenguaje Grande son modelos de inteligencia artificial entrenados en grandes conjuntos de datos de texto para aprender patrones, reglas gramaticales y contextos semánticos del lenguaje humano. Estos modelos son capaces de generar texto coherente y responder preguntas basándose en su conocimiento previo.
Ahora, respecto a la inteligencia artificial (AI), es un campo de la informática que se enfoca en la creación de sistemas capaces de realizar tareas que normalmente requieren de la inteligencia humana. La AI busca emular la capacidad de razonamiento, aprendizaje, percepción y toma de decisiones en máquinas. Estas aplicaciones pueden abarcar desde reconocimiento de voz y visión por computadora hasta el procesamiento del lenguaje natural.
La utilización de la inteligencia artificial en aplicaciones puede proporcionar beneficios significativos, como la automatización de tareas, la mejora de la eficiencia y la capacidad de tomar decisiones más inteligentes. Los Modelos de Lenguaje Grande, en particular, han demostrado ser útiles en la generación de texto, la respuesta a preguntas y la interacción con los usuarios en lenguaje natural.
Al utilizar herramientas como React, frameworks como Next.js y módulos como useLLM, los desarrolladores pueden aprovechar la inteligencia artificial y los Modelos de Lenguaje Grande para agregar características inteligentes a sus aplicaciones. Esto les permite crear interfaces de usuario interactivas y conversacionales, donde las aplicaciones pueden responder a las consultas de los usuarios y generar contenido de forma dinámica.
Aplicaciones inteligentes, como ChatGPT, se han vuelto prácticamente comunes en nuestro día a día. Estas aplicaciones no solo son utilizadas por los usuarios, sino también por los desarrolladores que buscan agregar características inteligentes a sus propias aplicaciones. Si eres uno de estos desarrolladores, es posible que estés considerando utilizar la API de OpenAI de ChatGPT y desarrollar tu propia interfaz, utilizando tecnologías como React o un framework como Next.js.
JavaScript: el lenguaje de programación esencial para el desarrollo web
En el vasto mundo del desarrollo web, JavaScript es considerado uno de los lenguajes de programación más importantes y ampliamente utilizados. Es un lenguaje de programación de alto nivel, interpretado y orientado a objetos que se utiliza tanto en el frontend como en el backend de las aplicaciones web.
El uso de JavaScript ha crecido exponencialmente en los últimos años debido a su capacidad para crear interactividad y dinamismo en las páginas web. Es compatible con todos los navegadores modernos y se ha convertido en el lenguaje predeterminado para el desarrollo de la lógica del lado del cliente.
En el frontend, JavaScript se utiliza principalmente para manipular el Document Object Model (DOM), que es la representación en memoria de una página web. Esto significa que podemos controlar y modificar elementos HTML, estilos CSS y contenido de manera dinámica, todo ello en tiempo real, sin necesidad de recargar la página. Esto permite la creación de páginas web interactivas y sofisticadas.
En el backend, JavaScript se utiliza en entornos de ejecución como Node.js, que permite a los desarrolladores utilizar JavaScript para crear servidores y aplicaciones web completas. Esto ha llevado a un crecimiento significativo en la popularidad de JavaScript, ya que los desarrolladores pueden utilizar el mismo lenguaje tanto en el frontend como en el backend, lo que facilita la creación de aplicaciones web completas con una sola tecnología.
El ecosistema de JavaScript también cuenta con una amplia gama de frameworks y bibliotecas que facilitan el desarrollo de aplicaciones web. Uno de los frameworks más populares es React, desarrollado por Facebook. React utiliza JavaScript para crear interfaces de usuario interactivas y reutilizables. Su uso de componentes permite una organización modular del código y facilita el mantenimiento y la escalabilidad de las aplicaciones.
React y Hook: La evolución de la programación en React
React es una biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario interactivas. A menudo se le llama «biblioteca» en lugar de «framework» debido a su enfoque específico en el aspecto de la interfaz de usuario. Sin embargo, dado que React proporciona una estructura y un conjunto de herramientas para el desarrollo de aplicaciones, algunos también se refieren a él como un framework de JavaScript.
React se basa en el concepto de componentes, que son piezas reutilizables de código que encapsulan la lógica y la presentación de una parte específica de la interfaz de usuario. Estos componentes pueden ser combinados para construir interfaces más complejas y dinámicas. React utiliza una sintaxis llamada JSX, que permite escribir código HTML y JavaScript en un solo archivo, lo que facilita la creación y el mantenimiento de componentes.
Además de proporcionar la capacidad de crear componentes reutilizables, React también ofrece un rendimiento eficiente a través de su algoritmo de reconciliación virtual (Virtual DOM). El Virtual DOM es una representación ligera y virtual de la estructura de la interfaz de usuario en memoria. Cuando ocurren cambios en los componentes, React compara el Virtual DOM actualizado con el estado anterior y actualiza eficientemente solo los elementos que han cambiado, minimizando las operaciones costosas de manipulación del DOM real.
React también se beneficia de un ecosistema próspero de bibliotecas y herramientas complementarias. Por ejemplo, Redux es una biblioteca popular utilizada junto con React para administrar el estado global de la aplicación de manera predecible. Otros proyectos como React Router, Material-UI y Next.js amplían las capacidades de React y simplifican tareas comunes en el desarrollo web.
En los últimos años, React se ha convertido en la biblioteca de JavaScript más popular y utilizada en el desarrollo de aplicaciones web. Su eficiencia, rendimiento y su enfoque en la construcción de interfaces de usuario han hecho de React una herramienta indispensable para muchos desarrolladores.
Sin embargo, el uso de React solía requerir la creación de componentes basados en clases, lo que llevaba a una sintaxis más verbosa y dificultaba la reutilización del código. Con el lanzamiento de React 16.8 en febrero de 2019, se introdujo una nueva forma de escribir componentes en React: los Hooks, en las ultimas actualizaciones se ha evidenciado como hoy dia en pleno 2023, se ha convertido en esa Biblioteca clave para cualquier proyecto.
Los Hooks son una adición revolucionaria a React que permiten a los desarrolladores utilizar el estado y otras características de React sin escribir una clase. Esto ha hecho que el código sea más conciso y fácil de entender, lo que a su vez ha mejorado la productividad y la mantenibilidad de las aplicaciones.
Uno de los Hooks más utilizados es useState, que permite a los componentes de React tener estado interno. Anteriormente, esto solo se podía lograr utilizando clases. Con useState, los desarrolladores pueden declarar variables de estado dentro de su componente y React se encargará de su gestión y actualización automáticamente.
Otro Hook importante es useEffect, que permite a los desarrolladores realizar efectos secundarios en componentes funcionales. Antes de los Hooks, estos efectos secundarios solo se podían realizar en los métodos de ciclo de vida de las clases. Con useEffect, los desarrolladores pueden controlar la ejecución de código después de que un componente se haya renderizado, se haya actualizado o se haya desmontado.
Además de useState y useEffect, React también proporciona otros Hooks como useContext, useRef y useMemo, entre otros. Cada uno de estos Hooks está diseñado para abordar problemas específicos y para hacer que el desarrollo de aplicaciones en React sea más fácil y eficiente.
La adopción de Hooks en React ha sido ampliamente positiva por parte de la comunidad de desarrolladores. Los Hooks han demostrado ser una forma más intuitiva y sencilla de escribir componentes en React, lo que ha llevado a un código más limpio y legible. Además, los Hooks han facilitado la reutilización de lógica de componentes, lo que ha mejorado la modularidad y la escalabilidad de las aplicaciones.
¿Qué es useLLM?
useLLM es un módulo de npm diseñado específicamente para proyectos de React (y frameworks basados en React, como Next.js). Este módulo te permite agregar Modelos de Lenguaje Grande LLM (Large Language Models) a tus proyectos de React de manera sencilla, simplemente añadiendo componentes y hooks.
La biblioteca ofrece las siguientes características hasta el momento:
Uso del hook useLLM en tus componentes de React (en el lado del cliente): El hook useLLM te permite acceder a las funcionalidades de la API de OpenAI de ChatGPT directamente desde tus componentes de React. Esto facilita la comunicación con el modelo de lenguaje y la obtención de respuestas inteligentes.
Uso de createLLMService para crear un punto final de API para el hook (en el lado del servidor): Con createLLMService, puedes configurar un punto final de API en el lado del servidor para utilizarlo con el hook useLLM. Esto te permite personalizar y adaptar la API a tus necesidades específicas.
Uso de llmService.registerTemplate para configurar indicaciones y opciones predefinidas (en el lado del servidor): Con llmService.registerTemplate, puedes configurar indicaciones y opciones predefinidas que se utilizarán en las interacciones con el modelo de lenguaje. Esto facilita la definición de instrucciones claras y la personalización de la conversación.
El proyecto useLLM es de código abierto y está disponible en GitHub, lo que significa que puedes explorar su código fuente, contribuir con mejoras y personalizarlo según tus necesidades.
Cómo Instalar Node.js y npm en Windows 👨🏿💻
Para instalar Node.js y npm en Windows, sigue estos pasos:
Descarga Node.js: Ve al sitio web oficial de Node.js en : https://nodejs.org/es/download, y descarga la última versión LTS (Long-Term Support) para Windows. El LTS es la versión más estable y recomendada para la mayoría de los usuarios.
Ejecuta el instalador: Una vez descargado, ejecuta el archivo del instalador de Node.js (por ejemplo,
node-v14.17.5-x64.msi). Dependiendo de la versión que hayas descargado, el nombre del archivo puede variar.Selecciona las opciones de instalación: En el instalador, se te presentarán algunas opciones. Asegúrate de seleccionar «Automatically install the necessary tools for Node.js» y luego haz clic en «Next».
Acepta los términos de la licencia: Lee y acepta los términos de la licencia y luego haz clic en «Next».
Elige la carpeta de instalación: Puedes seleccionar la ubicación de instalación o dejarla en la configuración predeterminada. Luego, haz clic en «Next».
Selecciona las características: En esta ventana, puedes elegir qué componentes instalar. A menos que tengas una razón específica para cambiar la configuración, es recomendable dejar las opciones predeterminadas seleccionadas. Luego, haz clic en «Next».
Instala Node.js y npm: Haz clic en «Install» para comenzar la instalación de Node.js y npm en tu sistema.
Completa la instalación: Una vez que la instalación haya finalizado, haz clic en «Finish».
Verifica la instalación: Abre una nueva ventana de la línea de comandos (CMD) o una terminal y ejecuta los siguientes comandos para verificar que Node.js y npm estén instalados correctamente: ( node -v npm -v)
Creación del Proyecto:
Para entender mejor cómo funciona useLLM, vamos a crear un proyecto de ejemplo utilizando Vite.js.
Para ello vamos a nuestra PC, abrimos una terminal y vamos a sguir estos pasos:
Paso 1: Crear el proyecto:
Para crear el proyecto, ejecuta el siguiente comando en tu terminal:
npx create-vite
Sigue las instrucciones en la terminal para configurar tu proyecto, indica el Nombre: Project name: … usellm-tutorial, Asegúrate de seleccionar «React» como framework y «TypeScript» como variante. Puedes usar Javascript, en mi caso he usado TypeScript, en otro post, tendremos el mismo proyecto con JavaScript, ya que varia un poquito el codigo.
Paso 2: Instalar dependencias y ejecutar el proyecto:
Una vez creado el proyecto, navega hasta la carpeta del proyecto desde el mismo CMD, o en mi caso lo he abierto con VSC:
cd usellm-tutorial
A continuación, instala las dependencias del proyecto:
npm install
En este caso cuando les salga el asistente, cuando escriban el comando npx create-vite, le daran a y, luego precionaran Enter cuando le pongan el nombre a su proyecto, luego escojeran React, y NOTA AQUI: Pueden escoger Javascript, que es l que se ve Seleccionado, pero para el codigo que les deje usen mejor TypeScript, que es el codigo mostrrado mas abajo en el Blog.
Por último, ejecuta el proyecto:
npm run dev
El proyecto se ejecutará en tu navegador en la dirección http://localhost:5173 o en algunos casos :3000. Ahora estás listo para comenzar a utilizar useLLM en tu proyecto.
Prueba de usoLLM
Ahora que tienes tu proyecto configurado, puedes utilizar useLLM para interactuar con la API de OpenAI de ChatGPT.
Codigo generado en el archivo index.html
Aqui solo vamos a cambiar el titulo, y el favicon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://cdn.icon-icons.com/icons2/2817/PNG/512/ai_artificial_intelligence_chip_technology_cpu_icon_179503.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UserLLM con Real</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Codigo React con las funcionalidades de consultas UserLLM.
En la consola de Visual Studio Code o en la Terminal de CMD, vamos a Intalar el usellm con el comando:
npm install usellm.
En el archivo App.jsx, si tu version tiene TypeScript, tu archivo se llamara App.tsx. actualiza el contenido con el siguiente con el código borrando y sustituyendolo por este. No te preocupes mas abajo estara la explicacion y el codigo para que lo hagas.
Copiar este codigo, y leer las intrucciones y los comentarios mas abajo en cada caso, paso a paso:
{`import useLLM from "usellm";
import { useState, ChangeEvent } from "react";
export default function Demo() {
const llm = useLLM({ serviceUrl: "https://usellm.org/api/llm" });
const [result, setResult] = useState("");
const [inputValue, setInputValue] = useState("");
async function handleClick() {
try {
await llm.chat({
messages: [{ role: "user", content: inputValue }],
stream: true,
onStream: ({ message }) => setResult(message.content),
});
} catch (error) {
console.error("Something went wrong!", error);
}
}
function handleInputChange(event: ChangeEvent) {
setInputValue(event.target.value);
}
function formatResult() {
const paragraphs = result.split("\\n");
return paragraphs.map((paragraph, index) => (
{paragraph}
));
}
return (
<div>
<h1>Probando UserLLM con Real, Modelo de Inteligencia Artificial</h1>
<div><input type="text" value="{inputValue}" placeholder="Ingresa tu mensaje" /></div>
<button><img draggable="false" role="img" class="emoji" alt="✅" src="https://s.w.org/images/core/emoji/14.0.0/svg/2705.svg"> Enviar</button>
<div>
<div>{formatResult()}</div>
</div>
</div>
);
}`}
El módulo useLLM de usellm en conjunto con React para crear una interfaz de usuario interactiva que interactúa con el modelo de inteligencia artificial de UserLLM.
import useLLM from «usellm»;
import { useState, ChangeEvent } from «react»;
En estas líneas, importamos las dependencias necesarias: useLLM de usellm para acceder a las funcionalidades del modelo de lenguaje, y useState y ChangeEvent de React para manejar el estado y los eventos de cambio.
En estas líneas, importamos las dependencias necesarias: useLLM de usellm para acceder a las funcionalidades del modelo de lenguaje, y useState y ChangeEvent de React para manejar el estado y los eventos de cambio.
export default function Demo() {
const llm = useLLM({ serviceUrl: «https://usellm.org/api/llm» });
const [result, setResult] = useState(«»);
const [inputValue, setInputValue] = useState(«»);
Aquí definimos el componente funcional Demo. Utilizamos el hook useLLM para crear una instancia de llm y configurar la URL del servicio. Luego, utilizamos los hooks useState para crear el estado result, que almacenará la respuesta generada por el modelo, y inputValue, que almacenará el valor del campo de entrada de texto.
Algo a tomar en cuenta es el Streamming Support: Este modulo tambien soporta la entrega de datos o respuestas por Streamming, esto significa que en lugar de esperar a la respuesta completa, va entregando de a pocos los textos, para ir mostrandolos en la interfaz.
async function handleClick() {
try {
await llm.chat({
messages: [{ role: «user», content: inputValue }],
stream: true,
onStream: ({ message }) => setResult(message.content),
});
} catch (error) {
console.error(«Something went wrong!», error);
}
}
En esta función handleClick, manejamos el evento de clic en el botón de enviar. Dentro de un bloque try-catch, llamamos al método chat de llm, pasando un objeto de mensajes con el contenido del valor de inputValue. Configuramos stream en true para recibir la respuesta en streaming, y utilizamos la función de retorno onStream para actualizar el estado result con el contenido del mensaje.
function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
setInputValue(event.target.value);
}
Aquí definimos la función handleInputChange, que maneja el evento de cambio en el campo de entrada de texto. Utiliza el tipo ChangeEvent<HTMLInputElement> para recibir el evento y actualiza el estado inputValue con el valor del campo de entrada.
function formatResult() {
const paragraphs = result.split(«\n»);
return paragraphs.map((paragraph, index) => (
<p key={index}>{paragraph}</p>
));
}
La función formatResult se encarga de formatear la respuesta del modelo. Divide el contenido de result en párrafos utilizando el carácter de salto de línea (\n), y luego utiliza el método map para generar un elemento <p> por cada párrafo, asignando un key único a cada elemento.
return (
<div className=»container»>
<h1 className=»title»>Probando UserLLM con Real, Modelo de Inteligencia Artificial</h1>
<div className=»input-container»>
<input
type=»text»
value={inputValue}
onChange={handleInputChange}
placeholder=»Ingresa tu mensaje»
className=»input»
/>
</div>
<button onClick={handleClick} className=»button»>✅ Enviar</button>
<div className=»result-container»>
<div className=»result»>{formatResult()}</div>
</div>
</div>
);
}
Finalmente, en el bloque de retorno del componente Demo, creamos la estructura de la interfaz de usuario. Tenemos un contenedor principal con la clase CSS container, que contiene un encabezado <h1> con la clase title. A continuación, tenemos un contenedor de entrada con la clase input-container, que contiene un campo de entrada de texto <input> con la clase input, el cual está enlazado al estado inputValue y llama a la función handleInputChange en cada cambio. Luego, tenemos un botón <button> con la clase button, que llama a la función handleClick al hacer clic. Por último, tenemos un contenedor de resultados con la clase result-container, que contiene un div con la clase result, donde mostramos los párrafos formateados obtenidos de formatResult().
Este código crea una interfaz básica que permite al usuario ingresar un mensaje y recibir respuestas del modelo de inteligencia artificial. El resultado se muestra en forma de párrafos debajo del botón de envío.
Codigo CSS nuevo para la interfaz en el archivo Index.css
En el archivo Index.css tenemos todo el codigo de css que hemos aplicado, que si bien podiamos agregar con directamente en el codigo, decidi agregarlo aqui:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.title {
text-align: center;
background-color: white;
padding: 10px 0;
}
.input-container {
width: 80%;
margin: 20px 0;
}
.input {
width: 100%;
height: 40px;
padding: 10px;
}
.button {
margin-bottom: 10px;
}
.result-container {
width: 80%;
padding: 20px;
background-color: white;
text-align: justify;
}
.result {
font-weight: bold;
color: rgb(20, 10, 112);
}
Te lo explico de forma detallada, por ejemplo:
Este bloque de código representa las reglas de estilo CSS para diferentes clases utilizadas en el proyecto. Permíteme explicar cada una de ellas:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
La clase .container se aplica al contenedor principal del proyecto. Aquí se configuran algunas propiedades flexbox para centrar vertical y horizontalmente el contenido del contenedor. display: flex establece el contenedor como un contenedor flexible, flex-direction: column define que los elementos hijos se apilen verticalmente, align-items: center alinea los elementos hijos en el centro horizontalmente, y justify-content: center los alinea en el centro verticalmente. min-height: 100vh asegura que el contenedor ocupe al menos el 100% del alto de la ventana del navegador.
.title {
text-align: center;
background-color: white;
padding: 10px 0;
}
La clase .title se aplica al encabezado <h1> del proyecto. text-align: center alinea el texto en el centro horizontalmente, background-color: white establece el color de fondo del encabezado como blanco, y padding: 10px 0 agrega un espacio de relleno de 10 píxeles en la parte superior e inferior del encabezado.
.input-container {
width: 80%;
margin: 20px 0;
}
La clase .input-container se aplica al contenedor del campo de entrada de texto. width: 80% establece el ancho del contenedor al 80% del ancho del contenedor padre, y margin: 20px 0 agrega un margen de 20 píxeles en la parte superior e inferior del contenedor.
.input {
width: 100%;
height: 40px;
padding: 10px;
}
La clase .input se aplica al campo de entrada de texto. width: 100% establece el ancho del campo de entrada al 100% del ancho del contenedor padre, height: 40px establece la altura del campo de entrada en 40 píxeles, y padding: 10px agrega un espacio de relleno de 10 píxeles en el interior del campo de entrada.
.button {
margin-bottom: 10px;
}
La clase .button se aplica al botón de enviar. margin-bottom: 10px agrega un margen de 10 píxeles en la parte inferior del botón.
.result-container {
width: 80%;
padding: 20px;
background-color: white;
text-align: justify;
}
La clase .result-container se aplica al contenedor de resultados. width: 80% establece el ancho del contenedor al 80% del ancho del contenedor padre, padding: 20px agrega un espacio de relleno de 20 píxeles en el interior del contenedor, background-color: white establece el color de fondo del contenedor como blanco, y text-align: justify justifica el texto dentro del contenedor.
.result {
font-weight: bold;
color: rgb(20, 10, 112);
}
La clase .result se aplica al contenido de resultados dentro del contenedor de resultados. font-weight: bold establece el texto en negrita, y color: rgb(20, 10, 112) establece el color del texto como un tono de azul oscuro.
Estas reglas de estilo CSS se utilizan para controlar el diseño y la apariencia de los elementos en la interfaz de usuario del proyecto.
Para ejecutar nuestro proyecto con los cambios:
npm run dev
Aqui podemos ver nuestra interfaz con un Titulo, una caja de texto o prompt, y un boton el cual al escribir nuestro prompt, podremos ver el resultado debajo en un div, el cual mostrara o ira mostrando segun se van recibiendo las respuestas de la api.
Aqui vamos a escribuir nuestro primer Prompt, en el le pedidomos que nos de el script para generar los numeros primos en el leguaje de programacion python, y miren la repuesta que genera.
RESULTADO DEL CODIGO GENERADO EN VSC
PROBANDO PREGUNTA SOBRE LENGUAJES DE PROGRAMACION:
PROBANDO PREGUNTA SOBRE BASES DE DATOS :
Publicar nuestro proyecto:
Ahora vamos a publicar nuestro proyecto, hay varias formas de hacer esto, pero usemos la mas basica:
Para publicar tu proyecto «userllm-tutorial» en Vercel, puedes seguir los siguientes pasos:
Asegúrate de tener una cuenta en Vercel. Si no tienes una, regístrate en https://vercel.com/signup.
Instala la CLI (Command Line Interface) de Vercel en tu computadora ejecutando el siguiente comando en tu terminal:
npm install -g vercel
Ve al directorio raíz de tu proyecto «userllm-tutorial» en tu terminal.
Ejecuta el siguiente comando para iniciar el proceso de implementación en Vercel:
vercel
Esto iniciará un flujo de configuración en el que se te pedirá que inicies sesión en tu cuenta de Vercel y proporciones información sobre tu proyecto, si tienes una cuenta en github, o cualquier otra puedes elegirla.
Sigue las instrucciones en la terminal y elige las opciones adecuadas para tu proyecto. Asegúrate de seleccionar la carpeta correcta del proyecto cuando se te solicite.
Vercel realizará la implementación automática de tu proyecto. Una vez completada, se te proporcionará la URL de tu proyecto publicado.
Puedes personalizar la configuración y ajustes de implementación en el archivo vercel.json si es necesario. Consulta la documentación de Vercel para obtener más detalles sobre las opciones de configuración.
¡Y eso es todo! Ahora tu proyecto «userllm-tutorial» debería estar publicado en Vercel y accesible a través de la URL proporcionada.
Recuerda que puedes utilizar la plataforma de Vercel para administrar y realizar implementaciones posteriores de tu proyecto de forma sencilla.
Conclusión
`useLLM` es una poderosa herramienta que permite integrar fácilmente modelos de lenguaje grandes en aplicaciones de React. Con este hook, los desarrolladores pueden aprovechar la capacidad de los modelos de inteligencia artificial para generar respuestas inteligentes y personalizadas.
A lo largo de este artículo, hemos explorado cómo utilizar `useLLM` para crear una interfaz gráfica que interactúa con un modelo de lenguaje. Hemos aprendido a enviar consultas, recibir respuestas y mostrar los resultados de manera estructurada.
Nuevamente, te pdio que recuerdes seguirme en las redes sociales y suscribirte a mi canal de YouTube para acceder a más contenido relacionado con programación, inteligencia artificial y tecnología. Comparte este artículo con otros entusiastas de la programación para que también puedan beneficiarse de estas herramientas y conocimientos.
Tu apoyo y participación son fundamentales para mantenernos conectados y compartir conocimientos en esta emocionante comunidad.
¡Gracias por ser parte de este viaje de aprendizaje y desarrollo! ¡Espero verte pronto en futuros contenidos y seguir creciendo juntos en el fascinante mundo de la inteligencia artificial y la programación!
Como bonus, te dejo el link del proyecto para que lo utilices desde tu pc o movil, y el codigo tambien para que si quieres clonarlo en github lo puedas hacer. Un fuerte abrazo. 😁
https://usellm-tutorial-ejncg93s7-juancitopena.vercel.app/?vercelToolbarCode=WW_PgSq0jrou6-G
Otros enlaces importantes:
https://github.com/usellm/usellm
https://usellm.org/
https://usellm.org/docs
https://platform.openai.com/docs/api-reference/chat/create#chat/create-messages