create button dom

app.py

@@ -7,16 +7,13 @@ import PIL.Image
 import zipfile
 from genTag import genTag
 from checkIgnore import is_ignore
+from createTagDom import create_tag_dom
 
 def predict(image: PIL.Image.Image, score_threshold: float):
     result_threshold = genTag(image, score_threshold)
     result_html = ''
     for label, prob in result_threshold.items():
-        if is_ignore(label, 1):
-            result_html += '<p class="m5dd_list">'
-        else:
-            result_html += '<p class="m5dd_list use">'
-        result_html = result_html + '<span>' + str(label) + '</span><span>' + str(round(prob, 3)) + '</span></p>'
+        result_html += create_tag_dom(label, is_ignore(label, 1), prob)
     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>'

createTagDom.py

@@ -0,0 +1,20 @@
+#!/usr/bin/env python
+
+from __future__ import annotations
+
+def create_tag_dom(label, ignore, prob):
+    result_html = ''
+    if ignore:
+        result_html += '<div class="m5dd_list">'
+    else:
+        result_html += '<div class="m5dd_list use">'
+    result_html += '<span class="up action">🔼</span>'
+    result_html += '<span class="down action">🔽</span>'
+    result_html += '<span class="label action">' + str(label) + '</span>'
+    result_html += '<span class="prob">' + str(round(prob, 3)) + '</span>'
+    result_html += '<a class="wiki action" href="https://danbooru.donmai.us/wiki_pages/' + label + '" target="_blank">📙</a>'
+    result_html += '<span class="add action">➕</span>'
+    result_html += '<span class="dec action">➖</span>'
+    result_html += '</div>'
+
+    return result_html

script.js

@@ -4,15 +4,36 @@ async () => {
     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')
+      let labelItem = event.target.closest('span.label')
+      let upItem = event.target.closest('span.up')
+      let downItem = event.target.closest('span.down')
+      let addItem = event.target.closest('span.add')
+      let decItem = event.target.closest('span.dec')
+      let actionItem = event.target.closest('span.action')
+      if (labelItem) {
+        if (tagItem.classList.contains('use')) {
+          tagItem.classList.remove('use')
+        } else {
+          tagItem.classList.add('use')
+        }
+      }
+      if (upItem) { }
+      if (downItem) { }
+      if (addItem) {
+        let label = tagItem.querySelector('span.label').innerText
+        tagItem.querySelector('span.label').innerText = `(${label})`
+      }
+      if (decItem) {
+        let label = tagItem.querySelector('span.label').innerText
+        label = label.replace(/^\s*\(\s*(.+?)\s*\)\s*$/, '$1')
+        tagItem.querySelector('span.label').innerText = label
+      }
+      if (actionItem) {
+        document.getElementById('m5dd_result').innerText =
+          Array.from(document.querySelectorAll('.m5dd_list.use>span.label'))
+            .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()

style.css

@@ -5,11 +5,11 @@
   padding: 0.2em 0.5em;
 }
 
-.m5dd_list>span:nth-child(1) {
+.m5dd_list>span.label {
   flex: 1;
 }
 
-.m5dd_list>span:nth-child(2) {
+.m5dd_list>span.prob {
   color: #aaa;
 }
 
@@ -17,7 +17,7 @@
   background: #ecedf0;
 }
 
-.m5dd_list:not(.use)>span {
+.m5dd_list:not(.use)>span.label {
   text-decoration: line-through;
   color: #ccc;
 }