diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 831e8cf15..7366a94c3 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -1,18 +1,31 @@ import reflex as rx from pcweb.components.icons.icons import get_icon +from reflex.components.datadisplay.shiki_code_block import copy_script -def install_command(command: str) -> rx.Component: +def install_command(command: str, show_dollar_sign: bool = True, **props) -> rx.Component: return rx.el.button( - get_icon(icon="copy", class_name="p-[5px]"), + rx.icon("copy", size=14, margin_left="5px"), rx.text( - "$" + command, + "$" + command if show_dollar_sign else command, as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), title=command, - on_click=rx.set_clipboard(command), + on_click=[ + rx.set_clipboard(command), + copy_script(), + ], class_name="flex items-center gap-1.5 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pr-1.5 border rounded-md w-full max-w-full text-slate-9 transition-bg cursor-pointer overflow-hidden", + style={ + "opacity": "1", + "cursor": "pointer", + "transition": "background 0.250s ease-out", + "&>svg": { + "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", + }, + }, + **props, ) @@ -28,7 +41,7 @@ def repo(repo_url: str) -> rx.Component: def code_card(app: dict) -> rx.Component: return rx.flex( rx.box( - rx.link( + rx.el.a( rx.image( src=app["image_url"], loading="lazy", @@ -88,35 +101,55 @@ def gallery_app_card(app: dict) -> rx.Component: ), rx.box( rx.box( - rx.el.h4( + rx.el.h6( app["title"], class_name="font-smbold text-slate-12 truncate", + width="100%", ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", + width="100%", ), rx.box( - rx.cond( - "Reflex" in app["author"], + rx.vstack( rx.box( - rx.text( - "by", - class_name="text-slate-9 font-small", + rx.hstack( + install_command(f"reflex init --template {app['title']}"), + rx.hstack( + repo(app["demo"]), + justify="start", + + ), + ), + width="310px", + max_width="310px", + + ), + rx.cond( + "Reflex" in app["author"], + rx.box( + rx.text( + "by", + class_name="text-slate-9 font-small", + ), + get_icon(icon="badge_logo"), + rx.text( + app["author"], + class_name="text-slate-9 font-small", + ), + class_name="flex flex-row items-start gap-1", ), - get_icon(icon="badge_logo"), rx.text( - app["author"], + f"by {app['author']}", class_name="text-slate-9 font-small", ), - class_name="flex flex-row items-center gap-1", - ), - rx.text( - f"by {app['author']}", - class_name="text-slate-9 font-small", ), + align_items="start", + class_name="brother-john" ), - repo(app["demo"]), + + class_name="flex flex-row items-center gap-[6px] justify-between w-full", ), class_name="flex flex-col justify-between items-start gap-1 p-[0.625rem_0.75rem_0.625rem_0.75rem] w-full h-full", diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index cc471babe..9f94ac943 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/pcweb/pages/gallery/gallery.py @@ -52,6 +52,11 @@ def gallery_heading() -> rx.Component: ), class_name="font-md text-balance text-slate-9 -mt-4", ), + rx.text.span( + "Copy the template command and use it during ", + rx.code("reflex init"), + class_name="font-sm text-balance text-slate-9", + ), class_name="section-header", ) diff --git a/templates/api-admin-panel.md b/templates/api-admin-panel.md index c006ef181..f7a8ffefa 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -1,10 +1,10 @@ --- -title: API Admin Panel +title: api_admin_panel description: "Interactive dashboard for API requests and response visualization" author: "Reflex" image: "api-admin-panel.webp" demo: "https://api-admin-panel.reflex.run/" -source: "https://github.com/reflex-dev/gallery-apps/tree/main/api-admin-panel" +source: "https://github.com/reflex-dev/templates/tree/main/api_admin_panel" meta: [ {"name": "keywords", "content": "admin panel, api admin panel, reflex admin panel"}, ] diff --git a/templates/chat-app.md b/templates/chat-app.md index f81d62ff0..697ba8da6 100644 --- a/templates/chat-app.md +++ b/templates/chat-app.md @@ -1,10 +1,10 @@ --- -title: Chat App +title: reflex-chat description: "Real-time chat application with multiple rooms using Reflex and ChatGPT" author: "Reflex" image: "chat-app.webp" demo: "https://chat.reflex.run/" -source: "https://github.com/reflex-dev/reflex-examples/tree/main/gpt/gpt" +source: "https://github.com/reflex-dev/reflex-chat" meta: [ {"name": "keywords", "content": ""}, ] @@ -18,11 +18,7 @@ The following is a python chat app. It is 100% Python-based, including the UI, a To run this app locally, install Reflex and run: ```bash -git clone https://github.com/reflex-dev/reflex-chat.git -``` - -```bash -cd reflex-chat +reflex init --template reflex-chat ``` Set up your OpenAI API key: diff --git a/templates/ci-job.md b/templates/ci-job.md index b973b24fc..115f8912a 100644 --- a/templates/ci-job.md +++ b/templates/ci-job.md @@ -1,10 +1,11 @@ --- -title: CI Job +title: ci_template description: "CI/CD job dashboard with real-time updates and controls" author: "Reflex" image: "cijob.webp" demo: "https://cijob.reflex.run/" source: "https://github.com/reflex-dev/templates/tree/main/ci_template" + meta: [ {"name": "keywords", "content": ""}, ] diff --git a/templates/customer-app.md b/templates/customer-app.md index c9fd9c6d5..9fc3781fc 100644 --- a/templates/customer-app.md +++ b/templates/customer-app.md @@ -1,5 +1,5 @@ --- -title: Customer Data App +title: customer_data_app description: "A Reflex app for customer data management with visualizations" author: "Reflex" image: "customer-app.webp" diff --git a/templates/dalle.md b/templates/dalle.md index bdbf3a636..4756fdd4d 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -1,13 +1,14 @@ --- -title: DALL-E +title: dalle description: "DALL-E is a Reflex app for generating images using OpenAI's API" author: "Reflex" image: "dalle.webp" demo: "https://dalle.reflex.run/" -source: "https://github.com/reflex-dev/reflex-examples/tree/main/dalle" +source: "https://github.com/reflex-dev/templates/tree/main/dalle" meta: [ {"name": "keywords", "content": ""}, ] +template: "dalle" --- In this example we create a simple app for generating images using OpenAI's API. @@ -17,8 +18,7 @@ In this example we create a simple app for generating images using OpenAI's API. To run this app locally, install Reflex and run: ```bash -git clone https://github.com/reflex-dev/reflex-examples.git -cd reflex-examples/ci-job +reflex init --template dalle ``` Set up your OpenAI API key: diff --git a/templates/dashboard.md b/templates/dashboard.md index 0efe40551..bc4d786c2 100644 --- a/templates/dashboard.md +++ b/templates/dashboard.md @@ -1,11 +1,13 @@ --- -title: Dashboard +title: dashboard description: "Interactive dashboard with real-time data visualization" author: "Reflex" image: "dashboard.webp" demo: "https://dashboard-new.reflex.run/" source: "https://github.com/reflex-dev/templates/tree/main/dashboard" -meta: [{ "name": "keywords", "content": "" }] +meta: [ + {"name": "keywords", "content": ""}, +] --- The following is a dashboard to interactively display data some data. It is a good starting point for building more complex apps that require data visualization. diff --git a/templates/image-gen.md b/templates/image-gen.md index bccd37d3e..1f90c5ebe 100644 --- a/templates/image-gen.md +++ b/templates/image-gen.md @@ -1,5 +1,5 @@ --- -title: Image Gen +title: ai_image_gen description: "Generate AI images using Replicate's API" author: "Reflex" image: "image-gen.webp" @@ -17,7 +17,7 @@ The following is an app that allows you to generate AI images. The current map u To run this app locally, install Reflex and run: ```bash -reflex init --template image_gen +reflex init --template ai_image_gen ``` To run the app, set the `REPLICATE_API_TOKEN`: diff --git a/templates/llamaindex-app.md b/templates/llamaindex-app.md index 0f6a5ffdf..d25f64729 100644 --- a/templates/llamaindex-app.md +++ b/templates/llamaindex-app.md @@ -1,5 +1,5 @@ --- -title: LLamaIndex App +title: reflex-llamaindex-template description: "A minimal chat app using LLamaIndex" author: "Reflex" image: "llamaindex.png" @@ -21,9 +21,11 @@ If you plan on deploying your agentic workflow to prod, follow the [llama deploy To run this app locally, install Reflex and run: ```bash -git clone https://github.com/reflex-dev/reflex-llamaindex-template.git +reflex init --template reflex-llamaindex-template ``` + + The following [lines](https://github.com/reflex-dev/reflex-llamaindex-template/blob/abfda49ff193ceb7da90c382e5cbdcb5fcdb665c/frontend/state.py#L55-L79) in the state.py file are where the app makes a request to your deployed agentic workflow. If you have not deployed your agentic workflow, you can edit this to call and api endpoint of your choice. ```python diff --git a/templates/nba-app.md b/templates/nba-app.md index 69d80e8c9..9af0f2b73 100644 --- a/templates/nba-app.md +++ b/templates/nba-app.md @@ -1,5 +1,5 @@ --- -title: NBA App +title: nba description: "Interactive NBA app with player stats and live updates" author: "Reflex" image: "nba-app.webp" @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/nba" meta: [ {"name": "keywords", "content": ""}, ] +template: "nba" --- The following is an app that displays NBA player stats from the 2015-2016 season. The table tab allows filtering and live updates. The graph tab shows the relationship between player stats. @@ -17,7 +18,7 @@ The following is an app that displays NBA player stats from the 2015-2016 season To run this app locally, install Reflex and run: ```bash -reflex init --template nba_app +reflex init --template nba ``` To run the app, use: diff --git a/templates/reflex-web.md b/templates/reflex-web.md deleted file mode 100644 index 77333a1f5..000000000 --- a/templates/reflex-web.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Reflex Website -description: "The official Reflex website, built with completely with Reflex." -author: "Reflex" -image: "reflex-web.webp" -demo: "https://reflex.dev/" -source: "https://github.com/reflex-dev/reflex-web" -meta: [ - {"name": "keywords", "content": ""}, -] ---- - -The Reflex website is a fully featured website and documentation site built with Reflex. More information can be found on the [Reflex Website GitHub](https://github.com/reflex-dev/reflex-web). diff --git a/templates/sales-app.md b/templates/sales-app.md index a36529929..3efcf60bf 100644 --- a/templates/sales-app.md +++ b/templates/sales-app.md @@ -1,5 +1,5 @@ --- -title: Sales App +title: sales description: "Sales app with interactive charts and real-time data updates" author: "Reflex" image: "sales.webp" @@ -10,14 +10,14 @@ meta: [ ] --- -The following is a dashboard to interactively display data some data. It is a good starting point for building more complex apps that require data visualization. +The following is a sales app that displays sales data. The table tab allows filtering and live updates. The graph tab shows the relationship between sales data. ## Setup To run this app locally, install Reflex and run: ```bash -reflex init --template dashboard +reflex init --template sales ``` To run the app, use: