全体をリファクタリング

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         shell: bash
 
       - name: Prettier
-        run: npm run format:check
+        run: make format/check
         shell: bash
 
   build:
@@ -46,5 +46,47 @@ jobs:
         shell: bash
 
       - name: Build
-        run: npm run build
+        run: make build
+        shell: bash
+
+  type-check:
+    name: Type Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Install Packages
+        run: npm ci
+        shell: bash
+
+      - name: Type Check
+        run: make type-check
+        shell: bash
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Install Packages
+        run: npm ci
+        shell: bash
+
+      - name: Lint
+        run: make lint
         shell: bash

.github/workflows/deploy.yml

@@ -41,9 +41,9 @@ jobs:
         shell: bash
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v4
+        uses: actions/upload-pages-artifact@v5
         with:
-          path: ./packages/frontend/dist
+          path: ./apps/frontend/dist
 
   deploy:
     name: Deploy
@@ -55,4 +55,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5

AGENTS.md

@@ -0,0 +1,45 @@
+# AGENTS.md
+
+## 概要
+
+SV-Markerは、日本の英語教育で使われる英文の構造図を作成するためのWebアプリケーションです。英文構造に関する情報と、構造図の表記規約をもとに、構造図を生成します。
+
+## ディレクトリ構造
+
+- `apps/frontend`: 英文構造に関する情報の入力、構造図の表記規約の切り替え、構造図の表示などを扱う
+- `apps/backend`: フロントエンドからのAPI呼び出しを受け、Stanzaサーバーにリクエストを送り、その解析結果をもとに英文構造に関する情報を生成する
+- `apps/stanza-server`: FastAPIベースのStanzaのサーバー。英文を解析し、dependency parseやconstituency parseの結果などを返す
+- `packages/sentence-structure-document`: 英文構造に関する情報の定義、検証、操作、入出力を扱う
+- `packages/sentence-structure-diagram-notation`: 構造図の表記規約の定義、検証、表記規約のプリセットの定義、入出力を扱う
+- `packages/sentence-structure-diagram`: 英文構造に関する情報と構造図の表記規約から、構造図のデータやSVGを生成する
+- `packages/sentence-structure-document-from-stanza`: Stanzaの解析結果を英文構造に関する情報に変換する
+- `evals`: 自動生成の評価用コード
+
+## コマンド
+
+Node側はnpm workspacesで管理している。`apps/stanza-server`だけはPythonとなっている。
+
+### 変更内容の確認
+
+```bash
+npm run format:check
+npm run build
+```
+
+特定のworkspaceだけ確認したいときは、`npm run build --workspace=<workspace>`を使う。
+
+### 開発用サーバーの起動
+
+```bash
+npm run dev --workspace=apps/frontend
+npm run dev --workspace=apps/backend
+cd apps/stanza-server && uv run fastapi dev
+```
+
+### 型定義の更新
+
+```bash
+npm run stanza-server:generate --workspace=apps/backend
+```
+
+実行前に`apps/stanza-server`が`http://127.0.0.1:8000`で起動している必要がある。

Makefile

@@ -0,0 +1,65 @@
+format:
+	npm run format
+
+format/check:
+	npm run format:check
+
+build:
+	npm run build
+
+type-check:
+	npm run type-check --workspaces
+
+lint:
+	npm run lint
+
+clean:
+	npm run clean
+
+build/packages:
+	npm run build:packages
+
+stanza-server/generate:
+	cd apps/stanza-server && uv run python -c "import main; import json; print(json.dumps(main.app.openapi()))" > ../../openapi/stanza-server/openapi.json && npx prettier --write ../../openapi/stanza-server/openapi.json
+
+stanza-server/generate/check:
+	make stanza-server/generate && git diff --exit-code -- openapi/stanza-server/openapi.json
+
+backend/generate:
+	npm run stanza-server:generate --workspace=backend
+
+backend/dev:
+	npm run dev --workspace=backend
+
+backend/build:
+	npm run build --workspace=backend
+
+backend/type-check:
+	npm run type-check --workspace=backend
+
+backend/clean:
+	npm run clean --workspace=backend
+
+frontend/dev:
+	npm run dev --workspace=frontend
+
+frontend/build:
+	npm run build --workspace=frontend
+
+frontend/type-check:
+	npm run type-check --workspace=frontend
+
+frontend/clean:
+	npm run clean --workspace=frontend
+
+evals/generate:
+	npm run stanza-server:generate --workspace=evals
+
+evals/build:
+	npm run build --workspace=evals
+
+evals/type-check:
+	npm run type-check --workspace=evals
+
+evals/clean:
+	npm run clean --workspace=evals

README.md

