TypeChat 用一句話概括，就是用了它你可以讓大語言模型（比如 ChatGPT）將自然語言轉換成特定類型的 JSON 數據。

我們在使用 ChatGPT 的時候，大致流程如下：

假如我們需要 ChatGPT 按照我們輸入的 prompt，輸出指定格式的 JSON 數據，我們在 prompt 里將我們的要求描述清楚就行，比如

好像沒什么問題，很聽話。

我們再看一個例子

{
    "filters": [
        {
            "component": "select",
            "key": "店鋪名稱",
            "label": "店鋪名稱",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "key": "店鋪編碼",
            "label": "店鋪編碼",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "key": "店鋪門頭編碼",
            "label": "店鋪門頭編碼",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "key": "所在區域",
            "label": "所在區域",
            "placeholder": "全部"
        }
    ],
    "columns": [
        {
            "slot": false,
            "title": "店鋪編碼",
            "dataIndex": "店鋪編碼",
            "key": "店鋪編碼"
        },
        {
            "slot": false,
            "title": "店鋪名稱",
            "dataIndex": "店鋪名稱",
            "key": "店鋪名稱"
        },
        {
            "slot": false,
            "title": "店鋪業務范圍",
            "dataIndex": "店鋪業務范圍",
            "key": "店鋪業務范圍"
        },
        {
            "slot": false,
            "title": "店鋪類型",
            "dataIndex": "店鋪類型",
            "key": "店鋪類型"
        },
        {
            "slot": false,
            "title": "所在區域",
            "dataIndex": "所在區域",
            "key": "所在區域"
        },
        {
            "slot": false,
            "title": "詳細地址",
            "dataIndex": "詳細地址",
            "key": "詳細地址"
        }
    ],
    "pagination": {
        "show": true,
        "page": "page",
        "size": "size",
        "total": "result.total"
    },
    "includeModifyModal": false,
    "fetchName": "fetchTableList",
    "result": "[\"result\"][\"records\"]",
    "serviceName": "getTableList"
}

我們需要 ChatGPT 把上面 JSON 數據中 filters 字段中的 key 字段的值翻譯為英文，使用駝峰語法。columns 字段中的 key、dataIndex 字段的值翻譯為英文，使用駝峰語法。

我們的 prompt 可以這么寫：

{
    "filters": [
        {
            "component": "select",
            "key": "店鋪名稱",
            "label": "店鋪名稱",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "key": "店鋪編碼",
            "label": "店鋪編碼",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "key": "店鋪門頭編碼",
            "label": "店鋪門頭編碼",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "key": "所在區域",
            "label": "所在區域",
            "placeholder": "全部"
        }
    ],
    "columns": [
        {
            "slot": false,
            "title": "店鋪編碼",
            "dataIndex": "店鋪編碼",
            "key": "店鋪編碼"
        },
        {
            "slot": false,
            "title": "店鋪名稱",
            "dataIndex": "店鋪名稱",
            "key": "店鋪名稱"
        },
        {
            "slot": false,
            "title": "店鋪業務范圍",
            "dataIndex": "店鋪業務范圍",
            "key": "店鋪業務范圍"
        },
        {
            "slot": false,
            "title": "店鋪類型",
            "dataIndex": "店鋪類型",
            "key": "店鋪類型"
        },
        {
            "slot": false,
            "title": "所在區域",
            "dataIndex": "所在區域",
            "key": "所在區域"
        },
        {
            "slot": false,
            "title": "詳細地址",
            "dataIndex": "詳細地址",
            "key": "詳細地址"
        }
    ],
    "pagination": {
        "show": true,
        "page": "page",
        "size": "size",
        "total": "result.total"
    },
    "includeModifyModal": false,
    "fetchName": "fetchTableList",
    "result": "[\"result\"][\"records\"]",
    "serviceName": "getTableList"
}
將這段 json 中，filters 字段中的 key 字段的值翻譯為英文，使用駝峰語法，label、placeholder 字段的值保留中文。
columns 字段中的 key、dataIndex 字段的值翻譯為英文，使用駝峰語法，title 字段的值保留中文。 
返回翻譯后的 markdown 語法的代碼塊

