doubao-seed-2-0-code 在「全球业务分布地图数据页」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：doubao-seed-2-0-code
  • 用例名称：全球业务分布地图数据页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 PPT

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

创建一个全球业务分布地图数据页。 功能要求： - 使用 SVG 世界地图作为底图，底图背景为深灰色（如 #1a1a2e 或类似深色调） - 在以下主要城市位置标注发光热点：北京、纽约、伦敦 - 每个热点旁显示气泡框，内容包含城市名称和销售额数据（数据可自行设定） - 热点使用亮色（如橙色、青色等）与深色底图形成对比 - 热点具备简单的发光/脉冲动画效果

任务要求

AI 模型需要满足以下要求：

  1. 页面底图为深灰色调，整体视觉风格为深色主题
  2. 北京、纽约、伦敦三个城市均有热点标注
  3. 热点具备发光或脉冲动画效果
  4. 每个热点旁有气泡框显示城市名称和销售额数据
  5. 热点与气泡框颜色与底图形成明显亮色对比

评测结果

综合得分

该模型在此用例的得分为：65.2 分（满分 100 分），已通过

基础难度评测结果

  • 得分：65.2 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

全球业务分布地图 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background-color: #0f0f1a; color: #ffffff; height: 100vh; display: flex; flex-direction: column; } /* 顶部标题栏 */ .header { padding: 20px 40px; text-align: center; border-bottom: 1px solid #2a2a4a; } .header h1 { font-size: 2rem; color: #00d4ff; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } .header p { margin-top: 8px; font-size: 1rem; color: #aaaaaa; } /* 地图容器 */ .map-container { flex: 1; padding: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; } /* SVG 样式 */ .world-map { width: 100%; height: 100%; max-width: 1200px; max-height: 800px; } /* 地图底图样式 */ .land { fill: #2a2a4a; stroke: #3a3a6a; stroke-width: 0.5; transition: fill 0.3s ease; } .land:hover { fill: #3a3a5a; } /* 热点组 */ .hotspot-group { cursor: pointer; } /* 发光脉冲动画 */ @keyframes pulse { 0%, 100% { r: 6; opacity: 1; } 50% { r: 12; opacity: 0.4; } } @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor); } 50% { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor); } } /* 热点核心 */ .hotspot-core { fill: currentColor; animation: glow 2s infinite; } /* 热点脉冲 */ .hotspot-pulse { fill: currentColor; opacity: 0.6; animation: pulse 2s infinite; } /* 气泡框 */ .bubble { pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .hotspot-group:hover .bubble, .hotspot-group.active .bubble { opacity: 1; pointer-events: auto; } .bubble-bg { fill: #1a1a2e; stroke: currentColor; stroke-width: 1; rx: 8; ry: 8; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .bubble-text-city { font-size: 14px; font-weight: bold; } .bubble-text-sales { font-size: 12px; color: #aaaaaa; } /* 底部说明栏 */ .footer { padding: 15px 40px; text-align: center; border-top: 1px solid #2a2a4a; font-size: 0.9rem; color: #777777; } 全球业务分布地图 2024年度核心城市销售数据概览 北京 销售额: ¥8,520,000 纽约 销售额: $7,210,000 伦敦 销售额: £5,840,000...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该代码存在一个致命的HTML语法错误：SVG标签前的HTML注释`<!-- 内联 SVG 世界地图（简化版的正射投影）`未正确闭合（缺少`-->`），导致整个SVG内容（包括地图底图、所有热点和气泡框）被浏览器当作注释处理，页面实际上只显示标题栏和底部说明栏，核心功能完全失效。即便修复此bug，世界地图底图也仅为极度简化的多边形，与真实地图差距极大，城市热点位置参考意义有限。代码整体架构和设计思路尚可，深色主题风格统一，动画和交互逻辑设计合理，但因关键渲染错误导致功能无法实现，整体质量较低。 【GEMINI】该生成结果非常出色，完全满足并超越了提示词的要求。模型没有依赖外部复杂的地图库（如 Leaflet 或 ECharts），而是通过纯 SVG 和 CSS 动画构建了一个轻量级、高性能且视觉效果极佳的交互页面。虽然地图轮廓是简化示意性的，但对于前端演示任务而言，其代码的独立性和视觉的冲击力非常平衡。 【KIMI】该实现完整满足了所有功能需求：深色主题底图、三城市热点标注、发光脉冲动画、数据气泡框及亮色对比。代码质量较高，结构清晰且包含交互逻辑。主要不足在于世界地图采用极度简化的手绘轮廓而非标准地理数据，专业性和精确度受限，更适合作为概念演示而非生产环境应用。建议在真实场景中使用D3.js或Leaflet等库加载标准地图数据。

进阶难度评测结果

  • 得分：54.8 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

