-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutor.html
More file actions
113 lines (107 loc) · 6.16 KB
/
tutor.html
File metadata and controls
113 lines (107 loc) · 6.16 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin">
<link rel="stylesheet" href="style.css">
<title>Evan Anderson Portfolio</title>
</head>
<body>
<div id="first_parallax" class="parallax" style="height: 10%;">
<!-- Two hamburgers, one is for desktop the other is for mobile -->
<a href="#!">
<img id="hamburger" class="navimage" data-is-open="false" onclick="navOpen(false)" src="menu.png">
</a>
<a href="#!">
<img id="hamburger_mobile" class="navimage_mobile" data-is-open="false" onclick="navOpen(true)" src="menu.png">
</a>
<div class="nav">
<div class="nav_item_container">
<a class="nav_item" href="/">
<img class="nav_item_img" src="homeicon.png">
<p class="nav_item_text">Home</p>
</a>
</div>
<div class="nav_item_container">
<a class="nav_item" href="resume">
<img class="nav_item_img" src="resumeicon.png">
<p class="nav_item_text">Resume</p>
</a>
</div>
<div class="nav_item_container">
<a class="nav_item" href="gaspacs">
<img class="nav_item_img" src="gasiconsmall.png">
<p class="nav_item_text">GASPACS</p>
</a>
</div>
<div class="nav_item_container">
<a class="nav_item" href="dispenser">
<img class="nav_item_img" src="feedericonsmall.png">
<p class="nav_item_text">Fish Food Dispenser</p>
</a>
</div>
<div class="nav_item_container">
<a class="nav_item" href="dashboard">
<img class="nav_item_img" src="dashboardiconsmall.png">
<p class="nav_item_text">SOAR Dashboard</p>
</a>
</div>
<div class="nav_item_container">
<a class="nav_item" href="tutor">
<img class="nav_item_img" src="keyboardicon.png">
<p class="nav_item_text">Typing Trainer</p>
</a>
</div>
<div class="nav_item_container">
<a class="nav_item" href="reclamation">
<img class="nav_item_img" src="keyicon.png">
<p class="nav_item_text">License Reclamation</p>
</a>
</div>
</div>
</div>
<div class="separator">
<div class="row">
<div class="column">
<div class="column_box">
<p class="body_header">AI Typing Trainer</p>
<p class="body_text"> For my CS5890 <i>AI Applications in Education</i> <a href="https://github.com/evanmarlo/AI_typing_trainer"; target=”_blank”>final project</a> I created a typing trainer that makes use of generative AI. This trainer uses ChatGPT to generate new text for the user every time they want to practice typing. It also tracks what keys the user struggles with, and generates text that incorporates those keys.</p>
<br>
<p class="body_header">Purpose</p>
<p class="body_text"> Typing is an essential skill for most people. The purpose of this project is to improve both typing speed and accuracy of the user. The secondary purpose of this project was to evaluate ChatGPT's ability to incorporate certain keys into a paragraph, while keeping that paragraph coherent.
</p></p>
</div>
</div>
<div class="column">
<img class="headshot_desktop" src="gif_tutor.gif" alt="GIF of user typing an AI-generated sentence"></img>
</div>
</div>
</div>
<div class="parallax" style="height: 6.18%;"></div>
<div class="separator">
<div class="row">
<div class="column">
<img style="width: 50%; padding-top: 4em; display: block; margin-left: auto; margin-right: auto;" src="tutor_regular_frequency.png" alt="Chart showing regular frequency of English letters"></img>
<p class="caption" style="text-align: center;">English letter frequencies (Keating, Barry. University of Notre Dame)</p>
<img style="width: 70%; padding-top: 1em; display: block; margin-left: auto; margin-right: auto;" src="tutor_GPT_frequency.png" alt="Chart showing regular frequency of English letters from ChatGPT"></img>
<p class="caption" style="text-align: center;">English letter frequencies generated by ChatGPT</p>
<img style="width: 70%; padding-top: 1em; display: block; margin-left: auto; margin-right: auto;" src="tutor_GPT_z.png" alt="Chart showing frequency of letters from ChatGPT with increased 'Z'"></img>
<p class="caption" style="text-align: center;">English letter frequencies generated by ChatGPT when prompted to include more of the letter "Z"</p>
</div>
<div class="column">
<div class="column_box">
<p class="body_header">Approach</p>
<p class="body_text"> I wrote this project in Python and used Tkinter for the UI. I used GPT 3.5 Turbo for text generation. I spent a total of $0.04 on the OpenAI API throughout developing, testing, and demonstrating my prototype in class (which I found surprisingly cheap).</p>
<br>
<p class="body_header">Evaluation</p>
<p class="body_text"> Anecdotally, ChatGPT did a great job at generating text with noticeable amounts of letters the user struggled with. In order to quantitatively show the letter increase, I found data on regular English letter frequencies. I also charted letter frequencies of regular ChatGPT text, that was (expectedly) identical.</p>
<p class="body_text"> I charted letter frequencies for text after the user struggled with the letter "Z". The text was coherent and the frequency of "Z" increased to 8.8%, or 44 times as many "Z"s as would normally be generated.</p>
<img style="width: 100%; padding-top: 1em; display: block; margin-left: auto; margin-right: auto;" src="tutor_GPT_z_demo.jpg" alt="Example paragraph generated by ChatGPT with lots of 'Z'"></img>
<p class="caption" style="text-align: center;">Example text generated by GPT 3.5-Turbo when asked to include a lot of "Z"s</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>