laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update new readme to match radix api (#2631)

Browse Source
This commit is contained in:
Alek Petuskey 2024-02-15 19:58:34 -08:00 committed by GitHub
parent b03fa5709f
commit f46be1d9b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
README.md
View File

@ -72,10 +72,12 @@ Here is the complete code to create this. This is all done in one Python file!
import reflex as rx import reflex as rx
import openai import openai
openai.api_key = "YOUR_API_KEY" openai_client = openai.OpenAI()
class State(rx.State): class State(rx.State):
"""The app state.""" """The app state."""
prompt = "" prompt = ""
image_url = "" image_url = ""
processing = False processing = False
@ -88,41 +90,40 @@ class State(rx.State):
self.processing, self.complete = True, False self.processing, self.complete = True, False
yield yield
response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024") response = openai_client.images.generate(
self.image_url = response["data"][0]["url"] prompt=self.prompt, n=1, size="1024x1024"
)
self.image_url = response.data[0].url
self.processing, self.complete = False, True self.processing, self.complete = False, True
def index(): def index():
return rx.center( return rx.center(
rx.vstack( rx.vstack(
rx.heading("DALL·E"), rx.heading("DALL-E", font_size="1.5em"),
rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt), rx.input(
rx.button( placeholder="Enter a prompt..",
"Generate Image", on_blur=State.set_prompt,
on_click=State.get_image, width="25em",
is_loading=State.processing,
width="100%",
), ),
rx.button("Generate Image", on_click=State.get_image, width="25em"),
rx.cond( rx.cond(
State.complete, State.processing,
rx.image( rx.chakra.circular_progress(is_indeterminate=True),
src=State.image_url, rx.cond(
height="25em", State.complete,
width="25em", rx.image(src=State.image_url, width="20em"),
) ),
), ),
padding="2em", align="center",
shadow="lg",
border_radius="lg",
), ),
width="100%", width="100%",
height="100vh", height="100vh",
) )
# Add state and page to the app. # Add state and page to the app.
app = rx.App() app = rx.App()
app.add_page(index, title="reflex:DALL·E") app.add_page(index, title="Reflex:DALL-E")
``` ```
## Let's break this down. ## Let's break this down.
@ -156,6 +157,7 @@ class State(rx.State):
image_url = "" image_url = ""
processing = False processing = False
complete = False complete = False
``` ```
The state defines all the variables (called vars) in an app that can change and the functions that change them. The state defines all the variables (called vars) in an app that can change and the functions that change them.
@ -172,8 +174,10 @@ def get_image(self):
self.processing, self.complete = True, False self.processing, self.complete = True, False
yield yield
response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024") response = openai_client.images.generate(
self.image_url = response["data"][0]["url"] prompt=self.prompt, n=1, size="1024x1024"
)
self.image_url = response.data[0].url
self.processing, self.complete = False, True self.processing, self.complete = False, True
``` ```