# LEFTOVERS TL;DR
### Team:
Qilman Beytullazada
Jihoon Lee
Taekyun Ha

**Project Summary** (maximum three sentences):

Understanding long and difficult academic papers is **hard because readers often lose context while reading**. We provide **active interaction** and **visual aids** to help maintain the reading context. The active interaction part helps users **continuously check on their understanding** of the paper which helps maintain reading context.

**Instruction:**

Our app has 2 areas: **paper area** and **info area**. Paper area is where the main text is displayed. Context of reading is indicated by **pointer** on the top left. The argument for pointer location was explained at pitch.

First notable feature is the **summarization**. A summary of current section is provided on the info area. Summary is provided SciBERT and DistilBart. If you are not satisfied with summary provided by current model, you can change the model.
<p float="center">
<img src="https://i.imgur.com/2B687Rm.png" style="width:300px"/>
</p>

You can decide on the desired **length** of the summary. Move the slide bar to obatin desired length. You can also select **range**. Push on the **(+)** buttion in info area You can adjust the summarization range in units of sections. The button currently supports only summarization. More features will be added.
<img src=https://i.imgur.com/BY0DaXx.png
style="width:300px" />
<img src=https://i.imgur.com/u6cFkEL.png
style="width:300px"/>

Also, if you find the summary too difficult to understand, you can **edit summary** with **provided** **synonyms**. Synonym is currently hard-coded only for "Related Work" section.
<img src="https://i.imgur.com/rvGV96x.png" style="width:300px"/>
<img src="https://i.imgur.com/f8Q6WxI.png" style="width:300px"/>

**IMPORTANT!** Due to a bug in the system, some specific measures need to be followed to test this feature.
1. You must refresh the page.
2. Set summary length bar to left- most.
3. Then scroll down to "Related Works" section.
4. Now you can click on the summary and edit it.

The summary also shows "Design consideration" instead of "Related works" but it should be ignored for now.

**URL of your prototype:**
URL: https://toolongdidread.netlify.app/

**URL of your Git repository:**
URL: https://github.com/L2zz/tldr

**Libraries and frameworks:**
Frontend: Popper.js, RE:DOM, Bootstrap
AI models: SciBERT, DistilBart

**Individual Reflections:**

Jihoon Lee(20204500)
- I participated in AI part of the system. First I prepare data we use, I label text content and images in paper([ProtoAI](https://dl.acm.org/doi/abs/10.1145/3397481.3450640), [SEML](https://www.microsoft.com/en-us/research/uploads/prod/2019/03/amershi-icse-2019_Software_Engineering_for_Machine_Learning.pdf), [ImageDesc](https://www.microsoft.com/en-us/research/uploads/prod/2020/01/imagedesc_chi2020.pdf)) per paragraph. I implement 3 AI features which are 1)get extractive summarization([SciBert](https://github.com/allenai/scibert)), 2)get abstractive summarization([DistilBart](https://huggingface.co/sshleifer/distilbart-cnn-12-6)), 3) and provide paraphrasing(get synonyms from wordnet). And our team plan to use naive data to prototype, so I generate mock data for it. Except for AI part, I designed overall system, and manage repository of our project.
- First there are too many models can be used. It may sound strange, but it was rather difficult to investigate because there were so many candidates and it was difficult to grasp the feasibility of the models. And even in evaluation, evaluating whether the model is suitable for our system was difficult because it was different from evaluation of the model itself. In addition, we had to show that our model worked properly through prototypes, so I had worries about selecting papers to use. Finally, since we had to create a system that interacts with humans, I agonized a lot about whether the function would actually help users. In implementing summrization feature, I consider a lot about length of the result. And I tried to reduce the candidate group when I'm implementing the paraphrasing.
- I learned Hugging Face which is the AI community that provides diverse AI models, demos and APIs. During working on prototype, I could test many models in there and apply them to our system easily. In particular, the model cards whic we learned in class are provided by the site have made it sufficient to use even with insufficient knowledge of the model.

Qilman Beytullazada (20170751)
- I contributed to the frontend side of the project, implementing basically all of the current features. The features include tracking paragraphs and displaying their summaries on the top-right corner, section-range summarization, dynamic editing of the summary and general layout. Also, the speed of development of the frontend side was decisive factor for defining the structure of data that Jihoon was going to provide. Therefore, I also designed the model for storing our data throughout the process. After completion I deployed the project.
- The difficulties that I faced was related to the fact that I decided to use vanilla javascript for implementation of the project. At the same time card-like structure on the right side seem to be implemented better with React, however I estimated that tracking the scroll would be more difficult to implement with react. During implementation of the scroll tracking and paragraph tracing feature I had to know the height of every section, however it is not so easy, as the number of paragraphs might change depending on the research paper. So we needed to dynamically find the given heights. Therefore, I researched and utilized getBoundClientRect() function for that reason, which solved my problem. It is located in DOM API. There wore some difficulties with fixing the right side of the layout with CSS. Also it was hard to implement the dynamic change of words in the text using selectbox. The difficulty arised from the fact that each word, or punctuation symbol were separate elements, and I had to provide a dropdown to select synonims. The data structure crashed a bit, but hope to fix it during the last stage. For now, it is almost as hard-coded.
- During working in this project I learnt utilizing Popper.js and RE:DOM library. None of the features implemented I have implemented before, so maybe that can also be considered as a skill. Also I was having frequent contacting with my teammate, and even though in the beginning it was hard to communicate, we managed to adapt and get each other quicker closer to the end of implementation.

Taekyun Ha(20160683)
- I participated on layout-smoothing part of the front-end. My job was to implement ui design correctly with HTML and CSS. I had to make sure all the components stayed in place.
- This was quite difficult since adding a component or changing some attributes inside componenets often put other things out of place. I didn't have much experience in web programming, so I had to spend a lot of time on MDN web docs, watching tutorials and googling to figure things out. I also got some help from my more experienced teammates.
- I learned the basics of web programming. Also web programming has bugs not quite like the bugs I can find in an algorithms or systems course assignments. These are hard to detect since HTML doesn't generate error messages. So I had to utilize extension like 'prettier' to not make mistakes in the first place.