tobua / chinese-whisper-ai

Submission for Weekly Challenge #5 of Algorithm Arena

Chinese Whisper AI - Challenge for Algorithm Arena

Browser-encrypted thread that can be shared through the url. Submission for the fifth weekly challenge on Algorithm Arena. The project uses OpenAI API, Vercel Edge Runtime, Bun, React, TypeScript, Rsbuild and Biome.

Description

When the page loads randomly a Text, Voice or Image input is shown. Once the user enters something or uploads a file it can be converted into the next format. Conversion is handled by an Edge function using the OpenAI API. For these conversions most models are used: DALL·E 3, Whisper, GPT-4 Vision and TTS. This way it's possible to infinitely loop around letting the AI suprise you with it's creations. At any step it's possible for the user to download the current result and enter their own input. To make the time between the server-side conversions pass faster a big animated custom loader in SVG is rendered. In their respective forms images can be uploaded or added per drag-and-drop. When access is given to the microphone it's possible to record speech. While full transcription happens on the server using Whisper there is a preview of what's currently spoken if the respective SpeechRecognition API is available in the browser.

Demo

See this 𝕏 Post or try the live version.

4801.mov

4802.mov

Installation

For the server to connect to the OpenAI API it's necessary to add a .env file with an OPENAI_API_KEY and a OPENAI_ORGANIZATION variable.

bun install
bun start # Start and open the application in the browser.
bun server # Start a local server for the Edge function.
bun format # Format files with Biome.
bun lint # Lint files with Biome.
bun run build & bun preview # Production preview.