Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neeraj1bh/openai-playground
OpenAI playground clone
https://github.com/neeraj1bh/openai-playground
chatgpt chatgpt-api gpt gpt-3 gpt-4 next nextjs openai tailwindcss
Last synced: about 4 hours ago
JSON representation
OpenAI playground clone
- Host: GitHub
- URL: https://github.com/neeraj1bh/openai-playground
- Owner: neeraj1bh
- Created: 2023-12-09T03:22:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-18T14:34:46.000Z (about 1 year ago)
- Last Synced: 2024-04-23T00:10:03.746Z (10 months ago)
- Topics: chatgpt, chatgpt-api, gpt, gpt-3, gpt-4, next, nextjs, openai, tailwindcss
- Language: TypeScript
- Homepage: https://openai.nb9t7.com/
- Size: 193 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# OpenAI Playground
### Live Demo
[Click here to see it live](https://openai.nb9t7.com/)
## Installation and usage
```bash
git clone https://github.com/neeraj1bh/openai-playground
cd openai-playground
yarn
yarn dev
```
```
Add your OpenAI API token while using
```
## Features
- Users can generate completions using the model of their choice.
- Tracking token usage for all models individually, so user can track their cost of usage.
- Ability to closely control the variables used for completion.
- Export your messages sent during the session as a JSON.
- Ability to save and search through user presets.
## Choices and Reasons
- Data export because all good services should have a data export, just in case you want to use that data elsewhere or use another service 🥲
- I chose to show token usage cost because it was something I found myself looking at often when trying to call the API or see remaining credits. Also, this seems like an app that would have more analytics down the line.
- I created a dark mode because it's always better to have that choice than not.
- I added tooltips for all the config settings so that a new user has something to go on when they are working with models for the first time.
- The saving and searching of presets was done so that you can later use a setting that gave you good results.
- I stored data locally to save the presets and usage until the time I add login and can store it in a DB.
## Future improvements
- User login.
- Tracking token usage per session.
- Website tour for onboarding users.
- Advanced search for preset.
## External Libraries and Resources
- [OpenAI API](https://platform.openai.com/docs/api-reference)
- [TailwindCSS](https://www.npmjs.com/package/tailwindcss)
- [ChartJS](https://www.chartjs.org/)
- [Next.js](https://github.com/vercel/next.js/)