redo explore page

daras_ai_v2/all_pages.py

@@ -35,44 +35,49 @@
 from recipes.embeddings_page import EmbeddingsPage
 
 # note: the ordering here matters!
+all_home_pages_by_category = {
+    "Featured": [
+        VideoBotsPage,
+        DeforumSDPage,
+        QRCodeGeneratorPage,
+    ],
+    "Marketing & SEO": [
+        RelatedQnAPage,
+        SEOSummaryPage,
+        GoogleGPTPage,
+        SocialLookupEmailPage,
+    ],
+    "LLMs, RAG, & Synthetic Data": [
+        BulkRunnerPage,
+        DocExtractPage,
+        CompareLLMPage,
+        DocSearchPage,
+        SmartGPTPage,
+        DocSummaryPage,
+    ],
+    "Videos, Lipsync, & Speech": [
+        LipsyncPage,
+        LipsyncTTSPage,
+        TextToSpeechPage,
+        AsrPage,
+        Text2AudioPage,
+    ],
+    "Images": [
+        Img2ImgPage,
+        CompareText2ImgPage,
+        ObjectInpaintingPage,
+        FaceInpaintingPage,
+        EmailFaceInpaintingPage,
+        GoogleImageGenPage,
+        ImageSegmentationPage,
+        CompareUpscalerPage,
+    ],
+}
+
 all_home_pages = [
-    # top ones
-    VideoBotsPage,
-    DeforumSDPage,
-    QRCodeGeneratorPage,
-    # SEO tools
-    GoogleGPTPage,
-    SEOSummaryPage,
-    RelatedQnAPage,
-    # Image Tools
-    ObjectInpaintingPage,
-    CompareText2ImgPage,
-    Img2ImgPage,
-    # More Image
-    FaceInpaintingPage,
-    EmailFaceInpaintingPage,
-    GoogleImageGenPage,
-    # LipSync fun
-    TextToSpeechPage,
-    LipsyncPage,
-    LipsyncTTSPage,
-    # Text
-    CompareLLMPage,
-    DocSearchPage,
-    SmartGPTPage,
-    # Speech & Music
-    AsrPage,
-    # VideoPlayList,
-    Text2AudioPage,
-    # Other
-    DocSummaryPage,
-    RelatedQnADocPage,
-    SocialLookupEmailPage,
-    # More
-    ImageSegmentationPage,
-    CompareUpscalerPage,
-    DocExtractPage,
-    BulkRunnerPage,
+    page
+    for page_group in all_home_pages_by_category.values()
+    for page in page_group
 ]
 
 # exposed as API

daras_ai_v2/meta_content.py

@@ -31,6 +31,18 @@ def build_meta_tags(
     )
     image = meta_preview_url(page.preview_image(state), page.fallback_preivew_image())
 
+    return raw_build_meta_tags(
+        url=url, title=title, description=description, image=image,
+    )
+
+
+def raw_build_meta_tags(
+    *,
+    url: str,
+    title: str,
+    description: str | None = None,
+    image: str | None = None,
+) -> list[dict[str, str]]:
     ret = [
         dict(title=title),
         dict(name="title", content=title),

explore.py

@@ -1,23 +1,52 @@
 import gooey_ui as gui
 from daras_ai.image_input import truncate_text_words
-from daras_ai_v2.all_pages import all_home_pages
+from daras_ai_v2.all_pages import all_home_pages_by_category
 from daras_ai_v2.grid_layout_widget import grid_layout
 
 
-def render():
-    def _render(page_cls):
-        page = page_cls()
-        state = page.recipe_doc_sr().to_dict()
+def get_render_fn(title: str, description: str):
+    def render():
+        def _render(page_cls):
+            page = page_cls()
+            state = page.recipe_doc_sr().to_dict()
 
-        with gui.link(to=page.app_url()):
-            gui.markdown(f"## {page.title}")
+            with gui.link(to=page.app_url()):
+                gui.markdown(f"### {page.title}")
 
-        preview = page.preview_description(state)
-        if preview:
-            gui.write(truncate_text_words(preview, 150))
-        else:
-            page.render_description()
+            preview = page.preview_description(state)
+            if preview:
+                gui.write(truncate_text_words(preview, 150))
+            else:
+                page.render_description()
 
-        page.render_example(state)
+            page.render_example(state)
 
-    grid_layout(3, all_home_pages, _render)
+        heading(title=title, description=description)
+        for category, pages in all_home_pages_by_category.items():
+            separator()
+            section_heading(category)
+            grid_layout(3, pages, _render, separator=False)
+
+    return render
+
+
+def heading(title: str, description: str, margin_top: str = "2rem", margin_bottom: str ="2rem"):
+    with gui.tag(
+            "div", style={"margin-top": margin_top, "margin-bottom": margin_bottom}
+    ):
+        with gui.tag("p", style={"margin-top": "0rem", "margin-bottom": "0rem"}, className="text-muted"):
+            gui.html(description.upper())
+        with gui.tag("h1", style={"margin-top": "0px", "margin-bottom": "0px", "font-weight": "500"}):
+            gui.html(title)
+
+
+def section_heading(title: str, margin_top: str = "1rem", margin_bottom: str = "1rem"):
+    with gui.tag("h5", style={"font-weight": "600", "margin-top": margin_top, "margin-bottom": margin_bottom}):
+        with gui.tag("span", style={"background-color": "yellow"}):
+            gui.html(title.upper())
+
+
+def separator(*, style: dict[str, str] | None = None):
+    style = style or {}
+    style_html = "".join([f"{kv[0]}: {kv[1]};" for kv in style.items()])
+    gui.html(f"""<hr style="{ style_html }">""")

routers/root.py

@@ -30,7 +30,7 @@
 )
 from daras_ai_v2.copy_to_clipboard_button_widget import copy_to_clipboard_scripts
 from daras_ai_v2.db import FIREBASE_SESSION_COOKIE
-from daras_ai_v2.meta_content import build_meta_tags
+from daras_ai_v2.meta_content import build_meta_tags, raw_build_meta_tags
 from daras_ai_v2.query_params_util import extract_query_params
 from daras_ai_v2.settings import templates
 from routers.api import request_form_files
@@ -192,7 +192,24 @@ async def request_json(request: Request):
 def explore_page(request: Request, json_data: dict = Depends(request_json)):
     import explore
 
-    return st.runner(lambda: page_wrapper(request, explore.render), **json_data)
+    title = "Explore AI workflows"
+    description = "Find, fork and run your field’s favorite AI recipes on Gooey.AI"
+
+    ret = st.runner(
+        lambda: page_wrapper(
+            request=request,
+            render_fn=explore.get_render_fn(title=title, description=description)
+        ),
+        **json_data
+    )
+    ret |= {
+        "meta": raw_build_meta_tags(
+            url=str(request.url),
+            title=title,
+            description=description,
+        ),
+    }
+    return ret
 
 
 @app.post("/")