Hugging Face's logo

Spaces:
usmanyousaf
/
Smart-Audio-Grammar-Tool
Sleeping

App Files Community
usmanyousaf commited on
Commit
b6452c0
·
verified ·
1 Parent(s): e24409d

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -204
index.html DELETED
@@ -1,204 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Audio Transcription with Grammar and Vocabulary Check</title>
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
9
- <style>
10
- body {
11
- padding: 20px;
12
- background: linear-gradient(135deg, #6d7be5, #8699ee);
13
- font-family: 'Arial', sans-serif;
14
- color: #333;
15
- }
16
-
17
- h1, h2, h3 {
18
- margin-bottom: 20px;
19
- }
20
-
21
- .recording-bar {
22
- width: 0;
23
- height: 5px;
24
- background-color: #4caf50;
25
- transition: width 0.5s;
26
- }
27
-
28
- #transcription-result, #grammar-feedback, #vocabulary-feedback {
29
- padding: 10px;
30
- background-color: rgba(255, 255, 255, 0.8);
31
- border-radius: 4px;
32
- margin-bottom: 20px;
33
- min-height: 50px;
34
- }
35
-
36
- .feedback-section {
37
- margin-top: 30px;
38
- }
39
-
40
- .btn {
41
- margin-top: 10px;
42
- transition: background-color 0.3s, transform 0.2s;
43
- }
44
-
45
- .btn:hover {
46
- transform: scale(1.05);
47
- }
48
-
49
- .form-select,
50
- input[type="text"] {
51
- padding: 10px;
52
- transition: border-color 0.3s;
53
- }
54
-
55
- #recording-status {
56
- margin-top: 10px;
57
- font-weight: bold;
58
- color: #4caf50;
59
- }
60
-
61
- footer {
62
- margin-top: 50px;
63
- text-align: center;
64
- font-size: 14px;
65
- color: #fff;
66
- }
67
-
68
- .recording-container {
69
- margin-top: 20px;
70
- }
71
- </style>
72
- </head>
73
-
74
- <body>
75
- <div class="container">
76
- <h1 style="text-align: center; font-weight: bold; color: #000;">Audio Transcription with Grammar and Vocabulary Check</h1>
77
-
78
- <!-- Language Selection -->
79
- <div class="mb-3">
80
- <label for="language-select" class="form-label">Select Language:</label>
81
- <select id="language-select" class="form-select">
82
- <option value="en">English</option>
83
- <option value="es">Spanish</option>
84
- <option value="fr">French</option>
85
- <option value="de">German</option>
86
- <option value="zh">Chinese</option>
87
- <option value="ja">Japanese</option>
88
- <option value="ko">Korean</option>
89
- <option value="ar">Arabic</option>
90
- </select>
91
- </div>
92
-
93
- <!-- Recording Controls -->
94
- <h2>Record Audio</h2>
95
- <button id="start-recording" class="btn btn-primary">Start Recording</button>
96
- <button id="stop-recording" class="btn btn-danger" disabled>Stop Recording</button>
97
- <div id="recording-status"></div>
98
-
99
- <div class="recording-container">
100
- <div id="recording-bar" class="recording-bar"></div>
101
- </div>
102
-
103
- <!-- Transcription and Feedback Sections -->
104
- <div class="feedback-section">
105
- <h3>Transcription Result:</h3>
106
- <div id="transcription-result"></div>
107
- </div>
108
-
109
- <div class="feedback-section">
110
- <h3>Grammar Feedback:</h3>
111
- <div id="grammar-feedback"></div>
112
- <p><strong>Grammar Score:</strong> <span id="grammar-score"></span>/10</p>
113
-
114
- <h3>Vocabulary Feedback:</h3>
115
- <div id="vocabulary-feedback"></div>
116
- <p><strong>Vocabulary Score:</strong> <span id="vocabulary-score"></span>/10</p>
117
-
118
- <button id="check-grammar" class="btn btn-secondary" disabled>Check Grammar and Vocabulary</button>
119
- </div>
120
- </div>
121
-
122
- <!-- Footer Section -->
123
- <footer>
124
- <p>Made with ❤️ by usmanyousaaf ✨</p>
125
- <p>Feel free to open issues, contribute, and share your feedback! 🌟 Let's build something great together! 💻👩‍💻👨‍💻</p>
126
- </footer>
127
-
128
- <script>
129
- let mediaRecorder;
130
- let audioChunks = [];
131
-
132
- document.getElementById("start-recording").onclick = async () => {
133
- const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
134
- mediaRecorder = new MediaRecorder(stream);
135
- mediaRecorder.start();
136
- document.getElementById("recording-status").textContent = "Recording...";
137
- document.getElementById("start-recording").disabled = true;
138
- document.getElementById("stop-recording").disabled = false;
139
-
140
- document.getElementById("recording-bar").style.width = '0%';
141
- let recordingInterval = setInterval(() => {
142
- const currentWidth = parseFloat(document.getElementById("recording-bar").style.width);
143
- const newWidth = Math.min(currentWidth + 5, 100);
144
- document.getElementById("recording-bar").style.width = newWidth + '%';
145
- if (newWidth >= 100) {
146
- clearInterval(recordingInterval);
147
- }
148
- }, 1000);
149
-
150
- mediaRecorder.ondataavailable = (event) => {
151
- audioChunks.push(event.data);
152
- };
153
-
154
- mediaRecorder.onstop = async () => {
155
- clearInterval(recordingInterval);
156
- document.getElementById("recording-bar").style.width = '0%';
157
-
158
- const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
159
- const formData = new FormData();
160
- formData.append('audio_data', audioBlob, 'audio.wav');
161
- const selectedLanguage = document.getElementById("language-select").value;
162
- formData.append('language', selectedLanguage);
163
-
164
- const response = await fetch('/transcribe', {
165
- method: 'POST',
166
- body: formData
167
- });
168
- const result = await response.json();
169
- document.getElementById("transcription-result").textContent = result.transcription;
170
- document.getElementById("check-grammar").disabled = false;
171
-
172
- audioChunks = [];
173
- document.getElementById("recording-status").textContent = "Recording stopped.";
174
- document.getElementById("start-recording").disabled = false;
175
- document.getElementById("stop-recording").disabled = true;
176
- };
177
- };
178
-
179
- document.getElementById("stop-recording").onclick = () => {
180
- mediaRecorder.stop();
181
- };
182
-
183
- document.getElementById("check-grammar").onclick = async () => {
184
- const transcription = document.getElementById("transcription-result").textContent;
185
- const formData = new FormData();
186
- formData.append('transcription', transcription);
187
- const selectedLanguage = document.getElementById("language-select").value;
188
- formData.append('language', selectedLanguage);
189
-
190
- const response = await fetch('/check_grammar', {
191
- method: 'POST',
192
- body: formData
193
- });
194
- const result = await response.json();
195
-
196
- document.getElementById("grammar-feedback").textContent = result.grammar_feedback;
197
- document.getElementById("vocabulary-feedback").textContent = result.vocabulary_feedback;
198
- document.getElementById("grammar-score").textContent = result.grammar_score;
199
- document.getElementById("vocabulary-score").textContent = result.vocabulary_score;
200
- };
201
- </script>
202
- </body>
203
-
204
- </html>