-
Notifications
You must be signed in to change notification settings - Fork 0
/
senior-project.html
88 lines (77 loc) · 6.68 KB
/
senior-project.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./CSS/style.css">
<title>Thunderbioink Portfolio</title>
</head>
<body>
<div class="background-site">
<header>
<!--Page Title Place holder-->
<!-- <img class="floating-img" src="./Images/welcome-gif-astro-transparent.gif" width="3%"> -->
<a id="page-logo" href="./"><h5>Thunderbioink⚡</h5></a>
<!--<a id="page-logo" href="./"><h5>Thunderbioink</h5></a>-->
<!--Navigation Links-->
<a href="./focus-areas.html">Focus-Areas</a>
<!-- <a href="./certifications.html">Certifications</a> -->
<a href="./senior-project.html">Senior Project</a>
<a href="/Images/Alma Camarillo Portfolio Resume.pdf" target="_blank">Resume</a>
<a href="./about.html">About</a>
<a href="./contact.html">Contact</a>
</header>
<div class="container">
<h1>Senior Project 🤖</h1>
<div class="row">
<div class="column-left">
<h5>1. Initial Site Layout</h5>
<p>One element that ended being incorporated in almost all views was the AI enabled portion: it quizzes users on Religious interests and aids into answering religion history, traditions, and other questions. Throughout the development process, keepin true to the basic and simple design helped me remain focused on major functionality requirements prior to presenting the completed product at a World Religion Project Fair and the Final Senior Project Review.</p>
<img class="borders" src="./Images/Web App Layout.png" width="560px">
<p><small><i>Design Layout 1</i></small></p>
<img class="borders" src="./Images/Web App basic structure.png" width="560px">
<p><small><i>Design Layout 2</i></small></p>
<h5>2. AI Enabled Quiz Feature</h5>
<p>Here is the decision map from which I based the logic and choices the AI feature would respond to on the web app. I'll be frank, the logic ended up removing the "Send User to..." prompts.</p>
<img class="borders" src="./Images/AI Flowchart.png" width="560px">
<p>This is how the AI feature ended up looking like; I incorporated a Chat Bot feature powered by SendBird. </p>
<img class="borders" src="./Images/ai-code-js.png" width="560px">
<p><small><i>JavaScript Code provided by SendBird; must be inside .cshtml views.</i></small></p>
<br>
<img class="borders" src="./Images/ai-bot-template.png" width="560px">
<p><small><i>SendBird offers you a space to train and customize your AI Bot.</i></small></p>
<br>
<img class="borders" src="./Images/ai-bot.png" width="560px">
<p><small><i>AI Bot in action while Web App is running.</i></small></p>
<br>
<br>
</div>
<div class="column-right">
<!-- Add the following HTML for the buttons -->
<h5>3. Google Maps API Enabled</h5>
<p>This was the Mapping portion with different features enabled thanks to Google Mapping API's. A model needs to be created on the .cs view of the site to handle the mapping and array that is updating itself each time we add a new religion to the Database; the name I gave it was MapModel. See the structure below.</p>
<img class="borders" src="./Images/csharp-struct-map.png" width="560px">
<p>Here is a before view, when I finally got the JavaScript to display Google Maps, so I took a screenshot to remember that milestone after several failed attempts. While trying to add more functionality to my map, I spent more than three weeks with a broken map. This timeframe helped me get more familiar with Goggle Map Documentation, different JS code blocks that could produce the desired or non-desired outcome.</p>
<img class="borders" src="./Images/init-map.png" width="560px">
<p>A couple weeks prior to final delivery, this was the final view of the Map Page. Basically, if the user clicks on each Religion on the left, it will auto-populate locations in the USA with that Religion name. Otherwise, the user can enter their desired location input into the Search box.</p>
<img class="borders" src="./Images/final-map.png" width="560px">
<h5>4. Faith Finder Demo</h5>
<p>Go ahead and watch the full-demo for FaithFinder. In this video you will observe the multiple API based solutions I was able to implement to enhance the overall User Experience of the site. I also share main take aways of the importance of incorporating existing tools to facilitate the provision of a service to communities or groups in need of digital representation.</p>
<br>
<iframe class="borders" style="border: radius 5px;" width="560" height="315" src="https://www.youtube.com/embed/xmJyJu-xFPk?si=MWf1C_GJjNHoGZ18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h5>5. APIs and AI</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/RyhDBeOK7fI?si=e_Rp9k0ld5d63PhW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h5 >Extra Files</h5>
<a class="fun-link-senior" href="/Images/Faith Finder - Requirements Doc.pdf" target="_blank">6. Narrowed Down Requirements Specifications</a>
<a class="fun-link-senior" href="/Images/CSE 499 Senior Project Proposal.pdf" target="_blank">7. Project Proposal</a>
<!-- <object class="pdf" data="./Images/Faith Finder - Requirements Doc.pdf"></object> -->
</div>
</div>
</div>
<!-- Footer content goes here -->
<footer>
<p>Thunderbioink © 2024</p>
</footer>
</div>
</body>
</html>