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

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

基本信息

  • 模型名称：hunyuan-large
  • 用例名称：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 文件中，可直接运行

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，它使用 SVG 绘制了一棵静态分形树，并通过 CSS 动画实现了树枝的生长效果。代码结构清晰，并附有适当的注释。 ```html 分形树动画 body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } svg { width: 80vmin; height: 80vmin; } .branch { stroke: #000; stroke-width: 2; fill: none; animation: grow 1s linear forwards; } @keyframes grow { to { stroke-dashoffset: 0; } } // 获取 SVG 元素 const svg = document.querySelector('svg'); // 定义递归函数生成分形树 function createBranch(x1, y1, x2, y2, depth) { if (depth === 0) return; // 计算中点和角度 const midX = (x1 + x2) / 2; const midY = y1 + (y2 - y1) * 0.6; // 60% 的长度作为分支 const angle = Math.atan2(y2 - y1, x2 - x1); // 创建主枝 const branch = document.createElementNS('http://www.w3.org/2000/svg', 'line'); branch.setAttribute('class', 'branch'); branch.setAttribute('x1', x1); branch.setAttribute('y1', y1); branch.setAttribute('x2', midX); branch.setAttribute('y2', midY); // 设置动画长度 const length = Math.sqrt(Math.pow(midX - x1, 2) + Math.pow(midY - y1, 2)); branch.style.strokeDasharray = `${length} ${length}`; branch.style.strokeDashoffset = length; svg.appendChild(branch); // 递归创建左右子枝 createBranch(midX, midY, midX + Math.cos(angle - Math.PI / 6) * length * 0.7, midY - Math.sin(angle - Math.PI / 6) * length * 0.7, depth - 1); createBranch(midX, midY, midX + Math.cos(angle + Math.PI / 6) * length * 0.7, midY - Math.sin(angle + Math.PI / 6) * length * 0.7, depth - 1); } // 创建树干 const trunk = document.createElementNS('http://www.w3.org/2000/svg', 'line'); trunk.setAttribute('class', 'branch'); trunk.setAttribute('x1', 50); trunk.setAttribute('y1', 200); trunk.setAttribute('x2', 50); trunk.setAttribute('y2', 180); // 设置树干动画长度 const trunkLength = 20; trunk.style.strokeDasharray = `${trunkLength} ${trunkLength}`; trunk.style.strokeDashoffset = trunkLength; svg.appendChild(trunk); // 开始生成分形树 createBranch(50, 180, 50, 160, 6); ``` ### 代码说明： 1. **HTML 结构**： - 使用一个 `svg` 元素来绘制分形树。 2. **CSS 样式**： - `body` 设置为全屏居中显示。 - `svg`...

AI 评审点评

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

【CLAUDE】该代码在思路上正确地使用了递归算法和 stroke-dasharray/stroke-dashoffset 动画技巧，代码结构基本清晰且可直接运行。然而，核心功能实现存在两个关键缺陷：一是递归几何逻辑不连贯，树干与分支之间存在断层；二是动画缺少 animation-delay 的层级控制，所有枝干同时播放而非依次出现，导致最重要的「生长感」效果完全缺失。这两个问题使得代码与需求的核心要求相差较大，整体评价为基础框架可用但关键功能未能正确实现。 【GEMINI】该生成结果高质量地完成了分形树的递归绘制任务。代码逻辑严谨，视觉呈现简洁大方。主要的改进空间在于动画的顺序控制，若能根据递归深度动态设置 animation-delay，生长效果将更加真实自然。 【KIMI】该实现未能正确完成核心任务。递归算法存在结构性错误，导致分形树几何形态异常；动画缺乏层级时序控制，无法实现要求的生长效果。建议重新设计createBranch函数：以单一参数控制递归深度，从当前点向两个固定角度方向延伸固定比例长度，并为每层添加递增的animation-delay以实现顺序生长动画。

