生成AI（ChatGPT等）のAPIをPHPで利用
目次
■ AI Web音声チャット（ChatGPT）
AI Web音声チャット使用方法
AI Web音声チャットは、AI技術を活用した対話型のウェブチャットプラットフォームです。 このシステムを使用することで、ユーザーは自然言語で質問を投げかけ、リアルタイムでAIからの応答を受け取ることができます。 以下に、AI Web音声チャットの基本的な使用方法を説明します。
ステップ1: ウェブサイトにアクセス
AI Web音声チャットを利用するためには、まずチャットシステムがインストールされているウェブサイトまたはアプリケーションにアクセスします。 ブラウザを開き、チャットシステムが運用されているURLに移動してください。
ステップ2: チャット開始
ウェブサイトにアクセスすると、チャットインターフェースが表示されます。
ここでは、テキスト入力欄や「テキスト送信」ボタン、会話履歴が表示されるエリアなどがあります。
まず「ベースファイルを選択」します。AI独自のデータに加え、選択したファイル内容を優先した知識をベースとして、会話を楽しむことができます。
ベースファイルを選択しない場合にも、AIが独自に蓄積している情報をベースとした会話ができます。
Webチャットページ例（このページ）
ステップ3: 質問の入力
テキスト入力欄に、AIに尋ねたい質問やコメントを入力します。 質問は自然言語で記述でき、特別なコマンドやコードを知る必要はありません。
ステップ4: 送信と応答の受取
質問を入力したら、「テキスト送信」ボタンをクリックまたはタップします。 すると、質問はサーバーに送信され、AIが処理を行った後、応答がチャット画面に表示されます。 「音声読み上げ有効」にチェックを入れると、応答が音声で読み上げられます。 「英語翻訳」にチェックを入れると、英語に翻訳された応答が戻ります。
ステップ5: 音声入力の利用
AI Web音声チャットでは、テキスト入力に加えて音声入力をサポートしています。 音声入力を利用するには、「音声入力開始」ボタンをクリックしてから、マイクに向かって質問を話します。 質問は自動的にテキストに変換され、AIに送信されます。 音声入力を終了するときは「音声入力停止」ボタンを押してください。 （入力には制限時間が設けてあります。制限を超えると自動で停止します） 音声入力による場合も、「音声読み上げ有効」、「英語翻訳」機能は有効です。
ステップ6: 音声の開始、ストップ
「発声スタート」「音声ストップ」ボタンにより、音声を操作できます。
ステップ7: テキストのコピー
「テキストコピー」をクリックすると、応答エリアのテキストをクリップボードにコピーすることができます。 エディタソフトに貼り付けるなどして使用できます。 「メール問合せ」をクリックすると、本文に応答エリアの内容がセットされた状態でメールソフトが起動します。
ステップ8: チャットの初期化
「チャットを初期化」をクリックすると、応答履歴がクリアされて初期状態に戻ります。
このAI Web音声チャットを利用することで、ユーザーはいつでもどこでもAIとの対話を楽しむことができます。 質問に対する瞬時の回答を得ることができるため、情報検索や学習、研修、エンターテインメントとして幅広く活用できます。
AI Web音声チャット概要
このAI Web音声チャットは、ユーザーがウェブインターフェースを通じて自然言語で質問を入力し、JavaScriptを介してサーバーに送信されます。 PHPを中心にしたサーバーサイドでは、OpenAIのChatGPTなどの外部APIに問い合わせを行い、AIによるリアルタイム応答を生成します。 応答はJavaScriptを通じてユーザーに表示され、対話型のプラットフォームを実現します。 システムはHTML、CSS、JavaScriptで構成されるフロントエンド、サーバーサイドの処理、外部APIの活用という三つの主要コンポーネントから成り立ちます。 HTTPSとCSRFトークンを用いたセキュリティ対策により、通信の安全性とデータ保護を確保します。 ログファイルによる監視を行いながら、新時代のコミュニケーションツールとして、セキュリティとプライバシーを最優先に考慮したユーザーフレンドリーな体験を提供します。
フロントエンドの役割と機能
フロントエンドはユーザーが直接対話するインターフェイス部分です。 HTMLで基本的な構造を定義し、CSSで見た目やスタイルを調整します。 JavaScriptはユーザーの操作に応じて動的な処理を行い、サーバーとの非同期通信を管理します。 これにより、ページの再読み込みなしにスムーズなユーザーエクスペリエンスを提供します。
HTML
ユーザーが質問を入力するテキストボックス、送信ボタン、チャット履歴を表示する領域など、基本的なUI要素を定義します。
- テキスト入力フィールド
ユーザーが質問やメッセージを入力するためのテキストボックスです。 - 送信ボタン
入力されたテキストをサーバーに送信するためのボタンです。 - チャット表示エリア
過去の質問とそれに対する回答が表示されるエリアです。新しいメッセージが送信されると、このエリアに動的に追加されます。 - 音声入力ボタン
ユーザーが音声入力を開始するためのボタンです。音声認識機能によって、ユーザーの声がテキストに変換されます。
CSS
レスポンシブデザインにより、さまざまなデバイスに対応した見た目を実現します。 色彩、レイアウト、フォントなどのスタイリングを通じて、使いやすいインターフェイスを設計します。
- レイアウト
テキスト入力フィールド、送信ボタン、チャット表示エリアなどの配置を定義します。 - デザイン
背景色、テキストの色やフォント、ボタンのスタイルなどを定義し、アプリケーションの見た目をカスタマイズします。 - レスポンシブデザイン
異なるデバイス（デスクトップ、タブレット、スマートフォンなど）でウェブページが適切に表示されるようにします。 例えば、小さい画面ではチャット表示エリアを大きく表示し、大きい画面ではより多くの情報を表示できるようにレイアウトを調整します。
JavaScript
ユーザーからの入力を受け取り、サーバーに送信します。サーバーからの応答を受け取り、チャット履歴に表示します。 また、音声入力や音声出力などの高度な機能もJavaScriptを通じて実現します。 以下の技術を組み合わせることで、ユーザーはリアルタイムでチャットができるインタラクティブなウェブアプリケーションを利用できるようになります。
- 非同期通信 (AJAX)
ユーザーが送信ボタンをクリックしたときに、ページをリロードすることなくサーバーにデータを送信し、応答を受け取ります。 - DOM操作
サーバーから応答が返ってきたときに、チャット表示エリアに新しいメッセージを追加します。 - イベントハンドリング
ユーザーの操作（テキスト入力、ボタンクリック、音声入力の開始など）に応じて、適切な処理を行います。
サーバーサイドの処理
サーバーサイドでは、PHPスクリプトがユーザーからのリクエストを受け取り、適切な処理を行った後に応答を返します。 この処理には、ChatGPTへの問い合わせ、音声データのテキスト変換、テキストからの音声生成などが含まれます。
chat.php
ユーザーからの質問を受け取り、ChatGPTへ問い合わせを行い、得られた応答をユーザーに返します。
「chat.php」はチャットシステムの核となるファイルです。 ユーザーからの入力（テキスト質問）を受け取り、OpenAIのAPIを利用してChatGPTにその質問を送信します。 その後、ChatGPTからの応答を受け取り、JSON形式でクライアント（ユーザーのブラウザ）に返します。 このプロセスにより、ユーザーは自然言語で会話ができるようになり、あたかも人間とチャットしているかのような体験を得ることができます。
text.php
音声データを受け取り、音声認識サービスを使用してテキストに変換し、その結果をユーザーに返します。
「text.php」は音声認識を担うファイルです。 ユーザーがウェブアプリケーションに音声データをアップロードすると、このファイルがその音声データを受け取ります。 その後、Speech-to-text APIなどの音声認識サービスを使用して、音声データをテキストに変換します。 変換されたテキストは、クライアントにJSON形式で返されます。 これにより、ユーザーは音声入力を通じてチャットシステムと対話することが可能になります。
speech.php
テキストデータを受け取り、音声合成サービスを使用して音声ファイルを生成し、そのURLをユーザーに返します。
「speech.php」はテキストを音声に変換する役割を持つファイルです。 このファイルは、「chat.php」からのテキスト応答や、任意のテキスト入力を受け取り、Text-to-speech APIなどの音声合成サービスを使用して音声データに変換します。 生成された音声データのURLは、クライアントにJSON形式で送信されます。 ユーザーはこのURLを使用して、ブラウザ上で直接音声応答を聞くことができます。 これにより、視覚障害があるユーザーや、画面を見ることができない状況でのユーザーでも、チャットシステムを利用することが可能になります。
これらのPHPファイルは、ユーザーからの入力（テキストや音声）を受け取り、それに応じた処理（テキストへの変換、ChatGPTへの問い合わせ、音声への変換）を行い、適切な形式で応答を返すことによって、インタラクティブなチャットを実現しています。
外部APIの活用
システムは、OpenAI APIなどのAPIを活用しています。 これにより、AIによる質問応答、音声認識、音声合成といった複雑な処理を実現しています。 外部APIはウェブチャットシステムの重要な構成要素であり、ユーザーインタラクションの質と効率を大幅に向上させます。
OpenAI API
ユーザーからの質問に対してAIが応答を生成します。
OpenAIのAPIを利用したChatGPTは、自然言語処理技術を活用して、ユーザーからの質問やコメントに対してリアルタイムで応答を生成します。 このサービスは、広範なトピックにわたる質問に対応可能であり、その応答は人間が行ったものと見分けがつかないほど自然です。 ChatGPTを利用することで、チャットシステムはよりインタラクティブで、ユーザーフレンドリーな体験を提供できます。 APIはHTTPSリクエストを通じて利用され、セキュアな通信を保証しながら、サーバーサイドの「chat.php」ファイルからクエリを送信し、応答を受け取ります。
音声認識サービス
ユーザーの音声入力をテキストに変換します。
音声認識サービスは、ユーザーが提供する音声ファイルをテキストに変換します。 このプロセスは、「text.php」ファイルで扱われ、Speech-to-text APIや他の音声認識サービスを通じて実現されます。 音声認識技術の進歩により、さまざまな言語やアクセントに対応可能であり、高い認識精度を実現しています。 これにより、ユーザーはキーボードを使わずにチャットシステムと対話できるため、アクセシビリティが向上します。
音声合成サービス
テキストを人の声に近い音声に変換し、ユーザーに提供します。
音声合成サービスは、テキストを音声に変換する機能を提供します。 このサービスは、「speech.php」ファイルで利用され、Text-to-speech APIなどの音声合成技術を用いて実施されます。 音声合成サービスは、自然な発音とイントネーションを持つ音声を生成でき、さまざまな言語や声の種類を選択できます。 これにより、チャットシステムはテキストベースの応答を音声出力に変換し、ユーザーが聞くことができる形式で提供できます。 特に、視覚障害のあるユーザーや、画面を見ることができない状況にあるユーザーにとって、この機能は非常に有用です。
これらの外部APIを組み合わせることにより、AI Web音声チャットはテキストと音声の両方でのインタラクションをサポートし、幅広いユーザーにアクセス可能な、リッチなコミュニケーションプラットフォームを提供します。
セキュリティ対策
セキュリティ対策は、ウェブチャットシステムの安全性と信頼性を確保するために欠かせない要素です。 システムの安全性を保証するため、CSRFトークンを使用してフォーム送信の正当性を検証し、HTTPSを利用してデータの暗号化を行っています。 これにより、ユーザーのデータとプライバシーを保護します。
CSRFトークン (Cross-Site Request Forgery Token)
クロスサイトリクエストフォージェリ（CSRF）攻撃は、ユーザーがログイン状態のウェブアプリケーションに対して、意図しない操作（例えば、設定の変更、パスワードの変更など）を強制させる攻撃方法です。
CSRFトークンは、この種の攻撃を防ぐために用いられます。
CSRFトークンは、サーバーによって生成され、フォームとともにクライアント（ブラウザ）に送信されます。
ユーザーがフォームを送信する際に、このトークンも一緒にサーバーへ送られます。
サーバーは受け取ったトークンを検証し、一致する場合のみリクエストを処理します。
これにより、攻撃者がユーザーになりすまして不正なリクエストを送信することを防ぎます。
ウェブチャットシステムでは、ログイン処理やメッセージ送信フォームなど、ユーザーからの入力を必要とする全ての場面でCSRFトークンを使用しています。
これにより、ユーザーのセッションを乗っ取ることなく、安全な通信が保証されます。
HTTPS (Hyper Text Transfer Protocol Secure)
HTTPSは、ウェブ通信のセキュリティを確保するためのプロトコルです。
HTTPにSSL（Secure Socket Layer）またはTLS（Transport Layer Security）の暗号化層を追加することで、データの完全性と機密性を保護します。
これにより、クライアントとサーバー間の全ての通信が暗号化され、第三者によるデータの傍受や改ざんを防ぎます。
ウェブチャットシステムでは、ユーザーからの入力データやチャットの応答など、送受信される全ての情報をHTTPSを通じて安全に処理しています。
特に、個人情報や機密性の高い情報が扱われる場合、HTTPSによる保護は不可欠です。
これらのセキュリティ対策を適切に実装することで、ウェブチャットシステムはユーザーに安全な使用環境を提供し、信頼性の高いサービスを実現します。
データストレージとログファイル
ログファイルはシステムの運用に関する重要な情報を記録します。 パスワード変更、APIの使用状況、アクセス試行などのログを保存し、監査やデバッグ、セキュリティ監視に活用します。
ログファイルの内容
パスワード変更ログ
ユーザーによるパスワード変更操作の記録。変更が試行された時刻、成功または失敗の結果、変更を試みたユーザーの識別情報（例: ユーザー名、IPアドレス）が含まれます。 このログを通じて、不正なパスワード変更試みを追跡し、アカウントのセキュリティを強化します。
API使用状況ログ
外部API（例: OpenAI API）へのリクエスト詳細の記録。 リクエストの時刻、APIの種類、リクエスト内容、応答のステータスコードや処理時間などが記録されます。 これにより、APIの使用状況を分析し、システムの効率性やコスト管理に寄与します。
アクセスログ
システムへのアクセス試行に関する情報。 アクセス時刻、アクセス元のIPアドレス、アクセスしたリソースのURL、HTTPステータスコードなどを記録します。 アクセスログを分析することで、ユーザーの行動パターンを理解し、不正アクセスの試みを検出することが可能です。
ログファイルの管理とセキュリティ
ログファイルは、システムの運用にとって貴重な情報源ですが、機密情報を含む可能性があるため、適切な管理とセキュリティ対策が必要です。 ログファイルのアクセス権限を厳格に管理し、不正アクセスや改ざんを防ぐために、ログファイルは暗号化して保存することが推奨されます。 また、ログの定期的なレビューと分析を行い、システムのセキュリティ状態を継続的に監視します。
ログファイルを適切に管理することで、システムの透明性を確保し、信頼性の高いウェブチャットサービスを提供することができます。
AI Web音声チャットコントロールパネル
コントロールパネルは、「init.php」、「login.php」、「manage.php」というPHPファイルで構成されており、管理者がシステムの設定を行ったり、ナレッジベースファイルを管理したりするためのインターフェースを提供します。 これらのファイルは、セキュリティ対策を施しながら、システムの柔軟な運用とメンテナンスを可能にします。
init.php
「init.php」はシステムの初期設定を行うファイルです。 セッションの開始、コンテンツセキュリティポリシーの設定、CSRF（クロスサイトリクエストフォージェリ）トークンの生成と検証など、安全なウェブアプリケーション運用に必要な基本的な機能を含んでいます。 このファイルを通じて、管理者はパスワードを設定または変更することができ、システムの安全性を確保します。パスワード間違いを重ねると、一定時間アクセスがロックされます。
login.php
「login.php」はコントロールパネルへのログインページを提供します。 管理者がパスワードを入力してログインすることで、管理機能へのアクセスが可能になります。 セッション情報の初期化、CSRFトークンの生成、ログイン試行の記録など、セキュリティと利便性を考慮した設計がなされています。 ログイン試行には制限があり、一定回数以上ログインに失敗すると、アカウントは一時的にロックされることで不正アクセスのリスクを低減します。
manage.php
「manage.php」は管理者がシステムの各種設定を行うためのメインのコントロールパネルです。 ナレッジベースファイルのアップロード・削除、APIの利用設定の変更、トークン使用量のモニタリングなど、システム運用に必要な様々な機能が集約されています。 また、ログオフ機能を通じてセッションを安全に終了させることができます。 ファイルのアップロードには、ファイルサイズやタイプの制限があり、セキュリティを考慮した検証が行われた後に処理が実行されます。 設定変更時には、新しい設定が適切に反映されるよう、CSRFトークンを用いた安全なフォーム送信が行われます。
これらの管理機能を通じて、AI Web音声チャットの管理者はシステムの状態を確認し、必要に応じて設定を調整することができます。 使い方は直感的で、コントロールパネル上の指示に従って操作することで簡単にシステムの管理が可能です。 セキュリティ対策が施された安全な環境の下で、システムのパフォーマンスを最適化し、ユーザーに高品質なチャットサービスを提供するための基盤を整えることができます。
導入方法
AI Web音声チャットの導入に必要な手順は以下の通りです：
システムファイル設置
- ファイル一式を（HTML、CSS、JavaScript、PHP）を取得し解凍してご利用ください。（ファイルご希望の方はこちらからご連絡ください）
- initial_password.phpファイルをエディタで開き、
return password_hash('独自パスワード', PASSWORD_DEFAULT);
の「独自パスワード」を12桁以上の英数大文字小文字を含む複雑な語句に変更して保存してください。
初回ログイン時、パスワード忘れ時の初期パスワードとなります。 - OpenAI（or その他）のAPIキーをkey.phpファイルに設定してください。エディタでファイルを開いて、
define('OPENAI_API_KEY', 'sk-bFsyd3fGuS...................');
の「sk-**************」をご自身のAPIキーで書き換えてください。
※OpenAIのAPIキーは、OpenAIのサイトから取得してください。 - 以下のHTMLコードを、チャットウインドウを表示させたいご自身のページに挿入してください。
チャットウインドウのソースコードは、当ページのソースコード内下部
<!--- Chat用コードは、ここから --!>
～
<!-- ここまで --->
- 編集したファイル一式を、ご自身のウェブサーバーにアップロードしてください。
設置場所は以下のシステム構成例を参照して、サーバー上の所定の場所にFTPでアップロードしてください。
システム設定ファイルなどの重要なファイルは、必ずウェブからアクセスできない場所に置いてください。
コントロールパネルへのアクセス
- コントロールパネル初期化画面: https://あなたのドメイン/file/init.php
上記手順でinitial_password.phpファイル内に記入したパスワードを上段に、下段にコントロールパネル用の新しいパスワードを入力して「送信」してください。 - コントロールパネルログイン画面: https://あなたのドメイン/file/login.php
上記初期化画面で決定した新しいパスワードで「ログイン」してください。ログインできない場合は、再度初期化画面からやり直してください。
コントロールパネル操作マニュアル
Web AIチャットシステムのコントロールパネルは、システム管理者がナレッジベースファイルを管理したり、システム設定を更新したりするためのインターフェースを提供します。 以下は、コントロールパネルの操作方法についての詳細なマニュアルです。
コントロールパネルへのアクセス
- ログイン
コントロールパネルにアクセスするには、初めにログインが必要です。適切なユーザー名とパスワードを使用してログインしてください。
https://あなたのドメイン/file/login.php
認証に成功すると、コントロールパネルにリダイレクトされます。
ナレッジベースファイルの管理
ナレッジベースファイルは、チャットボットが情報を引き出すための基盤となるデータで、ユーザーが作成した文字コードUTF-8によるテキストデータです。（ファインチューニングを行ったものではありません）
- ファイルのアップロード
・「ファイルを選択」ボタンをクリックして、アップロードしたいファイルを選択します。
・ファイルに対して簡潔な説明を「説明」フィールドに入力します。
・「アップロード」ボタンをクリックしてファイルをアップロードします。
・アップロードが成功すると、下部のテーブルにファイルが表示されます。
・ファイルの文字コードはutf-8としてください。
・ファイル内の文字数は30,000字程度以内としてください。 - ファイルの削除
・各ファイル行の「削除」ボタンをクリックして、不要なファイルを削除します。
・削除を確認するためのポップアップが表示されるので、「OK」を選択して削除を完了します。
※ファインチューニング
ファインチューニングは、事前に訓練されたニューラルネットワークモデルを、特定のタスクやデータセットに適応させるプロセスです。
通常、大規模なデータセットで事前に訓練されたモデルをベースにし、目的のタスクに合わせてモデルの一部を微調整します。
これにより、少ないデータで高いパフォーマンスを実現でき、特定のタスクに特化したモデルを作成できます。
大きなファイルを扱うには、ファインチューニングの利用を考慮する必要があります。
システム設定の管理
システムの動作に関わる様々な設定をカスタマイズできます。
- GPTモデルの選択
・使用するGPTモデルをドロップダウンリストから選択します。 - 最大トークン数の設定
・応答に使用する最大トークン数を選択します。 - 温度の設定
・応答の多様性を制御するための「温度」を設定します。 - TTS（テキスト・トゥ・スピーチ）設定
・使用するTTSモデルと声の種類を選択します。 - 設定の更新
・変更後、画面下部の「設定を更新」ボタンをクリックして設定を保存します。
※システム設定項目の内容は、OpenAI等によって随時変更されます。 変更は「manage.php」ファイル内を直接修正することで対応してください。（今後のバージョンでは、管理画面からの変更を可能とする予定）
セッションの終了
- ログオフ
・画面下部にある「ログオフ」ボタンをクリックすることで、安全にセッションを終了し、ログインページに戻ります。
トークン使用量の確認
- トークン使用量の表示
・特定の月を選択して「表示」ボタンをクリックすると、その月の参考トークン使用量が表示されます。 ・テキストベースのトークンのみ表示対象で、音声データは表示の対象外です。音声データなどについては、OpenAIのサイトで確認してください。
これらの操作を通じて、システムの日々の運用やメンテナンスを効率的に行うことができます。各機能は直感的に配置されており、初めてのユーザーでも容易に操作が可能です。
システム構成例
以下のディレクトリ構成を参考にしてください：
/home/aibots/ （ウェブからアクセスできない場所）
+- apifile
+- config.php （GPTモデル、MAXトークン、TTSモデル等）
+- initial_password.php （初期パスワード）
+- key.php （OpenAIのAPIキー等）
+- token_usage.log （トークン使用数ログ）*
+- knowledge
+- *************.txt （アップロードされたナレッジファイル）*
+- log
+- security.log （ログイン失敗のログ）*
+- s2tvoice
+- *************.txt （音声データのテキスト化データ）*
+- audio_*******.wav （音声データ）*
+- tokenusage
+- token_usage.log （トークン使用ログ）*
/html/aibots/ （ウェブからアクセスできる場所）
+- css
+- styles.css （スタイルシート）
+- file
+- init.php （チャットシステム初期化プログラム）
+- login.php （ログインプログラム）
+- manage.php （チャットシステムコントロールパネル）
+- style.css （チャットウインドウのスタイルシート）
+- img
+- *************.png （画像ファイル）
+- js
+- script.js （JavaScriptファイル）
+- mapping
+- fileDescriptions.json（ナレッジファイルマッピング）*
+- voice
+- .htaccess （管理ファイル）
+- audio_*****.mp3 （テキストを音声化したファイル）*
+- .htaccess （管理ファイル）
+- chat.php （メインチャットプログラム）
+- index.html （チャット表示元htmlファイル）
+- loadfile.php （ナレッジベースファイル一覧出力プログラム）
+- speech.php （テキストを音声に変換するプログラム）
+- text.php （音声データをテキストに変換するプログラム）
「*」印は、自動作成ファイルです。上記のディレクトリ構成と、各ファイル内のパス指定は、ご自身のサーバーに合わせて変更してください。
詳細な設定やカスタマイズ方法については、各ファイルのコメントやChatGPTのドキュメントを参照してください。
- 当サイトから提供されるファイルの利用に際しては、自己の責任において行ってください。
- 提供されるファイルの内容や使用方法に関して、当サイトは一切の責任を負いかねます。
- 提供されるファイルが正確・安全であることや特定の目的に適していることを保証するものではありません。
- ファイルの利用に関する全てのリスクは、ユーザー自身が負うものとします。
- ファイルの利用によって生じたいかなる損害や問題に対しても、当サイトは責任を負いかねます。
- ファイルの利用にあたっては、ユーザー自身が適切な注意と判断を行い、必要に応じて専門家に相談することをお勧めします。
- AIの回答にはハルシネーション（AIが現実とは異なる情報を提供する）といわれる現象がありますことをご理解の上、利用してください。