adds html description to app

README.md

@@ -13,12 +13,10 @@ license: creativeml-openrail-m
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 ### Notes on Gradio changes
-- is there a way to stop the loading icon appearing? Would rather copy last input than flicker
 - onclick events for canvas? we can draw, but can I get coordinates?
 - checkboxes seem a bit busted with indexes
 - set canvas default to segmentation output, make small edits rather than doing whole thing
 
 ### ToDos:
-- [ ] inverse mask
 - [ ] click support
 - [ ] draw on mask

app.css

@@ -0,0 +1,114 @@
+.gradio-container {
+    font-family: 'IBM Plex Sans', sans-serif;
+}
+.gr-button {
+    color: white;
+    border-color: black;
+    background: black;
+}
+input[type='range'] {
+    accent-color: black;
+}
+.dark input[type='range'] {
+    accent-color: #dfdfdf;
+}
+.container {
+    max-width: 730px;
+    margin: auto;
+    padding-top: 1.5rem;
+}
+#gallery {
+    min-height: 22rem;
+    margin-bottom: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    border-bottom-right-radius: .5rem !important;
+    border-bottom-left-radius: .5rem !important;
+}
+#gallery>div>.h-full {
+    min-height: 20rem;
+}
+.details:hover {
+    text-decoration: underline;
+}
+.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;
+}
+#advanced-btn {
+    font-size: .7rem !important;
+    line-height: 19px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    padding: 2px 8px;
+    border-radius: 14px !important;
+}
+#advanced-options {
+    display: none;
+    margin-bottom: 20px;
+}
+.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%;
+}
+#container-advanced-btns{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+.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;
+}
+.gr-form{
+    flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
+}
+#prompt-container{
+    gap: 0;
+}

app.py

@@ -157,9 +157,12 @@ def fn_diffusion(
 
     return inpainted_image
 
-demo = gr.Blocks()
+demo = gr.Blocks(css=open('app.css').read())
 
 with demo:
+    gr.HTML(open('app_header.html').read())
+    # gr.Markdown("# Stable Diffusion Inpainting Segmentation")
+
     # Input image control
     input_image = gr.Image(value="http://images.cocodataset.org/val2017/000000039769.jpg", type='pil', label="Input Image")
 
@@ -190,6 +193,8 @@ with demo:
 
         inpainted_image = gr.Image(type='pil', label="Inpainted Image")
 
+    # TODO: saw a better way of handling many inputs online..
+    # forgot where though
     update_mask_inputs = [input_image, mask_storage, mask_checkboxes, max_slider, min_slider, invert_mask]
     update_mask_outputs = [mask_image, masked_image]
 
@@ -201,7 +206,6 @@ with demo:
     bt_masks.click(fn_segmentation, inputs=[input_image, max_slider, min_slider], outputs=[mask_storage, mask_checkboxes, mask_image, masked_image])
 
     # Update mask callbacks
-    # TODO: can we replace this with `mask_image.change`? Not sure if it will actively update.
     max_slider.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
     min_slider.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
     mask_checkboxes.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
@@ -216,5 +220,6 @@ with demo:
         guidance_slider, 
         negative_prompt
     ], outputs=inpainted_image)
+    gr.HTML(open('app_license.html').read())
 
 demo.launch()

app_header.html

