Hugging Face's logo

Spaces:
mguven61
/
accent-classifier
Sleeping

App Files Community
mguven61 commited on
Commit
5c82474
·
verified ·
1 Parent(s): 7426cbb

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +130 -0
templates/index.html CHANGED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Accent Classifier</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ max-width: 800px;
9
+ margin: 0 auto;
10
+ padding: 20px;
11
+ background-color: #f5f5f5;
12
+ }
13
+ .container {
14
+ background-color: white;
15
+ padding: 20px;
16
+ border-radius: 10px;
17
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
18
+ }
19
+ h1 {
20
+ color: #333;
21
+ text-align: center;
22
+ }
23
+ .input-group {
24
+ margin: 20px 0;
25
+ }
26
+ input[type="text"] {
27
+ width: 100%;
28
+ padding: 10px;
29
+ margin: 5px 0;
30
+ border: 1px solid #ddd;
31
+ border-radius: 5px;
32
+ }
33
+ button {
34
+ background-color: #4CAF50;
35
+ color: white;
36
+ padding: 10px 20px;
37
+ border: none;
38
+ border-radius: 5px;
39
+ cursor: pointer;
40
+ width: 100%;
41
+ }
42
+ button:hover {
43
+ background-color: #45a049;
44
+ }
45
+ #result {
46
+ margin-top: 20px;
47
+ padding: 20px;
48
+ border: 1px solid #ddd;
49
+ border-radius: 5px;
50
+ display: none;
51
+ }
52
+ .loading {
53
+ text-align: center;
54
+ display: none;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <div class="container">
60
+ <h1>Accent Classifier</h1>
61
+
62
+ <div class="input-group">
63
+ <input type="text" id="url" placeholder="Paste YouTube video URL">
64
+ <button onclick="analyze()">Analyze</button>
65
+ </div>
66
+
67
+ <div class="loading" id="loading">
68
+ Analyzing...
69
+ </div>
70
+
71
+ <div id="result"></div>
72
+ </div>
73
+
74
+ <script>
75
+ function analyze() {
76
+ const url = document.getElementById('url').value;
77
+ if (!url) {
78
+ alert('Please enter a URL');
79
+ return;
80
+ }
81
+
82
+ document.getElementById('loading').style.display = 'block';
83
+ document.getElementById('result').style.display = 'none';
84
+
85
+ fetch('/analyze', {
86
+ method: 'POST',
87
+ headers: {
88
+ 'Content-Type': 'application/x-www-form-urlencoded',
89
+ },
90
+ body: `url=${encodeURIComponent(url)}`
91
+ })
92
+ .then(response => response.json())
93
+ .then(data => {
94
+ document.getElementById('loading').style.display = 'none';
95
+ document.getElementById('result').style.display = 'block';
96
+
97
+ if (data.error) {
98
+ document.getElementById('result').innerHTML = `<p style="color: red">${data.error}</p>`;
99
+ return;
100
+ }
101
+
102
+ let html = `
103
+ <h2>Results</h2>
104
+ <p><strong>Predicted Accent:</strong> ${data.accent}</p>
105
+ <p><strong>Confidence Score:</strong> ${(data.confidence * 100).toFixed(1)}%</p>
106
+
107
+ <h3>All Probabilities:</h3>
108
+ <ul>
109
+ `;
110
+
111
+ Object.entries(data.all_probabilities)
112
+ .sort((a, b) => b[1] - a[1])
113
+ .forEach(([accent, prob]) => {
114
+ const barLength = Math.round(prob * 20);
115
+ const bar = '█'.repeat(barLength) + '░'.repeat(20 - barLength);
116
+ html += `<li>${accent}: ${(prob * 100).toFixed(1)}% |${bar}|</li>`;
117
+ });
118
+
119
+ html += '</ul>';
120
+ document.getElementById('result').innerHTML = html;
121
+ })
122
+ .catch(error => {
123
+ document.getElementById('loading').style.display = 'none';
124
+ document.getElementById('result').style.display = 'block';
125
+ document.getElementById('result').innerHTML = `<p style="color: red">Hata: ${error}</p>`;
126
+ });
127
+ }
128
+ </script>
129
+ </body>
130
+ </html>