Spaces:

usmanyousaf
/

Smart-Audio-Grammar-Tool

Sleeping

App Files Files Community

usmanyousaf commited on Dec 3, 2024

Commit

7918102

verified ·

1 Parent(s): effc91a

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +59 -56

templates/index.html CHANGED Viewed

@@ -6,52 +6,79 @@
     <title>Audio Transcription with Grammar and Vocabulary Check</title>
     <style>
         body {
-            padding: 20px;
-            background: linear-gradient(135deg, #6d7be5, #8699ee);
             font-family: 'Arial', sans-serif;
-            color: #333;
         }
         h1, h2, h3 {
             margin-bottom: 20px;
         }
-        .recording-bar {
-            width: 0;
-            height: 5px;
-            background-color: #4caf50;
-            transition: width 0.5s;
         }
-        #transcription-result, #grammar-feedback, #vocabulary-feedback {
             padding: 10px;
-            background-color: rgba(255, 255, 255, 0.8);
             border-radius: 4px;
-            margin-bottom: 20px;
-            min-height: 50px;
         }
-        .feedback-section {
-            margin-top: 30px;
         }
         .btn {
             margin-top: 10px;
-            transition: background-color 0.3s, transform 0.2s;
         }
         .btn:hover {
-            transform: scale(1.05);
         }
-        .form-select, input[type="text"] {
             padding: 10px;
-            transition: border-color 0.3s;
         }
         #recording-status {
             margin-top: 10px;
             font-weight: bold;
-            color: #4caf50;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1 style="text-align: center; font-weight: bold; color: #000;">Grammar and Vocabulary Checker with Audio Transcription</h1>
-        <div class="mb-3">
             <label for="language-select" class="form-label">Select Language:</label>
             <select id="language-select" class="form-select">
                 <option value="en">English</option>
@@ -65,15 +92,14 @@
             </select>
         </div>
         <h2>Record Audio</h2>
-        <button id="start-recording" class="btn btn-primary">Start Recording</button>
-        <button id="stop-recording" class="btn btn-danger" disabled>Stop Recording</button>
         <div id="recording-status"></div>
-        <div class="recording-container">
-            <div id="recording-bar" class="recording-bar"></div>
-        </div>
         <div class="feedback-section">
             <h3>Transcription Result:</h3>
             <div id="transcription-result"></div>
@@ -88,14 +114,14 @@
             <div id="vocabulary-feedback"></div>
             <p><strong>Vocabulary Score:</strong> <span id="vocabulary-score"></span>/10</p>
-            <button id="check-grammar" class="btn btn-secondary" disabled>Check Grammar and Vocabulary</button>
         </div>
     </div>
     <script>
         let mediaRecorder;
         let audioChunks = [];
         document.getElementById("start-recording").onclick = async () => {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             mediaRecorder = new MediaRecorder(stream);
@@ -103,31 +129,17 @@
             document.getElementById("recording-status").textContent = "Recording...";
             document.getElementById("start-recording").disabled = true;
             document.getElementById("stop-recording").disabled = false;
-            document.getElementById("recording-bar").style.width = '0%';
             let recordingInterval = setInterval(() => {
-                const currentWidth = parseFloat(document.getElementById("recording-bar").style.width);
-                const newWidth = Math.min(currentWidth + 5, 100);
-                document.getElementById("recording-bar").style.width = newWidth + '%';
-                if (newWidth >= 100) {
-                    clearInterval(recordingInterval);
-                }
             }, 1000);
-            mediaRecorder.ondataavailable = (event) => {
-                audioChunks.push(event.data);
-            };
             mediaRecorder.onstop = async () => {
                 clearInterval(recordingInterval);
                 document.getElementById("recording-bar").style.width = '0%';
                 const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                 const formData = new FormData();
                 formData.append('audio_data', audioBlob, 'audio.wav');
-                const selectedLanguage = document.getElementById("language-select").value;
-                formData.append('language', selectedLanguage);
                 const response = await fetch('/transcribe', {
                     method: 'POST',
                     body: formData
@@ -135,31 +147,22 @@
                 const result = await response.json();
                 document.getElementById("transcription-result").textContent = result.transcription;
                 document.getElementById("check-grammar").disabled = false;
                 audioChunks = [];
                 document.getElementById("recording-status").textContent = "Recording stopped.";
                 document.getElementById("start-recording").disabled = false;
                 document.getElementById("stop-recording").disabled = true;
             };
         };
-        document.getElementById("stop-recording").onclick = () => {
-            mediaRecorder.stop();
-        };
         document.getElementById("check-grammar").onclick = async () => {
             const transcription = document.getElementById("transcription-result").textContent;
             const formData = new FormData();
             formData.append('transcription', transcription);
-            const selectedLanguage = document.getElementById("language-select").value;
-            formData.append('language', selectedLanguage);
             const response = await fetch('/check_grammar', {
                 method: 'POST',
                 body: formData
             });
             const result = await response.json();
             document.getElementById("grammar-feedback").textContent = result.grammar_feedback;
             document.getElementById("vocabulary-feedback").textContent = result.vocabulary_feedback;
             document.getElementById("grammar-score").textContent = result.grammar_score;

     <title>Audio Transcription with Grammar and Vocabulary Check</title>
     <style>
         body {
+            background-color: black;
             font-family: 'Arial', sans-serif;
+            color: white;
+            padding: 20px;
         }
         h1, h2, h3 {
+            color: white;
             margin-bottom: 20px;
         }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
         }
+        .form-label, #recording-status {
+            color: white;
+        }
+        select, button, input[type="text"] {
+            background-color: black;
+            color: white;
+            border: 1px solid lightgray;
             padding: 10px;
             border-radius: 4px;
+            transition: all 0.3s ease;
         }
+        select:hover, button:hover, input[type="text"]:hover {
+            border-color: white;
         }
         .btn {
+            color: white;
+            background-color: green;
+            border: 1px solid lightgray;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
             margin-top: 10px;
         }
         .btn:hover {
+            background-color: #0f9d58;
+        }
+        .feedback-section {
+            margin-top: 30px;
+            border: 1px solid lightgray;
+            padding: 15px;
+            border-radius: 8px;
         }
+        #transcription-result, #grammar-feedback, #vocabulary-feedback {
+            background-color: black;
+            border: 1px solid lightgray;
             padding: 10px;
+            border-radius: 4px;
+            min-height: 50px;
+            color: white;
+        }
+        .recording-bar {
+            width: 0;
+            height: 5px;
+            background-color: green;
+            margin-top: 10px;
+            border-radius: 2px;
+            transition: width 0.5s;
         }
         #recording-status {
             margin-top: 10px;
             font-weight: bold;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1 style="text-align: center;">Audio Transcription with Grammar and Vocabulary Check</h1>
