La aplicación de Qualcomm AI Inference Suite directamente desde una página web mediante JavaScript facilita la creación y la comprensión de cómo funciona la inferencia de IA en soluciones web.
Qualcomm Technologies, en colaboración con Cirrascale, ofrece un servicio de inferencia de IA gratuito que facilita a los desarrolladores la conexión y la ejecución de cargas de trabajo de inferencia desde el código. En nuestra última entrada de blog , explicamos lo fácil que es empezar a usar el SDK de Python, centrado en un escenario de análisis de sentimientos. En esta, mostraremos cómo acceder a las API REST directamente desde una página web mediante JavaScript.
Escenario de muestra
En este ejemplo, vamos a usar IA para crear contenido «creativo»: haiku. El haiku es fácil de crear y suele seguir un esquema silábico de 3-5-3. En japonés, esto no es difícil, ya que muchas palabras siguen patrones silábicos predecibles. En otros idiomas, simplemente intentamos aproximarnos.
El haiku surgió como una forma de entretenimiento donde un grupo de personas competía para crear el mejor poema sobre un tema determinado. Matsuo Bashō (1644-1694) fue un reconocido poeta japonés, a menudo considerado el mayor maestro del haiku. Normalmente, muchos de estos poemas trataban sobre la naturaleza. Pero con la IA podemos proporcionar cualquier tema y obtener algo interesante y reflexivo.
Pasos
- Crear una página web sencilla para la interfaz de usuario
- Establecer clave y punto final
- Construya su mensaje a partir de la entrada del usuario
- Configurar su solicitud de API
- Llamar a la API de la función de chat
- Limpiar el resultado
- Mostrar el haiku en la página web
Pasos con comentarios
Crea una página web sencilla para la interfaz de usuario.
Para demostrar lo fácil que es, usaremos HTML puro sin frameworks JavaScript de terceros . Para la experiencia de usuario de esta aplicación, no necesitamos usar React, Vue, Angular ni nada más. Simplemente creamos una página básica para pedirle inspiración al usuario, un área de visualización para el haiku y un espacio para la clave API del usuario. Usamos JavaScript y la función integrada onchange para almacenar las variables del usuario. Cuando los datos están listos, los insertamos directamente en el…<div id=”haiku”></div>.
Establecer clave y punto final
Primero, almacenamos el punto final de la API y una variable de marcador de posición para nuestra clave de API.
let API_ENDPOINT = "https://aisuite.cirrascale.com/apis/v2/completions";
let API_KEY = "";Crea tu mensaje a partir de la entrada del usuario.
Al usar LLM, necesitas crear un mensaje que devuelva solo lo que realmente necesitas. Si no eres lo suficientemente preciso, podrías obtener una respuesta mucho más completa de lo que esperabas. En este caso, necesitamos crear nuestro mensaje con un conjunto de pautas para que el sistema las use, y lo ideal es que devuelva solo el texto de un haiku.
let SYSTEM_ROLE = "You are a historical Japanese figure who is an expert at crafting haiku. ";
let USER_ROLE = "Please write a haiku about: ";
let GUARDRAILS = ". Respect the 5-7-5 syllable rule. Respond only with the haiku and no other text.";
Ejemplo de haiku generado por IA
Más tarde los concatenaremos junto con la inspiración del usuario para crear un mensaje que enviaremos al servicio de inferencia.
Configurar su solicitud de API
No sabemos cuánto tardará la solicitud en devolverse, por lo que usaremos una función asíncrona para realizar la llamada a la API y así no bloquear la experiencia del usuario. Si el usuario no proporcionó una clave API, se lo notificaremos mediante otra función práctica que hemos creado.
async function getNewHaiku(inspiration) {
let url = API_ENDPOINT;
// check for presence of API_KEY
if (API_KEY == "") {
updateDivContent('haiku', 'Sorry, no poetry without an API key!');
return;
}A continuación, configuramos las opciones de nuestra llamada a la API mediante la función integrada de JavaScript fetch para obtener una respuesta. La documentación de la API especifica que debemos convertirla en una llamada POST y colocar nuestra clave en el encabezado. El cuerpo de la publicación será JSON con nuestro mensaje, el modelo LLM seleccionado, un indicador para indicar si queremos que la respuesta se transmita o no y, finalmente, cuántos tokens crear.
Los haikus son bastante cortos, por lo que elegimos devolver solo 32 tokens, lo que hace que la respuesta sea muy rápida.
let options = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + API_KEY
},
body: JSON.stringify({
prompt: SYSTEM_ROLE + USER_ROLE + inspiration + GUARDRAILS,
model: "Llama-3.1-8B",
stream: false,
max_tokens: 32
}),
};Llamar a la API de la función de chat
Ya estamos listos para realizar nuestra llamada a la API. Seguiremos las buenas prácticas y avisaremos al usuario si el servidor no responde.
// Retrieve an answer
let response = await fetch(url, options);
let responseOK = response && response.ok;
let data ="";
if (responseOK) {
data = await response.json();
} else {
data = "no server response!";
};
Limpiar el resultado
Durante las pruebas, observamos que, en ocasiones, el LLM devolvía datos adicionales al final de la respuesta o incluía retornos de línea en la salida, y en otras no. Para proporcionar una respuesta depurada, se requirieron expresiones regulares y comprobaciones de cadenas para garantizar que solo estuviera listo para su uso un haiku formateado con los saltos de línea correctos. Probablemente exista una forma más elegante de hacerlo, pero esta funciona.
let str = data.choices[0].text;
let regex = /-+/;
str = str.split(regex)[0];
regex = /—+/;
str = str.split(regex)[0];
regex = /(?=[A-Z])(?![a-z])/;
let verses = str.split(regex);
if (verses.length < 5 ) { verses.push(''); }
for (let i = 0; i < verses.length; i++) {
if (typeof verses[i] === undefined ) {
verses[i] = '';
}
}
str = verses[0]+verses[1]+verses[2]+verses[3];
Mostrar el haiku en la página web
Finalmente, llegamos al último paso de este escenario. Llamamos a nuestra función auxiliar para actualizar el contenido de la página con el haiku y permitir que el usuario disfrute de su poema personalizado.
updateDivContent("haiku", str);Si está interesado en ver todo el código dentro de una sola página HTML, eche un vistazo al repositorio de GitHub .
Otras consideraciones
En este ejemplo artificial, codificamos de forma rígida el punto final y la elección del modelo LLM. Podríamos extender el ejemplo para desplegar todos los LLM disponibles y permitir que el usuario elija.
Para evitar tener que codificar la clave API, permitimos que el usuario ingresara la suya. Si creáramos una aplicación basada en esta idea, tendríamos que asegurarnos de que todos los secretos estuvieran ocultos.
Un patrón útil para crear aplicaciones basadas en una plantilla de solicitud predefinida es crear un microservicio simple que actúe como una API de propósito único. El código JavaScript podría ejecutarse dentro de Node.js en un contenedor para lograr precisamente eso. Sin embargo, se puede usar cualquier lenguaje de programación, y en la próxima entrada del blog, exploraremos la creación de un punto final de microservicio que invoque Qualcomm AI Inference Suite en segundo plano.
Pruébelo usted mismo
Usar inferencia en una plataforma escalable como Qualcomm AI Inference Suite es tan sencillo como usar cualquier otra API. ¡Prueba a llamar desde tu propio proyecto web!
¿Te gusta lo que ves? Conéctate con otros desarrolladores, entérate de las últimas noticias y recibe asistencia técnica inmediata uniéndote a nuestro Discord para desarrolladores .
Qualcomm Blog. R. S. Traducido al español
