如果下周把价格降到 89 元会怎样？如果把促销强度从 0.6 提到 0.9 呢？如果供应商断供两周，库存能撑到什么时候？

这类问题模型没在训练时见过，也不能靠重新训练来回答。场景模拟器（What-if Analysis）要做的，是让计划员在前端"拧动"特征值、即时看到预测曲线如何响应，再把这套假设保存成可分享、可复现的场景。本文将拆解交互架构、滑块组件、代理模型与不确定性处理、批量对比方案，以及性能底线。

一、先界定边界：前端能模拟到什么程度 

不是所有"如果"都适合在前端算。这决定了整个模块的技术路线，也决定了它能不能在 16ms 内响应。

y = trend + seasonality + holidays + regressors

外部回归因子（价格、促销强度）的贡献是显式的

，前端只要保留基线和其他分量，就能用新因子值即时重算。这是最理想的情况。但树模型和深度学习模型没有这样的显式结构，必须回传后端推理，此时前端只做请求编排与缓存，不做越权计算。

数据契约上，建议后端下发"可模拟因子"的元信息，而不是前端写死因子名：

库存和缺货是事实字段，不允许假设修改

，否则计划员能"模拟"出一个不存在的库存状态，得出的结论反而误导。这是模拟器最容易出事故的地方。

 是该因子对预测值的一阶影响系数，即 

，前端用它与新值做线性外推。下发边界让滑块自带合法值域，避免输入离谱数值。

二、滑块组件：让"拧动"有即时反馈 

滑块是场景模拟器的主交互。它的价值不在"能拖"，而在于

——这是"假设"变成"洞察"的唯一通道。

，全部走前端内存计算。只有用户点"保存场景"或切换 SKU 时才请求。这是 60fps 响应的前提。

import { useState, useMemo, useCallback } from 'react'

const SLIDER_META = {
  price: { label: '售价', unit: '元', color: '#6366f1', format: v => `${v}元` },
  promo_intensity: { label: '促销强度', unit: '', color: '#10B981', format: v => v.toFixed(2) },
}

export function ScenarioSlider({ factor, meta, base, effect, value, onChange }) {
  const pct = ((value - meta.min) / (meta.max - meta.min)) * 100

  const delta = useMemo(
    () => (value - base) * effect,
    [value, base, effect]
  )

  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <label htmlFor={`slider-${factor}`} className="font-medium">
          {meta.label}
        </label>
        <span className="tabular-nums text-indigo-600 font-semibold">
          {meta.format(value)}
        </span>
      </div>

      {/* 基线锚点与当前值刻度 */}
      <div className="relative h-6">
        <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-1.5
                        bg-gray-200 rounded">
          <div className="h-full rounded" style={{
            width: `${pct}%`,
            background: `linear-gradient(90deg, ${meta.color}55, ${meta.color})`,
          }} />
        </div>
        <div className="absolute top-0 bottom-0 w-px bg-gray-500"
             style={{ left: `${((base - meta.min) / (meta.max - meta.min)) * 100}%` }}>
          <span className="absolute -top-4 -translate-x-1/2 text-[10px] text-gray-500 whitespace-nowrap">
            基线 {meta.format(base)}
          </span>
        </div>
        <input id={`slider-${factor}`}
               type="range"
               min={meta.min} max={meta.max} step={meta.step}
               value={value}
               onChange={e => onChange(factor, Number(e.target.value))}
               className="absolute inset-0 w-full opacity-0 cursor-pointer" />
      </div>

      <div className={`text-xs text-right tabular-nums
        ${delta > 0 ? 'text-emerald-600' : delta < 0 ? 'text-rose-600' : 'text-gray-400'}`}>
        预测影响 {delta > 0 ? '+' : ''}{Math.round(delta)} 件
      </div>
    </div>
  )
}

，这是整组件最关键的设计——用户拖动时能看到"离基线多远"，而不是只看绝对数值。渐变色条从半透明到实色表达"偏离强度"。

 覆盖在最上层承接事件，既保留原生键盘可达性（方向键微调），又能完全自定义视觉。

三、模拟引擎：一阶外推与代理模型 

前端能算到什么精度，取决于模型结构。对于加法模型，线性外推足够且即时；对于非线性模型，需要更聪明的代理。

