From 3378055776bce4fe59f3f12c982754dde1a7f15a Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:33:39 +0000 Subject: [PATCH 1/2] Add Dalle to templates --- dalle/.gitignore | 5 ++ dalle/assets/chakra_color_mode_provider.js | 36 ++++++++ dalle/assets/favicon.ico | Bin 0 -> 4286 bytes dalle/dalle/__init__.py | 0 dalle/dalle/dalle.py | 96 +++++++++++++++++++++ dalle/requirements.txt | 2 + dalle/rxconfig.py | 3 + 7 files changed, 142 insertions(+) create mode 100644 dalle/.gitignore create mode 100644 dalle/assets/chakra_color_mode_provider.js create mode 100644 dalle/assets/favicon.ico create mode 100644 dalle/dalle/__init__.py create mode 100644 dalle/dalle/dalle.py create mode 100644 dalle/requirements.txt create mode 100644 dalle/rxconfig.py diff --git a/dalle/.gitignore b/dalle/.gitignore new file mode 100644 index 0000000..575e538 --- /dev/null +++ b/dalle/.gitignore @@ -0,0 +1,5 @@ +*.db +*.py[cod] +.web +__pycache__/ +reflex.db diff --git a/dalle/assets/chakra_color_mode_provider.js b/dalle/assets/chakra_color_mode_provider.js new file mode 100644 index 0000000..ad41d51 --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/dalle/assets/favicon.ico b/dalle/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..54b24e938fea915a704034421ad6f6a5d5b96f91 GIT binary patch literal 4286 zcmZQzU<5)11qKkwutI==L5zWcK?8_^LJST-3=#(epqwx_1VaQE7(U;9`hOIUh5@!T z@a5jK|KA?Gfa90918;s2e(r~i}V29O_C^-TWnC?@mYNnG~7y@=HRV&9Pe?`}N6 zYCp)1XXmf~PqKFW?;t7-*5fLz_iGL_T z`%`S3!FGf6xXUX4-@jhu5nw!PqT0aP|1<14!l{Xe~N$N!4psQ<}8H-Pd%y1m=~6Kl8p|4N1U z2jwRZV15cz*Tsqh)O7yG7+Zqf@Z#c4a9IE<58mH=NOIZ(rA_qo2eKc8LFEB93@W2Q zZn(1R5Lhp$JR+yugXN3CXupS?%Ku<31FSemQ~!Ugna%%G>$m-XcJA8$CugpJF|P6& z=1*KSy8l7xFUQRnnC1@szrODn2EMWX`2TZT_WUmk2>%}sbVq`P9WWg_{y)BEGgZ?jssBKEE>J`7KgbQBaKMHO zy#xRIDr>^)Y--lOu)Gh72YeXTUI3}5w*9a&h*+9p`+@B*P`QS!ydy@;O-70A_7|w^ xyt?NIxD5tshmnKV^iBPL_vl%&%VCfkK;;l6n36gGSJ^l!K79I%uyKHaq5-!e-B|zt literal 0 HcmV?d00001 diff --git a/dalle/dalle/__init__.py b/dalle/dalle/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/dalle/dalle/dalle.py b/dalle/dalle/dalle.py new file mode 100644 index 0000000..6e32356 --- /dev/null +++ b/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") diff --git a/dalle/requirements.txt b/dalle/requirements.txt new file mode 100644 index 0000000..64bf014 --- /dev/null +++ b/dalle/requirements.txt @@ -0,0 +1,2 @@ +reflex>=0.4.0 +openai>=1 diff --git a/dalle/rxconfig.py b/dalle/rxconfig.py new file mode 100644 index 0000000..4054890 --- /dev/null +++ b/dalle/rxconfig.py @@ -0,0 +1,3 @@ +import reflex as rx + +config = rx.Config(app_name="dalle") From 1644ddb3c003768f532406115b4a077d79268bd4 Mon Sep 17 00:00:00 2001 From: Elijah Date: Sun, 24 Nov 2024 13:19:07 +0000 Subject: [PATCH 2/2] remove chakra provider wrapper in assets that slipped in PR --- dalle/assets/chakra_color_mode_provider.js | 36 ---------------------- 1 file changed, 36 deletions(-) delete mode 100644 dalle/assets/chakra_color_mode_provider.js diff --git a/dalle/assets/chakra_color_mode_provider.js b/dalle/assets/chakra_color_mode_provider.js deleted file mode 100644 index ad41d51..0000000 --- a/dalle/assets/chakra_color_mode_provider.js +++ /dev/null @@ -1,36 +0,0 @@ -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 ( - - {children} - - ); -}