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.py
import reflex as rx
def 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 rx
from chatapp import style
def 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 rx
from chatapp import style
def 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 rx
from chatapp import style
from chatapp.state import TutorialState
def 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 rx
from chatapp import style
from chatapp.state import TutorialState
def 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,
)