ホームページ テクノロジー周辺機器 AI TS が AI と出会うと何が起こるでしょうか?

TS が AI と出会うと何が起こるでしょうか?

Jun 27, 2023 pm 09:51 PM
AI 道具

人工知能は現在日々発展しており、大規模な言語モデルはますます強力になっています。 AIツールを活用することで作業効率が大幅に向上し、数文字入力してTabキーを押すだけで自動でコードが完成します。

TS が AI と出会うと何が起こるでしょうか?

コード補完に加えて、AI を利用して関数を自動化し、必要な JSON データを返すこともできます。

最初に例を見てみましょう:

// index.tsinterface Height {meters: number;feet: number;}interface Mountain {name: string;height: Height;}// @ts-ignore// @magicasync function getHighestMountain(): Promise<mountain> {// Return the highest mountain}(async () => {console.log(await getHighestMountain());})();</mountain>
ログイン後にコピー

上記のコードでは、getHighestMountain 非同期関数を定義して、最も高い山を取得します。ピーク情報、その戻り値は、Mountain インターフェースで定義されたデータ構造です。関数内に特定の実装はありません。関数が何を行う必要があるかをコメントを通じて記述するだけです。

上記のコードをコンパイルして実行すると、コンソールは次の結果を出力します:

{ name: 'Mount Everest', height: { meters: 8848, feet: 29029 } }
ログイン後にコピー

世界で一番高い山はエベレストですヒマラヤ山脈の主峰は標高8848.86メートルで世界最高峰でもありますね。

次に、getHighestMountain 関数の秘密を明らかにします。

getHighestMountain 非同期関数内で何が行われているかを理解するために、コンパイルされた JS コードを見てみましょう。上記のコードを参照してください。@jumploops/magic ライブラリの fetchCompletion 関数が getHighestMountain 関数内で呼び出されます。

この関数のパラメータから、前の TS 関数の関数アノテーションが表示され、さらに、スキーマ属性を含むオブジェクトも表示されます。この属性の値は、Mountain インターフェイスに対応する JSON スキーマ オブジェクトです。

次に、@jumploops/magic ライブラリの fetchCompletion 関数の分析に焦点を当てます。関数は fetchCompletion.ts ファイルで定義され、その内部処理フローは 3 つのステップに分かれています

#Chat Completions API を組み立てるのに必要なヒント;

  • Chat Completions API を呼び出して応答結果を取得します。
  • #応答結果を解析し、JSON スキーマを使用して応答オブジェクトを確認します。
  • const { fetchCompletion } = require("@jumploops/magic");// @ts-ignore// @magicfunction 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#\"}"});});}
    ログイン後にコピー
  • プロンプトでは、AI のロールを設定し、AI が有効な JSON 形式を返すようにガイドするためのサンプルをいくつか準備しました。
Chat Completions API を呼び出して応答結果を取得し、openai ライブラリによって提供される createChatCompletion API を直接使用します。

応答結果を取得した後、validateAPIResponse 関数を呼び出して応答オブジェクトを検証します。この関数の実装も比較的簡単です。 ajv ライブラリは、JSON スキーマに基づいたオブジェクト検証を実装するために内部で使用されます。

// fetchCompletion.tsexport 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);}
ログイン後にコピー

次に分析したいのは、TS コードを fetchCompletion 関数を呼び出す JS コードにコンパイルする方法です。

ttypescript ライブラリは @jumploops/magic によって内部的に使用され、tsconfig.json ファイルでカスタム コンバータを構成できるようにします。

トランスフォーマーの内部では、typescript によって提供される API が AST の解析と操作、および目的のコードの生成に使用されます。この文は次のように書き換えることができます: トランスフォーマー内部の主要な処理フローを構成する 3 つのステップがあります。

// @magicannotation を含む AI 関数のソース コードをスキャンします。 ;

    AI 関数の戻り値の型に応じて、対応する JSON Schema オブジェクトを生成します;
  • #AI 関数のアノテーションを抽出します。 AI関数本体とfetchCompletion関数コードを生成します。
  • #この記事の焦点は、TypeScript コンパイラによって生成された AST オブジェクトの操作ではありません。興味がある場合は、@jumploops/magic プロジェクトのtransformer.ts ファイルをお読みください。 AI 機能を実際に体験したい場合は、この記事の例にある package.json と tsconfig.json の構成を参照してください。

package.json

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;}
ログイン後にコピー

