hunyuan-pro 在「SVG 动态分形树生长动画」的评测结果

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

基本信息

  • 模型名称：hunyuan-pro
  • 用例名称：SVG 动态分形树生长动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

使用 SVG 绘制一棵静态分形树，并为其添加简单的生长动画。 功能要求： - 使用 JavaScript 递归算法生成分形树的枝干，树干从底部向上生长，每级分叉为两个子枝 - 分形树至少递归 6 层 - 使用 CSS animation 或 stroke-dasharray/stroke-dashoffset 技巧，实现树枝从树干到末梢依次出现的生长效果 - 页面中央展示分形树，背景简洁

任务要求

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

  1. 使用递归算法正确生成分形树结构，至少 6 层分叉
  2. SVG 线条能够呈现从树干到树枝的生长动画效果
  3. 动画按层级顺序依次播放，视觉上有生长感
  4. 代码在单个 HTML 文件中，可直接运行

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

下面是一个完整的单页 HTML 应用，使用 SVG 绘制一棵静态分形树，并为其添加了简单的生长动画。代码中包含详细的注释，帮助理解每个部分的功能。 ```html 分形树生长动画 body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f8ff; /* 浅蓝色背景 */ overflow: hidden; /* 隐藏滚动条 */ } svg { border: 1px solid #ccc; /* SVG 边框 */ } .branch { fill: none; stroke: #333; /* 树枝颜色 */ stroke-width: 2; stroke-dasharray: 1000; /* 初始虚线长度 */ stroke-dashoffset: 1000; /* 初始偏移量 */ animation: draw 2s linear forwards; /* 动画效果 */ } @keyframes draw { to { stroke-dashoffset: 0; /* 动画结束时偏移量为0 */ } } const svg = document.getElementById('tree'); const width = +svg.getAttribute('width'); const height = +svg.getAttribute('height'); // 递归绘制分形树 function drawTree(x, y, angle, depth) { if (depth === 0) return; const length = 100 - depth * 10; // 树枝长度随深度减少 const endX = x + Math.cos(angle * Math.PI / 180) * length; const endY = y - Math.sin(angle * Math.PI / 180) * length; const line = document.createElementNS("http://www.w3.org/2000/svg", 'line'); line.setAttribute('x1', x); line.setAttribute('y1', y); line.setAttribute('x2', endX); line.setAttribute('y2', endY); line.classList.add('branch'); svg.appendChild(line); // 递归绘制左右子枝 drawTree(endX, endY, angle - 30, depth - 1); // 左子枝 drawTree(endX, endY, angle + 30, depth - 1); // 右子枝 } // 开始绘制树 drawTree(width / 2, height, -90, 6); // 树干从底部向上生长 ``` ### 代码说明： 1. **HTML 结构**：使用 `` 元素创建画布，设置宽度和高度。 2. **CSS 样式**： - 使用 Flexbox 将 SVG 居中显示。 - `.branch` 类用于设置树枝的样式，包括颜色、宽度和动画效果。 - `stroke-dasharray` 和 `stroke-dashoffset` 用于实现树枝的生长动画。 3. **JavaScript 逻辑**： - `drawTree` 函数使用递归算法绘制树枝，参数包括起点坐标、角度和深度。 - 树干从底部向上生长，初始角度为 -90 度。 - 每次递归减少深度，并根据角度绘制左右子枝。 ### 使用方法： 将上述代码复制到一个 `.html` 文件中，然后在浏览器中打开即可看到分形树的生长动画效果。

AI 评审点评

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

【CLAUDE】该模型生成的代码能够在浏览器中运行并展示基本的分形树结构，递归算法框架正确，代码组织清晰。然而，核心动画效果实现存在严重不足：所有树枝同时播放动画，完全缺失「从树干到末梢依次生长」的顺序感，这是本题最重要的考察点之一。此外，树枝长度随深度变化的逻辑存在反向错误，stroke-dasharray 固定值也影响动画准确性。整体而言，代码完成了基础框架搭建，但在动画顺序控制这一核心需求上几乎未能实现，与题目要求有较大差距。 【GEMINI】模型优秀地完成了分形树的递归逻辑编写和 SVG 渲染，代码整洁且可运行性强。主要的失分点在于动画的逻辑控制：虽然实现了线条生长效果，但未能通过设置 animation-delay 或在递归中动态计算延迟来实现树枝按层级顺序生长的视觉效果。 【KIMI】该实现完成了分形树的基本递归绘制和简单动画，但动画时序控制是明显短板——所有树枝同时动画违背了「从树干到末梢依次生长」的核心需求。建议通过为不同层级设置animation-delay，或使用JavaScript动态控制stroke-dashoffset来实现真正的顺序生长效果。此外，树枝长度和粗细的层级差异化处理也有提升空间。

