Hugging Face's logo

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

App Files Community
usmanyousaf commited on
Commit
f1f4caa
·
verified ·
1 Parent(s): c60e75c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +3 -36
templates/index.html CHANGED
@@ -1,6 +1,5 @@
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">
@@ -13,18 +12,15 @@
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);
@@ -32,50 +28,30 @@
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">
@@ -90,17 +66,15 @@
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>
@@ -119,12 +93,6 @@
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 = [];
@@ -200,5 +168,4 @@
200
  };
201
  </script>
202
  </body>
203
-
204
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
12
  font-family: 'Arial', sans-serif;
13
  color: #333;
14
  }
 
15
  h1, h2, h3 {
16
  margin-bottom: 20px;
17
  }
 
18
  .recording-bar {
19
  width: 0;
20
  height: 5px;
21
  background-color: #4caf50;
22
  transition: width 0.5s;
23
  }
 
24
  #transcription-result, #grammar-feedback, #vocabulary-feedback {
25
  padding: 10px;
26
  background-color: rgba(255, 255, 255, 0.8);
 
28
  margin-bottom: 20px;
29
  min-height: 50px;
30
  }
 
31
  .feedback-section {
32
  margin-top: 30px;
33
  }
 
34
  .btn {
35
  margin-top: 10px;
36
  transition: background-color 0.3s, transform 0.2s;
37
  }
 
38
  .btn:hover {
39
  transform: scale(1.05);
40
  }
41
+ .form-select, input[type="text"] {
 
 
42
  padding: 10px;
43
  transition: border-color 0.3s;
44
  }
 
45
  #recording-status {
46
  margin-top: 10px;
47
  font-weight: bold;
48
  color: #4caf50;
49
  }
 
 
 
 
 
 
 
 
 
 
 
50
  </style>
51
  </head>
 
52
  <body>
53
  <div class="container">
54
+ <h1 style="text-align: center; font-weight: bold; color: #000;">Grammar and Vocabulary Checker with Audio Transcription</h1>
 
 
55
  <div class="mb-3">
56
  <label for="language-select" class="form-label">Select Language:</label>
57
  <select id="language-select" class="form-select">
 
66
  </select>
67
  </div>
68
 
 
69
  <h2>Record Audio</h2>
70
  <button id="start-recording" class="btn btn-primary">Start Recording</button>
71
  <button id="stop-recording" class="btn btn-danger" disabled>Stop Recording</button>
72
  <div id="recording-status"></div>
73
+
74
  <div class="recording-container">
75
  <div id="recording-bar" class="recording-bar"></div>
76
  </div>
77
 
 
78
  <div class="feedback-section">
79
  <h3>Transcription Result:</h3>
80
  <div id="transcription-result"></div>
 
93
  </div>
94
  </div>
95
 
 
 
 
 
 
 
96
  <script>
97
  let mediaRecorder;
98
  let audioChunks = [];
 
168
  };
169
  </script>
170
  </body>
 
171
  </html>