francesco-sch / prompt-slam

Battle each other in an amazing prompt slam using the power of DALL-E.

The Prompt Slam Interface

Battle each other in an amazing prompt slam using the power of DALL-E.

A Prompt Slam (also known as a prompt battle) is an event format invented by Florian A. Schmidt and Sebastian Schmieg with design students from the HTW Dresden.

During a Prompt Slam people compete against each other using text-to-image AI models. The audience then chooses one of the contestants as a winner. For an independent Prompt Slam event series, hosted at HfK Bremen, this interface was developed.

You can read more about the original Prompt Slam here.

📝 Colophon

• Fonts in use:
  • Redaction by Jeremy Mickel
  • Helvetica by Max Miedinger and Eduard Hoffmann
• Technology:
  • Built with SvelteKit
  • Made beautiful with Tailwind CSS
  • Complemented with carefully crafted icons from Tabler Icons
  • Uses the Open AI API to talk to DALL·E 2

🎲 How to play

Gamemode: One vs. One

In this gamemode two contestants play against each other simultaneously. In the beginning they will both get an instruction on what they need to generate. They then have one minutes to simultaneously create a prompt. after that one minute is over, they both click 'Generate' to generate an image.

The crowd then decides which of the contestant has generated the better image and that constestant goes to the next round.

Other Gamemodes

Other gamemodes are currently developed and will be added to this repo in the future.

💻 Use this interface

To use this interface you only need API access to the OpenAI API.

Replace YOUR_OPENAI_API_KEY in the .env.example file with your OpenAI API key. Then rename the .env.example to .env.

You can then either host the interface locally or deploy it to the hosting provider of your choice.

🚧 Development

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

🏗️ Build for production

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

To start the production build use:

node build/index.js

This starts the interface as a node.js app.

🐳 Deploy with Docker

Using the Dockerfile or Docker Compose file in this repository, you can also run or deploy the app as a Docker container.

Make sure to add an OpenAPI Key to the .env file and adjust the ORIGIN variable before running the container.

Run with Docker Compose

To start the container with docker compose just run:

docker compose up -d

This will automatically build the image and start the container.

To stop the container you can run:

docker compose down

If you have made changes to the .env file you may want to rebuild the container:

docker compose up -d --build

Run with Dockerfile

First you need to build the image with the following command:

docker build . -t prompt-slam

Then start the created Docker image as a container.

docker run -d -p 3000:3000 prompt-slam

prompt-slam's Issues

Add a download button to the ResultComponent

The download button should appear somewhere in the corner of the image, when you hover over it.

Error 400

Just trying your code, I get this error:

Error: Request failed with status code 400 at createError (/Users/kingbbq/src/prompt-battle/node_modules/axios/lib/core/createError.js:16:15) at settle (/Users/kingbbq/src/prompt-battle/node_modules/axios/lib/core/settle.js:17:12) at IncomingMessage.handleStreamEnd (/Users/kingbbq/src/prompt-battle/node_modules/axios/lib/adapters/http.js:322:11) at IncomingMessage.emit (node:events:526:35) at endReadableNT (node:internal/streams/readable:1376:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { config: { transitional: { silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false }, adapter: [Function: httpAdapter], transformRequest: [ [Function: transformRequest] ], transformResponse: [ [Function: transformResponse] ], timeout: 0, xsrfCookieName: 'XSRF-TOKEN', xsrfHeaderName: 'X-XSRF-TOKEN', maxContentLength: -1, maxBodyLength: -1, validateStatus: [Function: validateStatus], headers: { Accept: 'application/json, text/plain, */*', 'Content-Type': 'application/json', 'User-Agent': 'OpenAI/NodeJS/3.3.0',

API-Key is set, credits for DALL-E are there...
It seems to run otherwise, just the image creation seems wrong.

Control the size of the ResultComponent better

Add favicon an others

Add Icons and images for:

• Favicon
• Apple Icon
• Open Graph Protocol
• etc.

In the end, the website should be more "shareable" on social media etc.

Add second game mode

A second game mode was discussed.

Instead of generating only one time, you can prompt a couple of times to fine tune your prompt.
After a certain amount of time and fine-tuning your prompt, you have to generate your final image.

Smooth out transition animation between pixelated and regular font

Make download button actually download the image

Currently, the download button is not directly downloading the image. It just redirects to the image source on the OpenAI server.
There are some CORS incompatibilities that are causing this issue.

Ideally, the click on the button would immediately trigger the download on the local file system.

Choose better colors

Click on logo should link back to the start page

Update README

Update the README.md

• Add an explanation what a prompt battle is
• mention the inventors
• explain how you can host your own version of this interface to host your own prompt battle
  • only thing needed is an api key to OpenAI API.

Deploy it to host

Compute color of UI components better depending on theme and background color

Currently this is needed:

<div 
	class:bg-prompt-orange={$theme === 'orange' && $colorizedBackground === false}
	class:bg-prompt-blue={$theme === 'blue' && $colorizedBackground === false}
	class:bg-slate-900={$colorizedBackground === true}
	class:text-white={$colorizedBackground === true}
>

</div>

How could we simplify the computation of the color?