use templates endpoint (#1357)

* use templates endpoint

* change rx_backend url

Author: carlosabadia

pcweb/constants.py

@@ -64,7 +64,7 @@
 SCREENSHOT_BUCKET = "https://pub-c14a5dcf674640a6b73fded32bad72ca.r2.dev/"
 
 # Reflex Cloud Backend
-RX_CLOUD_BACKEND = os.getenv("RX_CLOUD_BACKEND", "https://cloud-f188e2cd-51fb-4b29-b546-2ce4b9efc5d5.fly.dev/")
+RX_CLOUD_BACKEND = os.getenv("RX_CLOUD_BACKEND", "https://cloud-backend.reflex.dev/")
 
 
 # Stats

pcweb/pages/landing/views/ai_section.py

@@ -2,27 +2,46 @@
 import httpx
 from pcweb.components.icons.hugeicons import hi
 from pcweb.constants import SCREENSHOT_BUCKET, REFLEX_BUILD_URL, RX_CLOUD_BACKEND
+import asyncio
+import contextlib
 
+TEMPLATES_LIST = [
+    "bbfcc0b8-8f09-4211-884e-7ad2f1a36906",
+    "e6293a74-4a47-44a3-bc1e-8966863feb46",
+    "a7f5bf05-a34a-4b40-a39f-4f6c71ded78f",
+    "dd3a7d49-e174-41d3-8856-cad921a98749",
+    "576aab1d-e733-42fa-a13e-515fd72ba012",
+    "28194790-f5cc-4625-bd30-cf2693890e08",
+    "7e5346b7-025c-4ff3-9b32-c1b9d7afcaec",
+    "2f969644-3140-4dbb-b639-5d0a940603c2",
+    "47f86c01-59ec-4088-b47a-64ceddf58a6e",
+    "98afee02-538f-4334-ab10-f05c1c3d564b",
+]
 
-class AIBuilderGallery(rx.State):
-    items: list[str] = [
-        "bbfcc0b8-8f09-4211-884e-7ad2f1a36906",
-        "e6293a74-4a47-44a3-bc1e-8966863feb46",
-        "a7f5bf05-a34a-4b40-a39f-4f6c71ded78f",
-        "dd3a7d49-e174-41d3-8856-cad921a98749",
-        "576aab1d-e733-42fa-a13e-515fd72ba012",
-        "28194790-f5cc-4625-bd30-cf2693890e08",
-        "7e5346b7-025c-4ff3-9b32-c1b9d7afcaec",
-        "2f969644-3140-4dbb-b639-5d0a940603c2",
-        "47f86c01-59ec-4088-b47a-64ceddf58a6e",
-        "98afee02-538f-4334-ab10-f05c1c3d564b",
-    ]
 
-    # @rx.event
-    # async def fetch_items(self):
-    #     async with httpx.AsyncClient() as client:
-    #         response = await client.get(f"{RX_CLOUD_BACKEND}v1/flexgen/templates")
-    #         # self.items = response.json()
+async def retreive_templates():
+    """Fetch and update the TEMPLATES_LIST."""
+    try:
+        while True:
+            with contextlib.suppress(Exception):
+                async with httpx.AsyncClient() as client:
+                    global TEMPLATES_LIST
+                    response = await client.get(
+                        f"{RX_CLOUD_BACKEND}v1/flexgen/templates",
+                    )
+                    response_data = response.json()
+                    if isinstance(response_data, list):
+                        TEMPLATES_LIST = response_data
+
+            await asyncio.sleep(60 * 10)
+    except asyncio.CancelledError:
+        pass
+
+
+class AIBuilderGallery(rx.State):
+    @rx.var(interval=60 * 10)
+    def items(self) -> list[str]:
+        return TEMPLATES_LIST
 
 
 def header() -> rx.Component:
@@ -76,6 +95,5 @@ def ai_section() -> rx.Component:
     return rx.el.section(
         header(),
         gallery(),
-        # on_mount=AIBuilderGallery.fetch_items,
         class_name="flex flex-col mx-auto w-full max-w-[84.19rem]",
     )

pcweb/pcweb.py

@@ -10,6 +10,7 @@
 from pcweb.whitelist import _check_whitelisted_path
 from pcweb.telemetry import get_pixel_website_trackers
 from pcweb.meta.meta import favicons_links
+from pcweb.pages.landing.views.ai_section import retreive_templates
 
 # This number discovered by trial and error on Windows 11 w/ Node 18, any
 # higher and the prod build fails with EMFILE error.
@@ -47,6 +48,8 @@
     ],
 )
 
+app.register_lifespan_task(retreive_templates)
+
 # XXX: The app is TOO BIG to build on Windows, so explicitly disallow it except for testing
 if sys.platform == "win32":
     if not os.environ.get("REFLEX_WEB_WINDOWS_OVERRIDE"):
@@ -64,9 +67,9 @@
             "component": route.component,
             "route": route.path,
             "title": route.title,
-            "image": "/previews/index_preview.png"
-            if route.image is None
-            else route.image,
+            "image": (
+                "/previews/index_preview.png" if route.image is None else route.image
+            ),
             "meta": [
                 {"name": "theme-color", "content": route.background_color},
             ],