🤖 从0到1搭建一个AI Browser Agent:Playwright + FastAPI + Dashboard 全链路实战

3 阅读3分钟

🚀 一、为什么我要做这个项目

image.png

很多人做爬虫,只停留在「抓数据」这一步。

但真实工程里,数据只是开始——
后面还有:

  • 数据处理
  • 统计分析
  • API服务
  • 可视化展示
  • AI增强

所以我直接做了一个完整链路项目

浏览器自动化 → 数据抽取 → 分析 → API → Dashboard → AI Insight

一句话:
👉 不是爬虫,是一个 mini AI 数据系统

最终效果是:

✔ 可自动抓取网站数据
✔ 自动分析数据结构
✔ 提供API接口
✔ 可视化Dashboard展示
✔ 支持AI总结分析


🧠 二、项目整体架构

Playwright → 数据抽取 → JSON存储 → 统计分析 → FastAPIStreamlit DashboardAI分析

核心模块拆成四层:

模块作用
crawler浏览器自动化抓数据
analyzer统计分析
api提供接口
ui可视化展示

🌐 三、浏览器自动化(Playwright)

为什么不用 requests?

👉 因为真实网站:

  • 有分页
  • 有动态加载
  • 有JS渲染

所以直接上浏览器级别控制。

核心逻辑:

page.goto(url)

quotes = page.query_selector_all(".quote")

for q in quotes:
    text = q.query_selector(".text").inner_text()
    author = q.query_selector(".author").inner_text()
    tags = [t.inner_text() for t in q.query_selector_all(".tag")]

分页处理:

next_btn = page.query_selector(".next a")
if next_btn:
    next_btn.click()

👉 这一步本质是:模拟人操作浏览器


📊 四、数据分析(Analyzer)

image.png

数据下来之后,不只是存。

我做了三件事:

1️⃣ 作者频率统计

from collections import Counter

author_counter = Counter([q["author"] for q in data])
top_authors = author_counter.most_common(10)

2️⃣ 标签统计

tag_counter = Counter(tag for q in data for tag in q["tags"])

3️⃣ 分页分布

page_counter = Counter([q["page"] for q in data])

输出结果:

{
  "total_quotes": 100,
  "top_10_authors": [["Albert Einstein", 10]]
}

👉 这一层开始有「数据产品味道」了


🔌 五、FastAPI(接口层)

image.png

我把数据封装成 API:

@app.get("/quotes")
def get_quotes():
    return data

@app.get("/analysis")
def get_analysis():
    return analysis

启动:

uvicorn app.api.server:app --reload

👉 自动生成 Swagger:

http://127.0.0.1:8000/docs

这一步很关键:

👉 项目从“脚本”升级为“服务”

image.png


🎨 六、Streamlit Dashboard

image.png 这一层是项目的「脸」。

核心功能:

  • 总数统计
  • Top作者图
  • Top标签图
  • 分页分布
  • 数据表

示例:

st.metric("Total Quotes", total)

st.bar_chart(author_df)
st.bar_chart(tag_df)

st.dataframe(quotes_df)

👉 重点:

不是展示数据
而是让数据可读、可解释


🤖 七、AI Insight(加分项)

我额外加了一层:

👉 用 LLM 做总结

例如:

prompt = f"""
分析以下数据:
{analysis_json}
"""

输出类似:

  • 哪些作者出现最多
  • 标签偏向什么主题
  • 数据分布特征

并且加了 fallback:

👉 没额度也能跑,不会挂


💡 八、这个项目的本质升级

很多人做项目停在:

❌ 爬虫demo
❌ 数据脚本

但这个项目是:

✅ 数据 → 服务 → 产品形态


🧠 九、真实踩坑记录(工程级问题)

1️⃣ uvicorn 启动失败

原因:环境没装 or 命令路径错
解决:确认虚拟环境 + pip install

2️⃣ FastAPI import 报错

原因:没激活 venv
解决:venv\Scripts\activate

3️⃣ Streamlit 命令找不到

原因:没装 / 没在当前环境
解决:pip install streamlit

4️⃣ git push 被拒

原因:remote 更新
解决:git pull --rebase


🔥 十、下一步优化方向

我已经在准备升级:

  • 🧠 LLM结构化输出(不是纯文本)
  • 🗄️ PostgreSQL替代JSON
  • 🌍 多站点抓取
  • 🐳 Docker部署
  • ⚡ API服务上线

image.png

👿 十一、总结(重点)

这个项目不是重点。

重点是你开始具备:

  • 从0搭一个系统
  • 跑通完整链路
  • 做成可展示项目

🧠 一句话

👉 工程能力 > 技术点本身


👩‍💻 作者

Catherine