OpenAI different API capabilities

This project was built to play a little bit with OpenAI API capabilities.

 

Getting Started

1. Clone Project.
2. Install packages by running npm install
3. Generate and copy API key from OpenAI
4. API key can be consumed by .env or by LocalStorage, for LocalStorage method, jump to section 9
5. Create new file and name it .env
6. Copy the API key from section 3 and paste it into .env file as follow: OPENAI_API_KEY="<PASTE_YOUR_API_KEY>"
7. Run the project - npm run dev
8. Open browser http://localhost:3000
9. If you didn't use the .env method, click on Insert OpenAI key on the landing page, paste the API key from section 3, and click save
10. Enjoy

The project should be served on port 3000, in case that port is not available, Next.js will increment port number until available.

 

Home page:

 

Ask AI:

Running on http://localhost:3000/completion

 

Generate Image from Text:

Running on http://localhost:3000/image-creation

 

Generate Variations from Image:

Running on http://localhost:3000/image-variation

 

FAQ:

Question: Why I'm getting the error message - You exceeded your current quota, please check your plan and billing details.

Answer: Link for explanation.