OpenAI


<p>Open AIのAPI（一部）の料金をまとめました。</p>



<p>参考のために日本円は「1ドル150円」で換算をしています。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#Text_generation">Text generation: テキスト生成</a></li><li><a href="#Assistants_API_API">Assistants API: アシスタントAPI</a></li><li><a href="#Image_models">Image models: 画像生成</a></li><li><a href="#Audio_models">Audio models: 音声認識・音声合成</a></li></ul></div>
<h2><span id="Text_generation">Text generation: テキスト生成</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>モデル</th><th>Input</th><th>Output</th></tr></thead><tbody><tr><td>gpt-4-1106-preview</td><td><strong>$0.01 / 1,000トークン</strong><br>(1.5円 / 1,000トークン)</td><td><strong>$0.03 / 1,000トークン</strong><br>(4.5円 / 1,000トークン)</td></tr><tr><td>gpt-4</td><td><strong>$0.03 / 1,000<strong>トークン</strong></strong><br>(4.5円 / 1,000トークン)</td><td><strong>$0.06 / 1,000<strong>トークン</strong></strong><br>(9円 / 1,000トークン)</td></tr><tr><td>gpt-4-32k</td><td><strong>$0.06 / 1,000トークン</strong><br>(9円 / 1,000トークン)</td><td><strong>$0.12 / 1,000トークン</strong><br>(18円 / 1,000トークン)</td></tr><tr><td>gpt-3.5-turbo-1106</td><td><strong>$0.0010 / 1,000トークン</strong><br>(0.15円 / 1,000トークン)</td><td><strong>$0.0020 / 1,000トークン</strong><br>(0.3円 / 1,000トークン)</td></tr><tr><td>gpt-3.5-turbo-instruct</td><td><strong>$0.0015 / 1,000トークン</strong><br>(0.225円 / 1,000トークン)</td><td><strong>$0.0020 / 1,000トークン</strong><br>(0.3円 / 1,000トークン)</td></tr></tbody></table></figure>



<h2><span id="Assistants_API_API">Assistants API: アシスタントAPI</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>Tool</th><th>Input</th></tr></thead><tbody><tr><td>Code interpreter</td><td><strong>$0.03 / session</strong><br>(4.5円 / セッション)</td></tr><tr><td>Retrieval</td><td><strong>$0.20 / GB / assistant / day</strong><br>(30円 / GB)</td></tr></tbody></table></figure>



<h2><span id="Image_models">Image models: 画像生成</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>Model</th><th>Resolution</th><th>Price</th></tr></thead><tbody><tr><td>DALL·E 3</td><td>1024×1024</td><td><strong>$0.040 / 1枚</strong><br>(6円 / 1枚)</td></tr><tr><td>DALL·E 3</td><td>1024×1792<br>1792×1024</td><td><strong>$0.080 / 1枚</strong><br>(12円 / 1枚)</td></tr><tr><td>DALL·E 3 (HD)</td><td>1024×1024</td><td><strong>$0.080 / 1枚</strong><br>(12円 / 1枚)</td></tr><tr><td>DALL·E 3 (HD)</td><td>1024×1792<br>1792×1024</td><td><strong>$0.12 / 1枚</strong><br>(18円 / 1枚)</td></tr><tr><td>DALL·E 2</td><td>1024×1024</td><td><strong>$0.020 / 1枚</strong><br>(3円 / 1枚)</td></tr><tr><td>DALL·E 2</td><td>512×512</td><td><strong>$0.018 / 1枚</strong><br>(2.7円 / 1枚)</td></tr><tr><td>DALL·E 2</td><td>256×256</td><td><strong>$0.016 / 1枚</strong><br>(2.4円 / 1枚)</td></tr></tbody></table></figure>



