looks nicer

app.py

@@ -9,7 +9,6 @@ df = pd.read_csv(
 # All numbers to .2f
 df = df.round(2)
 # Rename columns
-print(df.columns)
 df.columns = [
     "game_name",
     "speakers",
@@ -25,64 +24,60 @@ df.columns = [
 ]
 
 
-def create_image_md(game_name, spec_num):
-    url = f"https://huggingface.co/datasets/litagin/Galgame_Dataset_stats/resolve/main/specs/{game_name}/spec{spec_num}.png"
+def gallery_images(game_name):
+    """与えられたゲーム名に基づいて画像のリストを生成する"""
+    images = [
+        f"https://huggingface.co/datasets/litagin/Galgame_Dataset_stats/resolve/main/specs/{game_name}/spec{i}.png"
+        for i in range(1, 6)
+    ]
+    return images
 
-    # Add clickable link that leads to the image URL
-    return f"[![spec{spec_num}]({url})]({url})"
 
+def update_gallery(event: gr.SelectData):
+    """行がクリックされた時にGalleryを更新する"""
+    game_name = event.row_value[0]
+    return f"## `{game_name}`", gallery_images(game_name)
 
-# 新しい列を追加
-for i in range(1, 6):
-    df[f"spec{i}"] = df["game_name"].apply(lambda x: create_image_md(x, i))
 
 # 必要な列だけを選択
 df_display = df[
-    [
-        "game_name",
-        "speakers",
-        "mono",
-        "stereo",
-        "duration",
-        "bitrate",
-        "sr",
-        "spec1",
-        "spec2",
-        "spec3",
-        "spec4",
-        "spec5",
-    ]
+    ["game_name", "speakers", "mono", "stereo", "duration", "bitrate", "sr"]
 ]
+
 md = """
 # Galgame_Dataset Stats Viewer
 
-- Viewer for [stats and 5 spectrograms](https://huggingface.co/datasets/litagin/Galgame_Dataset_stats) of each game in [OOPPEENN/Galgame_Dataset](https://huggingface.co/datasets/OOPPEENN/Galgame_Dataset)
-- `bitrate`: in kbps
-- `sr`: in kHz
-- `duration`: in hours
+- Viewer for stats of each game in [OOPPEENN/Galgame_Dataset](https://huggingface.co/datasets/OOPPEENN/Galgame_Dataset)
+- `bitrate`: bitrate in kbps
+- `sr`: sample rate in kHz
+- `duration`: total duration in hours
+"""
+
+HEIGHT = 500
+
+CSS = f"""
+.qa-pairs .table-wrap {{
+    min-height: {HEIGHT}px;
+    max-height: {HEIGHT}px;
+}}
 """
 
-with gr.Blocks() as app:
+with gr.Blocks(css=CSS) as app:
     gr.Markdown(md)
-    gr.DataFrame(
-        df_display,
-        elem_id="df",
-        datatype=[
-            "str",
-            "number",
-            "number",
-            "number",
-            "number",
-            "number",
-            "number",
-            "markdown",
-            "markdown",
-            "markdown",
-            "markdown",
-            "markdown",
-        ],
-        column_widths=[100, 100, 100, 100, 100, 100, 100, 300, 300, 300, 300, 300],
-        wrap=True,
-    )
+    with gr.Row():
+        with gr.Column():
+            table = gr.DataFrame(
+                df_display,
+                column_widths=[200, 100, 100, 100, 100, 100, 100],
+                wrap=True,
+                elem_classes="qa-pairs",
+            )
+        with gr.Column():
+            game_name = gr.Markdown("## Click on a row to see the gallery")
+            gallery = gr.Gallery(preview=True)
+            table.select(
+                fn=update_gallery,
+                outputs=[game_name, gallery],
+            )
 
 app.launch(inbrowser=True)