Skip to content

Commit

Permalink
add color dalle code example (#3108)
Browse files Browse the repository at this point in the history
  • Loading branch information
tgberkeley authored Apr 20, 2024
1 parent 6ca5f48 commit a23faa2
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(
Expand All @@ -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.
Expand Down
Binary file added docs/images/dalle_colored_code_example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a23faa2

Please sign in to comment.