Skip to content

Detailed Designs

oneillm71 edited this page Sep 30, 2019 · 9 revisions

General

The designs were created using Figma. The spacing and dimensions were done through the wireframing tool. Each of the pages of the web app will be sized as 1440 * 1024 pixels. The browser extension will be 300 * 400 pixels.

Login

The login screen is the main page users will get to when searching our website. Users can do several things here: login, create an account, forgot password or continue as a guest. When "Forgot Password" is clicked on the Login Screen, an overlay will show up asking for the users email. A link will be sent so the user can create a new password. When create an account is pressed, an overlay will show up asking for a valid email, password, and confirm password. Continue as guest, will move the user to the home page. Once the User has successfully logged in, they will be redirected to the homepage.

Home

The homepage is where users can upload a file from there computer, search for an article via web url, or drag the file from a file explorer of some type into the window. The document will appear in the center of the screen as is once the file is uploaded. Before the user clicks the "Analyze Document" button at the bottom of the screen, the user can choose the parameters that they want active when they scan the document. The "Term frequency-Inverse document frequency" button will show an overlay that will allow the user to select whether they want the output to completely print to the file and the stop words that the user does not care to see in the analysis. The "Sentiment Analysis" button will show an overlay that will allow the user to input the Train vs. Test ratio, the Number of Topics, How many topics they want printed, whether they want the full output to print to the file and the stop words. The "Latent Direchlet Allocation" button will show a overlay that will allow the user to input the Train vs. Test ratio, whether they want the full output to print to the file and the stop words. The "Create Project" button that shows an overlay to make the file into a project and allow the user to name the project. The "View Files" button will show an overlay of the files that are in the current project. The sidebar on the page allows the user to traverse through the pages of the web application. The "Home" button brings the user to the home page. The "Recently Used" button brings the user to the recently used page. The "Resources" button will bring the user to the resources page. The "About" button will take the user to the about page. After the text is analyzed when the "Analyze Document" button is pressed, the final output screen will appear (with the analyzed text and corresponding statistics).

Output

The final output screen is very similar to the homepage, however, it shows the analyzed text and will show the user the statistics of the parameters they had input on the home page. Users will see the analysis as an overlay.The "Create Project" button shows an overlay to make the file into a project and allow the user to name the project when it is clicked. The "View Files" button will show an overlay of the files that are in the current project. The sidebar on the page allows the user to traverse through the pages of the web application. The "Home" button brings the user to the home page. The "Recently Used" button brings the user to the recently used page. The "Resources" button will bring the user to the resources page. The "About" button will take the user to the about page.

Recently Used

The recently used screen is where users who have an account, can look at previous files and projects they have analyzed. Users can also group files into projects and compare the files in a project here. When the user right-clicks on a file/project, they can choose whether they want to delete or rename the file/project. The "Create New Project" button will show an overlay to create a new project folder that the user will name for files to be put into. The sidebar on the page allows the user to traverse through the pages of the web application. The "Home" button brings the user to the home page. The "Recently Used" button brings the user to the recently used page. The "Resources" button will bring the user to the resources page. The "About" button will take the user to the about page.

Resources

The resources page is where the user can find links to the Algorithms and Libraries that were used. These links will be available as hyperlinks. The sidebar on the page allows the user to traverse through the pages of the web application. The "Home" button brings the user to the home page. The "Recently Used" button brings the user to the recently used page. The "Resources" button will bring the user to the resources page. The "About" button will take the user to the about page.

About

The about page is where the project will be explained and credit will be given. The sidebar on the page allows the user to traverse through the pages of the web application. The "Home" button brings the user to the home page. The "Recently Used" button brings the user to the recently used page. The "Resources" button will bring the user to the resources page. The "About" button will take the user to the about page.

Browser Extension

On the browser extension, the user can go to the login page by clicking the "Login" button at the bottom of the extension. The user can be sent to the home page if they click the "Home" button at the bottom of the extension. If the user clicks the "TF-IDF" button, the user will be able to input the stop words that they do not want and will receive information about the most frequent words. If the user clicks the "Sentiment Analysis" button, the user will be able to input the Train vs. Test ratio as well as the stop words; this will highlight words as "positive" being green, "neutral" being yellow, and "negative" being red.

(https://www.figma.com/file/lhhoKl3s1yO16A2hKZgLwt/Text-Penguin?node-id=14%3A14)