From f9940b79dc9f67477cec3819dbfb250f5e92a658 Mon Sep 17 00:00:00 2001 From: ye7iaserag Date: Fri, 31 Mar 2023 04:56:49 +0200 Subject: [PATCH 1/5] Implement character gallery using Dataset --- extensions/gallery/script.py | 38 +++++++++++++++++++++++++----------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/extensions/gallery/script.py b/extensions/gallery/script.py index fbf23bc9..e96fe40a 100644 --- a/extensions/gallery/script.py +++ b/extensions/gallery/script.py @@ -1,20 +1,23 @@ from pathlib import Path - import gradio as gr - from modules.html_generator import get_image_cache +from modules.chat import load_character +from modules.shared import gradio, settings - -def generate_html(): +def generate_css(): css = """ - .character-gallery { + .character-gallery > .gallery { margin: 1rem 0; - display: grid; + display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-column-gap: 0.4rem; grid-row-gap: 1.2rem; } + .character-gallery > .label { + display: none !important; + } + .character-container { cursor: pointer; text-align: center; @@ -45,14 +48,16 @@ def generate_html(): overflow-wrap: anywhere; } """ + return css - container_html = f'
' +def generate_html(): + cards = [] # Iterate through files in image folder for file in sorted(Path("characters").glob("*")): if file.name.endswith(".json"): character = file.name.replace(".json", "") - container_html += f'
' + container_html = f'
' image_html = "
" for i in [ @@ -71,12 +76,23 @@ def generate_html(): container_html += f'{image_html} {character}' container_html += "
" + cards.append([container_html, character]) + + return cards + + +def select_character(evt: gr.SelectData): + return (evt.value[1]) - container_html += "
" - return container_html def ui(): with gr.Accordion("Character gallery", open=False): update = gr.Button("Refresh") - gallery = gr.HTML(value=generate_html()) + gr.HTML(value="") + gallery = gr.Dataset(components=[gr.HTML(visible=False)], + label="", + samples=generate_html(), + elem_classes=["character-gallery"] + ) update.click(generate_html, [], gallery) + gallery.select(select_character, None, gradio['character_menu']) \ No newline at end of file From 3737eafeaa1a5df97456f04b665e45e1586677a4 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Fri, 31 Mar 2023 00:48:50 -0300 Subject: [PATCH 2/5] Remove a border and allow more characters per pagination page --- css/chat.css | 4 ++++ extensions/gallery/script.py | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/css/chat.css b/css/chat.css index c8a9d70a..2015a80a 100644 --- a/css/chat.css +++ b/css/chat.css @@ -36,3 +36,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { .wrap.svelte-6roggh.svelte-6roggh { max-height: 92.5%; } + +.gallery-item.svelte-13hsdno.svelte-13hsdno.svelte-13hsdno { + border: 0 !important; +} diff --git a/extensions/gallery/script.py b/extensions/gallery/script.py index e96fe40a..1954e3d0 100644 --- a/extensions/gallery/script.py +++ b/extensions/gallery/script.py @@ -92,7 +92,8 @@ def ui(): gallery = gr.Dataset(components=[gr.HTML(visible=False)], label="", samples=generate_html(), - elem_classes=["character-gallery"] + elem_classes=["character-gallery"], + samples_per_page=50 ) update.click(generate_html, [], gallery) gallery.select(select_character, None, gradio['character_menu']) \ No newline at end of file From ec093a5af76e5a76327ae983b23805f09e8aaac8 Mon Sep 17 00:00:00 2001 From: ye7iaserag Date: Fri, 31 Mar 2023 06:54:24 +0200 Subject: [PATCH 3/5] Fix div alignment for long strings --- extensions/gallery/script.py | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/extensions/gallery/script.py b/extensions/gallery/script.py index 1954e3d0..15d740ca 100644 --- a/extensions/gallery/script.py +++ b/extensions/gallery/script.py @@ -18,6 +18,10 @@ def generate_css(): display: none !important; } + .character-gallery button.gallery-item { + display: contents; + } + .character-container { cursor: pointer; text-align: center; From d28a5c9569eeab5ac3c3e9f17802fa20241b9664 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Fri, 31 Mar 2023 02:01:13 -0300 Subject: [PATCH 4/5] Remove unnecessary css --- css/chat.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/css/chat.css b/css/chat.css index 2015a80a..c8a9d70a 100644 --- a/css/chat.css +++ b/css/chat.css @@ -36,7 +36,3 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { .wrap.svelte-6roggh.svelte-6roggh { max-height: 92.5%; } - -.gallery-item.svelte-13hsdno.svelte-13hsdno.svelte-13hsdno { - border: 0 !important; -} From 3b90d604d75255708bfba7d7b92f492d51dc4ccf Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Fri, 31 Mar 2023 02:01:48 -0300 Subject: [PATCH 5/5] Sort the imports --- extensions/gallery/script.py | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/extensions/gallery/script.py b/extensions/gallery/script.py index 15d740ca..c17d69ee 100644 --- a/extensions/gallery/script.py +++ b/extensions/gallery/script.py @@ -1,9 +1,12 @@ from pathlib import Path + import gradio as gr -from modules.html_generator import get_image_cache + from modules.chat import load_character +from modules.html_generator import get_image_cache from modules.shared import gradio, settings + def generate_css(): css = """ .character-gallery > .gallery {