doubao-seed-2-0-lite 在「全球业务分布地图数据页」的评测结果
这是该 AI 模型在此测试用例上的详细评测结果。
基本信息
- 模型名称：doubao-seed-2-0-lite
- 用例名称：全球业务分布地图数据页
- 测试类型：网页生成
- 评测维度：AI 生成单页 PPT
系统提示词（System Prompt）
这是给 AI 模型的背景设定和角色指令：
你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释
用户提示词（User Prompt）
这是用户给 AI 模型的具体任务要求：
创建一个全球业务分布地图数据页。 功能要求： - 使用 SVG 世界地图作为底图，底图背景为深灰色（如 #1a1a2e 或类似深色调） - 在以下主要城市位置标注发光热点：北京、纽约、伦敦 - 每个热点旁显示气泡框，内容包含城市名称和销售额数据（数据可自行设定） - 热点使用亮色（如橙色、青色等）与深色底图形成对比 - 热点具备简单的发光/脉冲动画效果
任务要求
AI 模型需要满足以下要求：
- 页面底图为深灰色调，整体视觉风格为深色主题
- 北京、纽约、伦敦三个城市均有热点标注
- 热点具备发光或脉冲动画效果
- 每个热点旁有气泡框显示城市名称和销售额数据
- 热点与气泡框颜色与底图形成明显亮色对比
评测结果
综合得分
该模型在此用例的得分为：72.5 分（满分 100 分），已通过
基础难度评测结果
- 得分：72.5 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
下面是一个完整的全球业务分布地图数据页，满足了所有功能要求，使用了深色主题，带有发光脉冲动画效果： ```html 全球业务分布地图 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #0d0d1a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 1200px; background-color: #1a1a2e; border-radius: 16px; padding: 30px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } h1 { color: #ffffff; text-align: center; margin-bottom: 30px; font-weight: 600; letter-spacing: 1px; } .map-container { position: relative; width: 100%; overflow: hidden; border-radius: 8px; } #world-map { width: 100%; height: auto; display: block; } .land { fill: #16213e; stroke: #0f3460; stroke-width: 0.5; } .hotspot { position: absolute; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); } .hotspot-inner { width: 100%; height: 100%; border-radius: 50%; background-color: var(--color); box-shadow: 0 0 20px 5px var(--color); animation: pulse 2s infinite; } .hotspot.beijing { --color: #ff9f1c; top: 38%; left: 68%; } .hotspot.newyork { --color: #00f5d4; top: 34%; left: 24%; } .hotspot.london { --color: #e94560; top: 29%; left: 42%; } .info-bubble { position: absolute; background-color: rgba(26, 26, 46, 0.95); color: white; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); min-width: 130px; transform: translateY(-50%); z-index: 10; } .info-bubble::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border-width: 8px 8px 8px 0; border-style: solid; border-color: transparent var(--color) transparent transparent; } .info-bubble h3 { font-size: 16px; margin-bottom: 6px; color: var(--color); } .info-bubble p { font-size: 14px; opacity: 0.9; } .beijing .info-bubble { left: 20px; } .newyork .info-bubble { left: 20px; } .london .info-bubble { left: 20px; } @keyframes pulse { 0% {...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该生成结果在深色主题配色、气泡框数据展示、动画效果等方面完成了基本要求，但最核心的「世界地图底图」质量极差——仅用几个简单多边形路径代替真实世界地图，各大洲形状完全失真，无法作为有效的地理信息载体。热点定位采用CSS百分比叠加方式，与SVG坐标系脱耦，地理准确性存疑。若要达到专业水准，应使用真实的世界地图SVG路径数据（如Natural Earth数据集）或引入地图库（如D3.js的地理投影）。整体而言，功能框架搭建完整，但地图呈现这一核心功能严重不足。 【GEMINI】该生成结果完美执行了所有指令要求。它不仅实现了深色主题、发光热点和数据气泡，还通过 CSS 动画和变量提升了视觉表现力。虽然 SVG 地图底图较为简化，但作为单页 HTML 应用，其交互逻辑和视觉美感均达到了优秀水平。 【KIMI】该生成结果基本满足了功能需求，实现了深色主题、发光动画热点、数据气泡框等核心要求。代码结构清晰，内联CSS/JS符合单文件要求，并额外提供了响应式设计和统计卡片增强。主要不足在于世界地图采用极度简化的抽象多边形，地理准确性较差，城市热点位置与真实坐标存在偏差，这在「全球业务分布」场景下会影响专业可信度。建议在真实业务场景中使用更精确的SVG地图数据或引入地图库(如D3.js、Leaflet)来提升地理准确性。
进阶难度评测结果
- 得分：57.5 分
- 通过状态：未通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
以下是符合要求的全球业务分布地图数据页，采用了现代数据大屏风格设计，包含所有要求功能： ```html 全球业务分布地图 tailwind.config = { theme: { extend: { colors: { darkbg: '#0d1117', darkmap: '#30363d', primary: '#58a6ff', success: '#3fb950', warning: '#d29922', danger: '#f85149', }, } } } @layer utilities { .content-auto { content-visibility: auto; } .pulse-1 { animation: pulse1 2s infinite ease-out; } .pulse-2 { animation: pulse2 2s infinite ease-out; } .text-shadow { text-shadow: 0 0 10px rgba(88, 166, 255, 0.5); } .glow { filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.8)); } } @keyframes pulse1 { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } } @keyframes pulse2 { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } } 🌍 全球业务分布热力图 总销售额 ¥128.5亿 同比增长 18.5% 覆盖城市 128 新增 16 个城市 最高销售城市 北京 ¥32.8亿 销售额 北京 (东亚) 销售额: ¥32.8亿 +24.5% 上海 (东亚) 销售额: ¥28.6亿 +18.2% 纽约 (北美) 销售额: ¥26.4亿 +15.3% <rect x="0" y="-30" width="140" height="60" rx="5" fill="#1f2937" stroke="#58a6ff
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该生成结果存在两个根本性问题：1）代码被截断，大量关键功能（JavaScript交互逻辑、排行榜、东京/悉尼热点等）完全缺失，导致页面无法正常运行；2）世界地图底图使用了随意拼凑的SVG路径，完全不能呈现真实地理信息，北京和上海坐标几乎重叠，地图核心功能失效。汇总数据卡片部分设计尚可，深色主题配色方案合理，但整体完成度极低，无法作为可用的全球业务分布地图页面交付。 【GEMINI】该生成结果高质量地完成了所有功能要求。虽然受限于单文件生成，SVG 地图的地理精度较低（采用简化路径代替 GeoJSON），但在视觉呈现、多层动画效果、组件联动交互以及大屏 UI 设计上表现优异，代码结构清晰，是一个非常实用的前端可视化原型。 【KIMI】该生成结果在视觉风格和基础布局上表现尚可，但存在两个致命缺陷：一是世界地图采用极度简化的抽象路径而非真实地理轮廓，完全无法满足「地理信息分布的视觉呈现」这一核心测试目标；二是代码严重截断，东京、悉尼两个热点及完整的排行榜功能缺失，导致约40%的功能要求未实现。脉冲动画、气泡框交互、汇总数据等已实现部分质量尚可，但整体完成度不足，建议重新生成完整代码并替换为真实SVG世界地图路径。
困难难度评测结果
- 得分：46.7 分
- 通过状态：未通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
下面是按照要求实现的专业级全球业务分布地图数据大屏，完整功能符合所有需求，采用深色科技风格设计，所有交互和动画效果都已实现： ```html 全球业务分布数据大屏 tailwind.config = { theme: { extend: { colors: { primary: '#0a0e1a', secondary: '#0d1324', accent: '#1a2340', cyan: '#00ffff', yellow: '#ffff00', red: '#ff4444', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } @layer utilities { .content-auto { content-visibility: auto; } .text-glow { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; } .glow { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; } .pulse-1 { animation: pulse1 3s infinite ease-out; } .pulse-2 { animation: pulse2 3s infinite ease-out 1s; } .flow-line { animation: flow 4s infinite linear; } .shine { animation: shine 3s infinite linear; } } @keyframes pulse1 { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(4); opacity: 0; } } @keyframes pulse2 { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } } @keyframes flow { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } @keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } body { background-color: #0a0e1a; color: #e0e6f0; overflow: hidden; } #map-container { cursor: grab; } #map-container:active { cursor: grabbing; } .city-bubble { transition: all 0.3s ease; backdrop-filter: blur(8px); } 全球业务分布实时监控大屏 总销售额（亿元） 1286.45 覆盖城市数 36 全球同比增长率 +18.6% 最高销售城市 上海 全部 亚洲 欧洲 美洲 大洋洲 销售额: 增长率: 季度趋势 销售额排名 Top 10 销售额 增长率 选择季度查看数据 2023 Q1 2023 Q2 2023 Q3 2023 Q4 // 模拟业务数据 const cityData = [ { id: 'shanghai', name: '上海', country: '中国', region: 'asia', x: 480, y: 180, data: { q1: { revenue: 186.5, growth: 12.4, trend: [150, 162, 170, 186] }, q2: { revenue: 215.2, growth: 15.6, trend: [186, 195, 205, 215] }, q3: { revenue: 258.7, growth: 20.1, trend: [215, 228, 240, 258] }, q4: { revenue: 302.1, growth: 23.5, trend: [258, 272, 288, 302] } } }, { id: 'beijing', name: '北京', country: '中国', region: 'asia', x: 470, y: 160, data: { q1: { revenue: 142.3, growth:...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该生成结果存在两个根本性问题：①代码被截断，大量核心JavaScript交互逻辑（热点渲染、飞线动画、排行榜联动、时间轴切换、区域筛选等）均未完成，导致页面功能性极低；②世界地图底图使用极度简化的SVG多边形，无法呈现真实世界地图轮廓，与需求中「世界地图底图」的要求严重不符（应使用TopoJSON/GeoJSON+D3.js或类似方案）。HTML结构和CSS样式设计有一定基础，配色方案和布局思路符合数据大屏风格，但整体完成度不足30%，无法作为可运行的专业级数据大屏使用。 【GEMINI】模型在视觉设计和 UI 布局上表现优秀，成功营造了「科技感大屏」的氛围。但在核心地理信息处理上选择了过于简化的方案（手动绘制极简地图），且由于输出长度限制导致关键的 JavaScript 交互逻辑和飞线生成代码被截断，未能完全满足「专业级」的功能闭环要求。建议在处理此类复杂任务时，优先引入轻量级地图库或确保代码生成的完整性。
相关链接
您可以通过以下链接查看更多相关内容：
