編碼感受和評估

在過去一周多的時間里，我在?ChatGPT?的協(xié)助下，生成了做一個簡單編輯器的產品文檔、技術方案文檔，然后在這個基礎上，進行程序的編碼。

使用的工具紀要

為了更全面地感受?AI?IDE?對研發(fā)過程的影響，我特意選擇了一個我不太了解的項目，并且以整體形式做下來，從中深度感受?AI?IDE?對我們開發(fā)過程的影響。

產品文檔和技術文檔生成的輔助工具：New?Bing，The?New?Bing?-?Learn?More

編程過程使用的編程工具：VScode?+?Cursor/Coplit，Cursor?IDE

涉及的編程語言：JavaScript、CSS、HTML、Python、SQL

涉及的組成部分：前端、后臺、數據庫、Canvas?相關的圖形處理接口

累計耗時：在過去一周多，斷斷續(xù)續(xù)地使用了?15?+?小時（包括生成產品和技術方案文檔，有不少時間用于排查程序?Bug）。

代碼規(guī)模：1500行+

個人使用感受記錄

使用的第一感受

1. 產生一種驚喜感，發(fā)現(xiàn)用它來做我所不了解的項目，也能對我形成比較大的幫助。

2. 顯著減少了我查詢和搜索技術文檔的時間，通過對話，能直接完成不少的工作。

3. 是一種開發(fā)模式的變革，雖然現(xiàn)在還存在不足，但是，潛力無限！

關于研發(fā)效率

1. 會有提升，但是比例不會很大，個人感覺?30%左右，因為生成的結果代碼仍然需要進一步的詳細?review?和測試。

2. 在?prompt?描述非常詳細的情況下，例如登錄功能，它生成了詳細的異常判斷邏輯，這一塊的生成非常快。當提供給它的?prompt?比較模糊時，則需要多次互動，而且未必能提供符合我們預期的代碼。

關于?IDE?的選擇（推薦?Cursor）

非常推薦使用Cursor，它不僅支持對話，而且能夠選中指定代碼，讓它做邏輯修改，它會將修改記錄反饋出來，問你是否?accept？并且，能夠清晰看見它進行的代碼改動。支持精細化控制，使用過程中，個人的強烈感受到，選中的范圍越小、越細，它的結果越好，錯誤也越少。

如下圖所示（我讓它給button添加樣式）：

指定具體的函數，讓它添加代碼注釋。

注釋添加的結果：

關于它的不足之處（關鍵閱讀項）：

1. 代碼規(guī)模少的時候，例如只有?1?個文件，100?-?200?行代碼時，它生成和修改都比較準確，當代碼規(guī)模和文件逐漸變多，邏輯變多時，它的生成和修改變得有誤，會遇到包括變量未定義、錯刪代碼、沒有考慮上下文邏輯等問題?？s小代碼的選中范圍、讓prompt變得更詳細能夠一定程度上減少問題，但是，仍然會出現(xiàn)。

2. 生成的代碼中，偶爾會含有不存在的、但是命名很通用的樣式、函數，它有時會默認認為你的上下文中存在這種“通用”函數，實際上并沒有。

3. 如果我修改的邏輯要同時改動多個文件，該功能并不支持，它目前只支持一個文件一個文件修改。不過，使用對話功能，它能以對話的方式告訴我們要在多個文件里修改代碼，此時要我們手動復制和修改代碼。

4. 開發(fā)者對開發(fā)領域具體問題的認知仍然非常重要，如果開發(fā)者在prompt里沒有提及，則它生成的代碼也不考慮。例如，需要等待img.src的load完成后再重新刷新canvas畫布，如果不提及，它的代碼就是直接刷新畫布，此時由于img并沒有l(wèi)oad完成，畫布刷新的內容是空白的。

5. 相比于生成文檔、注釋，程序代碼對錯誤幾乎是零容忍度的，一個未定義的變量就可以讓整個程序完全終止運行，但是，生成文檔有少量錯誤是不影響文檔的閱讀的，出版社對著作出版要求錯誤率達到萬分之一。對于一個大規(guī)模程序而言，這個要求要高得多。

