Spaces:
Running on CPU Upgrade

File size: 14,253 Bytes
6e7f13f
 
 
ccd3b15
6e7f13f
 
 
e3f532e
d2e7f6f
ccd3b15
6e7f13f
ccd3b15
6e7f13f
 
619076c
 
6e7f13f
d311013
6e7f13f
 
619076c
6e7f13f
 
 
 
e3f532e
6e7f13f
e3f532e
6e7f13f
 
 
ccd3b15
9e4f0ce
ccd3b15
 
 
 
 
 
 
 
 
 
 
6e7f13f
6997717
6e7f13f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2598c70
7486873
6e7f13f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f1401e8
 
 
 
 
 
 
 
6e7f13f
 
 
 
 
 
 
0f845ae
 
 
 
 
 
 
 
6e7f13f
 
 
619076c
6e7f13f
 
ccd3b15
6e7f13f
 
 
3ecf706
f1401e8
 
6e7f13f
 
106de15
f1401e8
 
6e7f13f
 
3ecf706
f1401e8
 
6e7f13f
 
3ecf706
f1401e8
 
6e7f13f
106de15
3ecf706
106de15
 
 
3ecf706
6e7f13f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2df5362
 
6e7f13f
 
49c2927
6e7f13f
 
 
 
f0ace4b
 
7486873
6e7f13f
 
 
 
 
7486873
0f845ae
6e7f13f
6bd1314
f1401e8
6bd1314
63015b0
f0ace4b
6997717
6e7f13f
 
 
f0ace4b
 
2598c70
 
 
 
 
 
 
6e7f13f
526c0b6
6e7f13f
 
6d48259
6997717
 
 
6e7f13f
73b5d03
6e7f13f
 
 
 
73b5d03
 
6e7f13f
 
a95a324
6e7f13f
 
 
73b5d03
90f9bb2
6e7f13f
 
 
 
 
a95a324
6e7f13f
 
 
 
ccd3b15
 
 
 
d311013
ccd3b15
781f2a7
ccd3b15
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
import gradio as gr
from datasets import load_dataset

import base64
import re
import os
import requests
import time
from PIL import Image
from io import BytesIO

import user_history
from share_btn import community_icon_html, loading_icon_html, share_js

word_list_dataset = load_dataset("google/word-list-sd", data_files="list.txt", use_auth_token=True)
word_list = word_list_dataset["train"]['text']

def infer(prompt, negative="low_quality", scale=7, profile: gr.OAuthProfile | None = None):
    for filter in word_list:
        if re.search(rf"\b{filter}\b", prompt):
            raise gr.Error("Please try again with a different prompt")
        
    images = []
    url = os.getenv('JAX_BACKEND_URL')
    payload = {'prompt': prompt, 'negative_prompt': negative, 'guidance_scale': scale}
    start_time = time.time()
    images_request = requests.post(url, json = payload)
    print(time.time() - start_time)
    for image in images_request.json()["images"]:
        image_b64 = (f"data:image/jpeg;base64,{image}")
        images.append(image_b64)

        if profile is not None: # avoid conversion on non-logged-in users
            pil_image = Image.open(BytesIO(base64.b64decode(image)))
            user_history.save_image( # save images + metadata to user history
                label=prompt,
                image=pil_image,
                profile=profile,
                metadata={
                    "prompt": prompt,
                    "negative_prompt": negative,
                    "guidance_scale": scale,
                },
            )
    
    return images, gr.update(visible=True)
    
    
css = """
        .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;
        }
        .gradio-container {
            max-width: 730px !important;
            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%;
        }
        .animate-spin {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        #share-btn-container {padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;}
        div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
        #share-btn-container:hover {background-color: #060606}
        #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.5rem !important; padding-bottom: 0.5rem !important;right:0;}
        #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}
        #share-btn-container.hidden {display: none!important}
        
        .gr-form{
            flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
        }
        #prompt-container{
            gap: 0;
        }
        #prompt-container .form{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        }
        #gen-button{
        border-top-left-radius:0;
        border-bottom-left-radius:0;
        }
        #prompt-text-input, #negative-prompt-text-input{padding: .45rem 0.625rem}
        #component-16{border-top-width: 1px!important;margin-top: 1em}
        .image_duplication{position: absolute; width: 100px; left: 50px}
        .tabitem{border: 0 !important}
"""

block = gr.Blocks()

