Commit 985c0b8e authored by Guillermo Moreno's avatar Guillermo Moreno

feat(extra-networks): add thumbs view style

parent c98cb0f8
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#000000" d="M13.18 19C13.35 19.72 13.64 20.39 14.03 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3H19C20.11 3 21 3.9 21 5V11.18C20.5 11.07 20 11 19.5 11C19.33 11 19.17 11 19 11.03V5H5V19H13.18M11.21 15.83L9.25 13.47L6.5 17H13.03C13.14 15.54 13.73 14.22 14.64 13.19L13.96 12.29L11.21 15.83M19 13.5V12L16.75 14.25L19 16.5V15C20.38 15 21.5 16.12 21.5 17.5C21.5 17.9 21.41 18.28 21.24 18.62L22.33 19.71C22.75 19.08 23 18.32 23 17.5C23 15.29 21.21 13.5 19 13.5M19 20C17.62 20 16.5 18.88 16.5 17.5C16.5 17.1 16.59 16.72 16.76 16.38L15.67 15.29C15.25 15.92 15 16.68 15 17.5C15 19.71 16.79 21.5 19 21.5V23L21.25 20.75L19 18.5V20Z" />
</svg>
...@@ -6,11 +6,13 @@ function setupExtraNetworksForTab(tabname){ ...@@ -6,11 +6,13 @@ function setupExtraNetworksForTab(tabname){
var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea') var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')
var refresh = gradioApp().getElementById(tabname+'_extra_refresh') var refresh = gradioApp().getElementById(tabname+'_extra_refresh')
var close = gradioApp().getElementById(tabname+'_extra_close') var close = gradioApp().getElementById(tabname+'_extra_close')
var view = gradioApp().getElementById(tabname+'_extra_view')
search.classList.add('search') search.classList.add('search')
tabs.appendChild(search) tabs.appendChild(search)
tabs.appendChild(refresh) tabs.appendChild(refresh)
tabs.appendChild(close) tabs.appendChild(close)
tabs.appendChild(view)
search.addEventListener("input", function(evt){ search.addEventListener("input", function(evt){
searchTerm = search.value.toLowerCase() searchTerm = search.value.toLowerCase()
......
...@@ -25,7 +25,7 @@ class ExtraNetworksPage: ...@@ -25,7 +25,7 @@ class ExtraNetworksPage:
def refresh(self): def refresh(self):
pass pass
def create_html(self, tabname): def create_html(self, tabname, view = 'cards'):
items_html = '' items_html = ''
for item in self.list_items(): for item in self.list_items():
...@@ -36,7 +36,7 @@ class ExtraNetworksPage: ...@@ -36,7 +36,7 @@ class ExtraNetworksPage:
items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs) items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
res = f""" res = f"""
<div id='{tabname}_{self.name}_cards' class='extra-network-cards'> <div id='{tabname}_{self.name}_cards' class='extra-network-{view}'>
{items_html} {items_html}
</div> </div>
""" """
...@@ -75,6 +75,7 @@ class ExtraNetworksUi: ...@@ -75,6 +75,7 @@ class ExtraNetworksUi:
self.button_save_preview = None self.button_save_preview = None
self.preview_target_filename = None self.preview_target_filename = None
self.view_dropdown = None
self.tabname = None self.tabname = None
...@@ -110,6 +111,7 @@ def create_ui(container, button, tabname): ...@@ -110,6 +111,7 @@ def create_ui(container, button, tabname):
filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False) filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)
button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh") button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh")
button_close = gr.Button('Close', elem_id=tabname+"_extra_close") button_close = gr.Button('Close', elem_id=tabname+"_extra_close")
ui.view_dropdown = gr.Dropdown(['cards', 'thumbs'], elem_id=tabname+"_extra_view", label="View as", value='cards')
ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False) ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False) ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
...@@ -117,16 +119,17 @@ def create_ui(container, button, tabname): ...@@ -117,16 +119,17 @@ def create_ui(container, button, tabname):
button.click(fn=lambda: gr.update(visible=True), inputs=[], outputs=[container]) button.click(fn=lambda: gr.update(visible=True), inputs=[], outputs=[container])
button_close.click(fn=lambda: gr.update(visible=False), inputs=[], outputs=[container]) button_close.click(fn=lambda: gr.update(visible=False), inputs=[], outputs=[container])
def refresh(): def refresh(view='cards'):
res = [] res = []
for pg in ui.stored_extra_pages: for pg in ui.stored_extra_pages:
pg.refresh() pg.refresh()
res.append(pg.create_html(ui.tabname)) res.append(pg.create_html(ui.tabname, view))
return res return res
button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages) ui.view_dropdown.change(fn=refresh, inputs=[ui.view_dropdown], outputs=ui.pages)
button_refresh.click(fn=refresh, inputs=[ui.view_dropdown], outputs=ui.pages)
return ui return ui
...@@ -139,7 +142,7 @@ def path_is_parent(parent_path, child_path): ...@@ -139,7 +142,7 @@ def path_is_parent(parent_path, child_path):
def setup_ui(ui, gallery): def setup_ui(ui, gallery):
def save_preview(index, images, filename): def save_preview(index, images, filename, view='cards'):
if len(images) == 0: if len(images) == 0:
print("There is no image in gallery to save as a preview.") print("There is no image in gallery to save as a preview.")
return [page.create_html(ui.tabname) for page in ui.stored_extra_pages] return [page.create_html(ui.tabname) for page in ui.stored_extra_pages]
...@@ -161,11 +164,11 @@ def setup_ui(ui, gallery): ...@@ -161,11 +164,11 @@ def setup_ui(ui, gallery):
image.save(filename) image.save(filename)
return [page.create_html(ui.tabname) for page in ui.stored_extra_pages] return [page.create_html(ui.tabname, view) for page in ui.stored_extra_pages]
ui.button_save_preview.click( ui.button_save_preview.click(
fn=save_preview, fn=save_preview,
_js="function(x, y, z){console.log(x, y, z); return [selected_gallery_index(), y, z]}", _js="function(x, y, z, a){console.log(x, y, z, a); return [selected_gallery_index(), y, z, a]}",
inputs=[ui.preview_target_filename, gallery, ui.preview_target_filename], inputs=[ui.preview_target_filename, gallery, ui.preview_target_filename, ui.view_dropdown],
outputs=[*ui.pages] outputs=[*ui.pages]
) )
...@@ -784,21 +784,79 @@ footer { ...@@ -784,21 +784,79 @@ footer {
display: inline-block; display: inline-block;
max-width: 16em; max-width: 16em;
margin: 0.3em; margin: 0.3em;
align-self: center;
} }
.extra-network-cards .nocards{ #txt2img_extra_view, #img2img_extra_view {
width: auto;
}
.extra-network-cards .nocards, .extra-network-thumbs .nocards{
margin: 1.25em 0.5em 0.5em 0.5em; margin: 1.25em 0.5em 0.5em 0.5em;
} }
.extra-network-cards .nocards h1{ .extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 1em; margin-bottom: 1em;
} }
.extra-network-cards .nocards li{ .extra-network-cards .nocards li, .extra-network-thumbs .nocards li{
margin-left: 0.5em; margin-left: 0.5em;
} }
.extra-network-thumbs {
display: flex;
flex-flow: row wrap;
gap: 10px;
}
.extra-network-thumbs .card {
height: 6em;
width: 6em;
cursor: pointer;
background-image: url('./file=html/card-no-preview.png');
background-size: cover;
background-position: center center;
position: relative;
}
.extra-network-thumbs .card:hover .additional a {
display: block;
}
.extra-network-thumbs .actions .additional a {
background-image: url('./file=html/image-update.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
display: none;
font-size: 0;
text-align: -9999;
background-color: #fff;
}
.extra-network-thumbs .actions .name {
position: absolute;
bottom: 0;
font-size: 10px;
padding: 3px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: rgba(0,0,0,.5);
}
.extra-network-thumbs .card:hover .actions .name {
white-space: normal;
word-break: break-all;
}
.extra-network-cards .card{ .extra-network-cards .card{
display: inline-block; display: inline-block;
margin: 0.5em; margin: 0.5em;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment