Inspiration
As students, we all come across concepts that we get confused by. Whether it be due to a terribly worded passage in a textbook or because of a boring lecture where we can't stay awake due to pulling an all nighter for a hackathon, sometimes our brains can't make sense of what it is we are learning about. Since the introduction of ChatGPT, I always find myself asking the model to enhance my understanding of whatever I come across that I find confusing. When it comes to lectures, I find myself doing so even more than usual, even for some of my code-based classes. In addition, I'm always taking notes on a notebook or on my iPad, or sometimes even on a Word document. Since there are many products that are introducing Gen AI and GPT into their processes, I got the bright idea to incorporate Gen AI into my notes to enhance my understanding of the concepts that allude me, or to clarify the concepts that I already know. In addition, I would also like to have a list of handy resources ready in case I want to do a bit more research into such concepts.
What it does
As a notes application, the primary usage of this application is to take notes. Users can create a notes page, input text into the embedded tinyMCE text editor and save their notes as they need them. While taking notes, if they type a word or phrase for which they do not fully understand, they can highlight the word/phrase and click on the "Search" button, which will give a ChatGPT-3.5 generated description along with a list of links to websites and YouTube videos to enhance their understanding of the concept they are unsure of.
How we built it
This application is developed in React for the frontend and Python/Flask for the backend. Database used is MySQL. APIs used are OpenAI's API for the ChatGPT generated description and Google's Custom Search API along with Google's YouTube API for the list of website links and YouTube videos. In addition, since this is a web based notes app that utilizes an embedded text editor to jot down notes, I utilized tinyMCE, which also qualifies the project for the Best Use of TinyMCE award through MLH's Prizes at Hack@CEWIT.
Challenges we ran into
One particular challenge I ran into is that I haven't touched React in over 2 years. As a data science student, I am more involved in conducting data analysis and developing machine learning models in Python. As a result, my React skills have been wack/deteriorating, and I needed to brush up on some of the concepts I forgot about.
On the same note, another challenge I ran into is that I realized how much I despise UX/UI. In my undergrad years at NYU, I enjoyed designing posters as a marketing coordinator for a number of clubs I joined. However, while designing might be fun, translating it into code (especially using a language I haven't touched in a while) is a frustrating task. As a result, I gave up on using customized CSS and used Bootstrap for some basic styling, but the layout of the application could definitely use some improvements (RIP my dream of winning Best Visual Design :/ )
A third challenge was trying to complete everything on time. As a solo developer, I underestimated how much work I would be doing and took my leisurely time attending every workshop available. While I gained a lot of knowledge through these workshops and would still do it all over again, at the very least I should have had a partner to split the workload or develop a more barebones application. However, it might have still been fruitful to do all that work in a short amount of time, as I do plan on refining this idea further (check what's next down below!) and maybe even making this into a startup idea O.O
Accomplishments that we're proud of
I haven't touched React in 2 years, so relearning it in a short amount of time and developing an application was pretty fun. In addition, incorporating ChatGPT and Google APIs was pretty cool (I always enjoy seeing the results of a successful API call after time consuming efforts and debugging). Also, tinyMCE was a bit challenging at first since I have never played around with text editors, so creating a customizable button with functionality for the editor was a small but fulfilling experience.
What we learned
One thing I learned is that I am definitely NOT a front end developer. I don't like translating design to code, and don't see myself doing this as part of my career in the future. I'd much rather stick to developing REST APIs or throwing data into a multi linear regression or neural network model.
What's next for Highlighter
While websites are nice, the potential for this concept lies in mobile app development - more specifically in tablets like the iPad. The biggest names in Notes apps include Notability and Good Notes, which are iPad applications designed to utilize the Apple Pen for handwritten notes. It would be useful for students who are writing their notes on these platforms to highlight the handwritten word/phrase they are unsure of and query the search for the GPT description and links.
Along with utilizing iOS development to further enhance this concept, it would be better to utilize open source GPT models or train in-house models rather than using OpenAI's ChatGPT. Due to the interests of time and because of the fact that my M3 MacBook Pro cannot support a 1B+ parameters neural network, having a model hosted locally for the purposes of this hackathon would not be feasible.
Log in or sign up for Devpost to join the conversation.