进阶难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，使用 SVG 绘制一棵可交互的动态分形树，并实现了上述功能要求： ```html Interactive Fractal Tree body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f8ff; } svg { border: 1px solid #ccc; } .controls { margin-top: 20px; } input[type="range"] { width: 300px; } 生长速度: 2.5s 重新生长 const svg = document.getElementById('tree'); const speedSlider = document.getElementById('speed'); const speedValue = document.getElementById('speedValue'); const regrowButton = document.getElementById('regrow'); let animationId = null; function updateSpeed() { const speed = parseFloat(speedSlider.value); speedValue.textContent = `${speed}s`; } speedSlider.addEventListener('input', updateSpeed); function drawTree(x, y, angle, depth, baseLength, baseThickness, color) { if (depth === 0) return; const length = baseLength * Math.pow(0.7, depth); const thickness = baseThickness * Math.pow(0.7, depth); const endX = x + length * Math.cos(angle * Math.PI / 180); const endY = y - length * Math.sin(angle * Math.PI / 180); const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('x1', x); line.setAttribute('y1', y); line.setAttribute('x2', endX); line.setAttribute('y2', endY); line.setAttribute('stroke', color); line.setAttribute('stroke-width', thickness); line.setAttribute('stroke-dasharray', length); line.setAttribute('stroke-dashoffset', length); svg.appendChild(line); animateLine(line, length, 1000 * speedSlider.value); const newColor = `hsl(${Math.round(120 * (1 - depth / 8))}, 70%, 50%)`; drawTree(endX, endY, angle - 30 + Math.random() * 20 - 10, depth - 1, baseLength, baseThickness, newColor); drawTree(endX, endY, angle + 30 + Math.random() * 20 - 10, depth - 1, baseLength, baseThickness, newColor); } function animateLine(line, length, duration) { line.style.transition = `stroke-dashoffset ${duration}ms linear`; line.style.strokeDashoffset = '0'; } function clearTree() { while...

AI 评审点评

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

【CLAUDE】该实现完成了分形树的基本框架，递归结构、SVG元素创建、控件绑定等基础部分均有涉及，但存在多个关键缺陷：1）枝干长度和粗细的计算逻辑因depth参数方向问题导致视觉效果与预期相反；2）动画实现缺少强制重绘步骤，且所有枝干同时触发动画而非按层级顺序生长，核心动画需求未达成；3）界面设计较为朴素，缺乏现代感。总体而言，代码展示了对SVG和递归的基本理解，但在细节实现上存在较多错误，实际运行效果与需求描述有较大差距，属于「能跑但效果不佳」的水平。 【GEMINI】模型优秀地完成了分形树的几何生成和交互功能。代码逻辑严谨，随机性与参数控制实现得非常好。唯一的不足在于动画的「逐级」时序控制，目前所有枝干是同步开始生长的，若能加入基于 depth 的 delay 延迟，动画效果将更加完美。 【KIMI】该实现完成了分形树的基本框架，但在核心视觉逻辑上存在严重错误（粗细/长度计算反向），动画效果完全未实现层级递进要求，仅实现了同时播放的CSS过渡。交互控制基本可用但速度滑块逻辑与需求相反。整体属于「有代码但关键功能未正确实现」的情况，需要大幅修正递归参数计算和动画时序控制机制。

困难难度评测结果

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

模型生成产物

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

```html Dynamic Fractal Tree body { display: flex; flex-direction: column; align-items: center; font-family: Arial, sans-serif; } #controls { margin-bottom: 20px; } .control-group { margin-bottom: 10px; } svg { border: 1px solid #ccc; } Growth Speed: 0.5s Branch Angle: 30° Layers: 10 Random Perturbation: Switch Theme Export SVG // JavaScript code will go here ``` ### JavaScript 代码 ```javascript // JavaScript code for the fractal tree animation document.addEventListener('DOMContentLoaded', () => { const svg = document.getElementById('fractalTree'); const growthSpeedSlider = document.getElementById('growthSpeed'); const branchAngleSlider = document.getElementById('branchAngle'); const layersSlider = document.getElementById('layers'); const randomPerturbationCheckbox = document.getElementById('randomPerturbation'); const themeSwitchButton = document.getElementById('themeSwitch'); const exportSVGButton = document.getElementById('exportSVG'); let currentTheme = 'spring'; function drawTree(x, y, angle, depth, branchWidth, color) { if (depth === 0) return; const endX = x + Math.cos(angle * Math.PI / 180) * depth * 10; const endY = y - Math.sin(angle * Math.PI / 180) * depth * 10; const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('x1', x); line.setAttribute('y1', y); line.setAttribute('x2', endX); line.setAttribute('y2', endY); line.setAttribute('stroke', color); line.setAttribute('stroke-width', branchWidth); svg.appendChild(line); if (depth > 1) { drawTree(endX, endY, angle - branchAngle, depth - 1, branchWidth * 0.7, interpolateColor(color, '#00ff00', 0.1)); drawTree(endX, endY, angle + branchAngle, depth - 1, branchWidth * 0.7, interpolateColor(color, '#00ff00', 0.1)); } else { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', endX); circle.setAttribute('cy', endY); circle.setAttribute('r', 2); circle.setAttribute('fill', color); svg.appendChild(circle); } }...

AI 评审点评

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

【CLAUDE】该生成结果仅提供了一个极不完整的框架，核心功能几乎全部缺失或存在严重错误。动画系统完全未实现，季节主题切换为空函数，点击高亮功能缺失，颜色插值函数逻辑错误导致树无法正确渲染，JavaScript代码也未正确内联到HTML中。生成结果更像是一个待填充的代码模板，而非可运行的完整应用。最后的「进一步优化」说明也坦承了核心功能尚未实现，整体质量极低，远未达到任务要求。 【GEMINI】该生成结果是一个严重缺失核心逻辑的草案。模型仅搭建了基本的 HTML/CSS 框架，在最关键的递归绘图、Web Animations API 动画控制、参数实时交互以及季节主题切换等功能上均采用了「占位符」处理，未提供可运行的实质性代码，未能完成测试任务。 【KIMI】该生成结果仅为一个高度不完整的框架代码，核心功能大量缺失。递归绘制存在算法错误，动画系统完全未实现，交互功能严重残缺。虽然具备基本的HTML结构和部分UI控件，但距离完整可用的应用差距极大。建议重新生成完整实现，重点补足Web Animations API动画控制、参数实时响应机制和主题切换逻辑。

相关链接

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

加载中...
100%