|
@@ -120,14 +120,15 @@ def index():
|
|
|
on_blur=State.set_prompt,
|
|
|
width="25em",
|
|
|
),
|
|
|
- rx.button("Generate Image", on_click=State.get_image, width="25em"),
|
|
|
+ rx.button(
|
|
|
+ "Generate Image",
|
|
|
+ on_click=State.get_image,
|
|
|
+ width="25em",
|
|
|
+ loading=State.processing
|
|
|
+ ),
|
|
|
rx.cond(
|
|
|
- State.processing,
|
|
|
- rx.chakra.circular_progress(is_indeterminate=True),
|
|
|
- rx.cond(
|
|
|
- State.complete,
|
|
|
- rx.image(src=State.image_url, width="20em"),
|
|
|
- ),
|
|
|
+ State.complete,
|
|
|
+ rx.image(src=State.image_url, width="20em"),
|
|
|
),
|
|
|
align="center",
|
|
|
),
|
|
@@ -185,7 +186,7 @@ class State(rx.State):
|
|
|
|
|
|
The state defines all the variables (called vars) in an app that can change and the functions that change them.
|
|
|
|
|
|
-Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to show the circular progress and image.
|
|
|
+Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to disable the button (during image generation) and when to show the resulting image.
|
|
|
|
|
|
### **Event Handlers**
|
|
|
|