英语句子语法分析器

基于 spaCy 依存句法分析的英语句子可视化工具。输入任意英文句子，前端以**句子流（Sentence Flow）**形式展示依存关系——词按阅读顺序排列，荧光笔底色区分语法成分，彩色贝塞尔弧线连接依存词，从句以独立圆角框嵌套展示。

技术栈

层	技术
后端	FastAPI + spaCy (en_core_web_sm)
前端	Vue 3 (Composition API) + Vite
包管理	uv (Python) / npm (前端)

快速开始

1. 安装依赖

# Python 依赖（项目根目录）
uv sync

# 下载 spaCy 英文模型
uv run python -m spacy download en_core_web_sm

# 前端依赖
cd frontend && npm install

2. 启动后端

uv run uvicorn main:app --reload --port 8000

API 运行在 http://127.0.0.1:8000，提供 POST /analyze 接口。

3. 启动前端

cd frontend && npx vite --port 5173

打开 http://127.0.0.1:5173，输入英文句子即可分析。

项目结构

.
├── main.py                 # FastAPI 后端 + spaCy 依存树构建
├── pyproject.toml          # Python 项目配置
├── README.md
└── frontend/
    ├── index.html
    ├── package.json
    ├── vite.config.js
    └── src/
        ├── main.js                 # Vue 入口
        ├── style.css               # 全局样式
        ├── App.vue                 # 主布局：输入框 + 悬停详情面板
        └── components/
            ├── SyntaxNode.vue      # 核心：树数据处理 + SVG 弧线覆盖层
            └── ClauseGroup.vue     # 递归从句帧组件（支持从句嵌套从句）

可视化特性

• 句子流布局 — 所有词按阅读顺序排列，核心动词不跳出
• 荧光笔底色 — 30+ 种依存关系各有独立底色/字色/边框色
• SVG 贝塞尔弧线 — 依存词之间画彩色曲线，颜色按依存类型区分
• 从句圆角框 — 主句实线框，从句虚线框 + 左上角色标，从句可无限嵌套
• 名词性从句占位 — 主语从句/宾语从句在主句中留空位块 ▢
• 悬停高亮 — 鼠标悬停任意词 → 子树全亮 + 不相关词变暗 + 底部详情面板
• 弧线联动 — 悬停时相关贝塞尔弧线自动加粗（2.5px → 5px）
• 占位块悬停 — 悬停名词性从句占位块 → 整个从句词高亮

API 接口

POST /analyze

请求：

{ "text": "The man who I saw yesterday is my uncle." }

响应： 递归 SyntaxTreeNode 树，每个节点包含：

字段	说明
id	路径标识，如 "0.0.1"
text	单词原文
pos	词性标签（NOUN / VERB / …）
dep	依存标签（nsubj / relcl / …）
dep_zh	依存中文名（主语 / 定语从句 / …）
clause_label	从句类型中文名，非从句为空
idx	句中位置索引
subtree_ids	该节点及所有下位词的 ID 列表
children	子节点数组