tsconfig.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"}}
ログイン後にコピー
チャット完了 API は、常に期待される形式で有効な JSON オブジェクトを返すとは限らないため、実際には適切な例外処理ロジックを追加する必要があることに注意してください。

現在、@jumploops/magic ライブラリは関数パラメーターの設定をサポートしておらず、簡単な例のみを提供しています。この部分については、Marvin ライブラリの人工知能機能に関するドキュメントを参照してください。

大規模言語モデルが要件に従って構造化データを制御可能に出力できるかどうか。そうすれば、いろいろなことができるようになります。

現在、多くのローコード プラットフォームまたは RPA (ロボティック プロセス オートメーション) プラットフォームは、対応する JSON スキーマ オブジェクトを取得できます。

@jumploops/magic のソリューションを使用すると、ローコード プラットフォームや RPA プラットフォームをよりスマートにすることができます。たとえば、フォーム ページをすばやく作成したり、さまざまなタスクを自然言語で投稿したりできます。

最後に、@jumploops/magic ライブラリの背後にある作業をまとめましょう。このライブラリは TypeScript コンバータを使用して関数の戻り値の型を取得し、その型を JSON スキーマ オブジェクトに変換して、 // @magic アノテーション 次に、ソース コード関数の本体がチャット完了 API を呼び出し、JSON スキーマに対して応答を検証します。

今日の記事はこれで終わります。お役に立てば幸いです。

以上がTS が AI と出会うと何が起こるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

Avue-Crudの行編集モードでセルのOnblurイベントを手動でトリガーする方法は? Avue-Crudの行編集モードでセルのOnblurイベントを手動でトリガーする方法は? Apr 04, 2025 pm 02:00 PM

AvueコンポーネントライブラリでAvue-Crudの行編集を実装するOnblurイベントは、Avue-Crudコンポーネントを手動でトリガーします。便利なインライン編集機能を提供しますが、時にはする必要があります...

ブラウザ埋め込みスクリプトを使用して、Webページ要素の操作と数値計算を自動化する方法は? ブラウザ埋め込みスクリプトを使用して、Webページ要素の操作と数値計算を自動化する方法は? Apr 04, 2025 pm 12:09 PM

Webページの自動化と数値計算:ブラウザー埋め込みスクリプトに基づく実装この記事では、ブラウザ組み込みスクリプトを使用してWebページ要素の操作と数字を実装する方法を探ります。

AIツールを使用して、React Viteプロジェクトでフォアグラウンドページをすばやく構築するにはどうすればよいですか? AIツールを使用して、React Viteプロジェクトでフォアグラウンドページをすばやく構築するにはどうすればよいですか? Apr 04, 2025 pm 01:45 PM

バックエンド開発でフロントエンドページをすばやく構築する方法は? 3年または4年の経験を持つバックエンド開発者として、彼は基本的なJavaScript、CSS、HTMLを習得しました...

Chrome DevtoolsでリクエストされたCookieを効果的に変更および再生する方法は? Chrome DevtoolsでリクエストされたCookieを効果的に変更および再生する方法は? Apr 04, 2025 pm 05:48 PM

Chromeを使用してChromedevtoolsでリクエストされたCookieを効果的に変更および再生する方法...

NPMの代わりにPNPMでReactアプリケーションを作成する方法は? NPMの代わりにPNPMでReactアプリケーションを作成する方法は? Apr 04, 2025 pm 06:45 PM

NPMの代わりにPNPMを使用して、NPXを使用してReactアプリケーションを作成することについて...

グラデーションの背景を持つカードとクーポンのレイアウトに対するギャップ効果を達成する方法は? グラデーションの背景を持つカードとクーポンのレイアウトに対するギャップ効果を達成する方法は? Apr 05, 2025 am 07:48 AM

カードクーポンレイアウトのギャップ効果を実現します。カードクーポンレイアウトを設計するとき、特に背景が勾配である場合、カードクーポンにギャップを追加する必要があることがよくあります...

JavaScriptプラグインを使用して、ページ固定と要素の独立した動きの効果を実現する方法は? JavaScriptプラグインを使用して、ページ固定と要素の独立した動きの効果を実現する方法は? Apr 04, 2025 pm 12:51 PM

Webデザインの独立して移動するスクロールバーと要素のページの修正効果を実装すると、特別な効果を達成する必要がある場合があります。つまり、スクロールバーがスクロールするときに...

See all articles