added minimal example to README.md

README.md

@@ -61,3 +61,81 @@ You'll have your first app up and running in seconds!
 ## How it works 🧠
 
 TODO: Minimal example
+
+```python
+from typing import *  # type: ignore
+import rio
+from openai import AsyncOpenAI
+
+client = AsyncOpenAI()
+
+
+class DallEPage(rio.Component):
+
+    prompt: str = ""
+    image_url: str = ""
+    is_loading: bool = False
+
+    async def get_image(self) -> None:
+        """Get an image by prompt."""
+
+        self.is_loading = True
+        await self.force_refresh()
+
+        if self.prompt == "":
+            self.image_url = ""
+            self.is_loading = False
+            return
+
+        try:
+            response = await client.images.generate(
+                model="dall-e-2",
+                prompt=self.prompt,
+                size="256x256",
+                quality="standard",
+                n=1,
+            )
+            assert isinstance(response.data[0].url, str)
+            self.image_url = response.data[0].url
+            print(self.image_url)
+
+        finally:
+            self.is_loading = False
+
+    def build(self) -> rio.Component:
+
+        return rio.Rectangle(
+            content=rio.Card(
+                rio.Column(
+                    rio.Text("DALL-E", style="heading1"),
+                    rio.TextInput(
+                        text=self.bind().prompt,
+                        label="Prompt:",
+                    ),
+                    rio.Button(
+                        "Create Image",
+                        on_press=self.get_image,
+                        is_loading=self.is_loading,
+                    ),
+                    # Add the image to the page if it exists
+                    *(
+                        [
+                            rio.Image(
+                                rio.URL(self.image_url),
+                                height=36,
+                            )
+                        ]
+                        if self.image_url
+                        else []
+                    ),
+                    spacing=1,
+                    margin=2,
+                ),
+                width=40,
+                align_x=0.5,
+                align_y=0.5,
+                margin=2,
+            ),
+            fill=rio.Color.GREY,
+        )
+```