<p>OpenAI Playgroundは、GPT-3.5を手軽に試すことができるウェブベースのインターフェースです。<br>
この記事では、OpenAI Playgroundのメリットと使い方について説明します。</p>
<h2 id="openai-playground%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#openai-playground%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> OpenAI Playgroundのメリット</h2>
<h3 id="1.-%E6%89%8B%E8%BB%BD%E3%81%ABai%E3%82%92%E8%A9%A6%E3%81%9B%E3%82%8B">
<a class="header-anchor-link" href="#1.-%E6%89%8B%E8%BB%BD%E3%81%ABai%E3%82%92%E8%A9%A6%E3%81%9B%E3%82%8B" aria-hidden="true"></a> 1. <strong>手軽にAIを試せる</strong>
</h3>
<p>OpenAI Playgroundはウェブベースのインターフェースなので、特別なソフトウェアをインストールすることなく、ブラウザから直接AIを試すことができます。しかも無料です。</p>
<h3 id="2.-%E3%82%88%E3%82%8A%E9%AB%98%E5%BA%A6%E3%81%AA%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">
<a class="header-anchor-link" href="#2.-%E3%82%88%E3%82%8A%E9%AB%98%E5%BA%A6%E3%81%AA%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" aria-hidden="true"></a> 2. <strong>より高度なカスタマイズ</strong>
</h3>
<p>ブラウザならChatGPTが使えるのに何でわざわざOpenAI Playground使うの？と思われた方もいるのではないでしょうか。<br>
実はChatGPTは一部の機能しか使えないようになってます。(※プロンプトを工夫しない限り)<br>
しかし、OpenAI Playgroundでは、GPT-3の様々な機能を利用できます。<br>
これにより、より高度なカスタマイズと柔軟性が可能です。</p>
<p>※正確にはChatGPTでもカスタマイズ機能を使うことはできるようです。(<a href="https://note.com/it_navi/n/n3d64d1a0b6eb" target="_blank" rel="nofollow noopener noreferrer">参考</a>)<br>
しかも、ChatGPTなら課金すればGPT-4を使うことができるので、人によってはChatGPTを使うべきかもしれません。<br>
しかし、私はAPIを使った開発をしていてAPIの挙動を確認するために使いたかったので、よりAPIの挙動に近いPlaygroundを使うことにしました。</p>
<h3 id="3.-%E7%9B%B4%E6%84%9F%E7%9A%84%E3%81%AA%E6%93%8D%E4%BD%9C">
<a class="header-anchor-link" href="#3.-%E7%9B%B4%E6%84%9F%E7%9A%84%E3%81%AA%E6%93%8D%E4%BD%9C" aria-hidden="true"></a> 3. <strong>直感的な操作</strong>
</h3>
<p>それってAPIを使えばいいのでは？と思われた方もいるでしょう。<br>
OpenAI Playgroudならコードをいっさい書く必要がないんです。<br>
そのため、コードを書いたことがない方やわざわざコードを書くのが面倒な方におすすめです。<br>
OpenAI Playgroundなら直感的な操作が可能で、AIに対するプロンプト（質問や指示）を入力するだけで、AIからのレスポンスを得ることができます。</p>
<h2 id="openai-playground%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#openai-playground%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> OpenAI Playgroundの使い方</h2>
<h3 id="1.-openai-playground%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9">
<a class="header-anchor-link" href="#1.-openai-playground%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" aria-hidden="true"></a> 1. <strong>OpenAI Playgroundにアクセス</strong>
</h3>
<p>まず、<a href="https://platform.openai.com/playground" target="_blank" rel="nofollow noopener noreferrer">OpenAI Playground</a>にアクセスします。</p>
<h3 id="2.-mode-chat%E3%82%92%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#2.-mode-chat%E3%82%92%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 2. <strong>Mode Chatを選択</strong>
</h3>
<p>Modeの選択肢から"Chat"を選択します。<br>
これにより、ユーザーとAIが交互にメッセージを送り合うチャット形式の対話を行うことができます。<br>
（Modeは他にも選択肢がありますが、今回はChatを使っていきます。）</p>
<h3 id="3.-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E5%85%A5%E5%8A%9B">
<a class="header-anchor-link" href="#3.-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E5%85%A5%E5%8A%9B" aria-hidden="true"></a> 3. <strong>メッセージを入力</strong>
</h3>
<p>メッセージボックスにメッセージ（質問や指示）を入力します。<br>
例えば、下記の画像では、SYSTEMに　<code>あなたは新人開発者にコードの書き方を教えることができる便利なコードアシスタントです。言語はPythonを利用してください。コードの説明はせずに、コードブロックだけを生成してください。</code> と入力し、USERに <code>ユーザーに名前を尋ねて"Hello"と挨拶をするコードを書いてください。</code> と入力しています。</p>
<h3 id="4.-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%A9%9F%E8%83%BD%E3%82%92%E5%88%A9%E7%94%A8">
<a class="header-anchor-link" href="#4.-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%A9%9F%E8%83%BD%E3%82%92%E5%88%A9%E7%94%A8" aria-hidden="true"></a> 4. <strong>カスタマイズ機能を利用</strong>
</h3>
<p>OpenAI Playgroundでは、以下のカスタマイズ機能を利用できます。</p>
<ul>
<li>
<p><strong>Temperature</strong>: AIの出力のランダム性を調整するパラメータで、値が高いほど出力はランダムになり、低いほど出力は決定論的になります。</p>
</li>
<li>
<p><strong>Maximum length</strong>: AIの出力の最大トークン数を指定します。</p>
</li>
<li>
<p><strong>Top P</strong>: AIの出力の多様性を制御するパラメータで、値が高いほど出力は多様になります。</p>
</li>
<li>
<p><strong>Frequency penalty</strong>: 頻繁に出現する単語へのペナルティを設定します。値が高いほど、頻繁に出現する単語が出力されにくくなります。</p>
</li>
<li>
<p><strong>Presence penalty</strong>: 生成されたテキストに含まれていない新しい単語へのペナルティを設定します。値が高いほど、新しい単語が出力されにくくなります。</p>
</li>
</ul>
<h3 id="5.-%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%82%92%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#5.-%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%82%92%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 5. <strong>レスポンスを確認</strong>
</h3>
<p>「Submit」ボタンをクリックすると、AIからのレスポンス(ASSISTANT)が表示されます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/40db458440f3-20230528.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 参考リンク</h2>
<p>この記事を作成する上で参考にしたURLは以下の通りです。</p>
<ul>
<li><a href="https://www.promptingguide.ai/jp/applications/coding" target="_blank" rel="nofollow noopener noreferrer">https://www.promptingguide.ai/jp/applications/coding</a></li>
<li><a href="https://community.openai.com/t/difference-between-frequency-and-presence-penalties/2777" target="_blank" rel="nofollow noopener noreferrer">https://community.openai.com/t/difference-between-frequency-and-presence-penalties/2777</a></li>
<li><a href="https://community.openai.com/t/a-better-explanation-of-top-p/2426" target="_blank" rel="nofollow noopener noreferrer">https://community.openai.com/t/a-better-explanation-of-top-p/2426https://community.openai.com/t/a-better-explanation-of-top-p/2426/</a></li>
<li><a href="https://dev.classmethod.jp/articles/openai-playground/" target="_blank" rel="nofollow noopener noreferrer">https://dev.classmethod.jp/articles/openai-playground/</a></li>
</ul>


OpenAI Playgroundのメリットと使い方まとめ

Discussion