Google: Gemma 4 26B A4B 在「旅行签证申请表单」的评测结果

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

基本信息

  • 模型名称：Google: Gemma 4 26B A4B
  • 用例名称：旅行签证申请表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于 HTML/CSS/JavaScript 表单设计与用户体验优化。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，包含内联 <style> 和 <script>，无需外部依赖，可直接在浏览器中运行。 2. 使用原生 JavaScript 实现表单验证逻辑，不依赖第三方库。 3. 表单布局需整洁美观，具备基础的视觉层次感，字段标签清晰，错误提示友好。 4. 验证规则须明确：护照号格式（字母+数字组合，6-9位）、日期逻辑（出生日期不得为未来日期、旅行结束日期不得早于开始日期）、必填项非空校验。 5. 代码结构清晰，关键逻辑处添加注释，便于阅读和理解。

用户提示词（User Prompt）

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

# 旅行签证申请表单（基础版） ## 任务描述 创建一个结构完整、样式整洁的旅行签证申请表单，所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中，可直接在浏览器中独立运行，无需任何外部依赖。 ## 功能要求 ### 表单字段 表单需包含以下字段，并分组展示： **申请人基本信息** - 姓名（全名，必填，仅允许字母和空格） - 护照号（必填，格式：1-3位大写字母 + 6-9位数字，如 G12345678） - 出生日期（必填，不得为未来日期，申请人须年满18岁） **签证信息** - 目的地国家（下拉选择，至少包含：美国、英国、法国、日本、澳大利亚、加拿大） - 签证类型（单选：旅游签证 / 商务签证） **旅行日期** - 计划出发日期（必填，不得早于今天） - 计划返回日期（必填，不得早于出发日期） ### 表单验证 - 点击「提交申请」按钮时触发验证 - 每个字段验证失败时，在字段下方显示具体的红色错误提示文字 - 验证通过后，隐藏表单并显示一个包含申请摘要信息的成功提示页面 - 支持「重新申请」按钮，可返回空白表单 ### 样式要求 - 表单居中显示，最大宽度 600px，带有卡片式阴影效果 - 字段按分组用视觉分隔线或标题区分 - 提交按钮样式醒目，悬停时有交互反馈 - 错误状态下输入框边框变为红色

任务要求

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

  1. 表单包含全部7个必要字段（姓名、护照号、出生日期、目的地国家、签证类型、出发日期、返回日期），字段类型选用合理（input/select/radio）
  2. 护照号使用正则表达式验证格式（1-3位大写字母+6-9位数字），出生日期验证申请人年满18岁，日期字段验证逻辑正确（出发日期≥今天，返回日期≥出发日期）
  3. 所有必填项均有非空校验，验证失败时在对应字段下方显示具体错误提示文字，输入框边框变红
  4. 验证通过后隐藏表单，展示包含申请人姓名、护照号、目的地、签证类型、旅行日期的申请摘要成功页面
  5. 表单具备清晰的视觉分组、整洁的布局和基础的交互样式（按钮悬停效果、错误状态样式）

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个完整、独立的 HTML 文件，包含了您要求的所有功能、样式和逻辑。您可以直接将其保存为 `.html` 文件并在任何现代浏览器中运行。 ```html 旅行签证申请表单 /* --- CSS 样式设计 --- */ :root { --primary-color: #2563eb; --primary-hover: #1d4ed8; --error-color: #dc2626; --bg-color: #f3f4f6; --card-bg: #ffffff; --text-main: #1f2937; --text-muted: #6b7280; --border-color: #d1d5db; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } /* 卡片容器 */ .container { background: var(--card-bg); width: 100%; max-width: 600px; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } h1 { text-align: center; margin-bottom: 30px; font-size: 24px; color: var(--text-main); } /* 分组样式 */ .form-section { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; } .form-section:last-of-type { border-bottom: none; } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--primary-color); display: flex; align-items: center; } .section-title::before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--primary-color); margin-right: 10px; border-radius: 2px; } /* 表单控件布局 */ .form-group { margin-bottom: 20px; position: relative; } label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; } input[type="text"], input[type="date"], select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s; outline: none; } input:focus, select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* 错误状态 */ .form-group.error input, .form-group.error select { border-color: var(--error-color); } .error-message { color: var(--error-color);...

AI 评审点评

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

【GEMINI】该回答完美执行了所有需求。代码质量极高，不仅实现了复杂且准确的表单验证逻辑（尤其是年龄和护照正则），还在 UI 设计上表现出色，提供了良好的用户交互体验（如按钮悬停、焦点状态、响应式适配）。完全符合单个 HTML 文件独立运行的要求，是一个高质量的开发示例。 【KIMI】该表单系统在功能实现、表单结构和UI交互方面都表现良好，基本满足了题目要求。表单验证逻辑较为完整，字段类型选用合理，页面视觉设计和交互样式也较为完善。代码结构清晰，关键逻辑处有注释，易于阅读和理解。整体而言，这是一个高质量的表单系统实现。

进阶难度评测结果

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

模型生成产物

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

这是一个完整、单文件的“旅行签证申请表单系统”。我使用了 **Tailwind CSS** 进行响应式布局设计，并使用原生 **JavaScript** 实现了复杂的联动逻辑、费用计算、文件模拟上传以及 `localStorage` 持久化。 您可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。 ```html 全球旅行签证申请系统 - 专业版 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', 'Microsoft YaHei', sans-serif; background-color: #f8fafc; } .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); } .step-active { color: #3b82f6; border-bottom: 2px solid #3b82f6; } .error-ring { box-shadow: 0 0 0 2px #ef4444; } .upload-drag-over { border-color: #3b82f6; background-color: #eff6ff; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } VisaFlow Pro 我的申请记录 1 目的地与类型 2 个人信息 3 材料上传 目的地与签证类型 目标国家 请选择国家 美国 (USA) 英国 (UK) 日本 (Japan) 申根区 (Schengen) 澳大利亚 (Australia) 签证类型 请先选择国家 申请人详细信息 护照号码 * 格式错误：中国护照需为 E + 8位数字 预计出发日期 * 预计返回日期 * 护照有效期 * 护照有效期必须在返回日期后至少6个月 所需材料清单 请先选择目的地和签证类型以查看所需材料 费用明细 基础签证费 $0.00 加急处理 (50%) $0.00 服务费 $25.00 总计费用 $25.00 保存草稿 立即提交申请 我的申请记录 暂无申请记录 操作成功 /** * 数据配置 */ const CONFIG = { countries: { 'USA': { types: { 'Tourist': 160, 'Business': 185, 'Student': 185 }, materials: ['Passport Copy', 'Bank Statement', 'Invitation Letter', 'Photo'] }, 'UK': { types: { 'Standard Visitor': 120, 'Student': 450, 'Work': 600 }, materials: ['Passport Copy', 'Proof of Funds', 'Accommodation Proof', 'Photo'] }, 'JPN': { types: { 'Tourist': 30, 'Business': 50, 'Student': 80 }, materials: ['Passport Copy', 'Itinerary', 'Bank Statement', 'Photo'] }, 'Schengen': { types: { 'Tourist': 90, 'Business': 110, 'Student': 120 }, materials: ['Passport Copy', 'Travel Insurance', 'Flight Booking', 'Hotel Booking'] }, 'AUS': { types: { 'Visitor': 145, 'Student': 450, 'Work': 550 }, materials: ['Passport Copy', 'Financial Support', 'Employment Letter', 'Photo'] } }, serviceFee:...