@@ -0,0 +1,58 @@
+<div style="text-align: center; max-width: 650px; margin: 0 auto;">
+    <div
+      style="
+        display: inline-flex;
+        align-items: center;
+        gap: 0.8rem;
+        font-size: 1.75rem;
+      "
+    >
+      <svg
+        width="0.65em"
+        height="0.65em"
+        viewBox="0 0 115 115"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="23" height="23" fill="white"></rect>
+        <rect y="69" width="23" height="23" fill="white"></rect>
+        <rect x="23" width="23" height="23" fill="#AEAEAE"></rect>
+        <rect x="23" y="69" width="23" height="23" fill="#AEAEAE"></rect>
+        <rect x="46" width="23" height="23" fill="white"></rect>
+        <rect x="46" y="69" width="23" height="23" fill="white"></rect>
+        <rect x="69" width="23" height="23" fill="black"></rect>
+        <rect x="69" y="69" width="23" height="23" fill="black"></rect>
+        <rect x="92" width="23" height="23" fill="#D9D9D9"></rect>
+        <rect x="92" y="69" width="23" height="23" fill="#AEAEAE"></rect>
+        <rect x="115" y="46" width="23" height="23" fill="white"></rect>
+        <rect x="115" y="115" width="23" height="23" fill="white"></rect>
+        <rect x="115" y="69" width="23" height="23" fill="#D9D9D9"></rect>
+        <rect x="92" y="46" width="23" height="23" fill="#AEAEAE"></rect>
+        <rect x="92" y="115" width="23" height="23" fill="#AEAEAE"></rect>
+        <rect x="92" y="69" width="23" height="23" fill="white"></rect>
+        <rect x="69" y="46" width="23" height="23" fill="white"></rect>
+        <rect x="69" y="115" width="23" height="23" fill="white"></rect>
+        <rect x="69" y="69" width="23" height="23" fill="#D9D9D9"></rect>
+        <rect x="46" y="46" width="23" height="23" fill="black"></rect>
+        <rect x="46" y="115" width="23" height="23" fill="black"></rect>
+        <rect x="46" y="69" width="23" height="23" fill="black"></rect>
+        <rect x="23" y="46" width="23" height="23" fill="#D9D9D9"></rect>
+        <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
+        <rect x="23" y="69" width="23" height="23" fill="black"></rect>
+      </svg>
+      <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 7px">
+        Stable Diffusion x Segmentation Masking 😷
+      </h1>
+    </div>
+    <p style="margin-bottom: 10px; font-size: 94%">
+      Stable Diffusion is a state of the art text-to-image model that generates
+      images from text. Finetuning the model can make it suitable for inpainting
+      when provided with a starting image, mask, and text prompt. 
+    </p>
+    <p style="margin-bottom: 10px; font-size: 94%">
+      However, depending on how complex the area you want to mask is, creating
+      the mask can be tedious. This demo incorporates a segmentation model to
+      generate per-class masks for you, which can be combined to produce a final
+      diffusion mask. 
+    </p>
+  </div>

app_license.html

@@ -0,0 +1,27 @@
+<div class="acknowledgments">
+    <p><h4>LICENSE</h4>
+The model is licensed with a <a
+href="https://huggingface.co/spaces/CompVis/stable-diffusion-license"
+style="text-decoration: underline;" target="_blank">CreativeML Open RAIL-M</a>
+license. The authors claim no rights on the outputs you generate, you are free
+to use them and are accountable for their use which must not go against the
+provisions set in this license. The license forbids you from sharing any content
+that violates any laws, produce any harm to a person, disseminate any personal
+information that would be meant for harm, spread misinformation and target
+vulnerable groups. For the full list of restrictions please <a
+href="https://huggingface.co/spaces/CompVis/stable-diffusion-license"
+target="_blank" style="text-decoration: underline;" target="_blank">read the
+license</a></p>
+    <p><h4>Biases and content acknowledgment</h4>
+Despite how impressive being able to turn text into image is, beware to the fact
+that this model may output content that reinforces or exacerbates societal
+biases, as well as realistic faces, pornography and violence. The model was
+trained on the <a href="https://laion.ai/blog/laion-5b/" style="text-decoration:
+underline;" target="_blank">LAION-5B dataset</a>, which scraped non-curated
+image-text-pairs from the internet (the exception being the removal of illegal
+content) and is meant for research purposes. You can read more in the <a
+href="https://huggingface.co/CompVis/stable-diffusion-v1-4"
+style="text-decoration: underline;" target="_blank">model card</a>. Additionally,
+you can read more about the inpainting finetuning process in this 
+<a href="https://huggingface.co/runwayml/stable-diffusion-inpainting" style="text-decoration: underline">model card</a>.</p>
+</div>