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

add color dalle code example (#3108)

Browse Source
This commit is contained in:
Tom Gotsman 2024-04-19 17:54:10 -07:00 committed by GitHub
parent 6ca5f48ae7
commit a23faa2c50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -80,6 +80,8 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
Here is the complete code to create this. This is all done in one Python file! Here is the complete code to create this. This is all done in one Python file!
```python ```python
import reflex as rx import reflex as rx
import openai import openai
@ -108,6 +110,7 @@ class State(rx.State):
self.image_url = response.data[0].url 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(
@ -132,14 +135,22 @@ def index():
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.
<div align="center">
<img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
</div>
### **Reflex UI** ### **Reflex UI**
Let's start with the UI. Let's start with the UI.

BIN
docs/images/dalle_colored_code_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 KiB