Update app.py

app.py

@@ -180,24 +180,31 @@ with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as demo:
 
 
     with gr.Tab("Gallery"):
-        gallery_html = gr.HTML()
+        gallery = gr.Gallery(
+            label="Generated Videos",
+            show_label=False,
+            elem_id="gallery",
+            columns=[5],
+            rows=[3],
+            object_fit="contain",
+            height="auto"
+        )
         selected_video = gr.Video(label="Selected Video")
         refresh_btn = gr.Button("Refresh Gallery")
     
     def update_gallery():
         gallery_items = load_gallery()
-        html = "<div style='display: flex; flex-wrap: wrap;'>"
-        for item in gallery_items:
-            html += f"<div style='margin: 10px;'><video width='200' height='200' controls><source src='{item['image']}' type='video/mp4'></video><p>{item['caption']}</p></div>"
-        html += "</div>"
-        return html
+        return [
+            (item['image'], item['caption'])
+            for item in gallery_items
+        ]
 
     def show_video(evt: gr.SelectData):
-        return evt.target.src
+        return evt.value[0]  # 선택된 비디오의 경로 반환
 
-    refresh_btn.click(fn=update_gallery, inputs=None, outputs=gallery_html)
-    demo.load(fn=update_gallery, inputs=None, outputs=gallery_html)
-    gallery_html.click(show_video, None, selected_video)
+    refresh_btn.click(fn=update_gallery, inputs=None, outputs=gallery)
+    demo.load(fn=update_gallery, inputs=None, outputs=gallery)
+    gallery.select(show_video, None, selected_video)
 
     input_text.submit(
         fn=respond, 
@@ -206,9 +213,8 @@ with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as demo:
     ).then(
         fn=update_gallery,
         inputs=None,
-        outputs=gallery_html
+        outputs=gallery
     )
 
 if __name__ == "__main__":
     demo.launch()
-