Update app.py

app.py

@@ -19,7 +19,7 @@ def predict(image: PIL.Image.Image, score_threshold: float):
         result_html = result_html + '<span>' + str(label) + '</span><span>' + str(round(prob, 3)) + '</span></p>'
     result_html = '<div>' + result_html + '</div>'
     result_filter = {key: value for key, value in result_threshold.items() if not is_ignore(key, 1)}
-    result_text = '<div id="m5dd_result">' + ', '.join(result_filter.keys()) + '</div>'
+    result_text = ', '.join(result_filter.keys())
     return result_html, result_text
 
 def predict_batch(zip_file, score_threshold: float, progress=gr.Progress()):
@@ -34,7 +34,7 @@ def predict_batch(zip_file, score_threshold: float, progress=gr.Progress()):
                 result_threshold = genTag(image, score_threshold)
                 result_filter = {key: value for key, value in result_threshold.items() if not is_ignore(key, 2)}
                 tag = ', '.join(result_filter.keys())
-                result = result + str(file) + '\n' + str(tag) + '\n'
+                result = result + str(file) + '\n' + str(tag) + '\n\n'
     return result
 
 with gr.Blocks(css="style.css", js="script.js") as demo:
@@ -43,23 +43,26 @@ with gr.Blocks(css="style.css", js="script.js") as demo:
             with gr.Column(scale=1):
                 image = gr.Image(label='Upload a image',
                                  type='pil',
-                                 sources=["upload", "clipboard"],
-                                 height='20em')
+                                 elem_classes='m5dd_image',
+                                 sources=["upload", "clipboard"])
                 score_threshold = gr.Slider(label='Score threshold',
                                             minimum=0,
                                             maximum=1,
                                             step=0.05,
                                             value=0.5)
                 run_button = gr.Button('Run')
-                result_text = gr.HTML(value="<div></div>")
             with gr.Column(scale=2):
-                result_html = gr.HTML(value="<div></div>")
+                result_text = gr.Textbox(lines=3,
+                                         max_lines=3,
+                                         label='Result',
+                                         show_copy_button=True,
+                                         elem_id="m5dd_result")
+                result_html = gr.HTML(value="")
     with gr.Tab(label='Batch'):
         with gr.Row():
             with gr.Column(scale=1):
                 batch_file = gr.File(label="Upload a ZIP file containing images",
-                                     file_types=['.zip'],
-                                     height='20em')
+                                     file_types=['.zip'])
                 score_threshold2 = gr.Slider(label='Score threshold',
                                              minimum=0,
                                              maximum=1,
@@ -67,7 +70,8 @@ with gr.Blocks(css="style.css", js="script.js") as demo:
                                              value=0.5)
                 run_button2 = gr.Button('Run')
             with gr.Column(scale=2):
-                result_text2 = gr.Textbox(lines=5,
+                result_text2 = gr.Textbox(lines=20,
+                                          max_lines=20,
                                           label='Result',
                                           show_copy_button=True)
 

script.js

@@ -1,24 +1,20 @@
+async () => {
 
-document.addEventListener('click', function (event) {
-  let tagItem = event.target.closest('.m5dd_list')
-  let resultArea = event.target.closest('#m5dd_result')
-  if (tagItem) {
-    if (tagItem.classList.contains('use')) {
-      tagItem.classList.remove('use')
-    } else {
-      tagItem.classList.add('use')
-    }
-    document.getElementById('m5dd_result').innerText =
-      Array.from(document.querySelectorAll('.m5dd_list.use>span:nth-child(1)'))
+  document.addEventListener('click', function (event) {
+    let tagItem = event.target.closest('.m5dd_list')
+    if (tagItem) {
+      if (tagItem.classList.contains('use')) {
+        tagItem.classList.remove('use')
+      } else {
+        tagItem.classList.add('use')
+      }
+      document.querySelector('#m5dd_result textarea').value = Array
+        .from(document.querySelectorAll('.m5dd_list.use>span:nth-child(1)'))
         .map(v => v.innerText)
         .join(', ')
-  } else if (resultArea) {
-    const selection = window.getSelection()
-    selection.removeAllRanges()
-    const range = document.createRange()
-    range.selectNodeContents(resultArea)
-    selection.addRange(range)
-  } else {
-    return
-  }
-})
+    } else {
+      return
+    }
+  })
+
+}

style.css

@@ -21,3 +21,7 @@
   text-decoration: line-through;
   color: #ccc;
 }
+
+.m5dd_image .upload-container .image-frame {
+  height: 20em;
+}