-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathabout.html
More file actions
185 lines (180 loc) · 8.19 KB
/
about.html
File metadata and controls
185 lines (180 loc) · 8.19 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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="src/icon.svg" />
<title>Project Mugen | About</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500;600&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="css/about.css" rel="stylesheet" />
</head>
<body onload="start()" onresize="start()">
<script src="js/about.js" defer></script>
<!-- Navbar -->
<header>
<nav class="navbar navbar-expand-sm navbar-light px-3" id="nav">
<div class="container-fluid p-0 py-2">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active " href="about.html">How It Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="piano.html">Piano</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Steps -->
<section class="container p-4 mt-2 bg-white rounded-3">
<div class="row p-4 mb-5 ">
<div class="col-12 col-md-5 my-3">
<h1 class="display-5">How It Works</h1>
</div>
<div class="col-12 col-md-7 my-3">
<p class="lead text-justify">
Interested to know more about the underlying implementation of the project? We answer some of the questions
you might have about the project. For a deeper dive, take a look at our source code on GitHub.
</p>
<a class="btn btn-primary" href="https://github.com/SPAI-Team/Music-Generation">View Source Code</a>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-3 g-4">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">What Happens When You Play Our Piano?</h5>
<p class="card-text">When you begin playing on the piano, we keep track of the notes you've been playing.
This data is represented by a series of numbers that represent information such as the pitch of the note
and the time the note was played.
When the AI starts playing, this data is fed into the model, which is used to continue the sequence of
music.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">How is AI used to play music?</h5>
<p class="card-text">The entire system is powered by a Recurrent Neural Network (RNN). An RNN is just a type
of neural network that can make predictions
based on prior inputs in a sequence provided to it. Hence, when the AI is provided with a sequence of past
notes played, it reads in this information, and outputs a list of probabilities for each note,
representing the what the model thinks should be played next. We then sample a note based on the
probabilities. Typically, the note with the highest probability will be played, but to improve the
creativity of the model, we sometimes pick a less likely note.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">How Was This Project Built?</h5>
<p class="card-text">The front end user interface of the project was built using HTML and CSS, using
Bootstrap 5 as the CSS framework. Tone JS was used to play the sounds made by the piano, and Magenta JS
was used to build the RNN model. The model used has been trained on professional piano performances, from
the Yamaha e-Piano competition.</p>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="px-lg-5 px-md-4 px-sm-3 mx-lg-4 row">
<div
class="
col-lg-7 col-10
offset-1 offset-lg-0
p-4 p-lg-5
border border-3
mt-4
my-3 my-lg-2
"
style="background-color: #eff2f7; border-radius: 25px"
>
<p class="text-justify">
The entire system is powered by a Recurrent Neural Network (RNN). A
neural network is an AI model loosely inspired by how our brains
work, where the neurons in our brain take in signals and produce
responses based on these signals. The neural network is taught by
letting it experience multiple training examples. It then evaluates
its ability to give the correct output. Finally, it learns from its
experience and improves itself.
</p>
</div>
<div
class="
col-lg-7 col-10
offset-1 offset-lg-5
p-4 p-lg-5
border border-3
my-3 my-lg-2
"
style="background-color: #eff2f7; border-radius: 25px"
>
<p class="text-justify">
An RNN is just a type of neural network that can make predictions
based on prior inputs in a sequence provided to it. More
specifically, we trained the RNN to predict the next note in a piano
performance, given the information on the past notes that were
played by the user. So, what happens when you play our piano?
</p>
</div>
<div
class="
col-lg-7 col-10
offset-1 offset-lg-0
p-4 p-lg-5
border border-3
my-3 my-lg-2
"
style="background-color: #eff2f7; border-radius: 25px"
>
<p class="text-justify">
As you play the notes, we record down the notes you play, and feed
it into the model. Once the model is active, it uses the notes
played by the user to generate an output of list of probabilities of
the next note that is to be played. From there, the AI samples a
note from this probability distribution and plays it. It then takes
the note that it just played and feeds it back into the RNN,
generating the next note in the sequence.
</p>
</div>
</div> -->
<!-- <p class="text-center py-4">
Visit our
<a href="https://github.com/SPAI-Team/Music-Generation">GitHub page</a>
to get the full code!
</p>
<div class="text-center" id="gitHubQr">
<figure>
<img src="src/githubQr.png" />
<figcaption>Scan this qr code to visit our github link</figcaption>
</figure>
<figure>
<img src="src/spaiPageQr.png" />
<figcaption>Scan this qr code to visit our spai page</figcaption>
</figure>
</div> -->
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>