CS373 - IDB presentation (Group 2)

Transcript

1. Neurodex Group 2
2. Goal We aim to address the problem that in today’s world of rapidly expanding AI capabilities, many users are at a loss on which AI tool is best for a certain task.
3. Group 2 3 David Liu Database Design, Frontend Julia Mergel Frontend UI and Accessibility Abha Misaqi API and Backend Integration Matthew Little Database, Full Stack Noah Aguillon DevOps,
4. 4 Tools Used • Node.js • React BootStrap • Flask • Axios • Postman • Selenium • MongoDB • Google Cloud Platform
5. Backend Integration ⬡ MongoDB ⬡ REST API and Flask routing ⬡ Pagination and Sorting/Filtering ⬡ Modular Design with routes.py & models.py 5
6. REST API Integration (Flask + MongoDB) ⬡ Developed RESTful API endpoints using Flask for websites, models, and datasets ⬡ Connected each route to MongoDB collections for data retrieval ⬡ Used query parameters to handle dynamic requests (search, sort, filter) ⬡ Tested each route using Postman for correct query params responses and valid JSON structure ⬡ Returned JSON responses for frontend rendering 6
7. Pagination and Sorting/Filtering Code Snippets 7
8. MongoDB Schema Flexibility Fast Iteration Nested & JSON-Like Data (Hugging Face) Built-in Scalability 8
9. UML Diagram 9
10. Web Scraping 10
11. Model Linking Fuzzy Tag Matching Description Similarity Scoring Relevance Filtering & Thresholding 11
12. Deployment ⬡ GCP ⬡ Front-end deployment ⬡ Back-end deployment ⬡ CORS 12
13. Front End ⬡ Axios: Accessing api endpoints ⬡ .env file to construct the url ⬡ Get one object from the api array ∙ Accessed specific fields to display info from the backend json info ⬡ Shared styling 13
14. Integration Backend -> Frontend ⬡ Pagination and basic filtering ⬡ Helper function to return all possible filters ⬡ Current page number Frontend ⬡ Url linking to individual sites ⬡ Highlighting terms ⬡ Parsing results ⬡ Selection & Swapping 14
15. Improved Searching Searching: We search for a term from every possible field in the json backend. Always displays & highlights location of search term found by: - swapping out tags - adjusting description scope 15 Description 1. Backend sends matches 2. Frontend finds index of match 3. Adds text before and after 4. Uses tags if no description match
16. AI Chatbot 16
17. 17 User input Flask Backend - 3 arrays MongoDB Data User request Open Router LLM API Prompt Flask Front end 1. User enters input 2. Axios post request sent to backend endpoint 3. Flask receives request 4. Backend helper functions create 3 data arrays from MongoDB 5. Flask sends user input & arrays to Open Router LLM API 6. AI sends response 7. Flask sends response to frontend 8. Frontend cleans the response 9. Data pieces found are highlighted and linked
18. Live Demo
19. Self Critique What did we do well? ➔ The traversal of the site is intuitive ➔ Documentation is well thought out and put into practice ➔ Sorting and filtering to fit the users absolute needs. What did we learn? ➔ Deployment was always a new hurdle ➔ How to correctly link the front and back end deployments ➔ Using the .env file properly What can we do better? ➔ While the website is very straightforward and easy to understand, the visuals leave a lot to be desired ➔ Communication at times was difficult, along with understanding how far each person was along on their tasks 19 What puzzles us? ➔ How deployment would’ve been different on AWS
20. ParkPortal.pro Critique What did they do well? ➔ Overall the UI of the website was very well done and professional. ➔ The tags and info of their data were vibrant and easy to digest. ➔ Sorting and filtering of their data made sense and fit the use case of the website. What did we learn from their website? ➔ Considering how imageless our website is, we learned what is necessary to be more welcoming to users. ➔ The sorting and filtering could’ve been implemented in more ways than just lengthy drop down lists. What can they do better? ➔ The drop down list for other pages doesn’t work when the window size decreases. ➔ Implementing a way to sort by average cost could be a future development 20 What puzzles us? ➔ The cards of the theme parks are a consistent size yet the “view details” button changes, why not make it a uniform position within the card?
21. 21 Thanks! Any questions?