Merge remote-tracking branch 'upstream/main' into poc_shared_state
This commit is contained in:
Andreas Eismann
commit
5ca563c117
@ -11,7 +11,7 @@ omit =
|
||||
[report]
|
||||
show_missing = true
|
||||
# TODO bump back to 79
|
||||
fail_under = 60
|
||||
fail_under = 70
|
||||
precision = 2
|
||||
|
||||
# Regexes for lines to exclude from consideration
|
||||
|
||||
1
.github/CODEOWNERS
vendored
Normal file
1
.github/CODEOWNERS
vendored
Normal file
@ -0,0 +1 @@
|
||||
@reflex-dev/reflex-team
|
||||
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -2,7 +2,6 @@
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: bug
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
19
.github/ISSUE_TEMPLATE/enhancement_request.md
vendored
Normal file
19
.github/ISSUE_TEMPLATE/enhancement_request.md
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
name: Enhancement Request
|
||||
about: Suggest an enhancement for an existing Reflex feature.
|
||||
title: ''
|
||||
labels: 'enhancement'
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Describe the Enhancement you want**
|
||||
A clear and concise description of what the improvement does.
|
||||
|
||||
- Which feature do you want to improve? (and what problem does it have)
|
||||
|
||||
- What is the benefit of the enhancement?
|
||||
|
||||
- Show an example/usecase were the improvement are needed.
|
||||
|
||||
**Additional context**
|
||||
Add any other context here.
|
||||
18
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
18
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
name: Feature Request
|
||||
about: Suggest a new feature for Reflex
|
||||
title: ''
|
||||
labels: 'feature request'
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the Features**
|
||||
A clear and concise description of what the features does.
|
||||
|
||||
- What is the purpose of the feature?
|
||||
|
||||
- Show an example / use cases for the new feature.
|
||||
|
||||
**Additional context**
|
||||
Add any other context here.
|
||||
4
.github/actions/setup_build_env/action.yml
vendored
4
.github/actions/setup_build_env/action.yml
vendored
@ -6,7 +6,7 @@
|
||||
#
|
||||
# Exit conditions:
|
||||
# - Python of version `python-version` is ready to be invoked as `python`.
|
||||
# - Poetry of version `poetry-version` is ready ot be invoked as `poetry`.
|
||||
# - Poetry of version `poetry-version` is ready to be invoked as `poetry`.
|
||||
# - If `run-poetry-install` is true, deps as defined in `pyproject.toml` will have been installed into the venv at `create-venv-at-path`.
|
||||
|
||||
name: 'Setup Reflex build environment'
|
||||
@ -18,7 +18,7 @@ inputs:
|
||||
poetry-version:
|
||||
description: 'Poetry version to install'
|
||||
required: false
|
||||
default: '1.3.1'
|
||||
default: '1.8.3'
|
||||
run-poetry-install:
|
||||
description: 'Whether to run poetry install on current dir'
|
||||
required: false
|
||||
|
||||
14
.github/workflows/benchmarks.yml
vendored
14
.github/workflows/benchmarks.yml
vendored
@ -80,31 +80,25 @@ jobs:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
# Show OS combos first in GUI
|
||||
os: [ubuntu-latest, windows-latest, macos-12]
|
||||
python-version: ['3.8.18', '3.9.18', '3.10.13', '3.11.5', '3.12.0']
|
||||
os: [ubuntu-latest, windows-latest, macos-latest]
|
||||
python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
|
||||
exclude:
|
||||
- os: windows-latest
|
||||
python-version: '3.10.13'
|
||||
- os: windows-latest
|
||||
python-version: '3.9.18'
|
||||
- os: windows-latest
|
||||
python-version: '3.8.18'
|
||||
# keep only one python version for MacOS
|
||||
- os: macos-latest
|
||||
python-version: '3.8.18'
|
||||
- os: macos-latest
|
||||
python-version: '3.9.18'
|
||||
- os: macos-latest
|
||||
python-version: '3.10.13'
|
||||
- os: macos-12
|
||||
- os: macos-latest
|
||||
python-version: '3.12.0'
|
||||
include:
|
||||
- os: windows-latest
|
||||
python-version: '3.10.11'
|
||||
- os: windows-latest
|
||||
python-version: '3.9.13'
|
||||
- os: windows-latest
|
||||
python-version: '3.8.10'
|
||||
|
||||
runs-on: ${{ matrix.os }}
|
||||
steps:
|
||||
@ -161,7 +155,7 @@ jobs:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
# Show OS combos first in GUI
|
||||
os: [ubuntu-latest, windows-latest, macos-12]
|
||||
os: [ubuntu-latest, windows-latest, macos-latest]
|
||||
python-version: ['3.11.5']
|
||||
|
||||
runs-on: ${{ matrix.os }}
|
||||
|
||||
43
.github/workflows/check_node_latest.yml
vendored
Normal file
43
.github/workflows/check_node_latest.yml
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
name: integration-node-latest
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
|
||||
env:
|
||||
TELEMETRY_ENABLED: false
|
||||
REFLEX_USE_SYSTEM_NODE: true
|
||||
|
||||
jobs:
|
||||
check_latest_node:
|
||||
runs-on: ubuntu-22.04
|
||||
strategy:
|
||||
matrix:
|
||||
python-version: ['3.12']
|
||||
split_index: [1, 2]
|
||||
node-version: ['node']
|
||||
fail-fast: false
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/actions/setup_build_env
|
||||
with:
|
||||
python-version: ${{ matrix.python-version }}
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
- run: |
|
||||
poetry run uv pip install pyvirtualdisplay pillow pytest-split
|
||||
poetry run playwright install --with-deps
|
||||
- run: |
|
||||
poetry run pytest tests/test_node_version.py
|
||||
poetry run pytest tests/integration --splits 2 --group ${{matrix.split_index}}
|
||||
|
||||
|
||||
|
||||
88
.github/workflows/check_outdated_dependencies.yml
vendored
Normal file
88
.github/workflows/check_outdated_dependencies.yml
vendored
Normal file
@ -0,0 +1,88 @@
|
||||
name: check-outdated-dependencies
|
||||
|
||||
on:
|
||||
push: # This will trigger the action when a pull request is opened or updated.
|
||||
branches:
|
||||
- 'release/**' # This will trigger the action when any branch starting with "release/" is created.
|
||||
workflow_dispatch: # Allow manual triggering if needed.
|
||||
|
||||
jobs:
|
||||
backend:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- uses: ./.github/actions/setup_build_env
|
||||
with:
|
||||
python-version: '3.9'
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
|
||||
- name: Check outdated backend dependencies
|
||||
run: |
|
||||
outdated=$(poetry show -oT)
|
||||
echo "Outdated:"
|
||||
echo "$outdated"
|
||||
|
||||
filtered_outdated=$(echo "$outdated" | grep -vE 'pyright|ruff' || true)
|
||||
|
||||
if [ ! -z "$filtered_outdated" ]; then
|
||||
echo "Outdated dependencies found:"
|
||||
echo "$filtered_outdated"
|
||||
exit 1
|
||||
else
|
||||
echo "All dependencies are up to date. (pyright and ruff are ignored)"
|
||||
fi
|
||||
|
||||
|
||||
frontend:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
- uses: ./.github/actions/setup_build_env
|
||||
with:
|
||||
python-version: '3.10.11'
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
- name: Clone Reflex Website Repo
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
repository: reflex-dev/reflex-web
|
||||
ref: main
|
||||
path: reflex-web
|
||||
- name: Install Requirements for reflex-web
|
||||
working-directory: ./reflex-web
|
||||
run: poetry run uv pip install -r requirements.txt
|
||||
- name: Install additional dependencies for DB access
|
||||
run: poetry run uv pip install psycopg
|
||||
- name: Init Website for reflex-web
|
||||
working-directory: ./reflex-web
|
||||
run: poetry run reflex init
|
||||
- name: Run Website and Check for errors
|
||||
run: |
|
||||
poetry run bash scripts/integration.sh ./reflex-web dev
|
||||
- name: Check outdated frontend dependencies
|
||||
working-directory: ./reflex-web/.web
|
||||
run: |
|
||||
raw_outdated=$(/home/runner/.local/share/reflex/bun/bin/bun outdated)
|
||||
outdated=$(echo "$raw_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\|' || true)
|
||||
echo "Outdated:"
|
||||
echo "$outdated"
|
||||
|
||||
# Ignore 3rd party dependencies that are not updated.
|
||||
filtered_outdated=$(echo "$outdated" | grep -vE 'Package|@chakra-ui|lucide-react|@splinetool/runtime|ag-grid-react|framer-motion|react-markdown|remark-math|remark-gfm|rehype-katex|rehype-raw|remark-unwrap-images' || true)
|
||||
no_extra=$(echo "$filtered_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-' || true)
|
||||
|
||||
|
||||
if [ ! -z "$no_extra" ]; then
|
||||
echo "Outdated dependencies found:"
|
||||
echo "$filtered_outdated"
|
||||
exit 1
|
||||
else
|
||||
echo "All dependencies are up to date. (3rd party packages are ignored)"
|
||||
fi
|
||||
|
||||
21
.github/workflows/integration_app_harness.yml
vendored
21
.github/workflows/integration_app_harness.yml
vendored
@ -6,13 +6,13 @@ concurrency:
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ['main']
|
||||
branches: ["main"]
|
||||
paths-ignore:
|
||||
- '**/*.md'
|
||||
- "**/*.md"
|
||||
pull_request:
|
||||
branches: ['main']
|
||||
branches: ["main"]
|
||||
paths-ignore:
|
||||
- '**/*.md'
|
||||
- "**/*.md"
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
@ -23,8 +23,10 @@ jobs:
|
||||
strategy:
|
||||
matrix:
|
||||
state_manager: ['redis', 'memory']
|
||||
python-version: ['3.8.18', '3.11.5', '3.12.0']
|
||||
runs-on: ubuntu-latest
|
||||
python-version: ['3.11.5', '3.12.0', '3.13.0']
|
||||
split_index: [1, 2]
|
||||
fail-fast: false
|
||||
runs-on: ubuntu-22.04
|
||||
services:
|
||||
# Label used to access the service container
|
||||
redis:
|
||||
@ -45,13 +47,14 @@ jobs:
|
||||
python-version: ${{ matrix.python-version }}
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
- run: poetry run uv pip install pyvirtualdisplay pillow
|
||||
- run: poetry run uv pip install pyvirtualdisplay pillow pytest-split
|
||||
- name: Run app harness tests
|
||||
env:
|
||||
SCREENSHOT_DIR: /tmp/screenshots
|
||||
SCREENSHOT_DIR: /tmp/screenshots/${{ matrix.state_manager }}/${{ matrix.python-version }}/${{ matrix.split_index }}
|
||||
REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}
|
||||
run: |
|
||||
poetry run pytest integration
|
||||
poetry run playwright install --with-deps
|
||||
poetry run pytest tests/integration --splits 2 --group ${{matrix.split_index}}
|
||||
- uses: actions/upload-artifact@v4
|
||||
name: Upload failed test screenshots
|
||||
if: always()
|
||||
|
||||
88
.github/workflows/integration_tests.yml
vendored
88
.github/workflows/integration_tests.yml
vendored
@ -42,22 +42,18 @@ jobs:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
# Show OS combos first in GUI
|
||||
os: [ubuntu-latest, windows-latest, macos-12]
|
||||
python-version: ['3.8.18', '3.9.18', '3.10.13', '3.11.5', '3.12.0']
|
||||
os: [ubuntu-latest, windows-latest]
|
||||
python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0', '3.13.0']
|
||||
exclude:
|
||||
- os: windows-latest
|
||||
python-version: '3.10.13'
|
||||
- os: windows-latest
|
||||
python-version: '3.9.18'
|
||||
- os: windows-latest
|
||||
python-version: '3.8.18'
|
||||
include:
|
||||
- os: windows-latest
|
||||
python-version: '3.10.11'
|
||||
- os: windows-latest
|
||||
python-version: '3.9.13'
|
||||
- os: windows-latest
|
||||
python-version: '3.8.10'
|
||||
|
||||
runs-on: ${{ matrix.os }}
|
||||
steps:
|
||||
@ -77,7 +73,7 @@ jobs:
|
||||
run: |
|
||||
poetry run uv pip install -r requirements.txt
|
||||
- name: Install additional dependencies for DB access
|
||||
run: poetry run uv pip install psycopg2-binary
|
||||
run: poetry run uv pip install psycopg
|
||||
- name: Check export --backend-only before init for counter example
|
||||
working-directory: ./reflex-examples/counter
|
||||
run: |
|
||||
@ -126,7 +122,7 @@ jobs:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
# Show OS combos first in GUI
|
||||
os: [ubuntu-latest, windows-latest, macos-12]
|
||||
os: [ubuntu-latest]
|
||||
python-version: ['3.10.11', '3.11.4']
|
||||
|
||||
env:
|
||||
@ -149,9 +145,9 @@ jobs:
|
||||
|
||||
- name: Install Requirements for reflex-web
|
||||
working-directory: ./reflex-web
|
||||
run: poetry run uv pip install -r requirements.txt
|
||||
run: poetry run uv pip install $(grep -ivE "reflex " requirements.txt)
|
||||
- name: Install additional dependencies for DB access
|
||||
run: poetry run uv pip install psycopg2-binary
|
||||
run: poetry run uv pip install psycopg
|
||||
- name: Init Website for reflex-web
|
||||
working-directory: ./reflex-web
|
||||
run: poetry run reflex init
|
||||
@ -165,4 +161,74 @@ jobs:
|
||||
poetry run python benchmarks/benchmark_web_size.py --os "${{ matrix.os }}"
|
||||
--python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
|
||||
--pr-id "${{ github.event.pull_request.id }}" --branch-name "${{ github.head_ref || github.ref_name }}"
|
||||
--app-name "reflex-web" --path ./reflex-web/.web
|
||||
--app-name "reflex-web" --path ./reflex-web/.web
|
||||
|
||||
rx-shout-from-template:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/actions/setup_build_env
|
||||
with:
|
||||
python-version: '3.11.4'
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
- name: Create app directory
|
||||
run: mkdir rx-shout-from-template
|
||||
- name: Init reflex-web from template
|
||||
run: poetry run reflex init --template https://github.com/masenf/rx_shout
|
||||
working-directory: ./rx-shout-from-template
|
||||
- name: ignore reflex pin in requirements
|
||||
run: sed -i -e '/reflex==/d' requirements.txt
|
||||
working-directory: ./rx-shout-from-template
|
||||
- name: Install additional dependencies
|
||||
run: poetry run uv pip install -r requirements.txt
|
||||
working-directory: ./rx-shout-from-template
|
||||
- name: Run Website and Check for errors
|
||||
run: |
|
||||
# Check that npm is home
|
||||
npm -v
|
||||
poetry run bash scripts/integration.sh ./rx-shout-from-template prod
|
||||
|
||||
|
||||
reflex-web-macos:
|
||||
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
python-version: ['3.11.5', '3.12.0']
|
||||
runs-on: macos-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/actions/setup_build_env
|
||||
with:
|
||||
python-version: ${{ matrix.python-version }}
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
- name: Clone Reflex Website Repo
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
repository: reflex-dev/reflex-web
|
||||
ref: main
|
||||
path: reflex-web
|
||||
- name: Install Requirements for reflex-web
|
||||
working-directory: ./reflex-web
|
||||
run: poetry run uv pip install -r requirements.txt
|
||||
- name: Install additional dependencies for DB access
|
||||
run: poetry run uv pip install psycopg
|
||||
- name: Init Website for reflex-web
|
||||
working-directory: ./reflex-web
|
||||
run: poetry run reflex init
|
||||
- name: Run Website and Check for errors
|
||||
run: |
|
||||
# Check that npm is home
|
||||
npm -v
|
||||
poetry run bash scripts/integration.sh ./reflex-web prod
|
||||
- name: Measure and upload .web size
|
||||
run:
|
||||
poetry run python benchmarks/benchmark_web_size.py --os "${{ matrix.os }}"
|
||||
--python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
|
||||
--pr-id "${{ github.event.pull_request.id }}" --branch-name "${{ github.head_ref || github.ref_name }}"
|
||||
--app-name "reflex-web" --path ./reflex-web/.web
|
||||
|
||||
2
.github/workflows/integration_tests_wsl.yml
vendored
2
.github/workflows/integration_tests_wsl.yml
vendored
@ -37,6 +37,8 @@ jobs:
|
||||
path: reflex-examples
|
||||
|
||||
- uses: Vampire/setup-wsl@v3
|
||||
with:
|
||||
distribution: Ubuntu-24.04
|
||||
|
||||
- name: Install Python
|
||||
shell: wsl-bash {0}
|
||||
|
||||
@ -28,5 +28,5 @@ jobs:
|
||||
# Run reflex init in a docker container
|
||||
|
||||
# cwd is repo root
|
||||
docker build -f integration/init-test/Dockerfile -t reflex-init-test integration/init-test
|
||||
docker run --rm -v $(pwd):/reflex-repo/ reflex-init-test /reflex-repo/integration/init-test/in_docker_test_script.sh
|
||||
docker build -f tests/integration/init-test/Dockerfile -t reflex-init-test tests/integration/init-test
|
||||
docker run --rm -v $(pwd):/reflex-repo/ reflex-init-test /reflex-repo/tests/integration/init-test/in_docker_test_script.sh
|
||||
|
||||
44
.github/workflows/unit_tests.yml
vendored
44
.github/workflows/unit_tests.yml
vendored
@ -27,24 +27,21 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
os: [ubuntu-latest, windows-latest, macos-12]
|
||||
python-version: ['3.8.18', '3.9.18', '3.10.13', '3.11.5', '3.12.0']
|
||||
os: [ubuntu-latest, windows-latest]
|
||||
python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0', '3.13.0']
|
||||
# Windows is a bit behind on Python version availability in Github
|
||||
exclude:
|
||||
- os: windows-latest
|
||||
python-version: '3.10.13'
|
||||
- os: windows-latest
|
||||
python-version: '3.9.18'
|
||||
- os: windows-latest
|
||||
python-version: '3.8.18'
|
||||
include:
|
||||
- os: windows-latest
|
||||
python-version: '3.10.11'
|
||||
- os: windows-latest
|
||||
python-version: '3.9.13'
|
||||
- os: windows-latest
|
||||
python-version: '3.8.10'
|
||||
runs-on: ${{ matrix.os }}
|
||||
|
||||
# Service containers to run with `runner-job`
|
||||
services:
|
||||
# Label used to access the service container
|
||||
@ -69,17 +66,44 @@ jobs:
|
||||
- name: Run unit tests
|
||||
run: |
|
||||
export PYTHONUNBUFFERED=1
|
||||
poetry run pytest tests --cov --no-cov-on-fail --cov-report=
|
||||
poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
|
||||
- name: Run unit tests w/ redis
|
||||
if: ${{ matrix.os == 'ubuntu-latest' }}
|
||||
run: |
|
||||
export PYTHONUNBUFFERED=1
|
||||
export REDIS_URL=redis://localhost:6379
|
||||
poetry run pytest tests --cov --no-cov-on-fail --cov-report=
|
||||
poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
|
||||
# Change to explicitly install v1 when reflex-hosting-cli is compatible with v2
|
||||
- name: Run unit tests w/ pydantic v1
|
||||
run: |
|
||||
export PYTHONUNBUFFERED=1
|
||||
poetry run uv pip install "pydantic~=1.10"
|
||||
poetry run pytest tests --cov --no-cov-on-fail --cov-report=
|
||||
- run: poetry run coverage html
|
||||
poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
|
||||
- name: Generate coverage report
|
||||
run: poetry run coverage html
|
||||
|
||||
unit-tests-macos:
|
||||
timeout-minutes: 30
|
||||
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
# Note: py39, py310 versions chosen due to available arm64 darwin builds.
|
||||
python-version: ['3.9.13', '3.10.11', '3.11.5', '3.12.0', '3.13.0']
|
||||
runs-on: macos-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/actions/setup_build_env
|
||||
with:
|
||||
python-version: ${{ matrix.python-version }}
|
||||
run-poetry-install: true
|
||||
create-venv-at-path: .venv
|
||||
- name: Run unit tests
|
||||
run: |
|
||||
export PYTHONUNBUFFERED=1
|
||||
poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
|
||||
- name: Run unit tests w/ pydantic v1
|
||||
run: |
|
||||
export PYTHONUNBUFFERED=1
|
||||
poetry run uv pip install "pydantic~=1.10"
|
||||
poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,6 +3,7 @@
|
||||
assets/external/*
|
||||
dist/*
|
||||
examples/
|
||||
.web
|
||||
.idea
|
||||
.vscode
|
||||
.coverage
|
||||
|
||||
@ -3,14 +3,20 @@ fail_fast: true
|
||||
repos:
|
||||
|
||||
- repo: https://github.com/charliermarsh/ruff-pre-commit
|
||||
rev: v0.4.10
|
||||
rev: v0.8.2
|
||||
hooks:
|
||||
- id: ruff-format
|
||||
args: [integration, reflex, tests]
|
||||
args: [reflex, tests]
|
||||
- id: ruff
|
||||
args: ["--fix", "--exit-non-zero-on-fix"]
|
||||
exclude: '^integration/benchmarks/'
|
||||
|
||||
- repo: https://github.com/codespell-project/codespell
|
||||
rev: v2.3.0
|
||||
hooks:
|
||||
- id: codespell
|
||||
args: ["reflex"]
|
||||
|
||||
# Run pyi check before pyright because pyright can fail if pyi files are wrong.
|
||||
- repo: local
|
||||
hooks:
|
||||
@ -25,7 +31,7 @@ repos:
|
||||
rev: v1.1.313
|
||||
hooks:
|
||||
- id: pyright
|
||||
args: [integration, reflex, tests]
|
||||
args: [reflex, tests]
|
||||
language: system
|
||||
|
||||
- repo: https://github.com/terrencepreilly/darglint
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
We as members, contributors, and leaders pledge to make participation in our
|
||||
community a harassment-free experience for everyone, regardless of age, body
|
||||
size, visible or invisible disability, ethnicity, sex characteristics, gender
|
||||
identity and expression, level of experience, education, socio-economic status,
|
||||
identity and expression, level of experience, education, socioeconomic status,
|
||||
nationality, personal appearance, race, religion, or sexual identity
|
||||
and orientation.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ Here is a quick guide on how to run Reflex repo locally so you can start contrib
|
||||
|
||||
**Prerequisites:**
|
||||
|
||||
- Python >= 3.8
|
||||
- Python >= 3.9
|
||||
- Poetry version >= 1.4.0 and add it to your path (see [Poetry Docs](https://python-poetry.org/docs/#installation) for more info).
|
||||
|
||||
**1. Fork this repository:**
|
||||
@ -69,7 +69,7 @@ In your `reflex` directory run make sure all the unit tests are still passing us
|
||||
This will fail if code coverage is below 70%.
|
||||
|
||||
``` bash
|
||||
poetry run pytest tests --cov --no-cov-on-fail --cov-report=
|
||||
poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
|
||||
```
|
||||
|
||||
Next make sure all the following tests pass. This ensures that every new change has proper documentation and type checking.
|
||||
@ -87,7 +87,7 @@ poetry run ruff format .
|
||||
```
|
||||
|
||||
Consider installing git pre-commit hooks so Ruff, Pyright, Darglint and `make_pyi` will run automatically before each commit.
|
||||
Note that pre-commit will only be installed when you use a Python version >= 3.8.
|
||||
Note that pre-commit will only be installed when you use a Python version >= 3.9.
|
||||
|
||||
``` bash
|
||||
pre-commit install
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -18,7 +17,7 @@
|
||||
|
||||
---
|
||||
|
||||
[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
|
||||
[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
|
||||
|
||||
---
|
||||
|
||||
@ -35,7 +34,7 @@ See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architectu
|
||||
|
||||
## ⚙️ Installation
|
||||
|
||||
Open a terminal and run (Requires Python 3.8+):
|
||||
Open a terminal and run (Requires Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
@ -229,7 +228,7 @@ You can create a multi-page app by adding more pages.
|
||||
|
||||
<div align="center">
|
||||
|
||||
📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Component Library](https://reflex.dev/docs/library) | 🖼️ [Gallery](https://reflex.dev/docs/gallery) | 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)
|
||||
📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Component Library](https://reflex.dev/docs/library) | 🖼️ [Templates](https://reflex.dev/templates/) | 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)
|
||||
|
||||
</div>
|
||||
|
||||
@ -250,7 +249,7 @@ We welcome contributions of any size! Below are some good ways to get started in
|
||||
- **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
|
||||
- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
|
||||
|
||||
We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
|
||||
We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
|
||||
|
||||
|
||||
## All Thanks To Our Contributors:
|
||||
|
||||
@ -5,6 +5,7 @@ from __future__ import annotations
|
||||
import argparse
|
||||
import json
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from utils import send_data_to_posthog
|
||||
|
||||
@ -18,7 +19,7 @@ def extract_stats_from_json(json_file: str) -> list[dict]:
|
||||
Returns:
|
||||
list[dict]: The stats for each test.
|
||||
"""
|
||||
with open(json_file, "r") as file:
|
||||
with Path(json_file).open() as file:
|
||||
json_data = json.load(file)
|
||||
|
||||
# Load the JSON data if it is a string, otherwise assume it's already a dictionary
|
||||
|
||||
@ -5,6 +5,7 @@ from __future__ import annotations
|
||||
import argparse
|
||||
import json
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from utils import send_data_to_posthog
|
||||
|
||||
@ -18,7 +19,7 @@ def extract_stats_from_json(json_file: str) -> dict:
|
||||
Returns:
|
||||
dict: The stats for each test.
|
||||
"""
|
||||
with open(json_file, "r") as file:
|
||||
with Path(json_file).open() as file:
|
||||
json_data = json.load(file)
|
||||
|
||||
# Load the JSON data if it is a string, otherwise assume it's already a dictionary
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import json
|
||||
import os
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
from utils import send_data_to_posthog
|
||||
|
||||
@ -28,7 +28,7 @@ def insert_benchmarking_data(
|
||||
send_data_to_posthog("lighthouse_benchmark", properties)
|
||||
|
||||
|
||||
def get_lighthouse_scores(directory_path: str) -> dict:
|
||||
def get_lighthouse_scores(directory_path: str | Path) -> dict:
|
||||
"""Extracts the Lighthouse scores from the JSON files in the specified directory.
|
||||
|
||||
Args:
|
||||
@ -38,24 +38,20 @@ def get_lighthouse_scores(directory_path: str) -> dict:
|
||||
dict: The Lighthouse scores.
|
||||
"""
|
||||
scores = {}
|
||||
|
||||
directory_path = Path(directory_path)
|
||||
try:
|
||||
for filename in os.listdir(directory_path):
|
||||
if filename.endswith(".json") and filename != "manifest.json":
|
||||
file_path = os.path.join(directory_path, filename)
|
||||
with open(file_path, "r") as file:
|
||||
data = json.load(file)
|
||||
# Extract scores and add them to the dictionary with the filename as key
|
||||
scores[data["finalUrl"].replace("http://localhost:3000/", "/")] = {
|
||||
"performance_score": data["categories"]["performance"]["score"],
|
||||
"accessibility_score": data["categories"]["accessibility"][
|
||||
"score"
|
||||
],
|
||||
"best_practices_score": data["categories"]["best-practices"][
|
||||
"score"
|
||||
],
|
||||
"seo_score": data["categories"]["seo"]["score"],
|
||||
}
|
||||
for filename in directory_path.iterdir():
|
||||
if filename.suffix == ".json" and filename.stem != "manifest":
|
||||
data = json.loads(filename.read_text())
|
||||
# Extract scores and add them to the dictionary with the filename as key
|
||||
scores[data["finalUrl"].replace("http://localhost:3000/", "/")] = {
|
||||
"performance_score": data["categories"]["performance"]["score"],
|
||||
"accessibility_score": data["categories"]["accessibility"]["score"],
|
||||
"best_practices_score": data["categories"]["best-practices"][
|
||||
"score"
|
||||
],
|
||||
"seo_score": data["categories"]["seo"]["score"],
|
||||
}
|
||||
except Exception as e:
|
||||
return {"error": e}
|
||||
|
||||
|
||||
@ -2,11 +2,12 @@
|
||||
|
||||
import argparse
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from utils import get_directory_size, get_python_version, send_data_to_posthog
|
||||
|
||||
|
||||
def get_package_size(venv_path, os_name):
|
||||
def get_package_size(venv_path: Path, os_name):
|
||||
"""Get the size of a specified package.
|
||||
|
||||
Args:
|
||||
@ -26,14 +27,12 @@ def get_package_size(venv_path, os_name):
|
||||
|
||||
is_windows = "windows" in os_name
|
||||
|
||||
full_path = (
|
||||
["lib", f"python{python_version}", "site-packages"]
|
||||
package_dir: Path = (
|
||||
venv_path / "lib" / f"python{python_version}" / "site-packages"
|
||||
if not is_windows
|
||||
else ["Lib", "site-packages"]
|
||||
else venv_path / "Lib" / "site-packages"
|
||||
)
|
||||
|
||||
package_dir = os.path.join(venv_path, *full_path)
|
||||
if not os.path.exists(package_dir):
|
||||
if not package_dir.exists():
|
||||
raise ValueError(
|
||||
"Error: Virtual environment does not exist or is not activated."
|
||||
)
|
||||
@ -63,9 +62,9 @@ def insert_benchmarking_data(
|
||||
path: The path to the dir or file to check size.
|
||||
"""
|
||||
if "./dist" in path:
|
||||
size = get_directory_size(path)
|
||||
size = get_directory_size(Path(path))
|
||||
else:
|
||||
size = get_package_size(path, os_type_version)
|
||||
size = get_package_size(Path(path), os_type_version)
|
||||
|
||||
# Prepare the event data
|
||||
properties = {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import argparse
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from utils import get_directory_size, send_data_to_posthog
|
||||
|
||||
@ -28,7 +29,7 @@ def insert_benchmarking_data(
|
||||
pr_id: The id of the PR.
|
||||
path: The path to the dir or file to check size.
|
||||
"""
|
||||
size = get_directory_size(path)
|
||||
size = get_directory_size(Path(path))
|
||||
|
||||
# Prepare the event data
|
||||
properties = {
|
||||
|
||||
@ -144,7 +144,7 @@ def AppWithOnePage():
|
||||
|
||||
def index() -> rx.Component:
|
||||
return rx.center(
|
||||
rx.chakra.input(
|
||||
rx.input(
|
||||
id="token", value=State.router.session.client_token, is_read_only=True
|
||||
),
|
||||
rx.vstack(
|
||||
@ -210,9 +210,9 @@ def app_with_one_page(
|
||||
Yields:
|
||||
an AppHarness instance
|
||||
"""
|
||||
root = tmp_path_factory.mktemp(f"app1")
|
||||
root = tmp_path_factory.mktemp("app1")
|
||||
|
||||
yield AppHarness.create(root=root, app_source=AppWithOnePage) # type: ignore
|
||||
yield AppHarness.create(root=root, app_source=AppWithOnePage)
|
||||
|
||||
|
||||
@pytest.fixture(scope="session")
|
||||
@ -227,7 +227,7 @@ def app_with_ten_pages(
|
||||
Yields:
|
||||
an AppHarness instance
|
||||
"""
|
||||
root = tmp_path_factory.mktemp(f"app10")
|
||||
root = tmp_path_factory.mktemp("app10")
|
||||
yield AppHarness.create(
|
||||
root=root,
|
||||
app_source=functools.partial(
|
||||
@ -249,7 +249,7 @@ def app_with_hundred_pages(
|
||||
Yields:
|
||||
an AppHarness instance
|
||||
"""
|
||||
root = tmp_path_factory.mktemp(f"app100")
|
||||
root = tmp_path_factory.mktemp("app100")
|
||||
|
||||
yield AppHarness.create(
|
||||
root=root,
|
||||
@ -272,11 +272,11 @@ def app_with_thousand_pages(
|
||||
Yields:
|
||||
an AppHarness instance
|
||||
"""
|
||||
root = tmp_path_factory.mktemp(f"app1000")
|
||||
root = tmp_path_factory.mktemp("app1000")
|
||||
|
||||
yield AppHarness.create(
|
||||
root=root,
|
||||
app_source=functools.partial( # type: ignore
|
||||
app_source=functools.partial(
|
||||
AppWithThousandPages,
|
||||
render_comp=render_multiple_pages, # type: ignore
|
||||
),
|
||||
@ -295,7 +295,7 @@ def app_with_ten_thousand_pages(
|
||||
Yields:
|
||||
running AppHarness instance
|
||||
"""
|
||||
root = tmp_path_factory.mktemp(f"app10000")
|
||||
root = tmp_path_factory.mktemp("app10000")
|
||||
|
||||
yield AppHarness.create(
|
||||
root=root,
|
||||
|
||||
@ -2,12 +2,13 @@
|
||||
|
||||
import os
|
||||
import subprocess
|
||||
from pathlib import Path
|
||||
|
||||
import httpx
|
||||
from httpx import HTTPError
|
||||
|
||||
|
||||
def get_python_version(venv_path, os_name):
|
||||
def get_python_version(venv_path: Path, os_name):
|
||||
"""Get the python version of python in a virtual env.
|
||||
|
||||
Args:
|
||||
@ -18,13 +19,13 @@ def get_python_version(venv_path, os_name):
|
||||
The python version.
|
||||
"""
|
||||
python_executable = (
|
||||
os.path.join(venv_path, "bin", "python")
|
||||
venv_path / "bin" / "python"
|
||||
if "windows" not in os_name
|
||||
else os.path.join(venv_path, "Scripts", "python.exe")
|
||||
else venv_path / "Scripts" / "python.exe"
|
||||
)
|
||||
try:
|
||||
output = subprocess.check_output(
|
||||
[python_executable, "--version"], stderr=subprocess.STDOUT
|
||||
[str(python_executable), "--version"], stderr=subprocess.STDOUT
|
||||
)
|
||||
python_version = output.decode("utf-8").strip().split()[1]
|
||||
return ".".join(python_version.split(".")[:-1])
|
||||
@ -32,7 +33,7 @@ def get_python_version(venv_path, os_name):
|
||||
return None
|
||||
|
||||
|
||||
def get_directory_size(directory):
|
||||
def get_directory_size(directory: Path):
|
||||
"""Get the size of a directory in bytes.
|
||||
|
||||
Args:
|
||||
@ -44,8 +45,8 @@ def get_directory_size(directory):
|
||||
total_size = 0
|
||||
for dirpath, _, filenames in os.walk(directory):
|
||||
for f in filenames:
|
||||
fp = os.path.join(dirpath, f)
|
||||
total_size += os.path.getsize(fp)
|
||||
fp = Path(dirpath) / f
|
||||
total_size += fp.stat().st_size
|
||||
return total_size
|
||||
|
||||
|
||||
|
||||
@ -1,133 +1,30 @@
|
||||
# Reflex Docker Container
|
||||
# Reflex Docker Examples
|
||||
|
||||
This example describes how to create and use a container image for Reflex with your own code.
|
||||
This directory contains several examples of how to deploy Reflex apps using docker.
|
||||
|
||||
## Update Requirements
|
||||
In all cases, ensure that your `requirements.txt` file is up to date and
|
||||
includes the `reflex` package.
|
||||
|
||||
The `requirements.txt` includes the reflex package which is needed to install
|
||||
Reflex framework. If you use additional packages in your project you have to add
|
||||
this in the `requirements.txt` first. Copy the `Dockerfile`, `.dockerignore` and
|
||||
the `requirements.txt` file in your project folder.
|
||||
## `simple-two-port`
|
||||
|
||||
## Build Simple Reflex Container Image
|
||||
The most basic production deployment exposes two HTTP ports and relies on an
|
||||
existing load balancer to forward the traffic appropriately.
|
||||
|
||||
The main `Dockerfile` is intended to build a very simple, single container deployment that runs
|
||||
the Reflex frontend and backend together, exposing ports 3000 and 8000.
|
||||
## `simple-one-port`
|
||||
|
||||
To build your container image run the following command:
|
||||
This deployment exports the frontend statically and serves it via a single HTTP
|
||||
port using Caddy. This is useful for platforms that only support a single port
|
||||
or where running a node server in the container is undesirable.
|
||||
|
||||
```bash
|
||||
docker build -t reflex-app:latest .
|
||||
```
|
||||
## `production-compose`
|
||||
|
||||
## Start Container Service
|
||||
This deployment is intended for use with a standalone VPS that is only hosting a
|
||||
single Reflex app. It provides the entire stack in a single `compose.yaml`
|
||||
including a webserver, one or more backend instances, redis, and a postgres
|
||||
database.
|
||||
|
||||
Finally, you can start your Reflex container service as follows:
|
||||
## `production-app-platform`
|
||||
|
||||
```bash
|
||||
docker run -it --rm -p 3000:3000 -p 8000:8000 --name app reflex-app:latest
|
||||
```
|
||||
|
||||
It may take a few seconds for the service to become available.
|
||||
|
||||
Access your app at http://localhost:3000.
|
||||
|
||||
Note that this container has _no persistence_ and will lose all data when
|
||||
stopped. You can use bind mounts or named volumes to persist the database and
|
||||
uploaded_files directories as needed.
|
||||
|
||||
# Production Service with Docker Compose and Caddy
|
||||
|
||||
An example production deployment uses automatic TLS with Caddy serving static files
|
||||
for the frontend and proxying requests to both the frontend and backend.
|
||||
|
||||
Copy the following files to your project directory:
|
||||
* `compose.yaml`
|
||||
* `compose.prod.yaml`
|
||||
* `compose.tools.yaml`
|
||||
* `prod.Dockerfile`
|
||||
* `Caddy.Dockerfile`
|
||||
* `Caddyfile`
|
||||
|
||||
The production app container, based on `prod.Dockerfile`, builds and exports the
|
||||
frontend statically (to be served by Caddy). The resulting image only runs the
|
||||
backend service.
|
||||
|
||||
The `webserver` service, based on `Caddy.Dockerfile`, copies the static frontend
|
||||
and `Caddyfile` into the container to configure the reverse proxy routes that will
|
||||
forward requests to the backend service. Caddy will automatically provision TLS
|
||||
for localhost or the domain specified in the environment variable `DOMAIN`.
|
||||
|
||||
This type of deployment should use less memory and be more performant since
|
||||
nodejs is not required at runtime.
|
||||
|
||||
## Customize `Caddyfile` (optional)
|
||||
|
||||
If the app uses additional backend API routes, those should be added to the
|
||||
`@backend_routes` path matcher to ensure they are forwarded to the backend.
|
||||
|
||||
## Build Reflex Production Service
|
||||
|
||||
During build, set `DOMAIN` environment variable to the domain where the app will
|
||||
be hosted! (Do not include http or https, it will always use https).
|
||||
|
||||
**If `DOMAIN` is not provided, the service will default to `localhost`.**
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose build
|
||||
```
|
||||
|
||||
This will build both the `app` service from the `prod.Dockerfile` and the `webserver`
|
||||
service via `Caddy.Dockerfile`.
|
||||
|
||||
## Run Reflex Production Service
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose up
|
||||
```
|
||||
|
||||
The app should be available at the specified domain via HTTPS. Certificate
|
||||
provisioning will occur automatically and may take a few minutes.
|
||||
|
||||
### Data Persistence
|
||||
|
||||
Named docker volumes are used to persist the app database (`db-data`),
|
||||
uploaded_files (`upload-data`), and caddy TLS keys and certificates
|
||||
(`caddy-data`).
|
||||
|
||||
## More Robust Deployment
|
||||
|
||||
For a more robust deployment, consider bringing the service up with
|
||||
`compose.prod.yaml` which includes postgres database and redis cache, allowing
|
||||
the backend to run with multiple workers and service more requests.
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml up -d
|
||||
```
|
||||
|
||||
Postgres uses its own named docker volume for data persistence.
|
||||
|
||||
## Admin Tools
|
||||
|
||||
When needed, the services in `compose.tools.yaml` can be brought up, providing
|
||||
graphical database administration (Adminer on http://localhost:8080) and a
|
||||
redis cache browser (redis-commander on http://localhost:8081). It is not recommended
|
||||
to deploy these services if they are not in active use.
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d
|
||||
```
|
||||
|
||||
# Container Hosting
|
||||
|
||||
Most container hosting services automatically terminate TLS and expect the app
|
||||
to be listening on a single port (typically `$PORT`).
|
||||
|
||||
To host a Reflex app on one of these platforms, like Google Cloud Run, Render,
|
||||
Railway, etc, use `app.Dockerfile` to build a single image containing a reverse
|
||||
proxy that will serve that frontend as static files and proxy requests to the
|
||||
backend for specific endpoints.
|
||||
|
||||
If the chosen platform does not support buildx and thus heredoc, you can copy
|
||||
the Caddyfile configuration into a separate Caddyfile in the root of the
|
||||
project.
|
||||
This example deployment is intended for use with App hosting platforms, like
|
||||
Azure, AWS, or Google Cloud Run. It is the backend of the deployment, which
|
||||
depends on a separately hosted redis instance and static frontend deployment.
|
||||
5
docker-example/production-app-platform/.dockerignore
Normal file
5
docker-example/production-app-platform/.dockerignore
Normal file
@ -0,0 +1,5 @@
|
||||
.web
|
||||
.git
|
||||
__pycache__/*
|
||||
Dockerfile
|
||||
uploaded_files
|
||||
65
docker-example/production-app-platform/Dockerfile
Normal file
65
docker-example/production-app-platform/Dockerfile
Normal file
@ -0,0 +1,65 @@
|
||||
# This docker file is intended to be used with container hosting services
|
||||
#
|
||||
# After deploying this image, get the URL pointing to the backend service
|
||||
# and run API_URL=https://path-to-my-container.example.com reflex export frontend
|
||||
# then copy the contents of `frontend.zip` to your static file server (github pages, s3, etc).
|
||||
#
|
||||
# Azure Static Web App example:
|
||||
# npx @azure/static-web-apps-cli deploy --env production --app-location .web/_static
|
||||
#
|
||||
# For dynamic routes to function properly, ensure that 404s are redirected to /404 on the
|
||||
# static file host (for github pages, this works out of the box; remember to create .nojekyll).
|
||||
#
|
||||
# For azure static web apps, add `staticwebapp.config.json` to to `.web/_static` with the following:
|
||||
# {
|
||||
# "responseOverrides": {
|
||||
# "404": {
|
||||
# "rewrite": "/404.html"
|
||||
# }
|
||||
# }
|
||||
# }
|
||||
#
|
||||
# Note: many container hosting platforms require amd64 images, so when building on an M1 Mac
|
||||
# for example, pass `docker build --platform=linux/amd64 ...`
|
||||
|
||||
# Stage 1: init
|
||||
FROM python:3.13 as init
|
||||
|
||||
ARG uv=/root/.local/bin/uv
|
||||
|
||||
# Install `uv` for faster package bootstrapping
|
||||
ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
|
||||
RUN /install.sh && rm /install.sh
|
||||
|
||||
# Copy local context to `/app` inside container (see .dockerignore)
|
||||
WORKDIR /app
|
||||
COPY . .
|
||||
RUN mkdir -p /app/data /app/uploaded_files
|
||||
|
||||
# Create virtualenv which will be copied into final container
|
||||
ENV VIRTUAL_ENV=/app/.venv
|
||||
ENV PATH="$VIRTUAL_ENV/bin:$PATH"
|
||||
RUN $uv venv
|
||||
|
||||
# Install app requirements and reflex inside virtualenv
|
||||
RUN $uv pip install -r requirements.txt
|
||||
|
||||
# Deploy templates and prepare app
|
||||
RUN reflex init
|
||||
|
||||
# Stage 2: copy artifacts into slim image
|
||||
FROM python:3.13-slim
|
||||
WORKDIR /app
|
||||
RUN adduser --disabled-password --home /app reflex
|
||||
COPY --chown=reflex --from=init /app /app
|
||||
# Install libpq-dev for psycopg (skip if not using postgres).
|
||||
RUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*
|
||||
USER reflex
|
||||
ENV PATH="/app/.venv/bin:$PATH" PYTHONUNBUFFERED=1
|
||||
|
||||
# Needed until Reflex properly passes SIGTERM on backend.
|
||||
STOPSIGNAL SIGKILL
|
||||
|
||||
# Always apply migrations before starting the backend.
|
||||
CMD [ -d alembic ] && reflex db migrate; \
|
||||
exec reflex run --env prod --backend-only --backend-port ${PORT:-8000}
|
||||
113
docker-example/production-app-platform/README.md
Normal file
113
docker-example/production-app-platform/README.md
Normal file
@ -0,0 +1,113 @@
|
||||
# production-app-platform
|
||||
|
||||
This example deployment is intended for use with App hosting platforms, like
|
||||
Azure, AWS, or Google Cloud Run.
|
||||
|
||||
## Architecture
|
||||
|
||||
The production deployment consists of a few pieces:
|
||||
* Backend container - built by `Dockerfile` Runs the Reflex backend
|
||||
service on port 8000 and is scalable to multiple instances.
|
||||
* Redis container - A single instance the standard `redis` docker image should
|
||||
share private networking with the backend
|
||||
* Static frontend - HTML/CSS/JS files that are hosted via a CDN or static file
|
||||
server. This is not included in the docker image.
|
||||
|
||||
## Deployment
|
||||
|
||||
These general steps do not cover the specifics of each platform, but all platforms should
|
||||
support the concepts described here.
|
||||
|
||||
### Vnet
|
||||
|
||||
All containers in the deployment should be hooked up to the same virtual private
|
||||
network so they can access the redis service and optionally the database server.
|
||||
The vnet should not be exposed to the internet, use an ingress rule to terminate
|
||||
TLS at the load balancer and forward the traffic to a backend service replica.
|
||||
|
||||
### Redis
|
||||
|
||||
Deploy a `redis` instance on the vnet.
|
||||
|
||||
### Backend
|
||||
|
||||
The backend is built by the `Dockerfile` in this directory. When deploying the
|
||||
backend, be sure to set REDIS_URL=redis://internal-redis-hostname to connect to
|
||||
the redis service.
|
||||
|
||||
### Ingress
|
||||
|
||||
Configure the load balancer for the app to forward traffic to port 8000 on the
|
||||
backend service replicas. Most platforms will generate an ingress hostname
|
||||
automatically. Make sure when you access the ingress endpoint on `/ping` that it
|
||||
returns "pong", indicating that the backend is up an available.
|
||||
|
||||
### Frontend
|
||||
|
||||
The frontend should be hosted on a static file server or CDN.
|
||||
|
||||
**Important**: when exporting the frontend, set the API_URL environment variable
|
||||
to the ingress hostname of the backend service.
|
||||
|
||||
If you will host the frontend from a path other than the root, set the
|
||||
`FRONTEND_PATH` environment variable appropriately when exporting the frontend.
|
||||
|
||||
Most static hosts will automatically use the `/404.html` file to handle 404
|
||||
errors. _This is essential for dynamic routes to work correctly._ Ensure that
|
||||
missing routes return the `/404.html` content to the user if this is not the
|
||||
default behavior.
|
||||
|
||||
_For Github Pages_: ensure the file `.nojekyll` is present in the root of the repo
|
||||
to avoid special processing of underscore-prefix directories, like `_next`.
|
||||
|
||||
## Platform Notes
|
||||
|
||||
The following sections are currently a work in progress and may be incomplete.
|
||||
|
||||
### Azure
|
||||
|
||||
In the Azure load balancer, per-message deflate is not supported. Add the following
|
||||
to your `rxconfig.py` to workaround this issue.
|
||||
|
||||
```python
|
||||
import uvicorn.workers
|
||||
|
||||
import reflex as rx
|
||||
|
||||
|
||||
class NoWSPerMessageDeflate(uvicorn.workers.UvicornH11Worker):
|
||||
CONFIG_KWARGS = {
|
||||
**uvicorn.workers.UvicornH11Worker.CONFIG_KWARGS,
|
||||
"ws_per_message_deflate": False,
|
||||
}
|
||||
|
||||
|
||||
config = rx.Config(
|
||||
app_name="my_app",
|
||||
gunicorn_worker_class="rxconfig.NoWSPerMessageDeflate",
|
||||
)
|
||||
```
|
||||
|
||||
#### Persistent Storage
|
||||
|
||||
If you need to use a database or upload files, you cannot save them to the
|
||||
container volume. Use Azure Files and mount it into the container at /app/uploaded_files.
|
||||
|
||||
#### Resource Types
|
||||
|
||||
* Create a new vnet with 10.0.0.0/16
|
||||
* Create a new subnet for redis, database, and containers
|
||||
* Deploy redis as a Container Instances
|
||||
* Deploy database server as "Azure Database for PostgreSQL"
|
||||
* Create a new database for the app
|
||||
* Set db-url as a secret containing the db user/password connection string
|
||||
* Deploy Storage account for uploaded files
|
||||
* Enable access from the vnet and container subnet
|
||||
* Create a new file share
|
||||
* In the environment, create a new files share (get the storage key)
|
||||
* Deploy the backend as a Container App
|
||||
* Create a custom Container App Environment linked up to the same vnet as the redis container.
|
||||
* Set REDIS_URL and DB_URL environment variables
|
||||
* Add the volume from the environment
|
||||
* Add the volume mount to the container
|
||||
* Deploy the frontend as a Static Web App
|
||||
@ -2,11 +2,11 @@
|
||||
# instance of a Reflex app.
|
||||
|
||||
# Stage 1: init
|
||||
FROM python:3.11 as init
|
||||
FROM python:3.13 as init
|
||||
|
||||
ARG uv=/root/.cargo/bin/uv
|
||||
ARG uv=/root/.local/bin/uv
|
||||
|
||||
# Install `uv` for faster package boostrapping
|
||||
# Install `uv` for faster package bootstrapping
|
||||
ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
|
||||
RUN /install.sh && rm /install.sh
|
||||
|
||||
@ -35,17 +35,18 @@ RUN rm -rf .web && mkdir .web
|
||||
RUN mv /tmp/_static .web/_static
|
||||
|
||||
# Stage 2: copy artifacts into slim image
|
||||
FROM python:3.11-slim
|
||||
FROM python:3.13-slim
|
||||
WORKDIR /app
|
||||
RUN adduser --disabled-password --home /app reflex
|
||||
COPY --chown=reflex --from=init /app /app
|
||||
# Install libpq-dev for psycopg2 (skip if not using postgres).
|
||||
# Install libpq-dev for psycopg (skip if not using postgres).
|
||||
RUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*
|
||||
USER reflex
|
||||
ENV PATH="/app/.venv/bin:$PATH"
|
||||
ENV PATH="/app/.venv/bin:$PATH" PYTHONUNBUFFERED=1
|
||||
|
||||
# Needed until Reflex properly passes SIGTERM on backend.
|
||||
STOPSIGNAL SIGKILL
|
||||
|
||||
# Always apply migrations before starting the backend.
|
||||
CMD reflex db migrate && reflex run --env prod --backend-only
|
||||
CMD [ -d alembic ] && reflex db migrate; \
|
||||
exec reflex run --env prod --backend-only
|
||||
75
docker-example/production-compose/README.md
Normal file
75
docker-example/production-compose/README.md
Normal file
@ -0,0 +1,75 @@
|
||||
# production-compose
|
||||
|
||||
This example production deployment uses automatic TLS with Caddy serving static
|
||||
files for the frontend and proxying requests to both the frontend and backend.
|
||||
It is intended for use with a standalone VPS that is only hosting a single
|
||||
Reflex app.
|
||||
|
||||
The production app container (`Dockerfile`), builds and exports the frontend
|
||||
statically (to be served by Caddy). The resulting image only runs the backend
|
||||
service.
|
||||
|
||||
The `webserver` service, based on `Caddy.Dockerfile`, copies the static frontend
|
||||
and `Caddyfile` into the container to configure the reverse proxy routes that will
|
||||
forward requests to the backend service. Caddy will automatically provision TLS
|
||||
for localhost or the domain specified in the environment variable `DOMAIN`.
|
||||
|
||||
This type of deployment should use less memory and be more performant since
|
||||
nodejs is not required at runtime.
|
||||
|
||||
## Customize `Caddyfile` (optional)
|
||||
|
||||
If the app uses additional backend API routes, those should be added to the
|
||||
`@backend_routes` path matcher to ensure they are forwarded to the backend.
|
||||
|
||||
## Build Reflex Production Service
|
||||
|
||||
During build, set `DOMAIN` environment variable to the domain where the app will
|
||||
be hosted! (Do not include http or https, it will always use https).
|
||||
|
||||
**If `DOMAIN` is not provided, the service will default to `localhost`.**
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose build
|
||||
```
|
||||
|
||||
This will build both the `app` service from the `prod.Dockerfile` and the `webserver`
|
||||
service via `Caddy.Dockerfile`.
|
||||
|
||||
## Run Reflex Production Service
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose up
|
||||
```
|
||||
|
||||
The app should be available at the specified domain via HTTPS. Certificate
|
||||
provisioning will occur automatically and may take a few minutes.
|
||||
|
||||
### Data Persistence
|
||||
|
||||
Named docker volumes are used to persist the app database (`db-data`),
|
||||
uploaded_files (`upload-data`), and caddy TLS keys and certificates
|
||||
(`caddy-data`).
|
||||
|
||||
## More Robust Deployment
|
||||
|
||||
For a more robust deployment, consider bringing the service up with
|
||||
`compose.prod.yaml` which includes postgres database and redis cache, allowing
|
||||
the backend to run with multiple workers and service more requests.
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml up -d
|
||||
```
|
||||
|
||||
Postgres uses its own named docker volume for data persistence.
|
||||
|
||||
## Admin Tools
|
||||
|
||||
When needed, the services in `compose.tools.yaml` can be brought up, providing
|
||||
graphical database administration (Adminer on http://localhost:8080) and a
|
||||
redis cache browser (redis-commander on http://localhost:8081). It is not recommended
|
||||
to deploy these services if they are not in active use.
|
||||
|
||||
```bash
|
||||
DOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d
|
||||
```
|
||||
@ -15,7 +15,7 @@ services:
|
||||
|
||||
app:
|
||||
environment:
|
||||
DB_URL: postgresql+psycopg2://postgres:secret@db/postgres
|
||||
DB_URL: postgresql+psycopg://postgres:secret@db/postgres
|
||||
REDIS_URL: redis://redis:6379
|
||||
depends_on:
|
||||
- db
|
||||
@ -12,7 +12,6 @@ services:
|
||||
DB_URL: sqlite:///data/reflex.db
|
||||
build:
|
||||
context: .
|
||||
dockerfile: prod.Dockerfile
|
||||
volumes:
|
||||
- db-data:/app/data
|
||||
- upload-data:/app/uploaded_files
|
||||
3
docker-example/production-one-port/.dockerignore
Normal file
3
docker-example/production-one-port/.dockerignore
Normal file
@ -0,0 +1,3 @@
|
||||
.web
|
||||
!.web/bun.lockb
|
||||
!.web/package.json
|
||||
14
docker-example/production-one-port/Caddyfile
Normal file
14
docker-example/production-one-port/Caddyfile
Normal file
@ -0,0 +1,14 @@
|
||||
:{$PORT}
|
||||
|
||||
encode gzip
|
||||
|
||||
@backend_routes path /_event/* /ping /_upload /_upload/*
|
||||
handle @backend_routes {
|
||||
reverse_proxy localhost:8000
|
||||
}
|
||||
|
||||
root * /srv
|
||||
route {
|
||||
try_files {path} {path}/ /404.html
|
||||
file_server
|
||||
}
|
||||
62
docker-example/production-one-port/Dockerfile
Normal file
62
docker-example/production-one-port/Dockerfile
Normal file
@ -0,0 +1,62 @@
|
||||
# This Dockerfile is used to deploy a single-container Reflex app instance
|
||||
# to services like Render, Railway, Heroku, GCP, and others.
|
||||
|
||||
# If the service expects a different port, provide it here (f.e Render expects port 10000)
|
||||
ARG PORT=8080
|
||||
# Only set for local/direct access. When TLS is used, the API_URL is assumed to be the same as the frontend.
|
||||
ARG API_URL
|
||||
|
||||
# It uses a reverse proxy to serve the frontend statically and proxy to backend
|
||||
# from a single exposed port, expecting TLS termination to be handled at the
|
||||
# edge by the given platform.
|
||||
FROM python:3.13 as builder
|
||||
|
||||
RUN mkdir -p /app/.web
|
||||
RUN python -m venv /app/.venv
|
||||
ENV PATH="/app/.venv/bin:$PATH"
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install python app requirements and reflex in the container
|
||||
COPY requirements.txt .
|
||||
RUN pip install -r requirements.txt
|
||||
|
||||
# Install reflex helper utilities like bun/fnm/node
|
||||
COPY rxconfig.py ./
|
||||
RUN reflex init
|
||||
|
||||
# Install pre-cached frontend dependencies (if exist)
|
||||
COPY *.web/bun.lockb *.web/package.json .web/
|
||||
RUN if [ -f .web/bun.lockb ]; then cd .web && ~/.local/share/reflex/bun/bin/bun install --frozen-lockfile; fi
|
||||
|
||||
# Copy local context to `/app` inside container (see .dockerignore)
|
||||
COPY . .
|
||||
|
||||
ARG PORT API_URL
|
||||
# Download other npm dependencies and compile frontend
|
||||
RUN API_URL=${API_URL:-http://localhost:$PORT} reflex export --loglevel debug --frontend-only --no-zip && mv .web/_static/* /srv/ && rm -rf .web
|
||||
|
||||
|
||||
# Final image with only necessary files
|
||||
FROM python:3.13-slim
|
||||
|
||||
# Install Caddy and redis server inside image
|
||||
RUN apt-get update -y && apt-get install -y caddy redis-server && rm -rf /var/lib/apt/lists/*
|
||||
|
||||
ARG PORT API_URL
|
||||
ENV PATH="/app/.venv/bin:$PATH" PORT=$PORT API_URL=${API_URL:-http://localhost:$PORT} REDIS_URL=redis://localhost PYTHONUNBUFFERED=1
|
||||
|
||||
WORKDIR /app
|
||||
COPY --from=builder /app /app
|
||||
COPY --from=builder /srv /srv
|
||||
|
||||
# Needed until Reflex properly passes SIGTERM on backend.
|
||||
STOPSIGNAL SIGKILL
|
||||
|
||||
EXPOSE $PORT
|
||||
|
||||
# Apply migrations before starting the backend.
|
||||
CMD [ -d alembic ] && reflex db migrate; \
|
||||
caddy start && \
|
||||
redis-server --daemonize yes && \
|
||||
exec reflex run --env prod --backend-only
|
||||
37
docker-example/production-one-port/README.md
Normal file
37
docker-example/production-one-port/README.md
Normal file
@ -0,0 +1,37 @@
|
||||
# production-one-port
|
||||
|
||||
This docker deployment runs Reflex in prod mode, exposing a single HTTP port:
|
||||
* `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.
|
||||
|
||||
The deployment also runs a local Redis server to store state for each user.
|
||||
|
||||
Conceptually it is similar to the `simple-one-port` example except it:
|
||||
* has layer caching for python, reflex, and node dependencies
|
||||
* uses multi-stage build to reduce the size of the final image
|
||||
|
||||
Using this method may be preferable for deploying in memory constrained
|
||||
environments, because it serves a static frontend export, rather than running
|
||||
the NextJS server via node.
|
||||
|
||||
## Build
|
||||
|
||||
```console
|
||||
docker build -t reflex-production-one-port .
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
```console
|
||||
docker run -p 8080:8080 reflex-production-one-port
|
||||
```
|
||||
|
||||
Note that this container has _no persistence_ and will lose all data when
|
||||
stopped. You can use bind mounts or named volumes to persist the database and
|
||||
uploaded_files directories as needed.
|
||||
|
||||
## Usage
|
||||
|
||||
This container should be used with an existing load balancer or reverse proxy to
|
||||
terminate TLS.
|
||||
|
||||
It is also useful for deploying to simple app platforms, such as Render or Heroku.
|
||||
@ -1 +0,0 @@
|
||||
reflex
|
||||
5
docker-example/simple-one-port/.dockerignore
Normal file
5
docker-example/simple-one-port/.dockerignore
Normal file
@ -0,0 +1,5 @@
|
||||
.web
|
||||
.git
|
||||
__pycache__/*
|
||||
Dockerfile
|
||||
uploaded_files
|
||||
14
docker-example/simple-one-port/Caddyfile
Normal file
14
docker-example/simple-one-port/Caddyfile
Normal file
@ -0,0 +1,14 @@
|
||||
:{$PORT}
|
||||
|
||||
encode gzip
|
||||
|
||||
@backend_routes path /_event/* /ping /_upload /_upload/*
|
||||
handle @backend_routes {
|
||||
reverse_proxy localhost:8000
|
||||
}
|
||||
|
||||
root * /srv
|
||||
route {
|
||||
try_files {path} {path}/ /404.html
|
||||
file_server
|
||||
}
|
||||
@ -4,37 +4,19 @@
|
||||
# It uses a reverse proxy to serve the frontend statically and proxy to backend
|
||||
# from a single exposed port, expecting TLS termination to be handled at the
|
||||
# edge by the given platform.
|
||||
FROM python:3.11
|
||||
FROM python:3.13
|
||||
|
||||
# If the service expects a different port, provide it here (f.e Render expects port 10000)
|
||||
ARG PORT=8080
|
||||
# Only set for local/direct access. When TLS is used, the API_URL is assumed to be the same as the frontend.
|
||||
ARG API_URL
|
||||
ENV PORT=$PORT API_URL=${API_URL:-http://localhost:$PORT}
|
||||
ENV PORT=$PORT API_URL=${API_URL:-http://localhost:$PORT} REDIS_URL=redis://localhost PYTHONUNBUFFERED=1
|
||||
|
||||
# Install Caddy server inside image
|
||||
RUN apt-get update -y && apt-get install -y caddy && rm -rf /var/lib/apt/lists/*
|
||||
# Install Caddy and redis server inside image
|
||||
RUN apt-get update -y && apt-get install -y caddy redis-server && rm -rf /var/lib/apt/lists/*
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Create a simple Caddyfile to serve as reverse proxy
|
||||
RUN cat > Caddyfile <<EOF
|
||||
:{\$PORT}
|
||||
|
||||
encode gzip
|
||||
|
||||
@backend_routes path /_event/* /ping /_upload /_upload/*
|
||||
handle @backend_routes {
|
||||
reverse_proxy localhost:8000
|
||||
}
|
||||
|
||||
root * /srv
|
||||
route {
|
||||
try_files {path} {path}/ /404.html
|
||||
file_server
|
||||
}
|
||||
EOF
|
||||
|
||||
# Copy local context to `/app` inside container (see .dockerignore)
|
||||
COPY . .
|
||||
|
||||
@ -54,4 +36,6 @@ EXPOSE $PORT
|
||||
|
||||
# Apply migrations before starting the backend.
|
||||
CMD [ -d alembic ] && reflex db migrate; \
|
||||
caddy start && reflex run --env prod --backend-only --loglevel debug
|
||||
caddy start && \
|
||||
redis-server --daemonize yes && \
|
||||
exec reflex run --env prod --backend-only
|
||||
36
docker-example/simple-one-port/README.md
Normal file
36
docker-example/simple-one-port/README.md
Normal file
@ -0,0 +1,36 @@
|
||||
# simple-one-port
|
||||
|
||||
This docker deployment runs Reflex in prod mode, exposing a single HTTP port:
|
||||
* `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.
|
||||
|
||||
The deployment also runs a local Redis server to store state for each user.
|
||||
|
||||
Using this method may be preferable for deploying in memory constrained
|
||||
environments, because it serves a static frontend export, rather than running
|
||||
the NextJS server via node.
|
||||
|
||||
For platforms which only terminate TLS to a single port, this container can be
|
||||
deployed instead of the `simple-two-port` example.
|
||||
|
||||
## Build
|
||||
|
||||
```console
|
||||
docker build -t reflex-simple-one-port .
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
```console
|
||||
docker run -p 8080:8080 reflex-simple-one-port
|
||||
```
|
||||
|
||||
Note that this container has _no persistence_ and will lose all data when
|
||||
stopped. You can use bind mounts or named volumes to persist the database and
|
||||
uploaded_files directories as needed.
|
||||
|
||||
## Usage
|
||||
|
||||
This container should be used with an existing load balancer or reverse proxy to
|
||||
terminate TLS.
|
||||
|
||||
It is also useful for deploying to simple app platforms, such as Render or Heroku.
|
||||
5
docker-example/simple-two-port/.dockerignore
Normal file
5
docker-example/simple-two-port/.dockerignore
Normal file
@ -0,0 +1,5 @@
|
||||
.web
|
||||
.git
|
||||
__pycache__/*
|
||||
Dockerfile
|
||||
uploaded_files
|
||||
@ -1,5 +1,8 @@
|
||||
# This Dockerfile is used to deploy a simple single-container Reflex app instance.
|
||||
FROM python:3.11
|
||||
FROM python:3.13
|
||||
|
||||
RUN apt-get update && apt-get install -y redis-server && rm -rf /var/lib/apt/lists/*
|
||||
ENV REDIS_URL=redis://localhost PYTHONUNBUFFERED=1
|
||||
|
||||
# Copy local context to `/app` inside container (see .dockerignore)
|
||||
WORKDIR /app
|
||||
@ -18,4 +21,6 @@ RUN reflex export --frontend-only --no-zip
|
||||
STOPSIGNAL SIGKILL
|
||||
|
||||
# Always apply migrations before starting the backend.
|
||||
CMD [ -d alembic ] && reflex db migrate; reflex run --env prod
|
||||
CMD [ -d alembic ] && reflex db migrate; \
|
||||
redis-server --daemonize yes && \
|
||||
exec reflex run --env prod
|
||||
44
docker-example/simple-two-port/README.md
Normal file
44
docker-example/simple-two-port/README.md
Normal file
@ -0,0 +1,44 @@
|
||||
# simple-two-port
|
||||
|
||||
This docker deployment runs Reflex in prod mode, exposing two HTTP ports:
|
||||
* `3000` - node NextJS server using optimized production build
|
||||
* `8000` - python gunicorn server hosting the Reflex backend
|
||||
|
||||
The deployment also runs a local Redis server to store state for each user.
|
||||
|
||||
## Build
|
||||
|
||||
```console
|
||||
docker build -t reflex-simple-two-port .
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
```console
|
||||
docker run -p 3000:3000 -p 8000:8000 reflex-simple-two-port
|
||||
```
|
||||
|
||||
Note that this container has _no persistence_ and will lose all data when
|
||||
stopped. You can use bind mounts or named volumes to persist the database and
|
||||
uploaded_files directories as needed.
|
||||
|
||||
## Usage
|
||||
|
||||
This container should be used with an existing load balancer or reverse proxy to
|
||||
route traffic to the appropriate port inside the container.
|
||||
|
||||
For example, the following Caddyfile can be used to terminate TLS and forward
|
||||
traffic to the frontend and backend from outside the container.
|
||||
|
||||
```
|
||||
my-domain.com
|
||||
|
||||
encode gzip
|
||||
|
||||
@backend_routes path /_event/* /ping /_upload /_upload/*
|
||||
handle @backend_routes {
|
||||
reverse_proxy localhost:8000
|
||||
}
|
||||
|
||||
reverse_proxy localhost:3000
|
||||
```
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
### **✨ Performante, anpassbare Web-Apps in purem Python. Bereitstellung in Sekunden. ✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -35,7 +34,7 @@ Auf unserer [Architektur-Seite](https://reflex.dev/blog/2024-03-21-reflex-archit
|
||||
|
||||
## ⚙️ Installation
|
||||
|
||||
Öffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.8+):
|
||||
Öffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -35,7 +35,7 @@ Consulta nuestra [página de arquitectura](https://reflex.dev/blog/2024-03-21-re
|
||||
|
||||
## ⚙️ Instalación
|
||||
|
||||
Abra un terminal y ejecute (Requiere Python 3.8+):
|
||||
Abra un terminal y ejecute (Requiere Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -11,7 +11,6 @@ Pynecone की तलाश हैं? आप सही रेपो में
|
||||
### **✨ प्रदर्शनकारी, अनुकूलित वेब ऐप्स, शुद्ध Python में। सेकंडों में तैनात करें। ✨**
|
||||
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -36,7 +35,7 @@ Reflex के अंदर के कामकाज को जानने क
|
||||
|
||||
## ⚙️ इंस्टॉलेशन (Installation)
|
||||
|
||||
एक टर्मिनल खोलें और चलाएं (Python 3.8+ की आवश्यकता है):
|
||||
एक टर्मिनल खोलें और चलाएं (Python 3.9+ की आवश्यकता है):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
### **✨ App web performanti e personalizzabili in puro Python. Distribuisci in pochi secondi. ✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -23,7 +22,7 @@
|
||||
|
||||
## ⚙️ Installazione
|
||||
|
||||
Apri un terminale ed esegui (Richiede Python 3.8+):
|
||||
Apri un terminale ed esegui (Richiede Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
### **✨ 即時デプロイが可能な、Pure Python で作ったパフォーマンスと汎用性が高い Web アプリケーション ✨**
|
||||
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -38,7 +37,7 @@ Reflex がどのように動作しているかを知るには、[アーキテク
|
||||
|
||||
## ⚙️ インストール
|
||||
|
||||
ターミナルを開いて以下のコマンドを実行してください。（Python 3.8 以上が必要です。）:
|
||||
ターミナルを開いて以下のコマンドを実行してください。（Python 3.9 以上が必要です。）:
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
### **✨ 순수 Python으로 고성능 사용자 정의 웹앱을 만들어 보세요. 몇 초만에 배포 가능합니다. ✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -21,7 +20,7 @@
|
||||
---
|
||||
## ⚙️ 설치
|
||||
|
||||
터미널을 열고 실행하세요. (Python 3.8+ 필요):
|
||||
터미널을 열고 실행하세요. (Python 3.9+ 필요):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
### **✨ برنامه های تحت وب قابل تنظیم، کارآمد تماما پایتونی که در چند ثانیه مستقر(دپلوی) میشود. ✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -35,7 +34,7 @@
|
||||
|
||||
## ⚙️ Installation - نصب و راه اندازی
|
||||
|
||||
یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.8+):
|
||||
یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
---
|
||||
## ⚙️ Instalação
|
||||
|
||||
Abra um terminal e execute (Requer Python 3.8+):
|
||||
Abra um terminal e execute (Requer Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
### **✨ Saf Python'da performanslı, özelleştirilebilir web uygulamaları. Saniyeler içinde dağıtın. ✨**
|
||||
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -25,7 +24,7 @@
|
||||
|
||||
## ⚙️ Kurulum
|
||||
|
||||
Bir terminal açın ve çalıştırın (Python 3.8+ gerekir):
|
||||
Bir terminal açın ve çalıştırın (Python 3.9+ gerekir):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
267
docs/vi/README.md
Normal file
267
docs/vi/README.md
Normal file
@ -0,0 +1,267 @@
|
||||
```diff
|
||||
+ Bạn đang tìm kiếm Pynecone? Bạn đã tìm đúng. Pynecone đã được đổi tên thành Reflex. +
|
||||
```
|
||||
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
|
||||
<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
|
||||
|
||||
<hr>
|
||||
|
||||
### **✨ Ứng dụng web hiệu suất cao, tùy chỉnh bằng Python thuần. Deploy trong vài giây. ✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
|
||||
|
||||
---
|
||||
|
||||
# Reflex
|
||||
|
||||
Reflex là một thư viện để xây dựng ứng dụng web toàn bộ bằng Python thuần.
|
||||
|
||||
Các tính năng chính:
|
||||
* **Python thuần tuý** - Viết toàn bộ ứng dụng cả backend và frontend hoàn toàn bằng Python, không cần học JavaScript.
|
||||
* **Full Flexibility** - Reflex dễ dàng để bắt đầu, nhưng cũng có thể mở rộng lên các ứng dụng phức tạp.
|
||||
* **Deploy Instantly** - Sau khi xây dựng ứng dụng, bạn có thể triển khai bằng [một dòng lệnh](https://reflex.dev/docs/hosting/deploy-quick-start/) hoặc triển khai trên server của riêng bạn.
|
||||
|
||||
Đọc [bài viết về kiến trúc hệ thống](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) để hiểu rõ các hoạt động của Reflex.
|
||||
|
||||
## ⚙️ Cài đặt
|
||||
|
||||
Mở cửa sổ lệnh và chạy (Yêu cầu Python phiên bản 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
```
|
||||
|
||||
## 🥳 Tạo ứng dụng đầu tiên
|
||||
|
||||
Cài đặt `reflex` cũng như cài đặt công cụ dòng lệnh `reflex`.
|
||||
|
||||
Kiểm tra việc cài đặt đã thành công hay chưa bằng cách tạo mới một ứng dụng. (Thay `my_app_name` bằng tên ứng dụng của bạn):
|
||||
|
||||
```bash
|
||||
mkdir my_app_name
|
||||
cd my_app_name
|
||||
reflex init
|
||||
```
|
||||
|
||||
Lệnh này tạo ra một ứng dụng mẫu trong một thư mục mới.
|
||||
|
||||
Bạn có thể chạy ứng dụng ở chế độ phát triển.
|
||||
|
||||
```bash
|
||||
reflex run
|
||||
```
|
||||
|
||||
Bạn có thể xem ứng dụng của bạn ở địa chỉ http://localhost:3000.
|
||||
|
||||
Bạn có thể thay đổi mã nguồn ở `my_app_name/my_app_name.py`. Reflex nhanh chóng làm mới và bạn có thể thấy thay đổi trên ứng dụng của bạn ngay lập tức khi bạn lưu file.
|
||||
|
||||
|
||||
## 🫧 Ứng dụng ví dụ
|
||||
|
||||
Bắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Để cho đơn giản, chúng ta sẽ sử dụng [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), nhưng bạn có thể sử dụng model của chính bạn được triển khai trên local.
|
||||
|
||||
|
||||
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Đây là toàn bộ đoạn mã để xây dựng ứng dụng trên. Nó được viết hoàn toàn trong một file Python!
|
||||
|
||||
|
||||
|
||||
```python
|
||||
import reflex as rx
|
||||
import openai
|
||||
|
||||
openai_client = openai.OpenAI()
|
||||
|
||||
|
||||
class State(rx.State):
|
||||
"""The app state."""
|
||||
|
||||
prompt = ""
|
||||
image_url = ""
|
||||
processing = False
|
||||
complete = False
|
||||
|
||||
def get_image(self):
|
||||
"""Get the image from the prompt."""
|
||||
if self.prompt == "":
|
||||
return rx.window_alert("Prompt Empty")
|
||||
|
||||
self.processing, self.complete = True, False
|
||||
yield
|
||||
response = openai_client.images.generate(
|
||||
prompt=self.prompt, n=1, size="1024x1024"
|
||||
)
|
||||
self.image_url = response.data[0].url
|
||||
self.processing, self.complete = False, True
|
||||
|
||||
|
||||
def index():
|
||||
return rx.center(
|
||||
rx.vstack(
|
||||
rx.heading("DALL-E", font_size="1.5em"),
|
||||
rx.input(
|
||||
placeholder="Enter a prompt..",
|
||||
on_blur=State.set_prompt,
|
||||
width="25em",
|
||||
),
|
||||
rx.button(
|
||||
"Generate Image",
|
||||
on_click=State.get_image,
|
||||
width="25em",
|
||||
loading=State.processing
|
||||
),
|
||||
rx.cond(
|
||||
State.complete,
|
||||
rx.image(src=State.image_url, width="20em"),
|
||||
),
|
||||
align="center",
|
||||
),
|
||||
width="100%",
|
||||
height="100vh",
|
||||
)
|
||||
|
||||
# Add state and page to the app.
|
||||
app = rx.App()
|
||||
app.add_page(index, title="Reflex:DALL-E")
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Hãy phân tích chi tiết.
|
||||
|
||||
<div align="center">
|
||||
<img src="../images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
|
||||
</div>
|
||||
|
||||
|
||||
### **Reflex UI**
|
||||
|
||||
Bắt đầu với giao diện chính.
|
||||
|
||||
```python
|
||||
def index():
|
||||
return rx.center(
|
||||
...
|
||||
)
|
||||
```
|
||||
|
||||
Hàm `index` định nghĩa phần giao diện chính của ứng dụng.
|
||||
|
||||
Chúng tôi sử dụng các component (thành phần) khác nhau như `center`, `vstack`, `input` và `button` để xây dựng giao diện phía trước.
|
||||
Các component có thể được lồng vào nhau để tạo ra các bố cục phức tạp. Và bạn cũng có thể sử dụng từ khoá `args` để tận dụng đầy đủ sức mạnh của CSS.
|
||||
|
||||
Reflex có đến hơn [60 component được xây dựng sẵn](https://reflex.dev/docs/library) để giúp bạn bắt đầu. Chúng ta có thể tạo ra một component mới khá dễ dàng, thao khảo: [xây dựng component của riêng bạn](https://reflex.dev/docs/wrapping-react/overview/).
|
||||
|
||||
### **State**
|
||||
|
||||
Reflex biểu diễn giao diện bằng các hàm của state (trạng thái).
|
||||
|
||||
```python
|
||||
class State(rx.State):
|
||||
"""The app state."""
|
||||
prompt = ""
|
||||
image_url = ""
|
||||
processing = False
|
||||
complete = False
|
||||
|
||||
```
|
||||
|
||||
Một state định nghĩa các biến (được gọi là vars) có thể thay đổi trong một ứng dụng và cho phép các hàm có thể thay đổi chúng.
|
||||
|
||||
Tại đây state được cấu thành từ một `prompt` và `image_url`.
|
||||
Có cũng những biến boolean `processing` và `complete`
|
||||
để chỉ ra khi nào tắt nút (trong quá trình tạo hình ảnh)
|
||||
và khi nào hiển thị hình ảnh kết quả.
|
||||
|
||||
### **Event Handlers**
|
||||
|
||||
```python
|
||||
def get_image(self):
|
||||
"""Get the image from the prompt."""
|
||||
if self.prompt == "":
|
||||
return rx.window_alert("Prompt Empty")
|
||||
|
||||
self.processing, self.complete = True, False
|
||||
yield
|
||||
response = openai_client.images.generate(
|
||||
prompt=self.prompt, n=1, size="1024x1024"
|
||||
)
|
||||
self.image_url = response.data[0].url
|
||||
self.processing, self.complete = False, True
|
||||
```
|
||||
|
||||
Với các state, chúng ta định nghĩa các hàm có thể thay đổi state vars được gọi là event handlers. Event handler là cách chúng ta có thể thay đổi state trong Reflex. Chúng có thể là phản hồi khi người dùng thao tác, chằng hạn khi nhấn vào nút hoặc khi đang nhập trong text box. Các hành động này được gọi là event.
|
||||
|
||||
Ứng dụng DALL·E. của chúng ta có một event handler, `get_image` để lấy hình ảnh từ OpenAI API. Sử dụng từ khoá `yield` in ở giữa event handler để cập nhật giao diện. Hoặc giao diện có thể cập nhật ở cuối event handler.
|
||||
|
||||
### **Routing**
|
||||
|
||||
Cuối cùng, chúng ta định nghĩa một ứng dụng.
|
||||
|
||||
```python
|
||||
app = rx.App()
|
||||
```
|
||||
|
||||
Chúng ta thêm một trang ở đầu ứng dụng bằng index component. Chúng ta cũng thêm tiêu đề của ứng dụng để hiển thị lên trình duyệt.
|
||||
|
||||
|
||||
```python
|
||||
app.add_page(index, title="DALL-E")
|
||||
```
|
||||
|
||||
Bạn có thể tạo một ứng dụng nhiều trang bằng cách thêm trang.
|
||||
|
||||
## 📑 Tài liệu
|
||||
|
||||
<div align="center">
|
||||
|
||||
📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Component Library](https://reflex.dev/docs/library) | 🖼️ [Gallery](https://reflex.dev/docs/gallery) | 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## ✅ Status
|
||||
|
||||
Reflex phát hành vào tháng 12/2022 với tên là Pynecone.
|
||||
|
||||
Đến tháng 02/2024, chúng tôi tạo ra dịch vụ dưới phiên bản alpha! Trong thời gian này mọi người có thể triển khai ứng dụng hoàn toàn miễn phí. Xem [roadmap](https://github.com/reflex-dev/reflex/issues/2727) để biết thêm chi tiết.
|
||||
|
||||
Reflex ra phiên bản mới với các tính năng mới hàng tuần! Hãy :star: star và :eyes: watch repo này để thấy các cập nhật mới nhất.
|
||||
|
||||
## Contributing
|
||||
|
||||
Chúng tôi chào đón mọi đóng góp dù lớn hay nhỏ. Dưới đây là các cách để bắt đầu với cộng đồng Reflex.
|
||||
|
||||
- **Discord**: [Discord](https://discord.gg/T5WSbC2YtQ) của chúng tôi là nơi tốt nhất để nhờ sự giúp đỡ và thảo luận các bạn có thể đóng góp.
|
||||
- **GitHub Discussions**: Là cách tốt nhất để thảo luận về các tính năng mà bạn có thể đóng góp hoặc những điều bạn chưa rõ.
|
||||
- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) là nơi tốt nhất để thông báo. Ngoài ra bạn có thể sửa chữa các vấn đề bằng cách tạo PR.
|
||||
|
||||
Chúng tôi luôn sẵn sàng tìm kiếm các contributor, bất kể kinh nghiệm. Để tham gia đóng góp, xin mời xem
|
||||
[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
|
||||
|
||||
|
||||
## Xin cảm ơn các Contributors:
|
||||
<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
|
||||
</a>
|
||||
|
||||
## License
|
||||
|
||||
Reflex là mã nguồn mở và sử dụng giấy phép [Apache License 2.0](LICENSE).
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
### **✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.✨**
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -35,7 +34,7 @@ Reflex 是一个使用纯Python构建全栈web应用的库。
|
||||
|
||||
## ⚙️ 安装
|
||||
|
||||
打开一个终端并且运行(要求Python3.8+):
|
||||
打开一个终端并且运行(要求Python3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
**✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。✨**
|
||||
|
||||
[](https://badge.fury.io/py/reflex)
|
||||
|
||||
|
||||
[](https://reflex.dev/docs/getting-started/introduction)
|
||||
[](https://discord.gg/T5WSbC2YtQ)
|
||||
@ -37,7 +36,7 @@ Reflex 是一個可以用純 Python 構建全端網頁應用程式的函式庫
|
||||
|
||||
## ⚙️ 安裝
|
||||
|
||||
開啟一個終端機並且執行 (需要 Python 3.8+):
|
||||
開啟一個終端機並且執行 (需要 Python 3.9+):
|
||||
|
||||
```bash
|
||||
pip install reflex
|
||||
|
||||
@ -1,107 +0,0 @@
|
||||
"""Test that per-component state scaffold works and operates independently."""
|
||||
|
||||
from typing import Generator
|
||||
|
||||
import pytest
|
||||
from selenium.webdriver.common.by import By
|
||||
|
||||
from reflex.testing import AppHarness
|
||||
|
||||
from . import utils
|
||||
|
||||
|
||||
def ComponentStateApp():
|
||||
"""App using per component state."""
|
||||
import reflex as rx
|
||||
|
||||
class MultiCounter(rx.ComponentState):
|
||||
count: int = 0
|
||||
|
||||
def increment(self):
|
||||
self.count += 1
|
||||
|
||||
@classmethod
|
||||
def get_component(cls, *children, **props):
|
||||
return rx.vstack(
|
||||
*children,
|
||||
rx.heading(cls.count, id=f"count-{props.get('id', 'default')}"),
|
||||
rx.button(
|
||||
"Increment",
|
||||
on_click=cls.increment,
|
||||
id=f"button-{props.get('id', 'default')}",
|
||||
),
|
||||
**props,
|
||||
)
|
||||
|
||||
app = rx.App(state=rx.State) # noqa
|
||||
|
||||
@rx.page()
|
||||
def index():
|
||||
mc_a = MultiCounter.create(id="a")
|
||||
mc_b = MultiCounter.create(id="b")
|
||||
assert mc_a.State != mc_b.State
|
||||
return rx.vstack(
|
||||
mc_a,
|
||||
mc_b,
|
||||
rx.button(
|
||||
"Inc A",
|
||||
on_click=mc_a.State.increment, # type: ignore
|
||||
id="inc-a",
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def component_state_app(tmp_path) -> Generator[AppHarness, None, None]:
|
||||
"""Start ComponentStateApp app at tmp_path via AppHarness.
|
||||
|
||||
Args:
|
||||
tmp_path: pytest tmp_path fixture
|
||||
|
||||
Yields:
|
||||
running AppHarness instance
|
||||
"""
|
||||
with AppHarness.create(
|
||||
root=tmp_path,
|
||||
app_source=ComponentStateApp, # type: ignore
|
||||
) as harness:
|
||||
yield harness
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_component_state_app(component_state_app: AppHarness):
|
||||
"""Increment counters independently.
|
||||
|
||||
Args:
|
||||
component_state_app: harness for ComponentStateApp app
|
||||
"""
|
||||
assert component_state_app.app_instance is not None, "app is not running"
|
||||
driver = component_state_app.frontend()
|
||||
|
||||
ss = utils.SessionStorage(driver)
|
||||
assert AppHarness._poll_for(lambda: ss.get("token") is not None), "token not found"
|
||||
|
||||
count_a = driver.find_element(By.ID, "count-a")
|
||||
count_b = driver.find_element(By.ID, "count-b")
|
||||
button_a = driver.find_element(By.ID, "button-a")
|
||||
button_b = driver.find_element(By.ID, "button-b")
|
||||
button_inc_a = driver.find_element(By.ID, "inc-a")
|
||||
|
||||
assert count_a.text == "0"
|
||||
|
||||
button_a.click()
|
||||
assert component_state_app.poll_for_content(count_a, exp_not_equal="0") == "1"
|
||||
|
||||
button_a.click()
|
||||
assert component_state_app.poll_for_content(count_a, exp_not_equal="1") == "2"
|
||||
|
||||
button_inc_a.click()
|
||||
assert component_state_app.poll_for_content(count_a, exp_not_equal="2") == "3"
|
||||
|
||||
assert count_b.text == "0"
|
||||
|
||||
button_b.click()
|
||||
assert component_state_app.poll_for_content(count_b, exp_not_equal="0") == "1"
|
||||
|
||||
button_b.click()
|
||||
assert component_state_app.poll_for_content(count_b, exp_not_equal="1") == "2"
|
||||
@ -1,171 +0,0 @@
|
||||
"""Integration tests for table and related components."""
|
||||
|
||||
from typing import Generator
|
||||
|
||||
import pytest
|
||||
from selenium.webdriver.common.by import By
|
||||
|
||||
from reflex.testing import AppHarness
|
||||
|
||||
|
||||
def Table():
|
||||
"""App using table component."""
|
||||
from typing import List
|
||||
|
||||
import reflex as rx
|
||||
|
||||
class TableState(rx.State):
|
||||
rows: List[List[str]] = [
|
||||
["John", "30", "New York"],
|
||||
["Jane", "31", "San Fransisco"],
|
||||
["Joe", "32", "Los Angeles"],
|
||||
]
|
||||
|
||||
headers: List[str] = ["Name", "Age", "Location"]
|
||||
|
||||
footers: List[str] = ["footer1", "footer2", "footer3"]
|
||||
|
||||
caption: str = "random caption"
|
||||
|
||||
app = rx.App(state=rx.State)
|
||||
|
||||
@app.add_page
|
||||
def index():
|
||||
return rx.center(
|
||||
rx.chakra.input(
|
||||
id="token",
|
||||
value=TableState.router.session.client_token,
|
||||
is_read_only=True,
|
||||
),
|
||||
rx.chakra.table_container(
|
||||
rx.chakra.table(
|
||||
headers=TableState.headers,
|
||||
rows=TableState.rows,
|
||||
footers=TableState.footers,
|
||||
caption=TableState.caption,
|
||||
variant="striped",
|
||||
color_scheme="blue",
|
||||
width="100%",
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
@app.add_page
|
||||
def another():
|
||||
return rx.center(
|
||||
rx.chakra.table_container(
|
||||
rx.chakra.table( # type: ignore
|
||||
rx.chakra.thead( # type: ignore
|
||||
rx.chakra.tr( # type: ignore
|
||||
rx.chakra.th("Name"),
|
||||
rx.chakra.th("Age"),
|
||||
rx.chakra.th("Location"),
|
||||
)
|
||||
),
|
||||
rx.chakra.tbody( # type: ignore
|
||||
rx.chakra.tr( # type: ignore
|
||||
rx.chakra.td("John"),
|
||||
rx.chakra.td(30),
|
||||
rx.chakra.td("New York"),
|
||||
),
|
||||
rx.chakra.tr( # type: ignore
|
||||
rx.chakra.td("Jane"),
|
||||
rx.chakra.td(31),
|
||||
rx.chakra.td("San Francisco"),
|
||||
),
|
||||
rx.chakra.tr( # type: ignore
|
||||
rx.chakra.td("Joe"),
|
||||
rx.chakra.td(32),
|
||||
rx.chakra.td("Los Angeles"),
|
||||
),
|
||||
),
|
||||
rx.chakra.tfoot( # type: ignore
|
||||
rx.chakra.tr(
|
||||
rx.chakra.td("footer1"),
|
||||
rx.chakra.td("footer2"),
|
||||
rx.chakra.td("footer3"),
|
||||
) # type: ignore
|
||||
),
|
||||
rx.chakra.table_caption("random caption"),
|
||||
variant="striped",
|
||||
color_scheme="teal",
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def table(tmp_path_factory) -> Generator[AppHarness, None, None]:
|
||||
"""Start Table app at tmp_path via AppHarness.
|
||||
|
||||
Args:
|
||||
tmp_path_factory: pytest tmp_path_factory fixture
|
||||
|
||||
Yields:
|
||||
running AppHarness instance
|
||||
|
||||
"""
|
||||
with AppHarness.create(
|
||||
root=tmp_path_factory.mktemp("table"),
|
||||
app_source=Table, # type: ignore
|
||||
) as harness:
|
||||
assert harness.app_instance is not None, "app is not running"
|
||||
yield harness
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def driver(table: AppHarness):
|
||||
"""GEt an instance of the browser open to the table app.
|
||||
|
||||
Args:
|
||||
table: harness for Table app
|
||||
|
||||
Yields:
|
||||
WebDriver instance.
|
||||
"""
|
||||
driver = table.frontend()
|
||||
try:
|
||||
token_input = driver.find_element(By.ID, "token")
|
||||
assert token_input
|
||||
# wait for the backend connection to send the token
|
||||
token = table.poll_for_value(token_input)
|
||||
assert token is not None
|
||||
|
||||
yield driver
|
||||
finally:
|
||||
driver.quit()
|
||||
|
||||
|
||||
@pytest.mark.parametrize("route", ["", "/another"])
|
||||
def test_table(driver, table: AppHarness, route):
|
||||
"""Test that a table component is rendered properly.
|
||||
|
||||
Args:
|
||||
driver: Selenium WebDriver open to the app
|
||||
table: Harness for Table app
|
||||
route: Page route or path.
|
||||
"""
|
||||
driver.get(f"{table.frontend_url}/{route}")
|
||||
assert table.app_instance is not None, "app is not running"
|
||||
|
||||
thead = driver.find_element(By.TAG_NAME, "thead")
|
||||
# poll till page is fully loaded.
|
||||
table.poll_for_content(element=thead)
|
||||
# check headers
|
||||
assert thead.find_element(By.TAG_NAME, "tr").text == "NAME AGE LOCATION"
|
||||
# check first row value
|
||||
assert (
|
||||
driver.find_element(By.TAG_NAME, "tbody")
|
||||
.find_elements(By.TAG_NAME, "tr")[0]
|
||||
.text
|
||||
== "John 30 New York"
|
||||
)
|
||||
# check footer
|
||||
assert (
|
||||
driver.find_element(By.TAG_NAME, "tfoot")
|
||||
.find_element(By.TAG_NAME, "tr")
|
||||
.text.lower()
|
||||
== "footer1 footer2 footer3"
|
||||
)
|
||||
# check caption
|
||||
assert driver.find_element(By.TAG_NAME, "caption").text == "random caption"
|
||||
@ -1,68 +0,0 @@
|
||||
"""Integration tests for all urls in Reflex."""
|
||||
|
||||
import os
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
import pytest
|
||||
import requests
|
||||
|
||||
|
||||
def check_urls(repo_dir):
|
||||
"""Check that all URLs in the repo are valid and secure.
|
||||
|
||||
Args:
|
||||
repo_dir: The directory of the repo.
|
||||
|
||||
Returns:
|
||||
A list of errors.
|
||||
"""
|
||||
url_pattern = re.compile(r'http[s]?://reflex\.dev[^\s")]*')
|
||||
errors = []
|
||||
|
||||
for root, _dirs, files in os.walk(repo_dir):
|
||||
if "__pycache__" in root:
|
||||
continue
|
||||
|
||||
for file_name in files:
|
||||
if not file_name.endswith(".py") and not file_name.endswith(".md"):
|
||||
continue
|
||||
|
||||
file_path = os.path.join(root, file_name)
|
||||
try:
|
||||
with open(file_path, "r", encoding="utf-8", errors="ignore") as file:
|
||||
for line in file:
|
||||
urls = url_pattern.findall(line)
|
||||
for url in set(urls):
|
||||
if url.startswith("http://"):
|
||||
errors.append(
|
||||
f"Found insecure HTTP URL: {url} in {file_path}"
|
||||
)
|
||||
url = url.strip('"\n')
|
||||
try:
|
||||
response = requests.head(
|
||||
url, allow_redirects=True, timeout=5
|
||||
)
|
||||
response.raise_for_status()
|
||||
except requests.RequestException as e:
|
||||
errors.append(
|
||||
f"Error accessing URL: {url} in {file_path} | Error: {e}, , Check your path ends with a /"
|
||||
)
|
||||
except Exception as e:
|
||||
errors.append(f"Error reading file: {file_path} | Error: {e}")
|
||||
|
||||
return errors
|
||||
|
||||
|
||||
@pytest.mark.parametrize(
|
||||
"repo_dir",
|
||||
[Path(__file__).resolve().parent.parent / "reflex"],
|
||||
)
|
||||
def test_find_and_check_urls(repo_dir):
|
||||
"""Test that all URLs in the repo are valid and secure.
|
||||
|
||||
Args:
|
||||
repo_dir: The directory of the repo.
|
||||
"""
|
||||
errors = check_urls(repo_dir)
|
||||
assert not errors, "\n".join(errors)
|
||||
2874
poetry.lock
generated
2874
poetry.lock
generated
File diff suppressed because it is too large
Load Diff
@ -1,35 +1,27 @@
|
||||
[tool.poetry]
|
||||
name = "reflex"
|
||||
version = "0.5.9"
|
||||
version = "0.6.8dev1"
|
||||
description = "Web apps in pure Python."
|
||||
license = "Apache-2.0"
|
||||
authors = [
|
||||
"Nikhil Rao <nikhil@reflex.dev>",
|
||||
"Alek Petuskey <alek@reflex.dev>",
|
||||
"Masen Furer <masen@reflex.dev>",
|
||||
"Elijah Ahianyo <elijah@reflex.dev>",
|
||||
"Thomas Brandého <thomas@reflex.dev>",
|
||||
"Nikhil Rao <nikhil@reflex.dev>",
|
||||
"Alek Petuskey <alek@reflex.dev>",
|
||||
"Masen Furer <masen@reflex.dev>",
|
||||
"Elijah Ahianyo <elijah@reflex.dev>",
|
||||
"Thomas Brandého <thomas@reflex.dev>",
|
||||
]
|
||||
readme = "README.md"
|
||||
homepage = "https://reflex.dev"
|
||||
repository = "https://github.com/reflex-dev/reflex"
|
||||
documentation = "https://reflex.dev/docs/getting-started/introduction"
|
||||
keywords = [
|
||||
"web",
|
||||
"framework",
|
||||
]
|
||||
classifiers = [
|
||||
"Development Status :: 4 - Beta",
|
||||
]
|
||||
packages = [
|
||||
{include = "reflex"}
|
||||
]
|
||||
keywords = ["web", "framework"]
|
||||
classifiers = ["Development Status :: 4 - Beta"]
|
||||
packages = [{ include = "reflex" }]
|
||||
|
||||
[tool.poetry.dependencies]
|
||||
python = "^3.8"
|
||||
dill = ">=0.3.8,<0.4"
|
||||
fastapi = ">=0.96.0,<0.111.0"
|
||||
gunicorn = ">=20.1.0,<23.0"
|
||||
python = "^3.9"
|
||||
fastapi = ">=0.96.0,!=0.111.0,!=0.111.1"
|
||||
gunicorn = ">=20.1.0,<24.0"
|
||||
jinja2 = ">=3.1.2,<4.0"
|
||||
psutil = ">=5.9.4,<7.0"
|
||||
pydantic = ">=1.10.2,<3.0"
|
||||
@ -40,49 +32,47 @@ rich = ">=13.0.0,<14.0"
|
||||
sqlmodel = ">=0.0.14,<0.1"
|
||||
typer = ">=0.4.2,<1.0"
|
||||
uvicorn = ">=0.20.0"
|
||||
watchdog = ">=2.3.1,<5.0"
|
||||
watchfiles = ">=0.19.0,<1.0"
|
||||
starlette-admin = ">=0.11.0,<1.0"
|
||||
alembic = ">=1.11.1,<2.0"
|
||||
platformdirs = ">=3.10.0,<5.0"
|
||||
distro = {version = ">=1.8.0,<2.0", platform = "linux"}
|
||||
distro = { version = ">=1.8.0,<2.0", platform = "linux" }
|
||||
python-engineio = "!=4.6.0"
|
||||
wrapt = [
|
||||
{version = ">=1.14.0,<2.0", python = ">=3.11"},
|
||||
{version = ">=1.11.0,<2.0", python = "<3.11"},
|
||||
{ version = ">=1.14.0,<2.0", python = ">=3.11" },
|
||||
{ version = ">=1.11.0,<2.0", python = "<3.11" },
|
||||
]
|
||||
packaging = ">=23.1,<25.0"
|
||||
reflex-hosting-cli = ">=0.1.2,<2.0"
|
||||
reflex-hosting-cli = ">=0.1.29,<2.0"
|
||||
charset-normalizer = ">=3.3.2,<4.0"
|
||||
wheel = ">=0.42.0,<1.0"
|
||||
build = ">=1.0.3,<2.0"
|
||||
setuptools = ">=69.1.1,<70.2"
|
||||
setuptools = ">=75.0"
|
||||
httpx = ">=0.25.1,<1.0"
|
||||
twine = ">=4.0.0,<6.0"
|
||||
twine = ">=4.0.0,<7.0"
|
||||
tomlkit = ">=0.12.4,<1.0"
|
||||
lazy_loader = ">=0.4"
|
||||
reflex-chakra = ">=0.6.0"
|
||||
typing_extensions = ">=4.6.0"
|
||||
|
||||
[tool.poetry.group.dev.dependencies]
|
||||
pytest = ">=7.1.2,<8.0"
|
||||
pytest = ">=7.1.2,<9.0"
|
||||
pytest-mock = ">=3.10.0,<4.0"
|
||||
pyright = ">=1.1.229,<1.1.335"
|
||||
darglint = ">=1.8.1,<2.0"
|
||||
dill = ">=0.3.8"
|
||||
toml = ">=0.10.2,<1.0"
|
||||
pytest-asyncio = ">=0.20.1,<0.22.0" # https://github.com/pytest-dev/pytest-asyncio/issues/706
|
||||
pytest-cov = ">=4.0.0,<5.0"
|
||||
ruff = "^0.4.9"
|
||||
pandas = [
|
||||
{version = ">=2.1.1,<3.0", python = ">=3.9,<3.13"},
|
||||
{version = ">=1.5.3,<2.0", python = ">=3.8,<3.9"},
|
||||
]
|
||||
pillow = [
|
||||
{version = ">=10.0.0,<11.0", python = ">=3.8,<4.0"}
|
||||
]
|
||||
pytest-asyncio = ">=0.24.0"
|
||||
pytest-cov = ">=4.0.0,<7.0"
|
||||
ruff = "0.8.2"
|
||||
pandas = ">=2.1.1,<3.0"
|
||||
pillow = ">=10.0.0,<12.0"
|
||||
plotly = ">=5.13.0,<6.0"
|
||||
asynctest = ">=0.13.0,<1.0"
|
||||
pre-commit = {version = ">=3.2.1", python = ">=3.8,<4.0"}
|
||||
pre-commit = ">=3.2.1"
|
||||
selenium = ">=4.11.0,<5.0"
|
||||
pytest-benchmark = ">=4.0.0,<5.0"
|
||||
pytest-benchmark = ">=4.0.0,<6.0"
|
||||
playwright = ">=1.46.0"
|
||||
pytest-playwright = ">=0.5.1"
|
||||
|
||||
[tool.poetry.scripts]
|
||||
reflex = "reflex.reflex:cli"
|
||||
@ -94,14 +84,24 @@ build-backend = "poetry.core.masonry.api"
|
||||
[tool.pyright]
|
||||
|
||||
[tool.ruff]
|
||||
target-version = "py38"
|
||||
lint.select = ["B", "D", "E", "F", "I", "SIM", "W"]
|
||||
lint.ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", "F403", "F405", "F541"]
|
||||
target-version = "py39"
|
||||
output-format = "concise"
|
||||
lint.isort.split-on-trailing-comma = false
|
||||
lint.select = ["B", "C4", "D", "E", "ERA", "F", "FURB", "I", "PERF", "PTH", "RUF", "SIM", "W"]
|
||||
lint.ignore = ["B008", "D205", "E501", "F403", "SIM115", "RUF006", "RUF012"]
|
||||
lint.pydocstyle.convention = "google"
|
||||
|
||||
[tool.ruff.lint.per-file-ignores]
|
||||
"__init__.py" = ["F401"]
|
||||
"tests/*.py" = ["D100", "D103", "D104", "B018"]
|
||||
"tests/*.py" = ["D100", "D103", "D104", "B018", "PERF"]
|
||||
"reflex/.templates/*.py" = ["D100", "D103", "D104"]
|
||||
"*.pyi" = ["D301", "D415", "D417", "D418", "E742"]
|
||||
"*/blank.py" = ["I001"]
|
||||
|
||||
[tool.pytest.ini_options]
|
||||
asyncio_default_fixture_loop_scope = "function"
|
||||
asyncio_mode = "auto"
|
||||
|
||||
[tool.codespell]
|
||||
skip = "docs/*,*.html,examples/*, *.pyi"
|
||||
ignore-words-list = "te, TreeE"
|
||||
4
reflex/.templates/apps/demo/.gitignore
vendored
4
reflex/.templates/apps/demo/.gitignore
vendored
@ -1,4 +0,0 @@
|
||||
*.db
|
||||
*.py[cod]
|
||||
.web
|
||||
__pycache__/
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,10 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Github" clip-path="url(#clip0_469_1929)">
|
||||
<path id="Vector" d="M8.0004 0.587524C3.80139 0.587524 0.400391 3.98851 0.400391 8.1875C0.400391 11.5505 2.57589 14.391 5.59689 15.398C5.97689 15.4645 6.11939 15.2365 6.11939 15.037C6.11939 14.8565 6.10989 14.258 6.10989 13.6215C4.20039 13.973 3.70639 13.156 3.55439 12.7285C3.46889 12.51 3.09839 11.8355 2.77539 11.655C2.50939 11.5125 2.12939 11.161 2.76589 11.1515C3.36439 11.142 3.79189 11.7025 3.93439 11.9305C4.61839 13.08 5.71089 12.757 6.14789 12.5575C6.21439 12.0635 6.41388 11.731 6.6324 11.541C4.94139 11.351 3.17439 10.6955 3.17439 7.7885C3.17439 6.962 3.46889 6.27801 3.95339 5.74601C3.87739 5.55601 3.61139 4.77701 4.02939 3.73201C4.02939 3.73201 4.66589 3.53251 6.11939 4.51101C6.7274 4.34001 7.3734 4.25451 8.0194 4.25451C8.6654 4.25451 9.3114 4.34001 9.9194 4.51101C11.3729 3.52301 12.0094 3.73201 12.0094 3.73201C12.4274 4.77701 12.1614 5.55601 12.0854 5.74601C12.5699 6.27801 12.8644 6.9525 12.8644 7.7885C12.8644 10.705 11.0879 11.351 9.3969 11.541C9.6724 11.7785 9.9099 12.2345 9.9099 12.947C9.9099 13.9635 9.9004 14.7805 9.9004 15.037C9.9004 15.2365 10.0429 15.474 10.4229 15.398C13.5165 14.3536 15.5996 11.4527 15.6004 8.1875C15.6004 3.98851 12.1994 0.587524 8.0004 0.587524Z" fill="#494369"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_469_1929">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,37 +0,0 @@
|
||||
<svg width="67" height="14" viewBox="0 0 67 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="67" height="14" fill="#1E1E1E"/>
|
||||
<g id="Nav Template > Initial" clip-path="url(#clip0_0_1)">
|
||||
<rect width="1440" height="1024" transform="translate(-16 -17)" fill="white"/>
|
||||
<g id="Sidebar">
|
||||
<g clip-path="url(#clip1_0_1)">
|
||||
<path d="M-16 -17H264V1007H-16V-17Z" fill="white"/>
|
||||
<g id="Header">
|
||||
<path d="M-16 -17H264V31H-16V-17Z" fill="white"/>
|
||||
<g id="Button">
|
||||
<rect x="-4" y="-3" width="74.316" height="20" rx="6" fill="white"/>
|
||||
<g id="Logo">
|
||||
<g id="Reflex">
|
||||
<path d="M0 13.6316V0.368408H10.6106V5.67369H7.95792V3.02105H2.65264V5.67369H7.95792V8.32633H2.65264V13.6316H0ZM7.95792 13.6316V8.32633H10.6106V13.6316H7.95792Z" fill="#110F1F"/>
|
||||
<path d="M13.2632 13.6316V0.368408H21.2211V3.02105H15.9158V5.67369H21.2211V8.32633H15.9158V10.979H21.2211V13.6316H13.2632Z" fill="#110F1F"/>
|
||||
<path d="M23.8738 13.6316V0.368408H31.8317V3.02105H26.5264V5.67369H31.8317V8.32633H26.5264V13.6316H23.8738Z" fill="#110F1F"/>
|
||||
<path d="M34.4843 13.6316V0.368408H37.137V10.979H42.4422V13.6316H34.4843Z" fill="#110F1F"/>
|
||||
<path d="M45.0949 13.6316V0.368408H53.0528V3.02105H47.7475V5.67369H53.0528V8.32633H47.7475V10.979H53.0528V13.6316H45.0949Z" fill="#110F1F"/>
|
||||
<path d="M55.7054 5.67369V0.368408H58.3581V5.67369H55.7054ZM63.6634 5.67369V0.368408H66.316V5.67369H63.6634ZM58.3581 8.32633V5.67369H63.6634V8.32633H58.3581ZM55.7054 13.6316V8.32633H58.3581V13.6316H55.7054ZM63.6634 13.6316V8.32633H66.316V13.6316H63.6634Z" fill="#110F1F"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M264 30.5H-16V31.5H264V30.5Z" fill="#F4F3F6"/>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M263.5 -17V1007H264.5V-17H263.5Z" fill="#F4F3F6"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_0_1">
|
||||
<rect width="1440" height="1024" fill="white" transform="translate(-16 -17)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_0_1">
|
||||
<path d="M-16 -17H264V1007H-16V-17Z" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@ -1,68 +0,0 @@
|
||||
<svg width="80" height="78" viewBox="0 0 80 78" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ddddi_449_2821)">
|
||||
<path d="M13 11C13 6.58172 16.5817 3 21 3H59C63.4183 3 67 6.58172 67 11V49C67 52.3137 64.3137 55 61 55H19C15.6863 55 13 52.3137 13 49V11Z" fill="url(#paint0_radial_449_2821)"/>
|
||||
<path d="M13 11C13 6.58172 16.5817 3 21 3H59C63.4183 3 67 6.58172 67 11V49C67 52.3137 64.3137 55 61 55H19C15.6863 55 13 52.3137 13 49V11Z" fill="url(#paint1_radial_449_2821)"/>
|
||||
<g filter="url(#filter1_i_449_2821)">
|
||||
<path d="M31 37.5C30.4477 37.5 30 37.0523 30 36.5V13.5001C30 12.9478 30.4477 12.5001 31 12.5001H49C49.5523 12.5001 50 12.9478 50 13.5001V21.5001C50 22.0524 49.5523 22.5001 49 22.5001H45V18.5001C45 17.9478 44.5523 17.5001 44 17.5001H36C35.4477 17.5001 35 17.9478 35 18.5001V21.5001C35 22.0524 35.4477 22.5001 36 22.5001H45V27.5001H36C35.4477 27.5001 35 27.9478 35 28.5001V36.5C35 37.0523 34.5523 37.5 34 37.5H31ZM46 37.5C45.4477 37.5 45 37.0523 45 36.5V27.5001H49C49.5523 27.5001 50 27.9478 50 28.5001V36.5C50 37.0523 49.5523 37.5 49 37.5H46Z" fill="url(#paint2_radial_449_2821)"/>
|
||||
</g>
|
||||
<path d="M13 11C13 6.58172 16.5817 3 21 3H59C63.4183 3 67 6.58172 67 11V49C67 52.3137 64.3137 55 61 55H19C15.6863 55 13 52.3137 13 49V11Z" stroke="#20117E" stroke-opacity="0.04"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ddddi_449_2821" x="0.5" y="0.5" width="79" height="77" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_449_2821"/>
|
||||
<feOffset dy="10"/>
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0705882 0 0 0 0 0.231373 0 0 0 0.06 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_449_2821"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect2_dropShadow_449_2821"/>
|
||||
<feOffset dy="12"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0705882 0 0 0 0 0.231373 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_449_2821" result="effect2_dropShadow_449_2821"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_449_2821"/>
|
||||
<feOffset dy="10"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12549 0 0 0 0 0.0666667 0 0 0 0 0.494118 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="effect2_dropShadow_449_2821" result="effect3_dropShadow_449_2821"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect4_dropShadow_449_2821"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12549 0 0 0 0 0.0666667 0 0 0 0 0.494118 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="effect3_dropShadow_449_2821" result="effect4_dropShadow_449_2821"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_449_2821" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.607843 0 0 0 0 0.972549 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect5_innerShadow_449_2821"/>
|
||||
</filter>
|
||||
<filter id="filter1_i_449_2821" x="30" y="12.5001" width="20" height="26.9999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="1.5"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12549 0 0 0 0 0.0666667 0 0 0 0 0.494118 0 0 0 0.32 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_449_2821"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial_449_2821" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 3) rotate(90) scale(52 54)">
|
||||
<stop stop-color="white" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#4E3DB9" stop-opacity="0.24"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_radial_449_2821" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 3) rotate(90) scale(52 54)">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F7F7F7"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint2_radial_449_2821" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 12.5001) rotate(90) scale(24.9999 20)">
|
||||
<stop stop-color="#F5F3FF"/>
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#E1DDF4"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.3 KiB |
@ -1,13 +0,0 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="PaneLeft" clip-path="url(#clip0_469_1942)">
|
||||
<g id="Vector">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.80217 0.525009C7.34654 0.525009 6.97717 0.894373 6.97717 1.35001V10.65C6.97717 11.1056 7.34654 11.475 7.80217 11.475H10.6522C11.1078 11.475 11.4772 11.1056 11.4772 10.65V1.35001C11.4772 0.894373 11.1078 0.525009 10.6522 0.525009H7.80217ZM8.02717 10.425V1.57501H10.4272V10.425H8.02717Z" fill="#494369"/>
|
||||
<path d="M3.78215 8.14502L2.16213 6.525H5.92717V5.475H2.16213L3.78215 3.85498L3.03969 3.11252L0.523438 5.62877V6.37123L3.03969 8.88748L3.78215 8.14502Z" fill="#494369"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_469_1942">
|
||||
<rect width="12" height="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 807 B |
@ -1 +0,0 @@
|
||||
"""Base template for Reflex."""
|
||||
@ -1,127 +0,0 @@
|
||||
"""Welcome to Reflex! This file outlines the steps to create a basic app."""
|
||||
|
||||
from typing import Callable
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from .pages import chatapp_page, datatable_page, forms_page, graphing_page, home_page
|
||||
from .sidebar import sidebar
|
||||
from .state import State
|
||||
from .styles import *
|
||||
|
||||
meta = [
|
||||
{
|
||||
"name": "viewport",
|
||||
"content": "width=device-width, shrink-to-fit=no, initial-scale=1",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
def template(main_content: Callable[[], rx.Component]) -> rx.Component:
|
||||
"""The template for each page of the app.
|
||||
|
||||
Args:
|
||||
main_content (Callable[[], rx.Component]): The main content of the page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The template for each page of the app.
|
||||
"""
|
||||
menu_button = rx.chakra.box(
|
||||
rx.chakra.menu(
|
||||
rx.chakra.menu_button(
|
||||
rx.chakra.icon(
|
||||
tag="hamburger",
|
||||
size="4em",
|
||||
color=text_color,
|
||||
),
|
||||
),
|
||||
rx.chakra.menu_list(
|
||||
rx.chakra.menu_item(rx.chakra.link("Home", href="/", width="100%")),
|
||||
rx.chakra.menu_divider(),
|
||||
rx.chakra.menu_item(
|
||||
rx.chakra.link(
|
||||
"About", href="https://github.com/reflex-dev", width="100%"
|
||||
)
|
||||
),
|
||||
rx.chakra.menu_item(
|
||||
rx.chakra.link(
|
||||
"Contact", href="mailto:founders@reflex.dev", width="100%"
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
position="fixed",
|
||||
right="1.5em",
|
||||
top="1.5em",
|
||||
z_index="500",
|
||||
)
|
||||
|
||||
return rx.chakra.hstack(
|
||||
sidebar(),
|
||||
main_content(),
|
||||
rx.chakra.spacer(),
|
||||
menu_button,
|
||||
align_items="flex-start",
|
||||
transition="left 0.5s, width 0.5s",
|
||||
position="relative",
|
||||
left=rx.cond(State.sidebar_displayed, "0px", f"-{sidebar_width}"),
|
||||
)
|
||||
|
||||
|
||||
@rx.page("/", meta=meta)
|
||||
@template
|
||||
def home() -> rx.Component:
|
||||
"""Home page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The home page.
|
||||
"""
|
||||
return home_page()
|
||||
|
||||
|
||||
@rx.page("/forms", meta=meta)
|
||||
@template
|
||||
def forms() -> rx.Component:
|
||||
"""Forms page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The settings page.
|
||||
"""
|
||||
return forms_page()
|
||||
|
||||
|
||||
@rx.page("/graphing", meta=meta)
|
||||
@template
|
||||
def graphing() -> rx.Component:
|
||||
"""Graphing page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The graphing page.
|
||||
"""
|
||||
return graphing_page()
|
||||
|
||||
|
||||
@rx.page("/datatable", meta=meta)
|
||||
@template
|
||||
def datatable() -> rx.Component:
|
||||
"""Data Table page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The chatapp page.
|
||||
"""
|
||||
return datatable_page()
|
||||
|
||||
|
||||
@rx.page("/chatapp", meta=meta)
|
||||
@template
|
||||
def chatapp() -> rx.Component:
|
||||
"""Chatapp page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The chatapp page.
|
||||
"""
|
||||
return chatapp_page()
|
||||
|
||||
|
||||
# Create the app.
|
||||
app = rx.App(style=base_style)
|
||||
@ -1,7 +0,0 @@
|
||||
"""The pages of the app."""
|
||||
|
||||
from .chatapp import chatapp_page
|
||||
from .datatable import datatable_page
|
||||
from .forms import forms_page
|
||||
from .graphing import graphing_page
|
||||
from .home import home_page
|
||||
@ -1,31 +0,0 @@
|
||||
"""The main Chat app."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from ..styles import *
|
||||
from ..webui import styles
|
||||
from ..webui.components import chat, modal, navbar, sidebar
|
||||
|
||||
|
||||
def chatapp_page() -> rx.Component:
|
||||
"""The main app.
|
||||
|
||||
Returns:
|
||||
The UI for the main app.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
navbar(),
|
||||
chat.chat(),
|
||||
chat.action_bar(),
|
||||
sidebar(),
|
||||
modal(),
|
||||
bg=styles.bg_dark_color,
|
||||
color=styles.text_light_color,
|
||||
min_h="100vh",
|
||||
align_items="stretch",
|
||||
spacing="0",
|
||||
style=template_content_style,
|
||||
),
|
||||
style=template_page_style,
|
||||
)
|
||||
@ -1,360 +0,0 @@
|
||||
"""The settings page for the template."""
|
||||
|
||||
from typing import Any
|
||||
|
||||
import reflex as rx
|
||||
from reflex.components.datadisplay.dataeditor import DataEditorTheme
|
||||
|
||||
from ..styles import *
|
||||
from ..webui.state import State
|
||||
|
||||
|
||||
class DataTableState(State):
|
||||
"""Datatable state."""
|
||||
|
||||
cols: list[Any] = [
|
||||
{"title": "Title", "type": "str"},
|
||||
{
|
||||
"title": "Name",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 300,
|
||||
},
|
||||
{
|
||||
"title": "Birth",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 150,
|
||||
},
|
||||
{
|
||||
"title": "Human",
|
||||
"type": "bool",
|
||||
"group": "Data",
|
||||
"width": 80,
|
||||
},
|
||||
{
|
||||
"title": "House",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
},
|
||||
{
|
||||
"title": "Wand",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 250,
|
||||
},
|
||||
{
|
||||
"title": "Patronus",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
},
|
||||
{
|
||||
"title": "Blood status",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 200,
|
||||
},
|
||||
]
|
||||
|
||||
data = [
|
||||
[
|
||||
"1",
|
||||
"Harry James Potter",
|
||||
"31 July 1980",
|
||||
True,
|
||||
"Gryffindor",
|
||||
"11' Holly phoenix feather",
|
||||
"Stag",
|
||||
"Half-blood",
|
||||
],
|
||||
[
|
||||
"2",
|
||||
"Ronald Bilius Weasley",
|
||||
"1 March 1980",
|
||||
True,
|
||||
"Gryffindor",
|
||||
"12' Ash unicorn tail hair",
|
||||
"Jack Russell terrier",
|
||||
"Pure-blood",
|
||||
],
|
||||
[
|
||||
"3",
|
||||
"Hermione Jean Granger",
|
||||
"19 September, 1979",
|
||||
True,
|
||||
"Gryffindor",
|
||||
"10¾' vine wood dragon heartstring",
|
||||
"Otter",
|
||||
"Muggle-born",
|
||||
],
|
||||
[
|
||||
"4",
|
||||
"Albus Percival Wulfric Brian Dumbledore",
|
||||
"Late August 1881",
|
||||
True,
|
||||
"Gryffindor",
|
||||
"15' Elder Thestral tail hair core",
|
||||
"Phoenix",
|
||||
"Half-blood",
|
||||
],
|
||||
[
|
||||
"5",
|
||||
"Rubeus Hagrid",
|
||||
"6 December 1928",
|
||||
False,
|
||||
"Gryffindor",
|
||||
"16' Oak unknown core",
|
||||
"None",
|
||||
"Part-Human (Half-giant)",
|
||||
],
|
||||
[
|
||||
"6",
|
||||
"Fred Weasley",
|
||||
"1 April, 1978",
|
||||
True,
|
||||
"Gryffindor",
|
||||
"Unknown",
|
||||
"Unknown",
|
||||
"Pure-blood",
|
||||
],
|
||||
[
|
||||
"7",
|
||||
"George Weasley",
|
||||
"1 April, 1978",
|
||||
True,
|
||||
"Gryffindor",
|
||||
"Unknown",
|
||||
"Unknown",
|
||||
"Pure-blood",
|
||||
],
|
||||
]
|
||||
|
||||
|
||||
code_show = """rx.chakra.hstack(
|
||||
rx.chakra.divider(orientation="vertical", height="100vh", border="solid black 1px"),
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.box(
|
||||
rx.data_editor(
|
||||
columns=DataTableState.cols,
|
||||
data=DataTableState.data,
|
||||
draw_focus_ring=True,
|
||||
row_height=50,
|
||||
smooth_scroll_x=True,
|
||||
smooth_scroll_y=True,
|
||||
column_select="single",
|
||||
# style
|
||||
theme=DataEditorTheme(**darkTheme),
|
||||
width="80vw",
|
||||
height="80vh",
|
||||
),
|
||||
),
|
||||
rx.chakra.spacer(),
|
||||
height="100vh",
|
||||
spacing="25",
|
||||
),
|
||||
)"""
|
||||
|
||||
state_show = """class DataTableState(State):
|
||||
cols: list[Any] = [
|
||||
{"title": "Title", "type": "str"},
|
||||
{
|
||||
"title": "Name",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 300,
|
||||
},
|
||||
{
|
||||
"title": "Birth",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 150,
|
||||
},
|
||||
{
|
||||
"title": "Human",
|
||||
"type": "bool",
|
||||
"group": "Data",
|
||||
"width": 80,
|
||||
},
|
||||
{
|
||||
"title": "House",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
},
|
||||
{
|
||||
"title": "Wand",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 250,
|
||||
},
|
||||
{
|
||||
"title": "Patronus",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
},
|
||||
{
|
||||
"title": "Blood status",
|
||||
"type": "str",
|
||||
"group": "Data",
|
||||
"width": 200,
|
||||
},
|
||||
]"""
|
||||
|
||||
data_show = """[
|
||||
["1", "Harry James Potter", "31 July 1980", True, "Gryffindor", "11' Holly phoenix feather", "Stag", "Half-blood"],
|
||||
["2", "Ronald Bilius Weasley", "1 March 1980", True,"Gryffindor", "12' Ash unicorn tail hair", "Jack Russell terrier", "Pure-blood"],
|
||||
["3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾' vine wood dragon heartstring", "Otter", "Muggle-born"],
|
||||
["4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood"],
|
||||
["5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16' Oak unknown core", "None", "Part-Human (Half-giant)"],
|
||||
["6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
|
||||
["7", "George Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
|
||||
]"""
|
||||
|
||||
|
||||
darkTheme = {
|
||||
"accent_color": "#8c96ff",
|
||||
"accent_light": "rgba(202, 206, 255, 0.253)",
|
||||
"text_dark": "#ffffff",
|
||||
"text_medium": "#b8b8b8",
|
||||
"text_light": "#a0a0a0",
|
||||
"text_bubble": "#ffffff",
|
||||
"bg_icon_header": "#b8b8b8",
|
||||
"fg_icon_header": "#000000",
|
||||
"text_header": "#a1a1a1",
|
||||
"text_header_selected": "#000000",
|
||||
"bg_cell": "#16161b",
|
||||
"bg_cell_medium": "#202027",
|
||||
"bg_header": "#212121",
|
||||
"bg_header_has_focus": "#474747",
|
||||
"bg_header_hovered": "#404040",
|
||||
"bg_bubble": "#212121",
|
||||
"bg_bubble_selected": "#000000",
|
||||
"bg_search_result": "#423c24",
|
||||
"border_color": "rgba(225,225,225,0.2)",
|
||||
"drilldown_border": "rgba(225,225,225,0.4)",
|
||||
"link_color": "#4F5DFF",
|
||||
"header_font_style": "bold 14px",
|
||||
"base_font_style": "13px",
|
||||
"font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
|
||||
}
|
||||
|
||||
darkTheme_show = """darkTheme={
|
||||
"accent_color": "#8c96ff",
|
||||
"accent_light": "rgba(202, 206, 255, 0.253)",
|
||||
"text_dark": "#ffffff",
|
||||
"text_medium": "#b8b8b8",
|
||||
"text_light": "#a0a0a0",
|
||||
"text_bubble": "#ffffff",
|
||||
"bg_icon_header": "#b8b8b8",
|
||||
"fg_icon_header": "#000000",
|
||||
"text_header": "#a1a1a1",
|
||||
"text_header_selected": "#000000",
|
||||
"bg_cell": "#16161b",
|
||||
"bg_cell_medium": "#202027",
|
||||
"bg_header": "#212121",
|
||||
"bg_header_has_focus": "#474747",
|
||||
"bg_header_hovered": "#404040",
|
||||
"bg_bubble": "#212121",
|
||||
"bg_bubble_selected": "#000000",
|
||||
"bg_search_result": "#423c24",
|
||||
"border_color": "rgba(225,225,225,0.2)",
|
||||
"drilldown_border": "rgba(225,225,225,0.4)",
|
||||
"link_color": "#4F5DFF",
|
||||
"header_font_style": "bold 14px",
|
||||
"base_font_style": "13px",
|
||||
"font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
|
||||
}"""
|
||||
|
||||
|
||||
def datatable_page() -> rx.Component:
|
||||
"""The UI for the settings page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The UI for the settings page.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.heading(
|
||||
"Data Table Demo",
|
||||
font_size="3em",
|
||||
),
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.box(
|
||||
rx.data_editor(
|
||||
columns=DataTableState.cols,
|
||||
data=DataTableState.data,
|
||||
draw_focus_ring=True,
|
||||
row_height=50,
|
||||
smooth_scroll_x=True,
|
||||
smooth_scroll_y=True,
|
||||
column_select="single",
|
||||
# style
|
||||
theme=DataEditorTheme(**darkTheme),
|
||||
width="80vw",
|
||||
),
|
||||
),
|
||||
rx.chakra.spacer(),
|
||||
spacing="25",
|
||||
),
|
||||
),
|
||||
rx.chakra.tabs(
|
||||
rx.chakra.tab_list(
|
||||
rx.chakra.tab("Code", style=tab_style),
|
||||
rx.chakra.tab("Data", style=tab_style),
|
||||
rx.chakra.tab("State", style=tab_style),
|
||||
rx.chakra.tab("Styling", style=tab_style),
|
||||
padding_x=0,
|
||||
),
|
||||
rx.chakra.tab_panels(
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
code_show,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
data_show,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
state_show,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
darkTheme_show,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
width="100%",
|
||||
),
|
||||
variant="unstyled",
|
||||
color_scheme="purple",
|
||||
align="end",
|
||||
width="100%",
|
||||
padding_top=".5em",
|
||||
),
|
||||
style=template_content_style,
|
||||
),
|
||||
style=template_page_style,
|
||||
)
|
||||
@ -1,257 +0,0 @@
|
||||
"""The settings page for the template."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from ..states.form_state import FormState, UploadState
|
||||
from ..styles import *
|
||||
|
||||
forms_1_code = """rx.chakra.vstack(
|
||||
rx.chakra.form(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.input(
|
||||
placeholder="First Name",
|
||||
id="first_name",
|
||||
),
|
||||
rx.chakra.input(
|
||||
placeholder="Last Name", id="last_name"
|
||||
),
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.checkbox("Checked", id="check"),
|
||||
rx.chakra.switch("Switched", id="switch"),
|
||||
),
|
||||
rx.chakra.button("Submit",
|
||||
type_="submit",
|
||||
bg="#ecfdf5",
|
||||
color="#047857",
|
||||
border_radius="lg",
|
||||
),
|
||||
),
|
||||
on_submit=FormState.handle_submit,
|
||||
),
|
||||
rx.chakra.divider(),
|
||||
rx.chakra.heading("Results"),
|
||||
rx.chakra.text(FormState.form_data.to_string()),
|
||||
width="100%",
|
||||
)"""
|
||||
|
||||
color = "rgb(107,99,246)"
|
||||
|
||||
forms_1_state = """class FormState(rx.State):
|
||||
|
||||
form_data: dict = {}
|
||||
|
||||
def handle_submit(self, form_data: dict):
|
||||
"Handle the form submit."
|
||||
self.form_data = form_data"""
|
||||
|
||||
|
||||
forms_2_code = """rx.chakra.vstack(
|
||||
rx.upload(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.button(
|
||||
"Select File",
|
||||
color=color,
|
||||
bg="white",
|
||||
border=f"1px solid {color}",
|
||||
),
|
||||
rx.chakra.text(
|
||||
"Drag and drop files here or click to select files"
|
||||
),
|
||||
),
|
||||
border=f"1px dotted {color}",
|
||||
padding="5em",
|
||||
),
|
||||
rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
|
||||
rx.chakra.button(
|
||||
"Upload",
|
||||
on_click=lambda: UploadState.handle_upload(
|
||||
rx.upload_files()
|
||||
),
|
||||
),
|
||||
rx.chakra.button(
|
||||
"Clear",
|
||||
on_click=rx.clear_selected_files,
|
||||
),
|
||||
rx.foreach(
|
||||
UploadState.img, lambda img: rx.chakra.image(src=img, width="20%", height="auto",)
|
||||
),
|
||||
padding="5em",
|
||||
width="100%",
|
||||
)"""
|
||||
|
||||
forms_2_state = """class UploadState(State):
|
||||
"The app state."
|
||||
|
||||
# The images to show.
|
||||
img: list[str]
|
||||
|
||||
async def handle_upload(
|
||||
self, files: list[rx.UploadFile]
|
||||
):
|
||||
"Handle the upload of file(s).
|
||||
|
||||
Args:
|
||||
files: The uploaded files.
|
||||
"
|
||||
for file in files:
|
||||
upload_data = await file.read()
|
||||
outfile = rx.get_asset_path(file.filename)
|
||||
# Save the file.
|
||||
with open(outfile, "wb") as file_object:
|
||||
file_object.write(upload_data)
|
||||
|
||||
# Update the img var.
|
||||
self.img.append(f"/{file.filename}")"""
|
||||
|
||||
|
||||
def forms_page() -> rx.Component:
|
||||
"""The UI for the settings page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The UI for the settings page.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.heading(
|
||||
"Forms Demo",
|
||||
font_size="3em",
|
||||
),
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.form(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.input(
|
||||
placeholder="First Name",
|
||||
id="first_name",
|
||||
),
|
||||
rx.chakra.input(placeholder="Last Name", id="last_name"),
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.checkbox("Checked", id="check"),
|
||||
rx.chakra.switch("Switched", id="switch"),
|
||||
),
|
||||
rx.chakra.button(
|
||||
"Submit",
|
||||
type_="submit",
|
||||
bg="#ecfdf5",
|
||||
color="#047857",
|
||||
border_radius="lg",
|
||||
),
|
||||
),
|
||||
on_submit=FormState.handle_submit,
|
||||
),
|
||||
rx.chakra.divider(),
|
||||
rx.chakra.heading("Results"),
|
||||
rx.chakra.text(FormState.form_data.to_string()),
|
||||
width="100%",
|
||||
),
|
||||
rx.chakra.tabs(
|
||||
rx.chakra.tab_list(
|
||||
rx.chakra.tab("Code", style=tab_style),
|
||||
rx.chakra.tab("State", style=tab_style),
|
||||
padding_x=0,
|
||||
),
|
||||
rx.chakra.tab_panels(
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
forms_1_code,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
forms_1_state,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
width="100%",
|
||||
),
|
||||
variant="unstyled",
|
||||
color_scheme="purple",
|
||||
align="end",
|
||||
width="100%",
|
||||
padding_top=".5em",
|
||||
),
|
||||
rx.chakra.heading("Upload Example", font_size="3em"),
|
||||
rx.chakra.text("Try uploading some images and see how they look."),
|
||||
rx.chakra.vstack(
|
||||
rx.upload(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.button(
|
||||
"Select File",
|
||||
color=color,
|
||||
bg="white",
|
||||
border=f"1px solid {color}",
|
||||
),
|
||||
rx.chakra.text(
|
||||
"Drag and drop files here or click to select files"
|
||||
),
|
||||
),
|
||||
border=f"1px dotted {color}",
|
||||
padding="5em",
|
||||
),
|
||||
rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
|
||||
rx.chakra.button(
|
||||
"Upload",
|
||||
on_click=lambda: UploadState.handle_upload(rx.upload_files()),
|
||||
),
|
||||
rx.chakra.button(
|
||||
"Clear",
|
||||
on_click=rx.clear_selected_files,
|
||||
),
|
||||
rx.foreach(
|
||||
UploadState.img,
|
||||
lambda img: rx.chakra.image(
|
||||
src=img,
|
||||
width="20%",
|
||||
height="auto",
|
||||
),
|
||||
),
|
||||
padding="5em",
|
||||
width="100%",
|
||||
),
|
||||
rx.chakra.tabs(
|
||||
rx.chakra.tab_list(
|
||||
rx.chakra.tab("Code", style=tab_style),
|
||||
rx.chakra.tab("State", style=tab_style),
|
||||
padding_x=0,
|
||||
),
|
||||
rx.chakra.tab_panels(
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
forms_2_code,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
forms_2_state,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
width="100%",
|
||||
),
|
||||
variant="unstyled",
|
||||
color_scheme="purple",
|
||||
align="end",
|
||||
width="100%",
|
||||
padding_top=".5em",
|
||||
),
|
||||
style=template_content_style,
|
||||
),
|
||||
style=template_page_style,
|
||||
)
|
||||
@ -1,253 +0,0 @@
|
||||
"""The dashboard page for the template."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from ..states.pie_state import PieChartState
|
||||
from ..styles import *
|
||||
|
||||
data_1 = [
|
||||
{"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
|
||||
{"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
|
||||
{"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
|
||||
{"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
|
||||
{"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
|
||||
{"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
|
||||
{"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
|
||||
]
|
||||
data_1_show = """[
|
||||
{"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
|
||||
{"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
|
||||
{"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
|
||||
{"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
|
||||
{"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
|
||||
{"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
|
||||
{"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
|
||||
]"""
|
||||
|
||||
|
||||
graph_1_code = """rx.recharts.composed_chart(
|
||||
rx.recharts.area(
|
||||
data_key="uv", stroke="#8884d8", fill="#8884d8"
|
||||
),
|
||||
rx.recharts.bar(
|
||||
data_key="amt", bar_size=20, fill="#413ea0"
|
||||
),
|
||||
rx.recharts.line(
|
||||
data_key="pv", type_="monotone", stroke="#ff7300"
|
||||
),
|
||||
rx.recharts.x_axis(data_key="name"),
|
||||
rx.recharts.y_axis(),
|
||||
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
|
||||
rx.recharts.graphing_tooltip(),
|
||||
data=data,
|
||||
)"""
|
||||
|
||||
|
||||
graph_2_code = """rx.recharts.pie_chart(
|
||||
rx.recharts.pie(
|
||||
data=PieChartState.resources,
|
||||
data_key="count",
|
||||
name_key="type_",
|
||||
cx="50%",
|
||||
cy="50%",
|
||||
start_angle=180,
|
||||
end_angle=0,
|
||||
fill="#8884d8",
|
||||
label=True,
|
||||
),
|
||||
rx.recharts.graphing_tooltip(),
|
||||
),
|
||||
rx.chakra.vstack(
|
||||
rx.foreach(
|
||||
PieChartState.resource_types,
|
||||
lambda type_, i: rx.chakra.hstack(
|
||||
rx.chakra.button(
|
||||
"-",
|
||||
on_click=PieChartState.decrement(type_),
|
||||
),
|
||||
rx.chakra.text(
|
||||
type_,
|
||||
PieChartState.resources[i]["count"],
|
||||
),
|
||||
rx.chakra.button(
|
||||
"+",
|
||||
on_click=PieChartState.increment(type_),
|
||||
),
|
||||
),
|
||||
),
|
||||
)"""
|
||||
|
||||
graph_2_state = """class PieChartState(rx.State):
|
||||
resources: list[dict[str, Any]] = [
|
||||
dict(type_="🏆", count=1),
|
||||
dict(type_="🪵", count=1),
|
||||
dict(type_="🥑", count=1),
|
||||
dict(type_="🧱", count=1),
|
||||
]
|
||||
|
||||
@rx.cached_var
|
||||
def resource_types(self) -> list[str]:
|
||||
return [r["type_"] for r in self.resources]
|
||||
|
||||
def increment(self, type_: str):
|
||||
for resource in self.resources:
|
||||
if resource["type_"] == type_:
|
||||
resource["count"] += 1
|
||||
break
|
||||
|
||||
def decrement(self, type_: str):
|
||||
for resource in self.resources:
|
||||
if (
|
||||
resource["type_"] == type_
|
||||
and resource["count"] > 0
|
||||
):
|
||||
resource["count"] -= 1
|
||||
break
|
||||
"""
|
||||
|
||||
|
||||
def graphing_page() -> rx.Component:
|
||||
"""The UI for the dashboard page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The UI for the dashboard page.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.heading(
|
||||
"Graphing Demo",
|
||||
font_size="3em",
|
||||
),
|
||||
rx.chakra.heading(
|
||||
"Composed Chart",
|
||||
font_size="2em",
|
||||
),
|
||||
rx.chakra.stack(
|
||||
rx.recharts.composed_chart(
|
||||
rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
|
||||
rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
|
||||
rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
|
||||
rx.recharts.x_axis(data_key="name"),
|
||||
rx.recharts.y_axis(),
|
||||
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
|
||||
rx.recharts.graphing_tooltip(),
|
||||
data=data_1,
|
||||
# height="15em",
|
||||
),
|
||||
width="100%",
|
||||
height="20em",
|
||||
),
|
||||
rx.chakra.tabs(
|
||||
rx.chakra.tab_list(
|
||||
rx.chakra.tab("Code", style=tab_style),
|
||||
rx.chakra.tab("Data", style=tab_style),
|
||||
padding_x=0,
|
||||
),
|
||||
rx.chakra.tab_panels(
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
graph_1_code,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
data_1_show,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
width="100%",
|
||||
),
|
||||
variant="unstyled",
|
||||
color_scheme="purple",
|
||||
align="end",
|
||||
width="100%",
|
||||
padding_top=".5em",
|
||||
),
|
||||
rx.chakra.heading("Interactive Example", font_size="2em"),
|
||||
rx.chakra.hstack(
|
||||
rx.recharts.pie_chart(
|
||||
rx.recharts.pie(
|
||||
data=PieChartState.resources,
|
||||
data_key="count",
|
||||
name_key="type_",
|
||||
cx="50%",
|
||||
cy="50%",
|
||||
start_angle=180,
|
||||
end_angle=0,
|
||||
fill="#8884d8",
|
||||
label=True,
|
||||
),
|
||||
rx.recharts.graphing_tooltip(),
|
||||
),
|
||||
rx.chakra.vstack(
|
||||
rx.foreach(
|
||||
PieChartState.resource_types,
|
||||
lambda type_, i: rx.chakra.hstack(
|
||||
rx.chakra.button(
|
||||
"-",
|
||||
on_click=PieChartState.decrement(type_),
|
||||
),
|
||||
rx.chakra.text(
|
||||
type_,
|
||||
PieChartState.resources[i]["count"],
|
||||
),
|
||||
rx.chakra.button(
|
||||
"+",
|
||||
on_click=PieChartState.increment(type_),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
width="100%",
|
||||
height="15em",
|
||||
),
|
||||
rx.chakra.tabs(
|
||||
rx.chakra.tab_list(
|
||||
rx.chakra.tab("Code", style=tab_style),
|
||||
rx.chakra.tab("State", style=tab_style),
|
||||
padding_x=0,
|
||||
),
|
||||
rx.chakra.tab_panels(
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
graph_2_code,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
rx.chakra.tab_panel(
|
||||
rx.code_block(
|
||||
graph_2_state,
|
||||
language="python",
|
||||
show_line_numbers=True,
|
||||
),
|
||||
width="100%",
|
||||
padding_x=0,
|
||||
padding_y=".25em",
|
||||
),
|
||||
width="100%",
|
||||
),
|
||||
variant="unstyled",
|
||||
color_scheme="purple",
|
||||
align="end",
|
||||
width="100%",
|
||||
padding_top=".5em",
|
||||
),
|
||||
style=template_content_style,
|
||||
min_h="100vh",
|
||||
),
|
||||
style=template_page_style,
|
||||
min_h="100vh",
|
||||
)
|
||||
@ -1,56 +0,0 @@
|
||||
"""The home page of the app."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from ..styles import *
|
||||
|
||||
|
||||
def home_page() -> rx.Component:
|
||||
"""The UI for the home page.
|
||||
|
||||
Returns:
|
||||
rx.Component: The UI for the home page.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.heading(
|
||||
"Welcome to Reflex! 👋",
|
||||
font_size="3em",
|
||||
),
|
||||
rx.chakra.text(
|
||||
"Reflex is an open-source app framework built specifically to allow you to build web apps in pure python. 👈 Select a demo from the sidebar to see some examples of what Reflex can do!",
|
||||
),
|
||||
rx.chakra.heading(
|
||||
"Things to check out:",
|
||||
font_size="2em",
|
||||
),
|
||||
rx.chakra.unordered_list(
|
||||
rx.chakra.list_item(
|
||||
"Take a look at ",
|
||||
rx.chakra.link(
|
||||
"reflex.dev",
|
||||
href="https://reflex.dev",
|
||||
color="rgb(107,99,246)",
|
||||
),
|
||||
),
|
||||
rx.chakra.list_item(
|
||||
"Check out our ",
|
||||
rx.chakra.link(
|
||||
"docs",
|
||||
href="https://reflex.dev/docs/getting-started/introduction/",
|
||||
color="rgb(107,99,246)",
|
||||
),
|
||||
),
|
||||
rx.chakra.list_item(
|
||||
"Ask a question in our ",
|
||||
rx.chakra.link(
|
||||
"community",
|
||||
href="https://discord.gg/T5WSbC2YtQ",
|
||||
color="rgb(107,99,246)",
|
||||
),
|
||||
),
|
||||
),
|
||||
style=template_content_style,
|
||||
),
|
||||
style=template_page_style,
|
||||
)
|
||||
@ -1,178 +0,0 @@
|
||||
"""Sidebar component for the app."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from .state import State
|
||||
from .styles import *
|
||||
|
||||
|
||||
def sidebar_header() -> rx.Component:
|
||||
"""Sidebar header.
|
||||
|
||||
Returns:
|
||||
rx.Component: The sidebar header component.
|
||||
"""
|
||||
return rx.chakra.hstack(
|
||||
rx.chakra.image(
|
||||
src="/icon.svg",
|
||||
height="2em",
|
||||
),
|
||||
rx.chakra.spacer(),
|
||||
rx.chakra.link(
|
||||
rx.chakra.center(
|
||||
rx.chakra.image(
|
||||
src="/github.svg",
|
||||
height="3em",
|
||||
padding="0.5em",
|
||||
),
|
||||
box_shadow=box_shadow,
|
||||
bg="transparent",
|
||||
border_radius=border_radius,
|
||||
_hover={
|
||||
"bg": accent_color,
|
||||
},
|
||||
),
|
||||
href="https://github.com/reflex-dev/reflex",
|
||||
),
|
||||
width="100%",
|
||||
border_bottom=border,
|
||||
padding="1em",
|
||||
)
|
||||
|
||||
|
||||
def sidebar_footer() -> rx.Component:
|
||||
"""Sidebar footer.
|
||||
|
||||
Returns:
|
||||
rx.Component: The sidebar footer component.
|
||||
"""
|
||||
return rx.chakra.hstack(
|
||||
rx.chakra.link(
|
||||
rx.chakra.center(
|
||||
rx.chakra.image(
|
||||
src="/paneleft.svg",
|
||||
height="2em",
|
||||
padding="0.5em",
|
||||
),
|
||||
bg="transparent",
|
||||
border_radius=border_radius,
|
||||
**hover_accent_bg,
|
||||
),
|
||||
on_click=State.toggle_sidebar_displayed,
|
||||
transform=rx.cond(~State.sidebar_displayed, "rotate(180deg)", ""),
|
||||
transition="transform 0.5s, left 0.5s",
|
||||
position="relative",
|
||||
left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
|
||||
**overlapping_button_style,
|
||||
),
|
||||
rx.chakra.spacer(),
|
||||
rx.chakra.link(
|
||||
rx.chakra.text(
|
||||
"Docs",
|
||||
),
|
||||
href="https://reflex.dev/docs/getting-started/introduction/",
|
||||
),
|
||||
rx.chakra.link(
|
||||
rx.chakra.text(
|
||||
"Blog",
|
||||
),
|
||||
href="https://reflex.dev/blog/",
|
||||
),
|
||||
width="100%",
|
||||
border_top=border,
|
||||
padding="1em",
|
||||
)
|
||||
|
||||
|
||||
def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
|
||||
"""Sidebar item.
|
||||
|
||||
Args:
|
||||
text (str): The text of the item.
|
||||
icon (str): The icon of the item.
|
||||
url (str): The URL of the item.
|
||||
|
||||
Returns:
|
||||
rx.Component: The sidebar item component.
|
||||
"""
|
||||
return rx.chakra.link(
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.image(
|
||||
src=icon,
|
||||
height="2.5em",
|
||||
padding="0.5em",
|
||||
),
|
||||
rx.chakra.text(
|
||||
text,
|
||||
),
|
||||
bg=rx.cond(
|
||||
State.origin_url == f"/{text.lower()}/",
|
||||
accent_color,
|
||||
"transparent",
|
||||
),
|
||||
color=rx.cond(
|
||||
State.origin_url == f"/{text.lower()}/",
|
||||
accent_text_color,
|
||||
text_color,
|
||||
),
|
||||
border_radius=border_radius,
|
||||
box_shadow=box_shadow,
|
||||
width="100%",
|
||||
padding_x="1em",
|
||||
),
|
||||
href=url,
|
||||
width="100%",
|
||||
)
|
||||
|
||||
|
||||
def sidebar() -> rx.Component:
|
||||
"""Sidebar.
|
||||
|
||||
Returns:
|
||||
rx.Component: The sidebar component.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
sidebar_header(),
|
||||
rx.chakra.vstack(
|
||||
sidebar_item(
|
||||
"Welcome",
|
||||
"/github.svg",
|
||||
"/",
|
||||
),
|
||||
sidebar_item(
|
||||
"Graphing Demo",
|
||||
"/github.svg",
|
||||
"/graphing",
|
||||
),
|
||||
sidebar_item(
|
||||
"Data Table Demo",
|
||||
"/github.svg",
|
||||
"/datatable",
|
||||
),
|
||||
sidebar_item(
|
||||
"Forms Demo",
|
||||
"/github.svg",
|
||||
"/forms",
|
||||
),
|
||||
sidebar_item(
|
||||
"Chat App Demo",
|
||||
"/github.svg",
|
||||
"/chatapp",
|
||||
),
|
||||
width="100%",
|
||||
overflow_y="auto",
|
||||
align_items="flex-start",
|
||||
padding="1em",
|
||||
),
|
||||
rx.chakra.spacer(),
|
||||
sidebar_footer(),
|
||||
height="100dvh",
|
||||
),
|
||||
display=["none", "none", "block"],
|
||||
min_width=sidebar_width,
|
||||
height="100%",
|
||||
position="sticky",
|
||||
top="0px",
|
||||
border_right=border,
|
||||
)
|
||||
@ -1,22 +0,0 @@
|
||||
"""Base state for the app."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
|
||||
class State(rx.State):
|
||||
"""State for the app."""
|
||||
|
||||
sidebar_displayed: bool = True
|
||||
|
||||
@rx.var
|
||||
def origin_url(self) -> str:
|
||||
"""Get the url of the current page.
|
||||
|
||||
Returns:
|
||||
str: The url of the current page.
|
||||
"""
|
||||
return self.router_data.get("asPath", "")
|
||||
|
||||
def toggle_sidebar_displayed(self) -> None:
|
||||
"""Toggle the sidebar displayed."""
|
||||
self.sidebar_displayed = not self.sidebar_displayed
|
||||
@ -1,40 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
from ..state import State
|
||||
|
||||
|
||||
class FormState(State):
|
||||
"""Form state."""
|
||||
|
||||
form_data: dict = {}
|
||||
|
||||
def handle_submit(self, form_data: dict):
|
||||
"""Handle the form submit.
|
||||
|
||||
Args:
|
||||
form_data: The form data.
|
||||
"""
|
||||
self.form_data = form_data
|
||||
|
||||
|
||||
class UploadState(State):
|
||||
"""The app state."""
|
||||
|
||||
# The images to show.
|
||||
img: list[str]
|
||||
|
||||
async def handle_upload(self, files: list[rx.UploadFile]):
|
||||
"""Handle the upload of file(s).
|
||||
|
||||
Args:
|
||||
files: The uploaded files.
|
||||
"""
|
||||
for file in files:
|
||||
upload_data = await file.read()
|
||||
outfile = rx.get_asset_path(file.filename)
|
||||
# Save the file.
|
||||
with open(outfile, "wb") as file_object:
|
||||
file_object.write(upload_data)
|
||||
|
||||
# Update the img var.
|
||||
self.img.append(f"/{file.filename}")
|
||||
@ -1,47 +0,0 @@
|
||||
from typing import Any
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from ..state import State
|
||||
|
||||
|
||||
class PieChartState(State):
|
||||
"""Pie Chart State."""
|
||||
|
||||
resources: list[dict[str, Any]] = [
|
||||
dict(type_="🏆", count=1),
|
||||
dict(type_="🪵", count=1),
|
||||
dict(type_="🥑", count=1),
|
||||
dict(type_="🧱", count=1),
|
||||
]
|
||||
|
||||
@rx.cached_var
|
||||
def resource_types(self) -> list[str]:
|
||||
"""Get the resource types.
|
||||
|
||||
Returns:
|
||||
The resource types.
|
||||
"""
|
||||
return [r["type_"] for r in self.resources]
|
||||
|
||||
def increment(self, type_: str):
|
||||
"""Increment the count of a resource type.
|
||||
|
||||
Args:
|
||||
type_: The type of resource to increment.
|
||||
"""
|
||||
for resource in self.resources:
|
||||
if resource["type_"] == type_:
|
||||
resource["count"] += 1
|
||||
break
|
||||
|
||||
def decrement(self, type_: str):
|
||||
"""Decrement the count of a resource type.
|
||||
|
||||
Args:
|
||||
type_: The type of resource to decrement.
|
||||
"""
|
||||
for resource in self.resources:
|
||||
if resource["type_"] == type_ and resource["count"] > 0:
|
||||
resource["count"] -= 1
|
||||
break
|
||||
@ -1,68 +0,0 @@
|
||||
"""Styles for the app."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from .state import State
|
||||
|
||||
border_radius = "0.375rem"
|
||||
box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
|
||||
border = "1px solid #F4F3F6"
|
||||
text_color = "black"
|
||||
accent_text_color = "#1A1060"
|
||||
accent_color = "#F5EFFE"
|
||||
hover_accent_color = {"_hover": {"color": accent_color}}
|
||||
hover_accent_bg = {"_hover": {"bg": accent_color}}
|
||||
content_width_vw = "90vw"
|
||||
sidebar_width = "20em"
|
||||
|
||||
template_page_style = {
|
||||
"padding_top": "5em",
|
||||
"padding_x": "2em",
|
||||
}
|
||||
|
||||
template_content_style = {
|
||||
"width": rx.cond(
|
||||
State.sidebar_displayed,
|
||||
f"calc({content_width_vw} - {sidebar_width})",
|
||||
content_width_vw,
|
||||
),
|
||||
"min-width": sidebar_width,
|
||||
"align_items": "flex-start",
|
||||
"box_shadow": box_shadow,
|
||||
"border_radius": border_radius,
|
||||
"padding": "1em",
|
||||
"margin_bottom": "2em",
|
||||
}
|
||||
|
||||
link_style = {
|
||||
"color": text_color,
|
||||
"text_decoration": "none",
|
||||
**hover_accent_color,
|
||||
}
|
||||
|
||||
overlapping_button_style = {
|
||||
"background_color": "white",
|
||||
"border": border,
|
||||
"border_radius": border_radius,
|
||||
}
|
||||
|
||||
base_style = {
|
||||
rx.chakra.MenuButton: {
|
||||
"width": "3em",
|
||||
"height": "3em",
|
||||
**overlapping_button_style,
|
||||
},
|
||||
rx.chakra.MenuItem: hover_accent_bg,
|
||||
}
|
||||
|
||||
tab_style = {
|
||||
"color": "#494369",
|
||||
"font_weight": 600,
|
||||
"_selected": {
|
||||
"color": "#5646ED",
|
||||
"bg": "#F5EFFE",
|
||||
"padding_x": "0.5em",
|
||||
"padding_y": "0.25em",
|
||||
"border_radius": "8px",
|
||||
},
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
from .loading_icon import loading_icon
|
||||
from .modal import modal
|
||||
from .navbar import navbar
|
||||
from .sidebar import sidebar
|
||||
@ -1,118 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
from ...webui import styles
|
||||
from ...webui.components import loading_icon
|
||||
from ...webui.state import QA, State
|
||||
|
||||
|
||||
def message(qa: QA) -> rx.Component:
|
||||
"""A single question/answer message.
|
||||
|
||||
Args:
|
||||
qa: The question/answer pair.
|
||||
|
||||
Returns:
|
||||
A component displaying the question/answer pair.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.box(
|
||||
rx.chakra.text(
|
||||
qa.question,
|
||||
bg=styles.border_color,
|
||||
shadow=styles.shadow_light,
|
||||
**styles.message_style,
|
||||
),
|
||||
text_align="right",
|
||||
margin_top="1em",
|
||||
),
|
||||
rx.chakra.box(
|
||||
rx.chakra.text(
|
||||
qa.answer,
|
||||
bg=styles.accent_color,
|
||||
shadow=styles.shadow_light,
|
||||
**styles.message_style,
|
||||
),
|
||||
text_align="left",
|
||||
padding_top="1em",
|
||||
),
|
||||
width="100%",
|
||||
)
|
||||
|
||||
|
||||
def chat() -> rx.Component:
|
||||
"""List all the messages in a single conversation.
|
||||
|
||||
Returns:
|
||||
A component displaying all the messages in a single conversation.
|
||||
"""
|
||||
return rx.chakra.vstack(
|
||||
rx.chakra.box(rx.foreach(State.chats[State.current_chat], message)),
|
||||
py="8",
|
||||
flex="1",
|
||||
width="100%",
|
||||
max_w="3xl",
|
||||
padding_x="4",
|
||||
align_self="center",
|
||||
overflow="hidden",
|
||||
padding_bottom="5em",
|
||||
**styles.base_style[rx.chakra.Vstack],
|
||||
)
|
||||
|
||||
|
||||
def action_bar() -> rx.Component:
|
||||
"""The action bar to send a new message.
|
||||
|
||||
Returns:
|
||||
The action bar to send a new message.
|
||||
"""
|
||||
return rx.chakra.box(
|
||||
rx.chakra.vstack(
|
||||
rx.chakra.form(
|
||||
rx.chakra.form_control(
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.input(
|
||||
placeholder="Type something...",
|
||||
value=State.question,
|
||||
on_change=State.set_question,
|
||||
_placeholder={"color": "#fffa"},
|
||||
_hover={"border_color": styles.accent_color},
|
||||
style=styles.input_style,
|
||||
),
|
||||
rx.chakra.button(
|
||||
rx.cond(
|
||||
State.processing,
|
||||
loading_icon(height="1em"),
|
||||
rx.chakra.text("Send"),
|
||||
),
|
||||
type_="submit",
|
||||
_hover={"bg": styles.accent_color},
|
||||
style=styles.input_style,
|
||||
),
|
||||
**styles.base_style[rx.chakra.Hstack],
|
||||
),
|
||||
is_disabled=State.processing,
|
||||
),
|
||||
on_submit=State.process_question,
|
||||
width="100%",
|
||||
),
|
||||
rx.chakra.text(
|
||||
"ReflexGPT may return factually incorrect or misleading responses. Use discretion.",
|
||||
font_size="xs",
|
||||
color="#fff6",
|
||||
text_align="center",
|
||||
),
|
||||
width="100%",
|
||||
max_w="3xl",
|
||||
mx="auto",
|
||||
**styles.base_style[rx.chakra.Vstack],
|
||||
),
|
||||
position="sticky",
|
||||
bottom="0",
|
||||
left="0",
|
||||
py="4",
|
||||
backdrop_filter="auto",
|
||||
backdrop_blur="lg",
|
||||
border_top=f"1px solid {styles.border_color}",
|
||||
align_items="stretch",
|
||||
width="100%",
|
||||
)
|
||||
@ -1,19 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
|
||||
class LoadingIcon(rx.Component):
|
||||
"""A custom loading icon component."""
|
||||
|
||||
library = "react-loading-icons"
|
||||
tag = "SpinningCircles"
|
||||
stroke: rx.Var[str]
|
||||
stroke_opacity: rx.Var[str]
|
||||
fill: rx.Var[str]
|
||||
fill_opacity: rx.Var[str]
|
||||
stroke_width: rx.Var[str]
|
||||
speed: rx.Var[str]
|
||||
height: rx.Var[str]
|
||||
on_change: rx.EventHandler[lambda status: [status]]
|
||||
|
||||
|
||||
loading_icon = LoadingIcon.create
|
||||
@ -1,56 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
from ...webui.state import State
|
||||
|
||||
|
||||
def modal() -> rx.Component:
|
||||
"""A modal to create a new chat.
|
||||
|
||||
Returns:
|
||||
The modal component.
|
||||
"""
|
||||
return rx.chakra.modal(
|
||||
rx.chakra.modal_overlay(
|
||||
rx.chakra.modal_content(
|
||||
rx.chakra.modal_header(
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.text("Create new chat"),
|
||||
rx.chakra.icon(
|
||||
tag="close",
|
||||
font_size="sm",
|
||||
on_click=State.toggle_modal,
|
||||
color="#fff8",
|
||||
_hover={"color": "#fff"},
|
||||
cursor="pointer",
|
||||
),
|
||||
align_items="center",
|
||||
justify_content="space-between",
|
||||
)
|
||||
),
|
||||
rx.chakra.modal_body(
|
||||
rx.chakra.input(
|
||||
placeholder="Type something...",
|
||||
on_blur=State.set_new_chat_name,
|
||||
bg="#222",
|
||||
border_color="#fff3",
|
||||
_placeholder={"color": "#fffa"},
|
||||
),
|
||||
),
|
||||
rx.chakra.modal_footer(
|
||||
rx.chakra.button(
|
||||
"Create",
|
||||
bg="#5535d4",
|
||||
box_shadow="md",
|
||||
px="4",
|
||||
py="2",
|
||||
h="auto",
|
||||
_hover={"bg": "#4c2db3"},
|
||||
on_click=State.create_chat,
|
||||
),
|
||||
),
|
||||
bg="#222",
|
||||
color="#fff",
|
||||
),
|
||||
),
|
||||
is_open=State.modal_open,
|
||||
)
|
||||
@ -1,70 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
from ...webui import styles
|
||||
from ...webui.state import State
|
||||
|
||||
|
||||
def navbar():
|
||||
return rx.chakra.box(
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.icon(
|
||||
tag="hamburger",
|
||||
mr=4,
|
||||
on_click=State.toggle_drawer,
|
||||
cursor="pointer",
|
||||
),
|
||||
rx.chakra.link(
|
||||
rx.chakra.box(
|
||||
rx.chakra.image(src="favicon.ico", width=30, height="auto"),
|
||||
p="1",
|
||||
border_radius="6",
|
||||
bg="#F0F0F0",
|
||||
mr="2",
|
||||
),
|
||||
href="/",
|
||||
),
|
||||
rx.chakra.breadcrumb(
|
||||
rx.chakra.breadcrumb_item(
|
||||
rx.chakra.heading("ReflexGPT", size="sm"),
|
||||
),
|
||||
rx.chakra.breadcrumb_item(
|
||||
rx.chakra.text(
|
||||
State.current_chat, size="sm", font_weight="normal"
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.button(
|
||||
"+ New chat",
|
||||
bg=styles.accent_color,
|
||||
px="4",
|
||||
py="2",
|
||||
h="auto",
|
||||
on_click=State.toggle_modal,
|
||||
),
|
||||
rx.chakra.menu(
|
||||
rx.chakra.menu_button(
|
||||
rx.chakra.avatar(name="User", size="md"),
|
||||
rx.chakra.box(),
|
||||
),
|
||||
rx.chakra.menu_list(
|
||||
rx.chakra.menu_item("Help"),
|
||||
rx.chakra.menu_divider(),
|
||||
rx.chakra.menu_item("Settings"),
|
||||
),
|
||||
),
|
||||
spacing="8",
|
||||
),
|
||||
justify="space-between",
|
||||
),
|
||||
bg=styles.bg_dark_color,
|
||||
backdrop_filter="auto",
|
||||
backdrop_blur="lg",
|
||||
p="4",
|
||||
border_bottom=f"1px solid {styles.border_color}",
|
||||
position="sticky",
|
||||
top="0",
|
||||
z_index="100",
|
||||
)
|
||||
@ -1,66 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
from ...webui import styles
|
||||
from ...webui.state import State
|
||||
|
||||
|
||||
def sidebar_chat(chat: str) -> rx.Component:
|
||||
"""A sidebar chat item.
|
||||
|
||||
Args:
|
||||
chat: The chat item.
|
||||
|
||||
Returns:
|
||||
The sidebar chat item.
|
||||
"""
|
||||
return rx.chakra.hstack(
|
||||
rx.chakra.box(
|
||||
chat,
|
||||
on_click=lambda: State.set_chat(chat),
|
||||
style=styles.sidebar_style,
|
||||
color=styles.icon_color,
|
||||
flex="1",
|
||||
),
|
||||
rx.chakra.box(
|
||||
rx.chakra.icon(
|
||||
tag="delete",
|
||||
style=styles.icon_style,
|
||||
on_click=State.delete_chat,
|
||||
),
|
||||
style=styles.sidebar_style,
|
||||
),
|
||||
color=styles.text_light_color,
|
||||
cursor="pointer",
|
||||
)
|
||||
|
||||
|
||||
def sidebar() -> rx.Component:
|
||||
"""The sidebar component.
|
||||
|
||||
Returns:
|
||||
The sidebar component.
|
||||
"""
|
||||
return rx.chakra.drawer(
|
||||
rx.chakra.drawer_overlay(
|
||||
rx.chakra.drawer_content(
|
||||
rx.chakra.drawer_header(
|
||||
rx.chakra.hstack(
|
||||
rx.chakra.text("Chats"),
|
||||
rx.chakra.icon(
|
||||
tag="close",
|
||||
on_click=State.toggle_drawer,
|
||||
style=styles.icon_style,
|
||||
),
|
||||
)
|
||||
),
|
||||
rx.chakra.drawer_body(
|
||||
rx.chakra.vstack(
|
||||
rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)),
|
||||
align_items="stretch",
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
placement="left",
|
||||
is_open=State.drawer_open,
|
||||
)
|
||||
@ -1,146 +0,0 @@
|
||||
import asyncio
|
||||
|
||||
import reflex as rx
|
||||
|
||||
from ..state import State
|
||||
|
||||
# openai.api_key = os.environ["OPENAI_API_KEY"]
|
||||
# openai.api_base = os.getenv("OPENAI_API_BASE", "https://api.openai.com/v1")
|
||||
|
||||
|
||||
class QA(rx.Base):
|
||||
"""A question and answer pair."""
|
||||
|
||||
question: str
|
||||
answer: str
|
||||
|
||||
|
||||
DEFAULT_CHATS = {
|
||||
"Intros": [],
|
||||
}
|
||||
|
||||
|
||||
class State(State):
|
||||
"""The app state."""
|
||||
|
||||
# A dict from the chat name to the list of questions and answers.
|
||||
chats: dict[str, list[QA]] = DEFAULT_CHATS
|
||||
|
||||
# The current chat name.
|
||||
current_chat = "Intros"
|
||||
|
||||
# The current question.
|
||||
question: str
|
||||
|
||||
# Whether we are processing the question.
|
||||
processing: bool = False
|
||||
|
||||
# The name of the new chat.
|
||||
new_chat_name: str = ""
|
||||
|
||||
# Whether the drawer is open.
|
||||
drawer_open: bool = False
|
||||
|
||||
# Whether the modal is open.
|
||||
modal_open: bool = False
|
||||
|
||||
def create_chat(self):
|
||||
"""Create a new chat."""
|
||||
# Add the new chat to the list of chats.
|
||||
self.current_chat = self.new_chat_name
|
||||
self.chats[self.new_chat_name] = []
|
||||
|
||||
# Toggle the modal.
|
||||
self.modal_open = False
|
||||
|
||||
def toggle_modal(self):
|
||||
"""Toggle the new chat modal."""
|
||||
self.modal_open = not self.modal_open
|
||||
|
||||
def toggle_drawer(self):
|
||||
"""Toggle the drawer."""
|
||||
self.drawer_open = not self.drawer_open
|
||||
|
||||
def delete_chat(self):
|
||||
"""Delete the current chat."""
|
||||
del self.chats[self.current_chat]
|
||||
if len(self.chats) == 0:
|
||||
self.chats = DEFAULT_CHATS
|
||||
# set self.current_chat to the first chat.
|
||||
self.current_chat = next(iter(self.chats))
|
||||
self.toggle_drawer()
|
||||
|
||||
def set_chat(self, chat_name: str):
|
||||
"""Set the name of the current chat.
|
||||
|
||||
Args:
|
||||
chat_name: The name of the chat.
|
||||
"""
|
||||
self.current_chat = chat_name
|
||||
self.toggle_drawer()
|
||||
|
||||
@rx.var
|
||||
def chat_titles(self) -> list[str]:
|
||||
"""Get the list of chat titles.
|
||||
|
||||
Returns:
|
||||
The list of chat names.
|
||||
"""
|
||||
return [*self.chats]
|
||||
|
||||
async def process_question(self, form_data: dict[str, str]):
|
||||
"""Get the response from the API.
|
||||
|
||||
Args:
|
||||
form_data: A dict with the current question.
|
||||
|
||||
Yields:
|
||||
The current question and the response.
|
||||
"""
|
||||
# Check if the question is empty
|
||||
if self.question == "":
|
||||
return
|
||||
|
||||
# Add the question to the list of questions.
|
||||
qa = QA(question=self.question, answer="")
|
||||
self.chats[self.current_chat].append(qa)
|
||||
|
||||
# Clear the input and start the processing.
|
||||
self.processing = True
|
||||
self.question = ""
|
||||
yield
|
||||
|
||||
# # Build the messages.
|
||||
# messages = [
|
||||
# {"role": "system", "content": "You are a friendly chatbot named Reflex."}
|
||||
# ]
|
||||
# for qa in self.chats[self.current_chat]:
|
||||
# messages.append({"role": "user", "content": qa.question})
|
||||
# messages.append({"role": "assistant", "content": qa.answer})
|
||||
|
||||
# # Remove the last mock answer.
|
||||
# messages = messages[:-1]
|
||||
|
||||
# Start a new session to answer the question.
|
||||
# session = openai.ChatCompletion.create(
|
||||
# model=os.getenv("OPENAI_MODEL", "gpt-3.5-turbo"),
|
||||
# messages=messages,
|
||||
# stream=True,
|
||||
# )
|
||||
|
||||
# Stream the results, yielding after every word.
|
||||
# for item in session:
|
||||
answer = "I don't know! This Chatbot still needs to add in AI API keys!"
|
||||
for i in range(len(answer)):
|
||||
# Pause to show the streaming effect.
|
||||
await asyncio.sleep(0.1)
|
||||
# Add one letter at a time to the output.
|
||||
|
||||
# if hasattr(item.choices[0].delta, "content"):
|
||||
# answer_text = item.choices[0].delta.content
|
||||
self.chats[self.current_chat][-1].answer += answer[i]
|
||||
self.chats = self.chats
|
||||
yield
|
||||
|
||||
# Toggle the processing flag.
|
||||
self.processing = False
|
||||
@ -1,88 +0,0 @@
|
||||
import reflex as rx
|
||||
|
||||
bg_dark_color = "#111"
|
||||
bg_medium_color = "#222"
|
||||
|
||||
border_color = "#fff3"
|
||||
|
||||
accennt_light = "#6649D8"
|
||||
accent_color = "#5535d4"
|
||||
accent_dark = "#4c2db3"
|
||||
|
||||
icon_color = "#fff8"
|
||||
|
||||
text_light_color = "#fff"
|
||||
shadow_light = "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;"
|
||||
shadow = "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;"
|
||||
|
||||
message_style = dict(display="inline-block", p="4", border_radius="xl", max_w="30em")
|
||||
|
||||
input_style = dict(
|
||||
bg=bg_medium_color,
|
||||
border_color=border_color,
|
||||
border_width="1px",
|
||||
p="4",
|
||||
)
|
||||
|
||||
icon_style = dict(
|
||||
font_size="md",
|
||||
color=icon_color,
|
||||
_hover=dict(color=text_light_color),
|
||||
cursor="pointer",
|
||||
w="8",
|
||||
)
|
||||
|
||||
sidebar_style = dict(
|
||||
border="double 1px transparent;",
|
||||
border_radius="10px;",
|
||||
background_image=f"linear-gradient({bg_dark_color}, {bg_dark_color}), radial-gradient(circle at top left, {accent_color},{accent_dark});",
|
||||
background_origin="border-box;",
|
||||
background_clip="padding-box, border-box;",
|
||||
p="2",
|
||||
_hover=dict(
|
||||
background_image=f"linear-gradient({bg_dark_color}, {bg_dark_color}), radial-gradient(circle at top left, {accent_color},{accennt_light});",
|
||||
),
|
||||
)
|
||||
|
||||
base_style = {
|
||||
rx.chakra.Avatar: {
|
||||
"shadow": shadow,
|
||||
"color": text_light_color,
|
||||
# "bg": border_color,
|
||||
},
|
||||
rx.chakra.Button: {
|
||||
"shadow": shadow,
|
||||
"color": text_light_color,
|
||||
"_hover": {
|
||||
"bg": accent_dark,
|
||||
},
|
||||
},
|
||||
rx.chakra.Menu: {
|
||||
"bg": bg_dark_color,
|
||||
"border": f"red",
|
||||
},
|
||||
rx.chakra.MenuList: {
|
||||
"bg": bg_dark_color,
|
||||
"border": f"1.5px solid {bg_medium_color}",
|
||||
},
|
||||
rx.chakra.MenuDivider: {
|
||||
"border": f"1px solid {bg_medium_color}",
|
||||
},
|
||||
rx.chakra.MenuItem: {
|
||||
"bg": bg_dark_color,
|
||||
"color": text_light_color,
|
||||
},
|
||||
rx.chakra.DrawerContent: {
|
||||
"bg": bg_dark_color,
|
||||
"color": text_light_color,
|
||||
"opacity": "0.9",
|
||||
},
|
||||
rx.chakra.Hstack: {
|
||||
"align_items": "center",
|
||||
"justify_content": "space-between",
|
||||
},
|
||||
rx.chakra.Vstack: {
|
||||
"align_items": "stretch",
|
||||
"justify_content": "space-between",
|
||||
},
|
||||
}
|
||||
@ -8,11 +8,11 @@ version = "0.0.1"
|
||||
description = "Reflex custom component {{ module_name }}"
|
||||
readme = "README.md"
|
||||
license = { text = "Apache-2.0" }
|
||||
requires-python = ">=3.8"
|
||||
requires-python = ">=3.9"
|
||||
authors = [{ name = "", email = "YOUREMAIL@domain.com" }]
|
||||
keywords = ["reflex","reflex-custom-components"]
|
||||
|
||||
dependencies = ["reflex>=0.4.2"]
|
||||
dependencies = ["reflex>={{ reflex_version }}"]
|
||||
|
||||
classifiers = ["Development Status :: 4 - Beta"]
|
||||
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
{% extends "web/pages/base_page.js.jinja2" %}
|
||||
|
||||
{% block early_imports %}
|
||||
import '/styles/styles.css'
|
||||
import '$/styles/styles.css'
|
||||
{% endblock %}
|
||||
|
||||
{% block declaration %}
|
||||
import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
|
||||
import { EventLoopProvider, StateProvider, defaultColorMode } from "$/utils/context.js";
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
{% for library_alias, library_path in window_libraries %}
|
||||
import * as {{library_alias}} from "{{library_path}}";
|
||||
{% endfor %}
|
||||
|
||||
{% for custom_code in custom_codes %}
|
||||
{{custom_code}}
|
||||
@ -26,8 +29,17 @@ function AppWrap({children}) {
|
||||
}
|
||||
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
React.useEffect(() => {
|
||||
// Make contexts and state objects available globally for dynamic eval'd components
|
||||
let windowImports = {
|
||||
{% for library_alias, library_path in window_libraries %}
|
||||
"{{library_path}}": {{library_alias}},
|
||||
{% endfor %}
|
||||
};
|
||||
window["__reflex"] = windowImports;
|
||||
}, []);
|
||||
return (
|
||||
<ThemeProvider defaultTheme={ defaultColorMode } storageKey="chakra-ui-color-mode" attribute="class">
|
||||
<ThemeProvider defaultTheme={ defaultColorMode } attribute="class">
|
||||
<AppWrap>
|
||||
<StateProvider>
|
||||
<EventLoopProvider>
|
||||
|
||||
@ -8,20 +8,6 @@
|
||||
{% endfor %}
|
||||
|
||||
export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
|
||||
{% if component.name == "CodeBlock" and "language" in component.props %}
|
||||
if (language) {
|
||||
(async () => {
|
||||
try {
|
||||
const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${language}`);
|
||||
SyntaxHighlighter.registerLanguage(language, module.default);
|
||||
} catch (error) {
|
||||
console.error(`Error importing language module for ${language}:`, error);
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
}
|
||||
{% endif %}
|
||||
{% for hook in component.hooks %}
|
||||
{{ hook }}
|
||||
{% endfor %}
|
||||
|
||||
@ -5,11 +5,15 @@ export function {{tag_name}} () {
|
||||
{{ hook }}
|
||||
{% endfor %}
|
||||
|
||||
{% for hook, data in component._get_all_hooks().items() if not data.position or data.position == const.hook_position.PRE_TRIGGER %}
|
||||
{{ hook }}
|
||||
{% endfor %}
|
||||
|
||||
{% for hook in memo_trigger_hooks %}
|
||||
{{ hook }}
|
||||
{% endfor %}
|
||||
|
||||
{% for hook in component._get_all_hooks() %}
|
||||
{% for hook, data in component._get_all_hooks().items() if data.position and data.position == const.hook_position.POST_TRIGGER %}
|
||||
{{ hook }}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
@ -36,14 +36,10 @@
|
||||
{# component: component dictionary #}
|
||||
{% macro render_tag(component) %}
|
||||
<{{component.name}} {{- render_props(component.props) }}>
|
||||
{%- if component.args is not none -%}
|
||||
{{- render_arg_content(component) }}
|
||||
{%- else -%}
|
||||
{{ component.contents }}
|
||||
{% for child in component.children %}
|
||||
{{ render(child) }}
|
||||
{% endfor %}
|
||||
{%- endif -%}
|
||||
{{ component.contents }}
|
||||
{% for child in component.children %}
|
||||
{{ render(child) }}
|
||||
{% endfor %}
|
||||
</{{component.name}}>
|
||||
{%- endmacro %}
|
||||
|
||||
@ -64,11 +60,11 @@
|
||||
{# Args: #}
|
||||
{# component: component dictionary #}
|
||||
{% macro render_iterable_tag(component) %}
|
||||
{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
|
||||
<>{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
|
||||
{% for child in component.children %}
|
||||
{{ render(child) }}
|
||||
{% endfor %}
|
||||
))}
|
||||
))}</>
|
||||
{%- endmacro %}
|
||||
|
||||
|
||||
@ -85,10 +81,10 @@
|
||||
{% macro render_match_tag(component) %}
|
||||
{
|
||||
(() => {
|
||||
switch (JSON.stringify({{ component.cond._var_name_unwrapped }})) {
|
||||
switch (JSON.stringify({{ component.cond._js_expr }})) {
|
||||
{% for case in component.match_cases %}
|
||||
{% for condition in case[:-1] %}
|
||||
case JSON.stringify({{ condition._var_name_unwrapped }}):
|
||||
case JSON.stringify({{ condition._js_expr }}):
|
||||
{% endfor %}
|
||||
return {{ case[-1] }};
|
||||
break;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { createContext, useContext, useMemo, useReducer, useState } from "react"
|
||||
import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "/utils/state.js"
|
||||
import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "$/utils/state.js"
|
||||
|
||||
{% if initial_state %}
|
||||
export const initialState = {{ initial_state|json_dumps }}
|
||||
@ -7,7 +7,7 @@ export const initialState = {{ initial_state|json_dumps }}
|
||||
export const initialState = {}
|
||||
{% endif %}
|
||||
|
||||
export const defaultColorMode = "{{ default_color_mode }}"
|
||||
export const defaultColorMode = {{ default_color_mode }}
|
||||
export const ColorModeContext = createContext(null);
|
||||
export const UploadFilesContext = createContext(null);
|
||||
export const DispatchContext = createContext(null);
|
||||
@ -28,7 +28,7 @@ export const state_name = "{{state_name}}"
|
||||
|
||||
export const exception_state_name = "{{const.frontend_exception_state}}"
|
||||
|
||||
// Theses events are triggered on initial load and each page navigation.
|
||||
// These events are triggered on initial load and each page navigation.
|
||||
export const onLoadInternalEvent = () => {
|
||||
const internal_events = [];
|
||||
|
||||
@ -59,6 +59,8 @@ export const initialEvents = () => [
|
||||
{% else %}
|
||||
export const state_name = undefined
|
||||
|
||||
export const exception_state_name = undefined
|
||||
|
||||
export const onLoadInternalEvent = () => []
|
||||
|
||||
export const initialEvents = () => []
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user