make demos background events (#1547)

Author: carlosabadia

pcweb/pages/framework/demos/chatbot/chatbot.py

@@ -15,7 +15,7 @@ class TutorialState(rx.State):
         )
     ]
 
-    @rx.event
+    @rx.event(background=True)
     async def submit(self, form_data: dict):
         question = form_data["question"]
         # Our chatbot has some brains now!
@@ -31,17 +31,19 @@ async def submit(self, form_data: dict):
         # Add to the answer as the chatbot responds.
         answer = ""
         # self.chat_history = []
-        self.chat_history.append((question, answer))
-        yield
+        async with self:
+            self.chat_history.append((question, answer))
+            yield
 
         async for item in session:
             if hasattr(item.choices[0].delta, "content"):
                 if item.choices[0].delta.content is None:
                     # presence of 'None' indicates the end of the response
                     break
                 answer += item.choices[0].delta.content
-                self.chat_history[-1] = (self.chat_history[-1][0], answer)
-                yield
+                async with self:
+                    self.chat_history[-1] = (self.chat_history[-1][0], answer)
+                    yield
 
     @rx.event
     def clear_chat(self):

pcweb/pages/framework/demos/image_gen/image_gen.py

@@ -10,22 +10,30 @@ class ImageGenState(rx.State):
     image_url: str = ""
     processing: bool = False
 
-    @rx.event
-    def get_image(self, form_data):
+    @rx.event(background=True)
+    async def get_image(self, form_data):
         """Get the image from the prompt."""
         prompt = form_data["prompt"]
         if prompt == "":
             return
-        self.processing = True
-        yield
+        async with self:
+            self.processing = True
+            yield
         input = {"prompt": prompt}
 
-        output = replicate.run(
-            "black-forest-labs/flux-schnell",
-            input=input,
-        )
-        self.image_url = str(output[0])
-        self.processing = False
+        try:
+            output = await replicate.async_run(
+                "black-forest-labs/flux-schnell",
+                input=input,
+            )
+            async with self:
+                self.image_url = str(output[0])
+        except Exception:
+            async with self:
+                self.image_url = ""
+        finally:
+            async with self:
+                self.processing = False
 
 
 def image_gen() -> rx.Component:

pcweb/signup.py

@@ -28,20 +28,23 @@ class IndexState(rx.State):
     # Whether to show the confetti.
     show_confetti: bool = False
 
-    def send_contact_to_webhook(
+    @rx.event(background=True)
+    async def send_contact_to_webhook(
         self,
         email: str,
     ) -> None:
-        with contextlib.suppress(httpx.HTTPError) and httpx.Client() as client:
-            response = client.post(
-                REFLEX_DEV_WEB_NEWSLETTER_FORM_WEBHOOK_URL,
-                json={
-                    "email": email,
-                },
-            )
+        with contextlib.suppress(httpx.HTTPError):
+            async with httpx.AsyncClient() as client:
+                response = await client.post(
+                    REFLEX_DEV_WEB_NEWSLETTER_FORM_WEBHOOK_URL,
+                    json={
+                        "email": email,
+                    },
+                )
             response.raise_for_status()
 
-    def add_contact_to_loops(
+    @rx.event(background=True)
+    async def add_contact_to_loops(
         self,
         email: str,
     ):
@@ -56,8 +59,8 @@ def add_contact_to_loops(
             "Authorization": f"Bearer {loops_api_key}",
         }
         try:
-            with httpx.Client() as client:
-                response = client.post(
+            async with httpx.AsyncClient() as client:
+                response = await client.post(
                     url,
                     headers=headers,
                     json={
@@ -73,8 +76,8 @@ def add_contact_to_loops(
     def signup_for_another_user(self):
         self.signed_up = False
 
-    @rx.event
-    def signup(
+    @rx.event(background=True)
+    async def signup(
         self,
         form_data: dict[str, Any],
     ):
@@ -90,17 +93,22 @@ def signup(
 
             except EmailNotValidError as e:
                 # Alert the error message.
-                return rx.toast.warning(
+                yield rx.toast.warning(
                     str(e),
                     style={
                         "border": "1px solid #3C3646",
                         "background": "linear-gradient(218deg, #1D1B23 -35.66%, #131217 100.84%)",
                     },
                 )
-        self.send_contact_to_webhook(email)
-        self.add_contact_to_loops(email)
-        self.signed_up = True
-        return [
-            rx.call_script(f"try {{ ko.identify('{email}'); }} catch(e) {{ console.warn('Koala identify failed:', e); }}"),
-            rx.toast.success("Thanks for signing up to the Newsletter!")
+                return
+        yield IndexState.send_contact_to_webhook(email)
+        yield IndexState.add_contact_to_loops(email)
+        async with self:
+            self.signed_up = True
+            yield
+        yield [
+            rx.call_script(
+                f"try {{ ko.identify('{email}'); }} catch(e) {{ console.warn('Koala identify failed:', e); }}"
+            ),
+            rx.toast.success("Thanks for signing up to the Newsletter!"),
         ]