This is my parrot app that I built for fun. Say something and it will reply back.

In this demo we use the front-end of a Nuxt 3 app to upload an audio file to a Nuxt API route.

The API route processes the file with the formidable library to parse the multipart file.

The file is then sent to OpenAI's Whisper API, which is an ASR (Automatic Speech Recognition) API.

There are a few improvements I want to bring to the app. Below are a few of them.

When the user speaks, we want to visualise the audio. We also want the visualisation for when the parrot speaks back.

Here is an article that I have found: A Guide To Audio Visualization With JavaScript And GSAP (Part 1)

• [] parrot icon, including the favicon
• [] move the description out of the way, make it accessible via a button
• [] make it visually appealing with an animated parrot

• [] Make the app installable
• [] Make it open offline
• [] When offline, use the browser's SpeechSynthesis API

You will need to create a .env file and set the OPENAI_KEY key to your own OpenAI key. This implies that you have an account at openai.com. Go to platform.openai.com/account/api-keys to create a new secret key.

Your .env file should look like this:

OPENAI_KEY=sk-dja9sd8jas9d8ajsd9asjda9djasd98sjd98ajd98sajdas9 # not a real key

The following is from the "Nuxt Minimal Starter" guide

Look at the Nuxt 3 documentation to learn more.

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Start the development server on http://localhost:3000

npm run dev

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.