6. 根據個人對?NLP?領域?AIGC?的理解，AIGC?本質是根據前文推理下文，模型精度越高，推理越準確，對于代碼來說，則要求推理的準確度非常高，后面?2-3?代的?GPT?可能能解決該問題。

7. 對話中，Cursor反饋結果以英文為主，偶爾才能看見中文。

簡要總結：

1. 短期看，GPT?還遠不足以取代程序員，長期看，它的潛力無限，是一種趨勢，隨著它持續(xù)升級和迭代，預計它對研發(fā)效率的提升會越來越多。

2. 我們應當擁抱?AI?IDE，構造更詳細、邏輯清晰的prompt，充分利用它的能力提升研發(fā)效率。

編碼過程紀要（部分）：

幫我生成一個基于VueJS的登錄HTML頁面，包含如下邏輯：

• 前置條件：用戶已經注冊過賬號

• 后置條件：用戶成功登錄并進入圖片編輯器頁面

• UI描述：見功能原型

• 流程/子流程/分支流程：

  • 流程：用戶在登錄頁面輸入用戶名和密碼，點擊登錄按鈕

  • 子流程：系統(tǒng)驗證用戶名和密碼是否正確，如果正確，則跳轉到圖片編輯器頁面；如果不正確，則提示“用戶名或密碼錯誤，請重新輸入”

  • 分支流程：無

• 與其他子模塊的接口：無

• 業(yè)務數據描述：

  • 用戶名：由字母、數字、下劃線組成，長度為4~16個字符

  • 密碼：由字母、數字、特殊符號組成，長度為6~16個字符

• 邊界值處理：

  • 如果用戶名或密碼為空，則提示“請輸入用戶名和密碼”

  • 如果用戶名或密碼長度不符合要求，則提示“用戶名或密碼長度不合法”

修改為引用項目文件夾內的vue.js

登陸界面比較簡陋，能幫我美化一下嗎？

我想把頁面元素居中

頁面中的兩個input沒有對齊，幫我修改CSS

鏈接數據庫操作

寫一段Python代碼，它的主要邏輯是讀取用戶表的賬號密碼，然后判斷url請求傳入的賬號密碼是否匹配，并且該python文件能以web服務形式運行。

相關信息：鏈接MySQL數據庫，IP是111.230.249.101，port是20086，庫名是editor。

表結構：CREATE?TABLE?`users`?(

??`id`?int(11)?NOT?NULL?AUTO_INCREMENT,

??`username`?varchar(16)?NOT?NULL,

??`password`?varchar(32)?NOT?NULL,

??`register_time`?datetime?DEFAULT?CURRENT_TIMESTAMP,

??PRIMARY?KEY?(`id`),

??UNIQUE?KEY?`username`?(`username`)

)?ENGINE=InnoDB?AUTO_INCREMENT=2?DEFAULT?CHARSET=utf8;

它的表編碼為latin1，不正確，修改為utf8

幫我寫一個web圖片編輯器頁面，包含以下功能：

• 前端使用HTML5的Canvas元素來實現(xiàn)圖片編輯功能，Canvas可以支持圖片的上傳、裁剪、旋轉、尺度變換等基本操作，并可以將編輯后的結果導出為一張圖片

  • 使用<input?type="file">元素來讓用戶選擇本地的圖片文件，然后使用FileReader對象來讀取文件內容，并將其轉換為DataURL格式。

  • 使用CanvasRenderingContext2D.drawImage()方法來將DataURL格式的圖片繪制到Canvas上，然后使用CanvasRenderingContext2D.getImageData()方法來獲取圖片的像素數據。

  • 使用CanvasRenderingContext2D.putImageData()方法來修改圖片的像素數據，實現(xiàn)裁剪、旋轉、尺度變換等操作。

  • 使用HTMLCanvasElement.toDataURL()方法來將修改后的圖片轉換為DataURL格式，并使用<a?download>元素來實現(xiàn)圖片的下載功能。

上傳或的效果，表現(xiàn)比較差：

修復x?報錯

圖片上傳后，圖片展示在canvas里變形了，請修復該問題。畫布先定義為?1000*800

（AI?一直沒有找到，是人工找出來的）

