hunyuan-large 在「全球业务分布地图数据页」的评测结果

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

基本信息

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

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

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

任务要求

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是一个满足您要求的完整单页 HTML 应用代码。该页面使用 SVG 世界地图作为底图，并在指定城市位置添加了发光热点和气泡框。每个热点都有简单的发光/脉冲动画效果。 ```html 全球业务分布地图 body { margin: 0; background-color: #1a1a2e; display: flex; justify-content: center; align-items: center; height: 100vh; } svg { width: 80%; height: auto; } .bubble { font-family: Arial, sans-serif; font-size: 12px; color: white; background-color: rgba(0, 0, 0, 0.7); border-radius: 4px; padding: 5px 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); position: absolute; white-space: nowrap; } .highlight { fill: orange; /* 热点颜色 */ stroke: #fff; stroke-width: 2; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } const cities = [ { name: '北京', sales: 1500, x: 400, y: 200 }, { name: '纽约', sales: 2300, x: 600, y: 150 }, { name: '伦敦', sales: 1800, x: 500, y: 300 } ]; const bubblesContainer = document.getElementById('bubbles'); cities.forEach(city => { // 创建气泡框 const bubble = document.createElementNS('http://www.w3.org/2000/svg', 'text'); bubble.setAttribute('x', city.x + 60); // 热点右侧显示 bubble.setAttribute('y', city.y - 10); bubble.setAttribute('class', 'bubble'); bubble.textContent = `${city.name}: $${city.sales}`; bubblesContainer.appendChild(bubble); // 添加点击事件以显示详细信息（可选） const highlight = document.querySelector(`circle[data-city="${city.name}"]`); highlight.addEventListener('click', () => { alert(`${city.name} 的销售额为 $${city.sales}`); }); }); ``` ### 代码说明： 1. **HTML 结构**： - 使用 `` 元素作为地图容器，并设置 `viewBox` 属性以便于缩放和平移。 - 在 `` 内部添加了一个深灰色的矩形作为背景。 2. **CSS 样式**： - 设置页面背景为深灰色，并居中显示 SVG 地图。 - 定义 `.highlight` 类用于热点，设置了橙色填充和发光动画效果。 - 定义 `.bubble` 类用于气泡框，设置了白色文字和半透明背景。 3. **JavaScript 功能**： - 定义了一个包含城市名称、销售额和位置的数组。 - 遍历数组，在每个热点位置创建一个气泡框，并将其添加到 SVG 中。 - 为每个热点添加点击事件，点击时显示城市的详细销售额信息（可选功能）。 ### 注意事项： - 示例中的 SVG 地图非常简化，仅包含几个圆形代表城市位置。实际应用中应使用完整的 SVG 世界地图或通过 D3.js 等库加载地图数据。 - 气泡框的位置是相对于热点的，可以根据需要调整偏移量以确保美观。

AI 评审点评

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

【CLAUDE】该候选输出存在多个严重问题：1）完全缺失SVG世界地图底图，仅用三个圆形示意城市位置，地理位置关系与实际严重不符；2）气泡框使用了对SVG text元素无效的CSS属性，导致气泡框视觉效果无法正常渲染；3）CSS动画transform-origin问题会导致SVG圆形动画出现位移偏移。整体代码仅实现了深色背景和基本的橙色圆点，距离「全球业务分布地图」的功能要求相差甚远，属于严重不达标的实现。 【GEMINI】模型完成了一个基础的 HTML 框架，但未能满足「使用 SVG 世界地图作为底图」这一关键需求，导致任务完成度大打折扣。代码逻辑尚可，但视觉呈现上过于简化，未能体现地理信息分布的专业性。 【KIMI】该实现存在核心功能缺失：完全未提供SVG世界地图底图，仅用三个圆形代替，无法满足「全球业务分布地图」的基本需求。虽然动画效果和深色主题有所体现，但地图底图的缺失使得题目最核心的「地理信息分布的视觉呈现」要求落空。气泡框的CSS样式未正确应用于SVG元素，实际视觉效果与代码描述不符。建议在真实项目中使用D3.js或完整SVG地图数据替换简化图形，并修正气泡框的实现方式。

