Add application file

app.py

@@ -61,7 +61,7 @@ st.markdown(f"### Showing {len(df)} results")
 if len(df) == 0:
     st.warning("No matches found.")
 else:
-    def render_audio_html(audio_bytes):
+    def render_audio_tag(audio_bytes, index):
         try:
             if isinstance(audio_bytes, (bytes, bytearray, memoryview)):
                 data = bytes(audio_bytes)
@@ -72,32 +72,43 @@ else:
             with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp:
                 tmp.write(data)
                 tmp.flush()
-                return f'<audio controls style="height:20px;width:100px;"><source src="file://{tmp.name}" type="audio/mpeg"></audio>'
+                return f'<audio controls preload="metadata" style="height:20px;width:100px;"><source src="file://{tmp.name}" type="audio/mpeg"></audio>'
         except Exception:
             return ""
 
-    df["Audio"] = df["audio"].apply(render_audio_html)
-    df = df.drop(columns=["audio"])
-    df = df[["id", "channel", "video_id", "speaker", "start_time", "end_time", "upload_date", "text", "pos_tags", "Audio"]]
-
-    st.markdown("### Results Table (Sortable with Audio Column)")
+    df["audio_player"] = [render_audio_tag(b, i) for i, b in enumerate(df["audio"])]
+    df_display = df.drop(columns=["audio"])
 
     from streamlit.components.v1 import html
 
-    def generate_table_with_audio(df):
-        table_html = "<table border='1' style='border-collapse: collapse; width:100%; font-size:13px;'>"
-        table_html += "<thead><tr>"
-        for col in df.columns:
-            table_html += f"<th>{col}</th>"
-        table_html += "</tr></thead><tbody>"
-
+    def display_html_table(df):
+        table_html = """
+        <table border='1' style='border-collapse:collapse;width:100%;font-size:13px;'>
+            <thead>
+                <tr>
+                    <th style='width:8em;'>id</th>
+                    <th>channel</th>
+                    <th>video_id</th>
+                    <th>speaker</th>
+                    <th>start_time</th>
+                    <th>end_time</th>
+                    <th>upload_date</th>
+                    <th>text</th>
+                    <th>pos_tags</th>
+                    <th>audio</th>
+                </tr>
+            </thead>
+            <tbody>
+        """
         for _, row in df.iterrows():
             table_html += "<tr>"
-            for col in df.columns:
+            for col in ["id", "channel", "video_id", "speaker", "start_time", "end_time", "upload_date", "text", "pos_tags"]:
                 table_html += f"<td>{row[col]}</td>"
+            table_html += f"<td>{row['audio_player']}</td>"
             table_html += "</tr>"
-
         table_html += "</tbody></table>"
         return table_html
 
-    html(generate_table_with_audio(df), height=600, scrolling=True)
+    st.markdown("### Results Table (Sortable with Audio Column)")
+    html(display_html_table(df_display), height=800, scrolling=True)
+