经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 大数据/云/AI » 人工智能基础 » 查看文章
曾经辛苦造的轮子,现在能否用 ChatGPT 替代呢?
来源:cnblogs  作者:若邪  时间:2023/6/26 8:53:11  对本文有异议

上一篇文章 我在 vscode 插件里接入了 ChatGPT,解决了代码变量命名的难题 中,展示了如何在 vscode 插件中使用 ChatGPT 解决代码变量命名的问题。vscode 插件市场中有很多的翻译插件,但是在一些使用场景里是远远比不上 ChatGPT 的,比如只翻译一段 json 数据里的指定字段。那么 ChatGPT 还能做什么呢?能否取代已经存在的轮子?

以 lowcode 插件中的功能为例,看看能不能用 ChatGPT 替代。

根据 JSON 生成 API 请求方法

首先复制一段 json,比如:

  1. {
  2. "code": 200,
  3. "msg": "",
  4. "result": {
  5. "records": [
  6. {
  7. "id": "1a2b3c4d5",
  8. "costCenterCode": "ccx002",
  9. "costCenterName": "财务部",
  10. "accountingCode": "ac0887",
  11. "bankAccountingCode": "bk1290",
  12. "orderNumber": "od1089",
  13. "orderAmount": "6158.36",
  14. "confirmedTime": "2023-02-07T13:47:34.552Z",
  15. "laborCostExcludingTax": "4629.05"
  16. }
  17. ],
  18. "total": 200
  19. }
  20. }

不使用 ChatGPT

1.gif

使用 ChatGPT

2.gif

可以发现,几乎达到了一样的效果,只是 ChatGPT 会慢一点。不使用 ChatGPT 时,插件内部是直接调用库将 json 转成 ts 类型,还做了一些边界处理,比如如果复制的是 json 变量而不是标准的 json 数据,需要将 json 变量变成 json 数据。使用 ChatGPT 对数据就没有很严格的要求,可以是 json 变量,也可以是 json 数据。

非 ChatGPT 的模板

  1. <%- type %>
  2. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {
  3. id: number;
  4. }
  5. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {
  6. xx: string;
  7. }
  8. export function <%= rawSelectedText %>(
  9. params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
  10. data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
  11. ) {
  12. return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
  13. url: `xxxx`,
  14. method: 'GET',
  15. params,
  16. data,
  17. });
  18. }

ChatGPT 的模板

  1. <%- rawClipboardText %>
  2. 根据这段 json 生成 ts 类型,名字为 I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result
  3. 和下面的代码一起返回
  4. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {
  5. id: number;
  6. }
  7. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {
  8. xx: string;
  9. }
  10. export function <%= rawSelectedText %>(
  11. params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
  12. data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
  13. ) {
  14. return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
  15. url: `xxxx`,
  16. method: 'GET',
  17. params,
  18. data,
  19. });
  20. }
  21. 返回 markdown 代码块

模板会使用 ejs 进行编译。

根据 JSON 生成 MOCK 方法

也是先复制一段 json 数据。

不使用 ChatGPT

3.gif

插件内部是直接遍历 json,把这一段代码通过字符串拼出来。

使用 ChatGPT

4.gif

这里使用 ChatGPT 的时候,很难让它输出不需要修改就能直接使用的代码,如上的代码里输出了一段无关的内容。

  1. // 调用方法
  2. getMockData().then(data => { console.log(data); });

ChatGPT 使用的模板:

  1. <%- rawClipboardText %>
  2. 生成一个 js 方法,方法名为 <%= rawSelectedText || 'getRandomData' %>,
  3. 方法内部使用 mock.js 生成跟上面的 json 一样字段的数据,如果有数组则生成10个元素,
  4. 最终的数据使用 Promise.resolve 返回
  5. 返回 markdown 代码块

根据 JSON 生成 TS 类型

先复制一段 json 数据

不使用 ChatGPT

5.gif

