-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
126 lines (122 loc) · 4.41 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
<!DOCTYPE html>
<html>
<head>
<title>Speaker Diarization by Group 9</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>
h1 {
text-align: center;
font-size: xxx-large;
font-weight: bold;
color: orange;
position: relative;
background-color: white;
background-size: cover;
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
.neon-rectangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #271E17;
box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff, 0 0 160px #C3B976, 0 0 200px #C3B976, 0 0 300px #C3B976;
}
.neon-rectangle {
position: relative;
color: #fff;
}
p1 {
text-align: center;
font-size: medium;
font-weight: 200;
color: cadetblue;
position: fixed;
bottom: 10%;
left: 20%;
word-spacing: 120px;
margin-bottom: 12%;
}
form {
margin-top: 8%;
margin-left: 10%;
color: red;
font-size: medium;
}
#floating-gif {
position: absolute;
height: 261px;
width: 700px;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 30px;
border-top-left-radius: 10;
border-top-right-radius: 10;
background-color: rgba(255, 255, 255, 0.3);
filter: blur(1px);
}
p2 {
margin-top: 2%;
}
#result-box {
border: 1px solid black;
position: absolute;
bottom: 0;
width: 80%;
height: 200px;
margin: 50px auto;
padding: 10px;
font-size: 18px;
overflow-y: scroll;
margin-bottom: 2%;
margin-left: 9%;
}
</style>
</head>
<body>
<h1 class="neon-rectangle">Speaker Diarization by Group 9</h1>
<p2>Speaker diarisation (or diarization) is the process of partitioning an audio stream containing human speech into homogeneous segments according to the identity of each speaker. It can enhance the readability of an automatic speech transcription by structuring the audio stream into speaker turns and, when used together with speaker recognition systems, by providing the speaker’s true identity. It is used to answer the question "who spoke when?" Speaker diarisation is a combination of speaker segmentation and speaker clustering. The first aims at finding speaker change points in an audio stream. The second aims at grouping together speech segments on the basis of speaker characteristics.</p2>
<form method="POST" action="https://groupnine.netlify.app/process_audio" enctype="multipart/form-data">
<label for="audio">Upload audio file:</label><br>
<input type="file" id="audio" name="audio"><br><br>
<input type="submit" value="Submit">
</form>
<p1>Rajesh Piyush Pratap Kartik Rajkumar Balaji</p1>
<!--<button id="upload-btn">Upload File</button>-->
<input type="file" id="file-input" style="display: none;">
<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGFkYmJhNTA4Y2Q2NzcxMzQ3ZWM4MWY1NDdjYTJiNmIzZjlmMjkxZSZjdD1n/fYkWqB2Ay1VfuLaFU9/giphy-downsized-large.gif" id="floating-gif" alt="floating-gif">
<div id="result-box"></div>
<script>
var uploadBtn = document.getElementById("upload-btn");
var fileInput = document.getElementById("file-input");
uploadBtn.addEventListener("click", function() {
fileInput.click();
fileInput.addEventListener("change", function() {
var fileName = fileInput.value.split("\\").pop();
var resultBox = document.getElementById("result-box");
resultBox.innerHTML = "File uploaded: " + fileName;
});
});
var neonRectangle = document.querySelector('.neon-rectangle');
var colors = ['#D82E40', '#2BB25A', '#24B6CD'];
var i = 0;
setInterval(function() {
neonRectangle.style.backgroundColor = colors[i % colors.length];
i++;
}, 1000);
</script>
</body>
</html>