working gradio js client, local & HF

.gitignore

@@ -7,3 +7,4 @@ flagged/log.csv
 .aider*
 locales/fr/LC_MESSAGES/messages.mo
 locales/en/LC_MESSAGES/messages.mo
+node_modules/

README.md

@@ -35,3 +35,6 @@ ngrok http 8000
 
 sudo apt-get install gettext
 
+
+
+npx vite

build.sh

@@ -1,3 +1,6 @@
 msgfmt locales/fr/LC_MESSAGES/messages.po -o locales/fr/LC_MESSAGES/messages.mo
 msgfmt locales/es/LC_MESSAGES/messages.po -o locales/es/LC_MESSAGES/messages.mo
 msgfmt locales/en/LC_MESSAGES/messages.po -o locales/en/LC_MESSAGES/messages.mo
+
+
+npx vite build

frontendsetup.sh

@@ -0,0 +1,4 @@
+
+npm init -y
+npm install vite @gradio/client
+touch vite.config.js

index.html

@@ -32,6 +32,8 @@
     </div>
   </div>
 
-  <script src="/script.js"></script>
+
+  <script type="module" src="script.js"></script>
+  <!-- <script src="/script.js"></script> -->
 </body>
 </html>

script.js

@@ -1,3 +1,5 @@
+ import { Client } from "@gradio/client";
+
 document.addEventListener("DOMContentLoaded", function() {
     const audioPlayer = document.getElementById('player');
     const settingsBtn = document.getElementById('settingsBtn');
@@ -86,9 +88,13 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Function to fetch MP3 from API endpoint when a link is shared
     async function fetchMp3(link) {
+        console.log('Starting fetchMp3 function with link:', link);
         try {
             const apiKey = localStorage.getItem('openaiApiKey');
             const apiServer = localStorage.getItem('apiServer');
+            console.log('Retrieved API key and server from localStorage');
+            console.log('API Server:', apiServer);
+
             if (!apiKey) {
                 throw new Error("API key not set. Please set your OpenAI API key in the settings.");
             }
@@ -96,51 +102,64 @@ document.addEventListener("DOMContentLoaded", function() {
                 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}`);
-            }
+            console.log('Attempting to connect to Gradio app...');
+
+            // Connect to local Gradio app 
+            const client = await Client.connect(apiServer);
+
+            //connect to HF deployed one OK
+            //const client = await Client.connect("Mightypeacock/webtoaudio");
+
+            console.log('Gradio client created successfully');
+            
+            console.log(await client.view_api())
+
+            console.log('Preparing to make prediction...');
+            // Make the prediction
 
-            const result = await response.json();
+            const result = await client.predict("/generate_audio", { 
+              url:link,
+              openai_api_key: apiKey,
+              text_model:  "gpt-4o-mini",
+              audio_model:  "tts-1",
+              speaker_1_voice:   "alloy",
+              speaker_2_voice:  "echo",
+              api_base: null, // api_base
+              edited_transcript: "", // edited_transcript
+              user_feedback:  "", // user_feedback
+              original_text: "summary" // original_text
+              // debug: true, 
+        });
+
+        console.log(result.data);
+
+
+            console.log('Prediction made successfully');
 
             // Assuming the audio file URL is the first item in the result
             const audioFileUrl = result.data[0];
+            console.log('Received audio file URL:', audioFileUrl);
 
             // Set the audio player source
             audioPlayer.src = audioFileUrl;
             audioPlayer.play();
+            console.log('Audio playback started');
         } catch (error) {
-            console.error('Error fetching MP3:', error);
-            alert(error.message);
+            console.error('Error in fetchMp3:', error);
+            console.error('Error stack:', error.stack);
+            alert(`Error fetching MP3: ${error.message}`);
         }
     }
   
     // Get the link from the shared URL
     const queryParams = new URLSearchParams(window.location.search);
     const sharedLink = queryParams.get('url');
-    
+
+    console.log('Shared link from URL:', sharedLink);
+
     // Only call the API to get MP3 if a valid URL is provided
     if (sharedLink) {
+        console.log('Valid URL provided, calling fetchMp3');
         fetchMp3(sharedLink);
     } else {
         console.log("No URL provided. Waiting for user input.");

vite.config.js

@@ -0,0 +1,9 @@
+
+// vite.config.js
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    outDir: 'dist',  // The output directory for bundled files
+  },
+});