System Architecture

2019/12/17, version 1.17

Document Revision History

Rev. 0.10 2019-10-19 - beta version

Rev. 0.20 2019-10-19 - slightly change order of View, add Controller

Rev. 0.30 2019-10-19 - add image of overall system architecture

Rev. 0.40 2019-10-19 - add updated UI design

Rev. 1.00 2019-10-19 - basically completed

Rev. 1.01 2019-10-19 - slightly change on View

Rev. 1.10 2019-12-17 - View part reflects final commit

Rev. 1.11 2019-12-17 - Update UI photo

Rev. 1.12 2019-12-17 - View slightly modified

Rev. 1.13 2019-12-17 - Update System Architecture Image

Rev. 1.14 2019-12-17 - Update Model Table

Rev. 1.15 2019-12-17 - Add ML Image

Rev. 1.16 2019-12-17 - Add Search Image

Rev. 1.17 2019-12-17 - Update Controller

System Architecture

The overall system architecture of PapersFeed is represented as follows. It consists of three main components: frontend, backend and ML(machine learning) machine. Deployment components like database and servers are included as well. We exploit many external APIs for getting information of papers and used Azure Text Analytics for extracting keywords from abstracts of papers.

Recommendation System

This is an image about the structure of our recommendation system and how it has been developed. ML server gets data of user actions from PapersFeed server once a day through RESTful api. The raw data are converted into ffm format using Doc2Vec model of gensim(for abstracts of papers) and utils of pandas. With these input data, recommender model is trained usign xDeepFM algorithm and returns prediction values between users and papers. The predicted values are sorted and 100 papers with high scores for each user are passed to the backend server of PapersFeed again.

Search System

This is an image about the structure of our search system.

Model

This is the model diagram of PapersFeed. 'Field Type' is based on Django.(EnumField as used in 'django-mysql') Also, we used the 'notifications' app from django-notifications.

View

Overall user interface for view design is as follows.

1. Intro('/')

• The page where a user meets PapersFeed for the first time.
• Simple description for PapersFeed and two buttons, 'sign_up' and 'sign_in'.
• Enter infomation at 'Sign Up' popup to create a new account, then navigates to 'Tutorial' page.
• Enter infomation at 'Sign In' popup to logs in and navigates to the 'Main' page.
• If logged out, redirect to the 'Intro Page' from any page.

2. Tutorial('/tutorial')

• The page for newcomers, briefly shows what can be done with PapersFeed.
• Consist of 5 slide pages, at the end of the page there is 'start' button.
• If a user is a newcomer(may watching this page right after signing up) and clicks 'start' button, navigates to 'Init' page.
• If a user is not a newcomer and clicks 'start' button, navigates to 'Main' page.

3. Init('/init')

• The page for letting newcomers choose popular keywords in PapersFeed. These selected keywords is for recommending papers to the user.
• A user should choose at least 5 keywords to navigate to another page(If a user does not save in any method, he or she can, but there will be not much thing on 'Main' page).
• If a user clicks 'View More' button, more keywords to choose will be appeared.
• Once selecting keywords is done, a user may click 'Confirm' button to navigate to 'Main' page.

4. Main Page('/main')

• A user can see the subscription feed, which contains the activities of other users who he or she follows, or recommended papers based on his or her activities on PapersFeed.

5. Upper Bar

• Always rendered at all pages except popup windows and 'Intro' page.
• If a user clicks the logo of PapersFeed, navigates to 'Main' page.
• If a user enters text in the search box and press the search button(or press the enter button on the keyboard), then navigates to 'Search Result Page'.
• If there is no text in the search box, the search button will be disabled.
• If a user clicks the 'notify_icon', the 'Notification' menu will be expanded.
• If a user clicks the 'profile_icon', the 'My Account' menu will be expanded.

5-1. Notification

• Expanding component rendered from the 'Upper Bar', not rendered at separate page.
• Shows the history of other users' activities related to the currently logged in user.
• If a user clicks one from the list, navigates to the source page of that item.
• A user may mark any items on the list as read and make them unseen.

5-2. My Account

• Expanding component rendered from the 'Upper Bar', not rendered at separate page.
• A user may see his or her nickname and following buttons on 'My Account' menu.
• If a user clicks 'My Profile' button, navigates to the 'Profile Detail' page of current user.
• If a user clicks 'Account Setting' button, navigates to the 'Accoun Setting' page.
• If a user clicks 'Tutorial' button, navigates to the 'Tutorial' page.
• If a user clicks 'Logout' button, the user will be logged out and navigate to the 'Intro Page'.