<h2><span id="Audio_models">Audio models: 音声認識・音声合成</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>Model</th><th>Usage</th></tr></thead><tbody><tr><td>Whisper</td><td><strong>$0.006 / 分</strong><br>(0.9円 / 分)</td></tr><tr><td>TTS</td><td><strong>$0.015 / 1,000文字</strong><br>(2.25円 / 1,000文字)</td></tr><tr><td>TTS HD</td><td><strong>$0.030 / 1,000文字</strong><br>(4.5円 / 1,000文字)</td></tr></tbody></table></figure>


【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど


<p>Open AIの<strong>「Assistants API」</strong>をNext.jsで使用する時の基本的なコードをまとめました。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#Open_AIAPI">Open AIのAPIセットアップ</a></li><li><a href="#i">基本の使い方</a><ul><li><a href="#Threads">Threads: スレッドを作る</a></li><li><a href="#Assistants">Assistants: アシスタントを作る</a></li><li><a href="#Messages">Messages: 送るメッセージを設定する</a></li><li><a href="#Runs">Runs: アシスタントによるメッセージ応答を生成する</a></li><li><a href="#Runs_Messages">Runs &amp; Messages: 生成されたメッセージを取得する</a></li></ul></li><li><a href="#i-2">追加機能</a><ul><li><a href="#1_Data_Retrieval">1) Data Retrieval: アシスタントがファイルを参照して回答する</a></li><li><a href="#2_Code_Interpreter">2) Code Interpreter: アシスタントがコードを生成&amp;実行する</a></li><li><a href="#3_Function_Calling">3) Function Calling: アシスタントが自作の関数を実行する</a></li></ul></li></ul></div>
<h2><span id="Open_AIAPI">Open AIのAPIセットアップ</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>const openai = new OpenAI({apiKey: YOUR_OPENAI_API_KEY});</code></pre></div>



<h2><span id="i">基本の使い方</span></h2>



<h3><span id="Threads">Threads: スレッドを作る</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>// スレッドを作成する ================
const emptyThread = await openai.beta.threads.create();

console.log(emptyThread.id);
// thread_abc123</code></pre></div>



<p><a href="https://platform.openai.com/docs/api-reference/threads/createThread">https://platform.openai.com/docs/api-reference/threads/createThread</a></p>



<h3><span id="Assistants">Assistants: アシスタントを作る</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>// アシスタントのロール設定・指示文を作成する ================
const INSTRUCTIONS = &quot;あなたは数学の家庭教師です。質問をされたら、質問に答えてください。&quot;;

// アシスタントを作成する ================
const myAssistant = await openai.beta.assistants.create({
    model: &quot;gpt-4-1106-preview&quot;, // アシスタントのモデル
    instructions: INSTRUCTIONS,  // アシスタントへの指示文
    tools: [],                   // アシスタントが使うツール （retrieval,code_interpreter,function）
});

console.log(myAssistant.id);
// asst_abc123</code></pre></div>



<p><a href="https://platform.openai.com/docs/api-reference/assistants/createAssistant">https://platform.openai.com/docs/api-reference/assistants/createAssistant</a></p>



<h3><span id="Messages">Messages: 送るメッセージを設定する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>const THREAD_ID = &quot;thread_abc123&quot;;
const MESSAGE_CONTENT = &quot;方程式 `3x + 11 = 14` を解きたい。助けてくれますか？&quot;;

// スレッドにメッセージを追加する ================
const threadMessages = await openai.beta.threads.messages.create(
    THREAD_ID,                                 // スレッドを指定
    { role: &quot;user&quot;, content: MESSAGE_CONTENT } // メッセージ内容
);</code></pre></div>



<p><a href="https://platform.openai.com/docs/api-reference/messages/createMessage">https://platform.openai.com/docs/api-reference/messages/createMessage</a></p>



<h3><span id="Runs">Runs: アシスタントによるメッセージ応答を生成する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>const THREAD_ID = &quot;thread_abc123&quot;;
const ASSISTANT_ID = &quot;asst_abc123&quot;;

// スレッドでアシスタントの回答を生成する ================
const run = await openai.beta.threads.runs.create(
    THREAD_ID,                                 // スレッドを指定
    { assistant_id: ASSISTANT_ID }             // アシスタントを指定
);

