Spaces:
Runtime error
Runtime error
| 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) | |