Hugging Face se ha consolidado como una de las plataformas líderes para el desarrollo y uso de modelos de inteligencia artificial, especialmente en procesamiento de lenguaje natural (NLP) y visión por computadora.

Integrar estos modelos en un proyecto de Nuxt 3 puede ser una excelente manera de enriquecer tu aplicación web con capacidades avanzadas.

En este artículo, exploraremos cómo hacerlo utilizando el paquete @huggingface/inference.

Requisitos previos

1. Un proyecto de Nuxt 3 configurado.
2. Una cuenta en Hugging Face para obtener tu API Key.

Instalación de dependencias

Primero, instala el paquete oficial de Hugging Face:

npm install @huggingface/inference

Creación de una API Backend para Hugging Face

Para evitar exponer las credenciales en el frontend, es recomendable crear una API.

En tu proyecto, crea un archivo hugging-face.post.ts dentro de la carpeta server/api

// server/api/hugging-face.post.ts

import { H3Event, createError } from "h3";
import { HfInference } from "@huggingface/inference";

const API_KEY = <MY_HUGGING_FACE_API_KEY> || " ";
const hf = new HfInference(API_KEY);

export default defineEventHandler(async (event: H3Event) => {
  try {
    const body = await readBody(event);
    if (!body.prompt) {
      throw createError({ 
        statusCode: 400, 
        message: "Prompt is required."
      });
    };

    const res = await hf.textToImage({
      inputs: body.prompt,
      model: "stabilityai/stable-diffusion-3-medium-diffusers",
      parameters: {
        negative_prompt: "blurry",
      }
    });

    const arrayBuffer = await res.arrayBuffer();
    const base64 = Buffer.from(arrayBuffer).toString("base64");
    const url = `data:image/png;base64,${base64}`;

    return url;
  } catch (error) {
    console.error("Error al consultar Hugging Face:", error);
    throw createError({ 
      statusCode: 500, 
      message: "Request failed. Please try again later."
    });
  }
});

En el frontend, podemos llamar a este endpoint para realizar las consultas al modelo de Hugging Face.

<script setup lang="ts">
  const userPrompt = ref("");
  const response = ref<object | null>(null);

  async function handleImageGeneration() {
    try {
      const data = await $fetch("/api/hugging-face", {
        method: "POST",
        body: {
          prompt: userPrompt.value,
        },
      });

      response.value = data;
    } catch (error) {
      console.error("Error generating image:", error);
    }
  }
</script>

<template>
  <div>
    <h1>Genera una imagen a partir de un texto</h1>
    <textarea v-model="userPrompt" />
    <button @click="handleImageGenaration">Generar imagen</button>
    <img v-if="response" :src="response" alt="Generated Image" />
  </div>
</template>

<style>
  textarea {
    width: 100%;
    min-height: 100px;
    margin-bottom: 10px;
    padding: 1em;
  }

  button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }

  img {
    width: 400px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
</style>

Consideraciones finales

Integrar modelos de Hugging Face en un proyecto de Nuxt 3 abre un mundo de posibilidades para aplicaciones basadas en IA. Desde análisis de texto hasta generación de imágenes, las capacidades son amplias.

Sin embargo, hay que considerar alguna cosas:

• Límites de uso: Algunos modelos pueden requerir permisos específicos o un plan premium en Hugging Face.
• Latencia: Dependiendo del modelo y el servidor, puede haber retrasos en la respuesta.
• Seguridad: Nunca expongas tu clave API en el cliente; utiliza un backend si necesitas mayor seguridad.
• Uso en producción vs. experimentación: Las APIs de Hugging Face están diseñadas tanto para pruebas como para producción. Sin embargo, para entornos de producción, es fundamental evaluar el plan adecuado para tus necesidades, especialmente si requieres alta disponibilidad, bajas latencias y mayor capacidad de solicitudes.