Update

app.py

@@ -2,10 +2,6 @@
 
 from __future__ import annotations
 
-import os
-import pathlib
-import tarfile
-
 import deepdanbooru as dd
 import gradio as gr
 import huggingface_hub
@@ -13,21 +9,6 @@ import numpy as np
 import PIL.Image
 import tensorflow as tf
 
-DESCRIPTION = '# [KichangKim/DeepDanbooru](https://github.com/KichangKim/DeepDanbooru)'
-
-
-def load_sample_image_paths() -> list[pathlib.Path]:
-    image_dir = pathlib.Path('images')
-    if not image_dir.exists():
-        path = huggingface_hub.hf_hub_download(
-            'public-data/sample-images-TADNE',
-            'images.tar.gz',
-            repo_type='dataset')
-        with tarfile.open(path) as f:
-            f.extractall()
-    return sorted(image_dir.glob('*'))
-
-
 def load_model() -> tf.keras.Model:
     path = huggingface_hub.hf_hub_download('public-data/DeepDanbooru',
                                            'model-resnet_custom_v3.h5')
@@ -47,9 +28,7 @@ model = load_model()
 labels = load_labels()
 
 
-def predict(
-        image: PIL.Image.Image, score_threshold: float
-) -> tuple[dict[str, float], dict[str, float], str]:
+def predict(image: PIL.Image.Image, score_threshold: float):
     _, height, width, _ = model.input_shape
     image = np.asarray(image)
     image = tf.image.resize(image,
@@ -65,24 +44,51 @@ def predict(
     indices = np.argsort(probs)[::-1]
     result_all = dict()
     result_threshold = dict()
+    result_html = ''
     for index in indices:
         label = labels[index]
         prob = probs[index]
         result_all[label] = prob
         if prob < score_threshold:
             break
+        result_html = result_html + '<p class="m5dd_list use"><span>' + str(label) + '</span><span>' + str(round(prob, 3)) + '</span></p>'
         result_threshold[label] = prob
-    result_text = ', '.join(result_all.keys())
-    return result_threshold, result_all, result_text
-
-
-image_paths = load_sample_image_paths()
-examples = [[path.as_posix(), 0.5] for path in image_paths]
-
-with gr.Blocks(css='style.css') as demo:
-    gr.Markdown(DESCRIPTION)
+    result_text = ', '.join(result_threshold.keys())
+    result_text = '<div id="m5dd_result">' + str(result_text) + '</div>'
+    result_html = '<div>' + str(result_html) + '</div>'
+    return result_html, result_text
+
+js = """
+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)'))
+                .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
+        }
+    })
+}
+"""
+
+with gr.Blocks(css="style.css") as demo:
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=1):
             image = gr.Image(label='Input', type='pil')
             score_threshold = gr.Slider(label='Score threshold',
                                         minimum=0,
@@ -90,27 +96,16 @@ with gr.Blocks(css='style.css') as demo:
                                         step=0.05,
                                         value=0.5)
             run_button = gr.Button('Run')
-        with gr.Column():
-            with gr.Tabs():
-                with gr.Tab(label='Output'):
-                    result = gr.Label(label='Output', show_label=False)
-                with gr.Tab(label='JSON'):
-                    result_json = gr.JSON(label='JSON output',
-                                          show_label=False)
-                with gr.Tab(label='Text'):
-                    result_text = gr.Text(label='Text output',
-                                          show_label=False,
-                                          lines=5)
-    gr.Examples(examples=examples,
-                inputs=[image, score_threshold],
-                outputs=[result, result_json, result_text],
-                fn=predict,
-                cache_examples=os.getenv('CACHE_EXAMPLES') == '1')
+            result_text = gr.HTML(value="<div></div>")
+        with gr.Column(scale=3):
+            result_html = gr.HTML(value="<div></div>")
 
     run_button.click(
         fn=predict,
         inputs=[image, score_threshold],
-        outputs=[result, result_json, result_text],
+        outputs=[result_html, result_text],
         api_name='predict',
     )
+    demo.load(None,None,None,_js=js)
+
 demo.queue().launch()

ignoreTag.txt

@@ -0,0 +1,62 @@
+uncensored,
+mosaic_censoring,
+pointless_censoring,
+convenient_censoring,
+bar_censor,
+heart_censor,
+censored,
+twitter_username,
+patreon_username,
+signature,
+watermark,
+artist_name,
+character_name,
+copyright_name,
+artist_name,
+virtual_youtuber,
+eyebrows_visible_through_hair,
+eyes_visible_through_hair,
+hair_between_eyes,
+web_address,
+bangs,
+monochrome,
+letterboxed,
+bad_feet,
+oekaki,
+holding_hands,
+nail_polish,
+sandwiched,
+symbol-shaped_pupils,
+greyscale,
+sketch,
+speech_bubble,
+spoken_heart,
+spoken_musical_note,
+spoken_question_mark,
+spoken_sweatdrop,
+spoken_squiggle,
+spoken_object,
+letterboxed,
+spoken_interrobang,
+spoken_exclamation_mark,
+spoken_anger_vein,
+spoken_blush,
+thought_bubble,
+toe_scrunch,
+character_censor,
+novelty_censor,
+aqua_nails,
+black_nails,
+green_nails,
+fingernails,
+multicolored_nails,
+nail_art,
+orange_nails,
+red_nails,
+pink_nails,
+purple_nails,
+toenail_polish,
+toenails,
+yellow_nails,
+blue_nails,
+interlocked_fingers,

ignoreTag2.txt

@@ -0,0 +1,3 @@
+rating:safe,
+rating:questionable,
+rating:explicit,

style.css

@@ -1,3 +1,23 @@
-h1 {
-  text-align: center;
+.m5dd_list {
+  display: flex;
+  cursor: pointer;
+  font-size: 1.2em;
+  padding: 0.2em 0.5em;
+}
+
+.m5dd_list>span:nth-child(1) {
+  flex: 1;
+}
+
+.m5dd_list>span:nth-child(2) {
+  color: #aaa;
+}
+
+.m5dd_list:nth-child(even) {
+  background: #ecedf0;
+}
+
+.m5dd_list:not(.use)>span {
+  text-decoration: line-through;
+  color: #ccc;
 }