用div包起來，畫布固定到頁面的右側

canvas畫布支持上傳多個圖片，這些圖片是共存的，并且，每個圖片可以在畫布中被移動.

這次它寫得比較好，基本上只需要很少的修改就一步到位了。

這是上一條命令：canvas畫布支持上傳多個圖片，這些圖片是共存的，并且，每個圖片可以在畫布中被移動。在上一條命令的基礎上，除了支持移動之外，還支持選中圖片后的放大和縮小。

它提供的代碼犯了一個小錯，上下文理解不到位，變量名不對。（人工：手動修正）

在放大縮小問題上，它總是給我加這個事件，這個事件并不是我想要的，我想要的是稿定編輯器的那種效果。

但是，它添加的邊框總是不生效，問了它多次，它也回答不出來。

人工發(fā)現(xiàn)，代碼有?Bug，這句話讓邊框自動消失了。

比較正常的代碼需要保存，AI?有時會把代碼改亂，導致之前有的功能消失，例如，多張圖片共存的能力。

在編輯器中，支持圖片對象的選中和拖動

先問?new?bing：基于canvas實現(xiàn)的web編輯器中，要實現(xiàn)選中一張圖，出現(xiàn)一個邊框，可以拖過拖拉邊框實現(xiàn)放大和縮小，html和JS代碼要怎么實現(xiàn)？

您好，這是必應。我嘗試了一些網上搜索，發(fā)現(xiàn)了一些可能對您有用的資源。您可以參考以下鏈接12，它們提供了一些示例代碼和解釋，如何使用?HTML5?canvas?實現(xiàn)圖片的拖拽和縮放功能。基本思路是：

當選中某個圖片時：

• 在?canvas?上繪制圖片，并在圖片的四個角繪制可拖拽的錨點。

• 如果用戶按下鼠標左鍵并拖動一個錨點，就根據錨點的位置調整圖片的寬度和高度。

• 如果用戶按下鼠標左鍵并拖動圖片內部，就根據鼠標的移動距離移動圖片的位置。

• 在每次鼠標移動后，重新繪制圖片和錨點。

就當前階段的?AI?而言，還是需要懂得代碼，只是自己寫的代碼量變少了，程序員仍然有其價值。

添加縮放按鈕，實現(xiàn)放大和縮小功能

AI?實現(xiàn)了這個功能，但是沒有考慮保持圖片原來的比例。

修正：

編輯器簡單旋轉功能開發(fā)

增加旋轉后，坐標計算錯誤：

讓它糾正，它一直都改不過來，一直錯（后來我手動修正）。

創(chuàng)建后端服務代碼（Python）

給當前代碼增加跨域：放開cess-Control-Allow-Origin，允許跨域訪問

from flask import Flask, request, jsonify

app = Flask(__name__)

# Connect to the MySQL database
mydb = mysql.connector.connect(
  host="111.230.249.101",
  port="20086",
  user="root",
  password="hello",
  database="editor"
)

# Define a route for the login page
@app.route('/login')
def login():
  # Get the username and password from the URL request
  username = request.args.get('username')
  password = request.args.get('password')

  # Query the user table for the given username and password
  mycursor = mydb.cursor()
  sql = "SELECT * FROM users WHERE username = %s AND password = %s"
  val = (username, password)
  mycursor.execute(sql, val)
  result = mycursor.fetchone()

  # If the query returns a result, the username and password are valid
  if result:
    response = jsonify({"message": "Login successful"})
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response
  else:
    response = jsonify({"message": "Invalid username or password"})
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

if __name__ == '__main__':
  app.run()

能統(tǒng)一添加嗎？這樣每行都添加比較麻煩？

下文中的CORS(app)就實現(xiàn)了統(tǒng)一添加跨域頭。

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Connect to the MySQL database
mydb = mysql.connector.connect(
***
)

# Define a route for the login page
@app.route('/login', methods=['POST'])
def login():
  # Get the username and password from the request body
  data = request.json
  username = data['username']
  password = data['password']

  # Query the user table for the given username and password
  mycursor = mydb.cursor()
  sql = "SELECT * FROM users WHERE username = %s AND password = %s"
  val = (username, password)
  mycursor.execute(sql, val)
  result = mycursor.fetchone()

  # If the query returns a result, the username and password are valid
  if result:
    return jsonify({"message": "Login successful"})
  else:
    return jsonify({"message": "Invalid username or password"})

