ChatGPT前端編程源碼分析

本篇內(nèi)容主要講解“ChatGPT前端編程源碼分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“ChatGPT前端編程源碼分析”吧!

TDD第一步就卡住了

程序運行視圖：

帶著TDD思路，我進(jìn)入了 ejs_and_yaml_dsl_loader 這個模塊，這塊因為我切的不是很好，所以這代碼有點難寫，不過沒關(guān)系，正好我們實際工作大部分的場景都是這樣的?？纯次覀冊谶@里能玩出點什么來。

那么這次的需求呢是這個樣子的，我們需要把ejs模版引擎渲染出的yaml轉(zhuǎn)換為json，那么我們這個功能會非常復(fù)雜，所以我們沒有以上來就去做ejs的部分。而是先從yaml的部分入手。如果只是yaml轉(zhuǎn)json的話其實沒什么意思，一行代碼就實現(xiàn)了，關(guān)鍵是yaml里面有一個語法叫做json指針。

這個東西很重要。我們之前畫的那個圖還是有一點點。簡化的我們只畫了豎向的分層。但是在橫向上，如果你要實現(xiàn)像我們說的，按照規(guī)模進(jìn)行分解的話，如果一個case比較簡單的話，還比較好辦。通常我們的case會變得越來越復(fù)雜?？赡芫托枰阉鸪啥鄠€。DSL文件，然后最后通過一個dsl把它組裝起來。為了實現(xiàn)這種組裝的能力呢，我們就要支持類似的語法，那么壓帽里的jason指針的恰好是這樣一個很好用的語法。當(dāng)然他有他的一些缺陷，他可能不支持動態(tài)的參數(shù)，這個是我們后面的擴展。具體的json指針語法什么樣的？一會大家看我們的prompt就知道了。

之所以需要這個語法以及它的擴展語法，是因為還記得咱們說的我們需要一個派發(fā)引擎嗎？ 其實派發(fā)與組合不過是動態(tài)和靜態(tài)的區(qū)別。派發(fā)引擎也需要一套組合邏輯。而我們現(xiàn)在做這個功能就是為未來我們可能能實現(xiàn)一個派發(fā)引擎積累一些經(jīng)驗。

而我們使用的庫呢，他不是原生支持JSON指針。他不支持呢，也挺好，因為我們后面會擴展這個功能。如果他支持的話，我們自定義的語法擴展起來反而很麻煩。背景知識就是這些，我們開始實現(xiàn)，下面試提問prompt：

我要用nodejs實現(xiàn)一個yaml的loader函數(shù)，可以讀入yaml轉(zhuǎn)為json，并且可以將其中JSON指針語法轉(zhuǎn)換為具體的值.

這是base.yml：

- item:
    $ref: "/refed.yml#simple_value_keya"
- item:
    keya: 
    $ref: "/refed.yml#simple_value_keya"

這是在同一路徑的refed.yml

simple_value_keya: value_of_keya

兩個yaml文件都在一個文件夾里，比如叫yaml
而js文件與yaml文件夾同級

我期望的輸出為：

[{
    "item":"value_of_keya"
},{
"item":
        {
            "keya": "value_of_keya"
        }
}]

我還希望：

• 這個函數(shù)是async的。

• 讀取文件的fs，要使用const fs = require('fs/promise')引入。

• 用js-yaml庫解析yaml。

• 解析JSON指針的過程需要被封裝為一個專門的函數(shù)。

代碼要怎么實現(xiàn)？（直接給出最后的代碼就可以）

結(jié)果給我生成了很長的代碼：