examples = [
    [
        "A serious capybara at work, wearing a suit",
        None,
        None
    ],
    [
        'A Squirtle fine dining with a view to the London Eye',
        None,
        None
    ],
    [
        'A tamale food cart in front of a Japanese Castle',
        None,
        None
    ],
    [
        'a graffiti of a robot serving meals to people',
        None,
        None
    ],
    [
        'a beautiful cabin in Attersee, Austria, 3d animation style',
        None,
        None
    ],
    
]


with block:
    gr.HTML(
        """
            <div style="text-align: center; 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:5px">
                  Fast Stable Diffusion XL on TPU v5e ⚡
                </h1> 
              </div>
              <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
                SDXL is a high quality text-to-image model from Stability AI. This demo is running on <a style="text-decoration: underline;" href="https://cloud.google.com/blog/products/compute/announcing-cloud-tpu-v5e-and-a3-gpus-in-ga">Google Cloud TPU v5e</a>, to achieve efficient and cost-effective inference of 1024×1024 images. <a href="https://hf.co/blog/sdxl_jax" target="_blank">How does it work?</a>
              </p>
            </div>
        """
    )
    
    with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
                text = gr.Textbox(
                        label="Enter your prompt",
                        show_label=False,
                        max_lines=1,
                        placeholder="Enter your prompt",
                        elem_id="prompt-text-input",
                )    
                btn = gr.Button("Generate", scale=0, elem_id="gen-button")

    gallery = gr.Gallery(
                label="Generated images", show_label=False, elem_id="gallery", grid=[2]
    )
    

    with gr.Group(elem_id="share-btn-container", visible=False) as community_group:
                community_icon = gr.HTML(community_icon_html)
                loading_icon = gr.HTML(loading_icon_html)
                share_button = gr.Button("Share to community", elem_id="share-btn")
    
    with gr.Accordion("Advanced settings", open=False):
             negative = gr.Textbox(
                        label="Enter your negative prompt",
                        show_label=False,
                        max_lines=1,
                        placeholder="Enter a negative prompt",
                        elem_id="negative-prompt-text-input",
             )
             guidance_scale = gr.Slider(
                label="Guidance Scale", minimum=0, maximum=50, value=7.5, step=0.1
             )

    ex = gr.Examples(examples=examples, fn=infer, inputs=[text, negative, guidance_scale], outputs=[gallery, community_group], cache_examples=True, postprocess=False)
    negative.submit(infer, inputs=[text, negative, guidance_scale], outputs=[gallery, community_group], postprocess=False)
    text.submit(infer, inputs=[text, negative, guidance_scale], outputs=[gallery, community_group], postprocess=False)
    btn.click(infer, inputs=[text, negative, guidance_scale], outputs=[gallery, community_group], postprocess=False)
        
    share_button.click(
            None,
            [],
            [],
            _js=share_js,
    )
    gr.HTML(
            """
                <div class="footer">
                    <p>Model by <a href="https://huggingface.co/stabilityai" style="text-decoration: underline;" target="_blank">StabilityAI</a> - backend running JAX on TPUs due to generous support of <a href="https://sites.research.google/trc/about/" style="text-decoration: underline;" target="_blank">Google TRC program</a> - Gradio Demo by 🤗 Hugging Face - this is not an official Google Product
                    </p>
                </div>
           """
    )
    with gr.Accordion(label="License", open=True):
            gr.HTML(
                """<div class="acknowledgments">
                    <p><h4>LICENSE</h4>
The model is licensed with a <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/blob/main/LICENSE.md" style="text-decoration: underline;" target="_blank">Stability AI CreativeML Open RAIL++-M</a> license. The License allows users to take advantage of the model in a wide range of settings (including free use and redistribution) as long as they respect the specific use case restrictions outlined, which correspond to model applications the licensor deems ill-suited for the model or are likely to cause harm. For the full list of restrictions please <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/blob/main/LICENSE.md" 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 that this model may output content that reinforces or exacerbates societal biases, as well as realistic faces, pornography and violence. You can read more in the <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" style="text-decoration: underline;" target="_blank">model card</a></p>
               </div>
                """
            )

with gr.Blocks(css=css) as block_with_history:
    with gr.Tab("Demo"):
        block.render()
    with gr.Tab("Past generations"):
        user_history.render()

block_with_history.queue(concurrency_count=16, max_size=10, api_open=False).launch(show_api=False)
#block_with_history.launch(server_name="0.0.0.0")