CODE GENERATION · PROGRAM SYNTHESIS

代码生成与程序合成可视化实验室

用 8 个交互式 SVG 模块，拆解代码生成、Code LLM、程序合成与 Agent 自动编程的内部机制——从 AST 解析到 beam search，从 RAG 检索到上下文窗口管理，每一个概念都可调、可玩、可视。

8 Modules SVG + Vanilla JS Zero Dependencies Single File

CORE CONCEPTS · 核心概念速览

AST

抽象语法树，源码经词法/语法分析后的结构化树形表示

BPE

Byte-Pair Encoding，子词分词算法，将代码切为可复用子词单元

FIM

Fill-In-the-Middle，训练范式，让模型学会在上下文中间填空

Beam Search

解码策略，每步保留 top-k 候选并行展开，平衡质量与多样性

RAG

检索增强生成，先检索相关代码片段再拼入 prompt 供 LLM 生成

DSL

领域特定语言，程序合成中受限的算子集合，定义搜索空间

pass@k

代码生成评估指标，每题采样 k 次至少 1 次通过的比例

KV Cache

推理时缓存的 Key-Value 张量，避免重复计算，支持驱逐策略

01ABSTRACT SYNTAX TREE

AST 抽象语法树

源码经词法/语法分析被解析为一棵抽象语法树（AST）。切换函数/类/表达式示例，悬停代码行可高亮对应的 AST 子树节点。

Parser · Source → Tree

02AUTOCOMPLETION

代码补全 (Copilot 式)

Code LLM 根据光标前的上下文窗口预测下一个 token。调整温度、beam 宽度与上下文长度，观察 beam search 多候选展开与概率分布的变化。

Decoder · Context → Next Token

03MODEL ARCHITECTURE

Code LLM 架构

解构 Code LLM 的内部数据流：源码经 BPE 分词 → token 嵌入 → 位置编码 → Transformer 层 → 输出 logits。切换 decoder-only / encoder-decoder，并展示 FIM 填空训练范式。

Forward Pass · Code → Token

04RETRIEVAL-AUGMENTED

RAG for Code

检索增强代码生成：先对代码库建索引、生成 embedding，再用查询检索 top-k 相关片段，拼进 prompt 后交给 LLM 生成。切换 BM25 / Embedding / 混合检索观察召回差异。

Retrieve · Index → Augment → Generate

05PROGRAM SYNTHESIS

程序合成

给定输入-输出示例，在 DSL 中枚举/搜索满足约束的程序。调整示例数量与搜索深度，观察搜索空间如何随深度爆炸，以及剪枝如何加速合成。

Synthesizer · Examples → Program

06EVALUATION BENCHMARKS

代码评估基准

代码生成评估基准 HumanEval / MBPP / CodeContests / SWE-bench 与 pass@k 指标。切换基准与模型，查看排行榜与 pass@1/10/100 的差异。

Benchmarks · pass@k Leaderboard

07AGENT LOOP

Agent 自动编程

AI Agent 自动编程的 plan → 写码 → 跑测试 → 修错误循环。调整任务复杂度与最大迭代数，观察 Agent 如何通过工具调用迭代收敛到通过测试的代码。

Agent · Plan → Write → Test → Fix

08CONTEXT MANAGEMENT

上下文窗口管理

长 context 管理策略：滑动窗口、attention sink、KV cache 驱逐、上下文压缩。观察大代码库中哪些片段被保留进有限上下文，哪些被驱逐。

Context · Codebase → Window