if __name__ == '__main__':
  app.run()

登陸成功后，給HTTP頁面中進行set-cookie，設置username為對應的用戶名。

當這個階段，我將編輯器換成了?Cursor

把button的class變成light-button

它直接給我修改了代碼：

在JS?代碼中給input對象添加樣式對象：

最終的效果：

按鈕上下添加5?margin:

給按鈕添加一個?width?=?180?的約束：

給editor.html頁面添加一個選中圖片變換濾鏡的功能

（事實上，沒有支持選中圖片）

產生了一行不對的代碼，刷新的位置不對：

刷新的位置應該跟img當前的位置一致，不能是0,0開始：

存在一些問題：所有圖片都變成了濾鏡后的顏色

濾鏡狀態(tài)要保存在各個圖片內部，而不是統(tǒng)一生效：

它又誤刪了一些代碼，暫時不支持局部接受：

圖片全部變灰的?Bug，它自身沒能修復，但是，我?review?代碼后，知道是因為?Filter?功能狀態(tài)執(zhí)行后沒有保存對象到圖片全局數據，我直接選中對應函數，讓它把狀態(tài)變更更新到數組中，問題終于被解決。

兩個不同的prompt：

在?editor.html?中新增一個?Save?按鈕，如果發(fā)現(xiàn)?cookie?中存在username用戶名稱，則將當前畫布中?images?以username為key全部保存到IndexedDB中，并且支持通過給editor.html?傳入username參數來獲取存儲在IndexedDB力的數據，并且還原到當前畫布中。

在?editor.html?中新增一個?Save?按鈕，如果發(fā)現(xiàn)?cookie?中存在username用戶名稱，則將當前畫布中?images?以username為key全部保存到IndexedDB中，并且支持通過給editor.html?傳入username參數來獲取存儲在IndexedDB力的數據，并且還原到當前畫布中。并且，不能有語法錯誤，并且能夠執(zhí)行，不允許存在未定義的變量引用。

（后者可以規(guī)避?request?未定義的問題）

Cursor?生成了一大段代碼給我：

它提供的代碼執(zhí)行有問題：

request未定義，報錯了

讓它修正：

通過username載入后的在畫布上的圖片對象，無法被選中和移動，請修正。并且，不能有語法錯誤，并且能夠執(zhí)行，不允許存在未定義的變量引用。

默認情況，無法修正。

載入的圖片應該存入到全局的images數組中。

重新梳理描述：

你是一位資深的研發(fā)工程師，精通前端、數據庫和Canvas相關特性，現(xiàn)在，你要基于當前代碼的上下文，完成如下任務：保存畫布上的圖片元素到IndexedDB，并且方便后續(xù)以用戶名取回來，還原到畫布上。有如下要求：

1.?給editor.html的save按鈕綁定一個事件，該事件需要保存全局變量中的images數據和畫布內的圖片數據。

2.?支持通過給editor.html?傳入username參數來獲取存儲在IndexedDB的數據，并且還原到當前畫布中，還原到畫布的圖片元素能夠被移動、選中和執(zhí)行其他編輯操作。

3.?程序不能有?Bug，要可運行，不能隨意大幅度刪改原來的存在的代碼和影響原來的功能。

這段代碼無法把圖片在畫布中渲染出來：

它建議我添加日志打印代碼：

告訴它，仍然沒有解決：

繼續(xù)讓我加日志代碼：

最終找到問題原因了：image?的?src?尚未完成?load，提前執(zhí)行了?Canvas?的?redrew

選中對應的函數，讓它優(yōu)化?redrew?的執(zhí)行時間：

問題獲得解決：

下載后的部分成果圖：

（在這個過程中有很多交互，沒有一一寫出來）文章來源地址http://www.zghlxwxcb.cn/news/detail-620896.html

到了這里，關于大語言模型 AI 輔助編碼使用過程體驗報告（Github Copilot、Cursor）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！