125 ChatGPT应用 利用ChatGPT帮我撰写html内容

昨天计算车架参数的时候,产生了一个想法,那就是能不能够自动地产生数据呢?

于是把问题向ChatGPT进行了描述。卧槽,竟然给出了详细的结果。这完全出乎了我的意料。

当然,这个是购买的拼团的ChatGPT Plus账号(十人拼团,18.8元一个月),免费账号没有给我具体的答案。

算法逻辑

个人没有能力提出自行车选择的算法逻辑,本篇内容是参考了“摸发虱痒”大佬翻译TOUR的2021自宅自助Bike Fitting指南,根据公式来计算Stack和Reach,然后再根据这个Stack值来挑选车架。共计三步:

  1. 测量身体数据
  2. 选定落差参数和姿势参数
  3. 测量把立和把手的Stack和Reach,计算Stack和Reach

具体的内容,可见我已经搭建好的网站 bicycle.ddw2019.com

具体实现过程

首先考虑了自己有什么东西:

  1. 一台阿里云轻量应用服务器
  2. 一个搭建好的Wordpress网站
  3. 一个域名 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托管域名并且重定向域名。

之前那一段时间的瞎折腾,还算是有点用处的哈。

作者:Dongdong
链接:http://ddw2019.com/125
声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0协议,转载请注明文章地址。

如果观众姥爷们觉得冬冬的博客还不错,可以订阅赏杯奶茶让我继续撰写下去呦 (ฅ´ω`ฅ)

评论

  1. 2 周前
    2024-7-01 17:15:39

    Ai人工智能确实很牛,利用好了 全身都是宝 ……

    • Dongdong
      博主
      刘郎
      2 周前
      2024-7-01 17:45:45

      我们一定要学,不然跟不上时代了都。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