add color dalle code example (#3108)
This commit is contained in:
parent
6ca5f48ae7
commit
a23faa2c50
13
README.md
13
README.md
@ -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.
|
||||
|
BIN
docs/images/dalle_colored_code_example.png
Normal file
BIN
docs/images/dalle_colored_code_example.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 455 KiB |
Loading…
Reference in New Issue
Block a user