html output for listen

app.py

@@ -22,7 +22,7 @@ DEFAULT_LANGS = {'Igbo':'ibo','Yoruba':'yor','Hausa':'hau'}
 repo = Repository(
     local_dir="data", clone_from=DATASET_REPO_URL, use_auth_token=HF_TOKEN
 )
-#repo.git_pull()
+repo.git_pull()
 
 os.makedirs(AUDIO_PATH,exist_ok=True)
 
@@ -74,7 +74,23 @@ def display_records():
     langs=df['language'].values
     audios = df['audio'].values
     texts=df['text'].values
-    return langs[0],audios[0],texts[0]
+
+    html = """<div>
+                <table style="width:100%;border=1;text-align: center">
+                    <tr>
+                        <th>language</th>
+                        <th>audio</th>
+                        <th>text</th>
+                    </tr>""" 
+    for lang, audio, text in zip(langs,audios,texts):
+        html+= f"""<tr>
+                    <td>{lang}</td>
+                    <td><audio controls><source src="{audio}" type="audio/wav"> </audio></td>
+                    <td>{text}</td>
+                </tr>"""      
+    html+="</table></div>"
+    return html
+    #return langs[0],audios[0],texts[0]
     #return df 
 
 
@@ -110,7 +126,7 @@ with block:
         with gr.TabItem('Listen') as listen_tab:
             gr.Markdown("Listen to the recordings contributed. You can find them [here](https://huggingface.co/datasets/chrisjay/crowd-speech-africa).")
             listen = gr.Button("Listen")
-            listen.click(display_records,inputs=[],outputs =[gr.outputs.Textbox(label='language'),gr.outputs.Audio(),gr.outputs.Textbox(label='text')] )
+            listen.click(display_records,inputs=[],outputs=gr.outputs.HTML() )