const fs = require('fs/promises');
const yaml = require('js-yaml');
/**
* 從JSON指針中獲取對應(yīng)的值
* @param {Object} obj - 要獲取值的對象
* @param {string} pointer - JSON指針
* @returns {any} 對應(yīng)的值
*/
function getValueByPointer(obj, pointer) {
const parts = pointer.split('/').slice(1); // 去掉開頭的'#'字符，然后拆分為路徑的數(shù)組
return parts.reduce((acc, cur) => acc[cur], obj); // 依次按路徑訪問對象屬性
}
/**
* 讀取指定路徑的YAML文件，并解析其中的JSON指針
* @param {string} path - YAML文件的路徑
* @returns {Promise<any>} 解析后的JSON對象
*/
async function loadYamlFile(path) { 
const content = await fs.readFile(path, 'utf8'); // 讀取文件內(nèi)容
const data = yaml.load(content); // 解析YAML為JSON對象
// 遍歷JSON對象，查找$ref屬性
const processRef = async (obj) => {
    if (typeof obj === 'object' && obj !== null) { // 如果是對象
    if ('$ref' in obj) { // 如果包含$ref屬性
        const refPath = obj.$ref.split('#')[0]; // 獲取引用文件路徑
        const pointer = obj.$ref.split('#')[1]; // 獲取JSON指針
        const refData = await loadYamlFile(refPath); 
        const value = getValueByPointer(refData, `#${pointer}`); // 獲取引用文件中對應(yīng)JSON指針的值
        return value;
    } else { // 如果不包含$ref屬性，遞歸處理子屬性
        for (const prop in obj) {
        obj[prop] = await processRef(obj[prop]);
        }
    }
    }
    return obj;
};
return await processRef(data); // 處理JSON對象中的$ref屬性
}
// 調(diào)用loadYamlFile函數(shù)并輸出結(jié)果
(async () => {
const data = await loadYamlFile('./yaml/base.yml');
console.log(JSON.stringify(data, null, 2));
})();

不出意外的，這個代碼他是錯的，我讓他反復(fù)生成了很多次，結(jié)果總是差那么點，說實在的，差那么點我自己手改也不是不能改，但是勝負(fù)欲起來了。不能完全生成這個事還是有點讓我感覺不爽，考慮到如果真的在實際場景中使用的話，這50行的長度也寫不了太復(fù)雜的東西，但是一到這個長度，就沒法細(xì)調(diào)整了太致命了，這又不是人，我不能指著這一行跟他說，這里有問題……嗯？指著這一行？我頓時靈光一閃。

破門而入，針對性反饋

在日常開發(fā)中，我們是怎么通過文字指出某一行有問題呢？答案再明顯不過了：通過注釋。而且，下面兩個注釋已經(jīng)是約定俗成的使用方式了：

• // TODO: 表示后續(xù)需要新增的功能，或其他任務(wù)項

• // FIXME: 表示這里有Bug要修復(fù)

使用這兩個注釋，你甚至不用過多解釋，你只要告訴他你用這個注釋標(biāo)了出來，讓他按要求修改即可。

所以我就這么給他說：

下面代碼不能滿足我的需求，我會用//TODO: 來標(biāo)記問題所在行

const fs = require('fs/promises');
const yaml = require('js-yaml');
/**
* 從JSON指針中獲取對應(yīng)的值
* @param {Object} obj - 要獲取值的對象
* @param {string} pointer - JSON指針
* @returns {any} 對應(yīng)的值
*/
function getValueByPointer(obj, pointer) {
const parts = pointer.split('/').slice(1); // 去掉開頭的'#'字符，然后拆分為路徑的數(shù)組
return parts.reduce((acc, cur) => acc[cur], obj); // 依次按路徑訪問對象屬性
}
/**
* 讀取指定路徑的YAML文件，并解析其中的JSON指針
* @param {string} path - YAML文件的路徑
* @returns {Promise<any>} 解析后的JSON對象
*/
async function loadYamlFile(path) { //TODO: 這個path參數(shù)需要作為遞歸讀取時的的workdir，具體需求見下一個TODO
const content = await fs.readFile(path, 'utf8'); // 讀取文件內(nèi)容
const data = yaml.load(content); // 解析YAML為JSON對象
// 遍歷JSON對象，查找$ref屬性
const processRef = async (obj) => {
    if (typeof obj === 'object' && obj !== null) { // 如果是對象
    if ('$ref' in obj) { // 如果包含$ref屬性
        const refPath = obj.$ref.split('#')[0]; // 獲取引用文件路徑
        const pointer = obj.$ref.split('#')[1]; // 獲取JSON指針
        const refData = await loadYamlFile(refPath); //TODO: refPath 通常是相對于當(dāng)前yaml文件的，需要拼接一個指定的前綴作才是正確的路徑，這個前綴通常是path參數(shù)自己的directory路徑前綴，比如"./yaml/base.yaml"則是"./yaml"
        const value = getValueByPointer(refData, `#${pointer}`); // 獲取引用文件中對應(yīng)JSON指針的值
        return value;
    } else { // 如果不包含$ref屬性，遞歸處理子屬性
        for (const prop in obj) {
        obj[prop] = await processRef(obj[prop]);
        }
    }
    }
    return obj;
};
return await processRef(data); // 處理JSON對象中的$ref屬性
}
// 調(diào)用loadYamlFile函數(shù)并輸出結(jié)果
(async () => {
const data = await loadYamlFile('./yaml/base.yml');
console.log(JSON.stringify(data, null, 2));
})();