@@ -17,21 +17,17 @@
   - [主な機能](#主な機能)
     - [英文構造を入力](#英文構造を入力)
     - [英文構造を自動生成](#英文構造を自動生成)
-    - [英文構造図の表記スタイルを切り替え](#英文構造図の表記スタイルを切り替え)
+    - [構造図の表記スタイルを切り替え](#構造図の表記スタイルを切り替え)
     - [SVGファイルに書き出して再編集](#SVGファイルに書き出して再編集)
 
 ## 概要
 
-SV-Markerは、日本の英語教育で使われる英文構造図を作成するためのWebアプリケーションです。
-文の要素（SVOCM）や、修飾関係、並列関係などの情報を入力すると、その情報から英文構造図が自動的に作成されます。
+SV-Markerは、日本の英語教育で使われる英文の構造図を作成するためのWebアプリケーションです。
+文の要素（SVOCM）や、修飾関係、並列関係などの情報を入力すると、その情報から構造図が自動的に作成されます。
 図を手で描くのではなく、英文構造そのものを直接入力できるのが特徴です。
 
 - URL：https://utlis.github.io/sv-marker/
 
-> [!NOTE]
-> 現在の最新版は https://github.com/utlis/sv-marker/pull/4 で開発中です。
-> `main`ブランチと上記の公開URLは古いバージョンです。
-
 https://github.com/user-attachments/assets/74221d6e-f872-4a46-a820-8de77d559695
 
 ## 主な機能
@@ -48,14 +44,14 @@ https://github.com/user-attachments/assets/47d6cfed-7718-4a08-a638-6bbcd18276cc
 
 https://github.com/user-attachments/assets/d2904d61-8d26-4b60-ac01-5915639e0946
 
-### 英文構造図の表記スタイルを切り替え
+### 構造図の表記スタイルを切り替え
 
-同じ英文構造を異なる表記スタイルで表示できます。英文構造図の表記スタイルを細かくカスタマイズすることもできます。
+同じ英文構造を異なる表記スタイルで表示できます。構造図の表記スタイルを細かくカスタマイズすることもできます。
 
 https://github.com/user-attachments/assets/367486d7-dd28-4a5b-b2c8-47f780a18bf7
 
 ### SVGファイルに書き出して再編集
 
-英文構造図をSVGファイルとして書き出すことができます。出力したSVGファイルをインポートすることもできるため、あとから編集を再開することができます。
+構造図をSVGファイルとして書き出すことができます。出力したSVGファイルをインポートすることもできるため、あとから編集を再開することができます。
 
 https://github.com/user-attachments/assets/4373029c-edf3-442d-a2eb-baf55df55848

apps/backend/.env.sample

@@ -0,0 +1,3 @@
+WEB_ORIGIN=http://localhost:5173
+STANZA_SERVER_ORIGIN=http://127.0.0.1:8000
+GEMINI_API_KEY=

packages/backend/.gitignore → apps/backend/.gitignore

@@ -1,2 +1,3 @@
 /dist
 /.env
+/generated

apps/backend/_app.ts

@@ -0,0 +1,39 @@
+import { publicProcedure, router } from "./trpc.js";
+import * as z from "zod";
+import { SimplifiedSentenceStructureDocumentSchema } from "@sv-marker/sentence-structure-document";
+import { generateSimplifiedSentenceStructureDocumentWithStanza } from "./generate-simplified-sentence-structure-document-with-stanza.js";
+import { reviseSimplifiedSentenceStructureDocumentWithGemini } from "./revise-simplified-sentence-structure-document-with-gemini.js";
+
+export const appRouter = router({
+  status: publicProcedure
+    .output(z.object({ status: z.literal("ok") }))
+    .query(() => ({ status: "ok" })),
+  generateSimplifiedSentenceStructureDocument: publicProcedure
+    .input(
+      z.object({
+        text: z.string(),
+      }),
+    )
+    .output(SimplifiedSentenceStructureDocumentSchema)
+    .mutation(async (opts) => {
+      const text = opts.input.text;
+      console.log(`Input text: ${text}`);
+
+      return await generateSimplifiedSentenceStructureDocumentWithStanza(text);
+    }),
+  reviseSimplifiedSentenceStructureDocument: publicProcedure
+    .input(
+      z.object({
+        userRevisionInstruction: z.string(),
+        baseSimplifiedSentenceStructureDocument:
+          SimplifiedSentenceStructureDocumentSchema,
+      }),
+    )
+    .output(SimplifiedSentenceStructureDocumentSchema)
+    .mutation(async (opts) =>
+      reviseSimplifiedSentenceStructureDocumentWithGemini(
+        opts.input.userRevisionInstruction,
+        opts.input.baseSimplifiedSentenceStructureDocument,
+      ),
+    ),
+});