最后面的那段話已經經過了幾次修改，我們看下 ChatGPT 返回的內容：

{
    "filters": [
        {
            "component": "select",
            "storeName": "店鋪名稱",
            "label": "店鋪名稱",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "storeCode": "店鋪編碼",
            "label": "店鋪編碼",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "storeDoorCode": "店鋪門頭編碼",
            "label": "店鋪門頭編碼",
            "placeholder": "請輸入"
        },
        {
            "component": "select",
            "area": "所在區域",
            "label": "所在區域",
            "placeholder": "全部"
        }
    ],
    "columns": [
        {
            "slot": false,
            "title": "店鋪編碼",
            "storeCode": "店鋪編碼",
            "key": "storeCode"
        },
        {
            "slot": false,
            "title": "店鋪名稱",
            "storeName": "店鋪名稱",
            "key": "storeName"
        },
        {
            "slot": false,
            "title": "店鋪業務范圍",
            "storeBusinessScope": "店鋪業務范圍",
            "key": "storeBusinessScope"
        },
        {
            "slot": false,
            "title": "店鋪類型",
            "storeType": "店鋪類型",
            "key": "storeType"
        },
        {
            "slot": false,
            "title": "所在區域",
            "area": "所在區域",
            "key": "area"
        },
        {
            "slot": false,
            "title": "詳細地址",
            "detailedAddress": "詳細地址",
            "key": "detailedAddress"
        }
    ],
    "pagination": {
        "show": true,
        "page": "page",
        "size": "size",
        "total": "result.total"
    },
    "includeModifyModal": false,
    "fetchName": "fetchTableList",
    "result": "[\"result\"][\"records\"]",
    "serviceName": "getTableList"
}

filters 里的 key 字段哪去了？columns 里 dataIndex 字段哪去了？

這只是我遇到的各種情況里的一種，當然也有成功的，反正就是很玄學，可能是我半年 prompt 練習生的水平不夠吧。

如果我們用 TypeChat 會怎么樣呢？

直接看效果 :

完美。

TypeChat 的大致原理如下：

其實就是在 prompt 拼上了一個 TS 類型，要求 ChatGPT 按照 TS 類型聲明輸出 JSON。背后還會構建一個 TS 程序去進行校驗，如果校驗失敗就把錯誤信息也加到 prompt 里，讓 ChatGPT 再處理一次。

上面生成的 prompt 跟 TypeChat 生成的有些區別，我并沒有直接使用 TypeChat，為了方便在我的項目里使用就抄了一份進行修改，在生成 prompt 的里加上了 “按照字段的注釋進行處理” 這一要求。修改后的代碼: https://github.com/lowcode-scaffold/lowcode-materials/blob/master/share/TypeChatSlim/index.ts

在 TS 類型的字段注釋里還可以加入更離譜的東西來要求 ChatGPT 去處理，比如之前弄的一個根據聊天記錄生成日程安排的小 demo，在字段注釋里加上當前時間，讓 ChatGPT 根據會話內容推算出具體的日期。TS 類型定義如下：

const res = await translate({
    schema: `export type SchedulType = {
              /**
               * 時間，格式：YYYY-MM-DD HH:mm:ss，當前時間為 ${new Date().toLocaleString()}，請推算出正確的時間
               */
              time: string;
              /**
               * 活動主題
               */
              todo: string;
              /**
               * 地點
               */
              addr: string;
              /**
               * 活動的全體參與人
               */
              participant: string[];
            };`,
    typeName: 'SchedulType',
    request: `根據下面的聊天記錄，生成日程安排：${message.data}`,
    createChatCompletion: createChatCompletionForScript,
    showWebview: true,
  });

聊天記錄中只說到了周六下午兩點，ChatGPT 根據字段注釋里的當前時間正確推算出了日程的具體日期。

受到 TypeChat 的啟發，借助 JSON Schema 實現了一個 JSONSchemaChat，原理差不多，效果如下：

總結

以上是生活随笔為你收集整理的TypeChat、JSONSchemaChat实战 - 让ChatGPT更听你的话的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。