') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); 【外滩大会2026】攀升之路 — 大数认知可视化 · Issue #108 · modelstudioai/modelstudioai.github.io · GitHub
Skip to content

【外滩大会2026】攀升之路 — 大数认知可视化 #108

Closed
Closed
【外滩大会2026】攀升之路 — 大数认知可视化#108
Labels
showcased已收录上线外滩大会2026外滩大会 2026 参赛作品

Description

@CPCer
CPCer
opened on Aug 8, 2026

参赛项目名称

攀升之路 — 大数认知可视化

团队 / 作者

柏恋小缸子

我做了什么

架构设计：咨询CLI确定项目整体架构、呈现方式，从一些东拉西扯天马行空的想法中凝练为以大数可视化展示作为Demo，持续优化的体验。
数阶瀑布动画：咨询百炼如何用 2D PixiJS 展现「超越感」，获得方案后实现了粒子喷发→沿曲线攀升→凝聚着陆的三阶段动画，数字越大瀑布越高、粒子越密集，直观传递量级跨越的震撼。
表达式锻造炉：咨询百炼交互机制设计，获得方案后实现了芯片式表达式构建器——用户输入如 2↑↑↑↑3，系统实时解析量级（五层分类引擎：exact / log / tower / arrow / named）并在海岸线上定位，实现了从「观看」到「探索」的交互升级。
此外还实现了：分级认知可见性（点击小数时遮蔽远超其上的大数）、指示线等

使用的工具

  • 百炼 CLI
  • 百炼能力 / 模型：应用调用（bl app）— 通过百炼平台托管的 AI 应用进行架构设计、创意咨询，获取动画方案与交互机制设计方案等。
  • Skill 名称：bailian-cli bailian-protocol 等

效果展示

Image

项目链接（可选）

库链接
体验链接

踩坑记录

  1. CLI 调用超时 使用 bl app 调用应用进行创意咨询时，默认超时不足以等待完整响应。解决方案：将超时设为 300 秒并启用 --stream 流式输出模式，边接收边处理，避免长时间等待后超时失败。
  2. 跨层级量级比较失效 最初用单一标量 rankValue 对所有类型的大数（精确值、对数、塔函数、箭头符号、命名数）统一排序，导致 2↑↑↑↑3 被错误放置在古戈尔普勒克斯附近，而非应有的葛立恒数附近。根因在于不同表示法的数值跨度不在同一量纲上。解决方案：改用五层分级比较体系（exact < log < tower < arrow < named），同层内按各自类型比较，跨层直接判定大小；同时引入 displayRank（0-100 归一化值）用于海岸线位置插值，取代原始 rankValue，保证站点和用户锻造数的定位一致。
  3. 相机缩放与邻站上下文的矛盾 聚焦锻造数时，FOCUS_ZOOM = 0.40 能保证数字可读，但相邻站点被推出视口，用户无法感知"这个数处于什么位置"。最初尝试降低缩放以容纳邻站，结果锻造数本身变得太小不可读。最终方案：保持缩放不变，新增 NeighborIndicator 模块——在屏幕空间绘制虚线、箭头和文字标签，指向视口外的相邻站点，既保证可读性又提供位置上下文。

Metadata

Metadata

Assignees

No one assigned

    Labels

    showcased已收录上线外滩大会2026外滩大会 2026 参赛作品

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions