diff --git a/assets/ai_builder/add_images_to_assets.avif b/assets/ai_builder/add_images_to_assets.avif new file mode 100644 index 0000000000..6b647c150f Binary files /dev/null and b/assets/ai_builder/add_images_to_assets.avif differ diff --git a/assets/ai_builder/add_images_to_assets.webp b/assets/ai_builder/add_images_to_assets.webp deleted file mode 100644 index 130224fdf0..0000000000 Binary files a/assets/ai_builder/add_images_to_assets.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/copy_dark.webp b/assets/ai_builder/app_lifecycle/copy_dark.webp deleted file mode 100644 index 6f9e97f39f..0000000000 Binary files a/assets/ai_builder/app_lifecycle/copy_dark.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/copy_light.avif b/assets/ai_builder/app_lifecycle/copy_light.avif new file mode 100644 index 0000000000..46d2823f67 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/copy_light.avif differ diff --git a/assets/ai_builder/app_lifecycle/copy_light.webp b/assets/ai_builder/app_lifecycle/copy_light.webp deleted file mode 100644 index e97529b066..0000000000 Binary files a/assets/ai_builder/app_lifecycle/copy_light.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/deploy_dark.webp b/assets/ai_builder/app_lifecycle/deploy_dark.webp deleted file mode 100644 index 3648791d15..0000000000 Binary files a/assets/ai_builder/app_lifecycle/deploy_dark.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/deploy_light.avif b/assets/ai_builder/app_lifecycle/deploy_light.avif new file mode 100644 index 0000000000..1ccfc5e20a Binary files /dev/null and b/assets/ai_builder/app_lifecycle/deploy_light.avif differ diff --git a/assets/ai_builder/app_lifecycle/deploy_light.webp b/assets/ai_builder/app_lifecycle/deploy_light.webp deleted file mode 100644 index 9c2358de40..0000000000 Binary files a/assets/ai_builder/app_lifecycle/deploy_light.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/download_dark.webp b/assets/ai_builder/app_lifecycle/download_dark.webp deleted file mode 100644 index f199d6967c..0000000000 Binary files a/assets/ai_builder/app_lifecycle/download_dark.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/download_light.avif b/assets/ai_builder/app_lifecycle/download_light.avif new file mode 100644 index 0000000000..1997f72126 Binary files /dev/null and b/assets/ai_builder/app_lifecycle/download_light.avif differ diff --git a/assets/ai_builder/app_lifecycle/download_light.webp b/assets/ai_builder/app_lifecycle/download_light.webp deleted file mode 100644 index cb3f7bf962..0000000000 Binary files a/assets/ai_builder/app_lifecycle/download_light.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/general_dark.webp b/assets/ai_builder/app_lifecycle/general_dark.webp deleted file mode 100644 index c0754b531b..0000000000 Binary files a/assets/ai_builder/app_lifecycle/general_dark.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/general_light.avif b/assets/ai_builder/app_lifecycle/general_light.avif new file mode 100644 index 0000000000..9a0ecf6a5d Binary files /dev/null and b/assets/ai_builder/app_lifecycle/general_light.avif differ diff --git a/assets/ai_builder/app_lifecycle/general_light.webp b/assets/ai_builder/app_lifecycle/general_light.webp deleted file mode 100644 index cf9994c7c8..0000000000 Binary files a/assets/ai_builder/app_lifecycle/general_light.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/share_dark.webp b/assets/ai_builder/app_lifecycle/share_dark.webp deleted file mode 100644 index dde6b2cc85..0000000000 Binary files a/assets/ai_builder/app_lifecycle/share_dark.webp and /dev/null differ diff --git a/assets/ai_builder/app_lifecycle/share_light.avif b/assets/ai_builder/app_lifecycle/share_light.avif new file mode 100644 index 0000000000..8b9595ef3e Binary files /dev/null and b/assets/ai_builder/app_lifecycle/share_light.avif differ diff --git a/assets/ai_builder/app_lifecycle/share_light.webp b/assets/ai_builder/app_lifecycle/share_light.webp deleted file mode 100644 index 4c028e5083..0000000000 Binary files a/assets/ai_builder/app_lifecycle/share_light.webp and /dev/null differ diff --git a/assets/ai_builder/connecting_to_github.avif b/assets/ai_builder/connecting_to_github.avif new file mode 100644 index 0000000000..5b3a1fd5b2 Binary files /dev/null and b/assets/ai_builder/connecting_to_github.avif differ diff --git a/assets/ai_builder/connecting_to_github.gif b/assets/ai_builder/connecting_to_github.gif deleted file mode 100644 index 842d20e5c7..0000000000 Binary files a/assets/ai_builder/connecting_to_github.gif and /dev/null differ diff --git a/assets/ai_builder/external_packages_input.avif b/assets/ai_builder/external_packages_input.avif new file mode 100644 index 0000000000..fe6fbcafe6 Binary files /dev/null and b/assets/ai_builder/external_packages_input.avif differ diff --git a/assets/ai_builder/external_packages_input.gif b/assets/ai_builder/external_packages_input.gif deleted file mode 100644 index 2e0d0e9754..0000000000 Binary files a/assets/ai_builder/external_packages_input.gif and /dev/null differ diff --git a/assets/ai_builder/external_packages_requirements.avif b/assets/ai_builder/external_packages_requirements.avif new file mode 100644 index 0000000000..0dade205b2 Binary files /dev/null and b/assets/ai_builder/external_packages_requirements.avif differ diff --git a/assets/ai_builder/external_packages_requirements.gif b/assets/ai_builder/external_packages_requirements.gif deleted file mode 100644 index a493676ffc..0000000000 Binary files a/assets/ai_builder/external_packages_requirements.gif and /dev/null differ diff --git a/assets/ai_builder/features/diff_dark.webp b/assets/ai_builder/features/diff_dark.webp deleted file mode 100644 index 3e8c8f08d1..0000000000 Binary files a/assets/ai_builder/features/diff_dark.webp and /dev/null differ diff --git a/assets/ai_builder/features/diff_light.avif b/assets/ai_builder/features/diff_light.avif new file mode 100644 index 0000000000..a28bcbfd34 Binary files /dev/null and b/assets/ai_builder/features/diff_light.avif differ diff --git a/assets/ai_builder/features/diff_light.webp b/assets/ai_builder/features/diff_light.webp deleted file mode 100644 index 3f50d5f1bb..0000000000 Binary files a/assets/ai_builder/features/diff_light.webp and /dev/null differ diff --git a/assets/ai_builder/features/knowledge_dark.webp b/assets/ai_builder/features/knowledge_dark.webp deleted file mode 100644 index 2384c77337..0000000000 Binary files a/assets/ai_builder/features/knowledge_dark.webp and /dev/null differ diff --git a/assets/ai_builder/features/knowledge_light.avif b/assets/ai_builder/features/knowledge_light.avif new file mode 100644 index 0000000000..13a9fdaeca Binary files /dev/null and b/assets/ai_builder/features/knowledge_light.avif differ diff --git a/assets/ai_builder/features/knowledge_light.webp b/assets/ai_builder/features/knowledge_light.webp deleted file mode 100644 index 797fb0fcc5..0000000000 Binary files a/assets/ai_builder/features/knowledge_light.webp and /dev/null differ diff --git a/assets/ai_builder/features/restore_dark.webp b/assets/ai_builder/features/restore_dark.webp deleted file mode 100644 index 7a5c50c050..0000000000 Binary files a/assets/ai_builder/features/restore_dark.webp and /dev/null differ diff --git a/assets/ai_builder/features/restore_light.avif b/assets/ai_builder/features/restore_light.avif new file mode 100644 index 0000000000..0c95e28073 Binary files /dev/null and b/assets/ai_builder/features/restore_light.avif differ diff --git a/assets/ai_builder/features/restore_light.webp b/assets/ai_builder/features/restore_light.webp deleted file mode 100644 index 7d4903483f..0000000000 Binary files a/assets/ai_builder/features/restore_light.webp and /dev/null differ diff --git a/assets/ai_builder/features/secret_bulk_dark.webp b/assets/ai_builder/features/secret_bulk_dark.webp deleted file mode 100644 index be4bcc93b8..0000000000 Binary files a/assets/ai_builder/features/secret_bulk_dark.webp and /dev/null differ diff --git a/assets/ai_builder/features/secret_bulk_light.webp b/assets/ai_builder/features/secret_bulk_light.webp deleted file mode 100644 index 52784d2dff..0000000000 Binary files a/assets/ai_builder/features/secret_bulk_light.webp and /dev/null differ diff --git a/assets/ai_builder/features/secrets_bulk_light.avif b/assets/ai_builder/features/secrets_bulk_light.avif new file mode 100644 index 0000000000..e83140e4ca Binary files /dev/null and b/assets/ai_builder/features/secrets_bulk_light.avif differ diff --git a/assets/ai_builder/features/secrets_dark.webp b/assets/ai_builder/features/secrets_dark.webp deleted file mode 100644 index 080f52c4b2..0000000000 Binary files a/assets/ai_builder/features/secrets_dark.webp and /dev/null differ diff --git a/assets/ai_builder/features/secrets_light.avif b/assets/ai_builder/features/secrets_light.avif new file mode 100644 index 0000000000..b53191d290 Binary files /dev/null and b/assets/ai_builder/features/secrets_light.avif differ diff --git a/assets/ai_builder/features/secrets_light.webp b/assets/ai_builder/features/secrets_light.webp deleted file mode 100644 index 4a35c8932b..0000000000 Binary files a/assets/ai_builder/features/secrets_light.webp and /dev/null differ diff --git a/assets/ai_builder/find_knowledge_tab.webp b/assets/ai_builder/find_knowledge_tab.webp deleted file mode 100644 index c07cd5a840..0000000000 Binary files a/assets/ai_builder/find_knowledge_tab.webp and /dev/null differ diff --git a/assets/ai_builder/github_commit_history.avif b/assets/ai_builder/github_commit_history.avif new file mode 100644 index 0000000000..828fd892e3 Binary files /dev/null and b/assets/ai_builder/github_commit_history.avif differ diff --git a/assets/ai_builder/github_commit_history.png b/assets/ai_builder/github_commit_history.png deleted file mode 100644 index 8280d6f790..0000000000 Binary files a/assets/ai_builder/github_commit_history.png and /dev/null differ diff --git a/assets/ai_builder/image_upload.avif b/assets/ai_builder/image_upload.avif new file mode 100644 index 0000000000..b72638d78d Binary files /dev/null and b/assets/ai_builder/image_upload.avif differ diff --git a/assets/ai_builder/image_upload.gif b/assets/ai_builder/image_upload.gif deleted file mode 100644 index 1a37ff0815..0000000000 Binary files a/assets/ai_builder/image_upload.gif and /dev/null differ diff --git a/assets/ai_builder/overview/fork_template_dark.webp b/assets/ai_builder/overview/fork_template_dark.webp deleted file mode 100644 index 6447d5a4c2..0000000000 Binary files a/assets/ai_builder/overview/fork_template_dark.webp and /dev/null differ diff --git a/assets/ai_builder/overview/fork_template_light.avif b/assets/ai_builder/overview/fork_template_light.avif new file mode 100644 index 0000000000..0a5b5daccc Binary files /dev/null and b/assets/ai_builder/overview/fork_template_light.avif differ diff --git a/assets/ai_builder/overview/fork_template_light.webp b/assets/ai_builder/overview/fork_template_light.webp deleted file mode 100644 index e16ca2cf48..0000000000 Binary files a/assets/ai_builder/overview/fork_template_light.webp and /dev/null differ diff --git a/assets/ai_builder/overview/templates_dark.webp b/assets/ai_builder/overview/templates_dark.webp deleted file mode 100644 index f0c7f4181d..0000000000 Binary files a/assets/ai_builder/overview/templates_dark.webp and /dev/null differ diff --git a/assets/ai_builder/overview/templates_light.avif b/assets/ai_builder/overview/templates_light.avif new file mode 100644 index 0000000000..dcb1375c06 Binary files /dev/null and b/assets/ai_builder/overview/templates_light.avif differ diff --git a/assets/ai_builder/overview/templates_light.webp b/assets/ai_builder/overview/templates_light.webp deleted file mode 100644 index 92de944448..0000000000 Binary files a/assets/ai_builder/overview/templates_light.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_1_dark.webp b/assets/ai_builder/overview/tutorial_1_dark.webp deleted file mode 100644 index 55450b9d69..0000000000 Binary files a/assets/ai_builder/overview/tutorial_1_dark.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_1_light.avif b/assets/ai_builder/overview/tutorial_1_light.avif new file mode 100644 index 0000000000..8933b24511 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_1_light.avif differ diff --git a/assets/ai_builder/overview/tutorial_1_light.webp b/assets/ai_builder/overview/tutorial_1_light.webp deleted file mode 100644 index b93ec97f69..0000000000 Binary files a/assets/ai_builder/overview/tutorial_1_light.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_2_dark.webp b/assets/ai_builder/overview/tutorial_2_dark.webp deleted file mode 100644 index d926b6c8a4..0000000000 Binary files a/assets/ai_builder/overview/tutorial_2_dark.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_2_light.avif b/assets/ai_builder/overview/tutorial_2_light.avif new file mode 100644 index 0000000000..b1ccff8b15 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_2_light.avif differ diff --git a/assets/ai_builder/overview/tutorial_2_light.webp b/assets/ai_builder/overview/tutorial_2_light.webp deleted file mode 100644 index 9d793cfd7f..0000000000 Binary files a/assets/ai_builder/overview/tutorial_2_light.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_3_dark.webp b/assets/ai_builder/overview/tutorial_3_dark.webp deleted file mode 100644 index 6e0674b0bf..0000000000 Binary files a/assets/ai_builder/overview/tutorial_3_dark.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_3_light.avif b/assets/ai_builder/overview/tutorial_3_light.avif new file mode 100644 index 0000000000..d7ef4beb2f Binary files /dev/null and b/assets/ai_builder/overview/tutorial_3_light.avif differ diff --git a/assets/ai_builder/overview/tutorial_3_light.webp b/assets/ai_builder/overview/tutorial_3_light.webp deleted file mode 100644 index 8b305bcb65..0000000000 Binary files a/assets/ai_builder/overview/tutorial_3_light.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_4_dark.webp b/assets/ai_builder/overview/tutorial_4_dark.webp deleted file mode 100644 index 95a45e44ee..0000000000 Binary files a/assets/ai_builder/overview/tutorial_4_dark.webp and /dev/null differ diff --git a/assets/ai_builder/overview/tutorial_4_light.avif b/assets/ai_builder/overview/tutorial_4_light.avif new file mode 100644 index 0000000000..b870676f54 Binary files /dev/null and b/assets/ai_builder/overview/tutorial_4_light.avif differ diff --git a/assets/ai_builder/overview/tutorial_4_light.webp b/assets/ai_builder/overview/tutorial_4_light.webp deleted file mode 100644 index 90f8f1b19b..0000000000 Binary files a/assets/ai_builder/overview/tutorial_4_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/bottom_dark.webp b/assets/ai_builder/what_is_reflex_build/bottom_dark.webp deleted file mode 100644 index 2f23cb3c66..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/bottom_dark.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/bottom_light.webp b/assets/ai_builder/what_is_reflex_build/bottom_light.webp deleted file mode 100644 index bc745f1d12..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/bottom_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/chat_dark.webp b/assets/ai_builder/what_is_reflex_build/chat_dark.webp deleted file mode 100644 index a2be6a6a93..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/chat_dark.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/chat_light.avif b/assets/ai_builder/what_is_reflex_build/chat_light.avif new file mode 100644 index 0000000000..6de5ca86dc Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/chat_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/chat_light.webp b/assets/ai_builder/what_is_reflex_build/chat_light.webp deleted file mode 100644 index e06318cdcd..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/chat_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/code_dark.webp b/assets/ai_builder/what_is_reflex_build/code_dark.webp deleted file mode 100644 index 30bbd55d1a..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/code_dark.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/code_light.avif b/assets/ai_builder/what_is_reflex_build/code_light.avif new file mode 100644 index 0000000000..321a2cf878 Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/code_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/code_light.webp b/assets/ai_builder/what_is_reflex_build/code_light.webp deleted file mode 100644 index c4621e2751..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/code_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/file_tree_dark.webp b/assets/ai_builder/what_is_reflex_build/file_tree_dark.webp deleted file mode 100644 index fefcea0eba..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/file_tree_dark.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/file_tree_light.avif b/assets/ai_builder/what_is_reflex_build/file_tree_light.avif new file mode 100644 index 0000000000..835f7936c0 Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/file_tree_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/file_tree_light.webp b/assets/ai_builder/what_is_reflex_build/file_tree_light.webp deleted file mode 100644 index 7a9f077320..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/file_tree_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/integrations_light.avif b/assets/ai_builder/what_is_reflex_build/integrations_light.avif new file mode 100644 index 0000000000..d435b8cb7a Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/integrations_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/plan_light.avif b/assets/ai_builder/what_is_reflex_build/plan_light.avif new file mode 100644 index 0000000000..b03cdb5b79 Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/plan_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/preview_dark.webp b/assets/ai_builder/what_is_reflex_build/preview_dark.webp deleted file mode 100644 index 65782c479f..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/preview_dark.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/preview_light.avif b/assets/ai_builder/what_is_reflex_build/preview_light.avif new file mode 100644 index 0000000000..6ea82c2266 Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/preview_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/preview_light.webp b/assets/ai_builder/what_is_reflex_build/preview_light.webp deleted file mode 100644 index 1b092a244c..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/preview_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/project_bar_dark.webp b/assets/ai_builder/what_is_reflex_build/project_bar_dark.webp deleted file mode 100644 index 2df39e6f91..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/project_bar_dark.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/project_bar_light.avif b/assets/ai_builder/what_is_reflex_build/project_bar_light.avif new file mode 100644 index 0000000000..04940d00b9 Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/project_bar_light.avif differ diff --git a/assets/ai_builder/what_is_reflex_build/project_bar_light.webp b/assets/ai_builder/what_is_reflex_build/project_bar_light.webp deleted file mode 100644 index d811fa4b23..0000000000 Binary files a/assets/ai_builder/what_is_reflex_build/project_bar_light.webp and /dev/null differ diff --git a/assets/ai_builder/what_is_reflex_build/top_light.avif b/assets/ai_builder/what_is_reflex_build/top_light.avif new file mode 100644 index 0000000000..6903b24264 Binary files /dev/null and b/assets/ai_builder/what_is_reflex_build/top_light.avif differ diff --git a/docs/ai_builder/app_lifecycle/copy_app.md b/docs/ai_builder/app_lifecycle/copy_app.md index 6340341253..6c350d1338 100644 --- a/docs/ai_builder/app_lifecycle/copy_app.md +++ b/docs/ai_builder/app_lifecycle/copy_app.md @@ -12,10 +12,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/app_lifecycle/copy_light.webp", - "/ai_builder/app_lifecycle/copy_dark.webp", - ), + src="/ai_builder/app_lifecycle/copy_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -33,7 +30,7 @@ rx.el.div(render_image()) ## How to Copy an App -1. In the Reflex Build workspace, click the **Copy** button (bottom-right corner). +1. In the Reflex Build workspace, click on the arrow down icon next to the deploy button and click on the **Copy** button. You can also do this in the Settings tab. 2. Reflex Build will create a new app in your workspace with the same: - Code files and components - State and configuration diff --git a/docs/ai_builder/app_lifecycle/deploy_app.md b/docs/ai_builder/app_lifecycle/deploy_app.md index 33f1287005..67d423d06e 100644 --- a/docs/ai_builder/app_lifecycle/deploy_app.md +++ b/docs/ai_builder/app_lifecycle/deploy_app.md @@ -6,7 +6,7 @@ import reflex as rx It is easy to deploy your app into production from Reflex Build to Reflex Cloud. -Simply click the `Deploy` button in the bottom right corner of Reflex Build, as shown below: +Simply click the `Deploy` button in the top right corner of Reflex Build, as shown below: @@ -18,10 +18,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/app_lifecycle/deploy_light.webp", - "/ai_builder/app_lifecycle/deploy_dark.webp", - ), + src="/ai_builder/app_lifecycle/deploy_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/app_lifecycle/download_app.md b/docs/ai_builder/app_lifecycle/download_app.md index 012657b3ba..988d0ff053 100644 --- a/docs/ai_builder/app_lifecycle/download_app.md +++ b/docs/ai_builder/app_lifecycle/download_app.md @@ -13,10 +13,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/app_lifecycle/download_light.webp", - "/ai_builder/app_lifecycle/download_dark.webp", - ), + src="/ai_builder/app_lifecycle/download_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -34,9 +31,8 @@ rx.el.div(render_image()) ## How to Download -1. In the AI Builder workspace, go to the **bottom-right corner**. -2. Click the **Download** button. -3. A `.zip` file will be generated containing your entire Reflex app, including: +1. In the AI Builder workspace, click on the arrow down icon next to the deploy button and click on the **Download** button. You can also do this in the Settings tab. +2. A `.zip` file will be generated containing your entire Reflex app, including: - Source code (`.py` files, components, state, etc.) - `requirements.txt` with dependencies - Config files (`rxconfig.py`, `.env`, etc.) diff --git a/docs/ai_builder/app_lifecycle/fork_app.md b/docs/ai_builder/app_lifecycle/fork_app.md index 35522b40d9..84203a8d8e 100644 --- a/docs/ai_builder/app_lifecycle/fork_app.md +++ b/docs/ai_builder/app_lifecycle/fork_app.md @@ -11,10 +11,7 @@ from reflex_image_zoom import image_zoom rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/fork_template_light.webp", - "/ai_builder/overview/fork_template_dark.webp", - ), + src="/ai_builder/overview/fork_template_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -28,7 +25,7 @@ rx.el.div( ## How to Fork an App 1. Browse or open an app you’d like to use as a starting point. -2. Click the **Fork** button in the app’s bottom right corner. +2. Click the **Fork** button in the app’s top right corner. 3. The AI Builder will create a **copy of the app** in your workspace. 4. You can now **edit, customize, and expand** your forked app independently of the original. diff --git a/docs/ai_builder/app_lifecycle/general.md b/docs/ai_builder/app_lifecycle/general.md index 74f04dc3b3..ce96209874 100644 --- a/docs/ai_builder/app_lifecycle/general.md +++ b/docs/ai_builder/app_lifecycle/general.md @@ -11,10 +11,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/app_lifecycle/general_light.webp", - "/ai_builder/app_lifecycle/general_dark.webp", - ), + src="/ai_builder/app_lifecycle/general_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -33,16 +30,25 @@ rx.el.div(render_image()) ## How to Access Settings -1. In the AI Builder workspace, click the **Settings** icon located at the bottom-left of the screen, inside the chat box area. -2. This will open the **General** tab to see your app’s main settings. +1. In the AI Builder workspace, on the top bar click the more 3 dots icon and then click the **Settings** tab. +2. This will open the **Settings** tab to see your app’s main settings. ## What You Can Do - **Change App Name** Update the name of your app to reflect its purpose or version. +- **Change App Visibility** + Update the visibility of your app to public or private. + - **View App ID** Find the unique identifier for your app, which can be used for integrations or support. +- **Fork App** + Fork your app to create a copy of it. + +-- **Download App** + Download your app to your local machine. + - **Delete App** Permanently remove an app you no longer need. **Warning:** This action cannot be undone. diff --git a/docs/ai_builder/app_lifecycle/share_app.md b/docs/ai_builder/app_lifecycle/share_app.md index 141ef94e09..b6310b5551 100644 --- a/docs/ai_builder/app_lifecycle/share_app.md +++ b/docs/ai_builder/app_lifecycle/share_app.md @@ -11,10 +11,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/app_lifecycle/share_light.webp", - "/ai_builder/app_lifecycle/share_dark.webp", - ), + src="/ai_builder/app_lifecycle/share_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -32,7 +29,7 @@ rx.el.div(render_image()) ## How to Share -1. In the AI Builder workspace, click the **Share** button (bottom-right corner). +1. In the AI Builder workspace, click on the arrow down icon next to the deploy button and click on the **Share** button. 2. A popup will appear with a **shareable link**. 3. Copy the link and send it to teammates, collaborators, or stakeholders. diff --git a/docs/ai_builder/features/connect_to_github.md b/docs/ai_builder/features/connect_to_github.md index 29a0b5eb6c..a381d3e9ca 100644 --- a/docs/ai_builder/features/connect_to_github.md +++ b/docs/ai_builder/features/connect_to_github.md @@ -14,10 +14,14 @@ The Github integration is important to make sure that you don't lose your progre ```python eval -rx.image( - src="/ai_builder/connecting_to_github.gif", - height="auto", - padding_bottom="2rem", +rx.el.div( + image_zoom( + rx.image( + src="/ai_builder/connecting_to_github.avif", + class_name="p-2 rounded-md h-auto", + border=f"0.81px solid {rx.color('slate', 5)}", + ), + ), ) ``` @@ -32,5 +36,14 @@ The GitHub integration allows you to: The commit history is a great way to see the changes that you have made to your app. You can also revert to previous versions of your app from here. ```python eval -image_zoom(rx.image(src="/ai_builder/github_commit_history.png")) +rx.el.div( + image_zoom( + rx.image( + src="/ai_builder/github_commit_history.avif", + class_name="p-2 rounded-md h-auto", + border=f"0.81px solid {rx.color('slate', 5)}", + ), + ), +) ``` + diff --git a/docs/ai_builder/features/editor_modes.md b/docs/ai_builder/features/editor_modes.md index 5d51d45831..267f3721c6 100644 --- a/docs/ai_builder/features/editor_modes.md +++ b/docs/ai_builder/features/editor_modes.md @@ -11,10 +11,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/features/diff_light.webp", - "/ai_builder/features/diff_dark.webp", - ), + src="/ai_builder/features/diff_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/features/image_as_prompt.md b/docs/ai_builder/features/image_as_prompt.md index 146896bb65..50022fe1f8 100644 --- a/docs/ai_builder/features/image_as_prompt.md +++ b/docs/ai_builder/features/image_as_prompt.md @@ -2,6 +2,7 @@ ```python exec import reflex as rx +from reflex_image_zoom import image_zoom ``` Uploading an image (screenshot) of a website (web) app of what you are looking to build gives the AI really good context. @@ -9,13 +10,19 @@ Uploading an image (screenshot) of a website (web) app of what you are looking t *This is the recommended way to start an app generation.* -Below is a GIF showing how to upload an image to the AI Builder: +Below is an image showing how to upload an image to the AI Builder, you can click on the "Attach" button to upload an image, drag and drop an image, or paste an image from the clipboard: ```python eval -rx.image( - src="/ai_builder/image_upload.gif", - height="auto", - padding_bottom="2rem", +rx.el.div( + image_zoom( + rx.image( + src="/ai_builder/image_upload.avif", + class_name="p-2 rounded-md h-auto", + border=f"0.81px solid {rx.color('slate', 5)}", + ), + class_name="rounded-md overflow-hidden", + ), + class_name="w-full flex flex-col rounded-md cursor-pointer", ) ``` diff --git a/docs/ai_builder/features/installing_external_packages.md b/docs/ai_builder/features/installing_external_packages.md index db0e637264..762eb77382 100644 --- a/docs/ai_builder/features/installing_external_packages.md +++ b/docs/ai_builder/features/installing_external_packages.md @@ -2,6 +2,7 @@ ```python exec import reflex as rx +from reflex_image_zoom import image_zoom ``` Reflex Build allows you to install external python packages to use in your app. This is useful if you want to use a package that is not included in the default Reflex Build environment. Examples might include `openai`, `langsmith`, `requests`, etc. @@ -15,23 +16,35 @@ There are two ways to install external packages: Enter the name of the package you want to install in the chat interface. The AI will then install the package for you. + ```python eval -rx.image( - src="/ai_builder/external_packages_input.gif", - height="auto", - padding_bottom="2rem", +rx.el.div( + image_zoom( + rx.image( + src="/ai_builder/external_packages_input.avif", + class_name="p-2 rounded-md h-auto", + border=f"0.81px solid {rx.color('slate', 5)}", + ), + class_name="rounded-md overflow-hidden", + ), + class_name="w-full flex flex-col rounded-md cursor-pointer", ) ``` - ## Installing through the requirements.txt file Add the package to the `requirements.txt` file and then save the app. This will install the package in your app's environment and recompile your app. ```python eval -rx.image( - src="/ai_builder/external_packages_requirements.gif", - height="auto", - padding_bottom="2rem", +rx.el.div( + image_zoom( + rx.image( + src="/ai_builder/external_packages_requirements.avif", + class_name="p-2 rounded-md h-auto", + border=f"0.81px solid {rx.color('slate', 5)}", + ), + class_name="rounded-md overflow-hidden", + ), + class_name="w-full flex flex-col rounded-md cursor-pointer", ) ``` \ No newline at end of file diff --git a/docs/ai_builder/features/knowledge.md b/docs/ai_builder/features/knowledge.md index ab3dd115ba..8617302cc5 100644 --- a/docs/ai_builder/features/knowledge.md +++ b/docs/ai_builder/features/knowledge.md @@ -10,10 +10,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/features/knowledge_light.webp", - "/ai_builder/features/knowledge_dark.webp", - ), + src="/ai_builder/features/knowledge_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -31,7 +28,7 @@ rx.el.div(render_image()) ## How to Add Knowledge -1. In the AI Builder workspace, go to the **Knowledge** section by clicking the **`Context`** button in the bottom bar, and then on the top bar click the **`Knowledge`** tab. +1. In the AI Builder top bar, click the more 3 dots icon and then click the **`Knowledge`** tab. 2. Enter your rule, guideline, or context description. 3. Save the entry. The AI Builder will automatically use it when generating apps. diff --git a/docs/ai_builder/features/restore_checkpoint.md b/docs/ai_builder/features/restore_checkpoint.md index 15d924d11b..0d57f5aac1 100644 --- a/docs/ai_builder/features/restore_checkpoint.md +++ b/docs/ai_builder/features/restore_checkpoint.md @@ -11,10 +11,7 @@ from reflex_image_zoom import image_zoom rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/features/restore_light.webp", - "/ai_builder/features/restore_dark.webp", - ), + src="/ai_builder/features/restore_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/features/secrets.md b/docs/ai_builder/features/secrets.md index 90ad07923c..1f4b9017cf 100644 --- a/docs/ai_builder/features/secrets.md +++ b/docs/ai_builder/features/secrets.md @@ -11,10 +11,7 @@ def render_image(): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/features/secrets_light.webp", - "/ai_builder/features/secrets_dark.webp", - ), + src="/ai_builder/features/secrets_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -58,10 +55,7 @@ from reflex_image_zoom import image_zoom rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/features/secret_bulk_light.webp", - "/ai_builder/features/secret_bulk_dark.webp", - ), + src="/ai_builder/features/secret_bulk_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/files.md b/docs/ai_builder/files.md index 3aced5bf16..232819be35 100644 --- a/docs/ai_builder/files.md +++ b/docs/ai_builder/files.md @@ -1,8 +1,11 @@ +```python exec +from pcweb.pages.docs import ai_builder +``` # Files To upload a file to the AI Builder click the `📎 Attach` button and select the file you want to upload from your computer. You can also drag and drop files directly into the chat window. -This section does not cover uploading images. Check out ..... to learn more about uploading images. +This section does not cover uploading images. Check out [Images]({ai_builder.images.path}) to learn more about uploading images. ```md alert ## Supported File Types diff --git a/docs/ai_builder/images.md b/docs/ai_builder/images.md index c53076676d..2790456005 100644 --- a/docs/ai_builder/images.md +++ b/docs/ai_builder/images.md @@ -22,7 +22,7 @@ The AI Builder currently supports the following image types for upload and proce ## Upload an image to be used within the app -If you want to upload an image to be used within the app, such as a company logo, then you can manually upload it to the `assets/` folder within the `code` tab, as shown below. +If you want to upload an image to be used within the app, such as a company logo, then you can manually upload it to the `assets/` folder within the `code` tab. Drag and drop the image into the `assets/` folder. ```python exec import reflex as rx @@ -33,7 +33,7 @@ from reflex_image_zoom import image_zoom rx.el.div( image_zoom( rx.image( - src="/ai_builder/add_images_to_assets.webp", + src="/ai_builder/add_images_to_assets.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/overview/templates.md b/docs/ai_builder/overview/templates.md index da74004c00..d1c9f3bbf6 100644 --- a/docs/ai_builder/overview/templates.md +++ b/docs/ai_builder/overview/templates.md @@ -11,10 +11,7 @@ from reflex_image_zoom import image_zoom rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/templates_light.webp", - "/ai_builder/overview/templates_dark.webp", - ), + src="/ai_builder/overview/templates_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -32,10 +29,7 @@ To use a template, simply click the template and then in the bottom right corner rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/fork_template_light.webp", - "/ai_builder/overview/fork_template_dark.webp", - ), + src="/ai_builder/overview/fork_template_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/overview/tutorial.md b/docs/ai_builder/overview/tutorial.md index a6ed0bf7a2..93ff598937 100644 --- a/docs/ai_builder/overview/tutorial.md +++ b/docs/ai_builder/overview/tutorial.md @@ -34,10 +34,7 @@ from reflex_image_zoom import image_zoom rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/tutorial_1_light.webp", - "/ai_builder/overview/tutorial_1_dark.webp", - ), + src="/ai_builder/overview/tutorial_1_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -62,10 +59,7 @@ Your dashboard now becomes much more useful with real-time filtering. Users can rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/tutorial_2_light.webp", - "/ai_builder/overview/tutorial_2_dark.webp", - ), + src="/ai_builder/overview/tutorial_2_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -92,10 +86,7 @@ Your app now has full CRUD capability for employee records. The modal form provi rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/tutorial_3_light.webp", - "/ai_builder/overview/tutorial_3_dark.webp", - ), + src="/ai_builder/overview/tutorial_3_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), @@ -122,10 +113,7 @@ Your app now has proper navigation between the dashboard and chat functionality. rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - "/ai_builder/overview/tutorial_4_light.webp", - "/ai_builder/overview/tutorial_4_dark.webp", - ), + src="/ai_builder/overview/tutorial_4_light.avif", class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), diff --git a/docs/ai_builder/overview/what_is_reflex_build.md b/docs/ai_builder/overview/what_is_reflex_build.md index 2a0805c90e..3cc35e1cec 100644 --- a/docs/ai_builder/overview/what_is_reflex_build.md +++ b/docs/ai_builder/overview/what_is_reflex_build.md @@ -1,196 +1,97 @@ # What Is Reflex Build -Reflex Build is an AI-powered platform that lets anyone create full-stack web apps just by describing ideas in plain English—no coding needed. It includes a full-fledged built-in IDE, real-time collaboration (beta), and project sharing—all in your browser, no installation required. +Reflex Build is an AI-powered platform that lets anyone create full-stack web apps just by describing ideas in plain English—no coding needed. It includes a full-fledged built-in IDE, real-time collaboration, and project sharing—all in your browser, no installation required. ```python exec -from typing import List, TypedDict - import reflex as rx from reflex_image_zoom import image_zoom -class Feature(TypedDict): - title: str - description: str - icon: str - - -class LandingState(rx.State): - features: List[Feature] = [ - { - "title": "Database Integration", - "description": "Automatically integrate your database\ninto your application with ease", - "icon": "database", - }, - { - "title": "Secure Secrets", - "description": "Safely manage your API keys and tokens\nwith a built in secrets manager", - "icon": "shield", - }, - { - "title": "Live Preview", - "description": "See all application changes in real-time\nwith our interactive preview tab", - "icon": "eye", - }, - { - "title": "Quick Download", - "description": "Download your complete project files\nwith just a single click operation", - "icon": "download", - }, - { - "title": "Easy Deployment", - "description": "Deploy your application to production\nwith just a single click process", - "icon": "rocket", - }, - { - "title": "Manual File Editing", - "description": "Edit your project files directly\nwith our intuitive code editor", - "icon": "code", - }, - { - "title": "AI Package Manager", - "description": "Let AI handle your package installations\nvia natural prompting", - "icon": "sparkles", - }, - { - "title": "Smart Prompting", - "description": "Get better development results\nwith AI-optimized prompt templates", - "icon": "message-circle", - }, - ] - - -class BuildDocState(rx.State): - current_feature: dict[str, str] = { - "light": "/ai_builder/what_is_reflex_build/project_bar_light.webp", - "dark": "/ai_builder/what_is_reflex_build/project_bar_dark.webp", - } - - image_opacity: float = 1.0 # Use float instead of string for opacity - transition_in_progress: bool = False - - features: list[dict[str, str | dict[str, str]]] = [ - { - "title": "Project Menu Bar", - "subtitle": "Browse previously built applications, create new sessions, store database variables, and much more!", - "img": { - "light": "/ai_builder/what_is_reflex_build/project_bar_light.webp", - "dark": "/ai_builder/what_is_reflex_build/project_bar_dark.webp", - }, - "selected": True, - }, - { - "title": "Chat Area", - "subtitle": "See your prompts in action with visual cues, editing notifications, and file generations every step of the way.", - "img": { - "light": "/ai_builder/what_is_reflex_build/chat_light.webp", - "dark": "/ai_builder/what_is_reflex_build/chat_dark.webp", - }, - "selected": False, - }, - { - "title": "Application Workspace", - "subtitle": "Your workspace contains all the folders and files of your application. You can add new files and folders as well!", - "img": { - "light": "/ai_builder/what_is_reflex_build/file_tree_light.webp", - "dark": "/ai_builder/what_is_reflex_build/file_tree_dark.webp", - }, - "selected": False, - }, - { - "title": "Code Editor", - "subtitle": "The code editor displays the current selected file. You can edit the code directly and save it instantly.", - "img": { - "light": "/ai_builder/what_is_reflex_build/code_light.webp", - "dark": "/ai_builder/what_is_reflex_build/code_dark.webp", - }, - "selected": False, - }, - { - "title": "Bottom Menu Bar", - "subtitle": "This menu contains important actions such as deploying, downloading, and sharing your application.", - "img": { - "light": "/ai_builder/what_is_reflex_build/bottom_light.webp", - "dark": "/ai_builder/what_is_reflex_build/bottom_dark.webp", - }, - "selected": False, - }, - { - "title": "Preview Tab", - "subtitle": "The preview tab showcases a live application. You can navigate to other applications directly from this tab, refresh the app, and even view it in full screen.", - "img": { - "light": "/ai_builder/what_is_reflex_build/preview_light.webp", - "dark": "/ai_builder/what_is_reflex_build/preview_dark.webp", - }, - "selected": False, - }, - ] - - @rx.event(background=True) - async def select_feature(self, index: int): - import asyncio - - # Prevent multiple transitions at once - if self.transition_in_progress: - return - - # Update the selected feature and image - async with self: - for i, feature in enumerate(self.features): - feature["selected"] = i == index - - self.transition_in_progress = True - - # Fade out - self.image_opacity = 0.0 - yield - await asyncio.sleep(0.1) - - self.current_feature = self.features[index]["img"] - await asyncio.sleep(0.2) - - # # Fade in - self.image_opacity = 1.0 - self.transition_in_progress = False +landing_features = [ + { + "title": "Database Integration", + "description": "Automatically integrate your database\ninto your application with ease", + "icon": "database", + }, + { + "title": "Secure Secrets", + "description": "Safely manage your API keys and tokens\nwith a built in secrets manager", + "icon": "shield", + }, + { + "title": "Live Preview", + "description": "See all application changes in real-time\nwith our interactive preview tab", + "icon": "eye", + }, + { + "title": "Quick Download", + "description": "Download your complete project files\nwith just a single click operation", + "icon": "download", + }, + { + "title": "Easy Deployment", + "description": "Deploy your application to production\nwith just a single click process", + "icon": "rocket", + }, + { + "title": "Manual File Editing", + "description": "Edit your project files directly\nwith our intuitive code editor", + "icon": "code", + }, + { + "title": "AI Package Manager", + "description": "Let AI handle your package installations\nvia natural prompting", + "icon": "sparkles", + }, + { + "title": "Smart Prompting", + "description": "Get better development results\nwith AI-optimized prompt templates", + "icon": "message-circle", + }, +] -feature_images = [ - [ - "/ai_builder/what_is_reflex_build/project_bar_light.webp", - "/ai_builder/what_is_reflex_build/project_bar_dark.webp", - "Project Menu Bar", - "Browse previously built applications, create new sessions, store database variables, and much more!", - ], - [ - "/ai_builder/what_is_reflex_build/chat_light.webp", - "/ai_builder/what_is_reflex_build/chat_dark.webp", - "Chat Area", - "See your prompts in action with visual cues, editing notifications, and file generations every step of the way.", - ], - [ - "/ai_builder/what_is_reflex_build/file_tree_light.webp", - "/ai_builder/what_is_reflex_build/file_tree_dark.webp", - "Application Workspace", - "Your workspace contains all the folders and files of your application. You can add new files and folders as well!", - ], - [ - "/ai_builder/what_is_reflex_build/code_light.webp", - "/ai_builder/what_is_reflex_build/code_dark.webp", - "Code Editor", - "The code editor displays the current selected file. You can edit the code directly and save it instantly.", - ], - [ - "/ai_builder/what_is_reflex_build/bottom_light.webp", - "/ai_builder/what_is_reflex_build/bottom_dark.webp", - "Bottom Menu Bar", - "This menu contains important actions such as deploying, downloading, and sharing your application.", - ], - [ - "/ai_builder/what_is_reflex_build/preview_light.webp", - "/ai_builder/what_is_reflex_build/preview_dark.webp", - "Preview Tab", - "The preview tab showcases a live application. You can navigate to other applications directly from this tab, refresh the app, and even view it in full screen.", - ], +features_data = [ + { + "title": "Project Menu Bar", + "subtitle": "Browse previously built applications, create new sessions, store database variables, and much more!", + "img": "/ai_builder/what_is_reflex_build/project_bar_light.avif", + }, + { + "title": "Chat Area", + "subtitle": "See your prompts in action with visual cues, editing notifications, and file generations every step of the way.", + "img": "/ai_builder/what_is_reflex_build/chat_light.avif", + }, + { + "title": "Application Workspace", + "subtitle": "Your workspace contains all the folders and files of your application. You can add new files and folders as well!", + "img": "/ai_builder/what_is_reflex_build/file_tree_light.avif", + }, + { + "title": "Code Editor", + "subtitle": "The code editor displays the current selected file. You can edit the code directly and save it instantly.", + "img": "/ai_builder/what_is_reflex_build/code_light.avif", + }, + { + "title": "Integrations", + "subtitle": "Easily connect with the tools your team already uses or extend your app with any Python SDK, library, or API.", + "img": "/ai_builder/what_is_reflex_build/integrations_light.avif", + }, + { + "title": "Plan", + "subtitle": "Plan your application's development with the AI Builder. You can add or remove phases and tasks as you go.", + "img": "/ai_builder/what_is_reflex_build/plan_light.avif", + }, + { + "title": "Top Menu Bar", + "subtitle": "This menu contains the main views of the application. Preview, Code, Plan, Integrations, Knowledge, Secrets and Settings. You can also see the current workspace RAM and CPU usage. Deploy, copy or share your application with the buttons in the top right corner.", + "img": "/ai_builder/what_is_reflex_build/top_light.avif", + }, + { + "title": "Preview Tab", + "subtitle": "The preview tab showcases a live application. You can navigate to other applications directly from this tab, refresh the app, and even view it in full screen.", + "img": "/ai_builder/what_is_reflex_build/preview_light.avif", + }, ] @@ -201,20 +102,16 @@ def feature_card(feature: dict) -> rx.Component: rx.icon( tag=feature["icon"], size=15, - class_name="inline-block mr-2 " - + rx.color_mode_cond( - "stroke-violet-8", - "stroke-violet-9", - ), + class_name="inline-block mr-2 text-primary-11" ), - rx.el.span(f"{feature['title']} ", class_name="text-sm font-bold"), - class_name="text-sm font-medium block align-center pt-5 px-2", + rx.el.span(f"{feature['title']}"), + class_name="text-sm font-semibold flex flex-row items-center pt-5 px-2 text-secondary-12", ), rx.el.span( feature["description"], - class_name="text-sm font-regular block align-center px-2", + class_name="text-sm font-medium block align-center px-2 text-secondary-11", ), - class_name="flex flex-col", + class_name="flex flex-col gap-2", ), class_name="w-full rounded-md", ) @@ -223,58 +120,39 @@ def feature_card(feature: dict) -> rx.Component: def _docs_features() -> rx.Component: return rx.el.div( rx.el.div( - rx.foreach(LandingState.features, feature_card), + rx.foreach(landing_features, feature_card), class_name="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-4", ), class_name="flex flex-col w-full h-full justify-start align-start items-start py-4 gap-x-4 z-[99]", ) -def _docs_app_section_features_small_screen(feature: list[str]): +def _docs_app_section_features_small_screen(feature: dict): return rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond(feature[0], feature[1]), + src=feature["img"], class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), class_name="rounded-md overflow-hidden", ), rx.el.div( - rx.el.label(feature[2], class_name="text-sm font-bold cursor-pointer"), - rx.el.label(feature[3], class_name="text-sm font-light cursor-pointer"), + rx.el.label(feature["title"], class_name="text-sm font-bold cursor-pointer"), + rx.el.label(feature["subtitle"], class_name="text-sm font-light cursor-pointer"), class_name="flex flex-col px-1 py-2", ), class_name="w-full flex flex-col rounded-md cursor-pointer", ) -def _docs_app_section_toggles(feature: dict, index: int): +def _docs_app_section_toggles(feature: dict): return rx.el.div( - rx.el.label(feature["title"], class_name="text-sm font-bold cursor-pointer"), + rx.el.label(feature["title"], class_name="text-sm font-bold"), rx.el.label( - feature["subtitle"], class_name="text-sm font-light cursor-pointer" - ), - on_click=BuildDocState.select_feature(index), - class_name="w-full flex flex-col max-w-md rounded-md p-4 cursor-pointer " - + rx.cond( - feature["selected"], - "", - rx.color_mode_cond("hover:bg-slate-5", "hover:bg-slate-3"), - ), - border=rx.cond( - feature["selected"], - f"0.81px solid {rx.color('purple', 7)}", - "", - ), - box_shadow=rx.cond( - feature["selected"], - rx.color_mode_cond( - "5px 5px oklch(0.946 0.033 307.174 / 0.5)", - "", - ), - "", + feature["subtitle"], class_name="text-sm font-light" ), + class_name="w-full flex flex-col max-w-md rounded-md p-4", ) @@ -295,27 +173,20 @@ def _docs_app_sections(): class_name="flex flex-col w-full max-w-lg gap-y-1", ), rx.foreach( - BuildDocState.features[:5], - lambda feature, index: _docs_app_section_toggles(feature, index), + features_data[:5], + lambda feature: _docs_app_section_toggles(feature), ), class_name="flex flex-col gap-y-4 justify-start max-w-sm", ), rx.el.div( image_zoom( rx.image( - src=rx.color_mode_cond( - BuildDocState.current_feature["light"], - BuildDocState.current_feature["dark"], - ), + src=features_data[0]["img"], class_name="p-2 rounded-md h-auto", border=f"0.81px solid {rx.color('slate', 5)}", ), class_name="rounded-md overflow-hidden", ), - style={ - "opacity": f"{BuildDocState.image_opacity}", - "transition": "opacity 300ms ease-in-out", - }, class_name="w-full max-w-4xl", ), class_name="flex flex-row w-full h-full justify-between align-center items-center py-4 gap-x-4 z-[99]", @@ -328,7 +199,7 @@ def _docs_app_sections_small_screen(): rx.el.div( rx.grid( rx.foreach( - feature_images, + features_data, lambda feature: _docs_app_section_features_small_screen(feature), ), class_name="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10 w-full", diff --git a/docs/ai_builder/python_libraries.md b/docs/ai_builder/python_libraries.md index 488b88c243..ecebb7654e 100644 --- a/docs/ai_builder/python_libraries.md +++ b/docs/ai_builder/python_libraries.md @@ -27,7 +27,7 @@ If you are working with a specialized / less well-known library, you can add cus ```md alert warning # Where to find the Knowledge Section -![Where to find the Knowledge Section](/ai_builder/find_knowledge_tab.webp) +![Where to find the Knowledge Section](/ai_builder/features/knowledge_light.avif) ``` diff --git a/pcweb/components/docpage/sidebar/sidebar_items/ai.py b/pcweb/components/docpage/sidebar/sidebar_items/ai.py index 34e5114a8d..8d8f631df6 100644 --- a/pcweb/components/docpage/sidebar/sidebar_items/ai.py +++ b/pcweb/components/docpage/sidebar/sidebar_items/ai.py @@ -27,7 +27,7 @@ def get_sidebar_items_ai_builder_overview(): ai_builder.features.connect_to_github, ai_builder.features.knowledge, ai_builder.features.image_as_prompt, - ai_builder.features.automated_testing, + # ai_builder.features.automated_testing, ai_builder.features.customization, ], ),