Inspiration

Our team built Study~Flow because we recognized the difficulty of effectively reading text on a computer. The endless number of virtual distractions are a challenge to maintaining focus on writing, especially when dense academic readings require you to frequently use Google for additional help and explanation. Our website Study~Flow provides users with a simple platform to manage their readings while seamlessly embedding crucial features to bolster their experience. The main features include saving uploaded text files, text summarizations, elaborations, definitions, and answering custom questions.

What it does

Our platform gives students the ability to save and switch between multiple text files in one view. Additionally, our platform provides four important inquiry tools:

  1. Summarization - provides a comprehensive and condensed summary of a highlighted passage.
  2. Elaboration - provides additional information on the topic of a highlighted passage.
  3. Definition - provides the ability to find the definition of any unknown words or phrases.
  4. Custom Inquiry - provides the ability to access Google Search while still on the platform.

How we built it

We built the frontend website using HTML 5, Bootstrap, and JavaScript. The backend server was built using Python Flask and was responsible for communicating with the APIs and running the Google Search queries. In order to implement the user-facing functionality, including summarizing, defining, and elaborating text on the fly, we used JavaScript action listeners to extract the text from the highlighted region. Then, we packaged the relevant text and action type into an HTTP request, which was sent to the single Flask server endpoint. After differentiating the type of action from the incoming request, the Python server delegated to the third-party APIs and Google web scraper as needed. More specifically, the server utilized the summarization API for elaboration and summarization, the web scraper for elaboration and custom queries, and the Free Dictionary API for definitions. The Flask server then cleaned up the text response and returned it to the JavaScript frontend, where it was displayed in a text box on the right margin.

Challenges we ran into

On the frontend, the overarching challenge was leveraging our powerful tools without creating an interruptive environment for the user. Because our mission was to create a platform designed to promote deep concentration, we wanted our custom features to be very accessible, but still subtle. While we planned to display query results as a pop-up, we settled for a less intrusive text box. More technically, we focused on creating reliable and effective communication between our JavaScript frontend and Flask backend, particularly in encoding and decoding the requests and responses in JSON.

On the backend, the biggest challenges were making the web scraper robust and cleaning up the text response from the server components. In order to implement the elaboration and custom queries, the web scraper selected the best-fit article or Google recommended the response. The biggest hurdle here was to parse the text from a generic link, which was eventually implemented by recursively fetching all paragraph elements and filtering out nonsensical outputs.

Accomplishments that we're proud of

Overall, our team was proud of implementing a website that lived up to our vision. In particular, the design of the website was tweaked to produce a user-friendly layout, and we were able to implement the key website functionality in a non-intrusive manner. We ended up implementing all of the features that we initially set out to provide and more.

What we learned

From a technical standpoint, our team gained considerable experience working with Bootstrap and Flask, with which we lacked familiarity at the beginning of the project. We were quick to realize the central role of team communication in a project with multiple interconnected components. Most importantly, we learned how much we could bring an idea to life in a short weekend.

What's next for Study~Flow

There are a number of interesting features and improvements that could be added to the Study~Flow platform. A few examples of features we considered adding were the ability to save files between different sessions and the ability to store custom notes in a widget. Additionally, the back-end for the elaboration and custom inquiry features could be improved to better handle nonsensical inputs and inconsistent search results.

Built With

Share this project:

Updates