preview tab for copilot

Author: anish-work

daras_ai_v2/base.py

@@ -379,15 +379,55 @@ def render(self):
                 & button {
                     padding: 0.4rem !important;
                 }
+
+                & a:has(span.mobile-only-recipe-tab) {
+                    display: block !important;
+                }
+
+                & ul.nav-tabs {
+                    overflow-x: auto;
+                    overflow-y: hidden;
+                    white-space: nowrap;
+                    flex-wrap: nowrap !important;
+                    display: flex;
+                    -webkit-overflow-scrolling: touch;
+                    scrollbar-width: none;
+                    gap: 0.5rem;
+                }
+
+                @media (min-width: 768px) {
+                    & a:has(span.mobile-only-recipe-tab) {
+                        display: none !important;
+                    }
+
+                    /* RUN as active tab in lg view for preview route */
+                    & span.active-lg button {
+                        color: #000;
+                        border-bottom: 2px solid black;
+                    }
+
+                    & ul.nav-tabs {
+                        gap: 0;
+                    }
+                }
                 """
             ),
             gui.div(className="position-relative"),
             gui.nav_tabs(),
         ):
             for tab in self.get_tabs():
                 url = self.current_app_url(tab)
-                with gui.nav_item(url, active=tab == self.tab):
-                    gui.html(tab.title)
+                with gui.tag(
+                    "span",
+                    className="active-lg"
+                    if (tab == RecipeTabs.run and self.tab == RecipeTabs.preview)
+                    else "",
+                ):
+                    with gui.nav_item(
+                        url,
+                        active=tab == self.tab,
+                    ):
+                        gui.html(tab.title)
 
                 self._render_saved_generated_timestamp()
         with gui.nav_tab_content():
@@ -437,7 +477,7 @@ def _render_header(self):
                 self.render_social_buttons()
 
         if tbreadcrumbs.has_breadcrumbs():
-            if self.tab != RecipeTabs.run:
+            if self.tab != RecipeTabs.run and self.tab != RecipeTabs.preview:
                 with gui.styled("& h1 { margin-top: 0 }"):
                     self._render_title(tbreadcrumbs.h1_title)
             else:
@@ -1161,15 +1201,13 @@ def get_tabs(self):
 
     def render_selected_tab(self):
         match self.tab:
-            case RecipeTabs.run:
+            case RecipeTabs.run | RecipeTabs.preview:
                 if self.current_sr.retention_policy == RetentionPolicy.delete:
                     self.render_deleted_output()
                     return
 
                 with gui.styled(OUTPUT_TABS_CSS):
-                    output_col, input_col = gui.tabs(
-                        [f"{icons.preview} Preview", f"{icons.edit} Edit"]
-                    )
+                    input_col, output_col = gui.columns([3, 2], gap="medium")
                     with input_col:
                         submitted = self._render_input_col()
                     with output_col:
@@ -1725,25 +1763,28 @@ def _render_report_button(self):
     show_settings = True
 
     def _render_input_col(self):
-        self.render_form_v2()
-        placeholder = gui.div()
+        with gui.div(
+            className="d-none d-lg-block" if self.tab == RecipeTabs.preview else ""
+        ):
+            self.render_form_v2()
+            placeholder = gui.div()
 
-        if self.show_settings:
-            with gui.div(className="bg-white"):
-                with gui.expander("⚙️ Settings"):
-                    self.render_settings()
-                    if self.functions_in_settings:
-                        functions_input(self.request.user)
+            if self.show_settings:
+                with gui.div(className="bg-white"):
+                    with gui.expander("⚙️ Settings"):
+                        self.render_settings()
+                        if self.functions_in_settings:
+                            functions_input(self.request.user)
 
-        with placeholder:
-            self.render_variables()
+            with placeholder:
+                self.render_variables()
 
-        submitted = self.render_submit_button()
-        with gui.div(style={"textAlign": "right", "fontSize": "smaller"}):
-            terms_caption = self.get_terms_caption()
-            gui.caption(f"_{terms_caption}_")
+            submitted = self.render_submit_button()
+            with gui.div(style={"textAlign": "right", "fontSize": "smaller"}):
+                terms_caption = self.get_terms_caption()
+                gui.caption(f"_{terms_caption}_")
 
-        return submitted
+            return submitted
 
     def get_terms_caption(self):
         return "With each run, you agree to Gooey.AI's [terms](https://gooey.ai/terms) & [privacy policy](https://gooey.ai/privacy)."
@@ -1795,7 +1836,12 @@ def _render_output_col(self, *, submitted: bool = False, is_deleted: bool = Fals
         if submitted:
             self.submit_and_redirect()
 
-        with gui.div(style=dict(position="sticky", top="0.5rem")):
+        with gui.div(
+            style=dict(position="sticky", top="0.5rem"),
+            className="d-none d-lg-block pb-2"
+            if self.tab == RecipeTabs.run and self.workflow in PREVIEW_ROUTE_WORKFLOWS
+            else "",
+        ):
             run_state = self.get_run_state(gui.session_state)
             if run_state == RecipeRunState.failed:
                 self._render_failed_output()
@@ -2487,36 +2533,16 @@ class TitleValidationError(Exception):
     pass
 
 
+PREVIEW_ROUTE_WORKFLOWS = [Workflow.VIDEO_BOTS]
 OUTPUT_TABS_CSS = """
