OpenAIのAPIを使ってPHPのフォームから送信とレスポンスを表示する。（5）

  • Published
  • Author 田端厚賢
  • Categories IT

jsを外部ファイル化する。

外部ファイル化するためには、以下の手順で進めます：

  1. 外部JavaScriptファイルを作成する:
    新しいテキストファイルを作成し、拡張子を.jsとします。例えば、custom-scripts.jsという名前で保存します。
  2. JavaScriptコードを外部ファイルに移動する:
    あなたが提供した<script>タグ内のコードをこの新しいファイルにコピーします。
  3. HTMLファイルから外部JavaScriptファイルを参照する:
    HTMLファイル内で、<script src="path/to/custom-scripts.js"></script>を使って外部JavaScriptファイルを読み込みます。src属性の値には、外部ファイルへの相対パスまたは絶対パスを指定します。

custom-scripts.js

// 文章を変数として定義
const text1 = `以下のケーススタディにおける問題点と解決策を表にまとめて。

＜ケーススタディ＞
A社は自社の基幹システムを刷新するため、ITベンダーのB社にシステム開発を依頼しました。A社はB社に対して要件定義書と設計書を私、3か月後に納品を依頼しました。
しかし、3か月後にB社から納品されたシステムはA社の要件定義書や設計書とは異なる仕様となっていました。A社はB社に対して仕様の相違点を指摘・修正を依頼しました。
その後B社はA社からの指摘事項を修正し、再びシステムを納品しました。しかし今度はA社の要件定義書や設計書にはない機能が追加されていました。A社はB社に対して追加された機能を削除するよう依頼しました。
B社はA社からの依頼通り、追加した機能を削除し、システムを再び納品しました。しかし今度はA社の要件定義書や設計書に記載されている機能が一部実装されていませんでした。A社はB社に対し要件定義書や設計書に記載されている機能を全て実装するよう依頼しました。

このようなやりとりが続き、結果としてA社が想定していたスケジュールは後ろ倒しを余儀なくされ、B社に対するA社の信頼も失われてしまいました。`; // バックティックを使用
const text2 = 'ここに文章2の内容';
const text3 = 'ここに文章3の内容';
const text4 = 'ここに文章4の内容';

// ボタンがクリックされたときの関数（個別に定義）
function insertText1() {
    document.getElementById("question").value = text1;
}
function insertText2() {
    document.getElementById("question").value = text2;
}
function insertText3() {
    document.getElementById("question").value = text3;
}
function insertText4() {
    document.getElementById("question").value = text4;
}

HTMLファイルでの参照

HTMLファイル内で外部ファイルを読み込むには、以下のように<script>タグを追加します。この例では、custom-scripts.jsが現在のHTMLファイルと同じディレクトリにあることを

前提としています。パスは環境に応じて調整してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- ここにHTMLのコンテンツ -->

    <!-- 外部JavaScriptファイルの読み込み -->
    <script src="custom-scripts.js"></script>
</body>
</html>

この方法で、HTMLファイルとJavaScriptコードを分離することができ、メンテナンス性や再利用性が向上します。

サンプルコード

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI API フォーム</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4">OpenAI API テストフォーム</h2>

	<label for="question">私は日本語に対応したAIアシスタントです。あなたの質問にチャット形式で回答します。:</label>
    <!-- ボタンを追加、変数を使用 -->
	<div class="mb-3">
	    <button onclick="insertText1()" class="btn btn-secondary">情報整理</button>
	    <button onclick="insertText2()" class="btn btn-secondary">対話要約</button>
	    <button onclick="insertText3()" class="btn btn-secondary">情報抽出</button>
	    <button onclick="insertText4()" class="btn btn-secondary">妹キャラ</button>
	</div>

    <form method="post">
        <div class="form-group">
			<textarea class="form-control" id="question" name="question" required rows="10"></textarea>

        </div>
        <button type="submit" class="btn btn-primary">送信</button>
    </form>

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["question"])) {
        $apikey = "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"; // APIキーに置き換えてください
        $url = "https://api.openai.com/v1/chat/completions";

        // リクエストヘッダー
        $headers = array(
            'Content-Type: application/json',
            'Authorization: Bearer ' . $apikey
        );

        // リクエストボディ
        $data = array(
            'model' => 'gpt-3.5-turbo',
            'messages' => [
                ["role" => "system", "content" => "私は日本語に対応したAIアシスタントです。あなたの質問にチャット形式で回答します。"],
                ['role' => 'user', 'content' => $_POST["question"]],
            ],
            'max_tokens' => 500,
        );

        // cURLを使用してAPIにリクエストを送信
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

        $response = curl_exec($ch);
        curl_close($ch);

        // 結果をデコード
        $result = json_decode($response, true);
        if (isset($result["choices"][0]["message"]["content"])) {
            $result_message = $result["choices"][0]["message"]["content"];
        } else {
            $result_message = "エラーが発生しました。";
        }

        // 結果を出力
        echo '<div class="alert alert-success mt-4">レスポンス: ' . htmlspecialchars($result_message) . '</div>';
    }
    ?>
</div>

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="custom-scripts.js"></script>
</body>
</html>

Bio

田端厚賢

名前：田端厚賢（Atsuyoshi Tabata）

WordPressを中心に企業様から委託を受けてサイトやサーバーの保守・管理、システム開発を行っています。

2024年4月より東大の松尾研でLLLMの開発プロジェクトに参加しています。

プロフィール詳細
Web制作依頼の詳細
お問い合わせはコチラ

Archives