demos.tsx

demos.tsx

概述

书籍交互式演示组件集合。提供多种可视化演示，帮助用户理解提示工程的核心概念，包括分词、上下文窗口、温度参数、结构化输出等。

组件列表

TokenizerDemo

分词器演示组件 - 模拟 BPE 风格的分词过程。

功能：

  • 实时文本分词可视化
  • 多色令牌展示
  • 本地化示例支持
  • 预定义示例快速切换

内部函数：

simulateTokenization(text: string): string[]

使用：

<TokenizerDemo />

ContextWindowDemo

上下文窗口可视化组件 - 直观展示提示词和回复如何占用上下文空间。

功能：

  • 可视化上下文限制条（默认 8000 tokens）
  • 滑动条调整提示词长度
  • 滑动条调整回复长度
  • 溢出警告提示
  • 实时剩余空间计算

状态：

  • promptLength: 提示词令牌数（默认 2000）
  • responseLength: 回复令牌数（默认 1000）

使用：

<ContextWindowDemo />

TemperatureDemo

温度参数演示组件 - 展示温度如何影响 AI 输出的随机性。

功能：

  • 0.0-1.0 温度滑块
  • 温度等级标签（确定性/平衡/创意/非常创意）
  • 不同温度下的输出示例对比
  • 本地化示例支持

温度等级映射：

温度范围标签颜色
0.0-0.3确定性蓝色
0.4-0.6平衡绿色
0.7-0.8创意琥珀色
0.9-1.0非常创意粉色

使用：

<TemperatureDemo />

StructuredOutputDemo

结构化输出演示组件 - 对比非结构化、JSON 和表格格式的差异。

功能：

  • 三种格式切换按钮
  • 输出格式对比
  • 可解析性能力检查清单
  • 代码解析示例展示

格式选项：

  • unstructured - 纯文本输出
  • json - JSON 结构化数据
  • table - Markdown 表格

能力检查项：

  • 程序化解析
  • 跨查询比较
  • 工作流集成
  • 完整性验证

使用：

<StructuredOutputDemo />

FewShotDemo

少样本学习演示组件 - 展示示例数量如何提升模型准确性。

功能：

  • 0-3 个示例数量滑块
  • 示例展示区域
  • 测试输入框
  • 模型预测结果可视化
  • 置信度进度条

逻辑：

  • 0 个示例：45% 置信度，可能错误
  • 1 个示例：62% 置信度
  • 2 个示例：71% 置信度，正确
  • 3 个示例：94% 置信度，高度正确

使用：

<FewShotDemo />

JsonYamlDemo

数据格式对比组件 - 对比 TypeScript、JSON 和 YAML 格式。

功能：

  • 三种格式切换
  • 相同数据的不同表示
  • 适用场景说明
  • 代码高亮显示

格式说明：

格式用途
TypeScript定义数据结构
JSONAPI 和数据解析
YAML配置文件

使用：

<JsonYamlDemo />

IterativeRefinementDemo

迭代优化演示组件 - 展示提示词从简单到优化的演进过程。

功能：

  • 播放/暂停控制
  • 版本步骤导航
  • 提示词高亮（显示新增内容）
  • 输出结果展示
  • 质量评分可视化
  • 问题/成功反馈

迭代数据（本地化支持）： 每个版本包含：

  • version: 版本号
  • prompt: 提示词
  • additions: 新增内容（用于高亮）
  • output: AI 输出
  • issue: 存在的问题
  • quality: 质量评分（0-100）

自动播放：

  • 每 2.5 秒切换一个版本
  • 播放完成后停止

使用：

<IterativeRefinementDemo />

CostCalculatorDemo

API 成本计算器 - 计算 LLM API 调用成本。

功能：

  • 输入令牌数量
  • 输出令牌数量
  • 输入价格（$/1M tokens）
  • 输出价格（$/1M tokens）
  • 每日请求数
  • 自动计算单次/日/月成本

计算公式：

单次成本 = (输入令牌 × 输入价格 + 输出令牌 × 输出价格) / 1,000,000
日成本 = 单次成本 × 每日请求数
月成本 = 日成本 × 30

默认值：

  • 输入令牌：500
  • 输出令牌：200
  • 输入价格：$0.15/1M
  • 输出价格：$0.60/1M
  • 每日请求：1000

使用：

<CostCalculatorDemo />

依赖

  • react - useState, useEffect, useMemo
  • lucide-react - Check 图标
  • @/lib/utils - cn 工具函数
  • next-intl - useTranslations, useLocale
  • ./locales - getLocaleField

国际化

所有演示组件都支持多语言：

  • 使用 useLocale() 获取当前语言
  • 使用 getLocaleField() 获取本地化数据
  • 翻译键位于 book.interactive 命名空间

样式规范

统一的演示卡片样式：

  • 边框容器：border rounded-lg overflow-hidden
  • 标题栏：px-4 py-3 bg-muted/50 border-b
  • 内容区：p-4 space-y-4
  • 状态颜色：蓝色（提示词）、绿色（回复/成功）、红色（警告/错误）
← 返回目录