reflex demo
手册：Intro
以AI Chat APP为例
Interactive Tutorial: AI Chat App
This tutorial will walk you through building an AI chat app with Reflex. This app is fairly complex, but don't worry - we'll break it down into small steps.
You can find the full source code for this app here.
What You'll Learn
In this tutorial you'll learn how to:
- Install
reflexand set up your development environment. - Create components to define and style your UI.
- Use state to add interactivity to your app.
- Deploy your app to share with others.
安装reflex并初始化项目
chatapp $ pip install reflex
chatapp $ reflex init
────────────────────────────────── Initializing chatapp ───────────────────────────────────
Success: Initialized chatapp
chatapp $ ls
assets chatapp rxconfig.py venv
使用reflex init初始化，选择3 ，将其初始化成chatapp项目
启动项目
chatapp $ reflex run
─────────────────────────────────── Starting Reflex App ───────────────────────────────────
Compiling: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 1/1 0:00:00
─────────────────────────────────────── App Running ───────────────────────────────────────
App running at: http://localhost:3000
前端
显示问答
# chatapp.pyimport reflex as rxdef index() -> rx.Component:return rx.container(rx.box("What is Reflex?",# The user's question is on the right.text_align="right",),rx.box("A way to build web apps in pure Python!",# The answer is on the left.text_align="left",),)# Add state and page to the app.
app = rx.App()
app.add_page(index)
重用部件
def qa(question: str, answer: str) -> rx.Component:return rx.box(rx.box(question, text_align="right"),rx.box(answer, text_align="left"),margin_y="1em",)def chat() -> rx.Component:qa_pairs = [("What is Reflex?","A way to build web apps in pure Python!",),("What can I make with it?","Anything from a simple website to a complex web app!",),]return rx.box(*[qa(question, answer)for question, answer in qa_pairs])def index() -> rx.Component:return rx.container(chat())
输入交互对话框
def action_bar() -> rx.Component:return rx.hstack(rx.input(placeholder="Ask a question"),rx.button("Ask"),)def index() -> rx.Component:return rx.container(chat(),action_bar(),)
样式
# style.py
import reflex as rx# Common styles for questions and answers.
shadow = "rgba(0, 0, 0, 0.15) 0px 2px 8px"
chat_margin = "20%"
message_style = dict(padding="1em",border_radius="5px",margin_y="0.5em",box_shadow=shadow,max_width="30em",display="inline-block",
)# Set specific styles for questions and answers.
question_style = message_style | dict(margin_left=chat_margin,background_color=rx.color("gray", 4),
)
answer_style = message_style | dict(margin_right=chat_margin,background_color=rx.color("accent", 8),
)# Styles for the action bar.
input_style = dict(border_width="1px", padding="1em", box_shadow=shadow
)
button_style = dict(background_color=rx.color("accent", 10),box_shadow=shadow,
)
最终代码
# chatapp.py
import reflex as rxfrom chatapp import styledef qa(question: str, answer: str) -> rx.Component:return rx.box(rx.box(rx.text(question, style=style.question_style),text_align="right",),rx.box(rx.text(answer, style=style.answer_style),text_align="left",),margin_y="1em",)def chat() -> rx.Component:qa_pairs = [("What is Reflex?","A way to build web apps in pure Python!",),("What can I make with it?","Anything from a simple website to a complex web app!",),]return rx.box(*[qa(question, answer)for question, answer in qa_pairs])def action_bar() -> rx.Component:return rx.hstack(rx.input(placeholder="Ask a question",style=style.input_style,),rx.button("Ask", style=style.button_style),)def index() -> rx.Component:return rx.center(rx.vstack(chat(),action_bar(),align="center",))app = rx.App()
app.add_page(index)
后端
代码
# chatapp.py
import reflex as rxfrom chatapp import styledef qa(question: str, answer: str) -> rx.Component:return rx.box(rx.box(rx.text(question, style=style.question_style),text_align="right",),rx.box(rx.text(answer, style=style.answer_style),text_align="left",),margin_y="1em",)def chat() -> rx.Component:qa_pairs = [("What is Reflex?","A way to build web apps in pure Python!",),("What can I make with it?","Anything from a simple website to a complex web app!",),]return rx.box(*[qa(question, answer)for question, answer in qa_pairs])def action_bar() -> rx.Component:return rx.hstack(rx.input(placeholder="Ask a question",style=style.input_style,),rx.button("Ask", style=style.button_style),)def index() -> rx.Component:return rx.center(rx.vstack(chat(),action_bar(),align="center",))app = rx.App()
app.add_page(index)
最终代码
前端
# chatapp.py
import reflex as rxfrom chatapp import style
from chatapp.state import TutorialStatedef qa(question: str, answer: str) -> rx.Component:return rx.box(rx.box(rx.text(question, text_align="right"),style=style.question_style,),rx.box(rx.text(answer, text_align="left"),style=style.answer_style,),)def chat() -> rx.Component:return rx.box(rx.foreach(TutorialState.chat_history,lambda messages: qa(messages[0], messages[1]),))def action_bar() -> rx.Component:return rx.hstack(rx.input(placeholder="Ask a question",value=TutorialState.question,on_change=TutorialState.set_question,style=style.input_style,),rx.button("Ask",on_click=TutorialState.answer,style=style.button_style,),)def index() -> rx.Component:return rx.center(rx.vstack(chat(),action_bar(),align="center",))app = rx.App()
app.add_page(index)
后端
# chatapp.py
import reflex as rxfrom chatapp import style
from chatapp.state import TutorialStatedef qa(question: str, answer: str) -> rx.Component:return rx.box(rx.box(rx.text(question, text_align="right"),style=style.question_style,),rx.box(rx.text(answer, text_align="left"),style=style.answer_style,),)def chat() -> rx.Component:return rx.box(rx.foreach(TutorialState.chat_history,lambda messages: qa(messages[0], messages[1]),))def action_bar() -> rx.Component:return rx.hstack(rx.input(placeholder="Ask a question",value=TutorialState.question,on_change=TutorialState.set_question,style=style.input_style,),rx.button("Ask",on_click=TutorialState.answer,style=style.button_style,),)def index() -> rx.Component:return rx.center(rx.vstack(chat(),action_bar(),align="center",))app = rx.App()
app.add_page(index)
函数处理
# style.py
import reflex as rx# Common styles for questions and answers.
shadow = "rgba(0, 0, 0, 0.15) 0px 2px 8px"
chat_margin = "20%"
message_style = dict(padding="1em",border_radius="5px",margin_y="0.5em",box_shadow=shadow,max_width="30em",display="inline-block",
)# Set specific styles for questions and answers.
question_style = message_style | dict(background_color=rx.color("gray", 4),margin_left=chat_margin,
)
answer_style = message_style | dict(background_color=rx.color("accent", 8),margin_right=chat_margin,
)# Styles for the action bar.
input_style = dict(border_width="1px",padding="1em",box_shadow=shadow,width="350px",
)
button_style = dict(background_color=rx.color("accent", 10),box_shadow=shadow,
)
)