全球业务分布地图 tailwind.config = { theme: { extend: { colors: { primary: '#3b82f6', secondary: '#10b981', accent: '#f59e0b', dark: '#0d1117', darker: '#010409', 'dark-blue': '#161b22', 'light-gray': '#8b949e', 'border-color': '#30363d' }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'pulse-slower': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', } } } } @layer utilities { .content-auto { content-visibility: auto; } .text-shadow { text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } .glow { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); } .glow-green { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); } .map-path { fill: #161b22; stroke: #30363d; stroke-width: 0.5; transition: fill 0.3s ease; } .map-path:hover { fill: #1f2937; } .pulse-ring { animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .pulse-ring-delay { animation: pulse-ring 2s 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .tooltip-enter { animation: tooltip-enter 0.3s ease-out forwards; } .highlight-marker { animation: highlight 1.5s ease-in-out infinite; } } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes tooltip-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes highlight { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } } 全球业务分布地图 总销售额 $128.5M 12.5% 同比增长 覆盖城市数 42 5 新增城市 最高销售城市 纽约 $35.2M 销售额 全球业务分布 销售额 增长中 城市销售额排行榜 © 2025 全球业务数据分析平台. 数据更新时间: 2023年12月 // 城市数据 const cities = [ { id: 'beijing', name: '北京', region: '亚太区', sales: 28.5, growth: 15.2, coords: [700, 150] }, { id: 'shanghai', name: '上海', region: '亚太区', sales: 24.8, growth: 12.7, coords: [720, 170] }, { id: 'newyork', name: '纽约', region: '美洲区', sales: 35.2, growth: 8.5, coords: [180, 160] }, { id: 'london', name: '伦敦', region: '欧洲区', sales: 22.1, growth: 6.3, coords: [440, 140] }, { id:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该生成结果存在严重的代码完整性问题——JS代码在关键位置被截断，导致地图热点标记、气泡框交互、排行榜联动等核心功能均无法实现。更根本的问题是世界地图底图使用了极度简化的手绘路径，完全无法呈现真实的世界地图轮廓，这是地理数据可视化的核心缺陷。唯一相对完整的部分是顶部静态汇总数据展示和整体页面布局框架。整体而言，该代码无法作为可运行的完整应用交付，核心功能实现率极低。 【GEMINI】该生成结果在视觉设计和布局上表现优异，充分理解了「数据大屏风格」的需求。然而，由于输出长度限制，核心的 JavaScript 交互逻辑和地图标记生成代码未能完全闭合，导致功能完整性受损。地图底图采用手动绘制简易 SVG 的方式虽然保证了无外部依赖，但地理还原度较低。 【KIMI】该实现存在关键缺陷：世界地图采用极度简化的几何图形代替真实地理轮廓，完全无法满足「地理信息分布的视觉呈现」这一核心测试目标。虽然UI框架搭建完善、深色主题风格到位、汇总数据展示齐全，但地图底图的质量问题导致整体功能大打折扣。代码截断也使得交互功能无法完整验证。建议替换为真实SVG世界地图数据（如Natural Earth或D3地理数据），并补全被截断的交互逻辑代码。

困难难度评测结果

  • 得分：53.6 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

全球业务分布地图数据大屏 tailwind.config = { theme: { extend: { colors: { primary: '#00f0ff', secondary: '#0066ff', accent: '#ff9500', danger: '#ff3d71', dark: '#0a0e1a', 'dark-800': '#0f172a', 'dark-700': '#1e293b', 'dark-600': '#334155', }, fontFamily: { tech: ['Rajdhani', 'sans-serif'], }, animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'scan': 'scan 3s linear infinite', 'float': 'float 6s ease-in-out infinite', }, keyframes: { scan: { '0%': { transform: 'translateY(-100%)' }, '100%': { transform: 'translateY(100%)' }, }, float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' }, }, }, }, } } @layer utilities { .content-auto { content-visibility: auto; } .text-shadow { text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); } .glow { box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); } .glow-lg { box-shadow: 0 0 30px rgba(0, 240, 255, 0.7); } .border-glow { box-shadow: 0 0 5px rgba(0, 240, 255, 0.5), inset 0 0 5px rgba(0, 240, 255, 0.2); } .bg-grid { background-image: linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; } .pulse-ring { animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .number-animate { transition: all 0.5s ease-out; } } 全球业务分布地图 2023-10-15 14:30:45 总销售额 $12,580,395 12.5% 覆盖城市 42 5 全球增长率 18.7% 3.2% 最高销售城市 上海 24.3% 区域筛选 全部 亚洲 欧洲 美洲 大洋洲 上海 亚洲 销售额 $3,245,000 同比增长 +24.3% 季度趋势 城市销售额排行 销售额 增长率 季度数据切换 当前: 2023年Q3 2022 Q4 2023 Q1 202

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该生成结果存在严重的代码截断问题，HTML在底部时间轴渲染处中断，大量核心JavaScript逻辑（D3地图渲染、热点绘制、飞线动画、交互事件、数字滚动动画等）完全缺失。虽然HTML结构骨架设计合理，引入了正确的技术栈（D3、TopoJSON、Chart.js），CSS样式和设计语言符合科技感大屏风格，但由于代码不完整，实际上无法运行出任何有效的地图可视化功能。这是一个严重不完整的生成结果，核心功能几乎全部缺失，整体评分极低。 【GEMINI】这是一份高质量的单页 HTML 应用代码。模型展现了极强的前端工程能力，通过集成 D3.js、Tailwind CSS 和 Chart.js 构建了一个功能完备、视觉华丽的地理信息大屏。虽然受限于输出长度导致末尾少量 JS 逻辑截断，但核心架构、样式定义和大部分交互逻辑均已实现，达到了专业级数据可视化的水准。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%