// 加法模型的一阶模拟：用偏导近似因子变化的影响
export function simulateAdditive(scenario, overrides) {
  const { base, effects } = scenario
  const changes = {}

  let totalDelta = 0
  for (const [f, v] of Object.entries(overrides)) {
    const eff = effects[f]
    if (eff == null) continue
    const delta = (v - scenario.base[f]) * eff
    changes[f] = delta
    totalDelta += delta
  }

  return {
    newBaseline: base + totalDelta,
    delta: totalDelta,
    changes,                 // 各因子的独立贡献，用于归因瀑布
    warning: totalDelta > base * 0.3
      ? '偏离基线过大，线性近似可能失真'
      : null,
  }
}

 把每个因子的独立贡献保留下来，可以复用前文的瀑布图做归因——

这让"为什么这个场景预测会变"同样可解释

线性外推在偏离基线 30% 以上时误差会快速放大

，必须提示用户这是近似值，避免把外推当结论。

——小扰动用即时外推，大扰动自动升级为真实推理。分界点 30% 可按模型校准曲线调整，关键是要有这个分界，而不是一刀切。

对于非线性模型，前端可以用训练好的小型代理（如用模型预测结果拟合的多项式或 shallow tree），但更稳妥的方案是后端推理加缓存：

// 带缓存的场景推理请求
const scenarioCache = new Map()