console.log(run.id);
// run_abc123</code></pre></div>



<p><a href="https://platform.openai.com/docs/api-reference/runs/createRun">https://platform.openai.com/docs/api-reference/runs/createRun</a></p>



<h3><span id="Runs_Messages">Runs &amp; Messages: 生成されたメッセージを取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>const THREAD_ID = &quot;thread_abc123&quot;;
const RUN_ID = &quot;run_abc123&quot;;

// Runのステータス確認 ================
async function waitOnRun(run_id: string, thread_id: string): Promise&lt;any&gt; {
    const startTime = Date.now();
    while (run.status === &quot;queued&quot; || run.status === &quot;in_progress&quot;) {
        if (Date.now() - startTime &gt; 300000) {          // タイムアウトの設定
            throw new Error(&quot;Timeout exceeded&quot;);
        }

        run = await client.beta.threads.runs.retrieve({
            thread_id: thread_id,
            run_id: run_id
        });
        await new Promise(resolve =&gt; setTimeout(resolve, 500));
    }
    return run;
};

waitOnRun(RUN_ID, THREAD_ID)


// アシスタントの生成したメッセージを取得する ================
const threadMessages = await openai.beta.threads.messages.list(THREAD_ID); // スレッドのメッセージを取得
const newMessage = threadMessages.data[0].content.text.value;              // 最新のメッセージ</code></pre></div>



<h2><span id="i-2">追加機能</span></h2>



<p>各機能は、<strong>アシスタント作成時</strong>に設定します。</p>



<h3><span id="1_Data_Retrieval">1) Data Retrieval: アシスタントがファイルを参照して回答する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>// ファイルをアップロードする ================
const file = await openai.files.create({
    file: fs.createReadStream(YOUR_FILE),
    purpose: &quot;assistants&quot;,
});

// ファイルを参照するよう設定する ================
const assistant = await openai.beta.assistants.create({
    instructions: &quot;あなたはカスタマーサポートのチャットボットです。ナレッジベースを活用して、顧客からの問い合わせに最適な対応をしましょう。&quot;,
    model: &quot;gpt-4-1106-preview&quot;,
    tools: [{&quot;type&quot;: &quot;retrieval&quot;}],
    file_ids: [file.id]
});</code></pre></div>



<ul>
<li>最大ファイルサイズ: 「<strong>512MB/1ファイル</strong>」（<a href="https://platform.openai.com/docs/assistants/tools/uploading-files-for-retrieval">※参考1</a>）</li>



<li>Assistant: 「最大20ファイル,または最大合計100GB」（<a href="https://platform.openai.com/docs/api-reference/messages/object#messages/object-file_ids">※参考1</a>、<a href="https://platform.openai.com/docs/api-reference/files/create">※参考2</a>）</li>



<li>Message: 「最大10ファイル」（<a href="https://platform.openai.com/docs/api-reference/messages/object#messages/object-file_ids">※参考1</a>）</li>
</ul>



<h3><span id="2_Code_Interpreter">2) Code Interpreter: アシスタントがコードを生成&amp;実行する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>// コードを生成&実行するよう設定する ================
const assistant = await openai.beta.assistants.create({
    instructions: &quot;あなたは数学の家庭教師です。数学の質問をされたら、その質問に答えるコードを書いて実行します。&quot;,
    model: &quot;gpt-4-1106-preview&quot;,
    tools: [{&quot;type&quot;: &quot;code_interpreter&quot;}]
});</code></pre></div>



