add color dalle code example (#3108)

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

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!
```python
import reflex as rx
import openai
@ -108,6 +110,7 @@ class State(rx.State):
self.image_url = response.data[0].url
self.processing, self.complete = False, True
def index():
return rx.center(
rx.vstack(
@ -132,14 +135,22 @@ def index():
height="100vh",
)
# Add state and page to the app.
app = rx.App()
app.add_page(index, title="Reflex:DALL-E")
```
## 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**
Let's start with the UI.

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 KiB