上面代碼，這一行寫錯了：

const refPath = path.resolve(workdir, obj.$ref.split('#')[0]); // 獲取引用文件路徑
應(yīng)該用path.join

給我完整的代碼

通過這樣的方式，我初步到了我想要的代碼。之所以用TODO而不用FIXME，是因為我站在他的視角，把這個場景定義為了擴展新功能，而不是修bug。說某一行寫錯那個確實應(yīng)該用FIXME，但是我怕混在一起會出錯，而且后面已經(jīng)有注釋了，我不知道刪掉好不好，畢竟注釋也是幫他理解我代碼的一種方式，所以單拎出來說了。

這個玩法不見得要那么精準(zhǔn)，有的時候可能代碼太復(fù)雜了，你可能看不出來哪里有Bug，畢竟不是你寫的，也很正常，但是通過調(diào)試或者失敗的測試數(shù)據(jù)，你能收斂到一個函數(shù)或者一個代碼塊，也可以通過這個方式來編寫prompt。

比如下面這個：

給下面代碼種FIXME標(biāo)記的函數(shù)處有一些bug：

module.exports = function render_my_yaml_dsl(data){
    const vm = require('vm');
    // 定義一個函數(shù)用于渲染字符串模板
    function render_string_template(originalScriptTemplate, intention) {
        const execScriptTemplate = "`" + originalScriptTemplate + "`";
        const script = new vm.Script(execScriptTemplate);
        const execScript = script.runInNewContext(intention);
        // console.debug(execScript);
        return execScript;
    }
    // 定義一個函數(shù)用于展開屬性組合
    function expand_attributes(attributes) { // FIXME: 這個函數(shù)有bug
        const result = [];
        attributes.forEach(obj => {
            Object.values(obj).forEach(val => {
                if (Array.isArray(val)) {
                    val.forEach(v => {
                        result.push({ ...obj, [Object.keys(obj).find(key => obj[key] === val)]: v });
                    });
                } else {
                    result.push(obj);
                }
            });
        });
        return result;
    }
    const polys = [];
    for (const poly of data.poly) {
        const { template_prompt, ...other } = poly;
        const { template, meta } = template_prompt;
        const variableGroups = expand_attributes(meta);
        const prompts = variableGroups.map(variables => render_string_template(template, variables));
        for (const prompt of prompts) {
            polys.push({ prompt, ...other });
        }
    }
    const result = polys.map(poly => ({ ...data.base, ...poly }));
    return result;
}

• 給定的輸入： //....省略json數(shù)據(jù)

• 期望的輸出應(yīng)該是： //....省略json數(shù)據(jù)

• 而實際上是把數(shù)組里唯一的元素重復(fù)了8遍， 我需要修正這個錯誤，但同時，對于給定的輸入： //....省略json數(shù)據(jù)

• 我還希望得到輸出 //....省略json數(shù)據(jù)

• 結(jié)合這兩個需求，請問代碼哪里有錯誤？代碼應(yīng)該怎么寫？

