見出し画像
Photo by mirecat

ChatGPTのレスポンス部分で動的にAPIをコールする裏技

serinuntius

この記事で画像をマークダウンで埋め込むことで、ChatGPTのレスポンスに画像を表示させることに成功していた。

動的なパスを生成してそれっぽいシーンの画像を出しているわけだけれども、ん！？？それって動的にAPIコールしてるのと同義では？？

1. プロンプトを作成する

プロンプトはどんなものでもいいけど例示としておみくじプロンプトを考えてみた。

あなたはおみくじ生成マシンです。

1. 今日あったことをユーザーに聞きます。
2. 今日あったことを元に、[運勢]と[運勢について]を変数として、今週の占いをしてあげます。
3. [運勢]という変数には大吉とか凶とかそういう役が入ります。
4. [運勢について]という変数には、今日あったことを振り返りながら、でも大丈夫、〜〜だからという口調で励ましてあげてください。そして今日のラッキーアイテムを教えてあげてください。

出力フォーマット(markdown)：

## あなたの結果は？
[運勢について]

![画像](http://localhost:3001/api/mikuji/[運勢])

2. APIを作る

何でもいいけど、ただサクッと試したいだけだったので、nextをinitして、`pages/api/mikujji/[token].ts` を作成。

// next jsのapi, ここでmikujiの結果を返す
// [token]は大吉とか末吉とかの文字列

import { NextApiRequest, NextApiResponse } from 'next'// next jsのapi, ここでmikujiの結果を返す
// [token]は大吉とか末吉とかの文字列

import { NextApiRequest, NextApiResponse } from 'next'

const mikuji = (params: string) => `<svg width="207" height="440" viewBox="0 0 207 440" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="207" height="440" fill="white"/>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="36" letter-spacing="0em"><tspan x="30" y="68.0909">&#x304a;&#x307f;&#x304f;&#x3058;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="36" letter-spacing="0em"><tspan x="67" y="220.091">&#x904b;&#x52e2;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="36" letter-spacing="0em"><tspan x="67" y="396.091">${params}</tspan></text>
</svg>
`
export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { token } = req.query
    // headerにcontent-typeを指定しないとsvgが表示されない
    res.setHeader('Content-Type', 'image/svg+xml').status(200).send(mikuji(token as string));
}

今回は特に何もしてないけど、これは本当にAPIリクエストが発生するので、以下のようなことができる。

  • DBにデータを保存

    • どういうプロンプトが呼び出されたかとかも保存できちゃいそう

  • 動的に組み立てた新鮮なデータを返したりもできる

    • 例えばChatGPTとかは明日の天気とか、時事ネタに弱いのでそういった補い方もできる

    • スポーツの結果とかも大丈夫になるか

3. プロンプトを試す

ぜひ動画で見てみてほしい！


動的APIコールは正直なんでもできる気しかしない

まだしょうもないことしかしてないけど、今後この研究が流行れば色々できるようになる。

今後このハックで必要になるパーツを列挙しておく。

  • 文字から画像を生成するAPI的なやつ

    •  SVGにテキスト渡して、文字列で返してくれるだけでありがたい

    •  これがあるとAPIはJSON返すだけで良くなる

  • JSONをクエリ文字列でゴニョゴニョできるオンラインjq的なやつ

  • 認証して別サイトでクレカ紐付けて、プロンプトごとに課金するためのサービス

この予想は当たるので作ってみるといい。


シェアしていただけるだけでも励みになります！