add headers

app.py

@@ -1,3 +1,5 @@
+import os
+
 import numpy as np
 import torch
 import gradio as gr
@@ -24,15 +26,38 @@ def process(input_image: np.ndarray, prompt: str):
     ]
 
 
+def read_content(file_path: str) -> str:
+    """read the content of target file
+    """
+    with open(file_path, 'r', encoding='utf-8') as f:
+        content = f.read()
+
+    return content
+
+
+image_dir = 'examples'
+image_list = [os.path.join(image_dir, file) for file in os.listdir(image_dir)]
+
 block = gr.Blocks().queue()
 with block:
     with gr.Row():
-        gr.Markdown("## Control Stable Diffusion with Segmentation Maps")
+        gr.HTML(read_content("header.html"))
     with gr.Row():
         with gr.Column():
             input_image = gr.Image(type="numpy")
             prompt = gr.Textbox(label="Prompt")
             run_button = gr.Button(value="Run")
+            gr.Examples(image_list, inputs=[input_image], label="Examples - Input Images", examples_per_page=12)
+
+            gr.HTML(
+                """
+                    <div class="footer">
+                    
+                        <p> This repo based on Unet from <a style="text-decoration: underline;" href="https://huggingface.co/spaces/wildoctopus/cloth-segmentation">cloth-segmentation</a>
+        It's uses pre-trained U2NET to extract Upper body(red), Lower body(green), Full body(blue) masks, and then
+        run StableDiffusionXLControlNetPipeline with trained controlnet to generate image conditioned on this masks.
+                        </p>
+                """)
 
         with gr.Column():
             result_gallery = gr.Gallery(label='Output', show_label=False, elem_id="gallery")

example_app.py

@@ -1,110 +0,0 @@
-import os
-
-import gradio as gr
-
-
-def read_content(file_path: str) -> str:
-    """read the content of target file
-    """
-    with open(file_path, 'r', encoding='utf-8') as f:
-        content = f.read()
-
-    return content
-
-
-def run(img):
-    return img
-
-
-# Define input and output interfaces
-input_image = gr.Image(label="Input Image", type="pil")
-
-# Define the Gradio interface
-cloth_seg_image = gr.Image(label="Cloth Segmentation", type="pil")
-
-title = "Demo for Cloth Segmentation"
-description = "An app for Cloth Segmentation"
-inputs = [input_image]
-outputs = [cloth_seg_image]
-
-css = '''
-.container {max-width: 1150px;margin: auto;padding-top: 1.5rem}
-#image_upload{min-height:400px}
-#image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 400px}
-#mask_radio .gr-form{background:transparent; border: none}
-#word_mask{margin-top: .75em !important}
-#word_mask textarea:disabled{opacity: 0.3}
-.footer {margin-bottom: 45px;margin-top: 35px;text-align: center;border-bottom: 1px solid #e5e5e5}
-.footer>p {font-size: .8rem; display: inline-block; padding: 0 10px;transform: translateY(10px);background: white}
-.dark .footer {border-color: #303030}
-.dark .footer>p {background: #0b0f19}
-.acknowledgments h4{margin: 1.25em 0 .25em 0;font-weight: bold;font-size: 115%}
-#image_upload .touch-none{display: flex}
-@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;
-}
-#share-btn-container div:nth-child(-n+2){
-    width: auto !important;
-    min-height: 0px !important;
-}
-#share-btn-container .wrap {
-    display: none !important;
-}
-'''
-example = {}
-image_dir = 'examples'
-
-image_list = [os.path.join(image_dir, file) for file in os.listdir(image_dir)]
-image_list.sort()
-
-image_blocks = gr.Blocks(css=css)
-with image_blocks as demo:
-    gr.HTML(read_content("header.html"))
-    with gr.Group():
-        with gr.Group():
-            with gr.Row():
-                with gr.Column():
-                    image = gr.Image(elem_id="image_upload", type="pil", label="Input Image")
-
-                with gr.Column():
-                    image_out = gr.Image(label="Output", elem_id="output-img")
-
-            with gr.Row():
-                with gr.Column():
-                    gr.Examples(image_list, inputs=[image], label="Examples - Input Images", examples_per_page=12)
-                with gr.Column():
-                    with gr.Row(elem_id="prompt-container"):
-                        btn = gr.Button("Run!")
-
-            btn.click(fn=run, inputs=[image], outputs=[image_out])
-
-            gr.HTML(
-                """
-                    <div class="footer">
-                        <p>Model by <a href="" style="text-decoration: underline;" target="_blank">WildOctopus</a> - Gradio Demo by 🤗 Hugging Face
-                        </p>
-                    </div>
-                    <div class="acknowledgments">
-                        <p><h4>ACKNOWLEDGEMENTS</h4></p>
-                        <p>
-                        U2net model is from original u2net repo. Thanks to <a href="https://github.com/xuebinqin/U-2-Net" style="text-decoration: underline;" target="_blank">Xuebin Qin</a> for amazing repo.</p>
-<p>Codes are modified from <a href="https://github.com/levindabhi/cloth-segmentation" style="text-decoration: underline;" target="_blank">levindabhi/cloth-segmentation</a>
-        </p>
-                """
-            )
-
-image_blocks.launch()

header.html

@@ -7,18 +7,18 @@
           margin-bottom: 10px;
         ">
       <h1 style="font-weight: 900; align-items: center; margin-bottom: 7px; margin-top: 20px;">
-        Cloth Segmentation
+        Fashion Controlnet SDXL-1.0
       </h1>
     </div>
     <div>
       <p style="align-items: center; margin-bottom: 7px;">
-        Cloth Segmentation gradio demo script using pre-trained U2NET. Extract fashion from Human potrait.
+        Image generation gradio demo condition on clothes.
       </p>
       <p style="align-items: center; margin-bottom: 7px;">
-        Upload a image and wait for the model to generate the segmentation map.
+        Upload an image, enter prompt and wait for the model to generate the image.
       </p>
       <p style="align-items: center; margin-bottom: 7px;">
-        If you like this demo, please help to ⭐ the <a style="text-decoration: underline;" href="https://github.com/wildoctopus/huggingface-cloth-segmentation">Github Repo</a> 😊.
+        If you like this demo, please help to ⭐ the <a style="text-decoration: underline;" href="TODO">Github Repo</a> 😊.
       </p>
       <p>You can skip the queue by duplicating this space and upgrading to gpu in settings.