上面我省略掉了輸入輸出的數(shù)據(jù)內(nèi)容，方便大家聚焦于我在代碼上標(biāo)記了FIXME（看，這個prompt對人也工作^_^）。這里是我寫完ejs_and_yaml_dsl_loader之后，把所有代碼集成起來運行的時候發(fā)現(xiàn)了一個bug，但是我也不知道bug是什么？（其實是懶得去看，用這個玩意久了，人真的是會變懶）所以我直接讓他告訴我Bug是什么，然后怎么改，我來評估它的方案，在評估方案的過程中我就搞明白了bug是什么。這個效率可高了很多。

這個技巧不僅可以用于編程領(lǐng)域。在編程領(lǐng)域呢，我們?nèi)×藗€巧，恰好有注釋和兩個配合注釋使用的關(guān)鍵字以表達(dá)我們的意圖，這些東西我們不用告訴ChatGPT，它已經(jīng)學(xué)習(xí)寫程序的時候?qū)W過了。如果是在編程之外，可能我們要教他我們使用的標(biāo)記是什么意思。 比如，我前一陣跟朋友們討論要設(shè)計一個ChatGPT編程秀，在今天這個時代了，我們就想讓ChatGPT幫我們設(shè)計，于是我們問：

我準(zhǔn)備進(jìn)行一個ChatGPT編程秀，給大家展示怎么用ChatGPT進(jìn)行編程，時間為一個小時，可不可以給我一個編程秀的設(shè)計，并且附上時間安排.

于是我得到了下面的輸出：

ChatGPT 編程秀設(shè)計
階段 1：介紹 ChatGPT（10 分鐘）
介紹 ChatGPT，包括其基本原理、應(yīng)用場景、優(yōu)缺點等。
演示如何使用 OpenAI API 調(diào)用 ChatGPT。
以一個簡單的例子說明 ChatGPT 的使用，比如生成一句話。
階段 2：生成文本（20 分鐘）
介紹如何使用 ChatGPT 生成文本，包括如何控制生成文本的長度、樣式等。
演示如何用 ChatGPT 生成一篇文章，比如一篇新聞稿。
演示如何用 ChatGPT 生成一組對話，比如模擬一次客服對話。
階段 3：生成代碼（20 分鐘）
介紹如何使用 ChatGPT 生成代碼，包括如何控制生成代碼的復(fù)雜度、風(fēng)格等。
演示如何用 ChatGPT 生成一段簡單的代碼，比如一個打印 "Hello, World!" 的程序。
演示如何用 ChatGPT 生成一段復(fù)雜的代碼，比如一個排序算法的實現(xiàn)。
階段 4：Q&A 互動（10 分鐘）
與觀眾進(jìn)行問答互動環(huán)節(jié)，回答關(guān)于 ChatGPT 的任何問題。
總結(jié)（5 分鐘）
簡要總結(jié) ChatGPT 的特點和應(yīng)用場景。
感謝觀眾的收看。

很明顯，我們是個編程秀，所以我們不需要階段2，所以我說：

這是一個編程秀，所以只要設(shè)計編程的環(huán)節(jié)就可以了

然后他回復(fù)：

ChatGPT 編程秀設(shè)計
階段 1：介紹 ChatGPT（5 分鐘）
簡單介紹 ChatGPT 的基本原理和應(yīng)用場景。
階段 2：生成文本（20 分鐘）
演示如何使用 ChatGPT 生成一段文章，比如一篇新聞稿。
演示如何使用 ChatGPT 生成一組對話，比如模擬一次客服對話。
階段 3：生成代碼（25 分鐘）
演示如何使用 ChatGPT 生成一段簡單的代碼，比如一個打印 "Hello, World!" 的程序。
演示如何使用 ChatGPT 生成一段復(fù)雜的代碼，比如一個排序算法的實現(xiàn)。
階段 4：優(yōu)化代碼生成（10 分鐘）
介紹如何調(diào)整 ChatGPT 的參數(shù)來優(yōu)化生成的代碼質(zhì)量。
演示如何優(yōu)化前面演示的代碼生成。
階段 5：Q&A 互動（10 分鐘）
與觀眾進(jìn)行問答互動環(huán)節(jié)，回答關(guān)于 ChatGPT 的任何問題。
總結(jié)（5 分鐘）
簡要總結(jié) ChatGPT 的特點和應(yīng)用場景。
感謝觀眾的收看。

