side_projects/ai-beautify
1
0
Fork 0
Code Pull Requests Activity

feat(ai-test): add baseline and results for AI beautification test

Browse Source 
This commit introduces a new test suite for evaluating the HTML/CSS beautification capabilities of different AI models.

The suite includes:
- A baseline unstyled HTML file (`plain_html/index.html`) to be used as the common input.
- Standardized prompts for various design aesthetics (e.g., Professional, Minimalist).
- Initial results for the 'Professional' style from several models, including ChatGPT, Kimi, Gemini, Doubao, Deepseek,
and Yuanbao.
This commit is contained in:
xiaomai
2025-09-26 14:00:03 +08:00
parent 310a5da94f
commit b5447a9903
15 changed files with 5154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
gemini/Professional/index.html Normal file
View File

@@ -0,0 +1,468 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AI Beautify — 企业官网风格</title>
<style>
/* --- 1. 全局与变量定义 --- */
:root {
--primary-color: #0d47a1; /* 深邃蓝，用于标题和重要元素 */
--accent-color: #1976d2; /* 活力蓝，用于链接和按钮 */
--text-color: #343a40; /* 深灰，用于标题 */
--secondary-text-color: #6c757d; /* 中性灰，用于段落 */
--background-color: #f8f9fa; /* 淡灰色背景 */
--card-background-color: #ffffff; /* 卡片背景 */
--border-color: #dee2e6; /* 边框颜色 */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
--border-radius: 8px;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-family);
background-color: var(--background-color);
color: var(--secondary-text-color);
line-height: 1.6;
}
/* --- 2. 响应式布局 --- */
/* 桌面端：主区域与侧边栏左右布局 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-areas:
"header header"
"main aside"
"footer footer";
gap: 2rem;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
/* 移动端：所有内容垂直堆叠 */
@media (max-width: 992px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"aside"
"footer";
padding: 1rem;
}
}
/* --- 3. 排版与通用元素 --- */
h1,
h2,
h3 {
color: var(--text-color);
font-weight: 600;
line-height: 1.3;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
h2 {
font-size: 2rem;
margin-top: 0;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color);
}
h3 {
font-size: 1.25rem;
color: var(--primary-color);
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--primary-color);
text-decoration: underline;
}
ul {
padding-left: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
}
/* --- 4. 模块样式 --- */
/* Header */
header {
text-align: center;
margin-bottom: 1rem;
}
header p {
font-size: 1.1rem;
max-width: 60ch;
margin: 0 auto 1.5rem auto;
}
header nav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0;
}
header nav a {
font-weight: 500;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
header nav a:hover {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
text-decoration: none;
}
/* 通用卡片样式 (应用于 Section, Aside) */
section,
aside {
background-color: var(--card-background-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
@media (max-width: 768px) {
section,
aside {
padding: 1.5rem;
}
}
/* Features Section */
#features ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
#features li {
padding: 1.5rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#features li:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
#features h3 {
margin: 0 0 0.5rem 0;
}
#features p {
margin-bottom: 0;
}
/* Gallery Section */
#gallery {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
#gallery > div {
/* For wrapping figures if needed, though direct styling is fine */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
#gallery figure {
margin: 0;
text-align: center;
}
#gallery figcaption {
margin-top: 0.5rem;
font-style: italic;
font-size: 0.9rem;
color: var(--secondary-text-color);
}
/* Pricing Table */
#pricing table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
#pricing caption {
font-weight: bold;
caption-side: bottom;
text-align: center;
margin-top: 1rem;
font-size: 0.9rem;
color: var(--secondary-text-color);
}
#pricing th,
#pricing td {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
}
#pricing thead {
background-color: var(--background-color);
}
#pricing th {
color: var(--text-color);
font-weight: 600;
}
#pricing tbody tr:hover {
background-color: #f1f3f5;
}
/* Contact Form */
#contact form {
display: grid;
gap: 1.5rem;
}
#contact fieldset {
border: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
}
#contact legend {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 0.5rem;
padding: 0;
}
#contact label {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-weight: 500;
}
#contact input,
#contact textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: calc(var(--border-radius) / 2);
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}
#contact input:focus,
#contact textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}
#contact button {
background-color: var(--accent-color);
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
justify-self: start; /* Align button to the left */
}
#contact button:hover {
background-color: var(--primary-color);
transform: translateY(-2px);
}
/* Aside */
aside {
background-color: #e9ecef; /* Slightly different background for distinction */
border-left: 4px solid var(--accent-color);
}
/* Footer */
footer {
text-align: center;
padding: 2rem;
margin-top: 1rem;
background-color: var(--text-color);
color: var(--background-color);
border-radius: var(--border-radius);
}
footer p {
margin: 0.5rem 0;
}
footer a {
color: #ffffff;
font-weight: 500;
}
footer a:hover {
color: #ced4da;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>产品演示 — AI 美化基线</h1>
<p>
这是一个用于不同生成式 AI 美化对比的基础 HTML
页面。页面不含任何样式或脚本。
</p>
<nav aria-label="主导航">
<ul>
<li><a href="#overview">概述</a></li>
<li><a href="#features">功能</a></li>
<li><a href="#gallery">展示</a></li>
<li><a href="#pricing">价格</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<section id="overview" aria-labelledby="overview-title">
<h2 id="overview-title">概述</h2>
<p>
我们的示例产品旨在演示一个简单的单页面布局：标题、特色、图集、价格与联系表单。你可以把本文件交给多个
AI，让它们为此页面生成 CSS、设计系统或重构 HTML。
</p>
</section>
<section id="features" aria-labelledby="features-title">
<h2 id="features-title">功能亮点</h2>
<ul>
<li>
<h3>高性能</h3>
<p>优化的渲染流程与低延迟响应。</p>
</li>
<li>
<h3>安全可靠</h3>
<p>采用行业标准的安全实践，保障数据与隐私。</p>
</li>
<li>
<h3>易于扩展</h3>
<p>模块化设计，便于功能扩展与集成第三方服务。</p>
</li>
</ul>
</section>
<section id="gallery" aria-labelledby="gallery-title">
<h2 id="gallery-title">作品展示</h2>
<div>
<figure>
<img src="https://picsum.photos/640/360?1" alt="示例图 1" />
<figcaption>示例图 1 — 产品界面快照</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/640/360?2" alt="示例图 2" />
<figcaption>示例图 2 — 使用场景示例</figcaption>
</figure>
</div>
</section>
<section id="pricing" aria-labelledby="pricing-title">
<h2 id="pricing-title">价格一览</h2>
<table>
<caption>
方案与价格
</caption>
<thead>
<tr>
<th>方案</th>
<th>价格（每月）</th>
<th>适用对象</th>
</tr>
</thead>
<tbody>
<tr>
<td>免费</td>
<td>¥0</td>
<td>个人与试用</td>
</tr>
<tr>
<td>专业</td>
<td>¥49</td>
<td>中小型团队</td>
</tr>
<tr>
<td>企业</td>
<td>面议</td>
<td>大规模部署与 SLA</td>
</tr>
</tbody>
</table>
</section>
<section id="contact" aria-labelledby="contact-title">
<h2 id="contact-title">联系我们</h2>
<form action="#" method="post" aria-describedby="contact-desc">
<p id="contact-desc">填写下列信息，我们会尽快与您取得联系。</p>
<fieldset>
<legend>联系信息</legend>
<label for="name"
>姓名
<input id="name" name="name" type="text" required />
</label>
<label for="email"
>邮箱
<input id="email" name="email" type="email" required />
</label>
<label for="message"
>留言
<textarea id="message" name="message" rows="5"></textarea>
</label>
</fieldset>
<button type="submit">发送</button>
</form>
</section>
</main>
<aside aria-labelledby="note-title">
<h2 id="note-title">测试说明</h2>
<p>
你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS
和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。
</p>
</aside>
<footer>
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
<p><a href="#top">返回顶部</a></p>
</footer>
</div>
</body>
</html>