<h3><span id="3_Function_Calling">3) Function Calling: アシスタントが自作の関数を実行する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>// 使用する関数を指定する ================
const assistant = await openai.beta.assistants.create({
    instructions: &quot;あなたは天気ボットです。提供された機能を使って質問に答えてください。&quot;,
    model: &quot;gpt-4-1106-preview&quot;,            // 使用するモデルの指定: gpt-4-1106-preview
    tools: [{
        &quot;type&quot;: &quot;function&quot;,                 // ツールのタイプ: function
        &quot;function&quot;: {
            &quot;name&quot;: &quot;getCurrentWeather&quot;,    // 関数名
            &quot;description&quot;: &quot;場所の天気を取得&quot;, // 関数の説明
            &quot;parameters&quot;: {                 // 関数のパラメータ
                &quot;type&quot;: &quot;object&quot;,           // 関数のパラメータ: タイプ
                &quot;properties&quot;: {             // 関数のパラメータ: 一覧
                    &quot;location&quot;: {&quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;都市と州 例：サンフランシスコ、CA&quot;}, // パラメータ1
                    &quot;unit&quot;: {&quot;type&quot;: &quot;string&quot;, &quot;enum&quot;: [&quot;c&quot;, &quot;f&quot;]}                                 // パラメータ2
                },
                &quot;required&quot;: [&quot;location&quot;]    // 必須パラメータ
            }
        }
    }, {
        &quot;type&quot;: &quot;function&quot;,                 // ツールのタイプ: function
        &quot;function&quot;: {
            &quot;name&quot;: &quot;getNickname&quot;,          // 関数名
            &quot;description&quot;: &quot;都市の愛称を取得&quot;, // 関数の説明
            &quot;parameters&quot;: {                 // 関数のパラメータ
                &quot;type&quot;: &quot;object&quot;,           // 関数のパラメータ: タイプ
                &quot;properties&quot;: {             // 関数のパラメータ: 一覧
                    &quot;location&quot;: {&quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;都市と州 例：サンフランシスコ、CA&quot;}  // パラメータ1
                },
                &quot;required&quot;: [&quot;location&quot;]    // 必須パラメータ
            }
        }
    }]
});</code></pre></div>



<p></p>



<ul class="references">
<li><a href="https://platform.openai.com/docs/assistants/overview">Assistants overview &#8211; OpenAI API</a></li>



<li><a href="https://platform.openai.com/docs/api-reference/assistants">API Reference &#8211; OpenAI API</a></li>



<li><a href="https://cookbook.openai.com/examples/assistants_api_overview_python">Assistants API Overview (Python SDK) | OpenAI Cookbook</a></li>
</ul>


【Next.js】Assistants APIの基本的なコードまとめ。


<p>今回は、<strong>Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法</strong>を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデプロイする場合）</p>



<p>「Assistants APIでファイルを参照して回答生成する機能（Knowledge Retrieval）」を使うために調べて実装しました。</p>



<ul>
<li>今回の目標: <strong>「ブラウザで指定したファイルを、Open AIのFilesにアップロードしたい」</strong></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">最終的なコード</a><ul><li><a href="#1">コード1: ファイルをアップロードするコンポーネント</a></li><li><a href="#2_API_Route">コード2: API Route</a></li></ul></li><li><a href="#i-2">実装するまでの過程</a><ul><li><a href="#1_Open_AI">実装1: クライアントサイド→Open AI</a></li><li><a href="#2_API_RouteOpen_AI">実装2: クライアントサイド→API Route→Open AI</a></li><li><a href="#3_Firebase_StorageAPI_RouteOpen_AI">実装3: クライアントサイド→Firebase Storage→API Route→Open AI</a></li><li><a href="#4_Firebase_StorageAPI_RouteVercelOpen_AI">実装4: クライアントサイド→Firebase Storage→API Route→Vercel→Open AI</a></li><li><a href="#Firebase_Storage">Firebase Storageの初期化</a></li><li><a href="#Firebase_StorageCORS">Firebase StorageのCORS設定</a></li></ul></li><li><a href="#i-3">まとめ</a></li></ul></div>
<h2><span id="i">最終的なコード</span></h2>



<p>最終的に、<strong>「外部ストレージ（Firebase Storage）」</strong>と<strong>「Vercelの一時的なストレージ（/tmp）」</strong>などを使って実装しました。</p>



<ol>
<li>クライアントサイドで、入力ファイルを「Firebase Storage」に保存する</li>



