-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathocr-source.html
More file actions
142 lines (126 loc) · 9.12 KB
/
Copy pathocr-source.html
File metadata and controls
142 lines (126 loc) · 9.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml">
<title>實作案例 · OCR 自己 · OpenCodeReview 繁中教學站</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Noto+Sans+TC:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/site.css">
</head>
<body>
<div class="container">
<nav class="topnav">
<a href="../../index.html">首頁</a>
<a href="../../map.html">概念地圖</a>
<a href="../../learning-path.html">學習路線</a>
<a href="../../install.html">安裝指南</a>
<a href="../index.html">文件教學</a>
<a href="../code/index.html">程式碼對照</a>
<a href="../worked.html">實作案例</a>
<a href="../../about.html">關於</a>
</nav>
<div class="back-link"><a href="../worked.html">← 實作案例</a></div>
<header>
<h1>用 graphify 分析 OpenCodeReview</h1>
<div class="subtitle">meta 示範：用「另一個知識圖譜工具」掃描 OCR 自己的源碼</div>
<div class="badge-line">語料：<code>cmd/</code> + <code>internal/</code> + <code>bin/</code> + <code>scripts/</code>（293 檔）· 對齊 commit <code>9148bfd</code> · graphify 0.9.40</div>
</header>
<div class="guide">
<div class="license-box"><strong>產出出處</strong>：本案例的互動圖與報告由 <a href="https://github.com/Graphify-Labs/graphify">graphify</a> 產生。graphify 是另一個開源知識圖譜工具（Leiden 社群偵測、EXTRACTED/INFERRED 信任標籤、互動 HTML 輸出）；本站用它來<b>分析 OpenCodeReview 自己</b>，呈現「知識圖譜工具 × code review 工具」的對照。產出資料在 <code>worked/ocr-source/</code>。</div>
<h2>為什麼做這個案例</h2>
<p>OpenCodeReview（OCR）本身就是一個 AI 驅動的 code review CLI。用 graphify 再掃一次 OCR 的源碼，有幾個教學價值：</p>
<ul>
<li><strong>對照兩種工具哲學</strong>：graphify 偏向「一鍵互動圖 + 審計報告」，OCR 偏向「確定性管線 × LLM Agent + 逐行評論」。同一份 Go 語料，graphify 用 AST 純本機抽取出結構圖。</li>
<li><strong>驗證 OCR 的模組結構</strong>：graphify 的社群偵測自然地把 168 個社群對應到 OCR 的模組（command 層、agent 編排、diff 解析、規則引擎、provider TUI…）——側面驗證 OCR 的架構乾淨度。</li>
<li><strong>meta 示範</strong>：看一個「會審查 code 的 repo」被另一個工具畫成圖。</li>
</ul>
<h2>語料</h2>
<p>上游 <code>main @ 9148bfd</code>（2026-08-13）的第一方程式碼：</p>
<table>
<tr><th>部分</th><th>內容</th><th>檔案數</th></tr>
<tr><td><code>cmd/opencodereview/</code></td><td>CLI 命令層（main / review / scan / delegate / config / provider TUI）</td><td>~60</td></tr>
<tr><td><code>internal/</code></td><td>核心套件（agent / diff / llm / llmloop / tool / rules / session / mcp / viewer / telemetry）</td><td>~215</td></tr>
<tr><td><code>bin/</code> + <code>scripts/</code></td><td>NPM wrapper（ocr.js）與安裝/發布腳本</td><td>~16</td></tr>
<tr><td>合計</td><td>純 code 語料（<code>--code-only</code>，零 LLM 成本）</td><td><strong>293</strong></td></tr>
</table>
<p class="hint">刻意排除 <code>internal/llm/bpe_data/*.tiktoken</code>、<code>pages/</code>（官方網站 React 專案）與 docs 內容——圖要呈現「OCR 的 Go 核心工程」。</p>
<h2>本站跑的數字</h2>
<table>
<tr><th>指標</th><th>本站實測</th></tr>
<tr><td>語料檔案數</td><td>293</td></tr>
<tr><td>節點</td><td><strong>4,128</strong></td></tr>
<tr><td>邊</td><td><strong>12,278</strong></td></tr>
<tr><td>社群</td><td><strong>168</strong>（156 顯示，12 個過薄省略）</td></tr>
<tr><td>抽取</td><td>72% EXTRACTED · 28% INFERRED · 0% AMBIGUOUS（INFERRED 3,414 邊，平均信心 0.8）</td></tr>
<tr><td>Import Cycles</td><td>None detected</td></tr>
<tr><td>LLM / API 成本</td><td>0（純 AST，本機執行）</td></tr>
<tr><td>工具版本</td><td>graphify 0.9.40</td></tr>
</table>
<h2>God Nodes（核心抽象）</h2>
<p>graphify 報告指出連接最多邊的「樞紐節點」——正是 OCR 架構中最關鍵的函式：</p>
<table>
<tr><th>函式</th><th>邊數</th><th>位置</th></tr>
<tr><td><code>contains()</code></td><td>335</td><td>測試 helper（大量測試共用的斷言工具）</td></tr>
<tr><td><code>newProviderTUI()</code></td><td>176</td><td><code>cmd/opencodereview/provider_tui.go</code>——provider 設定 TUI 的建構入口</td></tr>
<tr><td><code>writeFile()</code></td><td>175</td><td>測試寫檔 helper</td></tr>
<tr><td><code>context</code></td><td>131</td><td>Go context 型別節點</td></tr>
<tr><td><code>main()</code></td><td>87</td><td><code>cmd/opencodereview/main.go</code>——單一二進位入口</td></tr>
</table>
<p class="hint">God nodes 以測試 helper 與 TUI 為大宗（因為測試碼呼叫密集）；想找「商業邏輯樞紐」要看 Community 對應的 module 層。</p>
<h2>社群對應模組</h2>
<p>168 個社群，最大的幾個直接對應 OCR 的模組：</p>
<table>
<tr><th>社群（graphify 編號）</th><th>節點</th><th>對應 OCR 模組</th></tr>
<tr><td>Community 1</td><td>97</td><td>provider 設定 TUI 測試（<code>provider_tui_*_test.go</code>）</td></tr>
<tr><td>Community 2</td><td>94</td><td>provider TUI 模型/檢視（key 處理、tab 導覽）</td></tr>
<tr><td>Community 3</td><td>83</td><td>diff hunk 解析（<code>Hunk</code> / <code>ParseHunks</code> 及其測試）</td></tr>
<tr><td>Community 4</td><td>87</td><td>LLM 端點解析（<code>ResolveEndpoint</code> 家族與測試）</td></tr>
<tr><td>Community 5</td><td>74</td><td>記憶壓縮與訊息計數（<code>buildMessageXML</code> / <code>CountMessagesTokens</code>）</td></tr>
<tr><td>Community 7</td><td>76</td><td>規則解析鏈（<code>LoadDefault</code> / <code>NewResolver</code> / <code>readRuleFileSafe</code>）</td></tr>
<tr><td>Community 10</td><td>45</td><td>diff Provider（<code>Mode</code> / <code>InputResolution</code> / <code>firstLine</code>）</td></tr>
</table>
<p class="hint">完整 168 社群清單見 <a href="../../worked/ocr-source/GRAPH_REPORT.md" target="_blank">GRAPH_REPORT.md</a>。社群名保留 "Community N" 佔位（graphify 無 LLM backend 標籤模式），可對應到語料路徑判讀模組。</p>
<h2>互動圖</h2>
<div class="graph-embed">
<div class="graph-embed-bar">
<span class="g-title">OCR 源碼知識圖譜（社群聚合檢視）</span>
<span class="g-links"><a href="../../worked/ocr-source/graph.html" target="_blank">英文界面 ↗</a><a href="../../worked/ocr-source/graph-zh.html" target="_blank">中文界面 ↗</a></span>
</div>
<iframe src="../../worked/ocr-source/graph-zh.html" title="OCR source knowledge graph"></iframe>
</div>
<p class="hint">4,128 節點未超過 graphify 的節點級檢視上限，但為方便一眼看模組結構，這裡以社群聚合檢視呈現。</p>
<h2>如何重現</h2>
<pre><code># 0. 安裝 graphify（PyPI 套件名 graphifyy，雙 y）
uv tool install graphifyy
# 1. 準備語料（只保留第一方程式碼）
git clone https://github.com/alibaba/open-code-review.git ocr
git -C ocr checkout 9148bfdded6578c597adf893bbc0c698ea5423b9
mkdir corpus && cp -R ocr/cmd corpus/ && cp -R ocr/internal corpus/
cp -R ocr/bin corpus/ && cp -R ocr/scripts corpus/
# 2. 跑完整 pipeline（code-only，零 API key）
graphify corpus --code-only
# 3. 產出在 corpus/graphify-out/
# graph.html 互動圖
# graph.json 全量圖資料（4,128 nodes / 12,278 edges）
# GRAPH_REPORT.md 審計報告
# 4. 中文化 UI（選擇性）
cp graphify-out/graph.html graphify-out/graph-zh.html
# 替換 lang="en" → lang="zh-Hant" 及 UI 字串（Search / Node Info / Communities…）</code></pre>
<h2>已知限制</h2>
<ul>
<li>語料排除 <code>pages/</code>（官方網站 React 專案）、<code>internal/llm/bpe_data/*.tiktoken</code> 與 docs——節點數不代表 OCR 全 repo。</li>
<li>社群名是 graphify 無 LLM 模式下的 "Community N" 佔位，判讀模組需配合語料路徑。</li>
<li>graphify 的社群偵測（Leiden）與 OCR 內部沒用社群演算法——數字不直接可比，本頁只做結構對照。</li>
</ul>
<div class="callout"><strong>看完這個案例你應該能說出</strong>：OCR 的模組邊界在哪（command 層 / internal 核心）、為什麼 provider TUI 與測試 helper 是最多邊的樞紐、以及 graphify 與 OCR 兩種工具的根本差異（純結構圖 vs 確定性管線 × LLM 評審）。</div>
</div>
<footer>
<div>這是 <a href="https://github.com/alibaba/open-code-review">alibaba/open-code-review</a> 的非官方繁體中文教學站。</div>
<div>內容 © <a href="https://github.com/alibaba/open-code-review">alibaba/open-code-review Contributors</a>（Apache-2.0）· 本站與 Alibaba 無關 · 對齊上游 main @ 9148bfd</div>
</footer>
</div>
</body>
</html>