Spaces:

Mightypeacock
/

webtoaudio

Sleeping

App Files Files Community

Brunwo commited on Oct 3, 2024

Commit

9e47428

1 Parent(s): d09fd1e

adding api key to pwa

Browse files

Files changed (3) hide show

index.html +17 -0
script.js +147 -63
styles.css +79 -1

index.html CHANGED Viewed

@@ -11,6 +11,23 @@
 <body>
   <h1>web to podcast player</h1>
   <audio id="player" controls></audio>
   <script src="/script.js"></script>
 </body>

 <body>
   <h1>web to podcast player</h1>
   <audio id="player" controls></audio>
+  <!-- Add settings button -->
+  <button id="settingsBtn">Settings</button>
+  <!-- Add settings modal -->
+  <div id="settingsModal" class="modal">
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <h2>Settings</h2>
+      <label for="apiKey">OpenAI API Key:</label>
+      <div class="api-key-container">
+        <input type="password" id="apiKey" placeholder="Enter your API key">
+        <button id="toggleApiKey">👁️</button>
+      </div>
+      <button id="saveSettings">Save</button>
+    </div>
+  </div>
   <script src="/script.js"></script>
 </body>

script.js CHANGED Viewed

@@ -1,89 +1,173 @@
 document.addEventListener("DOMContentLoaded", function() {
     const audioPlayer = document.getElementById('player');
     // Function to fetch MP3 from API endpoint when a link is shared
     async function fetchMp3(link) {
-      try {
-        const response = await fetch('/api/generate-audio', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            url: link,
-            // Add other necessary parameters here
-            openai_api_key: 'your_api_key_here', // Be cautious with API keys in client-side code
-            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);
-      }
     }
-    // Get the link from the shared URL or use a default one
     const queryParams = new URLSearchParams(window.location.search);
-    const sharedLink = queryParams.get('link') || 'https://example.com/default-text';
-    // Call the API to get MP3
-    fetchMp3(sharedLink);
-  });
-  if ('mediaSession' in navigator) {
     navigator.mediaSession.metadata = new MediaMetadata({
-      title: 'Sample MP3',
-      artist: 'Unknown Artist',
-      album: 'Demo Album',
-      artwork: [
-        { src: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
-        { src: '/icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
-      ]
     });
     navigator.mediaSession.setActionHandler('play', function() {
-      audioPlayer.play();
     });
     navigator.mediaSession.setActionHandler('pause', function() {
-      audioPlayer.pause();
     });
     navigator.mediaSession.setActionHandler('seekbackward', function() {
-      audioPlayer.currentTime = Math.max(audioPlayer.currentTime - 10, 0);
     });
     navigator.mediaSession.setActionHandler('seekforward', function() {
-      audioPlayer.currentTime = Math.min(audioPlayer.currentTime + 10, audioPlayer.duration);
     });
-  }
-  // JavaScript code to read URL parameters
-  const urlParams = new URLSearchParams(window.location.search);
-  // Retrieve specific parameters
-  const name = urlParams.get('name'); // "John"
-  const age = urlParams.get('age');   // "30"
-  // Display the parameters in the output div
-  document.getElementById('shared-content').innerHTML = `
-      <p>Name: ${name}</p>
-      <p>Age: ${age}</p>
-  `;

 document.addEventListener("DOMContentLoaded", function() {
     const audioPlayer = document.getElementById('player');
+    const settingsBtn = document.getElementById('settingsBtn');
+    const settingsModal = document.getElementById('settingsModal');
+    const closeBtn = document.querySelector('.close');
+    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() {
+        if (apiKeyInput.type === "password") {
+            apiKeyInput.type = "text";
+            toggleApiKeyBtn.textContent = "🔒";
+        } else {
+            apiKeyInput.type = "password";
+            toggleApiKeyBtn.textContent = "👁️";
+        }
+    }
+    // Open settings modal
+    settingsBtn.onclick = function() {
+        originalApiKey = apiKeyInput.value;
+        settingsModal.style.display = "block";
+        apiKeyInput.focus();
+    }
+    // Close settings modal
+    function closeModal() {
+        settingsModal.style.display = "none";
+        apiKeyInput.value = originalApiKey;  // Revert to original value
+    }
+    closeBtn.onclick = closeModal;
+    // Close modal if clicked outside
+    window.onclick = function(event) {
+        if (event.target == settingsModal) {
+            closeModal();
+        }
+    }
+    // Handle keydown events
+    document.addEventListener('keydown', function(event) {
+        if (settingsModal.style.display === "block") {
+            if (event.key === "Escape") {
+                closeModal();
+            } else if (event.key === "Enter") {
+                saveSettings();
+            }
+        }
+    });
+    // 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.');
+        }
+    }
+    saveSettingsBtn.onclick = saveSettings;
     // Function to fetch MP3 from API endpoint when a link is shared
     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);
+            alert(error.message);
+        }
     }
+    // Get the link from the shared URL
     const queryParams = new URLSearchParams(window.location.search);
+    const sharedLink = queryParams.get('url');
+    // Only call the API to get MP3 if a valid URL is provided
+    if (sharedLink) {
+        fetchMp3(sharedLink);
+    } else {
+        console.log("No URL provided. Waiting for user input.");
+        // You might want to update the UI here to indicate that the user needs to provide a URL
+    }
+});
+if ('mediaSession' in navigator) {
     navigator.mediaSession.metadata = new MediaMetadata({
+        title: 'Sample MP3',
+        artist: 'Unknown Artist',
+        album: 'Demo Album',
+        artwork: [
+            { src: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
+            { src: '/icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
+        ]
     });
     navigator.mediaSession.setActionHandler('play', function() {
+        audioPlayer.play();
     });
     navigator.mediaSession.setActionHandler('pause', function() {
+        audioPlayer.pause();
     });
     navigator.mediaSession.setActionHandler('seekbackward', function() {
+        audioPlayer.currentTime = Math.max(audioPlayer.currentTime - 10, 0);
     });
     navigator.mediaSession.setActionHandler('seekforward', function() {
+        audioPlayer.currentTime = Math.min(audioPlayer.currentTime + 10, audioPlayer.duration);
     });
+}
+// JavaScript code to read URL parameters
+const urlParams = new URLSearchParams(window.location.search);
+// Retrieve specific parameters
+const name = urlParams.get('name'); // "John"
+const age = urlParams.get('age');   // "30"
+// Display the parameters in the output div
+document.getElementById('shared-content').innerHTML = `
+    <p>Name: ${name}</p>
+    <p>Age: ${age}</p>
+`;

styles.css CHANGED Viewed

@@ -6,4 +6,82 @@ body {
   audio {
     width: 100%;
   }

   audio {
     width: 100%;
   }
+/* Add this to your existing styles.css file */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+}
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+#apiKey {
+    width: 100%;
+    padding: 5px;
+    margin: 10px 0;
+}
+#saveSettings {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    cursor: pointer;
+}
+#saveSettings:hover {
+    background-color: #45a049;
+}
+.api-key-container {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+}
+#apiKey {
+    flex-grow: 1;
+    margin-right: 5px;
+}
+#toggleApiKey {
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 16px;
+}
+#toggleApiKey:hover {
+    background-color: #e0e0e0;
+}