218、【AI】【模型部署】Notebook 源码拆解：输出 data 的多格式与前端择优渲染

【声明】本博客所有内容均为个人业余时间创作所述技术案例均来自公开开源项目如GithubApache基金会不涉及任何企业机密或未公开技术如有侵权请联系删除标题218、【AI】【模型部署】Notebook 源码拆解输出 data 的多格式与前端择优渲染背景上篇 blog【AI】【模型部署】Notebook 源码拆解.ipynb 文档到底长什么样解剖了.ipynboutputs 有 execute_result/display_data/stream 等类型execute_result 与 display_data 的data是按 mime 类型分键的字典IMimeBundleindex.ts:71-73validateMimeValue规定JSON 型 mime 只许对象、非 JSON 型许字符串/数组只一句带过真实样例里 data 同时出现text/html、image/svgxml、image/jpeg等 mime。217 到此为止——为什么同一份结果要存多个 mime 版本、前端到底怎么挑、挑完怎么渲染三个问题没展开。本篇补上先讲清 mime 是什么再用源码把多格式 data → 择优 → 渲染这条链拆开模型部署在 Notebook 里一个display_data可以既带网页版又带纯文本版文件里存的不是一份输出而是一组按格式分键的候选。为什么这么设计、代码怎么选的——从mime 是什么讲起。mime 是什么给数据贴怎么解读的标签mime 是Multipurpose Internet Mail Extensions多用途互联网邮件扩展的缩写起源于电子邮件——用它给附件/正文标格式后来被 HTTP 借去当Content-Type成为互联网通用约定。写法是类别/子类mime中文含义在 Notebook 里出现于text/plain纯文本所有输出的兜底text/html网页标记可渲染富内容富文本输出text/markdown标记文本Markdown 渲染image/png/image/jpeg位图图片输出image/svgxml矢量图矢量图形application/pdf文档PDF 渲染一句话mime 是数据的格式身份证告诉接收方这段内容该按什么格式解读。同一份结果为什么存多个格式解剖 jupyterlab 自带的examples/notebooks/OutputExamples.ipynb统计共16 个输出带 ≥2 个 mime挑 cell 12 的execute_result它的data长这样{text/html:[div style\width:100px;height:100px;background:red\/div],text/plain:[IPython.core.display.HTML object]}两份值表达的是同一个 HTML 对象text/html版是可渲染的网页片段这里是一个红色方块 divtext/plain版是对象的普通字符串表示IPython.core.display.HTML object。设计意图是给不会渲染 HTML的接收端留退路——终端、老版本界面看到 plain 版也能知道这里有个 HTML 对象。这就是多格式并存存在的理由富表达优先、兜底保底。data 的字段树与值类型约束data在源码里是mime 为键、值为内容的字典nbformatindex.ts:71-73exportinterfaceIMimeBundleextendsPartialJSONObject{[key:string]:MultilineString|PartialJSONObject;}值允许两种**多行字符串string | string[]**或JSON 对象。哪个 mime 允许哪种值由validateMimeValuenbformatindex.ts:101-140裁决核心逻辑可用一段伪码还原jsonTest mime 形如 application/json 或 application/*json 若 值是数组 → 仅当 非 JSON 型 mime且元素全是字符串才合法 若 值是字符串 → 仅当 非 JSON 型 mime 若 值是对象 → 仅当 JSON 型 mime且是合法 JSON 对象规则本质是防错位JSON 型 mime 的数据就该是结构化的 JSON 对象不能塞字符串图片/文本类 mime 的值才允许是字符串或多行字符串。真实样例里的值都是单元素数组——[div…]、[IPython…]正是多行字符串的数组形态。前端侧一每种 mime 挂一个渲染工厂数据侧定了格式前端侧要有能渲染每种格式的工人——rendermime/src/factories.ts注册了一批标准工厂每种 mime 声明它服务哪些类型、安不安全、默认排第几数值越小越优先渲染器mimedefaultRanksafe说明RenderedHTMLtext/html50是富文本最高优先RenderedMarkdowntext/markdown60是RenderedLatextext/latex70是RenderedSVGimage/svgxml80否SVG 可嵌脚本RenderedImageimage/png 等90是RenderedTexttext/plain 等120是兜底RenderedJavaScripttext/javascript110否能执行代码// factories.ts:11-15 的 HTML 工厂结构示意关键字段{mimeTypes:[text/html],defaultRank:50,safe:true,createRenderer:optionsnewwidgets.RenderedHTML(options)}safe是关键标记能跑脚本/嵌入外链的格式HTML、SVG、JavaScript被标记为不安全渲染与否取决于文档是否受信任——后面择优逻辑会用到。前端侧二择优算法 preferredMimeType挑哪个格式渲染的核心在rendermime/src/registry.ts:105-129的preferredMimeType它按排序后的 mime 列表从前到后找谁的键在 data 里出现就返回谁。下面是该函数去掉注释后的主体registry.ts:110-125if(safeensure||safeprefer){for(constmtofthis.mimeTypes)if(mtinbundlethis._factories[mt].safe)returnmt;// 第一轮只认安全}if(safe!ensure){for(constmtofthis.mimeTypes)if(mtinbundle)returnmt;// 第二轮全放行}returnundefined;“排序后的列表由sortedTypesregistry.ts:645-654决定rank 小的在前rank 相同按注册先后工厂注册时若没给 rank 默认取 100registry.ts:225-237。回看 cell 12 的{text/html, text/plain}text/html rank50、text/plain rank120html 排前面且 data 里有 → 返回text/html。整条判断就是一次排好序的查表”。渲染主链与信任开关择优结果在哪一步被用上outputarea/src/widget.ts:785-800的createRenderedMimetype是主链// outputarea/src/widget.ts:786-794略注释constmimeTypethis.rendermime.preferredMimeType(model.data,model.trusted?any:ensure// 信不信任决定放行范围);if(!mimeType){returnnull;}// 一个都渲染不了 → 跳过letoutputthis.rendermime.createRenderer(mimeType);信任开关在此落地cell 元数据里的trusted217 提过的字段为真时用anyhtml/svg/js 都能渲染否则用ensure只允许安全工厂。拿 cell 29 的{image/svgxml, text/plain}推演svg rank80 但在第一轮 safe 检查中被跳过text/plain rank120 反而胜出——于是未信任的 Notebook 里 SVG 图不会渲染、只显示文本点信任后才轮到 svg 渲染。安全不是靠禁止而是靠信任前只给看安全版本。小结一条 data 的一生环节位置干了什么数据侧nbformatIMimeBundle一份结果存成 {mime: 值} 字典校验nbformatvalidateMimeValue保证值与 mime 类型匹配候选rendermime 工厂表每种 mime 绑一个渲染器 rank safe择优registrypreferredMimeType按 rank 排序信任决定放行范围渲染outputareacreateRenderedMimetype挑中 → createRenderer → 塞进 cell一句话记忆mimeMultipurpose Internet Mail Extensions多用途互联网邮件扩展是数据的格式身份证Notebook 的 output data 是 {mime: 值} 字典一份结果可存 HTML 富版 plain 兜底版前端每种 mime 挂一个带 rank 与 safe 标记的渲染工厂preferredMimeType按 rank 排序查表、trusted为真才放行 html/svg/js 等不安全渲染——多格式是为了富表达 降级兜底择优与信任开关保证安全。OK本篇先到这里如有疑问欢迎评论区留言讨论祝各位功力大涨技术更上一层楼更多内容见下篇 blog【AI】【模型部署】装库前先“隔离“venv 虚拟环境从概念到落地