forked from JARS-PennApps2023/TheraSpeak
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (148 loc) · 8.78 KB
/
index.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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TheraSpeak</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
.gradient-section {
background: linear-gradient(to bottom, var(--tw-gradient-stops));
}
</style>
</head>
<body class="bg-black text-gray-200 min-h-screen">
<div class="gradient-section bg-gradient-to-b from-purple-900 to-black pb-10">
<!-- Navbar -->
<nav class="mb-10 p-5 rounded-lg flex justify-between items-center p-10">
<!-- Logo -->
<a href="index.html">
<img src="TheraSpeak.png" alt="TheraSpeak Logo" class="h-10 w-auto">
</a>
<!-- Navigation Links -->
<ul class="flex space-x-20">
<li><a href="index.html" class="text-white hover:text-purple-500">Home</a></li>
<li><a href="about.html" class="text-white hover:text-purple-500">About</a></li>
<li><a href="login.html" class="text-white hover:text-purple-500">Login</a></li>
</ul>
</nav>
<!-- Main Content -->
<div class="container mx-auto mt-20 text-center max-w-3xl p-10">
<h1 class="text-6xl font-bold mb-5">Welcome to TheraSpeak</h1>
<p class="text-base mb-5">
TheraSpeak is a cutting-edge platform designed to transcribe and generate prompts from live audio transcriptions of suicide hotline calls. Our mission is to support people with mental health issues by providing hotline workers with empathetic responses.
</p>
<a href="login.html" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-full mb-2 inline-block">Open Playground</a><br>
<button onclick="scrollDown()" class="focus:outline-none mt-2">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="text-white">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</button>
</div>
</div>
<!-- Background Research Section -->
<div class="container mx-auto mt-20 w-full bg-black p-10 shadow-lg">
<h2 class="text-4xl font-bold mb-5 text-center text-white">Background Research</h2>
<div class="flex space-x-10 py-10">
<!-- Left Section: Data and Facts -->
<div class="w-1/2 space-y-4">
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">📉</span>
<p class="text-white">Each year, over 800,000 people die from suicide.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">🚗</span>
<p class="text-white">More people die from suicide than car accidents or homicide and AIDS combined.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">🧠</span>
<p class="text-white">22.8% of U.S. adults experienced mental illness in 2021 with 5.5% of them experiencing severe mental illness.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">🎓</span>
<p class="text-white">In 2023, nearly 20% of high school students report serious thoughts of suicide.</p>
</div>
</div>
<!-- Right Section: YouTube Video -->
<div class="w-1/2">
<iframe width="100%" height="380" src="https://www.youtube.com/embed/z-IR48Mb3W0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg shadow-md mb-4"></iframe>
</div>
</div>
<div class="flex space-x-10 mt-10">
<!-- Left Section: Graph/Chart -->
<div class="w-full flex items-center justify-center space-x-5">
<div>
<img src="matlab2.png" alt="Dashboard" class="rounded-md">
<p class="text-center text-white mt-2">Images were generated on MatLab</p> <!-- Added caption -->
</div>
<div>
<img src="matlab1.png" alt="Text Playground" class="rounded-md">
<p class="text-center text-white mt-2">Images were generated on MatLab</p> <!-- Added caption -->
</div>
</div>
<!-- Right Section: Data and Facts -->
<div class="w-1/2 space-y-4">
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">🔟</span>
<p class="text-white">Suicide is the 10th leading cause of death in the United States and the 2nd leading cause of death for teens and young adults.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">📉</span>
<p class="text-white">Longer wait times for suicide hotlines lead to more deaths.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">⌛</span>
<p class="text-white">Some people had to wait 15 minutes on hold after calling 988, the suicide hotline number.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">😧</span>
<p class="text-white">People ended up abandoning on calls 60% of the time.</p>
</div>
</div>
</div>
</div>
<!-- Our Solution Section -->
<div class="container mx-auto mt-20 w-full bg-black p-10 shadow-lg">
<h2 class="text-4xl font-bold mb-5 text-center text-white">Our Solution</h2>
<div class="flex space-x-10 py-10">
<!-- Left Section: Data and Facts -->
<div class="w-1/2 space-y-4">
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">🔊</span>
<p class="text-white">We generate live audio transcriptions of the hotline calls using Amazon Web Services (AWS) and Assembly AI.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">📞</span>
<p class="text-white">We use Twillo to effectively process the call management backend.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">🤖</span>
<p class="text-white">We used ChatGPT OpenAI API to generate prompts based on the live transcription text.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">📱</span>
<p class="text-white">We used Metaphor's API to generate resources the user can use and send them the resources via Twillo's texting service.</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-md border border-gray-700 flex items-center space-x-4">
<span class="text-purple-400 text-2xl">👍</span>
<p class="text-white">We trained a reinforcement learning model to improve prompt generation using 👍 and 👎 buttons for user feedback.</p>
</div>
</div>
<!-- Right Section: Demo Images -->
<div class="w-1/2 flex flex-col items-center space-y-5"> <!-- Changed to flex-col and added space-y-5 for spacing -->
<div>
<img src="dashboard.png" alt="Dashboard" class="rounded-md"> <!-- Added w-3/4 for consistent width -->
</div>
<div>
<img src="textplayground.png" alt="Text Playground" class="rounded-md">
</div>
</div>
</div>
</div>
<script>
function scrollDown() {
window.scrollBy(0, window.innerHeight);
}
</script>
</body>
</html>