夜雨聆风
自然语言生成代码(使用千问AI助手)
人工编写代码需要开发者逐行输入代码，这不仅耗时，还容易出错。尤其是在处理大型项目或复杂逻辑时，开发者需要花费大量时间来编写和调试代码。例如，一个简单的循环或条件语句可能需要多次修改才能达到预期效果，而复杂的算法或数据结构的实现可能需要数小时甚至数天的时间来完成和优化。
对于一些常见的编程任务，千问可以通过自然语言描述直接生成简单的代码片段。比如，输入“生成一个冒泡排序算法的Python代码”，它会输出一个完整的冒泡排序算法实现代码，包括函数定义、排序逻辑和返回结果等部分。这使得初学者可以快速获取正确的代码示例，加快学习进度。
在千问中可以通过通用对话生成代码，也可以通过代码功能生成代码，但是两者是有区别的。其最核心的区别在于“验证”。
通用对话是根据语言规律预测下一个字来生成回答，它给出的代码看起来可能很完整，但没有经过实际运行检验，有时会出现虚构函数或参数的情况。而代码功能在回答之前，会先在后台运行一遍代码，确认逻辑能走通再给你结果。
举个例子，假设你问AI：“帮我写一个Excel公式，计算A列所有包含‘发票’二字单元格的金额总和，且排除红色字体的单元格。”
通用对话可能直接给你一个看起来合理的公式，甚至编造一个类似“CheckColor”的函数——但这个函数根本不存在，因为Excel的标准公式本身无法检测字体颜色。
代码功能则会先在后台尝试编写并验证逻辑，然后告诉你：“标准Excel公式无法直接检测字体颜色，这个需求需要通过VBA实现。”随后给出一段经过验证的VBA代码。
简单说，前者是“凭经验给答案”，后者是“先验算再给答案”。
下面通过制作计算器网页来介绍两者的区别。
1. 通用对话
在千问通用对话框中输入提示词：
帮我生成一个HTML网页，来做一个iPhone风格的计算器。网页背景为浅色，计算器本身为黑色背景，圆角设计，带有阴影效果。
显示屏位于顶部，显示当前输入或计算结果，字体颜色为白色，字号较大，当没有输入时显示为0。
按钮分为数字按钮、功能按钮和运算符按钮，所有按钮点击时背景颜色加深。
数字按钮（0~9）和小数点按钮使用灰色背景，文字颜色为白色。
功能按钮（AC, ±, %）使用浅灰色背景，文字颜色为黑色。
运算符按钮（÷, ×, −, +, =）使用浅橙色背景。
零按钮应占据两列宽度，并且左对齐，圆角较大但并不占满。
实现基本的计算器功能，包括加法、减法、乘法、除法、清除（AC）、正负切换（±）和百分比计算（%）。
排版应当美观，具有设计感。
输出结果如下：
为了创建一个iPhone风格的计算器网页，我们可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例代码，包括了基本的布局、样式设计以及一些基础功能。
HTML (index.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>iPhone Style Calculator</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”calculator”>
<div class=”display” id=”display”>0</div>
<div class=”buttons”>
<button class=”btn-ac”>AC</button>
<button class=”btn-plusminus”>±</button>
<button class=”btn-percent”>%</button>
<button class=”btn-operator”>÷</button>
<!– More buttons here –>
<button class=”btn-number”>7</button>
<button class=”btn-number”>8</button>
<button class=”btn-number”>9</button>
<button class=”btn-operator”>×</button>
<!– More rows of buttons –>
<button class=”btn-number zero”>0</button>
<button class=”btn-number”>.</button>
<button class=”btn-operator”>=</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS (styles.css)
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background-color: black;
border-radius: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, .2);
padding: 20px;
width: 320px;
}
.display {
background-color: black;
color: white;
font-size: 3em;
text-align: right;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.btn-number, .btn-operator, .btn-ac, .btn-plusminus, .btn-percent {
background-color: gray;
border: none;
color: white;
font-size: 1.5em;
padding: 20px;
border-radius: 10px;
transition: background-color .2s;
}
.zero {
grid-column: span 2;
}
.btn-ac, .btn-plusminus, .btn-percent {
background-color: lightgray;
color: black;
}
.btn-operator {
background-color: lightorange;
}
JavaScript (script.js)
这里需要添加事件监听器来处理按钮点击，并根据用户输入更新显示内容。由于篇幅限制，具体的逻辑实现（如加法、减法等操作）请根据需求自行补充。
请注意，上述代码提供了一个基本框架，您可能需要根据实际需求调整样式和脚本，以实现完整的功能和更好的用户体验。例如，您可以添加触摸支持、动画效果或者更复杂的计算逻辑。
通用对话将输出结果拆分 HTML、CSS、JavaScript 三个独立文件，但存在大量占位符（如<!– More buttons here –>），按钮组、功能逻辑未补全，仅提供基础骨架；需用户手动补全按钮 HTML、编写 JavaScript 逻辑、调试样式兼容性，单击“预览”按钮，效果如图12-1所示。
图12-1通用对话结果
2. 代码功能
在通用对话中单击“代码”按钮，进入如图12-2所示的代码对话界面。
图12-2代码对话界面
输入上面的提示词，输出结果如下（局部），代码对话输出的单文件 HTML 结构，CSS 内嵌于<style>、JavaScript 内嵌于<script>，无占位符，按钮组（0~9、运算符、功能键）完整，从布局到逻辑形成闭环，单击“预览”按钮，效果如图12-3所示。
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>iPhone风格计算器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;
}
.calculator {
width: 320px;
background-color: #000;
border-radius: 30px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
图12-3代码对话结果