可以看到，并沒有刪除，這可能是大多數(shù)人在面臨對長文本進(jìn)行反饋時都會面臨的尷尬了，駕馭不住ChatGPT，非常的難受。 于是我這樣做：

我會用代碼注釋的形式在內(nèi)容上標(biāo)記給你反饋 ，比如"// FIXME: "表示這里有問題，冒號后面會跟隨我要修改的意圖。下面是我的輸入：
ChatGPT 編程秀設(shè)計
階段 1：介紹 ChatGPT（5 分鐘）
簡單介紹 ChatGPT 的基本原理和應(yīng)用場景。
階段 2：生成文本（20 分鐘） // FIXME: 我不需要這個階段2，
演示如何使用 ChatGPT 生成一段文章，比如一篇新聞稿。
演示如何使用 ChatGPT 生成一組對話，比如模擬一次客服對話。
階段 3：生成代碼（25 分鐘）
演示如何使用 ChatGPT 生成一段簡單的代碼，比如一個打印 "Hello, World!" 的程序。
演示如何使用 ChatGPT 生成一段復(fù)雜的代碼，比如一個排序算法的實現(xiàn)。
階段 4：優(yōu)化代碼生成（10 分鐘）
介紹如何調(diào)整 ChatGPT 的參數(shù)來優(yōu)化生成的代碼質(zhì)量。
演示如何優(yōu)化前面演示的代碼生成。
階段 5：Q&A 互動（10 分鐘）
與觀眾進(jìn)行問答互動環(huán)節(jié)，回答關(guān)于 ChatGPT 的任何問題。
總結(jié)（5 分鐘）
簡要總結(jié) ChatGPT 的特點和應(yīng)用場景。
感謝觀眾的收看。

就得到了這樣的輸出：

ChatGPT 編程秀設(shè)計
階段 1：介紹 ChatGPT（5 分鐘）
簡單介紹 ChatGPT 的基本原理和應(yīng)用場景。
階段 2：生成代碼（35 分鐘）
演示如何使用 ChatGPT 生成一段簡單的代碼，比如一個打印 "Hello, World!" 的程序。
演示如何使用 ChatGPT 生成一段復(fù)雜的代碼，比如一個排序算法的實現(xiàn)。
介紹如何調(diào)整 ChatGPT 的參數(shù)來優(yōu)化生成的代碼質(zhì)量。
演示如何優(yōu)化前面演示的代碼生成。
階段 3：Q&A 互動（10 分鐘）
與觀眾進(jìn)行問答互動環(huán)節(jié)，回答關(guān)于 ChatGPT 的任何問題。
總結(jié)（5 分鐘）
簡要總結(jié) ChatGPT 的特點和應(yīng)用場景。
感謝觀眾的收看。

是不是掌控感就強了許多？TODO也是可以用的，比如：

我會用代碼注釋的形式在內(nèi)容上標(biāo)記給你反饋 ，比如"// TODO: "表示我希望你改進(jìn)的點，冒號后面會跟隨我要達(dá)成的效果。下面是我的輸入：
ChatGPT 編程秀設(shè)計
階段 1：介紹 ChatGPT（5 分鐘）
簡單介紹 ChatGPT 的基本原理和應(yīng)用場景。
階段 2：生成代碼（35 分鐘）// TODO: 我希望整個階段是用一個例子串起來的，請幫我設(shè)計一個具體的例子來進(jìn)行這個階段的演示，并重新設(shè)計這個階段的子步驟
演示如何使用 ChatGPT 生成一段簡單的代碼，比如一個打印 "Hello, World!" 的程序。
演示如何使用 ChatGPT 生成一段復(fù)雜的代碼，比如一個排序算法的實現(xiàn)。
介紹如何調(diào)整 ChatGPT 的參數(shù)來優(yōu)化生成的代碼質(zhì)量。
演示如何優(yōu)化前面演示的代碼生成。
階段 3：Q&A 互動（10 分鐘）
與觀眾進(jìn)行問答互動環(huán)節(jié)，回答關(guān)于 ChatGPT 的任何問題。
總結(jié)（5 分鐘）
簡要總結(jié) ChatGPT 的特點和應(yīng)用場景。
感謝觀眾的收看。

