写在前面
用AI用久了，发现想打几行真情实感的文字好像变得比较困难，比如说这篇博客的开头，左思右想了半天，也不知道写些什么，想不如让AI帮写一下吧，给它一个prompt，好像什么都可以生成出来。现在我坐在LOTTA，喝着dirty，耳机里放的是方大同，手机摆在前面放的是香港公开赛梁王打黑塔，电脑屏幕是这个markdown文档，其实就是想简单写写这段时间以来，对AI Coding以及AI相关的体验、感想。先申明：笔者也并不是什么深度AI Coding用户，技术不强，只会简单调戏AI，反复循环而已。
关于AI Coding
过去的时间
时间回到2022年，那时候刚刚接触什么Transformer，和同学就self-attention流程都能讨论半天，然后接触GPT，本科毕设用GPT2模型做一个新闻评论生成模型，当时觉得哎挺有意思，输入几句话，这玩意能输出一堆，看上去就像一个网络水军。后来沉迷用GPT2做学术水文，殊不知当时GPT3已经出来两年了，只知道GPT3参数巨大无比，没有开源参数，用的话很贵，得花不少钱，也没想着它能干啥事情。
又过了几个月，在2022年11月前后，课题组一位师兄组内做了一个分享，主题是关于大语言模型的详细调研，实验室90%的同学都去听了，ppt很多页，讲了很多之前没接触过的知识，什么大模型基准、OPT、GPT-J等等。虽然但是，当时也只是觉得新奇，但是感觉和自己研究没有太大关系，也就听个乐呵过去了（后面这位师兄去元石科技 (Meta Stone)创业去了，产品问小白）。
再到后来就是2022年12月1日了，惊为天人的chatgpt横空出世，网速慢的我在12月5号还是6号了解到这么一个东西，快速找资料注册了一个账号，体验了一下。感觉就是一个有那么一点智商的对话机器人，但是能干啥，不了解，好像就是可以帮我水各种报告，当时我也尝试用chatgpt帮我写代码，写的是通信相关的代码（当时研究生课程作业），可以跑半点，半点是啥意思呢，就是说好像真的可以编译成功，但是结果就不知道是啥了（但当时对于能生成可以编译的代码的模型已经较为震惊了）。最初chatgpt让我有aha感觉的是有一次我用它帮我处理数据，具体场景也记不清了，大概就是有一批纯数字的数据，我需要提取其中的每个数字的一部分，当时就想让chatgpt帮我做这件事，结果是它可以做，但成功率不是很高，关键点不在这里，关键是我和它对话了几轮后，又输入了一批数据，结果发现它直接按照我之前的命令做相应处理输出了，这让我大为震撼，因为那一轮的对话我只是给了数据，没有给任何文本指令，当时就在想有点意思，有点智能的感觉（但是现在看来简直平平无奇，就是一个普通的基于对话历史的指令跟随罢了），后来就是一直用这位高质量文本生成器帮我完成各种小任务，其中最大的一个任务是帮我写完了一门课程的课程期末大作业（一份一两万字的调研报告吧，我也不知道是啥，就让chatgpt先给出分点，然后每个小点生成一大串黏贴就完事了，最后这门课还给了85分）。
时间线到这也就告一段落了，因为后来的事大家都很清楚，2023年初chatgpt爆炸式地火遍全球（当然当时中国还没有那么热，不像今年的DeepSeek带来的影响力大），整体关于NLP实验组的研究方向都在慢慢靠向大语言模型（就记得1月2月研究LLM的论文疯狂挂上arxiv，每天都能刷到一大批），笔者所在的课题组也不例外，在2023年3月份就启动一个先锋小队主攻LLM方向，并拉取了几个试点人员参与，当时有师兄问我要不要参加，结果我说算了，自己的GPT2还没搞出论文呢，先别急。但自己也会好奇这个小组在干啥，每次偷偷问加入了这个组的同级最近研究啥了，了解到的就是高层在做什么预训练，训了很久，又做了什么指令微调，又训了很久。我说指令微调是啥，说是叫Supervised Finetuning，简称SFT。我又说SFT具体啥原理，最后得知，哦原来就是一个自回归损失啊，那和我的训练也没啥区别啊。。。
关于初次用AI写网页
前面写了这么多都在回忆过去，实际上就是研究生没搞上LLM的研究，错过了一波技术高潮，后面疯狂补救的故事。时间来到2024年10月，当时研三，时间比较充裕，闲着没事就想弄一个写博客的网站，当时东找西找，哎好巧不巧发现了lilianWeng的博客网站Lil’Log（大名鼎鼎OpenAI前VP，北大知名校友翁荔），初一看好整洁啊，够学术范，决定就是她了，然后了解到用的Hugo模版，就看了下怎么做，弄出一个网页很简单，对我来说难的是怎么弄成lilian的样式，包括主页面的标签，tag，archive页面的时间倒序逻辑，展示样式，search页面的搜索功能，超链接样式，鼠标悬停超链接的样式等等。这些逻辑对我来说简直天方夜谭，笔者只是一个会一点python的算法实习生，什么前端代码后端代码一窍不通。幸运的是，这是在2024年，不是2022年了，我们有非常智能的GPT4，当时GPT4的发布会上，就演示了手绘一个网页图丢给GPT4，直接就把网页代码吐出来了，运行一看就是这个网页的效果。
所以我的开发方式也非常简单粗暴，通过自然语言描述我想要的网页效果，怎么排版，什么逻辑，全部发送给GPT4，它帮我写代码，我把代码在我本地运行预览网页效果，哪里有问题，再反馈给GPT4，如此往复，不舍昼夜地高强度prompt GPT4/GPT4o一周，大致的网页雏形出来了，效果还是很不错的，简直和lilian的一模一样，心满意足了。
其实那会儿面向GPT4/GPT4o编程，还是有很多困难的，印象比较深的就是当对话很多轮次了之后，基本上模型都记不清前面说了啥了，同样的一个问题，对话了七八轮一直解决不了，模型重复吐出前面吐出过的代码，最佳的解决方式就是重开一个对话，把问题再好好地给模型描述清楚，这时候模型说不定又能认真思考了，然后给一个新的解决方案，你再去试一下，也许就能解决了。这个方法在现在也是非常管用的，就是一个多轮解决不了的问题，不妨重开一次，不要重复折磨冗余信息越来越多的模型。
关于再次用AI写网页
自笔者的Hugo网页大功告成后，时不时地写了几篇所谓“技术向”的博客（不是翻译就是copy），也就放着告一段落了，最近不知道为啥又想起了这个网页，想着又来搞点原创了。
这次的出发点是单篇blog页面内的代码块，之前尝试过把代码块的样式调整一下（比如说设置一个最大显示长度，超过长度的会在代码块内显示滑块，但之前实现的效果总是不能令人满意）。经过一年的迭代，AI模型能力肯定比2024年的GPT4强上不少了，笔者没有使用GPT5，用的免费的Gemini2.5-pro，用一个谷歌邮箱就能注册使用，结果这次随意prompt几次，就给出了不错的展示效果。然后笔者又想添加一个代码块内的换行功能，添加一个button，点击可以换行，再点击又取消换行，然后这个button只能在鼠标放在代码块内才会出现，其他情况是隐藏状态。结果也是很好啊，轻轻松松就实现了，关于代码块的唯一问题是行号展示的问题，就是想让自动换行后的代码块行数也能显示在它们正确的位置，这个到现在还是没能实现，就先放着没管了。
后面上班过程中，做的项目是一个对话产品，web端的效果就是会有一个对话框，于是想，我那个hugo网页，能不能也加一个这样的AI对话框。从产品想法产生到产品实现落地，前后也就用了一周时间。大致的产品优化过程是这样的：
- 首先在网页端（任意一个网页）出现一个悬浮球，悬浮球可以被鼠标任意拖动，点击悬浮球可以在页面右侧弹出一个AI对话框，要求弹出过程中，原始页面需要丝滑地向左压缩，叉掉对话框后，原始页面也能丝滑地复原。
- 对话框背景色/对话框内对话气泡的背景色，要求结合网页夜间模型/日间模型 适配变换
- 对话框发送框样式设计、对话框标题样式设计
- 弹出对话框后，添加可以通过鼠标拉动对话框左右移动实现扩大/缩小对话框的功能，且同样要求在拉动过程中，原始页面能够丝滑地向左压缩/向右复原
- 给这个AI对话框接入真正的AI模型，免费的api有google的，但是不是很友好，最后用了阿里的，很丝滑就对话上了
- api总不能放前端代码里头吧，得加入后端逻辑，用的netlify
- 前端调试模型效果时（hugo server）与后端通信不了，效率太低，然后告诉我可以netlify dev调试
- 让模型输出的文本能够流式输出，而不是全部生成完了才一股脑吐出来
- 让模型输出的文本经过markdown渲染，不要纯文本的罗列
- 调整markdown渲染样式，包括公式渲染（这块也是很多坑，还把之前博客页面正常渲染的公式又给弄废了）
- 模型输出时，添加实时markdown渲染效果，而不是全部流式输出完了才突然渲染
- 添加模型在输出过程中打断/终止模型的button，样式抄袭google aistudio
- 调整输入框输入bug，能够shift enter换行，能够在中文输入法时按enter直接把输入的字母打印在输入框内，而不是直接把消息发送出去
- 调整输入框的动态大小变化逻辑，随输入行数逐渐变高，但是有一个最大高度
大致优化的点有这些吧，当然还有很多没有记起来的，目前整个对话框的对话体验还是很好的，上面的点可能听上去很简单，但真正prompt大模型的时候依然是有多次反复试错的过程，具体过程感受只有亲身体验了才能知道，当然，这个的前提是你也是像我一样，对于前后端网页开发一无所知。
关于AI Coding的想法
其实在真正工作中，也已经完全面向AI了，不论是什么需求，都可以先通过自然语言的形式组织一下，然后交给AI，它总会给你一个还不错的结果，当然前提是你需要花点心思组织一下这个语言。这段时间的AI Coding做网页开发，一个人同时充当产品、前端、后端（目前没有算法，算法就是这么闲），反反复复修改那么几个js，css文件，最后也能实现自己想要的效果。个人感觉，AI真的可以有无限可能，当然对于专业的前端工程师/后端工程师来说，我上面说的那么些功能可能也就是一两天的开发量，轻轻松松，但是这里面最重要的是AI可以把这些能力赋予给任何一个肯用AI的人，关键在于想法，AI可以帮助快速将想法转变为现实。
网页开发也不是什么很新奇的事情，也许可以有更crazy，更脑洞大开的想法，值得使用AI帮助实现，这才是笔者认为AI Coding的价值所在。
写在后面
关于这个网页，后续有什么新的想法，也许会再来一轮AI Coding，现在应该先放着了。其实有很多不同形态的AI产品比如claude-code/gemini-cli/codex/coco这类的，还没怎么用过，目前的方式还是局限于对话框内的prompt拷打。另外包括agent，一键式地完成一个项目，想象空间还是，，挺大的。