update gradio to v4 (#1915)

- update gradio to v4 (90af988b50d7316c1e34de69c8da098a8321e9a0)
- Update README.md (b4f1d22b7e41c0f9f2d3159c80bd3deee7b775ce)


Co-authored-by: Pete <pngwn@users.noreply.huggingface.co>

README.md

@@ -4,7 +4,7 @@ emoji: 🏋️	#👕🌟
 colorFrom: red
 colorTo: blue
 sdk: gradio
-sdk_version: 3.45.1
+sdk_version: 4.36.0
 app_file: app.py
 license: mit
 disable_embedding: true

app.py

@@ -84,7 +84,14 @@ word_list = word_list_dataset["train"]['text']
 
 #gradio.helpers.CACHED_FOLDER="/data/cache"
 
-def infer(prompt, negative="low_quality", scale=7, style_name=None, profile: gr.OAuthProfile | None = None):
+
+def infer(
+    prompt,
+    negative="low_quality",
+    scale=7,
+    style_name=None,
+    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")
@@ -249,32 +256,11 @@ css = """
 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
-    ],
-    
+    ["A serious capybara at work, wearing a suit", "low_quality", 7],
+    ["A Squirtle fine dining with a view to the London Eye", "low_quality", 7],
+    ["A tamale food cart in front of a Japanese Castle", "low_quality", 7],
+    ["a graffiti of a robot serving meals to people", "low_quality", 7],
+    ["a beautiful cabin in Attersee, Austria, 3d animation style", "low_quality", 7],
 ]
 
 
@@ -333,19 +319,19 @@ with block:
             </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")
+
+    with gr.Row(elem_id="prompt-container", 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]
+        label="Generated images", show_label=False, elem_id="gallery", rows=2, columns=2
     )
     
 
@@ -372,16 +358,44 @@ with block:
                 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, style_selection], outputs=[gallery, community_group], postprocess=False)
-    text.submit(infer, inputs=[text, negative, guidance_scale, style_selection], outputs=[gallery, community_group], postprocess=False)
-    btn.click(infer, inputs=[text, negative, guidance_scale, style_selection], outputs=[gallery, community_group], postprocess=False)
-        
+    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, style_selection],
+        outputs=[gallery, community_group],
+        postprocess=False,
+        concurrency_id="infer",
+        concurrency_limit=8,
+    )
+    text.submit(
+        infer,
+        inputs=[text, negative, guidance_scale, style_selection],
+        outputs=[gallery, community_group],
+        postprocess=False,
+        concurrency_id="infer",
+        concurrency_limit=8,
+    )
+    btn.click(
+        infer,
+        inputs=[text, negative, guidance_scale, style_selection],
+        outputs=[gallery, community_group],
+        postprocess=False,
+        concurrency_id="infer",
+        concurrency_limit=8,
+    )
+
     share_button.click(
             None,
             [],
             [],
-            _js=share_js,
+        js=share_js,
     )
     gr.HTML(
             """
@@ -408,5 +422,5 @@ with gr.Blocks(css=css) as block_with_history:
     with gr.Tab("Past generations"):
         user_history.render()
 
-block_with_history.queue(concurrency_count=8, max_size=10, api_open=False).launch(show_api=False)
+block_with_history.queue(max_size=10, api_open=False).launch(show_api=False)
 #block_with_history.launch(server_name="0.0.0.0")