An interactive chatbot that provides poetic responses using a finely-tuned ChatGPT model. Developed with TypeScript React, SCSS, and the OpenAI API.
https://poetry-gpt.netlify.app/
https://github.com/cyberforge1/chat-gpt-fine-tuning
- Goals & MVP
- Tech Stack
- Build Steps
- Design Goals
- Project Features
- Additions & Improvements
- Learning Highlights
- Known Issues
- Challenges
The aim was to create a Typescript React frontend application that would imitate the current ChatGPT interface, and make API requests to a finely-tuned ChatGPT 3.5 Turbo Model that has been trained on data generated by Python scripts.
- JSX
- SCSS
- Git
- React
- Typescript
- OpenAI API
- Type a prompt into the input bar and click the submit button to receive a poetic response from the chatbot.
- Clear the chat history by clicking the new chat button in the top left hand corner of the screen.
- The goal for this user interface was to have it resemble the current version of the ChatGPT web application but make aesthetic choices that would make it immediately distinguishable as a different application. This was achieved by creating a white interface and using a playful pastel color palette to distinguish specific features.
- Custom imitation of the ChatGPT user interface
- Utilizing a finely-tuned model to create unique responses
- Animation of API response to closely resemble user experience
- Ability to clear the chat on 'New Chat' button click
- Addition of a dropdown menu that allows selection of various ChatGPT models
- Adding a 'Chat History' section on the left side of the interface
- Creating a set of pre-written prompts for the user to select
- Allowing the user to cancel the animated response at any time
- Learning how to animate API responses to enhance user experience
- Building an interface to directly resemble an existing application
- Selecting TypeScript to build with React for the first time
- Issues with clashing data in the animation function when another request is submitted before the initial request has completed.
An interesting challenge encountered during this project involved suspected grammatical errors in the response from the API. Subsequent phrases were attached directly to previous phrases and with capitalized letters.
After mistakenly trying to correct the grammar of the responses, I looked back at the training data, and realized that limericks are structured this way.
Therefore, to correct this issue, all that was necessary was to break the response onto a new line when the phrase delimiter was encountered.
- Visit my LinkedIn for more details.
- Check out my GitHub for more projects.
- Or send me an email at obj809@gmail.com
Thanks for your interest in this project. Feel free to reach out with any thoughts or questions.
Oliver Jenkins © 2024