Spinning DiVA

app.py

@@ -17,7 +17,8 @@ from transformers import AutoModel
 from transformers.modeling_outputs import CausalLMOutputWithPast
 
 orca = pvorca.create(
-    access_key=os.environ.get("ORCA_KEY"), model_path="./orca_params_masculine.pv"
+    access_key=os.environ.get("ORCA_KEY"),
+    model_path="./static/orca_params_masculine.pv",
 )
 LOADER_STR = "♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪loading♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪loading♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪♫"
 if gr.NO_RELOAD:
@@ -101,6 +102,7 @@ def response(state: AppState, audio: tuple):
     state.model_outs = None
     prev_outs = causal_outs
     stream = orca.stream_open()
+
     for resp, outs in diva_audio(
         (audio[0], audio[1]),
         prev_outs=(prev_outs if prev_outs is not None else None),
@@ -183,6 +185,8 @@ async function main() {
         if (record != null) {
           console.log(record);
           record.click();
+          var logo = document.querySelector('.spinning-logo');
+          logo.style = "animation: rotation 10s infinite linear; height: 10vw; margin: auto;"
         }
       },
       onSpeechEnd: (audio) => {
@@ -190,6 +194,8 @@ async function main() {
         if (stop != null) {
           console.log(stop);
           stop.click();
+          var logo = document.querySelector('.spinning-logo');
+          logo.style = "animation: rotation 1s infinite linear; height: 10vw; margin: auto;"
         }
       }
     })
@@ -208,21 +214,47 @@ js_reset = """
   var record = document.querySelector('.record-button');
   record.textContent = "Just Start Talking!"
   record.style = "width: 11vw"
+  var logo = document.querySelector('.spinning-logo');
+  logo.style = "height: 10vw; margin: auto;"
+}
+"""
+
+css = """
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 """
 
-with gr.Blocks(theme=theme, js=js) as demo:
+with gr.Blocks(theme=theme, js=js, css=css) as demo:
     with gr.Row():
-        input_audio = gr.Audio(
-            label="Input Audio",
-            sources=["microphone"],
-            type="numpy",
-            streaming=False,
-        )
+        with gr.Column(scale=9):
+            gr.HTML(
+                """
+<img class="spinning-logo" src="https://diva-audio.github.io/static/DiVA-logo.png" alt="A Cute Small Robot with DiVA Written on It's Chest" style="height: 10vw; margin: auto;">
+"""
+            )
+        with gr.Column(scale=1):
+            input_audio = gr.Audio(
+                label="Input Audio",
+                sources=["microphone"],
+                type="numpy",
+                streaming=False,
+                waveform_options=gr.WaveformOptions(show_recording_waveform=False),
+            )
     with gr.Row():
         chatbot = gr.Chatbot(label="Conversation", type="messages")
-    with gr.Row():
-        output_audio = gr.Audio(label="Output Audio", streaming=True, autoplay=True)
+    with gr.Row(max_height="50vh"):
+        output_audio = gr.Audio(
+            label="Output Audio",
+            streaming=True,
+            autoplay=True,
+            visible=False,
+        )
     state = gr.State(value=AppState())
     stream = input_audio.start_recording(
         process_audio,