Update gradio

README.md

@@ -4,7 +4,7 @@ emoji: 👀
 colorFrom: gray
 colorTo: purple
 sdk: gradio
-sdk_version: 4.44.1
+sdk_version: 5.9.1
 app_file: app.py
 pinned: false
 ---

app.py

@@ -24,7 +24,7 @@ def predict_batch(zip_file, progress=gr.Progress()):
     with zipfile.ZipFile(zip_file) as zf:
         for file in progress.tqdm(zf.namelist()):
             print(file)
-            if file.endswith(".png") or file.endswith(".jpg") or file.endswith(".jpeg"):
+            if file.endswith(".png") or file.endswith(".jpg") or file.endswith(".jpeg") or file.endswith(".webp"):
                 image_file = zf.open(file)
                 image = PIL.Image.open(image_file)
                 image = image.convert("RGBA")
@@ -34,7 +34,7 @@ def predict_batch(zip_file, progress=gr.Progress()):
                 result = result + str(file) + '\n' + str(tag) + '\n\n'
     return result
 
-with gr.Blocks(css="style.css", js="script.js") as demo:
+with gr.Blocks(head_paths="head.html") as demo:
     with gr.Tab(label='Single'):
         with gr.Row():
             with gr.Column(scale=1):
@@ -42,11 +42,12 @@ with gr.Blocks(css="style.css", js="script.js") as demo:
                                  type='pil',
                                  elem_classes='m5dd_image',
                                  image_mode="RGBA",
+                                 show_fullscreen_button=False,
                                  sources=["upload", "clipboard"])
                 run_button = gr.Button('Run')
-                result_text = gr.HTML(value="")
+                result_text = gr.HTML(value="", elem_classes='m5dd_html', padding=False)
             with gr.Column(scale=2):
-                result_html = gr.HTML(value="")
+                result_html = gr.HTML(value="", elem_classes='m5dd_html', padding=False)
     with gr.Tab(label='Batch'):
         with gr.Row():
             with gr.Column(scale=1):

script.js → head.html

@@ -1,5 +1,45 @@
-async () => {
-
+<style>
+  .m5dd_list {
+    display: flex;
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: .5em;
+    user-select: none;
+  }  
+  .m5dd_list>span.label {
+    flex: 1;
+    padding: 0 .5em;
+  }
+  
+  .m5dd_list>span.prob {
+    color: #aaa;
+    padding: 0 .5em;
+  }
+  
+  .m5dd_list:nth-child(even) { background: #ECEDF0; }
+  .dark .m5dd_list:nth-child(even) { background: #1F2937; }
+  
+  .m5dd_list:not(.use)>span.label {
+    text-decoration: line-through;
+    color: #ccc;
+  }
+  
+  .m5dd_image .upload-container .image-frame {
+    height: 20em;
+  }
+  
+  .m5dd_image .upload-container .image-frame {
+    height: 20em;
+  }
+  .m5dd_image2 .image-container {
+    height: 20em;
+  }
+  .m5dd_html{
+    min-height: 6em;
+  }
+</style>
+  
+<script>
   document.addEventListener('click', function (event) {
     let tagItem = event.target.closest('.m5dd_list')
     let resultArea = event.target.closest('#m5dd_result')
@@ -44,5 +84,4 @@ async () => {
       return
     }
   })
-
-}
+</script>

style.css

@@ -1,36 +0,0 @@
-.m5dd_list {
-  display: flex;
-  cursor: pointer;
-  font-size: 1.2em;
-  padding: .5em;
-  user-select: none;
-}
-
-.m5dd_list>span.label {
-  flex: 1;
-  padding: 0 .5em;
-}
-
-.m5dd_list>span.prob {
-  color: #aaa;
-  padding: 0 .5em;
-}
-
-.m5dd_list:nth-child(even) { background: #ECEDF0; }
-.dark .m5dd_list:nth-child(even) { background: #1F2937; }
-
-.m5dd_list:not(.use)>span.label {
-  text-decoration: line-through;
-  color: #ccc;
-}
-
-.m5dd_image .upload-container .image-frame {
-  height: 20em;
-}
-
-.m5dd_image .upload-container .image-frame {
-  height: 20em;
-}
-.m5dd_image2 .image-container {
-  height: 20em;
-}