Update app.py

app.py

@@ -243,15 +243,18 @@ def conditionally_hide_widgets(voice):
 title = "<h1>la vitci voksa - <i><img src='/file/assets/jbolanci.png'/>Lojban text-to-speech</i></h1>"
 description = "<h2>VITS & Nix-TTS text-to-speech adapted to Lojban. Join <a href='https://discord.gg/BVm4EYR'>Lojban Discord live chat</a> to discuss further.</h2>"
 article = "<p style='text-align: center'><a href='https://github.com/jaywalnut310/vits'>VITS: Conditional Variational Autoencoder with Adversarial Learning for End-to-End Text-to-Speech</a> | <a href='https://github.com/rendchevi/nix-tts'>Nix-TTS: Lightweight and End-to-end Text-to-Speech via Module-wise Distillation</a></p>"
-chat = """
-<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>"
-<script>
-      document.addEventListener("DOMContentLoaded", () => {
+scripts = """
+async () => {
+    const script = document.createElement("script");
+    script.onload = () =>  console.log("socket.io loaded") ;
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js";
+    document.head.appendChild(script);
+
+    document.addEventListener("DOMContentLoaded", () => {
         var socket1Chat_connected;
         var socket1Chat = io("wss://jbotcan.org:9091", {
           transports: ["polling", "websocket"],
         });
-        // if (socket1Chat) {
         socket1Chat.on("connect", function () {
           console.log(socket1Chat);
           socket1Chat_connected = true;
@@ -264,7 +267,6 @@ chat = """
           return text
             .replace(/[\n\r]+$/gims, " ")
             .replace(/<br *\/?>/gims, " ");
-          // .split('<')[0]
         }
         socket1Chat.on("sentFrom", function (data) {
           if (!socket1Chat_connected) return;
@@ -290,9 +292,11 @@ chat = """
           const velsku = document.getElementById("velsku_sebenji");
           velsku.innerHTML = `<img src="https://la-lojban.github.io/sutysisku/pixra/nunsku.svg" class="velsku_pixra"/> <span class="velsku_pamei">[${msg.s}] ${msg.w}: ${msg.d}</span>`;
         });
-        // }
       });
-    </script>
+}
+"""
+
+chat = """
     <div id="velsku" class="noselect">
                 <a id="velsku_sebenji" href="https://discord.gg/4KhzRzpmVr" target="_blank">
                 <img src="https://la-lojban.github.io/sutysisku/pixra/nunsku.svg" class="velsku_pixra"/>
@@ -346,5 +350,7 @@ with gr.Blocks(css=css) as demo:
             gr.Examples(examples, inputs, fn=inference, outputs=outputs, cache_examples=True, run_on_click=True)
     gr.HTML(article)
     gr.HTML(chat)
+    demo.load(None,None,None,_js=scripts)
+
 
 demo.launch(server_name="0.0.0.0")