本文最后更新于 109 天前，其中的信息可能已经有所发展或是发生改变。
昨天计算车架参数的时候，产生了一个想法，那就是能不能够自动地产生数据呢？
于是把问题向ChatGPT进行了描述。卧槽，竟然给出了详细的结果。这完全出乎了我的意料。
当然，这个是购买的拼团的ChatGPT Plus账号（十人拼团，18.8元一个月），免费账号没有给我具体的答案。
算法逻辑
个人没有能力提出自行车选择的算法逻辑，本篇内容是参考了“摸发虱痒”大佬翻译TOUR的2021自宅自助Bike Fitting指南，根据公式来计算Stack和Reach，然后再根据这个Stack值来挑选车架。共计三步：
- 测量身体数据
- 选定落差参数和姿势参数
- 测量把立和把手的Stack和Reach，计算Stack和Reach
具体的内容，可见我已经搭建好的网站 bicycle.ddw2019.com
具体实现过程
首先考虑了自己有什么东西：
- 一台阿里云轻量应用服务器
- 一个搭建好的Wordpress网站
- 一个域名 ddw2019.com
下面是对上述算法的具体实现过程
根据算法编写Prompt
自己是不会编写复杂的html代码的，所以这个需求只能够让ChatGPT来代劳了。不过自己还是要用自然语言来撰写Prompt的呀。
最终的Prompt如下：
<--!帮我撰写html的内容-->
# 使用说明
本篇内容是参考的学习而来。具体的内容，大家可以参考xxx
# 测量并且输入身体参数
请输入身高a、跨高b、臂长c、胸高d
并且直接给出参考的坐垫高度e （e=b*0.883）
# 输入姿势参数和落差参数
此处预留一个放置图片的位置。
请输入姿势参数f和落差参数h
# 根据上述参数，给出计算结果
给出下面两个数据的结果
{{Stack Plus}}
{{Reach Plus}}
其中 {{Stack Plus}}=(e*0.96)-h
{{Reach Plus}} = (d-b+c）* f - (e * 0.29)+100
# 得到对应的Stack和Reack
提示文字。“根据握持点来从各个厂商的车架里选择合适的产品，为此，你需要先减去车把和把立的Stack和Reach。当一下条件时：
普通弯把
把立：长度为110mm，角度为-7°
垫圈高度为30mm
所占据的X轴长度204mm，Y轴高度则是67mm。”
这里预留一张图片的位置
请输入x和y，如果不输入的话，x默认为204，y默认为67；
得到Reach和Stack
其中Reach = {{Reach Plus}}-x
Stack = {{Stack Plus}}-y
ChatGPT返给我的就是下面的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>坐垫高度与Stack/Reach计算器</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}
h1, h2, h3 {
text-align: center;
}
.section {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="number"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.image-container {
text-align: center;
margin-bottom: 20px;
}
.image-container img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>坐垫高度与Stack/Reach计算器</h1>
<div class="section">
<h2>使用说明</h2>
<p>本篇内容是参考的学习而来。具体的内容，大家可以参考 xxx。</p>
</div>
<div class="section">
<h2>测量并输入身体参数</h2>
<form id="bodyParamsForm">
<label for="height">身高（a）：</label>
<input type="number" id="height" name="height" required>
<label for="inseam">跨高（b）：</label>
<input type="number" id="inseam" name="inseam" required>
<label for="armLength">臂长（c）：</label>
<input type="number" id="armLength" name="armLength" required>
<label for="chestHeight">胸高（d）：</label>
<input type="number" id="chestHeight" name="chestHeight" required>
<button type="button" onclick="calculateSeatHeight()">计算坐垫高度</button>
</form>
<div id="seatHeightResult"></div>
</div>
<div class="section">
<h2>输入姿势参数和落差参数</h2>
<div class="image-container">
<!-- 预留图片位置 -->
<!-- <img src="your-image-url.jpg" alt="示例图片"> -->
</div>
<form id="poseParamsForm">
<label for="poseParam">姿势参数（f）：</label>
<input type="number" id="poseParam" name="poseParam" required>
<label for="dropParam">落差参数（h）：</label>
<input type="number" id="dropParam" name="dropParam" required>
<button type="button" onclick="calculateResults()">计算结果</button>
</form>
<div id="calculationResults"></div>
</div>
<div class="section">
<h2>得到对应的Stack和Reach</h2>
<p>根据握持点来从各个厂商的车架里选择合适的产品，为此，你需要先减去车把和把立的Stack和Reach。</p>
<p>当以下条件时：</p>
<ul>
<li>普通弯把</li>
<li>把立：长度为110mm，角度为-7°</li>
<li>垫圈高度为30mm</li>
</ul>
<p>所占据的X轴长度为204mm，Y轴高度为67mm。</p>
<div class="image-container">
<!-- 预留图片位置 -->
<!-- <img src="your-image-url.jpg" alt="示例图片"> -->
</div>
<form id="stackReachForm">
<label for="xInput">X轴长度（默认204mm）：</label>
<input type="number" id="xInput" name="xInput" value="204">
<label for="yInput">Y轴高度（默认67mm）：</label>
<input type="number" id="yInput" name="yInput" value="67">
<button type="button" onclick="calculateStackReach()">计算Stack和Reach</button>
</form>
<div id="stackReachResults"></div>
</div>
<script>
function calculateSeatHeight() {
var b = parseFloat(document.getElementById('inseam').value);
var e = b * 0.883;
var resultElement = document.getElementById('seatHeightResult');
resultElement.innerHTML = '<p>参考坐垫高度 e = ' + e.toFixed(2) + ' cm</p>';
}
function calculateResults() {
var b = parseFloat(document.getElementById('inseam').value);
var c = parseFloat(document.getElementById('armLength').value);
var d = parseFloat(document.getElementById('chestHeight').value);
var f = parseFloat(document.getElementById('poseParam').value);
var h = parseFloat(document.getElementById('dropParam').value);
var e = b * 0.883;
var stackPlus = (e * 0.96) - h;
var reachPlus = (d - b + c) * f - (e * 0.29) + 100;
var resultElement = document.getElementById('calculationResults');
resultElement.innerHTML = `
<p>Stack Plus: {stackPlus.toFixed(2)}</p>
<p>Reach Plus:{reachPlus.toFixed(2)}</p>
`;
}
function calculateStackReach() {
var stackPlus = parseFloat(document.getElementById('calculationResults').getElementsByTagName('p')[0].innerText.split(": ")[1]);
var reachPlus = parseFloat(document.getElementById('calculationResults').getElementsByTagName('p')[1].innerText.split(": ")[1]);
var x = parseFloat(document.getElementById('xInput').value) || 204; // 默认值204
var y = parseFloat(document.getElementById('yInput').value) || 67; // 默认值67
var reach = reachPlus - x;
var stack = stackPlus - y;
var resultElement = document.getElementById('stackReachResults');
resultElement.innerHTML = `
<p>Reach: {reach.toFixed(2)}</p>
<p>Stack:{stack.toFixed(2)}</p>
`;
}
</script>
</body>
</html>
优化代码
这个内容不好看，于是让ChatGPT优化了代码
- 输入框和输入内容放在同一行中
- 代码结构进行优化
以及自己手动修改的内容
- 文字的修改
- 添加图片
- 添加链接
- 加入页脚
搭建网站
这个一开始不知道怎么处理。问了ChatGPT之后，让我直接在wordpress中发布。可是，发布之后，计算功能没有了。（我知道大概是因为funtion应该是放在主题文件的funtion中，而不是这一个文件中，可是不会呀）
于是，想着在Github Page上发布代码。发布是可以了，但是吧，更改自定义域名有点问题。
最后，想到了曾经使用过的Vercel。
于是利用Vercel作为前端，github作为后端。并且在vercle中自定义了域名。相当简单。
整体回顾
接下来对这个过程进行整体回顾
算法来自于参考了“摸发虱痒”大佬翻译TOUR的2021自宅自助Bike Fitting指南
具体的html代码是ChatGPT撰写初稿，我修改的。
网站搭建，利用了Vercle + github，并且使用Cloudflare托管域名并且重定向域名。
之前那一段时间的瞎折腾，还算是有点用处的哈。
Ai人工智能确实很牛，利用好了 全身都是宝 ……
我们一定要学，不然跟不上时代了都。