export async function runScenario(sku, overrides) {
  const key = `${sku}:${JSON.stringify(overrides)}`
  if (scenarioCache.has(key)) return scenarioCache.get(key)

  const promise = fetch(`/api/scenario/${sku}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ overrides }),
  }).then(r => r.json())

  scenarioCache.set(key, promise)
  const result = await promise
  return result
}

，这是模拟器流畅的核心。用 promise 本身缓存，即使并发触发也只发一次请求。注意缓存要按 SKU 设置上限（LRU，100 条），否则切换大量 SKU 后会内存膨胀。

四、多场景对比：把假设变成可比较的方案 

单个场景是探索，多个场景并排才是决策。计划员需要同时看"不促销 / 弱促销 / 强促销"三档，判断投入产出比。

——同一时间轴、同一量纲，才能直接比高低。区间带叠加在每条曲线上，让用户同时看到"预期收益"和"不确定性"。差异表要换算到业务指标（毛利、库存），而不只是件数，这是从"预测"到"经营决策"的最后一步。

const DEFAULT_SCENARIOS = {
  baseline: { price: 99, promo_intensity: 0.6 },
  aggressive: { price: 89, promo_intensity: 0.9 },
  conservative: { price: 109, promo_intensity: 0.3 },
}

export function ScenarioDiffTable({ baseline, scenarios, marginPerUnit }) {
  const rows = scenarios.map(s => {
    const sim = simulateAdditive(s.data, s.overrides)
    const extraUnits = sim.delta
    const extraRevenue = extraUnits * (s.overrides.price ?? 0)
    const extraMargin = extraUnits * marginPerUnit - extraRevenue * 0.12
    return { ...s, extraUnits, extraRevenue, extraMargin }
  })

  return (
    <table className="w-full text-sm">
      <thead>
        <tr className="text-left text-gray-500">
          <th>场景</th><th>价格</th><th>促销</th>
          <th className="text-right">额外销量</th>
          <th className="text-right">额外毛利</th>
        </tr>
      </thead>
      <tbody>
        {rows.map(r => (
          <tr key={r.name} className="border-t">
            <td>{r.name}</td>
            <td>{r.overrides.price}元</td>
            <td>{r.overrides.promo_intensity}</td>
            <td className={`text-right tabular-nums ${r.extraUnits > 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
              {r.extraUnits > 0 ? '+' : ''}{Math.round(r.extraUnits)}
            </td>
            <td className={`text-right tabular-nums ${r.extraMargin > 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
              {r.extraMargin > 0 ? '+' : ''}{Math.round(r.extraMargin)}元
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

 是外部传入的经营参数，模拟器

。三档场景（激进 / 保守 / 现状）提供可对比的锚点，避免计划员在无限连续的滑块上迷失。

，方向与颜色严格对应。这张表的价值在于把"预测变化"翻译成"这笔投入值不值"。

五、不确定性：模拟结果也必须带区间 

这是模拟器最容易漏掉的环节。用户拧动滑块后，前端如果只给一个 

 点位，就相当于把外推伪装成确定结论——风险很大。

：柱状为基线、折线为激进场景，

。如果激进场景的区间比基线宽得多，说明"多卖的这部分很不确定"——这是计划员必须知道的信息，直接影响他敢不敢按这个数备货。区间变宽的原因通常是因子偏离基线太远、进入了训练数据稀疏区，正好和前面的 

区间的绘制沿用系列第二篇的闭合多边形法：

export function buildScenarioTraces(baseSeries, simulated) {
  return [
    {
      x: baseSeries.map(d => d.ds),
      y: baseSeries.map(d => d.yhat),
      type: 'scatter', mode: 'lines', name: '基线预测',
      line: { color: '#9CA3AF', dash: 'dot', width: 2 },
    },
    {
      x: [...simulated.map(d => d.ds), ...simulated.map(d => d.ds).reverse()],
      y: [...simulated.map(d => d.yhatUpper), ...simulated.map(d => d.yhatLower).reverse()],
      fill: 'toself', fillcolor: 'rgba(99,102,241,0.18)',
      line: { width: 0 }, name: '模拟场景区间', hoverinfo: 'skip',
    },
    {
      x: simulated.map(d => d.ds),
      y: simulated.map(d => d.yhat),
      type: 'scatter', mode: 'lines', name: '模拟预测',
      line: { color: '#6366F1', width: 2.5 },
    },
  ]
}

：基线用灰色虚线、模拟用紫色实线加区间带，

——用户一眼知道哪条是"假设"。基线不加区间，避免视图过于拥挤；模拟曲线带区间，因为它才是需要评估风险的主体。

模拟器的整体交互架构要保证"输入—计算—渲染"三者在主线程外不阻塞：

——防抖会让拖动有延迟感，破坏"即时反馈"。防抖只用于网络请求。状态用极轻量的 store，所有派生值（delta、区间、归因）用 

xychart-beta
  title "不同计算方案的响应耗时"
  x-axis ["前端线性外推", "前端代理模型", "后端推理(无缓存)", "后端推理(命中缓存)"]
  y-axis "响应耗时(ms)" 0 --> 900
  bar [3, 45, 860, 12]

：差距在两个数量级。这也印证了设计原则——

，上网的一定缓存。模拟器流畅与否，几乎完全取决于这条铁律。

七、保存与复现：让假设成为可协作的资产 

场景模拟的最终产出不是一张图，而是一个

。保存时必须记录完整上下文：

export function serializeScenario(sku, overrides, metadata) {
  return {
    sku,
    overrides,
    createdBy: metadata.user,
    createdAt: new Date().toISOString(),
    baselineVersion: metadata.modelVersion,
    note: metadata.note,
  }
}

同一个假设在不同模型版本下结果不同

，没有版本号的场景不可复现。保存后生成的链接应包含场景 ID，打开即还原全部因子值，直接对接本系列第九篇的协作与导出。

场景模拟器把预测平台从"解释过去"推进到"辅助决策"。它的设计核心是三个原则：因子必须有可编辑与只读之分，否则模拟会变成对现实的篡改；线性外推只在该可信的区间内即时生效，超出范围必须提示或升级为真实推理；每一个模拟结果都要带区间和归因，让用户既看到收益也看到风险。

AI 预测可视化平台 | 场景模拟器：Slider + What-if Analysis 交互设计

前端开发

人工智能

前端

架构设计

场景模拟器通过前端滑块即时调整价格、促销强度等可编辑因子，基于加法模型的一阶线性外推实现16ms内响应，并自动升级非线性场景至后端推理。交互设计以基线锚点、归因瀑布与置信区间带为核心，支持多场景并排对比及带版本号的场景保存复现，将预测分析转化为可协作的库存与定价决策工具。

批量计算

深度学习

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

AI 预测可视化平台 | 场景模拟器：Slider + What-if Analysis 交互设计

AI 预测可视化平台 | 场景模拟器：Slider + What-if Analysis 交互设计

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