Update script.js

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 = ', '.join(result_filter.keys())
+    result_text = '<div id="m5dd_result">' + ', '.join(result_filter.keys()) + '</div>'
     return result_html, result_text
 
 def predict_batch(zip_file, score_threshold: float, progress=gr.Progress()):
@@ -48,15 +48,11 @@ with gr.Blocks(css="style.css", js="script.js") as demo:
                 score_threshold = gr.Slider(label='Score threshold',
                                             minimum=0,
                                             maximum=1,
-                                            step=0.05,
+                                            step=0.1,
                                             value=0.3)
                 run_button = gr.Button('Run')
+                result_text = gr.HTML(value="")
             with gr.Column(scale=2):
-                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():
@@ -66,14 +62,15 @@ with gr.Blocks(css="style.css", js="script.js") as demo:
                 score_threshold2 = gr.Slider(label='Score threshold',
                                              minimum=0,
                                              maximum=1,
-                                             step=0.05,
+                                             step=0.1,
                                              value=0.3)
                 run_button2 = gr.Button('Run')
             with gr.Column(scale=2):
                 result_text2 = gr.Textbox(lines=20,
                                           max_lines=20,
                                           label='Result',
-                                          show_copy_button=True)
+                                          show_copy_button=True,
+                                          autoscroll=False)
 
     run_button.click(
         fn=predict,

script.js

@@ -2,16 +2,23 @@ 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.querySelector('#m5dd_result textarea').value = Array
-        .from(document.querySelectorAll('.m5dd_list.use>span:nth-child(1)'))
-        .map(v => v.innerText)
-        .join(', ')
+      document.getElementById('m5dd_result').innerText =
+        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
     }