实践reflex：以AI Chat APP为例

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 reflex and 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,
)