文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

当TS遇上AI,会发生什么?

2024-11-30 12:30

关注

除了代码补全之外,我们还可以让AI帮助我们自动化功能并返回所需的JSON数据。

先让我们看一个例子:

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


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


// @ts-ignore
// @magic
async function getHighestMountain(): Promise {
  // 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步:

// 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个步骤:

本文的重点不在于如何解析和操作 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前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