Skip to content

TooLong-DidntRead/tldr_fe

Repository files navigation

TOO LONG : DIDNT README

Abstract:

Everytime you sign up for a new streaming service, download an app on your phone, or even use a search engine you are implicitly or explicitly agreeing to their Terms of Service(ToS). These terms are often long, full of legal jargon, and intentionally hard to understand. It would take hours at a time to truly read through these legally-binding terms, the Guardian estimates it would take the average American about 250 hours a year. The TL:DR application aims to relieve the burden on the user by offering a platform to enter the terms and conditions and get a much shorter, easy-to-browse summary of those terms analyzed and generated by the Open AI's ChatGPT large language model. You can include an area of concern with the ToS that you'd like your analysis to focus on.

Our backend team utilized Django and prompt engineering to process the data inputs, you can view that repo here. On the front end we focused on guiding the user through a clean and supportive UX with robust error handling and UI elements, like color-coded results, that make the viewing process as stress-free and easy as possible. We hope you enjoy our demo!

Contributors:

Installation Instructions:

  1. Fork and clone this repo.
  2. Copy the SSH key from the green "Code" button.
  3. In your terminal, use the command git clone [email protected]:[https://github.com/TooLong-DidntRead/tldr_fe].
  4. Run npm install.
  5. Do NOT run npm audit fix --force when prompted.
  6. Open the repo in your text editor to make any changes or inspect code.
  7. Run npm start in your terminal.
  8. Copy and paste the generated localServer address that your terminal provides into your browser address bar.

Preview of App:

Technologies Used:

  • React
  • Typescript
  • Router
  • Cypress
  • CI/CD (Github Actions)
  • Lighthouse

Future Feature Ideas:

  • Comparing Two ToS's
  • Highlighting the sections of the ToS identified by ChatGPT in the full document so the user could see it in context.

Wins and Challenges

Wins

  • We developed this project using Typescript for the first time. At first, reading the TS errors and using a linter during the very beginning stages of a project took some getting used to (unused vars anyone?). I am very pleased with how quickly we got used to TS and I can absolutely see the advantages of making Javascript a more strongly typed language. I think we avoided quite a few errors in the proccess.

Challenges

  • It can take ChatGPT anywhere from a few seconds to a few minutes to generate a response, especially if the user chooses all six areas of focus. We knew the backend had some restrictions on the number of characters they could recieve from the API which was solved by making multiple calls to ChatGPT and compiling the data before sending it back to us. We considered that users nowadays have a fairly low tolerance for long waiting times and implemented a loading screen to keep the user up to date with the progress. We iterated on this view as well, realizing that a static spinner can be just a frustrating as no input.