Add zip and download file

.gitignore

@@ -0,0 +1 @@
+*.zip

app.py

@@ -1,9 +1,9 @@
 import gradio as gr
-import numpy as np
 import zipfile
+import os
 
 
-def add_image(camera: gr.Image, gallery: gr.Gallery):
+def add_image(camera, gallery):
     if gallery:
         images = gallery
         images.append(camera)
@@ -12,6 +12,26 @@ def add_image(camera: gr.Image, gallery: gr.Gallery):
         return [camera]
 
 
+def zip_gallery(gallery):
+    count = 0
+    if not gallery:
+        return gr.DownloadButton("Download", visible=False)
+    if os.path.isfile("image_data.zip"):
+        os.remove("image_data.zip")
+    zf = zipfile.ZipFile("image_data.zip", mode="w")
+    try:
+        for path, _ in gallery:
+            zf.write(path, f'image_{count}.png',
+                     compress_type=zipfile.ZIP_DEFLATED)
+            count = count + 1
+    except FileNotFoundError:
+        print("Error Occurred!")
+    finally:
+        zf.close()
+
+    return gr.DownloadButton("Download", value="image_data.zip", visible=True)
+
+
 with gr.Blocks(fill_height=True) as demo:
     with gr.Row():
         with gr.Column():
@@ -20,14 +40,41 @@ with gr.Blocks(fill_height=True) as demo:
             catch_btn = gr.Button("Capture", scale=0)
         with gr.Column():
             preview_img = gr.Image(visible=False)
+            gr.Markdown(
+                """
+                # How to Use
+                
+                1. Open Camera on left side, then click "Record" button on the camera screen
+
+                2. Click "Capture" button to capture image to gallery
+
+                3. After capture all image, click "Zip file" button to zip images
+
+                4. Download zip file by clicking "Download" button showed below
+
+                # 如何使用
+                
+                1. 點擊左側開啟攝影機，並按下"Record"按鈕讓攝影機能夠進行擷取
+
+                2. 點擊"Capture"按鈕，影像就會被擷取到下方的欄位中
+
+                3. 擷取影像完畢後，點擊下方的"Zip file"按鈕將影像打包並壓縮
+
+                4. 按下隨後出現的"Download"按鈕就能下載打包好的壓縮檔
+                
+                """
+            )
     with gr.Row():
         with gr.Column():
             gallery = gr.Gallery(
                 label="Collected images", show_label=False, elem_id="gallery", columns=[10], rows=[4], object_fit="contain", height="auto")
-            download_btn = gr.Button("Download", scale=0)
+            zip_btn = gr.Button("Zip file")
+            download_btn = gr.DownloadButton("Download", visible=False)
 
     catch_btn.click(add_image, [preview_img, gallery], [gallery])
     camera.stream(lambda s: s, camera, preview_img)
+    zip_btn.click(zip_gallery, gallery, download_btn)
+
 
 if __name__ == "__main__":
     demo.launch()