于是我就得到了：

ChatGPT 編程秀設(shè)計
階段 1：介紹 ChatGPT（5 分鐘）
簡單介紹 ChatGPT 的基本原理和應(yīng)用場景。
階段 2：生成代碼（35 分鐘）
以一個例子串起來整個階段的演示，比如：使用 ChatGPT 生成一個簡單的數(shù)獨求解程序。
首先演示如何使用 ChatGPT 生成一個基本的數(shù)獨求解程序，包括生成偽代碼和相應(yīng)的 Python 代碼。
然后演示如何使用 ChatGPT 生成一個更復(fù)雜的數(shù)獨求解程序，包括優(yōu)化算法和生成相應(yīng)的代碼。
最后介紹如何調(diào)整 ChatGPT 的參數(shù)來優(yōu)化生成的代碼質(zhì)量。
注意，本階段演示的例子不一定要是數(shù)獨求解程序，可以根據(jù)需要選擇其他適合的例子。
階段 3：Q&A 互動（10 分鐘）
與觀眾進(jìn)行問答互動環(huán)節(jié)，回答關(guān)于 ChatGPT 的任何問題。
總結(jié)（5 分鐘）
簡要總結(jié) ChatGPT 的特點和應(yīng)用場景。
感謝觀眾的收看。

接下來我就可以基于數(shù)獨游戲的例子是不是合適跟他展開對話了。這種方法是不是很強大? 通過這種技巧我可以針對性的對AI給我的內(nèi)容進(jìn)行反饋。

類比AI畫圖里，也有類似的技巧，叫做inpaint。比如眾所周知，AI不擅長畫手，所以呢就有人發(fā)明了這樣的技巧

用PS涂抹一下大概的手的輪廓以表達(dá)意圖

然后在AI里用標(biāo)記工具把這個區(qū)域涂黑，并告訴他，這個區(qū)域是手

他就會基于我們涂抹的樣子畫一個手出來

這里Denoising strength設(shè)置的不夠大，所以還不夠清晰，但是可以看出這個意思。

同樣的思想我們用在編程里就是上面的那個技巧了，類似于涂抹一個手的輪廓我還用過給他偽代碼，比如在后面png_info_post_inject這個模塊，生成測試框架的時候我就用過：

根據(jù)1.json中的數(shù)據(jù)結(jié)構(gòu)，我需要把上面三個分支就可以簡化為一個分支。

    if (given.targetFile === '1.png') {
        actualResult = await readPng(path.join(__dirname, 'cases', given.targetFile));
        assert.deepStrictEqual(actualResult, then.expectedResult);
      } else if (given.targetFile === '2.png') {
        await writePng(path.join(__dirname, 'cases', given.targetFile), 'hello', then.expectedResult);
        actualResult = await readPng(path.join(__dirname, 'cases', given.targetFile));
        assert.deepStrictEqual(actualResult, then.expectedResult);
      } else if (given.targetFile === '3.png') {
        await updatePng(path.join(__dirname, 'cases', given.targetFile), 'hello', then.expectedResult);
        actualResult = await readPng(path.join(__dirname, 'cases', given.targetFile));
        assert.deepStrictEqual(actualResult, then.expectedResult);
      }

偽代碼如下：

if(given.type!=='read'){
        await png_info[given.entrypoint](given_file_path, given_params);
}
actualResult = await readPng(given_file_path);
assert.deepStrictEqual(actualResult, then.expectedResult);

這個偽代碼執(zhí)行的時候，第一次可能不讓我滿意，但是我可以根據(jù)他生成的繼續(xù)修改這段偽代碼，很快就得到了我想要的代碼。所以說，語言就是語言，編程語言也是語言，也可以用在prompt里。

到此，相信大家對“ChatGPT前端編程源碼分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！