-& [data-reach-tab-list] {  
-    text-align: center; margin-top: 0 
-}
-@media (min-width: 768px) {
-    & [data-reach-tab-list] {
-        display: none;
+    & {
+        margin: -1rem 0 1rem 0;
+        padding-top: 1rem;
     }
-    & [data-reach-tab-panels] {
-        display: flex;
-        flex-direction: row-reverse;
-        width: 100%;
-        background-color: #f9f9f9;
-        padding: 10px;
-        margin-top: -1rem;
-    }
-    & [data-reach-tab-panels] > div:nth-child(2) {
-        flex: 0 1 auto;
-        width: 60%;
-        max-width: 100%;
-        padding-right: 0.75rem;
-    }
-    & [data-reach-tab-panels] > div:nth-child(1) {
-        flex: 0 0 auto;
-        width: 40%;
-        max-width: 100%;
-        padding-left: 0.75rem;
-    }
-    & [data-reach-tab-panel][hidden] {
-        display: block !important;
+    @media (min-width: 768px) {
+        & {
+            background-color: #f9f9f9;
+        }
     }
-}
-"""
+
+"""

daras_ai_v2/meta_content.py

@@ -220,8 +220,12 @@ def robots_tag_for_page(
     match page.tab:
         case RecipeTabs.run if is_root or is_example:
             no_follow, no_index = False, False
+        case RecipeTabs.preview if is_root or is_example:
+            no_follow, no_index = False, False
         case RecipeTabs.run:  # ordinary run (not example)
             no_follow, no_index = False, True
+        case RecipeTabs.preview:
+            no_follow, no_index = False, True
         case RecipeTabs.examples:
             no_follow, no_index = False, False
         case RecipeTabs.run_as_api:

recipes/VideoBots.py

@@ -1479,11 +1479,12 @@ def lipsync_step(self, request, response):
                 response.output_video.append(lip_state["output_video"])
 
     def render_header_extra(self):
-        if self.tab == RecipeTabs.run:
+        if self.tab == RecipeTabs.run or self.tab == RecipeTabs.preview:
             render_demo_buttons_header(self.current_pr)
 
     def get_tabs(self):
         tabs = super().get_tabs()
+        tabs.insert(1, RecipeTabs.preview)
         tabs.extend([RecipeTabs.integrations])
         return tabs
 

routers/root.py

@@ -592,6 +592,18 @@ def chat_lib_route(request: Request, integration_id: str, integration_name: str
     )
 
 
+@gui.route(
+    app,
+    "/{page_slug}/preview/",
+    "/{page_slug}/{run_slug}/preview/",
+    "/{page_slug}/{run_slug}-{example_id}/preview/",
+)
+def preview_route(
+    request: Request, page_slug: str, run_slug: str = None, example_id: str = None
+):
+    return render_recipe_page(request, page_slug, RecipeTabs.preview, example_id)
+
+
 @gui.route(
     app,
     "/{path:path}",
@@ -821,8 +833,13 @@ class TabData(typing.NamedTuple):
 
 
 class RecipeTabs(TabData, Enum):
+    preview = TabData(
+        title=f"<span class='mobile-only-recipe-tab'>{icons.preview} Preview</span>",
+        label="",
+        route=preview_route,
+    )
     run = TabData(
-        title=f"{icons.run} <span class='d-none d-lg-inline'>Run</span>",
+        title=f"{icons.run} Run",
         label="",
         route=recipe_or_handle_or_static,
     )
@@ -842,7 +859,7 @@ class RecipeTabs(TabData, Enum):
         route=history_route,
     )
     integrations = TabData(
-        title=f'<img width="20" height="20" style="margin-right: 4px;margin-top: -3px" src="{icons.integrations_img}" alt="Facebook, Whatsapp, Slack, Instagram Icons"> <span class="d-none d-lg-inline">Integrations</span>',
+        title=f'<img width="20" height="20" style="margin-right: 4px;margin-top: -3px" src="{icons.integrations_img}" alt="Facebook, Whatsapp, Slack, Instagram Icons"> Integrations',
         label="Integrations",
         route=integrations_route,
     )