Update app.py

app.py

@@ -5,26 +5,26 @@ from gradio.themes.utils.theme_dropdown import create_theme_dropdown
 
 dropdown, js = create_theme_dropdown()
 
-with gr.Blocks(theme='nuttea/Softblue') as demo:
-    with gr.Row().style(equal_height=True):
+with gr.Blocks() as demo:
+    with gr.Row(equal_height=True):
         with gr.Column(scale=10):
             gr.Markdown(
                 """
-                # Theme preview: `Softblue`
-                To use this theme, set `theme='nuttea/Softblue'` in `gr.Blocks()` or `gr.Interface()`.
+                # Theme preview: `yellow`
+                To use this theme, set `theme='terastudio/yellow'` in `gr.Blocks()` or `gr.Interface()`.
                 You can append an `@` and a semantic version expression, e.g. @>=1.0.0,<2.0.0 to pin to a given version
                 of this theme.
                 """
             )
         with gr.Column(scale=3):
-            with gr.Box():
+            with gr.Group():
                 dropdown.render()
-                toggle_dark = gr.Button(value="Toggle Dark").style(full_width=True)
+                toggle_dark = gr.Button(value="Toggle Dark")
 
-    dropdown.change(None, dropdown, None, _js=js)
+    dropdown.change(None, dropdown, None, js=js)
     toggle_dark.click(
         None,
-        _js="""
+        js="""
         () => {
             document.body.classList.toggle('dark');
         }
@@ -63,17 +63,17 @@ with gr.Blocks(theme='nuttea/Softblue') as demo:
             check = gr.Checkbox(label="Go")
         with gr.Column(variant="panel", scale=2):
             img = gr.Image(
-                "https://gradio.app/assets/img/header-image.jpg", label="Image"
-            ).style(height=320)
+                "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg",
+                label="Image",
+                height=320,
+            )
             with gr.Row():
-                go_btn = gr.Button("Go", label="Primary Button", variant="primary")
-                clear_btn = gr.Button(
-                    "Clear", label="Secondary Button", variant="secondary"
-                )
+                go_btn = gr.Button("Go", variant="primary")
+                clear_btn = gr.Button("Clear", variant="secondary")
 
                 def go(*args):
                     time.sleep(3)
-                    return "https://gradio.app/assets/img/header-image.jpg"
+                    return "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpgjpg"
 
                 go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go")
 
@@ -84,11 +84,9 @@ with gr.Blocks(theme='nuttea/Softblue') as demo:
                 clear_btn.click(clear, None, img)
 
             with gr.Row():
-                btn1 = gr.Button("Button 1").style(size="sm")
-                btn2 = gr.UploadButton().style(size="sm")
-                stop_btn = gr.Button("Stop", label="Stop Button", variant="stop").style(
-                    size="sm"
-                )
+                btn1 = gr.Button("Button 1", size="sm")
+                btn2 = gr.UploadButton(size="sm")
+                stop_btn = gr.Button("Stop", size="sm", variant="stop")
 
     with gr.Row():
         gr.Dataframe(value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label="Dataframe")
@@ -114,22 +112,30 @@ with gr.Blocks(theme='nuttea/Softblue') as demo:
                     "https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg",
                     "tower",
                 ),
-            ]
-        ).style(height="200px", grid=2)
+            ],
+            height=200,
+        )
 
     with gr.Row():
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")
+            chatbot = gr.Chatbot(
+                value=[
+                    {"role": "user", "content": "Hello"},
+                    {"role": "assistant", "content": "Hi"}
+                ],
+                label="Chatbot"
+            )
             chat_btn = gr.Button("Add messages")
 
             def chat(history):
                 time.sleep(2)
-                yield [["How are you?", "I am good."]]
+                return history + [
+                    {"role": "user", "content": "How are you?"},
+                    {"role": "assistant", "content": "I am good."}
+                ]
 
             chat_btn.click(
-                lambda history: history
-                + [["How are you?", "I am good."]]
-                + (time.sleep(2) or []),
+                chat,
                 chatbot,
                 chatbot,
             )
@@ -142,4 +148,4 @@ with gr.Blocks(theme='nuttea/Softblue') as demo:
 
 
 if __name__ == "__main__":
-    demo.queue().launch()
+    demo.queue().launch(theme='terastudio/yellow')