进阶难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，实现了您所描述的可交互动态分形树。代码包括 SVG 绘制、递归生成分形树、平滑生长动画、参数控制和用户交互功能。 ```html Interactive Fractal Tree body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(to bottom, #1e3c72, #2a5298); color: white; font-family: Arial, sans-serif; } h1 { margin-bottom: 20px; } .controls { margin-bottom: 20px; } .controls label { margin-right: 10px; } svg { border: 1px solid rgba(255, 255, 255, 0.3); } Interactive Fractal Tree Growth Speed: 2s Re-grow Tree const svgNS = "http://www.w3.org/2000/svg"; const treeCanvas = document.getElementById("treeCanvas"); let treeRoot = null; // Recursive function to generate the fractal tree function createTree(x1, y1, angle, depth, maxDepth) { if (depth > maxDepth) return; const length = 100 - depth * 10; // Decrease branch length with depth const x2 = x1 + Math.cos(angle * (Math.PI / 180)) * length; const y2 = y1 - Math.sin(angle * (Math.PI / 180)) * length; // Create the branch as a line const branch = document.createElementNS(svgNS, "line"); branch.setAttribute("x1", x1); branch.setAttribute("y1", y1); branch.setAttribute("x2", x2); branch.setAttribute("y2", y2); branch.setAttribute("stroke", `rgb(${139 + (depth * 10)}, ${69 + (depth * 10)}, ${19})`); // Brown to green branch.setAttribute("stroke-width", 5 - depth); branch.setAttribute("stroke-dasharray", length); branch.setAttribute("stroke-dashoffset", length); treeCanvas.appendChild(branch); // Animate the branch growth branch.animate( [{ strokeDashoffset: length }, { strokeDashoffset: 0 }], { duration: 2000 * (2 - document.getElementById("speedSlider").value), // Adjust duration based on speed easing: "ease-out", } ); // Recursively create left and right branches const leftAngle = angle - 30 + Math.random() * 20 - 10; // Randomize left angle const rightAngle = angle + 30 + Math.random() * 20 - 10; // Randomize right angle createTree(x2, y2, leftAngle, depth + 1, maxDepth); createTree(x2,...

AI 评审点评

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

【CLAUDE】该实现搭建了分形树的基本框架，递归结构、SVG绘制、交互控件均有涉及，代码可以运行并展示基本的树形结构。然而存在多个关键缺陷：1) 颜色渐变算法不能实现棕色到绿色的正确过渡；2) 动画时长计算公式存在严重逻辑错误，导致速度控制功能失效；3) 缺少层级延迟机制，无法实现逐级生长的核心动画效果；4) 动画 fill 模式缺失可能导致动画结束后枝干消失。整体而言，代码完成了需求的基本框架但在动画效果和视觉表现的关键细节上存在明显不足，属于「能跑但效果不达标」的水平。 【GEMINI】该生成结果高质量地完成了大部分任务要求。优点在于代码简洁、交互响应快且界面美观；不足之处在于颜色渐变未准确到达绿色，且动画层级顺序感不强（所有枝干同时生长而非逐级生长），同时速度控制逻辑在极端值下存在计算错误。 【KIMI】该实现完成了分形树的基本框架，但在核心功能上存在多处明显缺陷：颜色渐变逻辑错误导致无法呈现棕色到绿色的过渡，动画时序控制完全缺失导致所有枝干同时生长而非逐级展开，速度控制的方向和计算均与需求相反。代码虽可运行，但关键视觉效果和动画体验未达标，需要大幅修正递归动画时序、颜色计算公式和交互逻辑才能满足题目要求。

困难难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 应用，实现了您描述的功能。代码内联了 CSS 和 JavaScript，并按照模块化方式组织，同时包含详细注释。 ```html Dynamic Fractal Tree /* 基础样式 */ body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to bottom, #f0f8ff, #cbebff); display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100vh; } h1 { margin: 1rem 0; } #controls { display: flex; flex-wrap: wrap; gap: 1rem; width: 90%; max-width: 600px; } label { font-weight: bold; } input[type="range"] { width: 100%; } button { padding: 0.5rem 1rem; cursor: pointer; border: none; border-radius: 5px; background-color: #007bff; color: white; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } #export-btn { margin-top: 1rem; } svg { border: 1px solid #ccc; background: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } Dynamic Fractal Tree 生长速度 (s): 分叉角度 (°): 层数: 随机扰动: 季节主题: 春 秋 冬 导出 SVG // 模块化代码 /** * 创建分形树 * @param {SVGSVGElement} container - SVG 容器 * @param {Object} params - 参数对象 */ function createFractalTree(container, params) { const { levels, angle, speed, randomness } = params; const centerX = container.width.baseVal.value / 2; const centerY = container.height.baseVal.value - 50; // 清空容器 container.innerHTML = ''; // 定义递归函数生成树 function drawBranch(x1, y1, angle, depth, color) { if (depth === 0) return; const length = 100 * Math.pow(0.7, depth); // 指数递减长度 const endX = x1 + Math.cos(angle * Math.PI / 180) * length; const endY = y1 - Math.sin(angle * Math.PI / 180) * length; // 创建枝干 const branch = document.createElementNS('http://www.w3.org/2000/svg', 'line'); branch.setAttribute('x1', x1); branch.setAttribute('y1', y1); branch.setAttribute('x2', endX); branch.setAttribute('y2', endY); branch.setAttribute('stroke', color); branch.setAttribute('stroke-width', 5 - depth); branch.setAttribute('class', 'branch'); container.appendChild(branch); // 添加叶片 if (depth === levels) { const leaf = document.createElementNS('http://www.w3.org/2000/svg', 'circle');...

AI 评审点评

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

【CLAUDE】该实现整体质量较低，存在多处根本性逻辑错误导致核心功能无法正常工作。分形树的递归生成逻辑有严重缺陷（角度计算错误、叶片判断条件错误），导致无法生成正确的树形结构；Web Animations API的使用方式不正确（对SVG属性的动画），层级瀑布式生长动画未实现；点击高亮子枝功能缺失关键的父子关系追踪；季节主题切换无过渡动画。仅导出SVG功能实现较为完整。代码框架和界面基本搭建完成，但核心功能实现质量远未达到要求，整体评分偏低。 【GEMINI】模型完成了任务的基础框架，但在核心的动画时序控制（瀑布式生长）和复杂的递归交互（高亮所有子枝）上表现欠佳。视觉表现达到了基本要求，但细节处理（如颜色平滑渐变和物理动效的自然度）仍有提升空间。 【KIMI】该实现存在较多基础性错误，核心算法（递归角度计算、层级控制、动画时序）均有缺陷，导致最终效果与需求差距显著。虽然代码结构基本完整且能运行，但关键功能未正确实现，建议重点修复递归逻辑、动画层级控制机制以及交互功能的完整性。

相关链接

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

加载中...
100%