<li>クライアントサイドから、「API Route」を使用する（ファイルの保存先URLを渡す）</li>



<li>API Routeで、保存先URLからファイルをダウンロード、Vercel上に一時保存する</li>



<li>API Routeで、Vercel上のファイルをOpenAIのAPIにアップロードする</li>
</ol>



<h3><span id="1">コード1: ファイルをアップロードするコンポーネント</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="FileUpload.tsx" data-lang="TSX"><code>&quot;use client&quot;;

import React from &quot;react&quot;;
import { storage } from &quot;@/lib/firebase/firebaseConfig&quot;;
import { deleteObject, getDownloadURL, ref, uploadBytes } from &quot;firebase/storage&quot;;


export default function FileUpload() {

    const [file, setFile] = React.useState&lt;File|null&gt;(null);

    // File Change ====================================================
    const handleFileChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
        const files = e.target.files;
        if (files) {setFile(files[0]);}
    };

    // File Upload ====================================================
    const handleFileUpload = async () =&gt; {
        if (!file) return;
        const storageRef = ref(storage, &#39;uploads/&#39; + file.name);  // Firebase Storageの参照パスを作成
        const snapshot = await uploadBytes(storageRef, file);     // Firebase Storageにファイルをアップロード
        const downloadUrl = await getDownloadURL(snapshot.ref);   // Firebase StorageからダウンロードURLを取得
        await fetch(&#39;/api/open-ai/files/create&#39;, {                // OpenAIにファイルをアップロード
            method: &#39;POST&#39;,
            body: JSON.stringify({ downloadUrl, file.name })
        });
        await deleteObject(storageRef);                           // Firebase Storageからファイルを削除
    };


    return (
        &lt;div&gt;
            &lt;input type=&quot;file&quot; onChange={handleFileChange}/&gt;
            &lt;button onClick={handleFileUpload}&gt;UPLOAD FILE&lt;/button&gt;
        &lt;/div&gt;
    );
}</code></pre></div>



<h3><span id="2_API_Route">コード2: API Route</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="/api/open-ai/files/create/route.ts" data-lang="TypeScript"><code>import OpenAI from &quot;openai&quot;;
import { NextRequest } from &#39;next/server&#39;;
import axios from &#39;axios&#39;;
import fs from &#39;fs&#39;;
import path from &#39;path&#39;;