进阶难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，满足你的需求。这个页面使用了 SVG 世界地图，并实现了数据可视化和交互设计。 ```html 全球业务分布地图 body { margin: 0; font-family: Arial, sans-serif; background-color: #0d1117; color: white; } .header { background-color: #1a1a2e; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; } .summary { font-size: 1.2em; } .map-container { position: relative; width: 100%; height: 80vh; overflow: hidden; } .map { width: 100%; height: 100%; } .bubble { position: absolute; background: rgba(0, 123, 255, 0.8); border-radius: 5px; padding: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease-in-out; } .bubble.show { opacity: 1; } .list { background: #1a1a2e; padding: 20px; max-height: 20vh; overflow-y: auto; } .list-item { cursor: pointer; padding: 10px; border-bottom: 1px solid #333; } .list-item:hover { background: #333; } 总销售额: $1,200,000,000 覆盖城市数: 6 最高销售城市: 北京 全球业务分布地图 北京 | 亚洲 | $200,000,000 | +10% 北京 上海 纽约 伦敦 东京 悉尼 const cities = [ { name: '北京', region: '亚洲', sales: 200000000, growth: 10, pathId: 'beijing', bubbleId: 'beijing-bubble' }, { name: '上海', region: '亚洲', sales: 180000000, growth: 8, pathId: 'shanghai', bubbleId: 'shanghai-bubble' }, { name: '纽约', region: '北美洲', sales: 150000000, growth: 5, pathId: 'newyork', bubbleId: 'newyork-bubble' }, { name: '伦敦', region: '欧洲', sales: 120000000, growth: 7, pathId: 'london', bubbleId: 'london-bubble' }, { name: '东京', region: '亚洲', sales: 100000000, growth: 6, pathId: 'tokyo', bubbleId: 'tokyo-bubble' }, { name: '悉尼', region: '大洋洲', sales: 90000000, growth: 9, pathId: 'sydney', bubbleId: 'sydney-bubble' } ]; cities.forEach(city => { const path = document.getElementById(city.pathId); const bubble = document.getElementById(city.bubbleId); // Add pulse animation path.style.animation = `pulse 2s infinite`; path.addEventListener('mouseenter', () => { bubble.classList.add('show'); }); path.addEventListener('mouseleave', () => { bubble.classList.remove('show'); }); // Highlight city...

AI 评审点评

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

【CLAUDE】该输出存在根本性缺陷：SVG世界地图路径数据被明确省略（「omitted for brevity」），导致地图底图完全无法渲染；城市热点标记元素缺失；JavaScript代码存在多处语法和逻辑错误（@keyframes写在script标签内、querySelector选择器不匹配、未定义属性引用）。实际上这是一个无法运行的框架性代码，仅提供了HTML结构骨架和部分CSS样式，核心功能（地图渲染、热点动画、气泡交互、排行榜联动）均无法正常工作。作为一个可交付的前端应用，该输出质量极低，不满足基本功能要求。 【GEMINI】模型未能完成核心任务要求。虽然代码框架搭建完整，但在关键的 SVG 地图实现上选择了「省略」而非生成，导致应用无法直接运行。代码逻辑中存在多处变量引用错误（如 `path` 对象在循环中未正确获取），导致交互功能完全失效。作为一名前端开发工程师角色，交付的代码质量未达到可运行的标准。 【KIMI】该候选输出是一个严重未完成的代码框架而非可运行应用。核心缺陷在于：SVG世界地图被完全省略、城市热点未实际绘制、多层脉冲动画缺失、气泡框定位失效。虽然代码结构和逻辑思路基本正确，但关键实现内容均以注释或占位符形式存在，导致功能无法实际运行。作为「完整单页HTML应用」的交付物，此输出不符合基本要求，需在地图数据完整性、热点可视化、动画精细度、视觉质感等方面进行全面重构。

困难难度评测结果

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

模型生成产物

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

以下是一个专业级全球业务分布地图数据大屏页面的实现代码。代码遵循现代前端开发的最佳实践，使用了模块化的 JavaScript 结构，并结合了 D3.js 和 Leaflet.js 来实现地图和数据可视化的功能。 ```html 全球业务分布地图 :root { --bg-color: #0a0e1a; --text-color: #e0e0e0; --highlight-color: #ffcc00; --pulse-color: rgba(0, 204, 255, 0.8); --border-color: rgba(255, 255, 255, 0.2); } body { margin: 0; font-family: 'Arial', sans-serif; background-color: var(--bg-color); color: var(--text-color); overflow: hidden; } .header { position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; align-items: center; gap: 10px; } .header h1 { font-size: 2rem; text-transform: uppercase; animation: scan-line 2s infinite linear; } @keyframes scan-line { 0% { text-shadow: 0 0 5px var(--highlight-color), 0 0 10px var(--highlight-color); } 50% { text-shadow: 0 0 20px var(--highlight-color), 0 0 30px var(--highlight-color); } 100% { text-shadow: 0 0 5px var(--highlight-color), 0 0 10px var(--highlight-color); } } .map-container { position: absolute; top: 60px; left: 0; right: 300px; bottom: 0; overflow: hidden; } .sidebar { position: absolute; top: 60px; right: 10px; width: 280px; height: calc(100% - 60px); background-color: rgba(10, 14, 26, 0.9); padding: 20px; box-sizing: border-box; overflow-y: auto; } .sidebar h2 { font-size: 1.5rem; margin-bottom: 10px; } .sidebar ul { list-style: none; padding: 0; } .sidebar li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; } .sidebar li:hover { background-color: rgba(255, 255, 255, 0.1); } .timeline { position: absolute; bottom: 10px; left: 10px; right: 300px; display: flex; gap: 10px; z-index: 10; } .timeline button { background-color: var(--highlight-color); color: var(--text-color); border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; } .timeline button:hover { background-color: #ff9900; } 全球业务分布地图 城市销售额排行榜 Q1 Q2 Q3 Q4 // JavaScript 模块化代码 const App = (() => { const...

AI 评审点评

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

【CLAUDE】该候选输出存在根本性的代码质量问题，核心数据结构 salesData 从未被初始化，导致整个应用无法运行。代码充斥着逻辑错误（如 getColor 函数对数字调用 Object.values()）、DOM 选择器错误（id vs class 混用）、以及大量「未实现」的占位注释。8个核心功能需求中，飞线动画、区域筛选、KPI 数字滚动、迷你折线图、气泡框双模式、排行榜排序切换等均完全缺失。代码更像是一个功能框架草稿，而非可运行的专业级数据大屏。整体完成度极低，无法达到任务要求。 【GEMINI】模型生成的代码完成度较低，未能满足用户提出的多项核心功能需求。特别是在数据可视化的高级动效（脉冲、飞线、滚动数字、迷你图表）和交互细节（双模式气泡、区域筛选）上存在明显缺失。代码更像是一个基础的地图展示 Demo，而非专业级的数据大屏应用。 【KIMI】该候选输出是一个严重未完成的半成品代码。虽然搭建了基础 HTML 结构和 Leaflet 地图框架，但核心功能大量缺失或仅为占位符：深色主题地图未实现、脉冲动画缺失、飞线动画缺失、KPI 区域缺失、排行榜排序功能缺失、区域筛选缺失、迷你折线图未绘制。代码中存在明显的逻辑错误（选择器错误、数据遍历错误）和大量「未在示例中实现」的标注，表明生成内容远未达到可运行、可交付的专业级数据大屏标准。视觉层面仅完成基础布局，缺乏科技感大屏所需的精致光效、过渡动画和统一设计语言。建议大幅完善功能实现后再提交评测。

相关链接

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

加载中...
100%