Update index.html

index.html

@@ -55,9 +55,9 @@
     <div id="container">
         <h1>Whisper WAV Transcription</h1>
 
-        <div id="apiKey" style="display:none"></div>
-        <div  id="apiBaseUrl">Hi</div>
-      
+        <input type="hidden" id="apiKey"> <!-- Hidden input for API key -->
+        <input type="hidden" id="apiBaseUrl"> <!-- Hidden input for API base URL -->
+
         <label for="audioFile">Select WAV File:</label>
         <input type="file" id="audioFile" accept=".wav">
 
@@ -65,17 +65,41 @@
 
         <div id="transcription"></div>
         <button id="copyButton" onclick="copyToClipboard()" style="display: none;">Copy to Clipboard</button>
-
     </div>
 
     <script>
+        // Function to extract parameters from URL hash
+        function getHashParams() {
+            const hash = window.location.hash.substring(1);
+            const params = {};
+
+            hash.split('&').forEach(part => {
+                const [key, value] = part.split('=');
+                if (key && value) {
+                    params[key] = decodeURIComponent(value);
+                }
+            });
+
+            return params;
+        }
+
+        // Set apiKey and apiBaseUrl from URL hash
+        window.onload = () => {
+            const params = getHashParams();
+            document.getElementById('apiKey').value = params.apiKey || '';
+            document.getElementById('apiBaseUrl').value = params.apiBaseUrl || '';
+
+            if (!params.apiKey || !params.apiBaseUrl) {
+                alert('Please provide both apiKey and apiBaseUrl in the URL hash.');
+            }
+        };
+
         async function transcribeAudio() {
-            const apiKey = document.getElementById('apiKey').textContent;
-            const apiBaseUrl = document.getElementById('apiBaseUrl').textContent;
-          
+            const apiKey = document.getElementById('apiKey').value;
+            const apiBaseUrl = document.getElementById('apiBaseUrl').value;
             const audioFile = document.getElementById('audioFile').files[0];
             const transcriptionDiv = document.getElementById('transcription');
-            
+
             if (!apiKey || !audioFile) {
                 console.log(apiKey);
                 alert('Please provide both API key and a WAV file.');
@@ -115,7 +139,7 @@
                 }
 
                 transcriptionDiv.innerHTML = fullTranscription; 
-				document.getElementById('copyButton').style.display = 'block'; // Show copy button
+                document.getElementById('copyButton').style.display = 'block'; // Show copy button
 
             } catch (error) {
                 console.error('Error during transcription:', error);
@@ -216,9 +240,8 @@
                 view.setUint8(offset + i, string.charCodeAt(i));
             }
         }
-		
-		
-		function copyToClipboard() {
+
+        function copyToClipboard() {
             const transcriptionText = document.getElementById('transcription').innerText;
             navigator.clipboard.writeText(transcriptionText)
                 .then(() => {
@@ -230,4 +253,4 @@
         }
     </script>
 </body>
-</html>
+</html>