export async function POST(request: NextRequest) {
    const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
    const { fileUrl, fileName } = await request.json(); // Body取得: 『messages』『response_format』

    // ファイルを一時的に保存するパス
    const tempFilePath = path.join(&#39;/tmp&#39;, fileName);

    try {

        // ファイルのダウンロード
        const responseFile = await axios({
            method: &#39;GET&#39;,
            url: fileUrl,
            responseType: &#39;stream&#39;
        });
        // ファイルの保存
        responseFile.data.pipe(fs.createWriteStream(tempFilePath));

        // ファイルの保存が完了するまで待機
        await new Promise((resolve, reject) =&gt; {
            responseFile.data.on(&#39;end&#39;, resolve);
            responseFile.data.on(&#39;error&#39;, reject);
        });

        // ファイルをOpenAIにアップロード
        const response = await openai.files.create({
            purpose: &#39;assistants&#39;,
            file: fs.createReadStream(tempFilePath)
        });
        fs.unlinkSync(tempFilePath);  // ファイルを削除（一時保存フォルダから削除）
        return Response.json(response);
    } catch (error) {
        fs.unlinkSync(tempFilePath);  // ファイルを削除（一時保存フォルダから削除）
        return Response.json({ error: &#39;File upload failed&#39; });
    }
}</code></pre></div>



<h2><span id="i-2">実装するまでの過程</span></h2>



<h3><span id="1_Open_AI">実装1: クライアントサイド→Open AI</span></h3>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1-1024x576.png" alt="" class="wp-image-4074" width="512" height="288" srcset="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-1.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>クライアントサイドからOpen AIのAPIで、そのままアップロードする実装をしました。</p>



<p>この実装の問題点として、クライアントサイドでOpen AIのAPIを使用すると、「<strong>APIキーが閲覧できてしまう問題</strong>」がありました。</p>



<p>対策として、<strong>「API Routeによりサーバーサイドでファイルをアップロードする」</strong>処理にしました。</p>



<h3><span id="2_API_RouteOpen_AI">実装2: クライアントサイド→API Route→Open AI</span></h3>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2-1024x576.png" alt="" class="wp-image-4076" width="512" height="288" srcset="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-2.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>クライアントサイドからAPI Routeにファイルを渡し、API RouteからOpen AIにアップロードする実装にしました。</p>



<p>この実装の問題点として、クライアントサイド→API Routeへのファイルの受け渡しサイズ制限により<strong>「大きいサイズのファイルが対応できない問題」</strong>がありました。（PDFファイルなどはできない）</p>



<p>対策として、<strong>「一度外部ストレージ（Firebase Storage）に保存して、そのファイルをAPI Routeから読み取る」</strong>という形にしました。</p>



<h3><span id="3_Firebase_StorageAPI_RouteOpen_AI">実装3: クライアントサイド→Firebase Storage→API Route→Open AI</span></h3>



<p>一度外部ストレージ（Firebase Storage）に保存して、そのファイルをAPI Routeから読み取る実装にしました。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3-1024x576.png" alt="" class="wp-image-4078" width="512" height="288" srcset="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-3.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>この実装の課題点として、<strong>「”ファイルの保存先URL（Firebase Storageのパス）”から、&#8221;Open AIのAPI（Upload file）でアップロード可能な形式&#8221;に変換する処理が必要」</strong>でした。</p>



<p>対策として、<strong>「Firebase Storageの保存先URLからファイルをダウンロードし、それをVercelの一時的なストレージとして利用できる/tmpディレクトリに保存、そのファイルを読み取りOpen AIにアップロードする」</strong>という形にしました。</p>



<h3><span id="4_Firebase_StorageAPI_RouteVercelOpen_AI">実装4: クライアントサイド→Firebase Storage→API Route→Vercel→Open AI</span></h3>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4-1024x576.png" alt="" class="wp-image-4077" width="512" height="288" srcset="https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2023/11/画像作成-4.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>最終的になかなか複雑になってしまいましたが、動くようになりました。</p>



<p>おまけ</p>



<h3><span id="Firebase_Storage">Firebase Storageの初期化</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="firebaseConfig.ts" data-lang="TypeScript"><code>import { initializeApp, getApps } from &quot;firebase/app&quot;;
import { getStorage } from &quot;firebase/storage&quot;;


const firebaseConfig = {
    // TODO:認証情報を設置
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

if (!getApps()?.length) {
    initializeApp(firebaseConfig); // Firebaseアプリの初期化
}
export const storage = getStorage();</code></pre></div>



<h3><span id="Firebase_StorageCORS">Firebase StorageのCORS設定</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-json" data-file="cors.json" data-lang="JSON"><code>[
  {
    &quot;origin&quot;: [&quot;https://example.vercel.app&quot;],
    &quot;responseHeader&quot;: [&quot;Content-Type&quot;],
    &quot;method&quot;: [&quot;GET&quot;, &quot;POST&quot;, &quot;PUT&quot;, &quot;DELETE&quot;, &quot;HEAD&quot;],
    &quot;maxAgeSeconds&quot;: 3600
  }
]</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ gcloud auth login
$ gsutil cors set [CORS設定ファイルのパス] gs://[あなたのFirebase Storageバケット名]
$ gsutil cors get gs://the-ailab.appspot.com</code></pre></div>



<h2><span id="i-3">まとめ</span></h2>



<p>Open AIのその他のAPIは、「API Route」や「Server Action」を使うことで比較的楽に実装できたのですが、今回のファイルのアップロードだけ少し複雑になってしまいました。</p>



<p>一応動く状態になったので、Assistants APIなどのファイル参照などに使っていきたいと思います。</p>


「OpenAI」の記事一覧