Skip to content

discord/avatar-remix-bot

Repository files navigation

Avatar Remix

This project contains code for a Discord bot that will edit friends' profile pictures in fun and sometimes unexpected ways.

avatar remix example

Try it out

Replicate has provided a hosted version of this bot. You can invite the hosted bot to your Discord server, or follow this README to set up and host your own custom version.

How it works

The main functionality of Avatar Remix is provided by instruct-pix2pix, a model based on Stable Diffusion fine-tuned on a large dataset of example prompts generated by GPT-3.

Discord profile pictures are often pretty small, so if necessary it uses Real-ESRGAN to upscale for better results.

This app runs as a Cloudflare Worker and uses the Replicate API to run the above models serverlessly.

request flow

Setup

Install dependencies

This bot runs on Node and its package manager, npm. If you don't already have node and npm set up, following this guide.

Install the bot's dependencies by running:

npm install

Set up external accounts

This bot uses Cloudflare Workers and Replicate. You'll need to:

Create a Discord application

Create a new application on the Discord Developer portal. Give it a name like avatar-remix-bot.

Then, in the "Bot" settings tab of your application, click "Add Bot" (we don't actually need this bot user, but we use its token for convenience...)

See the Getting Started guide on the Discord developer portal for more details.

discord.dev.portal.mp4

NOTE: if you use the code in this project to build or operate an app or bot on Discord, you will need to comply with Discord’s Developer Terms of Service and Policy. Use of this code does not guarantee compliance.

Envars and secrets

Set up envars in wrangler.toml:

  • Rename example.wrangler.toml to wrangler.toml
  • Update DISCORD_APPLICATION_ID and DISCORD_PUBLIC_KEY with values from the application you created in the previous step.
  • Update WORKER_BASE_URL with the URL of your Cloudflare worker. By default, this URL takes the form https://avatar-remix-bot.<your worker username>.workers.dev.

Use wrangler to store secret tokens for your bot by running the following commands:

  • wrangler secret put DISCORD_BOT_TOKEN - obtain this token by clicking "View Token" on the Bot page
  • wrangler secret put REPLICATE_API_TOKEN - obtain this token from your Replicate account settings

If you want to run the app locally, rename example.dev.vars to .dev.vars, and update the variables with the appropriate secrets. ENSURE .dev.vars is in your .gitignore, and do not share these secrets.

KV store and Queues

This bot uses Cloudflare to host some serverless infrastructure.

First, it uses Workers KV in order to track Replicate jobs and match callbacks with the original jobs. Run the following command to create the KV namespace:

wrangler kv:namespace create AVATAR_REMIX_FOLLOWUPS

Take the output and paste it into wrangler.toml, replacing the placeholder binding for AVATAR_REMIX_FOLLOWUPS.

Second, it uses Cloudflare Queues to stay within Replicate rate limits during periods of heavy load (this isn't necessary unless you think a lot of people will use your app):

wrangler queues create avatar-remix-jobs

Note that Cloudflare Queues are in beta! You might have to enable them manually in the Cloudflare dashboard by going to Workers > Queues.

Publish the Cloudflare Worker

It's time to bring your worker online! Run the following:

wrangler publish

If all went according to plan, you should see something like this:

Uploaded avatar-remix-bot (1.16 sec)
Published avatar-remix-bot (0.67 sec)
  https://avatar-remix-bot.<yourname>.workers.dev
  Consumer for avatar-remix-jobs
Current Deployment ID: f5d24e08-a211-4bae-a573-e513b5355910

If you go to https://avatar-remix-bot.<yourname>.workers.dev, you should see the message "greetings". That means your web application is online and ready to talk with Discord :)

Register your Interactions Endpoint URL

On the "General Information" tab of your Application's settings in the developer portal, scroll down and set the "Interactions Endpoint URL" to the URL of your Cloudflare Worker.

The URL was outputted in the previous step, and typically it is of the form https://avatar-remix-bot.<yourname>.workers.dev.

here's where the interaction endpoint url is set

Once you've clicked Save Changes, Discord will test your endpoint and you will get a success message in the dev portal indicating that your changes have been saved.

Register slash commands

This bots uses a /remix slash command, and you must register the slash command before using it for the first time. Register it by hitting the register endpoint with a POST request:

curl -X POST https://avatar-remix-bot.<yourname>.workers.dev/register

The response will just say "Registered commands".

In the future, you'll have to do this any time you've made a change to commands.ts.

Invite it to your server

Your bot is ready to go! Invite it to your server by constructing an invite URL:

https://discord.com/oauth2/authorize?client_id=<your discord application id>&scope=applications.commands+bot

Replace the client_id above with the DISCORD_APPLICATION_ID you recorded earlier.

That's all! Use the /remix command and start remixing to your heart's content.

partially typed remix command

REMINDER: Make sure your bot complies with the Discord Developer Terms of Service and Policy.