使用 ChatGPT

6.gif

根据 JSON 生成 TS 类型-去除接口名称

这个用处是:后端接口可以连调的时候替换原有自己预先写的接口类型。

不使用 ChatGPT

7.gif

使用 ChatGPT

8.gif

根据 TS 类型生成 API 请求方法

使用场景:后端没有给接口文档,前端根据原型和设计稿抽象出数据模型,根据数据模型生成 mock 的 API 请求方法(mock数据通过真实后端服务提供)。

只复制类型体,不要类型名称,比如:

  1. {
  2. records: {
  3. id: string;
  4. costCenterCode: string;
  5. costCenterName: string;
  6. accountingCode: string;
  7. bankAccountingCode: string;
  8. orderNumber: string;
  9. orderAmount: string;
  10. confirmedTime: string;
  11. laborCostExcludingTax: string;
  12. }[];
  13. total: number;
  14. }

不使用 ChatGPT

9.gif

使用 ChatGPT

因为只是将剪贴板里的内容在模板里做了一下拼装,完全用不到 ChatGPT。

模板如下:

  1. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result {
  2. code: number;
  3. msg: string;
  4. result: <%- rawClipboardText %>
  5. }
  6. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {
  7. id: number;
  8. }
  9. export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {
  10. xx: string;
  11. }
  12. export function <%= rawSelectedText %>(
  13. params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
  14. data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
  15. ) {
  16. return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
  17. url: `xxxx`,
  18. method: 'GET',
  19. params,
  20. data,
  21. });
  22. }

根据 TS 类型生成 MOCK 方法

使用场景:后端没有给接口文档,前端根据原型和设计稿抽象出数据模型,根据数据模型生成 mock 方法(mock 数据没有通过后端服务提供)。

只复制类型体,不要类型名称,比如:

  1. {
  2. records: {
  3. id: string;
  4. costCenterCode: string;
  5. costCenterName: string;
  6. accountingCode: string;
  7. bankAccountingCode: string;
  8. orderNumber: string;
  9. orderAmount: string;
  10. confirmedTime: string;
  11. laborCostExcludingTax: string;
  12. }[];
  13. total: number;
  14. }

不使用 ChatGPT

10.gif

使用 ChatGPT

11.gif

根据 JSON 生成 KOA MOCK

使用场景:mock 数据由 koa 服务提供,根据 json 生成 koa 路由。

不使用 ChatGPT

使用 ChatGPT

根据 TS 类型生成 MOCK

使用场景:后端没有给接口文档,前端根据原型和设计稿抽象出数据模型,根据数据模型生成 koa mock 服务。

只复制类型体,不要类型名称,比如:

  1. {
  2. records: {
  3. id: string;
  4. costCenterCode: string;
  5. costCenterName: string;
  6. accountingCode: string;
  7. bankAccountingCode: string;
  8. orderNumber: string;
  9. orderAmount: string;
  10. confirmedTime: string;
  11. laborCostExcludingTax: string;
  12. }[];
  13. total: number;
  14. }

不使用 ChatGPT

使用 ChatGPT

根据 TS 类型生成组件文档

这也是曾经造的轮子 typescript-to-markdown,一个 utools 插件。

效果如图:

使用 ChatGPT

可以看出来,并不是很完美。

总结

ChatGPT 很难输出不需要修改直接粘贴到编辑器中就能用的代码,相比于我们硬编码写的插件,在效率上还是有所欠缺。但是借助插件来管理 ChatGPT Prompt 模板,复制粘贴还是比上官网或者其它客户端快很多的。

文章没有提到拉取 YAPI 接口文档生成代码的功能,因为 ChatGPT 并不能去拉取接口获取数据,最近在研究 LangChain,借助这玩意儿或许可以实现。

Prompt 模板

上面所有的模板已经共享,通过如下方式可以下载到你的项目中:

原文链接:https://www.cnblogs.com/jaycewu/p/17500048.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号