AI 评审点评

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

【GEMINI】该生成结果是一份高质量的进阶版签证申请系统实现。它不仅完全满足了所有功能需求（包括复杂的日期逻辑验证和多级联动），还在 UI 细节和交互反馈上表现卓越。文件上传的模拟流程和 localStorage 的持久化处理非常成熟，代码结构清晰，体现了资深前端工程师的水平。 【KIMI】整体而言，该大模型生成的多国签证申请表单系统在功能实现、UI/UX设计和代码架构方面表现良好。表单联动逻辑和费用计算准确无误，文件上传和表单验证功能完整。UI设计响应式适配，视觉和交互体验佳。代码结构清晰，但模块化有待加强。在单文件HTML中整合了复杂的前端逻辑，体现了较高的开发能力。

困难难度评测结果

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

模型生成产物

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

这是一个单 HTML 文件实现的完整“综合签证申请平台”。它集成了 Tailwind CSS 用于样式，并使用原生 JavaScript 构建了复杂的状态管理、多语言引擎、动态表单逻辑和高保真模拟流程。 ```html GlobalVisa Pro - 智能签证申请平台 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --success: #059669; --error: #dc2626; --bg-gray: #f8fafc; --transition-speed: 0.4s; } body { background-color: var(--bg-gray); font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow-x: hidden; } /* 步骤切换动画 */ .step-container { transition: transform var(--transition-speed) ease-in-out, opacity var(--transition-speed); } .step-exit { transform: translateX(-20px); opacity: 0; pointer-events: none; position: absolute; } .step-enter { transform: translateX(20px); opacity: 0; } .step-active { transform: translateX(0); opacity: 1; position: relative; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } /* 模拟加载动画 */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; } /* 进度条动画 */ .progress-bar-fill { transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* 响应式调整 */ @media (max-width: 768px) { .step-active { position: relative; } .step-exit { position: relative; transform: none; opacity: 1; } } GlobalVisa Pro English 1 引导 2 信息 3 计划 4 材料 5 支付 上一步 下一步 正在处理支付... 请勿关闭窗口或刷新页面 支付成功！ 您的申请已提交，请查看状态追踪。 查看申请状态 /** * 数据驱动配置 */ const CONFIG = { languages: { zh: { step1: '智能引导', step2: '个人信息', step3: '旅行计划', step4: '材料上传', step5: '确认支付', next: '下一步', prev: '上一步', submit: '立即支付', destinations: { CN: '中国', US: '美国', UK: '英国', FR: '法国', JP: '日本', AU: '澳大利亚', EU: '申根区' }, visaTypes: { tourist: '旅游签证', business: '商务签证', student: '学生签证' }, errors: { passport: '护照格式不正确', date_order: '出境日期必须晚于入境日期', passport_expiry: '护照有效期需覆盖旅行后6个月', group_min: '团体申请至少需要2人', required: '此项为必填项' }, processing: '正在处理支付...', processing_msg: '请勿关闭窗口或刷新页面', payment_success: '支付成功！', payment_success_msg: '您的申请已提交，请查看状态追踪。', view_status: '查看申请状态',...

AI 评审点评

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

【GEMINI】这是一个高质量的单文件实现方案。模型准确理解了复杂的业务需求，特别是在多语言、多国家配置化处理以及复杂的日期逻辑验证上表现优异。代码结构清晰，注释到位，UI 交互不仅完整而且具备高保真度，极大地提升了模拟后端流程的真实感。虽然在‘加急费’动态计算和‘字段级错误定位’上稍有简化，但整体已达到商用原型级别。 【KIMI】该实现在功能要求、UI/UX 设计和代码架构方面均表现良好，基本满足了题目要求。在表单验证和动态内容联动方面还有优化空间，部分 UI 交互的高保真度有待提升。代码整体架构清晰，但在模块化和可维护性方面有改进余地。

相关链接

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

加载中...
100%