Update app.py

app.py

@@ -1,5 +1,4 @@
 #@title Prepare the Concepts Library to be used
-
 import requests
 import os
 import gradio as gr
@@ -9,9 +8,10 @@ from torch import autocast
 from diffusers import StableDiffusionPipeline
 from huggingface_hub import HfApi
 from transformers import CLIPTextModel, CLIPTokenizer
+import html
 
 api = HfApi()
-models_list = api.list_models(author="sd-concepts-library")
+models_list = api.list_models(author="sd-concepts-library", sort="likes", direction=-1)
 models = []
 
 pipe = StableDiffusionPipeline.from_pretrained("CompVis/stable-diffusion-v1-4", use_auth_token=True, revision="fp16", torch_dtype=torch.float16).to("cuda")
@@ -86,7 +86,53 @@ for model in models_list:
 #@markdown Click the `Running on public URL:` result to run the Gradio app
 
 SELECT_LABEL = "Select concept"
-
+def assembleHTML(model):
+  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 model in models:
+    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/{model["id"]}" target="_blank">
+            <code>{html.escape(model["token"])}</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> {model["concept_type"]}
+        </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 model["images"]:
+                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="file/{image}">
+                </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
+  
 def title_block(title, id):
   return gr.Markdown(f"### [`{title}`](https://huggingface.co/{id})")
 
@@ -211,10 +257,11 @@ with gr.Blocks(css=css) as demo:
           ''')
           with gr.Row(elem_id="main_row"):
                   image_blocks = []
-                  for i, model in enumerate(models):
-                    with gr.Box().style(border=None):
-                      title_block(model["token"], model["id"])
-                      image_blocks.append(image_block(model["images"], model["concept_type"]))
+                  #for i, model in enumerate(models):
+                  with gr.Box().style(border=None):
+                    gr.HTML(assembleHTML(models))
+                      #title_block(model["token"], model["id"])
+                      #image_blocks.append(image_block(model["images"], model["concept_type"]))
         with gr.Box():
                 with gr.Row(elem_id="prompt_area").style(mobile_collapse=False, equal_height=True):
                     text = gr.Textbox(
@@ -241,4 +288,4 @@ with gr.Blocks(css=css) as demo:
         inputs=inputs,
         outputs=infer_outputs
     )
-demo.launch(inline=False, debug=True)
+demo.launch(max_size=25)