Spaces:

Mightypeacock
/

webtoaudio

Sleeping

App Files Files Community

Brunwo commited on Oct 3, 2024

Commit

bf90d9e

1 Parent(s): 9e47428

add api server param, getting backend call

Browse files

Files changed (3) hide show

index.html +3 -0
script.js +38 -21
styles.css +6 -0

index.html CHANGED Viewed

@@ -7,6 +7,7 @@
   <meta name="theme-color" content="#317EFB">
   <link rel="manifest" href="/manifest.json">
   <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
   <h1>web to podcast player</h1>
@@ -25,6 +26,8 @@
         <input type="password" id="apiKey" placeholder="Enter your API key">
         <button id="toggleApiKey">👁️</button>
       </div>
       <button id="saveSettings">Save</button>
     </div>
   </div>

   <meta name="theme-color" content="#317EFB">
   <link rel="manifest" href="/manifest.json">
   <link rel="stylesheet" href="/styles.css">
+  <!-- Removed Gradio client library -->
 </head>
 <body>
   <h1>web to podcast player</h1>
         <input type="password" id="apiKey" placeholder="Enter your API key">
         <button id="toggleApiKey">👁️</button>
       </div>
+      <label for="apiServer">API Server:</label>
+      <input type="text" id="apiServer" placeholder="Enter API server URL">
       <button id="saveSettings">Save</button>
     </div>
   </div>

script.js CHANGED Viewed

@@ -6,15 +6,20 @@ document.addEventListener("DOMContentLoaded", function() {
     const saveSettingsBtn = document.getElementById('saveSettings');
     const apiKeyInput = document.getElementById('apiKey');
     const toggleApiKeyBtn = document.getElementById('toggleApiKey');
     let originalApiKey = '';
-    // Load saved API key on page load
     const savedApiKey = localStorage.getItem('openaiApiKey');
     if (savedApiKey) {
         apiKeyInput.value = savedApiKey;
         originalApiKey = savedApiKey;
     }
     // Toggle API key visibility
     toggleApiKeyBtn.onclick = function() {
@@ -30,6 +35,7 @@ document.addEventListener("DOMContentLoaded", function() {
     // Open settings modal
     settingsBtn.onclick = function() {
         originalApiKey = apiKeyInput.value;
         settingsModal.style.display = "block";
         apiKeyInput.focus();
     }
@@ -63,13 +69,16 @@ document.addEventListener("DOMContentLoaded", function() {
     // Save settings
     function saveSettings() {
         const apiKey = apiKeyInput.value.trim();
-        if (apiKey) {
             localStorage.setItem('openaiApiKey', apiKey);
-            originalApiKey = apiKey;  // Update original key
-            alert('API key saved successfully!');
             closeModal();
         } else {
-            alert('Please enter a valid API key.');
         }
     }
@@ -79,38 +88,46 @@ document.addEventListener("DOMContentLoaded", function() {
     async function fetchMp3(link) {
         try {
             const apiKey = localStorage.getItem('openaiApiKey');
             if (!apiKey) {
                 throw new Error("API key not set. Please set your OpenAI API key in the settings.");
             }
-            const response = await fetch('/api/generate-audio', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    url: link,
-                    // Use the saved API key
-                    openai_api_key: apiKey,
-                    text_model: 'gpt-4o-mini',
-                    audio_model: 'tts-1',
-                    speaker_1_voice: 'alloy',
-                    speaker_2_voice: 'echo',
-                    // ... other parameters ...
                 }),
             });
             if (!response.ok) {
-                throw new Error("Network response was not ok");
-            }
-            const data = await response.json();
-            if (data.error) {
-                throw new Error(data.error);
             }
             // Set the audio player source
-            audioPlayer.src = data.audio_file;
             audioPlayer.play();
         } catch (error) {
             console.error('Error fetching MP3:', error);

     const saveSettingsBtn = document.getElementById('saveSettings');
     const apiKeyInput = document.getElementById('apiKey');
     const toggleApiKeyBtn = document.getElementById('toggleApiKey');
+    const apiServerInput = document.getElementById('apiServer');
     let originalApiKey = '';
+    let originalApiServer = '';
+    // Load saved settings on page load
     const savedApiKey = localStorage.getItem('openaiApiKey');
+    const savedApiServer = localStorage.getItem('apiServer') || 'http://127.0.0.1:7860';
     if (savedApiKey) {
         apiKeyInput.value = savedApiKey;
         originalApiKey = savedApiKey;
     }
+    apiServerInput.value = savedApiServer;
+    originalApiServer = savedApiServer;
     // Toggle API key visibility
     toggleApiKeyBtn.onclick = function() {
     // Open settings modal
     settingsBtn.onclick = function() {
         originalApiKey = apiKeyInput.value;
+        originalApiServer = apiServerInput.value;
         settingsModal.style.display = "block";
         apiKeyInput.focus();
     }
     // Save settings
     function saveSettings() {
         const apiKey = apiKeyInput.value.trim();
+        const apiServer = apiServerInput.value.trim();
+        if (apiKey && apiServer) {
             localStorage.setItem('openaiApiKey', apiKey);
+            localStorage.setItem('apiServer', apiServer);
+            originalApiKey = apiKey;
+            originalApiServer = apiServer;
+            alert('Settings saved successfully!');
             closeModal();
         } else {
+            alert('Please enter both a valid API key and API server.');
         }
     }
     async function fetchMp3(link) {
         try {
             const apiKey = localStorage.getItem('openaiApiKey');
+            const apiServer = localStorage.getItem('apiServer');
             if (!apiKey) {
                 throw new Error("API key not set. Please set your OpenAI API key in the settings.");
             }
+            if (!apiServer) {
+                throw new Error("API server not set. Please set the API server in the settings.");
+            }
+            const response = await fetch(`${apiServer}/api/predict`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
+                    data: [
+                        link,
+                        apiKey,
+                        "gpt-4o-mini",
+                        "tts-1",
+                        "alloy",
+                        "echo",
+                        null, // api_base
+                        "", // edited_transcript
+                        "", // user_feedback
+                        "summary" // original_text
+                    ]
                 }),
             });
             if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
+            const result = await response.json();
+            // Assuming the audio file URL is the first item in the result
+            const audioFileUrl = result.data[0];
             // Set the audio player source
+            audioPlayer.src = audioFileUrl;
             audioPlayer.play();
         } catch (error) {
             console.error('Error fetching MP3:', error);

styles.css CHANGED Viewed

@@ -85,3 +85,9 @@ body {
 #toggleApiKey:hover {
     background-color: #e0e0e0;
 }

 #toggleApiKey:hover {
     background-color: #e0e0e0;
 }
+#apiServer {
+    width: 100%;
+    padding: 5px;
+    margin: 10px 0;
+}