Compiler Explorer Claude Explain 完整指南用 Claude AI 读懂汇编生成的架构与实战配置【免费下载链接】compiler-explorerRun compilers interactively from your web browser and interact with the assembly项目地址: https://gitcode.com/gh_mirrors/co/compiler-explorer本文是 Compiler ExplorerCE上帝模式编译器浏览器中Claude Explain功能的深度技术指南。该功能借助 Anthropic 的 Claude 大模型以自然语言解释源码到汇编的翻译过程以及编译器所做的优化决策帮助开发者理解-O2等优化选项背后发生了什么。读完本文你将掌握Claude Explain 的端到端工作原理、explainApiEndpoint配置方法、前后端 API 协议细节、多级缓存机制、隐私保护策略以及它在仓库中的源码实现与测试验证路径。功能概览给汇编配一个AI 讲解员Claude Explain 是 Compiler Explorer 中一个与编译器视图绑定的独立解释面板pane。它把用户编写的源码、编译选项与编译产物汇编行打包发送到 Claude API由大模型生成 Markdown 格式的讲解再渲染回浏览器。其核心价值在于理解源码到汇编的映射解释每条指令的用途、寄存器的作用以及对应源码中的哪一行构造理解优化决策说明编译器为何这样变换循环、内联函数、消除冗余例如为什么mov eax, 42出现在main函数里面向不同水平的读者从初学者的通俗解释到专家的高级优化术语可按需选择。官方文档docs/ClaudeExplain.md明确指出其用途帮助用户理解他们的源码是如何被翻译成汇编的以及应用了哪些编译器优化。工作原理从点击按钮到看到解释的完整链路根据官方文档与客户端源码static/panes/explain-view.ts一次完整的解释生成按以下步骤进行打开面板点击编译器工具栏中的 Explain 按钮打开专属解释面板。面板由 static/panes/compiler.ts 中的createExplainView()创建内部通过 static/components.ts 的getExplainView()注册为 golden-layout 组件并在 static/hub.ts 的explainViewFactory中实例化ExplainView类。等待编译结果面板刚打开时显示 Waiting for compilation...并订阅编译器的事件编译结果到达后由onCompileResult处理。编译结果分流handleCompilationResult见 explain-view.ts编译失败result.code ! 0→ 显示 Cannot explain: Compilation failed源码包含no-ai指令 → 显示特殊提示绝不发送给 API其他情况 → 若尚未同意则展示同意Consent界面已同意则直接发起解释请求。用户选择偏好通过 audience受众水平与 explanation解释类型两个下拉框定制解释下拉框选项由 API 的GET /端点动态下发。获取用户同意首次使用时展示 Consent 界面用户点击 Yes, explain this code 后同意状态以静态变量持久化源码中为ExplainView.consentGiven见 explain-view.ts整个浏览器会话内有效不会写入 cookie 或 localStorage。请求与渲染客户端构建请求负载并POST到端点返回的 Markdown 经marked渲染为带语法高亮的 HTML。缓存生效响应被客户端 LRU 缓存200KB 上限与服务器端共享缓存分别保存以减少 API 成本点击 Reload刷新按钮可携带bypassCache: true强制重新生成。关键源码请求前的四重前置校验在真正发出请求前fetchExplanation会调用validateExplainPreconditionsstatic/panes/explain-view-utils.ts依次检查四类前置条件对应ValidationErrorCode枚举错误码触发条件MISSING_REQUIRED_DATA缺少编译结果、用户同意或编译器信息正常流程中的静默返回OPTIONS_NOT_AVAILABLE未能从GET /获取到可用选项API_ENDPOINT_NOT_CONFIGURED未配置explainApiEndpointNO_AI_DIRECTIVE_FOUND源码含no-ai指令禁止外发其中no-ai检测通过正则/no-ai/i实现大小写不敏感见 explain-view-utils.ts任何位置出现no-ai、NO-AI等写法都会被拦截。配置指南一行属性开启功能Claude Explain 采用零配置即隐藏的设计——只有当管理员在 properties 配置文件中设置了 API 端点后工具栏中的 Explain 按钮才会出现。配置项在站点对应的compiler-explorer.*.properties文件中添加explainApiEndpointhttps://api.compiler-explorer.com/explain官方文档明确指出 The explain button appears automatically when configured配置后按钮自动出现。其背后逻辑位于 static/panes/compiler.ts// Hide Claude Explain button if no API endpoint is configured if (!options.explainApiEndpoint) { this.explainButton.hide(); }配置值经 static/options.interfaces.ts 声明为explainApiEndpoint: string在前端构造ExplainView时通过options.explainApiEndpoint ?? 读取explain-view.ts。若为空字符串validateExplainPreconditions会以API_ENDPOINT_NOT_CONFIGURED拒绝请求。仓库内的实际配置示例在仓库配置目录中可以找到真实部署示例etc/config/compiler-explorer.amazon.propertiesexplainApiEndpointhttps://api.compiler-explorer.com/explainetc/config/compiler-explorer.beta.properties同样指向生产 API这确认了官方站点正是通过此属性将前端指向https://api.compiler-explorer.com/explain这一部署在服务端的解释服务。API 集成协议GET 选项、POST 生成服务端与客户端的契约是文档中信息密度最高、也最需要被二次开发者理解的部分。接口约定如下。GET /— 获取可用选项返回两组下拉选项audience与explanation客户端据此填充两个选择器{ audience: [ {value: beginner, description: Simple language, explains technical terms}, {value: intermediate, description: Focuses on compiler behavior and choices}, {value: expert, description: Technical terminology, advanced optimizations} ], explanation: [ {value: assembly, description: Explains assembly instructions and purpose}, {value: source, description: Maps source code constructs to assembly}, {value: optimization, description: Explains compiler optimizations and transformations} ] }客户端实现上fetchAvailableOptionsexplain-view.ts对选项做了静态缓存 并发去重第一次获取后存入ExplainView.availableOptions若获取尚未完成则复用ExplainView.optionsFetchPromise保证会话内所有解释面板只发起一次GET /请求。POST /— 生成解释请求负载字段与官方文档完全一致并可由 static/panes/explain-view.interfaces.ts 的ExplainRequest类型印证{ language: c, compiler: GCC 13.2, code: Source code, compilationOptions: [-O2, -stdc20], instructionSet: amd64, asm: [Assembly output lines], audience: intermediate, explanation: optimization, bypassCache: false }可选字段与默认值官方文档原文audience默认beginnerexplanation默认assemblybypassCache默认false。在源码中负载由纯函数buildExplainRequeststatic/panes/explain-view-utils.ts构建。从实现可以确认各字段的实际取值来源language取编译器语言compiler.lang、code取编译结果的源码、compilationOptions取自编译选项、instructionSet缺省回退amd64、asm为解析后的汇编行数组且bypassCache仅在为 true 时才写入请求...(bypassCache {bypassCache: true})。单元测试static/tests/panes/explain-view-utils-tests.ts对这一构建逻辑有完整覆盖。响应格式{ status: success, explanation: Markdown-formatted explanation, model: claude-3-sonnet, usage: {inputTokens: 500, outputTokens: 300, totalTokens: 800}, cost: {inputCost: 0.0015, outputCost: 0.0045, totalCost: 0.006}, cached: false }对应类型ClaudeExplainResponseexplain-view.interfaces.ts包含status: success | error、explanation、可选message错误时使用、model、usage、cost以及布尔cached。其中usage/cost用于状态栏展示cached用于标记服务器端缓存命中。客户端实现深度解析组件架构纯逻辑与 UI 分离客户端代码刻意将不依赖 DOM 的纯函数抽离到explain-view-utils.ts注释明确说明这是为了便于测试Anything to do with the explain view that doesnt need any direct UI access, so we can test it easily。两类文件的职责划分static/panes/explain-view.tsExplainView类继承自Pane负责 UI、事件、同意流程、请求发起与缓存读写static/panes/explain-view-utils.ts校验、请求构建、缓存键生成、Markdown 渲染、统计文本格式化、Popover 内容生成、错误信息格式化等纯函数static/panes/explain-view.interfaces.tsExplainViewState、ExplainRequest、ClaudeExplainResponse、AvailableOptions等类型契约。状态图标与加载反馈面板通过statusIconConfigs配置四种状态explain-view.ts状态CSS 类颜色aria-labelLoadingfa-spinner fa-spin默认Generating explanation...Successfa-check-circle#4CAF50绿Explanation generated successfullyErrorfa-times-circle#FF6645红Error generating explanationHiddend-none无隐藏加载期间内容区显示 Generating explanation...出错时按formatErrorMessageexplain-view-utils.ts给出友好提示并调用SentryCapture上报异常。偏好持久化与选项校验audience/explanation的选择通过getCurrentState()/initializeStateDependentProperties写入面板状态ExplainViewState随 golden-layout 布局持久化到 URL 中Cypress 测试验证了刷新页面后选择被正确恢复。初始化完成后若用户选择的值不在 API 返回的合法选项中会自动回退到默认值beginner/assembly见 explain-view.ts 与populateSelectOptions。两个选择器旁各有一个信息按钮点击弹出 Bootstrap popover展示每个选项的说明文字内容由createPopoverContentexplain-view-utils.ts生成。状态栏统计信息面板底部状态栏展示模型、Token 用量、成本估算与缓存状态由formatStatsTextexplain-view-utils.ts生成格式为管道分隔Cached (client) | Model: claude-3-haiku | Tokens: 370 | Cost: $0.001450缓存状态有三种取值Cached (client)客户端 LRU 命中、Cached (server)服务端缓存命中对应响应的cached: true、Fresh本次为新生成。多级缓存机制缓存是降低成本、提升响应速度的关键设计。官方文档明确了三层语义客户端 LRU 缓存缓存键由请求负载哈希生成。源码实现使用lru-cache上限200KBmaxSize: 200 * 1024以JSON.stringify(n).length作为条目大小计算方式explain-view.ts并且是跨所有解释面板共享的静态缓存。缓存键由generateCacheKeyexplain-view-utils.ts对请求中的语言、编译器、源码、编译选项、指令集、汇编、audience、explanation 做 JSON 序列化得到服务器端共享缓存跨用户共享命中时响应携带cached: true缓存绕过点击 Reload 按钮时fetchExplanation(true)传入bypassCache true客户端跳过本地缓存并在请求负载中携带bypassCache: true通知服务端也绕过其缓存从而获得全新解释状态展示状态栏同时体现客户端/服务端缓存命中情况、模型、Token 与成本。客户端缓存命中路径见displayCachedResultexplain-view.ts会跳过 API 调用直接渲染并标注Cached (client)。隐私与安全设计由于功能涉及将用户源码外发给第三方大模型 API隐私设计是文档与实现中的一等公民显式同意源码与编译输出仅在用户点击同意按钮后才会发送给 Anthropic 的 Claude API会话级记忆同意状态仅保存在浏览器会话内静态变量不写入 cookie/localStorage刷新页面非重新加载会话状态后需要重新同意但关闭并重开解释面板时同意保持有效Cypress 测试覆盖了这一行为no-ai豁免机制任何包含no-ai大小写不敏感的源码绝不会被发送到 API——校验发生在请求构建之前命中后直接展示 AI Explanation Not Available 提示编译失败不发送编译失败的代码不会触发任何 API 请求隐私政策覆盖仓库的隐私页面 static/generated/privacy.pug 明确声明The Claude Explain view sends your code and data to Anthropic, the makers of Claude. We always ask for consentClaude Explain 视图会将你的代码与数据发送给 Claude 的开发者 Anthropic我们始终会先征求同意并强调在发送任何代码前都会征得显式同意。官方文档同时说明 Anthropic 不会将数据用于模型训练。已知限制官方文档列出的限制使用时需注意解释覆盖不保证完整Claude 可能无法解释每一个编译器优化或汇编模式大汇编截断过大的汇编输出在发送给 API 前可能被截断导致解释基于不完整上下文依赖网络功能需要联网访问外部 API一编译器一视图每个编译器同一时间只能有一个解释视图。从源码看ExplainView的构造与关闭分别通过事件explainViewOpened/explainViewClosed携带compilerId通知编译器面板static/panes/compiler.ts编译器侧据此维护视图与编译器的绑定关系。测试体系E2E 与单元测试双重覆盖仓库为 Claude Explain 配备了完整的测试可作为理解行为边界的活文档Cypress E2E 测试cypress/e2e/claude-explain.cy.ts 覆盖了面板打开、同意流程首次显示/会话记忆、no-ai大小写不敏感检测、API 交互成功/500 错误/慢响应加载态、选项加载与 popover、切换选项触发重新请求、客户端缓存与 Reload 绕过缓存、编译失败处理、代码变更自动更新解释、主题与偏好状态持久化等场景。测试通过cy.intercept拦截GET/POST请求并用bypassCache断言请求内容同时显式拦截并阻止生产 API 调用BLOCKED PRODUCTION API。单元测试static/tests/panes/explain-view-utils-tests.ts 针对validateExplainPreconditions、buildExplainRequest、generateCacheKey、formatStatsText等纯函数逐项断言包括四类校验错误码、请求字段默认值、bypassCache条件注入、成本格式化为 6 位小数等细节。二次开发要点总结若你要在自己的 Compiler Explorer 实例上部署或定制 Claude Explain关键落点如下服务端实现符合上述GET /、POST /契约的解释服务官方仓库将服务端代码独立维护于 compiler-explorer/explain 项目本仓库仅持有一行端点配置前端配置在compiler-explorer.*.properties中设置explainApiEndpoint未设置则按钮自动隐藏可复用纯逻辑请求构建、校验、缓存键、Markdown 渲染等全部集中在 static/panes/explain-view-utils.ts二次开发应优先复用这些函数并补充单元测试缓存控制客户端 LRU 上限 200KB、静态共享服务端缓存命中通过响应cached字段回传Reload 按钮统一走bypassCache: true合规底线no-ai检测、显式同意、编译失败拦截三层保护不可绕过任何定制都不应破坏这些隐私约束。通过本文你可以从点击按钮看解释到理解每一次请求背后的协议、缓存与隐私决策进而独立部署、调试或扩展这一 AI 辅助理解汇编的功能。【免费下载链接】compiler-explorerRun compilers interactively from your web browser and interact with the assembly项目地址: https://gitcode.com/gh_mirrors/co/compiler-explorer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Compiler Explorer Claude Explain 完整指南：用 Claude AI 读懂汇编生成的架构与实战配置
Compiler Explorer Claude Explain 完整指南用 Claude AI 读懂汇编生成的架构与实战配置【免费下载链接】compiler-explorerRun compilers interactively from your web browser and interact with the assembly项目地址: https://gitcode.com/gh_mirrors/co/compiler-explorer本文是 Compiler ExplorerCE上帝模式编译器浏览器中Claude Explain功能的深度技术指南。该功能借助 Anthropic 的 Claude 大模型以自然语言解释源码到汇编的翻译过程以及编译器所做的优化决策帮助开发者理解-O2等优化选项背后发生了什么。读完本文你将掌握Claude Explain 的端到端工作原理、explainApiEndpoint配置方法、前后端 API 协议细节、多级缓存机制、隐私保护策略以及它在仓库中的源码实现与测试验证路径。功能概览给汇编配一个AI 讲解员Claude Explain 是 Compiler Explorer 中一个与编译器视图绑定的独立解释面板pane。它把用户编写的源码、编译选项与编译产物汇编行打包发送到 Claude API由大模型生成 Markdown 格式的讲解再渲染回浏览器。其核心价值在于理解源码到汇编的映射解释每条指令的用途、寄存器的作用以及对应源码中的哪一行构造理解优化决策说明编译器为何这样变换循环、内联函数、消除冗余例如为什么mov eax, 42出现在main函数里面向不同水平的读者从初学者的通俗解释到专家的高级优化术语可按需选择。官方文档docs/ClaudeExplain.md明确指出其用途帮助用户理解他们的源码是如何被翻译成汇编的以及应用了哪些编译器优化。工作原理从点击按钮到看到解释的完整链路根据官方文档与客户端源码static/panes/explain-view.ts一次完整的解释生成按以下步骤进行打开面板点击编译器工具栏中的 Explain 按钮打开专属解释面板。面板由 static/panes/compiler.ts 中的createExplainView()创建内部通过 static/components.ts 的getExplainView()注册为 golden-layout 组件并在 static/hub.ts 的explainViewFactory中实例化ExplainView类。等待编译结果面板刚打开时显示 Waiting for compilation...并订阅编译器的事件编译结果到达后由onCompileResult处理。编译结果分流handleCompilationResult见 explain-view.ts编译失败result.code ! 0→ 显示 Cannot explain: Compilation failed源码包含no-ai指令 → 显示特殊提示绝不发送给 API其他情况 → 若尚未同意则展示同意Consent界面已同意则直接发起解释请求。用户选择偏好通过 audience受众水平与 explanation解释类型两个下拉框定制解释下拉框选项由 API 的GET /端点动态下发。获取用户同意首次使用时展示 Consent 界面用户点击 Yes, explain this code 后同意状态以静态变量持久化源码中为ExplainView.consentGiven见 explain-view.ts整个浏览器会话内有效不会写入 cookie 或 localStorage。请求与渲染客户端构建请求负载并POST到端点返回的 Markdown 经marked渲染为带语法高亮的 HTML。缓存生效响应被客户端 LRU 缓存200KB 上限与服务器端共享缓存分别保存以减少 API 成本点击 Reload刷新按钮可携带bypassCache: true强制重新生成。关键源码请求前的四重前置校验在真正发出请求前fetchExplanation会调用validateExplainPreconditionsstatic/panes/explain-view-utils.ts依次检查四类前置条件对应ValidationErrorCode枚举错误码触发条件MISSING_REQUIRED_DATA缺少编译结果、用户同意或编译器信息正常流程中的静默返回OPTIONS_NOT_AVAILABLE未能从GET /获取到可用选项API_ENDPOINT_NOT_CONFIGURED未配置explainApiEndpointNO_AI_DIRECTIVE_FOUND源码含no-ai指令禁止外发其中no-ai检测通过正则/no-ai/i实现大小写不敏感见 explain-view-utils.ts任何位置出现no-ai、NO-AI等写法都会被拦截。配置指南一行属性开启功能Claude Explain 采用零配置即隐藏的设计——只有当管理员在 properties 配置文件中设置了 API 端点后工具栏中的 Explain 按钮才会出现。配置项在站点对应的compiler-explorer.*.properties文件中添加explainApiEndpointhttps://api.compiler-explorer.com/explain官方文档明确指出 The explain button appears automatically when configured配置后按钮自动出现。其背后逻辑位于 static/panes/compiler.ts// Hide Claude Explain button if no API endpoint is configured if (!options.explainApiEndpoint) { this.explainButton.hide(); }配置值经 static/options.interfaces.ts 声明为explainApiEndpoint: string在前端构造ExplainView时通过options.explainApiEndpoint ?? 读取explain-view.ts。若为空字符串validateExplainPreconditions会以API_ENDPOINT_NOT_CONFIGURED拒绝请求。仓库内的实际配置示例在仓库配置目录中可以找到真实部署示例etc/config/compiler-explorer.amazon.propertiesexplainApiEndpointhttps://api.compiler-explorer.com/explainetc/config/compiler-explorer.beta.properties同样指向生产 API这确认了官方站点正是通过此属性将前端指向https://api.compiler-explorer.com/explain这一部署在服务端的解释服务。API 集成协议GET 选项、POST 生成服务端与客户端的契约是文档中信息密度最高、也最需要被二次开发者理解的部分。接口约定如下。GET /— 获取可用选项返回两组下拉选项audience与explanation客户端据此填充两个选择器{ audience: [ {value: beginner, description: Simple language, explains technical terms}, {value: intermediate, description: Focuses on compiler behavior and choices}, {value: expert, description: Technical terminology, advanced optimizations} ], explanation: [ {value: assembly, description: Explains assembly instructions and purpose}, {value: source, description: Maps source code constructs to assembly}, {value: optimization, description: Explains compiler optimizations and transformations} ] }客户端实现上fetchAvailableOptionsexplain-view.ts对选项做了静态缓存 并发去重第一次获取后存入ExplainView.availableOptions若获取尚未完成则复用ExplainView.optionsFetchPromise保证会话内所有解释面板只发起一次GET /请求。POST /— 生成解释请求负载字段与官方文档完全一致并可由 static/panes/explain-view.interfaces.ts 的ExplainRequest类型印证{ language: c, compiler: GCC 13.2, code: Source code, compilationOptions: [-O2, -stdc20], instructionSet: amd64, asm: [Assembly output lines], audience: intermediate, explanation: optimization, bypassCache: false }可选字段与默认值官方文档原文audience默认beginnerexplanation默认assemblybypassCache默认false。在源码中负载由纯函数buildExplainRequeststatic/panes/explain-view-utils.ts构建。从实现可以确认各字段的实际取值来源language取编译器语言compiler.lang、code取编译结果的源码、compilationOptions取自编译选项、instructionSet缺省回退amd64、asm为解析后的汇编行数组且bypassCache仅在为 true 时才写入请求...(bypassCache {bypassCache: true})。单元测试static/tests/panes/explain-view-utils-tests.ts对这一构建逻辑有完整覆盖。响应格式{ status: success, explanation: Markdown-formatted explanation, model: claude-3-sonnet, usage: {inputTokens: 500, outputTokens: 300, totalTokens: 800}, cost: {inputCost: 0.0015, outputCost: 0.0045, totalCost: 0.006}, cached: false }对应类型ClaudeExplainResponseexplain-view.interfaces.ts包含status: success | error、explanation、可选message错误时使用、model、usage、cost以及布尔cached。其中usage/cost用于状态栏展示cached用于标记服务器端缓存命中。客户端实现深度解析组件架构纯逻辑与 UI 分离客户端代码刻意将不依赖 DOM 的纯函数抽离到explain-view-utils.ts注释明确说明这是为了便于测试Anything to do with the explain view that doesnt need any direct UI access, so we can test it easily。两类文件的职责划分static/panes/explain-view.tsExplainView类继承自Pane负责 UI、事件、同意流程、请求发起与缓存读写static/panes/explain-view-utils.ts校验、请求构建、缓存键生成、Markdown 渲染、统计文本格式化、Popover 内容生成、错误信息格式化等纯函数static/panes/explain-view.interfaces.tsExplainViewState、ExplainRequest、ClaudeExplainResponse、AvailableOptions等类型契约。状态图标与加载反馈面板通过statusIconConfigs配置四种状态explain-view.ts状态CSS 类颜色aria-labelLoadingfa-spinner fa-spin默认Generating explanation...Successfa-check-circle#4CAF50绿Explanation generated successfullyErrorfa-times-circle#FF6645红Error generating explanationHiddend-none无隐藏加载期间内容区显示 Generating explanation...出错时按formatErrorMessageexplain-view-utils.ts给出友好提示并调用SentryCapture上报异常。偏好持久化与选项校验audience/explanation的选择通过getCurrentState()/initializeStateDependentProperties写入面板状态ExplainViewState随 golden-layout 布局持久化到 URL 中Cypress 测试验证了刷新页面后选择被正确恢复。初始化完成后若用户选择的值不在 API 返回的合法选项中会自动回退到默认值beginner/assembly见 explain-view.ts 与populateSelectOptions。两个选择器旁各有一个信息按钮点击弹出 Bootstrap popover展示每个选项的说明文字内容由createPopoverContentexplain-view-utils.ts生成。状态栏统计信息面板底部状态栏展示模型、Token 用量、成本估算与缓存状态由formatStatsTextexplain-view-utils.ts生成格式为管道分隔Cached (client) | Model: claude-3-haiku | Tokens: 370 | Cost: $0.001450缓存状态有三种取值Cached (client)客户端 LRU 命中、Cached (server)服务端缓存命中对应响应的cached: true、Fresh本次为新生成。多级缓存机制缓存是降低成本、提升响应速度的关键设计。官方文档明确了三层语义客户端 LRU 缓存缓存键由请求负载哈希生成。源码实现使用lru-cache上限200KBmaxSize: 200 * 1024以JSON.stringify(n).length作为条目大小计算方式explain-view.ts并且是跨所有解释面板共享的静态缓存。缓存键由generateCacheKeyexplain-view-utils.ts对请求中的语言、编译器、源码、编译选项、指令集、汇编、audience、explanation 做 JSON 序列化得到服务器端共享缓存跨用户共享命中时响应携带cached: true缓存绕过点击 Reload 按钮时fetchExplanation(true)传入bypassCache true客户端跳过本地缓存并在请求负载中携带bypassCache: true通知服务端也绕过其缓存从而获得全新解释状态展示状态栏同时体现客户端/服务端缓存命中情况、模型、Token 与成本。客户端缓存命中路径见displayCachedResultexplain-view.ts会跳过 API 调用直接渲染并标注Cached (client)。隐私与安全设计由于功能涉及将用户源码外发给第三方大模型 API隐私设计是文档与实现中的一等公民显式同意源码与编译输出仅在用户点击同意按钮后才会发送给 Anthropic 的 Claude API会话级记忆同意状态仅保存在浏览器会话内静态变量不写入 cookie/localStorage刷新页面非重新加载会话状态后需要重新同意但关闭并重开解释面板时同意保持有效Cypress 测试覆盖了这一行为no-ai豁免机制任何包含no-ai大小写不敏感的源码绝不会被发送到 API——校验发生在请求构建之前命中后直接展示 AI Explanation Not Available 提示编译失败不发送编译失败的代码不会触发任何 API 请求隐私政策覆盖仓库的隐私页面 static/generated/privacy.pug 明确声明The Claude Explain view sends your code and data to Anthropic, the makers of Claude. We always ask for consentClaude Explain 视图会将你的代码与数据发送给 Claude 的开发者 Anthropic我们始终会先征求同意并强调在发送任何代码前都会征得显式同意。官方文档同时说明 Anthropic 不会将数据用于模型训练。已知限制官方文档列出的限制使用时需注意解释覆盖不保证完整Claude 可能无法解释每一个编译器优化或汇编模式大汇编截断过大的汇编输出在发送给 API 前可能被截断导致解释基于不完整上下文依赖网络功能需要联网访问外部 API一编译器一视图每个编译器同一时间只能有一个解释视图。从源码看ExplainView的构造与关闭分别通过事件explainViewOpened/explainViewClosed携带compilerId通知编译器面板static/panes/compiler.ts编译器侧据此维护视图与编译器的绑定关系。测试体系E2E 与单元测试双重覆盖仓库为 Claude Explain 配备了完整的测试可作为理解行为边界的活文档Cypress E2E 测试cypress/e2e/claude-explain.cy.ts 覆盖了面板打开、同意流程首次显示/会话记忆、no-ai大小写不敏感检测、API 交互成功/500 错误/慢响应加载态、选项加载与 popover、切换选项触发重新请求、客户端缓存与 Reload 绕过缓存、编译失败处理、代码变更自动更新解释、主题与偏好状态持久化等场景。测试通过cy.intercept拦截GET/POST请求并用bypassCache断言请求内容同时显式拦截并阻止生产 API 调用BLOCKED PRODUCTION API。单元测试static/tests/panes/explain-view-utils-tests.ts 针对validateExplainPreconditions、buildExplainRequest、generateCacheKey、formatStatsText等纯函数逐项断言包括四类校验错误码、请求字段默认值、bypassCache条件注入、成本格式化为 6 位小数等细节。二次开发要点总结若你要在自己的 Compiler Explorer 实例上部署或定制 Claude Explain关键落点如下服务端实现符合上述GET /、POST /契约的解释服务官方仓库将服务端代码独立维护于 compiler-explorer/explain 项目本仓库仅持有一行端点配置前端配置在compiler-explorer.*.properties中设置explainApiEndpoint未设置则按钮自动隐藏可复用纯逻辑请求构建、校验、缓存键、Markdown 渲染等全部集中在 static/panes/explain-view-utils.ts二次开发应优先复用这些函数并补充单元测试缓存控制客户端 LRU 上限 200KB、静态共享服务端缓存命中通过响应cached字段回传Reload 按钮统一走bypassCache: true合规底线no-ai检测、显式同意、编译失败拦截三层保护不可绕过任何定制都不应破坏这些隐私约束。通过本文你可以从点击按钮看解释到理解每一次请求背后的协议、缓存与隐私决策进而独立部署、调试或扩展这一 AI 辅助理解汇编的功能。【免费下载链接】compiler-explorerRun compilers interactively from your web browser and interact with the assembly项目地址: https://gitcode.com/gh_mirrors/co/compiler-explorer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
