From bdb83f34ce0bf1b41f6b7f70cf1004dbd80000a1 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 16:28:11 +0000 Subject: [PATCH 01/13] Add template name and fix broken template links --- pcweb/components/code_card.py | 46 ++++++++++++++++++++++++++++++----- templates/api-admin-panel.md | 1 + templates/chat-app.md | 3 ++- templates/ci-job.md | 3 ++- templates/customer-app.md | 1 + templates/dalle.md | 1 + templates/dashboard.md | 5 +++- templates/image-gen.md | 1 + templates/llamaindex-app.md | 1 + templates/nba-app.md | 1 + templates/sales-app.md | 1 + 11 files changed, 55 insertions(+), 9 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 831e8cf15..47320afa6 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,11 +2,11 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str) -> rx.Component: +def install_command(command: str, is_command: bool = True) -> rx.Component: return rx.el.button( get_icon(icon="copy", class_name="p-[5px]"), rx.text( - "$" + command, + "$" + command if is_command else command, as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), @@ -28,7 +28,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,10 +88,44 @@ 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", ), + rx.cond("template" in app, + rx.hstack( + rx.el.p( + "Template name: ", + rx.code(app.get('template', "")), + class_name="font-small text-slate-10 italic", + ), + rx.box( + get_icon(icon="copy", class_name="p-[5px]"), + on_click=rx.set_clipboard(app.get('template')), + style=rx.Style( + { + "background": rx.color("gray", 3), + "border": "1px solid", + "border-color": rx.color("gray", 5), + "border-radius": "6px", + "opacity": "1", + "cursor": "pointer", + "_hover": { + "background": rx.color("gray", 4), + }, + "transition": "background 0.250s ease-out", + "&>svg": { + "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", + }, + "_active": { + "background": rx.color("gray", 5), + }, + } + ), + ) + ), + + ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", @@ -101,8 +135,8 @@ def gallery_app_card(app: dict) -> rx.Component: "Reflex" in app["author"], rx.box( rx.text( - "by", - class_name="text-slate-9 font-small", + "by", + class_name="text-slate-9 font-small", ), get_icon(icon="badge_logo"), rx.text( diff --git a/templates/api-admin-panel.md b/templates/api-admin-panel.md index c006ef181..b05f6b6a2 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/gallery-apps/tree/main/api-admin-panel" meta: [ {"name": "keywords", "content": "admin panel, api admin panel, reflex admin panel"}, ] +template: "api-admin-panel" --- The following is an admin panel for reading from and writing to your customer data, built on a REST API. This app lets you look through customers and take custom actions based on the data. diff --git a/templates/chat-app.md b/templates/chat-app.md index f81d62ff0..b194abbca 100644 --- a/templates/chat-app.md +++ b/templates/chat-app.md @@ -4,10 +4,11 @@ description: "Real-time chat application with multiple rooms using Reflex and Ch 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": ""}, ] +template: "chat" --- # Chat App diff --git a/templates/ci-job.md b/templates/ci-job.md index b973b24fc..0e8dd8a2e 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" +template: "ci-template" meta: [ {"name": "keywords", "content": ""}, ] diff --git a/templates/customer-app.md b/templates/customer-app.md index c9fd9c6d5..d45c96277 100644 --- a/templates/customer-app.md +++ b/templates/customer-app.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/customer_data_app" meta: [ {"name": "keywords", "content": ""}, ] +template: "customer-data" --- The following is a python dashboard to interactively display some data, i.e. customer data. The app allows you to add, edit, and delete customer data in a table, as well as visualize the changes in data over time. All the data is stored in a database. It is a good starting point for building more complex apps that require data visualization and editing. diff --git a/templates/dalle.md b/templates/dalle.md index bdbf3a636..747960069 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/reflex-examples/tree/main/dalle" meta: [ {"name": "keywords", "content": ""}, ] +template: "dalle" --- In this example we create a simple app for generating images using OpenAI's API. diff --git a/templates/dashboard.md b/templates/dashboard.md index 0efe40551..e12c5a6a1 100644 --- a/templates/dashboard.md +++ b/templates/dashboard.md @@ -5,7 +5,10 @@ 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": ""}, +] +template: "dashboard" --- 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..4cc5e065a 100644 --- a/templates/image-gen.md +++ b/templates/image-gen.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/ai_image_gen" meta: [ {"name": "keywords", "content": "image generation, ai image generation, reflex image generation, Replicate image generation"}, ] +template: "ai-image-gen" --- The following is an app that allows you to generate AI images. The current map uses replicate's api to generate images but can be easily modified to use other image generation services. diff --git a/templates/llamaindex-app.md b/templates/llamaindex-app.md index 0f6a5ffdf..d013be234 100644 --- a/templates/llamaindex-app.md +++ b/templates/llamaindex-app.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/reflex-llamaindex-template" meta: [ {"name": "keywords", "content": ""}, ] +template: "llamaindex" --- The following is an alternative UI to display the LLamaIndex app. diff --git a/templates/nba-app.md b/templates/nba-app.md index 69d80e8c9..eb98876dc 100644 --- a/templates/nba-app.md +++ b/templates/nba-app.md @@ -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. diff --git a/templates/sales-app.md b/templates/sales-app.md index a36529929..2668b8425 100644 --- a/templates/sales-app.md +++ b/templates/sales-app.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/sales" meta: [ {"name": "keywords", "content": ""}, ] +template: "sales" --- 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. From 5c60318ac66a9bf728291fc3ddfb8f0104d608b9 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 16:32:24 +0000 Subject: [PATCH 02/13] revert install command logic --- pcweb/components/code_card.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 47320afa6..a0612af7a 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,11 +2,11 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str, is_command: bool = True) -> rx.Component: +def install_command(command: str) -> rx.Component: return rx.el.button( get_icon(icon="copy", class_name="p-[5px]"), rx.text( - "$" + command if is_command else command, + "$" + command, as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), From e1beee0e59b2dd37af8965fbe2b5088f3dfa6c45 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 21:52:23 +0000 Subject: [PATCH 03/13] remove website from templates --- pcweb/components/code_card.py | 78 +++++++++++++++++++---------------- templates/reflex-web.md | 13 ------ 2 files changed, 42 insertions(+), 49 deletions(-) delete mode 100644 templates/reflex-web.md diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index a0612af7a..2ed185b27 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,7 +2,7 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str) -> rx.Component: +def install_command(command: str, **props) -> rx.Component: return rx.el.button( get_icon(icon="copy", class_name="p-[5px]"), rx.text( @@ -10,9 +10,11 @@ def install_command(command: str) -> rx.Component: as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), + width="auto", title=command, on_click=rx.set_clipboard(command), 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", + **props, ) @@ -92,40 +94,40 @@ def gallery_app_card(app: dict) -> rx.Component: app["title"], class_name="font-smbold text-slate-12 truncate", ), - rx.cond("template" in app, - rx.hstack( - rx.el.p( - "Template name: ", - rx.code(app.get('template', "")), - class_name="font-small text-slate-10 italic", - ), - rx.box( - get_icon(icon="copy", class_name="p-[5px]"), - on_click=rx.set_clipboard(app.get('template')), - style=rx.Style( - { - "background": rx.color("gray", 3), - "border": "1px solid", - "border-color": rx.color("gray", 5), - "border-radius": "6px", - "opacity": "1", - "cursor": "pointer", - "_hover": { - "background": rx.color("gray", 4), - }, - "transition": "background 0.250s ease-out", - "&>svg": { - "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", - }, - "_active": { - "background": rx.color("gray", 5), - }, - } - ), - ) - ), - - ), + # rx.cond("template" in app, + # rx.hstack( + # rx.el.p( + # "Template name: ", + # rx.code(app.get('template', "")), + # class_name="font-small text-slate-10 italic", + # ), + # rx.box( + # get_icon(icon="copy", class_name="p-[5px]"), + # on_click=rx.set_clipboard(app.get('template')), + # style=rx.Style( + # { + # "background": rx.color("gray", 3), + # "border": "1px solid", + # "border-color": rx.color("gray", 5), + # "border-radius": "6px", + # "opacity": "1", + # "cursor": "pointer", + # "_hover": { + # "background": rx.color("gray", 4), + # }, + # "transition": "background 0.250s ease-out", + # "&>svg": { + # "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", + # }, + # "_active": { + # "background": rx.color("gray", 5), + # }, + # } + # ), + # ) + # ), + # + # ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", @@ -150,7 +152,11 @@ def gallery_app_card(app: dict) -> rx.Component: class_name="text-slate-9 font-small", ), ), - repo(app["demo"]), + rx.hstack( + rx.cond("template" in app, install_command(app.get('template', ""))), + 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/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). From d28af0e95b7c66a11abbbb5423ea68d074965fb3 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:43:39 +0000 Subject: [PATCH 04/13] Rectify links and template content --- templates/api-admin-panel.md | 2 +- templates/chat-app.md | 6 +----- templates/dalle.md | 5 ++--- templates/image-gen.md | 2 +- templates/llamaindex-app.md | 4 +++- templates/nba-app.md | 2 +- templates/sales-app.md | 4 ++-- 7 files changed, 11 insertions(+), 14 deletions(-) diff --git a/templates/api-admin-panel.md b/templates/api-admin-panel.md index b05f6b6a2..1cbacab60 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -4,7 +4,7 @@ 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 b194abbca..d84d34bc6 100644 --- a/templates/chat-app.md +++ b/templates/chat-app.md @@ -19,11 +19,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 chat ``` Set up your OpenAI API key: diff --git a/templates/dalle.md b/templates/dalle.md index 747960069..fb266da6a 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -4,7 +4,7 @@ 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": ""}, ] @@ -18,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/image-gen.md b/templates/image-gen.md index 4cc5e065a..85d62beee 100644 --- a/templates/image-gen.md +++ b/templates/image-gen.md @@ -18,7 +18,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 d013be234..0c799075e 100644 --- a/templates/llamaindex-app.md +++ b/templates/llamaindex-app.md @@ -22,9 +22,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 llamaindex ``` + + 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 eb98876dc..0f5d6c0ea 100644 --- a/templates/nba-app.md +++ b/templates/nba-app.md @@ -18,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/sales-app.md b/templates/sales-app.md index 2668b8425..c9380dce0 100644 --- a/templates/sales-app.md +++ b/templates/sales-app.md @@ -11,14 +11,14 @@ meta: [ template: "sales" --- -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: From 48fef1d19edb9a44bfbd970f01dda9e8344dbb36 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:45:19 +0000 Subject: [PATCH 05/13] The width should be passed as a prop --- pcweb/components/code_card.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 2ed185b27..8964e7169 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -10,7 +10,6 @@ def install_command(command: str, **props) -> rx.Component: as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), - width="auto", title=command, on_click=rx.set_clipboard(command), 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", @@ -153,7 +152,7 @@ def gallery_app_card(app: dict) -> rx.Component: ), ), rx.hstack( - rx.cond("template" in app, install_command(app.get('template', ""))), + rx.cond("template" in app, install_command(app.get('template', ""), width="auto")), repo(app["demo"]), ), From 66dd7cd4e9d07ad9407e886b62ceb47b5a6a4d54 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:47:52 +0000 Subject: [PATCH 06/13] remove dead code --- pcweb/components/code_card.py | 34 ---------------------------------- 1 file changed, 34 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 8964e7169..0307fbad0 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -93,40 +93,6 @@ def gallery_app_card(app: dict) -> rx.Component: app["title"], class_name="font-smbold text-slate-12 truncate", ), - # rx.cond("template" in app, - # rx.hstack( - # rx.el.p( - # "Template name: ", - # rx.code(app.get('template', "")), - # class_name="font-small text-slate-10 italic", - # ), - # rx.box( - # get_icon(icon="copy", class_name="p-[5px]"), - # on_click=rx.set_clipboard(app.get('template')), - # style=rx.Style( - # { - # "background": rx.color("gray", 3), - # "border": "1px solid", - # "border-color": rx.color("gray", 5), - # "border-radius": "6px", - # "opacity": "1", - # "cursor": "pointer", - # "_hover": { - # "background": rx.color("gray", 4), - # }, - # "transition": "background 0.250s ease-out", - # "&>svg": { - # "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", - # }, - # "_active": { - # "background": rx.color("gray", 5), - # }, - # } - # ), - # ) - # ), - # - # ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", From 7f3b75b8f392e4f0ca0f975962a3eee0e04fb330 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 15 Nov 2024 12:47:58 +0000 Subject: [PATCH 07/13] remove dollat sign from template --- pcweb/components/code_card.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 0307fbad0..3b2844697 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,11 +2,11 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str, **props) -> 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.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", ), @@ -118,7 +118,7 @@ def gallery_app_card(app: dict) -> rx.Component: ), ), rx.hstack( - rx.cond("template" in app, install_command(app.get('template', ""), width="auto")), + rx.cond("template" in app, install_command(app.get('template', ""),show_dollar_sign=False, width="auto")), repo(app["demo"]), ), From 18a40724e2e603418300787f406ef0827f888244 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 15 Nov 2024 17:50:09 +0000 Subject: [PATCH 08/13] fix ci template, template name --- templates/ci-job.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/ci-job.md b/templates/ci-job.md index 0e8dd8a2e..4c3241ebf 100644 --- a/templates/ci-job.md +++ b/templates/ci-job.md @@ -5,7 +5,7 @@ author: "Reflex" image: "cijob.webp" demo: "https://cijob.reflex.run/" source: "https://github.com/reflex-dev/templates/tree/main/ci_template" -template: "ci-template" +template: "ci" meta: [ {"name": "keywords", "content": ""}, ] From 7c49d71d2935838400a4c4963dec49ce439a0b06 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 15 Nov 2024 19:41:38 +0000 Subject: [PATCH 09/13] make requested changes --- pcweb/components/code_card.py | 18 +++++++++++------- pcweb/pages/gallery/gallery.py | 5 +++++ templates/api-admin-panel.md | 3 +-- templates/chat-app.md | 5 ++--- templates/ci-job.md | 4 ++-- templates/customer-app.md | 3 +-- templates/dalle.md | 2 +- templates/dashboard.md | 3 +-- templates/image-gen.md | 5 ++--- templates/llamaindex-app.md | 5 ++--- templates/nba-app.md | 2 +- templates/sales-app.md | 3 +-- 12 files changed, 30 insertions(+), 28 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 3b2844697..94531aa25 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -89,9 +89,16 @@ def gallery_app_card(app: dict) -> rx.Component: ), rx.box( rx.box( - rx.el.h6( - app["title"], - class_name="font-smbold text-slate-12 truncate", + rx.hstack( + rx.el.h6( + app["title"], + class_name="font-smbold text-slate-12 truncate", + ), + rx.el.button( + get_icon(icon="copy", class_name="p-[5px]"), + on_click=rx.set_clipboard(app["title"]), + class_name="border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small border rounded-md text-slate-9 hover:!text-slate-9 no-underline transition-bg cursor-pointer", + ), ), rx.text( app["description"], @@ -117,10 +124,7 @@ def gallery_app_card(app: dict) -> rx.Component: class_name="text-slate-9 font-small", ), ), - rx.hstack( - rx.cond("template" in app, install_command(app.get('template', ""),show_dollar_sign=False, width="auto")), - repo(app["demo"]), - ), + repo(app["demo"]), class_name="flex flex-row items-center gap-[6px] justify-between w-full", ), diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index cc471babe..b591928d8 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 name 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 1cbacab60..f7a8ffefa 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -1,5 +1,5 @@ --- -title: API Admin Panel +title: api_admin_panel description: "Interactive dashboard for API requests and response visualization" author: "Reflex" image: "api-admin-panel.webp" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/api_admin_panel" meta: [ {"name": "keywords", "content": "admin panel, api admin panel, reflex admin panel"}, ] -template: "api-admin-panel" --- The following is an admin panel for reading from and writing to your customer data, built on a REST API. This app lets you look through customers and take custom actions based on the data. diff --git a/templates/chat-app.md b/templates/chat-app.md index d84d34bc6..697ba8da6 100644 --- a/templates/chat-app.md +++ b/templates/chat-app.md @@ -1,5 +1,5 @@ --- -title: Chat App +title: reflex-chat description: "Real-time chat application with multiple rooms using Reflex and ChatGPT" author: "Reflex" image: "chat-app.webp" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/reflex-chat" meta: [ {"name": "keywords", "content": ""}, ] -template: "chat" --- # Chat App @@ -19,7 +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 -reflex init --template 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 4c3241ebf..115f8912a 100644 --- a/templates/ci-job.md +++ b/templates/ci-job.md @@ -1,11 +1,11 @@ --- -title: CI Template +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" -template: "ci" + meta: [ {"name": "keywords", "content": ""}, ] diff --git a/templates/customer-app.md b/templates/customer-app.md index d45c96277..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" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/customer_data_app" meta: [ {"name": "keywords", "content": ""}, ] -template: "customer-data" --- The following is a python dashboard to interactively display some data, i.e. customer data. The app allows you to add, edit, and delete customer data in a table, as well as visualize the changes in data over time. All the data is stored in a database. It is a good starting point for building more complex apps that require data visualization and editing. diff --git a/templates/dalle.md b/templates/dalle.md index fb266da6a..4756fdd4d 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -1,5 +1,5 @@ --- -title: DALL-E +title: dalle description: "DALL-E is a Reflex app for generating images using OpenAI's API" author: "Reflex" image: "dalle.webp" diff --git a/templates/dashboard.md b/templates/dashboard.md index e12c5a6a1..bc4d786c2 100644 --- a/templates/dashboard.md +++ b/templates/dashboard.md @@ -1,5 +1,5 @@ --- -title: Dashboard +title: dashboard description: "Interactive dashboard with real-time data visualization" author: "Reflex" image: "dashboard.webp" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/dashboard" meta: [ {"name": "keywords", "content": ""}, ] -template: "dashboard" --- 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 85d62beee..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" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/ai_image_gen" meta: [ {"name": "keywords", "content": "image generation, ai image generation, reflex image generation, Replicate image generation"}, ] -template: "ai-image-gen" --- The following is an app that allows you to generate AI images. The current map uses replicate's api to generate images but can be easily modified to use other image generation services. @@ -18,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 ai-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 0c799075e..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" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/reflex-llamaindex-template" meta: [ {"name": "keywords", "content": ""}, ] -template: "llamaindex" --- The following is an alternative UI to display the LLamaIndex app. @@ -22,7 +21,7 @@ If you plan on deploying your agentic workflow to prod, follow the [llama deploy To run this app locally, install Reflex and run: ```bash -reflex init --template llamaindex +reflex init --template reflex-llamaindex-template ``` diff --git a/templates/nba-app.md b/templates/nba-app.md index 0f5d6c0ea..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" diff --git a/templates/sales-app.md b/templates/sales-app.md index c9380dce0..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" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/sales" meta: [ {"name": "keywords", "content": ""}, ] -template: "sales" --- 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. From cd4324c41c8fc8f5d6fb5f5ad7bf73238fded131 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 21 Nov 2024 14:59:28 +0000 Subject: [PATCH 10/13] the template cards should have the full reflex command --- pcweb/components/code_card.py | 54 +++++++++++++++++++--------------- pcweb/pages/gallery/gallery.py | 2 +- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 94531aa25..6625a9585 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -89,42 +89,50 @@ def gallery_app_card(app: dict) -> rx.Component: ), rx.box( rx.box( - rx.hstack( - rx.el.h6( - app["title"], - class_name="font-smbold text-slate-12 truncate", - ), - rx.el.button( - get_icon(icon="copy", class_name="p-[5px]"), - on_click=rx.set_clipboard(app["title"]), - class_name="border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small border rounded-md text-slate-9 hover:!text-slate-9 no-underline transition-bg cursor-pointer", - ), + rx.el.h6( + app["title"], + class_name="font-smbold text-slate-12 truncate", ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", ), 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", + + ), + ), + + ), + 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", ), diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index b591928d8..9f94ac943 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/pcweb/pages/gallery/gallery.py @@ -53,7 +53,7 @@ def gallery_heading() -> rx.Component: class_name="font-md text-balance text-slate-9 -mt-4", ), rx.text.span( - "Copy the template name and use it during ", + "Copy the template command and use it during ", rx.code("reflex init"), class_name="font-sm text-balance text-slate-9", ), From c73008572c1637cdf1f53e26823dd1e2c5d8ae81 Mon Sep 17 00:00:00 2001 From: Elijah Date: Sun, 24 Nov 2024 11:05:23 +0000 Subject: [PATCH 11/13] add max-width --- pcweb/components/code_card.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 6625a9585..91efef184 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -108,6 +108,8 @@ def gallery_app_card(app: dict) -> rx.Component: ), ), + width="310px", + max_width="310px", ), rx.cond( From 15565f7c4bdf1c4cce55a1001932734b4d369847 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Mon, 25 Nov 2024 16:02:08 -0800 Subject: [PATCH 12/13] templates: install_command copy button animation import `copy_script` from the shiki code block and reuse it --- pcweb/components/code_card.py | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 91efef184..4f82a3e3d 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -1,18 +1,30 @@ 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, 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 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, ) From 84e53f15c3dfba08e7324a88c207fb75b82502a9 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Mon, 25 Nov 2024 16:10:28 -0800 Subject: [PATCH 13/13] templates: set width="100%" for description text allow truncation ellipses and auto tooltip logic in browsers like safari and firefox --- pcweb/components/code_card.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 4f82a3e3d..7366a94c3 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -104,10 +104,12 @@ def gallery_app_card(app: dict) -> rx.Component: 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.vstack(