Spaces:
Runtime error
Runtime error
File size: 5,942 Bytes
f2142ae 6890e40 38381e8 6890e40 38381e8 6890e40 fd877b6 38381e8 4091c83 f2142ae 6890e40 4091c83 f2142ae 4091c83 f2142ae 4091c83 f2142ae 4091c83 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
import gradio as gr
from pathlib import Path
from huggingface_hub import list_repo_files, hf_hub_url
from collections import defaultdict
import requests
repo_id = 'nateraw/stable-diffusion-gallery'
def get_data(revision='main'):
data = defaultdict(list)
for file in list_repo_files(repo_id, repo_type='dataset', revision=revision):
path = Path(file)
if path.name == '.gitattributes':
continue
if path.suffix in ['.png', '.jpg', '.jpeg']:
data[path.parent.name].append(file)
prompts = []
for key in sorted(data.keys()):
prompt_cfg_url = hf_hub_url(repo_id=repo_id, filename=f"{key}/prompt_config.json", repo_type='dataset')
prompt_cfg = requests.get(prompt_cfg_url).json()
text = prompt_cfg.get('prompt')
prompts.append(text)
return data, prompts
def assembleHTML(data):
# Borrowed mostly from:
# https://huggingface.co/spaces/sd-concepts-library/stable-diffusion-conceptualizer
html_gallery = ''
html_gallery = html_gallery+'''
<div class="flex gr-gap gr-form-gap row gap-4 w-full flex-wrap" id="main_row">
'''
for key, values in data.items():
html_gallery = html_gallery+ f'''
<div class="gr-block gr-box relative w-full overflow-hidden border-solid border border-gray-200 gr-panel">
<div class="output-markdown gr-prose" style="max-width: 100%;">
<h3>
<a href="https://huggingface.co/datasets/nateraw/stable-diffusion-gallery/blob/main/{key}/prompt_config.json" target="_blank">
<code>{ key }</code>
</a>
</h3>
</div>
<div id="gallery" class="gr-block gr-box relative w-full overflow-hidden border-solid border border-gray-200">
<div class="wrap svelte-17ttdjv opacity-0"></div>
<div class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 border-b border-r border-gray-100 dark:bg-gray-900">
<span class="mr-2 h-[12px] w-[12px] opacity-80">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
</span> Images
</div>
<div class="overflow-y-auto h-full p-2" style="position: relative;">
<div class="grid gap-2 grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 svelte-1g9btlg pt-6">
'''
for image in values[:4]:
html_gallery = html_gallery + f'''
<button class="gallery-item svelte-1g9btlg">
<img alt="" loading="lazy" class="h-full w-full overflow-hidden object-contain" src="{hf_hub_url(repo_id, filename=image, repo_type='dataset')}">
</button>
'''
html_gallery = html_gallery+'''
</div>
<iframe style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;" aria-hidden="true" tabindex="-1" src="about:blank"></iframe>
</div>
</div>
</div>
'''
html_gallery = html_gallery+'''
</div>
'''
return html_gallery
css = '''
.gradio-container {font-family: 'IBM Plex Sans', sans-serif}
#top_title{margin-bottom: .5em}
#top_title h2{margin-bottom: 0; text-align: center}
/*#main_row{flex-wrap: wrap; gap: 1em; max-height: 550px; overflow-y: scroll; flex-direction: row}*/
#component-3{height: 760px; overflow: auto}
#component-9{position: sticky;top: 0;align-self: flex-start;}
@media (min-width: 768px){#main_row > div{flex: 1 1 32%; margin-left: 0 !important}}
.gr-prose code::before, .gr-prose code::after {content: "" !important}
::-webkit-scrollbar {width: 10px}
::-webkit-scrollbar-track {background: #f1f1f1}
::-webkit-scrollbar-thumb {background: #888}
::-webkit-scrollbar-thumb:hover {background: #555}
.gr-button {white-space: nowrap}
.gr-button:focus {
border-color: rgb(147 197 253 / var(--tw-border-opacity));
outline: none;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-border-opacity: 1;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
--tw-ring-opacity: .5;
}
#prompt_input{flex: 1 3 auto; width: auto !important;}
#prompt_area{margin-bottom: .75em}
#prompt_area > div:first-child{flex: 1 3 auto}
.animate-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#share-btn-container {
display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
}
#share-btn {
all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
}
#share-btn * {
all: unset;
}
'''
data, prompts = get_data()
with gr.Blocks(css=css) as demo:
with gr.Box().style(border=None):
html = gr.HTML(assembleHTML(data))
demo.launch(debug=True)
|