Turn yourself into a Superhero using AI

Turn yourself into a Superhero using AI

Trigger: eventTrigger

Build a web application that allows users to generate AI images of themselves based on the prompt provided.

Framework:

Next.js

APIs used:

Replicate

Resend

Repository:

/avatar-generator

Categories:

AI

Overview

A web application that allows users to generate AI images of themselves based on the prompt provided.

Features

  • Seamlessly uploading images using Next.js, (hosted on Vercel)
  • Generating AI images using our Replicate integration.
  • Sending email using our Resend integration.
  • Using React hooks to show the live status of the Job in the UI

Preview

Demo video of the Avatar Generator app

How Trigger.dev is used in this project:

Job 1: Generating the image and swapping the face with Replicate

Replicate is a web platform that allows users to run models at scale in the cloud.

This job generates and swaps the faces using AI models on Replicate.


import { z } from "zod";
client.defineJob({
id: "generate-avatar",
name: "Generate Avatar",
//👇🏻 integrates Replicate
integrations: { replicate },
version: "0.0.1",
trigger: eventTrigger({
name: "generate.avatar",
schema: z.object({
image: z.string(),
email: z.string(),
gender: z.string(),
userPrompt: z.string().nullable(),
}),
}),
run: async (payload, io, ctx) => {
const { email, image, gender, userPrompt } = payload;
await io.logger.info("Avatar generation started!", { image });
const imageGenerated = await io.replicate.run("create-model", {
identifier: process.env.STABILITY_AI_URI,
input: {
prompt: `${
userPrompt
? userPrompt
: `A professional ${gender} portrait suitable for a social media avatar. Please ensure the image is appropriate for all audiences.`
}`,
},
});
await io.logger.info(JSON.stringify(imageGenerated));
},
});

The code snippet above gets the data URI for the AI-generated and user's image and sends both images to the AI model, which returns the URL of the swapped image.

Job 2: Send the image to the user with Resend

Resend is an email API that enables you to send texts, attachments, and email templates easily.

This job sends the completed images to the user via email using Resend.


client.defineJob({
id: "generate-avatar",
name: "Generate Avatar",
// ---👇🏻 integrates Resend ---
integrations: { resend },
version: "0.0.1",
trigger: eventTrigger({
name: "generate.avatar",
schema: z.object({
image: z.object({ filepath: z.string() }),
email: z.string(),
gender: z.string(),
userPrompt: z.string().nullable(),
}),
}),
run: async (payload, io, ctx) => {
const { email, image, gender, userPrompt } = payload;
//👇🏻 -- After swapping the images, add the code snipped below --
await io.logger.info("Swapped image: ", { swappedImage });
//👇🏻 -- Sends the swapped image to the user--
await io.resend.sendEmail("send-email", {
to: [email],
subject: "Your avatar is ready! 🌟🤩",
text: `Hi! \n View and download your avatar here - ${swappedImage.output}`,
});
await io.logger.info(
"✨ Congratulations, the image has been delivered! ✨"
);
},
});

Learn more

For a full overview of how to make this project yourself, check out our blog post.