Add Dalle to templates

dalle/.gitignore

@@ -0,0 +1,5 @@
+*.db
+*.py[cod]
+.web
+__pycache__/
+reflex.db

dalle/assets/chakra_color_mode_provider.js

@@ -0,0 +1,36 @@
+import { useColorMode as chakraUseColorMode } from "@chakra-ui/react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
+
+export default function ChakraColorModeProvider({ children }) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const { colorMode, toggleColorMode } = chakraUseColorMode();
+  const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
+
+  useEffect(() => {
+    if (colorMode != resolvedTheme) {
+      toggleColorMode();
+    }
+    setResolvedColorMode(resolvedTheme);
+  }, [theme, resolvedTheme]);
+
+  const rawColorMode = colorMode;
+  const setColorMode = (mode) => {
+    const allowedModes = ["light", "dark", "system"];
+    if (!allowedModes.includes(mode)) {
+      console.error(
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
+      );
+      mode = defaultColorMode;
+    }
+    setTheme(mode);
+  };
+  return (
+    <ColorModeContext.Provider
+      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
+    >
+      {children}
+    </ColorModeContext.Provider>
+  );
+}

dalle/dalle/dalle.py

@@ -0,0 +1,96 @@
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+
+import reflex as rx
+
+import os
+
+import openai
+
+_client = None
+
+
+def get_openai_client():
+    global _client
+    if _client is None:
+        _client = openai.OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+
+    return _client
+
+
+class State(rx.State):
+    """The app state."""
+
+    image_url = ""
+    image_processing = False
+    image_made = False
+
+    def get_dalle_result(self, form_data: dict[str, str]):
+        prompt_text: str = form_data["prompt_text"]
+        self.image_made = False
+        self.image_processing = True
+        # Yield here so the image_processing take effects and the circular progress is shown.
+        yield
+        try:
+            response = get_openai_client().images.generate(
+                prompt=prompt_text, n=1, size="1024x1024"
+            )
+            self.image_url = response.data[0].url
+            self.image_processing = False
+            self.image_made = True
+            yield
+        except Exception as ex:
+            self.image_processing = False
+            yield rx.window_alert(f"Error with OpenAI Execution. {ex}")
+
+
+def index():
+    return rx.center(
+        rx.vstack(
+            rx.heading("DALL-E", font_size="1.5em"),
+            rx.form(
+                rx.vstack(
+                    rx.input(
+                        id="prompt_text",
+                        placeholder="Enter a prompt..",
+                        size="3",
+                    ),
+                    rx.button(
+                        "Generate Image",
+                        type="submit",
+                        size="3",
+                    ),
+                    align="stretch",
+                    spacing="2",
+                ),
+                width="100%",
+                on_submit=State.get_dalle_result,
+            ),
+            rx.divider(),
+            rx.cond(
+                State.image_processing,
+                rx.spinner(),
+                rx.cond(
+                    State.image_made,
+                    rx.image(
+                        src=State.image_url,
+                    ),
+                ),
+            ),
+            width="25em",
+            bg="white",
+            padding="2em",
+            align="center",
+        ),
+        width="100%",
+        height="100vh",
+        background="radial-gradient(circle at 22% 11%,rgba(62, 180, 137,.20),hsla(0,0%,100%,0) 19%),radial-gradient(circle at 82% 25%,rgba(33,150,243,.18),hsla(0,0%,100%,0) 35%),radial-gradient(circle at 25% 61%,rgba(250, 128, 114, .28),hsla(0,0%,100%,0) 55%)",
+    )
+
+
+# Add state and page to the app.
+app = rx.App(
+    theme=rx.theme(
+        appearance="light", has_background=True, radius="medium", accent_color="mint"
+    ),
+)
+app.add_page(index, title="Reflex:DALL-E")

dalle/requirements.txt

@@ -0,0 +1,2 @@
+reflex>=0.4.0
+openai>=1

dalle/rxconfig.py

@@ -0,0 +1,3 @@
+import reflex as rx
+
+config = rx.Config(app_name="dalle")