6. Search Result('/search=[keyword]')

• Shows a list of search results of the papers, collections, and users from each database for the entered string.
• Only one type of the search result list is displayed on the page, and the user can see another list by pressing the tab button.
• A user may navigates to the detail page of a paper or a collection or a user's profile from the item on the search result.
• A user may search for one of the keywords of a paper item on the search result by clicking a button displaying each keyword.
• A user may like papers or collections on the search result.
• A user may add a paper to his or her collections on the search result. If a user clicks ‘Add to Collection’ button which looks like bookmark button, 'Add this Paper to Collections' popup will appear. The user may select one of the collections he or she owns or is a member of them. The user also can type a new collection name on 'New Collection' input box to create a new collection instantly. In any case, if the user clicks 'confirm' button, the paper will be added to the selected collections. The user then can either remains on the page or navigates to 'My Collection' page.

7. Profile Detail(‘/profile_id=[number]’)

• Show information about a user, including his/her followings, followers, user description, collections and reviews.
• If a user clicks ‘follower_list’ link, navigate to 'Follower List Page'.
• If a user clicks ‘following_list’ link, navigate to 'Following List Page'.
• If the user clicks ‘setting’ button, navigate to 'Profile Edit Page'.
• There are tabs which shows user's collections and reviews.
• ‘collections’ tab gets the list of collections created by the owner of Profile Page and shows them. If a user clicks the name of one of collections on the list, navigate to ‘Collection Detail Page’ of the selected collection.
• ‘reviews’ tab gets the list of reviews written by the owner of 'Profile Page' and shows them. If a user clicks the name of one of reviews on the list, navigate to ‘Review Detail Page’ of the selected review.

8. Follower List (‘/profile_id=[number]/followers’)

• Show the follower list of a user.
• If a user clicks the name of one of the other users on the list, navigate to ‘Profile Page’ of the selected user.

9. Following List (‘/profile_id=[number]/followings’)

• Show the following list of a user.
• If a user clicks the name of one of the other users on the list, navigate to ‘Profile Page’ of the selected user.

10. Account Setting('/account_setting')

• A page for letting a user change his or her username, email, description or profile photo.
• If a user clicks 'Apply' button after making any change on his or her profile infomation, the change will be applied.
• If a user does not make any change on his or her profile info, 'Apply' button will be disabled.
• If a user clicks 'Go to Profile' button, navigates to 'Profile Detail' page of his or her own.

11. Side Bar

• Contains 'Main', 'Collection' and 'History' buttons, each are the links to 'Main', 'My Collection' and 'History' page.
• Always rendered at all pages except popup windows and 'Intro' Pages.

12. History (‘/history’)

• Shows the list of papers, collections and reviews user liked.
• There are three tabs, each tab contains each list above.
• A user may navigates to the detail page of each items.

13. My Collections (‘/collections’)

• Show list of collections which a user owns or a user is a member.
• There are ‘all’ tab and ‘shared’ tab, and the ‘all’ tab is selected by default.
• ‘all’ tab shows the list of all collections where the user is the owner or member, and shows them. If the user clicks the name of one of collections on the list, navigate to ‘Collection Detail Page’ of the selected collection.
• ‘shared’ tab shows the list of collections which include the user and have multiple members, and shows them. If the user clicks one of collections on the list, navigate to ‘Collection Detail Page’ of the selected collection.

14. Collection Detail (‘/collection_id=[number]’)

• Show information of the collection and list of papers included in the collection
• There are 'Like' or 'Unlike' button, 'Members' button, ‘Invite’ button, ‘Manage’ button (or 'Leave' button), and specfiication of the collection. Also there are a list of papers included in the collection and a list of replies about the collection.
• If a user clicks either 'Like' or 'Unlike' button, the activity will be recorded on the server.
• If a user clicks 'Members' button, navigates to 'Collection Member' page.
• If a user is a member of current collection, he or she may see 'Invite' button. If the user clicks 'Invite' button, he or she may see the list of who he or she follows. The user can select who to invite to the collection from the list. Otherwise, the user can search users to invite via 'search user' bar. In any case, if the user clicks 'Invite' button, selected users will be invited to the collection.
• If a user clicks ‘Manage’ button, navigates to ‘Manage Collection’ page.
• If a user is a member of this collection and is not the owner of it, he or she may leave the collection by clicking 'Leave' button.
• If a user clicks one of the papers on the list, navigates to ‘Paper Detail’ page of the paper.
• If a user is a member of this collection, he or she can remove any papers from the collection by clicking 'Delete' button

