當TS遇上AI，會發生什么？

作者：佚名 2023-06-27 16:53:50

人工智能現在每天都在發展，大型語言模型變得越來越強大。工作中使用AI工具幫忙，將大大提高了工作效率，只需敲幾個字符，按Tab鍵，代碼就智能完成。

除了代碼補全之外，我們還可以讓AI幫助我們自動化功能并返回所需的JSON數據。

先讓我們看一個例子：

// index.ts
interface Height {
  meters: number;
  feet: number;
}


interface Mountain {
  name: string;
  height: Height;
}


// @ts-ignore
// @magic
async function getHighestMountain(): Promise<Mountain> {
  // Return the highest mountain
}


(async () => {
  console.log(await getHighestMountain());
})();

在上面的代碼中，我們定義了一個 getHighestMountain 異步函數來獲取世界上最高峰的信息，它的返回值是 Mountain 接口定義的數據結構。函數內部沒有具體的實現，我們只是通過注釋描述函數需要做什么。

編譯并執行上述代碼后，控制臺會輸出如下結果：

{ name: 'Mount Everest', height: { meters: 8848, feet: 29029 } }

世界最高的山峰是珠穆朗瑪峰，它是喜馬拉雅山脈的主峰，也是世界最高峰，海拔8848.86米，是不是很神奇？

接下來我就來揭秘getHighestMountain函數的秘密。

為了了解 getHighestMountain 異步函數內部做了什么，我們看一下編譯后的 JS 代碼：

const { fetchCompletion } = require("@jumploops/magic");


// @ts-ignore
// @magic
function getHighestMountain() {
    return __awaiter(this, void 0, void 0, function* () {
        return yield fetchCompletion("{\n  // Return the highest mountain\n}", {
            schema: "{\"type\":\"object\",\"properties\":{\"name\":{\"type\":\"string\"},\"height\":{\"$ref\":\"#/definitions/Height\"}},\"required\":[\"height\",\"name\"],\"definitions\":{\"Height\":{\"type\":\"object\",\"properties\":{\"meters\":{\"type\":\"number\"},\"feet\":{\"type\":\"number\"}},\"required\":[\"feet\",\"meters\"]}},\"$schema\":\"http://json-schema.org/draft-07/schema#\"}"
        });
    });
}

從上面的代碼可以看出，@jumploops/magic 庫中的 fetchCompletion 函數在 getHighestMountain 函數內部被調用。

從這個函數的參數中，我們看到了之前TS函數的函數注釋，此外，我們還看到了一個包含schema屬性的對象。該屬性的值為Mountain接口對應的JSON Schema對象。

接下來我們重點分析@jumploops/magic庫中的fetchCompletion函數。該函數定義在fetchCompletion.ts文件中，其內部處理流程分為3步：

組裝 Chat Completions API 所需的提示；
調用Chat Completions API獲取響應結果；
解析響應結果并使用 JSON 模式驗證響應對象。

// fetchCompletion.ts
export async function fetchCompletion(
  existingFunction: string, 
  { schema }: { schema: any }) {
  let completion;


  // (1)
  const prompt = `
    You are a robotic assistant. Your only language is code. You only respond with valid JSON. Nothing but JSON. 
 For example, if you're planning to return:
      { "list": [ { "name": "Alice" }, { "name": "Bob" }, { "name": "Carol"}] } 
    Instead just return:
      [ { "name": "Alice" }, { "name": "Bob" }, { "name": "Carol"}]
    ...


    Prompt: ${existingFunction.replace('{', '')
     .replace('}', '').replace('//', '').replace('\n', '')}


    JSON Schema: 
    \`\`\`
      ${JSON.stringify(JSON.parse(schema), null, 2)}
    \`\`\`
  `;




  // (2)
  try {
    completion = await openai.createChatCompletion({
      model: process.env.OPENAI_MODEL ?
       process.env.OPENAI_MODEL : 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
    });
  } catch (err) {
    console.error(err);
    return;
  }


  const response = JSON.parse(completion.data.choices[0].message.content);


  // (3)
  if (!validateAPIResponse(response, JSON.parse(schema))) {
    throw new Error("Invalid JSON response from LLM");
  }


  return JSON.parse(completion.data.choices[0].message.content);
}

在Prompt中，我們為AI設置了角色，并為它準備了一些例子來引導它返回有效的JSON格式。

調用Chat Completions API獲取響應結果，直接使用openai庫提供的createChatCompletion API。

解析得到響應結果后，會調用validateAPIResponse函數對響應對象進行驗證。這個功能的實現也比較簡單。內部使用ajv庫實現基于JSON Schema的對象校驗。

export function validateAPIResponse(
  apiResponse: any, schema: object): boolean {
  const ajvInstance = new Ajv();
  ajvFormats(ajvInstance);
  const validate = ajvInstance.compile(schema);
  const isValid = validate(apiResponse);


  if (!isValid) {
    console.log("Validation errors:", validate.errors);
  }


  return isValid;
}

接下來我們要分析的是如何將TS代碼編譯成調用fetchCompletion函數的JS代碼。

ttypescript 庫在@jumploops/magic 內部使用，它允許我們在 tsconfig.json 文件中配置自定義轉換器。

在transformer內部，是typescript提供的API，用于解析和操作AST，生成想要的代碼。transformer內部的主要處理流程也可以分為3個步驟：

掃描包含 // @magicannotation; 的 AI 函數的源代碼；
根據AI函數的返回值類型生成對應的JSON Schema對象；
從AI函數體中提取函數注解，生成調用fetchCompletion函數的代碼。

本文的重點不在于如何解析和操作 TypeScript 編譯器生成的 AST 對象。如果你有興趣，可以閱讀@jumploops/magic 項目中的transformer.ts 文件。如果您想親自體驗AI功能，可以參考本文示例中package.json和tsconfig.json的配置。

package.json

{
  "name": "magic",
  "scripts": {
    "start": "ttsc && cross-env OPENAI_API_KEY=sk-*** node src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@jumploops/magic": "^0.0.6",
    "cross-env": "^7.0.3",
    "ts-patch": "^3.0.0",
    "ttypescript": "^1.5.15",
    "typescript": "4.8.2"
  }
}

tsconfig.json文件

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true,
    "plugins": [{ "transform": "@jumploops/magic" }]
  },
  "include": ["src/**/*.ts"],
  "exclude": [ "node_modules"],
}

請注意，聊天完成 API 并不總是以我們期望的格式返回有效的 JSON 對象，因此您在實踐中需要添加適當的異常處理邏輯。

目前@jumploops/magic庫只提供了簡單的示例，尚不支持設置函數的參數。對于這一部分，您可以閱讀 Marvin 庫中有關 AI Functions 的文檔。

如果大語言模型能夠按照我們的要求可控地輸出結構化數據。那么我們可以做很多事情。

目前很多低代碼平臺或者RPA（Robotic Process Automation）平臺都可以獲取對應的JSON Schema對象。

借助 @jumploops/magic 的解決方案，我們可以使低代碼平臺或 RPA 平臺變得更加智能。例如，快速創建表單頁面或以自然語言的形式發布各種任務。

最后，我們來總結一下 @jumploops/magic 庫背后的工作，它使用 TypeScript 轉換器獲取函數的返回類型，將類型轉換為 JSON Schema 對象，然后替換包含 // @magic 注釋函數的源代碼函數的主體，然后調用聊天完成 API 并根據 JSON 架構驗證響應。

到這里，今天的這篇文章內容就結束了，希望對你有所幫助。

責任編輯：華軒來源： web前端開發

人工智能工具