File size: 4,196 Bytes
9c3df3c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html>
<head>
    <title>Accent Classifier</title>
    <style>

        body {

            font-family: Arial, sans-serif;

            max-width: 800px;

            margin: 0 auto;

            padding: 20px;

            background-color: #f5f5f5;

        }

        .container {

            background-color: white;

            padding: 20px;

            border-radius: 10px;

            box-shadow: 0 0 10px rgba(0,0,0,0.1);

        }

        h1 {

            color: #333;

            text-align: center;

        }

        .input-group {

            margin: 20px 0;

        }

        input[type="text"] {

            width: 100%;

            padding: 10px;

            margin: 5px 0;

            border: 1px solid #ddd;

            border-radius: 5px;

        }

        button {

            background-color: #4CAF50;

            color: white;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            width: 100%;

        }

        button:hover {

            background-color: #45a049;

        }

        #result {

            margin-top: 20px;

            padding: 20px;

            border: 1px solid #ddd;

            border-radius: 5px;

            display: none;

        }

        .loading {

            text-align: center;

            display: none;

        }

    </style>
</head>
<body>
    <div class="container">
        <h1>Accent Classifier</h1>
        
        <div class="input-group">
            <input type="text" id="url" placeholder="Paste YouTube video URL">
            <button onclick="analyze()">Analyze</button>
        </div>
        
        <div class="loading" id="loading">
            Analyzing...
        </div>
        
        <div id="result"></div>
    </div>

    <script>

        function analyze() {

            const url = document.getElementById('url').value;

            if (!url) {

                alert('Please enter a URL');

                return;

            }



            document.getElementById('loading').style.display = 'block';

            document.getElementById('result').style.display = 'none';



            fetch('/analyze', {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/x-www-form-urlencoded',

                },

                body: `url=${encodeURIComponent(url)}`

            })

            .then(response => response.json())

            .then(data => {

                document.getElementById('loading').style.display = 'none';

                document.getElementById('result').style.display = 'block';

                

                if (data.error) {

                    document.getElementById('result').innerHTML = `<p style="color: red">${data.error}</p>`;

                    return;

                }



                let html = `

                    <h2>Results</h2>

                    <p><strong>Predicted Accent:</strong> ${data.accent}</p>

                    <p><strong>Confidence Score:</strong> ${(data.confidence * 100).toFixed(1)}%</p>

                    

                    <h3>All Probabilities:</h3>

                    <ul>

                `;



                Object.entries(data.all_probabilities)

                    .sort((a, b) => b[1] - a[1])

                    .forEach(([accent, prob]) => {

                        const barLength = Math.round(prob * 20);

                        const bar = '█'.repeat(barLength) + '░'.repeat(20 - barLength);

                        html += `<li>${accent}: ${(prob * 100).toFixed(1)}% |${bar}|</li>`;

                    });



                html += '</ul>';

                document.getElementById('result').innerHTML = html;

            })

            .catch(error => {

                document.getElementById('loading').style.display = 'none';

                document.getElementById('result').style.display = 'block';

                document.getElementById('result').innerHTML = `<p style="color: red">Hata: ${error}</p>`;

            });

        }

    </script>
</body>
</html>