+        <!-- Language Selection -->
+        <div>
             <label for="language-select" class="form-label">Select Language:</label>
             <select id="language-select" class="form-select">
                 <option value="en">English</option>
             </select>
         </div>
+        <!-- Recording Controls -->
         <h2>Record Audio</h2>
+        <button id="start-recording" class="btn">Start Recording</button>
+        <button id="stop-recording" class="btn" disabled>Stop Recording</button>
         <div id="recording-status"></div>
+        <div id="recording-bar" class="recording-bar"></div>
+        <!-- Feedback Sections -->
         <div class="feedback-section">
             <h3>Transcription Result:</h3>
             <div id="transcription-result"></div>
             <div id="vocabulary-feedback"></div>
             <p><strong>Vocabulary Score:</strong> <span id="vocabulary-score"></span>/10</p>
+            <button id="check-grammar" class="btn" disabled>Check Grammar and Vocabulary</button>
         </div>
     </div>
     <script>
+        // JavaScript logic as provided by the user
         let mediaRecorder;
         let audioChunks = [];
         document.getElementById("start-recording").onclick = async () => {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             mediaRecorder = new MediaRecorder(stream);
             document.getElementById("recording-status").textContent = "Recording...";
             document.getElementById("start-recording").disabled = true;
             document.getElementById("stop-recording").disabled = false;
             let recordingInterval = setInterval(() => {
+                const currentWidth = parseFloat(document.getElementById("recording-bar").style.width) || 0;
+                document.getElementById("recording-bar").style.width = Math.min(currentWidth + 5, 100) + '%';
             }, 1000);
+            mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
             mediaRecorder.onstop = async () => {
                 clearInterval(recordingInterval);
                 document.getElementById("recording-bar").style.width = '0%';
                 const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                 const formData = new FormData();
                 formData.append('audio_data', audioBlob, 'audio.wav');
                 const response = await fetch('/transcribe', {
                     method: 'POST',
                     body: formData
                 const result = await response.json();
                 document.getElementById("transcription-result").textContent = result.transcription;
                 document.getElementById("check-grammar").disabled = false;
                 audioChunks = [];
                 document.getElementById("recording-status").textContent = "Recording stopped.";
                 document.getElementById("start-recording").disabled = false;
                 document.getElementById("stop-recording").disabled = true;
             };
         };
+        document.getElementById("stop-recording").onclick = () => mediaRecorder.stop();
         document.getElementById("check-grammar").onclick = async () => {
             const transcription = document.getElementById("transcription-result").textContent;
             const formData = new FormData();
             formData.append('transcription', transcription);
             const response = await fetch('/check_grammar', {
                 method: 'POST',
                 body: formData
             });
             const result = await response.json();
             document.getElementById("grammar-feedback").textContent = result.grammar_feedback;
             document.getElementById("vocabulary-feedback").textContent = result.vocabulary_feedback;
             document.getElementById("grammar-score").textContent = result.grammar_score;