From 1805db54499f356db79557fbb63694168755e350 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 16:53:09 +0800 Subject: [PATCH 01/18] Update to clock example to support reflex 0.2.0 --- clock/.gitignore | 6 +++--- clock/clock/clock.py | 48 +++++++++++++++++++++--------------------- clock/pcconfig.py | 9 -------- clock/requirements.txt | 2 +- clock/rxconfig.py | 7 ++++++ 5 files changed, 35 insertions(+), 37 deletions(-) delete mode 100644 clock/pcconfig.py create mode 100644 clock/rxconfig.py diff --git a/clock/.gitignore b/clock/.gitignore index 6a17243b..bf56ff42 100644 --- a/clock/.gitignore +++ b/clock/.gitignore @@ -1,4 +1,4 @@ -.web -pynecone.db *.py[cod] -__pycache__/ \ No newline at end of file +.web +__pycache__/ +reflex.db \ No newline at end of file diff --git a/clock/clock/clock.py b/clock/clock/clock.py index 05cac925..310027a2 100644 --- a/clock/clock/clock.py +++ b/clock/clock/clock.py @@ -1,10 +1,10 @@ -"""A Pynecone example of a analog clock.""" +"""A Reflex example of a analog clock.""" import asyncio from datetime import datetime from typing import Any -import pynecone as pc +import reflex as rx import pytz @@ -32,7 +32,7 @@ def rotate(degrees: int) -> str: return f"rotate({degrees}deg)" -class State(pc.State): +class State(rx.State): """The app state.""" # The time zone to display the clock in. @@ -41,7 +41,7 @@ class State(pc.State): # Whether the clock is running. running: bool = False - @pc.var + @rx.var def time_info(self) -> dict[str, Any]: """Get the current time info. @@ -91,7 +91,7 @@ def flip_switch(self, running: bool): return self.tick -def clock_hand(rotation: str, color: str, length: str) -> pc.Component: +def clock_hand(rotation: str, color: str, length: str) -> rx.Component: """Create a clock hand. Args: @@ -102,7 +102,7 @@ def clock_hand(rotation: str, color: str, length: str) -> pc.Component: Returns: A clock hand component. """ - return pc.divider( + return rx.divider( transform=rotation, width=f"{length}em", position="absolute", @@ -113,11 +113,11 @@ def clock_hand(rotation: str, color: str, length: str) -> pc.Component: ) -def analog_clock() -> pc.Component: +def analog_clock() -> rx.Component: """Create the analog clock.""" - return pc.circle( + return rx.circle( # The inner circle. - pc.circle( + rx.circle( width="1em", height="1em", border_width="thick", @@ -137,15 +137,15 @@ def analog_clock() -> pc.Component: ) -def digital_clock() -> pc.Component: +def digital_clock() -> rx.Component: """Create the digital clock.""" - return pc.hstack( - pc.heading(State.time_info["hour"]), - pc.heading(":"), - pc.heading(State.time_info["minute_display"]), - pc.heading(":"), - pc.heading(State.time_info["second_display"]), - pc.heading(State.time_info["meridiem"]), + return rx.hstack( + rx.heading(State.time_info["hour"]), + rx.heading(":"), + rx.heading(State.time_info["minute_display"]), + rx.heading(":"), + rx.heading(State.time_info["second_display"]), + rx.heading(State.time_info["meridiem"]), border_width="medium", border_color="#43464B", border_radius="2em", @@ -155,9 +155,9 @@ def digital_clock() -> pc.Component: ) -def timezone_select() -> pc.Component: +def timezone_select() -> rx.Component: """Create the timezone select.""" - return pc.select( + return rx.select( TIMEZONES, placeholder="Select a time zone.", on_change=State.set_zone, @@ -168,12 +168,12 @@ def timezone_select() -> pc.Component: def index(): """The main view.""" - return pc.center( - pc.vstack( + return rx.center( + rx.vstack( analog_clock(), - pc.hstack( + rx.hstack( digital_clock(), - pc.switch(is_checked=State.running, on_change=State.flip_switch), + rx.switch(is_checked=State.running, on_change=State.flip_switch), ), timezone_select(), padding="5em", @@ -188,6 +188,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index, title="Clock", on_load=State.on_load) app.compile() diff --git a/clock/pcconfig.py b/clock/pcconfig.py deleted file mode 100644 index 9b93a3ec..00000000 --- a/clock/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="clock", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/clock/requirements.txt b/clock/requirements.txt index 121baecc..eac3e8f5 100644 --- a/clock/requirements.txt +++ b/clock/requirements.txt @@ -1,2 +1,2 @@ -pynecone>=0.1.33 +reflex>=0.2.0 pytz==2022.7.1 \ No newline at end of file diff --git a/clock/rxconfig.py b/clock/rxconfig.py new file mode 100644 index 00000000..cdcf1710 --- /dev/null +++ b/clock/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="clock", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) From ea4ac9d7b38235ac89a2106a91ba919b0e2d8e46 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 17:12:18 +0800 Subject: [PATCH 02/18] Update to crm example to support reflex 0.2.0 --- crm/.gitignore | 4 +-- crm/crm/components/crm.py | 60 ++++++++++++++++++------------------ crm/crm/components/navbar.py | 20 ++++++------ crm/crm/crm.py | 6 ++-- crm/crm/pages/index.py | 18 +++++------ crm/crm/pages/login.py | 18 +++++------ crm/crm/state/login.py | 16 +++++----- crm/crm/state/models.py | 6 ++-- crm/crm/state/state.py | 4 +-- crm/pcconfig.py | 8 ----- crm/requirements.txt | 2 +- crm/rxconfig.py | 8 +++++ 12 files changed, 85 insertions(+), 85 deletions(-) delete mode 100644 crm/pcconfig.py create mode 100644 crm/rxconfig.py diff --git a/crm/.gitignore b/crm/.gitignore index 42649afd..bf56ff42 100644 --- a/crm/.gitignore +++ b/crm/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/crm/crm/components/crm.py b/crm/crm/components/crm.py index 5a310a4b..db34357a 100644 --- a/crm/crm/components/crm.py +++ b/crm/crm/components/crm.py @@ -1,6 +1,6 @@ from crm.state import State from crm.state.models import Contact -import pynecone as pc +import reflex as rx class CRMState(State): @@ -8,7 +8,7 @@ class CRMState(State): query = "" def get_contacts(self) -> list[Contact]: - with pc.session() as sess: + with rx.session() as sess: if self.query != "": print("Query...") self.contacts = ( @@ -28,7 +28,7 @@ def filter(self, query): print("Returning...") return self.get_contacts() - @pc.var + @rx.var def num_contacts(self): return len(self.contacts) @@ -44,7 +44,7 @@ def toggle(self): def add_contact(self): if not self.user: raise ValueError("No user logged in") - with pc.session() as sess: + with rx.session() as sess: sess.expire_on_commit = False sess.add( Contact( @@ -57,22 +57,22 @@ def add_contact(self): def add_modal(): - return pc.modal( - pc.modal_overlay( - pc.modal_content( - pc.modal_header("Add"), - pc.modal_body( - pc.input( + return rx.modal( + rx.modal_overlay( + rx.modal_content( + rx.modal_header("Add"), + rx.modal_body( + rx.input( on_change=AddModalState.set_name, placeholder="Name", margin_bottom="0.5rem", ), - pc.input(on_change=AddModalState.set_email, placeholder="Email"), + rx.input(on_change=AddModalState.set_email, placeholder="Email"), padding_y=0, ), - pc.modal_footer( - pc.button("Close", on_click=AddModalState.toggle), - pc.button( + rx.modal_footer( + rx.button("Close", on_click=AddModalState.toggle), + rx.button( "Add", on_click=AddModalState.add_contact, margin_left="0.5rem" ), ), @@ -85,27 +85,27 @@ def add_modal(): def contact_row( contact, ): - return pc.tr( - pc.td(contact.contact_name), - pc.td(contact.email), - pc.td(pc.badge(contact.stage)), + return rx.tr( + rx.td(contact.contact_name), + rx.td(contact.email), + rx.td(rx.badge(contact.stage)), ) def crm(): - return pc.box( - pc.button("Refresh", on_click=CRMState.get_contacts), - pc.hstack( - pc.heading("Contacts"), - pc.button("Add", on_click=AddModalState.toggle), + return rx.box( + rx.button("Refresh", on_click=CRMState.get_contacts), + rx.hstack( + rx.heading("Contacts"), + rx.button("Add", on_click=AddModalState.toggle), justify_content="space-between", align_items="flex-start", margin_bottom="1rem", ), - pc.responsive_grid( - pc.box( - pc.stat( - pc.stat_label("Contacts"), pc.stat_number(CRMState.num_contacts) + rx.responsive_grid( + rx.box( + rx.stat( + rx.stat_label("Contacts"), rx.stat_number(CRMState.num_contacts) ), border="1px solid #eaeaef", padding="1rem", @@ -115,9 +115,9 @@ def crm(): margin_bottom="1rem", ), add_modal(), - pc.input(placeholder="Filter by name...", on_change=CRMState.filter), - pc.table_container( - pc.table(pc.tbody(pc.foreach(CRMState.contacts, contact_row))), + rx.input(placeholder="Filter by name...", on_change=CRMState.filter), + rx.table_container( + rx.table(rx.tbody(rx.foreach(CRMState.contacts, contact_row))), margin_top="1rem", ), width="100%", diff --git a/crm/crm/components/navbar.py b/crm/crm/components/navbar.py index 28c65190..53d3f3cf 100644 --- a/crm/crm/components/navbar.py +++ b/crm/crm/components/navbar.py @@ -1,24 +1,24 @@ from crm.state import State, LoginState -import pynecone as pc +import reflex as rx def navbar(): - return pc.box( - pc.hstack( - pc.link("Pyneknown", href="/", font_weight="medium"), - pc.hstack( - pc.cond( + return rx.box( + rx.hstack( + rx.link("Pyneknown", href="/", font_weight="medium"), + rx.hstack( + rx.cond( State.user, - pc.hstack( - pc.link( + rx.hstack( + rx.link( "Log out", color="blue.600", on_click=LoginState.log_out, ), - pc.avatar(name=State.user.email, size="md"), + rx.avatar(name=State.user.email, size="md"), spacing="1rem", ), - pc.box(), + rx.box(), ) ), justify_content="space-between", diff --git a/crm/crm/crm.py b/crm/crm/crm.py index 84d05ecd..db298a67 100644 --- a/crm/crm/crm.py +++ b/crm/crm/crm.py @@ -1,11 +1,11 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" -import pynecone as pc +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" +import reflex as rx from crm.pages import index, login from crm.state import State # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index) app.add_page(login) app.compile() diff --git a/crm/crm/pages/index.py b/crm/crm/pages/index.py index 5cbbffa6..1866144d 100644 --- a/crm/crm/pages/index.py +++ b/crm/crm/pages/index.py @@ -1,22 +1,22 @@ from crm.components import navbar from crm.components import crm from crm.state import State -import pynecone as pc +import reflex as rx def index(): - return pc.vstack( + return rx.vstack( navbar(), - pc.cond( + rx.cond( State.user, crm(), - pc.vstack( - pc.heading("Welcome to Pyneknown!"), - pc.text( - "This Pynecone example demonstrates how to build a fully-fledged customer relationship management (CRM) interface." + rx.vstack( + rx.heading("Welcome to Pyneknown!"), + rx.text( + "This Reflex example demonstrates how to build a fully-fledged customer relationship management (CRM) interface." ), - pc.link( - pc.button( + rx.link( + rx.button( "Log in to get started", color_scheme="blue", underline="none" ), href="/login", diff --git a/crm/crm/pages/login.py b/crm/crm/pages/login.py index e81471e3..af2871af 100644 --- a/crm/crm/pages/login.py +++ b/crm/crm/pages/login.py @@ -1,28 +1,28 @@ from crm.state import LoginState from crm.components import navbar -import pynecone as pc +import reflex as rx def login(): - return pc.vstack( + return rx.vstack( navbar(), - pc.box( - pc.heading("Log in", margin_bottom="1rem"), - pc.input( + rx.box( + rx.heading("Log in", margin_bottom="1rem"), + rx.input( type_="email", placeholder="Email", margin_bottom="1rem", on_change=LoginState.set_email_field, ), - pc.input( + rx.input( type_="password", placeholder="Password", margin_bottom="1rem", on_change=LoginState.set_password_field, ), - pc.button("Log in", on_click=LoginState.log_in), - pc.box( - pc.link( + rx.button("Log in", on_click=LoginState.log_in), + rx.box( + rx.link( "Or sign up with this email and password", href="#", on_click=LoginState.sign_up, diff --git a/crm/crm/state/login.py b/crm/crm/state/login.py index 61416f9d..7a0d97ed 100644 --- a/crm/crm/state/login.py +++ b/crm/crm/state/login.py @@ -1,4 +1,4 @@ -import pynecone as pc +import reflex as rx from .models import User from .state import State @@ -10,19 +10,19 @@ class LoginState(State): password_field: str = "" def log_in(self): - with pc.session() as sess: + with rx.session() as sess: user = sess.exec(User.select.where(User.email == self.email_field)).first() if user and user.password == self.password_field: self.user = user - return pc.redirect("/") + return rx.redirect("/") else: - return pc.window_alert("Wrong username or password.") + return rx.window_alert("Wrong username or password.") def sign_up(self): - with pc.session() as sess: + with rx.session() as sess: user = sess.exec(User.select.where(User.email == self.email_field)).first() if user: - return pc.window_alert( + return rx.window_alert( "Looks like you’re already registered! Try logging in instead." ) else: @@ -31,8 +31,8 @@ def sign_up(self): self.user = user sess.add(user) sess.commit() - return pc.redirect("/") + return rx.redirect("/") def log_out(self): self.user = None - return pc.redirect("/") + return rx.redirect("/") diff --git a/crm/crm/state/models.py b/crm/crm/state/models.py index b836288e..95e8b937 100644 --- a/crm/crm/state/models.py +++ b/crm/crm/state/models.py @@ -1,12 +1,12 @@ -import pynecone as pc +import reflex as rx -class User(pc.Model, table=True): +class User(rx.Model, table=True): email: str password: str -class Contact(pc.Model, table=True): +class Contact(rx.Model, table=True): user_email: str contact_name: str email: str diff --git a/crm/crm/state/state.py b/crm/crm/state/state.py index d72c7f39..aeb2058f 100644 --- a/crm/crm/state/state.py +++ b/crm/crm/state/state.py @@ -1,9 +1,9 @@ from typing import Optional -import pynecone as pc +import reflex as rx from .models import User, Contact -class State(pc.State): +class State(rx.State): """The app state.""" user: Optional[User] = None diff --git a/crm/pcconfig.py b/crm/pcconfig.py deleted file mode 100644 index c0c9f65b..00000000 --- a/crm/pcconfig.py +++ /dev/null @@ -1,8 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="crm", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/crm/requirements.txt b/crm/requirements.txt index 0a8f4c6e..210218f4 100644 --- a/crm/requirements.txt +++ b/crm/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 \ No newline at end of file +reflex>=0.2.0 \ No newline at end of file diff --git a/crm/rxconfig.py b/crm/rxconfig.py new file mode 100644 index 00000000..e9c845ed --- /dev/null +++ b/crm/rxconfig.py @@ -0,0 +1,8 @@ +import reflex as rx + + +config = rx.Config( + app_name="crm", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) From 750d6a224a01495fa4ab3c5cf9c2d858bc3d323b Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 17:19:03 +0800 Subject: [PATCH 03/18] Update fragment example to support reflex 0.2.0 --- fragments/.gitignore | 4 ++-- fragments/fragments/fragments.py | 34 ++++++++++++++++---------------- fragments/pcconfig.py | 8 -------- fragments/requirements.txt | 2 +- fragments/rxconfig.py | 8 ++++++++ 5 files changed, 28 insertions(+), 28 deletions(-) delete mode 100644 fragments/pcconfig.py create mode 100644 fragments/rxconfig.py diff --git a/fragments/.gitignore b/fragments/.gitignore index 42649afd..bf56ff42 100644 --- a/fragments/.gitignore +++ b/fragments/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/fragments/fragments/fragments.py b/fragments/fragments/fragments.py index b53a7d58..f6fa50c2 100644 --- a/fragments/fragments/fragments.py +++ b/fragments/fragments/fragments.py @@ -1,43 +1,43 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" -from pcconfig import config +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" +from rxconfig import config -import pynecone as pc +import reflex as rx -docs_url = "https://pynecone.io/docs/getting-started/introduction" +docs_url = "https://reflex.dev/docs/getting-started/introduction" filename = f"{config.app_name}/{config.app_name}.py" -class State(pc.State): +class State(rx.State): """The app state.""" pass def raw_fragment_intro(): - """Raw fragment: Return a raw list of Pynecone components, and use * to use the fragment.""" + """Raw fragment: Return a raw list of Reflex components, and use * to use the fragment.""" return [ - pc.heading("This is a raw fragment", font_size="2em"), - pc.box("Just regular Python! Use these with the * operator."), + rx.heading("This is a raw fragment", font_size="2em"), + rx.box("Just regular Python! Use these with the * operator."), ] def react_fragment_intro(): - """React fragment: Wrap the result into a `pc.fragment` to take advantage of React fragments. Use normally.""" - return pc.fragment( - pc.heading("This is a React fragment", font_size="2em"), - pc.box( + """React fragment: Wrap the result into a `rx.fragment` to take advantage of React fragments. Use normally.""" + return rx.fragment( + rx.heading("This is a React fragment", font_size="2em"), + rx.box( "Read the fragment docs at ", - pc.link("https://reactjs.org/docs/fragments.html"), + rx.link("https://reactjs.org/docs/fragments.html"), ), ) def index(): - return pc.center( - pc.vstack( + return rx.center( + rx.vstack( *raw_fragment_intro(), react_fragment_intro(), - pc.link( + rx.link( "Check out our docs!", href=docs_url, border="0.1em solid", @@ -55,6 +55,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index) app.compile() diff --git a/fragments/pcconfig.py b/fragments/pcconfig.py deleted file mode 100644 index 702068f5..00000000 --- a/fragments/pcconfig.py +++ /dev/null @@ -1,8 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="fragments", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/fragments/requirements.txt b/fragments/requirements.txt index 0a8f4c6e..210218f4 100644 --- a/fragments/requirements.txt +++ b/fragments/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 \ No newline at end of file +reflex>=0.2.0 \ No newline at end of file diff --git a/fragments/rxconfig.py b/fragments/rxconfig.py new file mode 100644 index 00000000..fef21118 --- /dev/null +++ b/fragments/rxconfig.py @@ -0,0 +1,8 @@ +import reflex as rx + + +config = rx.Config( + app_name="fragments", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) From e597f7c28ec122ac06ce513cd31e311d0a945bf4 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 17:25:33 +0800 Subject: [PATCH 04/18] Update gpt example to support reflex 0.2.0 --- gpt/.gitignore | 4 +- gpt/gpt/gpt.py | 100 ++++++++++++++++++++++----------------------- gpt/gpt/helpers.py | 36 ++++++++-------- gpt/pcconfig.py | 9 ---- gpt/rxconfig.py | 8 ++++ 5 files changed, 78 insertions(+), 79 deletions(-) delete mode 100644 gpt/pcconfig.py create mode 100644 gpt/rxconfig.py diff --git a/gpt/.gitignore b/gpt/.gitignore index 42649afd..bf56ff42 100644 --- a/gpt/.gitignore +++ b/gpt/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/gpt/gpt/gpt.py b/gpt/gpt/gpt.py index 26532710..73f82d66 100644 --- a/gpt/gpt/gpt.py +++ b/gpt/gpt/gpt.py @@ -1,5 +1,5 @@ -"""Welcome to Pynecone! This app is a demonstration of OpenAI's GPT.""" -import pynecone as pc +"""Welcome to Reflex! This app is a demonstration of OpenAI's GPT.""" +import reflex as rx from .helpers import navbar import openai import datetime @@ -8,14 +8,14 @@ MAX_QUESTIONS = 10 -class User(pc.Model, table=True): +class User(rx.Model, table=True): """A table for users in the database.""" username: str password: str -class Question(pc.Model, table=True): +class Question(rx.Model, table=True): """A table for questions and answers in the database.""" username: str @@ -24,7 +24,7 @@ class Question(pc.Model, table=True): timestamp: datetime.datetime = datetime.datetime.now() -class State(pc.State): +class State(rx.State): """The app state.""" show_columns = ["Question", "Answer"] username: str = "" @@ -34,10 +34,10 @@ class State(pc.State): prompt: str = "" result: str = "" - @pc.var + @rx.var def questions(self) -> list[Question]: """Get the users saved questions and answers from the database.""" - with pc.session() as session: + with rx.session() as session: if self.logged_in: qa = ( session.query(Question) @@ -52,34 +52,34 @@ def questions(self) -> list[Question]: return [] def login(self): - with pc.session() as session: + with rx.session() as session: user = session.query(User).where(User.username == self.username).first() if (user and user.password == self.password) or self.username == "admin": self.logged_in = True - return pc.redirect("/home") + return rx.redirect("/home") else: - return pc.window_alert("Invalid username or password.") + return rx.window_alert("Invalid username or password.") def logout(self): self.reset() - return pc.redirect("/") + return rx.redirect("/") def signup(self): - with pc.session() as session: + with rx.session() as session: user = User(username=self.username, password=self.password) session.add(user) session.commit() self.logged_in = True - return pc.redirect("/home") + return rx.redirect("/home") def get_result(self): if ( - pc.session() + rx.session() .query(Question) .where(Question.username == self.username) .where(Question.prompt == self.prompt) .first() - or pc.session() + or rx.session() .query(Question) .where(Question.username == self.username) .where( @@ -89,7 +89,7 @@ def get_result(self): .count() > MAX_QUESTIONS ): - return pc.window_alert( + return rx.window_alert( "You have already asked this question or have asked too many questions in the past 24 hours." ) try: @@ -102,10 +102,10 @@ def get_result(self): ) self.result = response["choices"][0]["text"].replace("\n", "") except: - return pc.window_alert("Error occured with OpenAI execution.") + return rx.window_alert("Error occured with OpenAI execution.") def save_result(self): - with pc.session() as session: + with rx.session() as session: answer = Question( username=self.username, prompt=self.prompt, answer=self.result ) @@ -120,22 +120,22 @@ def set_password(self, password): def home(): - return pc.center( + return rx.center( navbar(State), - pc.vstack( - pc.center( - pc.vstack( - pc.heading("Ask GPT", font_size="1.5em"), - pc.input( + rx.vstack( + rx.center( + rx.vstack( + rx.heading("Ask GPT", font_size="1.5em"), + rx.input( on_blur=State.set_prompt, placeholder="Question", width="100%" ), - pc.button("Get Answer", on_click=State.get_result, width="100%"), - pc.text_area( + rx.button("Get Answer", on_click=State.get_result, width="100%"), + rx.text_area( default_value=State.result, placeholder="GPT Result", width="100%", ), - pc.button("Save Answer", on_click=State.save_result, width="100%"), + rx.button("Save Answer", on_click=State.save_result, width="100%"), shadow="lg", padding="1em", border_radius="lg", @@ -143,11 +143,11 @@ def home(): ), width="100%", ), - pc.center( - pc.vstack( - pc.heading("Saved Q&A", font_size="1.5em"), - pc.divider(), - pc.data_table( + rx.center( + rx.vstack( + rx.heading("Saved Q&A", font_size="1.5em"), + rx.divider(), + rx.data_table( data=State.questions, # columns=["Question", "Answer"], columns=State.show_columns, @@ -173,12 +173,12 @@ def home(): def login(): - return pc.center( - pc.vstack( - pc.input(on_blur=State.set_username, placeholder="Username", width="100%"), - pc.input(type_="password", on_blur=State.set_password, placeholder="Password", width="100%"), - pc.button("Login", on_click=State.login, width="100%"), - pc.link(pc.button("Sign Up", width="100%"), href="/signup", width="100%"), + return rx.center( + rx.vstack( + rx.input(on_blur=State.set_username, placeholder="Username", width="100%"), + rx.input(type_="password", on_blur=State.set_password, placeholder="Password", width="100%"), + rx.button("Login", on_click=State.login, width="100%"), + rx.link(rx.button("Sign Up", width="100%"), href="/signup", width="100%"), ), shadow="lg", padding="1em", @@ -188,24 +188,24 @@ def login(): def signup(): - return pc.box( - pc.vstack( - pc.center( - pc.vstack( - pc.heading("GPT Sign Up", font_size="1.5em"), - pc.input( + return rx.box( + rx.vstack( + rx.center( + rx.vstack( + rx.heading("GPT Sign Up", font_size="1.5em"), + rx.input( on_blur=State.set_username, placeholder="Username", width="100%" ), - pc.input( + rx.input( type_="password", on_blur=State.set_password, placeholder="Password", width="100%" ), - pc.input( + rx.input( type_="password", on_blur=State.set_password, placeholder="Confirm Password", width="100%", ), - pc.button("Sign Up", on_click=State.signup, width="100%"), + rx.button("Sign Up", on_click=State.signup, width="100%"), ), shadow="lg", padding="1em", @@ -223,8 +223,8 @@ def signup(): def index(): - return pc.box( - pc.vstack( + return rx.box( + rx.vstack( navbar(State), login(), ), @@ -238,7 +238,7 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index) app.add_page(signup) app.add_page(home) diff --git a/gpt/gpt/helpers.py b/gpt/gpt/helpers.py index fa27ae04..1ef034c2 100644 --- a/gpt/gpt/helpers.py +++ b/gpt/gpt/helpers.py @@ -1,30 +1,30 @@ -import pynecone as pc +import reflex as rx def navbar(State): - return pc.box( - pc.hstack( - pc.link( - pc.hstack(pc.image(src="favicon.ico"), pc.heading("GPT Demo")), href="/" + return rx.box( + rx.hstack( + rx.link( + rx.hstack(rx.image(src="favicon.ico"), rx.heading("GPT Demo")), href="/" ), - pc.menu( - pc.menu_button( - pc.cond( + rx.menu( + rx.menu_button( + rx.cond( State.logged_in, - pc.avatar(name=State.username, size="md"), - pc.box(), + rx.avatar(name=State.username, size="md"), + rx.box(), ) ), - pc.menu_list( - pc.center( - pc.vstack( - pc.avatar(name=State.username, size="md"), - pc.text(State.username), + rx.menu_list( + rx.center( + rx.vstack( + rx.avatar(name=State.username, size="md"), + rx.text(State.username), ) ), - pc.menu_divider(), - pc.link(pc.menu_item("About GPT"), href="https://openai.com/api/"), - pc.link(pc.menu_item("Sign Out"), on_click=State.logout), + rx.menu_divider(), + rx.link(rx.menu_item("About GPT"), href="https://openai.com/api/"), + rx.link(rx.menu_item("Sign Out"), on_click=State.logout), ), ), justify="space-between", diff --git a/gpt/pcconfig.py b/gpt/pcconfig.py deleted file mode 100644 index 28e3ed50..00000000 --- a/gpt/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="gpt", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/gpt/rxconfig.py b/gpt/rxconfig.py new file mode 100644 index 00000000..9ed2d91c --- /dev/null +++ b/gpt/rxconfig.py @@ -0,0 +1,8 @@ +import reflex as rx + + +config = rx.Config( + app_name="gpt", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) From e02d3c2ce0d2423d912fcc60ca8cdffb32a95906 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 17:34:00 +0800 Subject: [PATCH 05/18] Update nba example to support reflex 0.2.0 --- nba/.gitignore | 4 +-- nba/nba/helpers.py | 32 +++++++++++----------- nba/nba/nba.py | 64 ++++++++++++++++++++++---------------------- nba/pcconfig.py | 9 ------- nba/requirements.txt | 2 +- nba/rxconfig.py | 7 +++++ 6 files changed, 58 insertions(+), 60 deletions(-) delete mode 100644 nba/pcconfig.py create mode 100644 nba/rxconfig.py diff --git a/nba/.gitignore b/nba/.gitignore index 42649afd..bf56ff42 100644 --- a/nba/.gitignore +++ b/nba/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/nba/nba/helpers.py b/nba/nba/helpers.py index e0aae8f5..8cd25893 100644 --- a/nba/nba/helpers.py +++ b/nba/nba/helpers.py @@ -1,26 +1,26 @@ -import pynecone as pc +import reflex as rx def navbar(): - return pc.box( - pc.hstack( - pc.hstack( - pc.image(src="/nba.png", width="50px"), - pc.heading("NBA Data"), - pc.flex( - pc.badge("2015-2016 Season", color_scheme="blue"), + return rx.box( + rx.hstack( + rx.hstack( + rx.image(src="/nba.png", width="50px"), + rx.heading("NBA Data"), + rx.flex( + rx.badge("2015-2016 Season", color_scheme="blue"), ), ), - pc.menu( - pc.menu_button( + rx.menu( + rx.menu_button( "Menu", bg="black", color="white", border_radius="md", px=4, py=2 ), - pc.menu_list( - pc.link(pc.menu_item("Graph"), href="/"), - pc.menu_divider(), - pc.link( - pc.menu_item( - pc.hstack(pc.text("20Dataset"), pc.icon(tag="download")) + rx.menu_list( + rx.link(rx.menu_item("Graph"), href="/"), + rx.menu_divider(), + rx.link( + rx.menu_item( + rx.hstack(rx.text("20Dataset"), rx.icon(tag="download")) ), href="https://media.geeksforgeeks.org/wp-content/uploads/nba.csv", ), diff --git a/nba/nba/nba.py b/nba/nba/nba.py index 2fd17b21..a8a368d2 100644 --- a/nba/nba/nba.py +++ b/nba/nba/nba.py @@ -1,5 +1,5 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" -import pynecone as pc +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" +import reflex as rx import pandas as pd import plotly.express as px import plotly.graph_objects as go @@ -10,7 +10,7 @@ college = sorted(nba_data["College"].unique().astype(str)) -class State(pc.State): +class State(rx.State): """The app state.""" position: str @@ -18,7 +18,7 @@ class State(pc.State): age: list = [0, 50] salary: list = [0, 25000000] - @pc.var + @rx.var def df(self) -> pd.DataFrame: """The data.""" nba = nba_data[ @@ -39,7 +39,7 @@ def df(self) -> pd.DataFrame: else: return nba.fillna("") - @pc.var + @rx.var def scat_fig(self) -> go.Figure: """The scatter figure.""" nba = self.df @@ -59,7 +59,7 @@ def scat_fig(self) -> go.Figure: trendline_scope="overall", ) - @pc.var + @rx.var def hist_fig(self) -> go.Figure: """The histogram figure.""" nba = self.df @@ -76,38 +76,38 @@ def hist_fig(self) -> go.Figure: def selection(): - return pc.vstack( - pc.hstack( - pc.vstack( - pc.select( + return rx.vstack( + rx.hstack( + rx.vstack( + rx.select( ["C", "PF", "SF", "PG", "SG"], placeholder="Select a position. (All)", on_change=State.set_position, ), - pc.select( + rx.select( college, placeholder="Select a college. (All)", on_change=State.set_college, ), ), - pc.vstack( - pc.vstack( - pc.hstack( - pc.badge("Min Age: ", State.age[0]), - pc.spacer(), - pc.badge("Max Age: ", State.age[1]), + rx.vstack( + rx.vstack( + rx.hstack( + rx.badge("Min Age: ", State.age[0]), + rx.spacer(), + rx.badge("Max Age: ", State.age[1]), ), - pc.range_slider(on_change_end=State.set_age, min_=18, max_=50), + rx.range_slider(on_change_end=State.set_age, min_=18, max_=50), align_items="left", width="100%", ), - pc.vstack( - pc.hstack( - pc.badge("Min Sal: ", State.salary[0] // 1000000, "M"), - pc.spacer(), - pc.badge("Max Sal: ", State.salary[1] // 1000000, "M"), + rx.vstack( + rx.hstack( + rx.badge("Min Sal: ", State.salary[0] // 1000000, "M"), + rx.spacer(), + rx.badge("Max Sal: ", State.salary[1] // 1000000, "M"), ), - pc.range_slider( + rx.range_slider( on_change_end=State.set_salary, min_=0, max_=25000000 ), align_items="left", @@ -122,21 +122,21 @@ def selection(): def index(): """The main view.""" - return pc.center( - pc.vstack( + return rx.center( + rx.vstack( navbar(), selection(), - pc.divider(), - pc.plotly(data=State.scat_fig, layout={"width": "1000", "height": "600"}), - pc.plotly(data=State.hist_fig, layout={"width": "1000", "height": "600"}), - pc.data_table( + rx.divider(), + rx.plotly(data=State.scat_fig, layout={"width": "1000", "height": "600"}), + rx.plotly(data=State.hist_fig, layout={"width": "1000", "height": "600"}), + rx.data_table( data=nba_data, pagination=True, search=True, sort=True, resizable=True, ), - pc.divider(), + rx.divider(), padding_top="6em", width="100%", ) @@ -144,6 +144,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index, title="NBA App") app.compile() diff --git a/nba/pcconfig.py b/nba/pcconfig.py deleted file mode 100644 index 64e1cda1..00000000 --- a/nba/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="nba", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/nba/requirements.txt b/nba/requirements.txt index 754263c8..d6145b5c 100644 --- a/nba/requirements.txt +++ b/nba/requirements.txt @@ -1,4 +1,4 @@ -pynecone>=0.1.33 +reflex>=0.2.0 plotly-express plotly pandas diff --git a/nba/rxconfig.py b/nba/rxconfig.py new file mode 100644 index 00000000..3c46d12d --- /dev/null +++ b/nba/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="nba", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) From 8931f3388cc35ae2c1a2b33056a6a983e1cc00ea Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:00:27 +0800 Subject: [PATCH 06/18] Update quiz example to support reflex 0.2.0 --- quiz/.gitignore | 4 +-- quiz/pcconfig.py | 9 ----- quiz/quiz/quiz.py | 80 +++++++++++++++++++++---------------------- quiz/quiz/results.py | 52 ++++++++++++++-------------- quiz/requirements.txt | 2 +- quiz/rxconfig.py | 7 ++++ 6 files changed, 76 insertions(+), 78 deletions(-) delete mode 100644 quiz/pcconfig.py create mode 100644 quiz/rxconfig.py diff --git a/quiz/.gitignore b/quiz/.gitignore index 42649afd..bf56ff42 100644 --- a/quiz/.gitignore +++ b/quiz/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/quiz/pcconfig.py b/quiz/pcconfig.py deleted file mode 100644 index ca908102..00000000 --- a/quiz/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="quiz", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/quiz/quiz/quiz.py b/quiz/quiz/quiz.py index e399e650..edf9b55e 100644 --- a/quiz/quiz/quiz.py +++ b/quiz/quiz/quiz.py @@ -1,5 +1,5 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" -import pynecone as pc +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" +import reflex as rx import copy from .results import results from typing import Any @@ -14,7 +14,7 @@ } -class State(pc.State): +class State(rx.State): """The app state.""" default_answers = [None, None, [False, False, False, False, False]] answers:List[Any] @@ -36,30 +36,30 @@ def submit(self): correct += 1 total += 1 self.score = int(correct / total * 100) - return pc.redirect("/result") + return rx.redirect("/result") def header(): - return pc.vstack( - pc.heading("Python Quiz"), - pc.divider(), - pc.text("Here is an example of a quiz made in Pynecone."), - pc.text("Once submitted the results will be shown in the results page."), + return rx.vstack( + rx.heading("Python Quiz"), + rx.divider(), + rx.text("Here is an example of a quiz made in Reflex."), + rx.text("Once submitted the results will be shown in the results page."), style=question_style, ) def question1(): """The main view.""" - return pc.vstack( - pc.heading("Question #1"), - pc.text( + return rx.vstack( + rx.heading("Question #1"), + rx.text( "In Python 3, the maximum value for an integer is 26", - pc.text("3", as_="sup"), + rx.text("3", as_="sup"), " - 1", ), - pc.divider(), - pc.radio_group( + rx.divider(), + rx.radio_group( ["True", "False"], default_value=State.default_answers[0], default_checked=True, @@ -70,17 +70,17 @@ def question1(): def question2(): - return pc.vstack( - pc.heading("Question #2"), - pc.text("What is the output of the following addition (+) operator?"), - pc.code_block( + return rx.vstack( + rx.heading("Question #2"), + rx.text("What is the output of the following addition (+) operator?"), + rx.code_block( """a = [10, 20] b = a b += [30, 40] print(a)""", language="python", ), - pc.radio_group( + rx.radio_group( ["[10, 20, 30, 40]", "[10, 20]"], default_value=State.default_answers[1], default_check=True, @@ -91,32 +91,32 @@ def question2(): def question3(): - return pc.vstack( - pc.heading("Question #3"), - pc.text( + return rx.vstack( + rx.heading("Question #3"), + rx.text( "Which of the following are valid ways to specify the string literal ", - pc.code("foo'bar"), + rx.code("foo'bar"), " in Python:", ), - pc.vstack( - pc.checkbox( - pc.code("foo'bar"), + rx.vstack( + rx.checkbox( + rx.code("foo'bar"), on_change=lambda answer: State.set_answers(answer, 2, 0), ), - pc.checkbox( - pc.code("'foo''bar'"), + rx.checkbox( + rx.code("'foo''bar'"), on_change=lambda answer: State.set_answers(answer, 2, 1), ), - pc.checkbox( - pc.code("'foo\\\\'bar'"), + rx.checkbox( + rx.code("'foo\\\\'bar'"), on_change=lambda answer: State.set_answers(answer, 2, 2), ), - pc.checkbox( - pc.code('''"""foo'bar"""'''), + rx.checkbox( + rx.code('''"""foo'bar"""'''), on_change=lambda answer: State.set_answers(answer, 2, 3), ), - pc.checkbox( - pc.code('''"foo'bar"'''), + rx.checkbox( + rx.code('''"foo'bar"'''), on_change=lambda answer: State.set_answers(answer, 2, 4), ), align_items="left", @@ -127,13 +127,13 @@ def question3(): def index(): """The main view.""" - return pc.center( - pc.vstack( + return rx.center( + rx.vstack( header(), question1(), question2(), question3(), - pc.button( + rx.button( "Submit", bg="black", color="white", @@ -156,7 +156,7 @@ def result(): # Add state and page to the app. -app = pc.App(state=State) -app.add_page(index, title="Pynecone Quiz", on_load=State.onload) +app = rx.App(state=State) +app.add_page(index, title="Reflex Quiz", on_load=State.onload) app.add_page(result, title="Quiz Results") app.compile() diff --git a/quiz/quiz/results.py b/quiz/quiz/results.py index 5dcfb786..8a115a3b 100644 --- a/quiz/quiz/results.py +++ b/quiz/quiz/results.py @@ -1,4 +1,4 @@ -import pynecone as pc +import reflex as rx answer_style = { "border_radius": "10px", @@ -10,46 +10,46 @@ def render_answer(State, index): - return pc.tr( - pc.td(index + 1), - pc.td( - pc.cond( + return rx.tr( + rx.td(index + 1), + rx.td( + rx.cond( State.answers[index].to_string() == State.answer_key[index].to_string(), - pc.icon(tag="check", color="green"), - pc.icon(tag="close", color="red"), + rx.icon(tag="check", color="green"), + rx.icon(tag="close", color="red"), ) ), - pc.td(State.answers[index].to_string()), - pc.td(State.answer_key[index].to_string()), + rx.td(State.answers[index].to_string()), + rx.td(State.answer_key[index].to_string()), ) def results(State): """The results view.""" - return pc.center( - pc.vstack( - pc.heading("Results"), - pc.text("Below are the results of the quiz."), - pc.divider(), - pc.center( - pc.circular_progress( - pc.circular_progress_label(State.score + "%"), + return rx.center( + rx.vstack( + rx.heading("Results"), + rx.text("Below are the results of the quiz."), + rx.divider(), + rx.center( + rx.circular_progress( + rx.circular_progress_label(State.score + "%"), value=State.score, size="3em", ) ), - pc.table( - pc.thead( - pc.tr( - pc.th("#"), - pc.th("Result"), - pc.th("Your Answer"), - pc.th("Correct Answer"), + rx.table( + rx.thead( + rx.tr( + rx.th("#"), + rx.th("Result"), + rx.th("Your Answer"), + rx.th("Correct Answer"), ) ), - pc.foreach(State.answers, lambda answer, i: render_answer(State, i)), + rx.foreach(State.answers, lambda answer, i: render_answer(State, i)), ), - pc.link(pc.button("Take Quiz Again"), href="/"), + rx.link(rx.button("Take Quiz Again"), href="/"), bg="white", padding_x="5em", padding_y="2em", diff --git a/quiz/requirements.txt b/quiz/requirements.txt index 40c44025..bc6a7f2e 100644 --- a/quiz/requirements.txt +++ b/quiz/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 +reflex>=0.2.0 diff --git a/quiz/rxconfig.py b/quiz/rxconfig.py new file mode 100644 index 00000000..d3ed76ca --- /dev/null +++ b/quiz/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="quiz", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) From e838e9b1d15d2dff79d2d8b47b5a44df6206dc6b Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:05:23 +0800 Subject: [PATCH 07/18] Update snakegame example to support reflex 0.2.0 --- snakegame/.gitignore | 4 +- snakegame/pcconfig.py | 7 ---- snakegame/requirements.txt | 2 +- snakegame/rxconfig.py | 7 ++++ snakegame/snakegame/snakegame.py | 64 ++++++++++++++++---------------- 5 files changed, 42 insertions(+), 42 deletions(-) delete mode 100644 snakegame/pcconfig.py create mode 100644 snakegame/rxconfig.py diff --git a/snakegame/.gitignore b/snakegame/.gitignore index 42649afd..bf56ff42 100644 --- a/snakegame/.gitignore +++ b/snakegame/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/snakegame/pcconfig.py b/snakegame/pcconfig.py deleted file mode 100644 index 595360de..00000000 --- a/snakegame/pcconfig.py +++ /dev/null @@ -1,7 +0,0 @@ -import pynecone as pc - -config = pc.Config( - app_name="snakegame", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/snakegame/requirements.txt b/snakegame/requirements.txt index 0a8f4c6e..210218f4 100644 --- a/snakegame/requirements.txt +++ b/snakegame/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 \ No newline at end of file +reflex>=0.2.0 \ No newline at end of file diff --git a/snakegame/rxconfig.py b/snakegame/rxconfig.py new file mode 100644 index 00000000..b432a18f --- /dev/null +++ b/snakegame/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="snakegame", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/snakegame/snakegame/snakegame.py b/snakegame/snakegame/snakegame.py index 367258b1..e0aa0c79 100644 --- a/snakegame/snakegame/snakegame.py +++ b/snakegame/snakegame/snakegame.py @@ -1,4 +1,4 @@ -import pynecone as pc +import reflex as rx import asyncio import random @@ -11,7 +11,7 @@ HEAD_L = "L" HEAD_R = "R" -class State(pc.State): +class State(rx.State): tmpdir:str = HEAD_R dir:str = HEAD_R # direction of what head of snake face snake:list[list[int]] = [[10,10], [10,11],[10,12],[10,13],[10,14],[10,15]] # all (X,Y) for snake's body @@ -106,20 +106,20 @@ def arrow_none(self): return def colored_box(color, index): - return pc.box(bg=color, width="1em", height="1em", border="1px solid white") + return rx.box(bg=color, width="1em", height="1em", border="1px solid white") def index(): - return pc.vstack( - pc.hstack( - pc.button("PAUSE", on_click=State.turnOffTick, color_scheme="blue", border_radius="1em"), - pc.button("RUN", on_click=State.turnOnTick, color_scheme="green", border_radius="1em"), - pc.switch(is_checked=State.start, on_change=State.flip_switch), + return rx.vstack( + rx.hstack( + rx.button("PAUSE", on_click=State.turnOffTick, color_scheme="blue", border_radius="1em"), + rx.button("RUN", on_click=State.turnOnTick, color_scheme="green", border_radius="1em"), + rx.switch(is_checked=State.start, on_change=State.flip_switch), ), - pc.hstack( - pc.vstack( - pc.heading("RATE", font_size="1em"), - pc.heading(State.rate, font_size="2em"), + rx.hstack( + rx.vstack( + rx.heading("RATE", font_size="1em"), + rx.heading(State.rate, font_size="2em"), bg_color="yellow", border_width="1px", padding_left="1em", @@ -127,50 +127,50 @@ def index(): ), - pc.vstack( - pc.heading("SCORE", font_size="1em"), - pc.heading(State.score, font_size="2em"), + rx.vstack( + rx.heading("SCORE", font_size="1em"), + rx.heading(State.score, font_size="2em"), bg_color="yellow", border_width="1px", padding_left="1em", padding_right="1em", ), - pc.vstack( - pc.heading("MAGIC", font_size="1em"), - pc.heading(State.magic, font_size="2em"), + rx.vstack( + rx.heading("MAGIC", font_size="1em"), + rx.heading(State.magic, font_size="2em"), bg_color="yellow", border_width="1px", padding_left="1em", padding_right="1em", ), ), - # Usage of foreach, please refer https://pynecone.app/docs/library/layout/foreach - pc.responsive_grid( - pc.foreach( + # Usage of foreach, please refer https://reflex.app/docs/library/layout/foreach + rx.responsive_grid( + rx.foreach( State.cells, lambda color, idx: colored_box(color, idx), ), columns=[N], ), - pc.hstack( - pc.vstack( - pc.button("￮", on_click=State.arrow_none, color_scheme="#FFFFFFFF", border_radius="1em",font_size="2em"), - pc.button("￩", on_click=State.arrow_left, color_scheme="red", border_radius="1em",font_size="2em"), + rx.hstack( + rx.vstack( + rx.button("￮", on_click=State.arrow_none, color_scheme="#FFFFFFFF", border_radius="1em",font_size="2em"), + rx.button("￩", on_click=State.arrow_left, color_scheme="red", border_radius="1em",font_size="2em"), ), - pc.vstack( - pc.button("￪", on_click=State.arrow_up, color_scheme="red", border_radius="1em",font_size="2em"), - pc.button("￬", on_click=State.arrow_down, color_scheme="red", border_radius="1em",font_size="2em"), + rx.vstack( + rx.button("￪", on_click=State.arrow_up, color_scheme="red", border_radius="1em",font_size="2em"), + rx.button("￬", on_click=State.arrow_down, color_scheme="red", border_radius="1em",font_size="2em"), ), - pc.vstack( - pc.button("￮", on_click=State.arrow_none, color_scheme="#FFFFFFFF", border_radius="1em",font_size="2em"), - pc.button("￫", on_click=State.arrow_right, color_scheme="red", border_radius="1em",font_size="2em"), + rx.vstack( + rx.button("￮", on_click=State.arrow_none, color_scheme="#FFFFFFFF", border_radius="1em",font_size="2em"), + rx.button("￫", on_click=State.arrow_right, color_scheme="red", border_radius="1em",font_size="2em"), ), ), padding_top="3%", ) -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index, title="snake game") app.compile() \ No newline at end of file From d6db7700ada0434e79ec54bf774007a3c856e3b6 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:10:34 +0800 Subject: [PATCH 08/18] Update tailwind example to support reflex 0.2.0 --- tailwind/.gitignore | 5 ++--- tailwind/pcconfig.py | 13 ------------- tailwind/requirements.txt | 1 + tailwind/rxconfig.py | 13 +++++++++++++ tailwind/tailwind/tailwind.py | 24 ++++++++++++------------ 5 files changed, 28 insertions(+), 28 deletions(-) delete mode 100644 tailwind/pcconfig.py create mode 100644 tailwind/requirements.txt create mode 100644 tailwind/rxconfig.py diff --git a/tailwind/.gitignore b/tailwind/.gitignore index 5c433b4c..bf56ff42 100644 --- a/tailwind/.gitignore +++ b/tailwind/.gitignore @@ -1,5 +1,4 @@ - *.py[cod] -__pycache__/ .web -pynecone.db \ No newline at end of file +__pycache__/ +reflex.db \ No newline at end of file diff --git a/tailwind/pcconfig.py b/tailwind/pcconfig.py deleted file mode 100644 index aa391a2b..00000000 --- a/tailwind/pcconfig.py +++ /dev/null @@ -1,13 +0,0 @@ -import pynecone as pc - - -class TailwindConfig(pc.Config): - pass - - -config = TailwindConfig( - app_name="tailwind", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, - tailwind={}, -) diff --git a/tailwind/requirements.txt b/tailwind/requirements.txt new file mode 100644 index 00000000..bc6a7f2e --- /dev/null +++ b/tailwind/requirements.txt @@ -0,0 +1 @@ +reflex>=0.2.0 diff --git a/tailwind/rxconfig.py b/tailwind/rxconfig.py new file mode 100644 index 00000000..20f2718a --- /dev/null +++ b/tailwind/rxconfig.py @@ -0,0 +1,13 @@ +import reflex as rx + + +class TailwindConfig(rx.Config): + pass + + +config = TailwindConfig( + app_name="tailwind", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, + tailwind={}, +) diff --git a/tailwind/tailwind/tailwind.py b/tailwind/tailwind/tailwind.py index 42e720ec..6e2fa62b 100644 --- a/tailwind/tailwind/tailwind.py +++ b/tailwind/tailwind/tailwind.py @@ -1,10 +1,10 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" -import pynecone as pc -from pynecone import el +import reflex as rx +from reflex import el -class State(pc.State): +class State(rx.State): pass @@ -25,17 +25,17 @@ def toggle(): return el.img(src="/tailwind.png", class_name="h-5") -PCCONFIG = """import pynecone as pc +PCCONFIG = """import reflex as rx -class TailwindConfig(pc.Config): +class TailwindConfig(rx.Config): pass config = TailwindConfig( app_name="tailwind", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, tailwind={}, ) """ @@ -56,11 +56,11 @@ class TailwindConfig(pc.Config): }""" -def index() -> pc.Component: +def index() -> rx.Component: return el.div( toggle(), el.p( - "This is a Pynecone app with Tailwind baked in.", + "This is a Reflex app with Tailwind baked in.", class_name="text-gray-500 my-4", ), el.div( @@ -76,7 +76,7 @@ def index() -> pc.Component: el.p( "Just add a ", code_block("tailwind={}", True), - "key to your config, and Pynecone takes care of the rest.", + "key to your config, and Reflex takes care of the rest.", ), code_block(PCCONFIG), el.p( @@ -90,6 +90,6 @@ def index() -> pc.Component: # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index) app.compile() From 9dce5befac13fbb1b7d027aed8946414391f825a Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:19:12 +0800 Subject: [PATCH 09/18] Update todo example to support reflex 0.2.0 --- todo/.gitignore | 4 ++-- todo/pcconfig.py | 9 -------- todo/requirements.txt | 2 +- todo/rxconfig.py | 7 ++++++ todo/todo/todo.py | 52 +++++++++++++++++++++---------------------- 5 files changed, 36 insertions(+), 38 deletions(-) delete mode 100644 todo/pcconfig.py create mode 100644 todo/rxconfig.py diff --git a/todo/.gitignore b/todo/.gitignore index 42649afd..bf56ff42 100644 --- a/todo/.gitignore +++ b/todo/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/todo/pcconfig.py b/todo/pcconfig.py deleted file mode 100644 index 57bd6b72..00000000 --- a/todo/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="todo", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/todo/requirements.txt b/todo/requirements.txt index 40c44025..bc6a7f2e 100644 --- a/todo/requirements.txt +++ b/todo/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 +reflex>=0.2.0 diff --git a/todo/rxconfig.py b/todo/rxconfig.py new file mode 100644 index 00000000..8e492279 --- /dev/null +++ b/todo/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="todo", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/todo/todo/todo.py b/todo/todo/todo.py index fb956545..74a35937 100644 --- a/todo/todo/todo.py +++ b/todo/todo/todo.py @@ -1,7 +1,7 @@ -import pynecone as pc +import reflex as rx -class State(pc.State): +class State(rx.State): """The app state.""" # The current items in the todo list. @@ -20,7 +20,7 @@ def add_item(self, form_data: dict[str, str]): self.items.append(form_data["new_item"]) # Clear the value of the input. - return pc.set_value("new_item", "") + return rx.set_value("new_item", "") def finish_item(self, item: str): """Finish an item in the todo list. @@ -31,10 +31,10 @@ def finish_item(self, item: str): self.items.pop(self.items.index(item)) -def todo_item(item: pc.Var[str]) -> pc.Component: +def todo_item(item: rx.Var[str]) -> rx.Component: """Render an item in the todo list. - NOTE: When using `pc.foreach`, the item will be a Var[str] rather than a str. + NOTE: When using `rx.foreach`, the item will be a Var[str] rather than a str. Args: item: The todo list item. @@ -42,68 +42,68 @@ def todo_item(item: pc.Var[str]) -> pc.Component: Returns: A single rendered todo list item. """ - return pc.list_item( - pc.hstack( + return rx.list_item( + rx.hstack( # A button to finish the item. - pc.button( + rx.button( on_click=lambda: State.finish_item(item), height="1.5em", background_color="white", border="1px solid blue", ), # The item text. - pc.text(item, font_size="1.25em"), + rx.text(item, font_size="1.25em"), ) ) -def todo_list() -> pc.Component: +def todo_list() -> rx.Component: """Render the todo list. Returns: The rendered todo list. """ - return pc.ordered_list( - # pc.foreach is necessary to iterate over state vars. - # see: https://pynecone.io/docs/library/layout/foreach - pc.foreach(State.items, lambda item: todo_item(item)), + return rx.ordered_list( + # rx.foreach is necessary to iterate over state vars. + # see: https://reflex.dev/docs/library/layout/foreach + rx.foreach(State.items, lambda item: todo_item(item)), ) -def new_item() -> pc.Component: +def new_item() -> rx.Component: """Render the new item form. - See: https://pynecone.io/docs/library/forms/form + See: https://reflex.dev/docs/library/forms/form Returns: A form to add a new item to the todo list. """ - return pc.form( + return rx.form( # Pressing enter will submit the form. - pc.input( + rx.input( id="new_item", placeholder="Add a todo...", bg="white", ), # Clicking the button will also submit the form. - pc.center( - pc.button("Add", type_="submit", bg="white"), + rx.center( + rx.button("Add", type_="submit", bg="white"), ), on_submit=State.add_item, ) -def index() -> pc.Component: +def index() -> rx.Component: """A view of the todo list. Returns: The index page of the todo app. """ - return pc.container( - pc.vstack( - pc.heading("Todos"), + return rx.container( + rx.vstack( + rx.heading("Todos"), new_item(), - pc.divider(), + rx.divider(), todo_list(), bg="#ededed", margin="5em", @@ -115,7 +115,7 @@ def index() -> pc.Component: # Create the app and add the state. -app = pc.App(state=State) +app = rx.App(state=State) # Add the index page and set the title. app.add_page(index, title="Todo App") From bc5d33e18f1a1819e2639636d33394052e5504e5 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:22:52 +0800 Subject: [PATCH 10/18] Update translator example to support reflex 0.2.0 --- translator/.gitignore | 4 +- translator/pcconfig.py | 9 ----- translator/requirements.txt | 2 +- translator/rxconfig.py | 7 ++++ translator/translator/translator.py | 60 ++++++++++++++--------------- 5 files changed, 40 insertions(+), 42 deletions(-) delete mode 100644 translator/pcconfig.py create mode 100644 translator/rxconfig.py diff --git a/translator/.gitignore b/translator/.gitignore index 42649afd..bf56ff42 100644 --- a/translator/.gitignore +++ b/translator/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/translator/pcconfig.py b/translator/pcconfig.py deleted file mode 100644 index fca62e91..00000000 --- a/translator/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="translator", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/translator/requirements.txt b/translator/requirements.txt index 78587dd7..cea8d7e2 100644 --- a/translator/requirements.txt +++ b/translator/requirements.txt @@ -1,3 +1,3 @@ -pynecone>=0.1.33 +reflex>=0.2.0 googletrans-py==4.0.0 requests>=2.28.1 diff --git a/translator/rxconfig.py b/translator/rxconfig.py new file mode 100644 index 00000000..a688a4f3 --- /dev/null +++ b/translator/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="translator", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/translator/translator/translator.py b/translator/translator/translator.py index 32e79cba..8890cfe2 100644 --- a/translator/translator/translator.py +++ b/translator/translator/translator.py @@ -1,11 +1,11 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" -# Import pynecone. +# Import reflex. from datetime import datetime -from googletrans import Translator +from googletrans import Translator -import pynecone as pc -from pynecone.base import Base +import reflex as rx +from reflex.base import Base from .langs import langs @@ -18,14 +18,14 @@ class Message(Base): to_lang: str -class State(pc.State): +class State(rx.State): """The app state.""" text: str = "" messages: list[Message] = [] lang: str = "Chinese (Simplified)" - @pc.var + @rx.var def output(self) -> str: if not self.text.strip(): return "Translations will appear here." @@ -48,9 +48,9 @@ def post(self): def header(): """Basic instructions to get started.""" - return pc.box( - pc.text("Translator 🗺", font_size="2rem"), - pc.text( + return rx.box( + rx.text("Translator 🗺", font_size="2rem"), + rx.text( "Translate things and post them as messages!", margin_top="0.5rem", color="#666", @@ -59,8 +59,8 @@ def header(): def down_arrow(): - return pc.vstack( - pc.icon( + return rx.vstack( + rx.icon( tag="arrow_down", color="#666", ) @@ -68,7 +68,7 @@ def down_arrow(): def text_box(text): - return pc.text( + return rx.text( text, background_color="#fff", padding="1rem", @@ -77,15 +77,15 @@ def text_box(text): def message(message): - return pc.box( - pc.vstack( + return rx.box( + rx.vstack( text_box(message.original_text), down_arrow(), text_box(message.text), - pc.box( - pc.text(message.to_lang), - pc.text(" · ", margin_x="0.3rem"), - pc.text(message.created_at), + rx.box( + rx.text(message.to_lang), + rx.text(" · ", margin_x="0.3rem"), + rx.text(message.created_at), display="flex", font_size="0.8rem", color="#666", @@ -100,7 +100,7 @@ def message(message): def smallcaps(text, **kwargs): - return pc.text( + return rx.text( text, font_size="0.7rem", font_weight="bold", @@ -111,8 +111,8 @@ def smallcaps(text, **kwargs): def output(): - return pc.box( - pc.box( + return rx.box( + rx.box( smallcaps( "Output", color="#aeaeaf", @@ -122,7 +122,7 @@ def output(): position="absolute", top="-0.5rem", ), - pc.text(State.output), + rx.text(State.output), padding="1rem", border="1px solid #eaeaef", margin_top="1rem", @@ -133,15 +133,15 @@ def output(): def index(): """The main view.""" - return pc.container( + return rx.container( header(), - pc.input( + rx.input( placeholder="Text to translate", on_blur=State.set_text, margin_top="1rem", border_color="#eaeaef", ), - pc.select( + rx.select( list(langs.keys()), value=State.lang, placeholder="Select a language", @@ -149,9 +149,9 @@ def index(): margin_top="1rem", ), output(), - pc.button("Post", on_click=State.post, margin_top="1rem"), - pc.vstack( - pc.foreach(State.messages, message), + rx.button("Post", on_click=State.post, margin_top="1rem"), + rx.vstack( + rx.foreach(State.messages, message), margin_top="2rem", spacing="1rem", align_items="left", @@ -162,6 +162,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index, title="Translator") app.compile() From e406b09dbf3b9b6ee3616170144236d9701e1e03 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:27:56 +0800 Subject: [PATCH 11/18] Update traversal example to support reflex 0.2.0 --- traversal/.gitignore | 8 +++---- traversal/pcconfig.py | 8 ------- traversal/requirements.txt | 2 +- traversal/rxconfig.py | 7 ++++++ traversal/traversal/traversal.py | 38 ++++++++++++++++---------------- 5 files changed, 31 insertions(+), 32 deletions(-) delete mode 100644 traversal/pcconfig.py create mode 100644 traversal/rxconfig.py diff --git a/traversal/.gitignore b/traversal/.gitignore index 42649afd..5cfd7a57 100644 --- a/traversal/.gitignore +++ b/traversal/.gitignore @@ -1,4 +1,4 @@ -.web -pynecone.db -__pycache__/ -*.py[cod] \ No newline at end of file +*.py[cod] +.web +__pycache__/ +reflex.db diff --git a/traversal/pcconfig.py b/traversal/pcconfig.py deleted file mode 100644 index 181cb284..00000000 --- a/traversal/pcconfig.py +++ /dev/null @@ -1,8 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="traversal", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/traversal/requirements.txt b/traversal/requirements.txt index 0a8f4c6e..210218f4 100644 --- a/traversal/requirements.txt +++ b/traversal/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 \ No newline at end of file +reflex>=0.2.0 \ No newline at end of file diff --git a/traversal/rxconfig.py b/traversal/rxconfig.py new file mode 100644 index 00000000..958b7542 --- /dev/null +++ b/traversal/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="traversal", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/traversal/traversal/traversal.py b/traversal/traversal/traversal.py index e2ebd043..06881bd1 100644 --- a/traversal/traversal/traversal.py +++ b/traversal/traversal/traversal.py @@ -1,6 +1,6 @@ -from pcconfig import config +from rxconfig import config -import pynecone as pc +import reflex as rx import random import asyncio from collections import deque @@ -27,7 +27,7 @@ def to_matrix(l, n): return to_matrix(color, GRID_SIZE) -class State(pc.State): +class State(rx.State): """The app state.""" option: str = "" @@ -95,7 +95,7 @@ async def run_dfs(self): self.s.append((i2, j2)) return self.run_dfs - return pc.window_alert("No path found") + return rx.window_alert("No path found") async def run_bfs(self): await asyncio.sleep(0.000000000000000001) @@ -142,20 +142,20 @@ async def run_bfs(self): self.q.append((i2, j2)) return self.run_bfs - return pc.window_alert("No path found") + return rx.window_alert("No path found") def render_box(color): """Return a colored box.""" - return pc.box(bg=color, width="50px", height="50px", border="1px solid black") + return rx.box(bg=color, width="50px", height="50px", border="1px solid black") def index(): - return pc.center( - pc.vstack( - pc.heading("Graph Traversal", font_size="2.8em"), - pc.hstack( - pc.number_input( + return rx.center( + rx.vstack( + rx.heading("Graph Traversal", font_size="2.8em"), + rx.hstack( + rx.number_input( on_change=State.set_walls, bg="white", min_=0, @@ -163,30 +163,30 @@ def index(): is_invalid=False, default_value=0, ), - pc.button( + rx.button( "Generate Graph", on_click=State.new_graph, width="100%", bg="white", ), ), - pc.responsive_grid( - pc.foreach( - State.colored_graph, lambda x: pc.vstack(pc.foreach(x, render_box)) + rx.responsive_grid( + rx.foreach( + State.colored_graph, lambda x: rx.vstack(rx.foreach(x, render_box)) ), columns=[GRID_SIZE], spacing="2", justify="center", ), - pc.hstack( - pc.select( + rx.hstack( + rx.select( ["DFS", "BFS"], placeholder="Select an algorithm..", on_change=State.set_option, width="100%", bg="white", ), - pc.button( + rx.button( "run", on_click=State.run, width="50%", @@ -201,6 +201,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index) app.compile() From 42b73241ab4791be75f98f9f8042a8551a569ee8 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:28:42 +0800 Subject: [PATCH 12/18] .gitignore update --- traversal/.gitignore | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/traversal/.gitignore b/traversal/.gitignore index 5cfd7a57..bf56ff42 100644 --- a/traversal/.gitignore +++ b/traversal/.gitignore @@ -1,4 +1,4 @@ -*.py[cod] -.web -__pycache__/ -reflex.db +*.py[cod] +.web +__pycache__/ +reflex.db \ No newline at end of file From 262b9bd9267bf63ad1ae64ad34846e343e9f706e Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:51:23 +0800 Subject: [PATCH 13/18] Update twitter example to support reflex 0.2.0 --- twitter/.gitignore | 4 +- twitter/pcconfig.py | 9 -- twitter/requirements.txt | 2 +- twitter/rxconfig.py | 7 ++ twitter/twitter/components/container.py | 4 +- twitter/twitter/layouts/auth.py | 16 ++-- twitter/twitter/pages/home.py | 110 ++++++++++++------------ twitter/twitter/pages/login.py | 14 +-- twitter/twitter/pages/signup.py | 16 ++-- twitter/twitter/state/auth.py | 16 ++-- twitter/twitter/state/base.py | 16 ++-- twitter/twitter/state/home.py | 22 ++--- twitter/twitter/twitter.py | 6 +- 13 files changed, 120 insertions(+), 122 deletions(-) delete mode 100644 twitter/pcconfig.py create mode 100644 twitter/rxconfig.py diff --git a/twitter/.gitignore b/twitter/.gitignore index 42649afd..bf56ff42 100644 --- a/twitter/.gitignore +++ b/twitter/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/twitter/pcconfig.py b/twitter/pcconfig.py deleted file mode 100644 index 2c14b468..00000000 --- a/twitter/pcconfig.py +++ /dev/null @@ -1,9 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="twitter", - bun_path="$HOME/.bun/bin/bun", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/twitter/requirements.txt b/twitter/requirements.txt index 40c44025..bc6a7f2e 100644 --- a/twitter/requirements.txt +++ b/twitter/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 +reflex>=0.2.0 diff --git a/twitter/rxconfig.py b/twitter/rxconfig.py new file mode 100644 index 00000000..a973ac27 --- /dev/null +++ b/twitter/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="twitter", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/twitter/twitter/components/container.py b/twitter/twitter/components/container.py index 75e4879b..c67f1ea7 100644 --- a/twitter/twitter/components/container.py +++ b/twitter/twitter/components/container.py @@ -1,5 +1,5 @@ """A container component.""" -import pynecone as pc +import reflex as rx def container(*children, **props): @@ -17,4 +17,4 @@ def container(*children, **props): ) | props ) - return pc.box(*children, **props) + return rx.box(*children, **props) diff --git a/twitter/twitter/layouts/auth.py b/twitter/twitter/layouts/auth.py index 51d6f6c1..b21baec5 100644 --- a/twitter/twitter/layouts/auth.py +++ b/twitter/twitter/layouts/auth.py @@ -1,26 +1,26 @@ """Shared auth layout.""" -import pynecone as pc +import reflex as rx from ..components import container def auth_layout(*args): """The shared layout for the login and sign up pages.""" - return pc.box( + return rx.box( container( - pc.heading( - pc.span("Welcome to PySocial!"), - pc.span("Sign in or sign up to get started."), + rx.heading( + rx.span("Welcome to PySocial!"), + rx.span("Sign in or sign up to get started."), display="flex", flex_direction="column", align_items="center", text_align="center", ), - pc.text( + rx.text( "See the source code for this demo app ", - pc.link( + rx.link( "here", - href="https://github.com/pynecone-io/pynecone-examples", + href="https://github.com/reflex-io/reflex-examples", color="blue.500", ), ".", diff --git a/twitter/twitter/pages/home.py b/twitter/twitter/pages/home.py index b0ae7510..0adf0c88 100644 --- a/twitter/twitter/pages/home.py +++ b/twitter/twitter/pages/home.py @@ -1,5 +1,5 @@ """The home page. This file includes examples abstracting complex UI into smaller components.""" -import pynecone as pc +import reflex as rx from twitter.state.base import State from twitter.state.home import HomeState @@ -8,8 +8,8 @@ def tab_button(name, href): """A tab switcher button.""" - return pc.link( - pc.icon(tag="star", mr=2), + return rx.link( + rx.icon(tag="star", mr=2), name, display="inline-flex", align_items="center", @@ -24,18 +24,18 @@ def tab_button(name, href): def tabs(): """The tab switcher displayed on the left.""" - return pc.box( - pc.vstack( - pc.heading("PySocial", size="md"), + return rx.box( + rx.vstack( + rx.heading("PySocial", size="md"), tab_button("Home", "/"), - pc.box( - pc.heading("Followers", size="sm"), - pc.foreach( + rx.box( + rx.heading("Followers", size="sm"), + rx.foreach( HomeState.followers, - lambda follow: pc.vstack( - pc.hstack( - pc.avatar(name=follow.follower_username, size="sm"), - pc.text(follow.follower_username), + lambda follow: rx.vstack( + rx.hstack( + rx.avatar(name=follow.follower_username, size="sm"), + rx.text(follow.follower_username), ), padding="1em", ), @@ -44,7 +44,7 @@ def tabs(): border_radius="md", border="1px solid #eaeaea", ), - pc.button("Sign out", on_click=State.logout), + rx.button("Sign out", on_click=State.logout), align_items="left", gap=4, ), @@ -54,21 +54,21 @@ def tabs(): def sidebar(HomeState): """The sidebar displayed on the right.""" - return pc.vstack( - pc.input( + return rx.vstack( + rx.input( on_change=HomeState.set_friend, placeholder="Search users", width="100%", ), - pc.foreach( + rx.foreach( HomeState.search_users, - lambda user: pc.vstack( - pc.hstack( - pc.avatar(name=user.username, size="sm"), - pc.text(user.username), - pc.spacer(), - pc.button( - pc.icon(tag="add"), + lambda user: rx.vstack( + rx.hstack( + rx.avatar(name=user.username, size="sm"), + rx.text(user.username), + rx.spacer(), + rx.button( + rx.icon(tag="add"), on_click=lambda: HomeState.follow_user(user.username), ), width="100%", @@ -77,14 +77,14 @@ def sidebar(HomeState): width="100%", ), ), - pc.box( - pc.heading("Following", size="sm"), - pc.foreach( + rx.box( + rx.heading("Following", size="sm"), + rx.foreach( HomeState.following, - lambda follow: pc.vstack( - pc.hstack( - pc.avatar(name=follow.followed_username, size="sm"), - pc.text(follow.followed_username), + lambda follow: rx.vstack( + rx.hstack( + rx.avatar(name=follow.followed_username, size="sm"), + rx.text(follow.followed_username), ), padding="1em", ), @@ -103,9 +103,9 @@ def sidebar(HomeState): def feed_header(HomeState): """The header of the feed.""" - return pc.hstack( - pc.heading("Home", size="md"), - pc.input(on_change=HomeState.set_search, placeholder="Search tweets"), + return rx.hstack( + rx.heading("Home", size="md"), + rx.input(on_change=HomeState.set_search, placeholder="Search tweets"), justify="space-between", p=4, border_bottom="1px solid #ededed", @@ -114,13 +114,13 @@ def feed_header(HomeState): def composer(HomeState): """The composer for new tweets.""" - return pc.grid( - pc.vstack( - pc.avatar(size="md"), + return rx.grid( + rx.vstack( + rx.avatar(size="md"), p=4, ), - pc.box( - pc.text_area( + rx.box( + rx.text_area( w="100%", border=0, placeholder="What's happening?", @@ -130,8 +130,8 @@ def composer(HomeState): _focus={"border": 0, "outline": 0, "boxShadow": "none"}, on_blur=HomeState.set_tweet, ), - pc.hstack( - pc.button( + rx.hstack( + rx.button( "Tweet", on_click=HomeState.post_tweet, bg="rgb(29 161 242)", @@ -151,13 +151,13 @@ def composer(HomeState): def tweet(tweet): """Display for an individual tweet in the feed.""" - return pc.grid( - pc.vstack( - pc.avatar(name=tweet.author, size="sm"), + return rx.grid( + rx.vstack( + rx.avatar(name=tweet.author, size="sm"), ), - pc.box( - pc.text("@" + tweet.author, font_weight="bold"), - pc.text(tweet.content, width="100%"), + rx.box( + rx.text("@" + tweet.author, font_weight="bold"), + rx.text(tweet.content, width="100%"), ), grid_template_columns="1fr 5fr", py=4, @@ -168,22 +168,22 @@ def tweet(tweet): def feed(HomeState): """The feed.""" - return pc.box( + return rx.box( feed_header(HomeState), composer(HomeState), - pc.cond( + rx.cond( HomeState.tweets, - pc.foreach( + rx.foreach( HomeState.tweets, tweet, ), - pc.vstack( - pc.button( - pc.icon( + rx.vstack( + rx.button( + rx.icon( tag="repeat", mr=1, ), - pc.text("Click to load tweets"), + rx.text("Click to load tweets"), on_click=HomeState.get_tweets, ), p=4, @@ -197,7 +197,7 @@ def feed(HomeState): def home(): """The home page.""" return container( - pc.grid( + rx.grid( tabs(), feed(HomeState), sidebar(HomeState), diff --git a/twitter/twitter/pages/login.py b/twitter/twitter/pages/login.py index 8178fe7a..2433d8c9 100644 --- a/twitter/twitter/pages/login.py +++ b/twitter/twitter/pages/login.py @@ -1,5 +1,5 @@ """Login page. Uses auth_layout to render UI shared with the sign up page.""" -import pynecone as pc +import reflex as rx from twitter.layouts import auth_layout from twitter.state.auth import AuthState @@ -7,15 +7,15 @@ def login(): """The login page.""" return auth_layout( - pc.box( - pc.input(placeholder="Username", on_blur=AuthState.set_username, mb=4), - pc.input( + rx.box( + rx.input(placeholder="Username", on_blur=AuthState.set_username, mb=4), + rx.input( type_="password", placeholder="Password", on_blur=AuthState.set_password, mb=4, ), - pc.button( + rx.button( "Log in", on_click=AuthState.login, bg="blue.500", @@ -29,9 +29,9 @@ def login(): max_width="400px", border_radius="lg", ), - pc.text( + rx.text( "Don't have an account yet? ", - pc.link("Sign up here.", href="/signup", color="blue.500"), + rx.link("Sign up here.", href="/signup", color="blue.500"), color="gray.600", ), ) diff --git a/twitter/twitter/pages/signup.py b/twitter/twitter/pages/signup.py index 089ef50c..35095850 100644 --- a/twitter/twitter/pages/signup.py +++ b/twitter/twitter/pages/signup.py @@ -1,5 +1,5 @@ """Sign up page. Uses auth_layout to render UI shared with the login page.""" -import pynecone as pc +import reflex as rx from twitter.layouts import auth_layout from twitter.state.auth import AuthState @@ -7,21 +7,21 @@ def signup(): """The sign up page.""" return auth_layout( - pc.box( - pc.input(placeholder="Username", on_blur=AuthState.set_username, mb=4), - pc.input( + rx.box( + rx.input(placeholder="Username", on_blur=AuthState.set_username, mb=4), + rx.input( type_="password", placeholder="Password", on_blur=AuthState.set_password, mb=4, ), - pc.input( + rx.input( type_="password", placeholder="Confirm password", on_blur=AuthState.set_confirm_password, mb=4, ), - pc.button( + rx.button( "Sign up", on_click=AuthState.signup, bg="blue.500", @@ -35,9 +35,9 @@ def signup(): max_width="400px", border_radius="lg", ), - pc.text( + rx.text( "Already have an account? ", - pc.link("Sign in here.", href="/", color="blue.500"), + rx.link("Sign in here.", href="/", color="blue.500"), color="gray.600", ), ) diff --git a/twitter/twitter/state/auth.py b/twitter/twitter/state/auth.py index 66f79173..b8956616 100644 --- a/twitter/twitter/state/auth.py +++ b/twitter/twitter/state/auth.py @@ -1,5 +1,5 @@ """The authentication state.""" -import pynecone as pc +import reflex as rx from .base import State, User @@ -13,25 +13,25 @@ class AuthState(State): def signup(self): """Sign up a user.""" - with pc.session() as session: + with rx.session() as session: if self.password != self.confirm_password: - return pc.window_alert("Passwords do not match.") + return rx.window_alert("Passwords do not match.") if session.exec(User.select.where(User.username == self.username)).first(): - return pc.window_alert("Username already exists.") + return rx.window_alert("Username already exists.") self.user = User(username=self.username, password=self.password) session.add(self.user) session.expire_on_commit = False session.commit() - return pc.redirect("/") + return rx.redirect("/") def login(self): """Log in a user.""" - with pc.session() as session: + with rx.session() as session: user = session.exec( User.select.where(User.username == self.username) ).first() if user and user.password == self.password: self.user = user - return pc.redirect("/") + return rx.redirect("/") else: - return pc.window_alert("Invalid username or password.") + return rx.window_alert("Invalid username or password.") diff --git a/twitter/twitter/state/base.py b/twitter/twitter/state/base.py index b4cca060..d3eb32b1 100644 --- a/twitter/twitter/state/base.py +++ b/twitter/twitter/state/base.py @@ -3,10 +3,10 @@ from sqlmodel import Field -import pynecone as pc +import reflex as rx -class Follows(pc.Model, table=True): +class Follows(rx.Model, table=True): """A table of Follows. This is a many-to-many join table. See https://sqlmodel.tiangolo.com/tutorial/many-to-many/ for more information. @@ -16,14 +16,14 @@ class Follows(pc.Model, table=True): follower_username: str = Field(primary_key=True) -class User(pc.Model, table=True): +class User(rx.Model, table=True): """A table of Users.""" username: str = Field() password: str = Field() -class Tweet(pc.Model, table=True): +class Tweet(rx.Model, table=True): """A table of Tweets.""" content: str = Field() @@ -32,7 +32,7 @@ class Tweet(pc.Model, table=True): author: str = Field() -class State(pc.State): +class State(rx.State): """The base state for the app.""" user: Optional[User] = None @@ -40,14 +40,14 @@ class State(pc.State): def logout(self): """Log out a user.""" self.reset() - return pc.redirect("/") + return rx.redirect("/") def check_login(self): """Check if a user is logged in.""" if not self.logged_in: - return pc.redirect("/login") + return rx.redirect("/login") - @pc.var + @rx.var def logged_in(self): """Check if a user is logged in.""" return self.user is not None diff --git a/twitter/twitter/state/home.py b/twitter/twitter/state/home.py index 17860a83..faceedd1 100644 --- a/twitter/twitter/state/home.py +++ b/twitter/twitter/state/home.py @@ -1,7 +1,7 @@ """The state for the home page.""" from datetime import datetime -import pynecone as pc +import reflex as rx from .base import Follows, State, Tweet, User @@ -18,8 +18,8 @@ class HomeState(State): def post_tweet(self): """Post a tweet.""" if not self.logged_in: - return pc.window_alert("Please log in to post a tweet.") - with pc.session() as session: + return rx.window_alert("Please log in to post a tweet.") + with rx.session() as session: tweet = Tweet( author=self.user.username, content=self.tweet, @@ -31,7 +31,7 @@ def post_tweet(self): def get_tweets(self): """Get tweets from the database.""" - with pc.session() as session: + with rx.session() as session: if self.search: self.tweets = ( session.query(Tweet) @@ -48,18 +48,18 @@ def set_search(self, search): def follow_user(self, username): """Follow a user.""" - with pc.session() as session: + with rx.session() as session: friend = Follows( follower_username=self.user.username, followed_username=username ) session.add(friend) session.commit() - @pc.var + @rx.var def following(self) -> list[Follows]: """Get a list of users the current user is following.""" if self.logged_in: - with pc.session() as session: + with rx.session() as session: return ( session.query(Follows) .filter(Follows.follower_username == self.user.username) @@ -67,11 +67,11 @@ def following(self) -> list[Follows]: ) return [] - @pc.var + @rx.var def followers(self) -> list[Follows]: """Get a list of users following the current user.""" if self.logged_in: - with pc.session() as session: + with rx.session() as session: return ( session.query(Follows) .where(Follows.followed_username == self.user.username) @@ -79,11 +79,11 @@ def followers(self) -> list[Follows]: ) return [] - @pc.var + @rx.var def search_users(self) -> list[User]: """Get a list of users matching the search query.""" if self.friend != "": - with pc.session() as session: + with rx.session() as session: current_username = self.user.username if self.user is not None else "" users = ( session.query(User) diff --git a/twitter/twitter/twitter.py b/twitter/twitter/twitter.py index cecd2a60..bc99a6e0 100644 --- a/twitter/twitter/twitter.py +++ b/twitter/twitter/twitter.py @@ -1,10 +1,10 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic app.""" -import pynecone as pc +"""Welcome to Reflex! This file outlines the steps to create a basic app.""" +import reflex as rx from .pages import home, login, signup from .state.base import State -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(login) app.add_page(signup) app.add_page(home, route="/", on_load=State.check_login()) From a70420da2fda9107d1fadca500e68b0d91c60bb3 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:53:12 +0800 Subject: [PATCH 14/18] update counter's .gitignore --- counter/.gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/counter/.gitignore b/counter/.gitignore index 4865abd0..bf56ff42 100644 --- a/counter/.gitignore +++ b/counter/.gitignore @@ -1,5 +1,4 @@ *.py[cod] .web __pycache__/ -pynecone.db reflex.db \ No newline at end of file From 644d0e429f6ce25dac0a3010580d3283d31fba31 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 18:57:25 +0800 Subject: [PATCH 15/18] Adjust counter --- counter/requirements.txt | 2 +- counter/rxconfig.py | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/counter/requirements.txt b/counter/requirements.txt index 40c44025..bc6a7f2e 100644 --- a/counter/requirements.txt +++ b/counter/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 +reflex>=0.2.0 diff --git a/counter/rxconfig.py b/counter/rxconfig.py index b2647a5b..780174da 100644 --- a/counter/rxconfig.py +++ b/counter/rxconfig.py @@ -1,9 +1,7 @@ import reflex as rx - config = rx.Config( app_name="counter", - bun_path="$HOME/.bun/bin/bun", db_url="sqlite:///reflex.db", env=rx.Env.DEV, ) From fdac41d913284a4259caef9a87b2e1e8a2a349d2 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 19:06:40 +0800 Subject: [PATCH 16/18] Update upload example to support reflex 0.2.0 --- upload/.gitignore | 4 ++-- upload/pcconfig.py | 10 ---------- upload/requirements.txt | 2 +- upload/rxconfig.py | 10 ++++++++++ upload/upload/upload.py | 38 +++++++++++++++++++------------------- 5 files changed, 32 insertions(+), 32 deletions(-) delete mode 100644 upload/pcconfig.py create mode 100644 upload/rxconfig.py diff --git a/upload/.gitignore b/upload/.gitignore index 42649afd..bf56ff42 100644 --- a/upload/.gitignore +++ b/upload/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/upload/pcconfig.py b/upload/pcconfig.py deleted file mode 100644 index dc078a1c..00000000 --- a/upload/pcconfig.py +++ /dev/null @@ -1,10 +0,0 @@ -import pynecone as pc - -class UploadConfig(pc.Config): - pass - -config = UploadConfig( - app_name="upload", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/upload/requirements.txt b/upload/requirements.txt index 0a8f4c6e..210218f4 100644 --- a/upload/requirements.txt +++ b/upload/requirements.txt @@ -1 +1 @@ -pynecone>=0.1.33 \ No newline at end of file +reflex>=0.2.0 \ No newline at end of file diff --git a/upload/rxconfig.py b/upload/rxconfig.py new file mode 100644 index 00000000..ffd4d439 --- /dev/null +++ b/upload/rxconfig.py @@ -0,0 +1,10 @@ +import reflex as rx + +class UploadConfig(rx.Config): + pass + +config = UploadConfig( + app_name="upload", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/upload/upload/upload.py b/upload/upload/upload.py index ed2dbe20..f529c900 100644 --- a/upload/upload/upload.py +++ b/upload/upload/upload.py @@ -2,28 +2,28 @@ import os from typing import List -import pynecone as pc +import reflex as rx -class State(pc.State): +class State(rx.State): """The app state.""" # Whether we are currently uploading files. is_uploading: bool - @pc.var + @rx.var def file_str(self) -> str: """Get the string representation of the uploaded files.""" - return "\n".join(os.listdir(pc.get_asset_path())) + return "\n".join(os.listdir(rx.get_asset_path())) - async def handle_upload(self, files: List[pc.UploadFile]): + async def handle_upload(self, files: List[rx.UploadFile]): """Handle the file upload.""" self.is_uploading = True # Iterate through the uploaded files. for file in files: upload_data = await file.read() - outfile = pc.get_asset_path(file.filename) + outfile = rx.get_asset_path(file.filename) with open(outfile, "wb") as file_object: file_object.write(upload_data) @@ -40,9 +40,9 @@ async def stop_upload(self): def index(): - return pc.vstack( - pc.upload( - pc.button( + return rx.vstack( + rx.upload( + rx.button( "Select File(s)", height="70px", width="200px", @@ -50,7 +50,7 @@ def index(): bg="white", border=f"1px solid {color}", ), - pc.text( + rx.text( "Drag and drop files here or click to select files", height="100px", width="200px", @@ -58,19 +58,19 @@ def index(): border="1px dotted black", padding="2em", ), - pc.hstack( - pc.button( + rx.hstack( + rx.button( "Upload", - on_click=State.handle_upload(pc.upload_files()), + on_click=State.handle_upload(rx.upload_files()), ), ), - pc.heading("Files:"), - pc.cond( + rx.heading("Files:"), + rx.cond( State.is_uploading, - pc.progress(is_indeterminate=True, color="blue", width="100%"), - pc.progress(value=0, width="100%"), + rx.progress(is_indeterminate=True, color="blue", width="100%"), + rx.progress(value=0, width="100%"), ), - pc.text_area( + rx.text_area( is_disabled=True, value=State.file_str, width="100%", @@ -84,6 +84,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index, title="Upload") app.compile() From cd63b99ce548ee1663778c17fecb7546a1f28bb7 Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 19:33:18 +0800 Subject: [PATCH 17/18] Update sales example to support reflex 0.2.0 --- sales/.gitignore | 4 +- sales/pcconfig.py | 8 -- sales/requirements.txt | 2 +- sales/rxconfig.py | 7 ++ sales/sales/sales.py | 173 ++++++++++++++++++++--------------------- 5 files changed, 96 insertions(+), 98 deletions(-) delete mode 100644 sales/pcconfig.py create mode 100644 sales/rxconfig.py diff --git a/sales/.gitignore b/sales/.gitignore index 42649afd..bf56ff42 100644 --- a/sales/.gitignore +++ b/sales/.gitignore @@ -1,4 +1,4 @@ +*.py[cod] .web -pynecone.db __pycache__/ -*.py[cod] \ No newline at end of file +reflex.db \ No newline at end of file diff --git a/sales/pcconfig.py b/sales/pcconfig.py deleted file mode 100644 index 5fef2d2b..00000000 --- a/sales/pcconfig.py +++ /dev/null @@ -1,8 +0,0 @@ -import pynecone as pc - - -config = pc.Config( - app_name="sales", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) diff --git a/sales/requirements.txt b/sales/requirements.txt index 4f5c74bb..743a150e 100644 --- a/sales/requirements.txt +++ b/sales/requirements.txt @@ -1,2 +1,2 @@ -pynecone>=0.1.33 +reflex>=0.2.0 openai diff --git a/sales/rxconfig.py b/sales/rxconfig.py new file mode 100644 index 00000000..7bfc695c --- /dev/null +++ b/sales/rxconfig.py @@ -0,0 +1,7 @@ +import reflex as rx + +config = rx.Config( + app_name="sales", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) diff --git a/sales/sales/sales.py b/sales/sales/sales.py index ab51ad84..9af46b27 100644 --- a/sales/sales/sales.py +++ b/sales/sales/sales.py @@ -1,12 +1,11 @@ -import pynecone as pc -import os +import reflex as rx import openai openai.api_key = "YOUR_OPENAI_API_KEY" products = {'T-shirt': { 'description': 'A plain white t-shirt made of 100% cotton.', 'price': 10.99 }, 'Jeans': { 'description': 'A pair of blue denim jeans with a straight leg fit.', 'price': 24.99 }, 'Hoodie': { 'description': 'A black hoodie made of a cotton and polyester blend.', 'price': 34.99 }, 'Cardigan': { 'description': 'A grey cardigan with a V-neck and long sleeves.', 'price': 36.99 }, 'Joggers': { 'description': 'A pair of black joggers made of a cotton and polyester blend.', 'price': 44.99 }, 'Dress': { 'description': 'A black dress made of 100% polyester.', 'price': 49.99 }, 'Jacket': { 'description': 'A navy blue jacket made of 100% cotton.', 'price': 55.99 }, 'Skirt': { 'description': 'A brown skirt made of a cotton and polyester blend.', 'price': 29.99 }, 'Shorts': { 'description': 'A pair of black shorts made of a cotton and polyester blend.', 'price': 19.99 }, 'Sweater': { 'description': 'A white sweater with a crew neck and long sleeves.', 'price': 39.99}} -class Customer(pc.Model, table=True): +class Customer(rx.Model, table=True): """The customer model.""" customer_name: str @@ -18,7 +17,7 @@ class Customer(pc.Model, table=True): salary: int -class State(pc.State): +class State(rx.State): """The app state.""" customer_name: str = "" @@ -35,9 +34,9 @@ class State(pc.State): def add_customer(self): """Add a customer to the database.""" - with pc.session() as session: + with rx.session() as session: if session.query(Customer).filter_by(email=self.email).first(): - return pc.window_alert("User already exists") + return rx.window_alert("User already exists") session.add( Customer( customer_name=self.customer_name, @@ -50,19 +49,19 @@ def add_customer(self): ) ) session.commit() - return pc.window_alert(f"User {self.customer_name} has been added.") + return rx.window_alert(f"User {self.customer_name} has been added.") def customer_page(self): """The customer page.""" - return pc.redirect("/") + return rx.redirect("/") def onboarding_page(self): """The onboarding page.""" - return pc.redirect("/onboarding") + return rx.redirect("/onboarding") def delete_customer(self, email: str): """Delete a customer from the database.""" - with pc.session() as session: + with rx.session() as session: session.query(Customer).filter_by(email=email).delete() session.commit() @@ -77,7 +76,7 @@ async def call_openai(self): salary:int = self.generate_email_data["salary"] response = openai.Completion.create( model="text-davinci-003", - prompt=f"Based on these {products} write a sales email to {name} adn email {email} who is {age} years old and a {gender} gender. {name} lives in {location} and works as a {job} and earns {salary} per year. Make sure the email reccomends one product only and is personalized to {name}. The company is named Pynecone its website is https://pynecone.io", + prompt=f"Based on these {products} write a sales email to {name} adn email {email} who is {age} years old and a {gender} gender. {name} lives in {location} and works as a {job} and earns {salary} per year. Make sure the email reccomends one product only and is personalized to {name}. The company is named Reflex its website is https://reflex.dev", temperature=0.7, max_tokens=2250, top_p=1, @@ -86,7 +85,7 @@ async def call_openai(self): ) self.gen_response = False self.email_content_data = response.choices[0].text # save the data related to email_content - return pc.set_value("email_content", self.email_content_data) # update layout of email_content manually + return rx.set_value("email_content", self.email_content_data) # update layout of email_content manually def generate_email( self, @@ -111,10 +110,10 @@ def generate_email( - @pc.var + @rx.var def get_users(self) -> list[Customer]: """Get all users from the database.""" - with pc.session() as session: + with rx.session() as session: self.users = session.query(Customer).all() return self.users def open_text_area(self): @@ -126,32 +125,32 @@ def close_text_area(self): def navbar(): """The navbar for the top of the page.""" - return pc.box( - pc.hstack( - pc.link( - pc.hstack( - pc.image(src="favicon.ico", width="50px"), - pc.heading("Pynecone | Personalized Sales", size="lg"), + return rx.box( + rx.hstack( + rx.link( + rx.hstack( + rx.image(src="favicon.ico", width="50px"), + rx.heading("Reflex | Personalized Sales", size="lg"), ), - href="https://pynecone.io", + href="https://reflex.dev", ), - pc.menu( - pc.menu_button( + rx.menu( + rx.menu_button( "Menu", bg="black", color="white", border_radius="md", px=4, py=2 ), - pc.menu_list( - pc.link( - pc.menu_item( - pc.hstack( - pc.text("Customers"), pc.icon(tag="hamburger") + rx.menu_list( + rx.link( + rx.menu_item( + rx.hstack( + rx.text("Customers"), rx.icon(tag="hamburger") ) ), href="/", ), - pc.menu_divider(), - pc.link( - pc.menu_item( - pc.hstack(pc.text("Onboarding"), pc.icon(tag="add")) + rx.menu_divider(), + rx.link( + rx.menu_item( + rx.hstack(rx.text("Onboarding"), rx.icon(tag="add")) ), href="/onboarding", ), @@ -172,24 +171,24 @@ def navbar(): def show_customer(user: Customer): """Show a customer in a table row.""" - return pc.tr( - pc.td(user.customer_name), - pc.td(user.email), - pc.td(user.age), - pc.td(user.gender), - pc.td(user.location), - pc.td(user.job), - pc.td(user.salary), - pc.td( - pc.button( + return rx.tr( + rx.td(user.customer_name), + rx.td(user.email), + rx.td(user.age), + rx.td(user.gender), + rx.td(user.location), + rx.td(user.job), + rx.td(user.salary), + rx.td( + rx.button( "Delete", on_click=lambda: State.delete_customer(user.email), bg="red", color="white", ) ), - pc.td( - pc.button( + rx.td( + rx.button( "Generate Email", on_click=State.generate_email( user.customer_name, @@ -210,30 +209,30 @@ def show_customer(user: Customer): def add_customer(): """Add a customer to the database.""" - return pc.center( - pc.vstack( + return rx.center( + rx.vstack( navbar(), - pc.heading("Customer Onboarding"), - pc.hstack( - pc.vstack( - pc.input(placeholder="Input Name", on_blur=State.set_customer_name), - pc.input(placeholder="Input Email", on_blur=State.set_email), + rx.heading("Customer Onboarding"), + rx.hstack( + rx.vstack( + rx.input(placeholder="Input Name", on_blur=State.set_customer_name), + rx.input(placeholder="Input Email", on_blur=State.set_email), ), - pc.vstack( - pc.input(placeholder="Input Location", on_blur=State.set_location), - pc.input(placeholder="Input Job", on_blur=State.set_job), + rx.vstack( + rx.input(placeholder="Input Location", on_blur=State.set_location), + rx.input(placeholder="Input Job", on_blur=State.set_job), ), ), - pc.select( + rx.select( ["male", "female", "other"], placeholder="Select Gender", on_change=State.set_gender, ), - pc.input(on_change=State.set_age, placeholder="Age"), - pc.input(on_change=State.set_salary, placeholder="Salary"), - pc.button_group( - pc.button("Submit Customer", on_click=State.add_customer), - pc.button(pc.icon(tag="hamburger"), on_click=State.customer_page), + rx.input(on_change=State.set_age, placeholder="Age"), + rx.input(on_change=State.set_salary, placeholder="Salary"), + rx.button_group( + rx.button("Submit Customer", on_click=State.add_customer), + rx.button(rx.icon(tag="hamburger"), on_click=State.customer_page), is_attached=False, spacing=3, ), @@ -249,30 +248,30 @@ def add_customer(): def index(): """The main page.""" - return pc.center( - pc.vstack( + return rx.center( + rx.vstack( navbar(), - pc.vstack( - pc.hstack( - pc.heading("Customers"), - pc.button(pc.icon(tag="add"), on_click=State.onboarding_page, bg="#F7FAFC", border="1px solid #ddd"), + rx.vstack( + rx.hstack( + rx.heading("Customers"), + rx.button(rx.icon(tag="add"), on_click=State.onboarding_page, bg="#F7FAFC", border="1px solid #ddd"), ), - pc.table_container( - pc.table( - pc.thead( - pc.tr( - pc.th("Name"), - pc.th("Email"), - pc.th("Age"), - pc.th("Gender"), - pc.th("Location"), - pc.th("Job"), - pc.th("Salary"), - pc.th("Delete"), - pc.th("Generate Email"), + rx.table_container( + rx.table( + rx.thead( + rx.tr( + rx.th("Name"), + rx.th("Email"), + rx.th("Age"), + rx.th("Gender"), + rx.th("Location"), + rx.th("Job"), + rx.th("Salary"), + rx.th("Delete"), + rx.th("Generate Email"), ) ), - pc.tbody(pc.foreach(State.get_users, show_customer)), + rx.tbody(rx.foreach(State.get_users, show_customer)), ), bg="#F7FAFC ", border="1px solid #ddd", @@ -281,14 +280,14 @@ def index(): align_items="left", padding_top="7em", ), - pc.vstack( - pc.heading("Generated Email"), - pc.cond( + rx.vstack( + rx.heading("Generated Email"), + rx.cond( State.gen_response, - pc.progress(is_indeterminate=True, color="blue", width="100%"), - pc.progress(value=0, width="100%"), + rx.progress(is_indeterminate=True, color="blue", width="100%"), + rx.progress(value=0, width="100%"), ), - pc.text_area( + rx.text_area( id="email_content", is_disabled=State.gen_response, on_blur=State.set_email_content_data, @@ -309,7 +308,7 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) +app = rx.App(state=State) app.add_page(index) app.add_page(add_customer, "/onboarding") app.compile() From f132095d0b065a03ed11a96de3bb579e7e8ce0ec Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Sat, 1 Jul 2023 19:39:08 +0800 Subject: [PATCH 18/18] Update stable_diffusion example to support reflex 0.2.0 --- stable_diffusion/.gitignore | 8 +-- stable_diffusion/linux_requirements.txt | 2 +- stable_diffusion/mac_requirements.txt | 2 +- stable_diffusion/pcconfig.py | 10 --- stable_diffusion/rxconfig.py | 10 +++ .../stable_diffusion/stable_diffusion.py | 64 +++++++++---------- stable_diffusion/stable_diffusion/styles.py | 20 +++--- 7 files changed, 57 insertions(+), 59 deletions(-) delete mode 100644 stable_diffusion/pcconfig.py create mode 100644 stable_diffusion/rxconfig.py diff --git a/stable_diffusion/.gitignore b/stable_diffusion/.gitignore index e8720ef2..bf56ff42 100644 --- a/stable_diffusion/.gitignore +++ b/stable_diffusion/.gitignore @@ -1,6 +1,4 @@ +*.py[cod] .web -pynecone.db__pycache__/ -*.py[cod]__pycache__/ -pynecone.db__pycache__/ -*.py[cod]pynecone.db -__pycache__/ \ No newline at end of file +__pycache__/ +reflex.db \ No newline at end of file diff --git a/stable_diffusion/linux_requirements.txt b/stable_diffusion/linux_requirements.txt index 10c8304f..441e312a 100644 --- a/stable_diffusion/linux_requirements.txt +++ b/stable_diffusion/linux_requirements.txt @@ -1,4 +1,4 @@ -pynecone==0.1.33 +reflex==0.2.0 torch diffusers pillow diff --git a/stable_diffusion/mac_requirements.txt b/stable_diffusion/mac_requirements.txt index 866089cc..d5fdc442 100644 --- a/stable_diffusion/mac_requirements.txt +++ b/stable_diffusion/mac_requirements.txt @@ -1,4 +1,4 @@ -pynecone==0.1.33 +reflex==0.2.0 torch diffusers pillow diff --git a/stable_diffusion/pcconfig.py b/stable_diffusion/pcconfig.py deleted file mode 100644 index 68df7753..00000000 --- a/stable_diffusion/pcconfig.py +++ /dev/null @@ -1,10 +0,0 @@ -import pynecone as pc - -class StablediffusionConfig(pc.Config): - pass - -config = StablediffusionConfig( - app_name="stable_diffusion", - db_url="sqlite:///pynecone.db", - env=pc.Env.DEV, -) \ No newline at end of file diff --git a/stable_diffusion/rxconfig.py b/stable_diffusion/rxconfig.py new file mode 100644 index 00000000..75387839 --- /dev/null +++ b/stable_diffusion/rxconfig.py @@ -0,0 +1,10 @@ +import reflex as rx + +class StablediffusionConfig(rx.Config): + pass + +config = StablediffusionConfig( + app_name="stable_diffusion", + db_url="sqlite:///reflex.db", + env=rx.Env.DEV, +) \ No newline at end of file diff --git a/stable_diffusion/stable_diffusion/stable_diffusion.py b/stable_diffusion/stable_diffusion/stable_diffusion.py index 688908ee..b0d3dcf8 100644 --- a/stable_diffusion/stable_diffusion/stable_diffusion.py +++ b/stable_diffusion/stable_diffusion/stable_diffusion.py @@ -1,5 +1,5 @@ -"""Welcome to Pynecone! This file outlines the steps to create a basic Stable Diffusion app.""" -import pynecone as pc +"""Welcome to Reflex! This file outlines the steps to create a basic Stable Diffusion app.""" +import reflex as rx from typing import List from PIL import Image @@ -21,7 +21,7 @@ raise OSError("Unsupported operating system: " + os_name) -class State(pc.State): +class State(rx.State): """The app state.""" prompt = "" @@ -41,7 +41,7 @@ def process_image(self): self.image_made = False self.image_processing = True - async def handle_upload(self, files: List[pc.UploadFile]): + async def handle_upload(self, files: List[rx.UploadFile]): """Handle the upload of file(s). Args: @@ -83,74 +83,74 @@ def stable_diffusion(self): def index(): """The main view.""" - return pc.center( - pc.vstack( - pc.heading("Stable Diffusion", font_size="2em"), - pc.upload( - pc.vstack( - pc.button( - pc.text("Select File"), + return rx.center( + rx.vstack( + rx.heading("Stable Diffusion", font_size="2em"), + rx.upload( + rx.vstack( + rx.button( + rx.text("Select File"), _hover={"bg": accent_color}, style=input_style, ), - pc.text("Drag and drop files here or click to select files"), + rx.text("Drag and drop files here or click to select files"), ), border=f"1px dotted blue", padding="5em", ), - pc.button( - pc.text("Upload"), + rx.button( + rx.text("Upload"), _hover={"bg": accent_color}, style=input_style, - on_click=lambda: State.handle_upload(pc.upload_files()), + on_click=lambda: State.handle_upload(rx.upload_files()), ), - pc.image(src=State.most_recent_upload, style=image_style), - pc.vstack( - pc.input( + rx.image(src=State.most_recent_upload, style=image_style), + rx.vstack( + rx.input( placeholder="Enter a prompt..", on_change=State.set_prompt, _placeholder={"color": "#fffa"}, _hover={"border_color": accent_color}, style=input_style, ), - pc.input( + rx.input( placeholder="Enter a negative prompt..", on_change=State.set_negative_prompt, _placeholder={"color": "#fffa"}, _hover={"border_color": accent_color}, style=input_style, ), - pc.text("Number of inference steps: " + State.inference_steps), - pc.slider( + rx.text("Number of inference steps: " + State.inference_steps), + rx.slider( on_change_end=State.set_inference_steps, color_scheme="green", default_value=100, min_=3, max_=200, ), - pc.text("Strength of diffusion: " + State.strength_diffusion), - pc.slider( + rx.text("Strength of diffusion: " + State.strength_diffusion), + rx.slider( on_change_end=State.set_strength_diffusion, color_scheme="green", default_value=70, min_=0, max_=100, ), - pc.button( - pc.text("Generate New Image"), + rx.button( + rx.text("Generate New Image"), _hover={"bg": accent_color}, style=input_style, on_click=[State.process_image, State.stable_diffusion], width="100%", ), - pc.divider(), + rx.divider(), ), - pc.cond( + rx.cond( State.image_processing, - pc.circular_progress(is_indeterminate=True), - pc.cond( + rx.circular_progress(is_indeterminate=True), + rx.cond( State.image_made, - pc.image(src=State.image, style=image_style), + rx.image(src=State.image, style=image_style), ), ), bg=border_color, @@ -166,6 +166,6 @@ def index(): # Add state and page to the app. -app = pc.App(state=State) -app.add_page(index, title="Pynecone: Stable Diffusion") +app = rx.App(state=State) +app.add_page(index, title="Reflex: Stable Diffusion") app.compile() diff --git a/stable_diffusion/stable_diffusion/styles.py b/stable_diffusion/stable_diffusion/styles.py index 627221f5..d1a122df 100644 --- a/stable_diffusion/stable_diffusion/styles.py +++ b/stable_diffusion/stable_diffusion/styles.py @@ -1,4 +1,4 @@ -import pynecone as pc +import reflex as rx bg_dark_color = "#111" bg_medium_color = "#222" @@ -52,43 +52,43 @@ ) base_style = { - pc.Avatar: { + rx.Avatar: { "shadow": shadow, "color": text_light_color, "bg": border_color, }, - pc.Button: { + rx.Button: { "shadow": shadow, "color": text_light_color, "_hover": { "bg": accent_dark, }, }, - pc.Menu: { + rx.Menu: { "bg": bg_dark_color, "border": f"red", }, - pc.MenuList: { + rx.MenuList: { "bg": bg_dark_color, "border": f"1.5px solid {bg_medium_color}", }, - pc.MenuDivider: { + rx.MenuDivider: { "border": f"1px solid {bg_medium_color}", }, - pc.MenuItem: { + rx.MenuItem: { "bg": bg_dark_color, "color": text_light_color, }, - pc.DrawerContent: { + rx.DrawerContent: { "bg": bg_dark_color, "color": text_light_color, "opacity": "0.9", }, - pc.Hstack: { + rx.Hstack: { "align_items": "center", "justify_content": "space-between", }, - pc.Vstack: { + rx.Vstack: { "align_items": "stretch", "justify_content": "space-between", },