Hugging Face has established itself as one of the leading platforms for developing and using artificial intelligence models, especially in natural language processing (NLP) and computer vision.
Integrating these models into a Nuxt 3 project can be an excellent way to enrich your web application with advanced capabilities.
In this article, we will explore how to do it using the @huggingface/inference package.
- A configured Nuxt 3 project.
- A Hugging Face account to obtain your API key.
First, install the official Hugging Face package:
npm install @huggingface/inference
To avoid exposing credentials on the frontend, creating an API is recommended.
In your project, create a file named hugging-face.post.ts inside the server/api folder.
// 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 querying Hugging Face:", error);
throw createError({
statusCode: 500,
message: "Request failed. Please try again later."
});
}
});
On the frontend, we can call this endpoint to send requests to the Hugging Face model.
<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>Generate an image from text</h1>
<textarea v-model="userPrompt" />
<button @click="handleImageGenaration">Generate image</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>
Integrating Hugging Face models into a Nuxt 3 project opens up a world of possibilities for AI-based applications. From text analysis to image generation, the capabilities are broad.
However, there are a few things to keep in mind:
- Usage limits: Some models may require specific permissions or a premium Hugging Face plan.
- Latency: Depending on the model and the server, there may be response delays.
- Security: Never expose your API key on the client; use a backend if you need stronger security.
- Production vs. experimentation use: Hugging Face APIs are designed for both testing and production. However, for production environments, it is essential to evaluate the right plan for your needs, especially if you require high availability, low latency, and greater request capacity.