15. Collection Members ('collection_id=[number]/members')

• Shows the list of members of a collection.
• If a user clicks one of the members, navigates to 'Profile Detail' page of selected member.

16. Manage Collection (‘collection_id=[number]/manage’)

• A page for managing the selected collection. Only the owner of the collection can access to this page.
• There are text areas to write a new collection name and description, ‘Update Collection’ button, 'Cancel' button, ‘Manage Members’ button, 'Private Collection' or 'Public collection' button, ‘Transfer Ownership’ button, and ‘Delete Collection’ button.
• If a user clicks ‘Update Collection’ button, the change on the collection name or description will be applied. If there is no change of them, the button will be disabled.
• If a user clicks 'Cancel' button, navigates to 'Collection Detail' page of the collection.
• If a user clicks 'Manage Members' button, the 'Manage members of wiki collection' will appear. In this popup the user can invite new users or kick off some members. The logic of inviting new user is described at above. See '16. Collection Detail'.
• If a user clicks 'Private Collection' or 'Public Collection', the visibility of the collection will be set as user's choice. If a collection is private, only the member of it can access its detail page.
• If a user clicks 'Transfer Ownership' button, 'Transfer ownership to' popup will appear. The user may select one of the member to become a new owner of the collection. Since this action cannot be reverted once done, a popup that warns user before confirming the action will appear.
• If a user clicks 'Delete Collection' button, a popup that warns user before confirming the action will appear. Once user confirms the action, the collection will be deleted forever.

17. Paper Detail (‘/paper_id=[number]’)

• Show paper specification of a paper and reviews on it.
• There are 'url' button, 'like' button (or 'unlike' button), ‘Add to Collection’ button, ‘Create’ button to create a review, and keyword buttons of a paper.
• If a user clicks 'url' button, navigates to the external page of PapersFeed, which may contain the original source or paper described at 'Paper Detail' page.
• The behavior of 'Add to Collection' button is described above. See '6. Search Result'.
• If a user clicks ‘Create’ button, navigate to 'Review Create' page.
• If a user clicks the name of one of the reviews on the list, navigate to 'Review Detail Page' of the selected review.
• If a user clicks one of the keyword button, navigates to 'Search Result' page and shows the search result of the selected keyword.

18. Review Create (‘/paper_id=[number]/create’)

• Create a review on a paper.
• There are the specfiication of related paper, text areas to write the title and content of a review, 'Cancel' button and 'Create' button.
• If a user clicks 'Cancel' button, the text on title input box and content input box will be discarded and navigates to 'Paper Detail' page.
• If a user fills the text areas and clicks 'Create' button, navigates to 'Paper Detail' page and the new review should be added to the review list of the paper.

19. Review Detail (‘/review_id=[number]’)

• Show a review on a paper.
• There are the specfiication of a review such as title and description and etc, ‘like/unlike’ button, ‘edit’ button, ‘delete’ button. There is also a section for replies.
• A user can like or unlike a review by clicking 'like' button or 'unlike' button.
• If the user clicks ‘edit’ button, navigate to ‘Review Edit’ page.
• If the user clicks ‘delete’ button, the review should be deleted and navigate to ‘Paper Detail’ page of the related paper.
• The reply section consist of a text area for a new reply, ‘Add’ button for a new reply, and ‘edit’ button, ‘delete’ and ‘like/unlike’ button for each reply.

20. Review Edit (‘review_id=[number]/edit’)

• Edit selected review.
• There are the specfiication of a related paper, text areas to edit the title and content of a review, 'Cancel' button and 'Create' button.
• If a user clicks 'Cancel' button, the change on title input box and content input box will be discarded and navigates to 'Review Detail' page.
• If a user fills the text areas and clicks 'Edit' button, the change will be applied and navigates to 'Review Detail' page.

Controller

Controller design of PapersFeed is as follows. In some View, we simplified Model and Controller because users can interact(like/unlike, follow/unfollow, etc.) with the card format of a paper, review, collection, or user in various pages. Also as you can see, meta information of a single paper is stored in multiple models. So in many times Paper Model is referred, it actually means not only Paper itself, but also PaperKeyword, PaperAuthor, PaperPublication, Reference, and so on.