田端厚賢 bootstrapで簡素な作りだけでオープンLLMに接続してレスポンスを取得して表示する基本のコードを書きました。
<!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">OpenLLM 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 = "sk-OOOOO"; // APIキーに置き換えてください
$url = "https://ai〇.ex-pa.pro/v1/completions";
// リクエストヘッダー
$headers = array(
'Content-Type: application/json',
//'Authorization: Bearer ' . $apikey
);
$data = array(
"prompt" => $_POST["question"], // 'prompt'フィールドを使用して正しく設定
"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);
// $responseの内容を確認
var_dump($response);
// 結果をデコード
$result = json_decode($response, true);
if (isset($result["choices"][0]["text"])) {
$result_message = $result["choices"][0]["text"];
} 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>
このHTMLコードは、オープンLLMのAPIを利用したウェブフォームを作成するためのものです。以下、各部分の説明です：
- DOCTYPE宣言: HTML5ドキュメントを宣言しています。
- htmlタグ: ページの言語を日本語（
lang="ja"）としています。 - headセクション: 文字セット（UTF-8）、ビューポートの設定、ページのタイトル（OpenAI API フォーム）、BootstrapのCSSスタイルシートをリンクしています。
- bodyセクション: メインコンテンツを含んでいます。
containerクラスを持つdivは、Bootstrapを使ってスタイリングされたコンテナです。中にはフォームとその説明が含まれています。h2タグでフォームのタイトルが指定されています。- ボタンが4つあり、それぞれ異なる機能（
insertText1()、insertText2()、insertText3()、insertText4()関数を呼び出す）を持っています。これらはおそらくcustom-scripts.jsに定義されているJavaScript関数です。 formタグ内には、ユーザーからの入力を受け取るためのテキストエリア（textarea）があり、idとname属性がquestionに設定されています。このテキストエリアは必須項目です。- フォームの送信ボタンがあります。
- PHPスクリプト: フォームが送信された後、サーバー側で処理を行います。これには以下の処理が含まれます：
- POSTメソッドでデータが送信されたこと、および
questionフィールドが空でないことを確認。 - コメントアウトされたAPIキー（実際にはこのキーを使用するには、有効なキーに置き換える必要があります）。
- cURLを使用してOpenAIのAPIにリクエストを送信。このリクエストには、ユーザーが入力した質問（
prompt）と最大トークン数（max_tokens）が含まれます。 - APIからのレスポンスを受け取り、デコードして結果を表示。成功時にはAPIからのテキストレスポンスを、エラー時にはエラーメッセージを表示します。
- BootstrapのJavaScript: 依存関係としてjQuery、Popper.js、BootstrapのJSファイルがリンクされています。
custom-scripts.js: フォーム内のボタンに関連する機能を提供するカスタムJavaScriptファイル。これは、特定のテキストをテキストエリアに挿入するために使用されると思われますが、このコードには含まれていません。
このウェブフォームは、ユーザーが質問を入力し、送信すると、その質問をOpenLLMサーバーに送信し、得られた回答を表示するという流れで動作します。サーバーサイドのPHPスクリプトは、APIとの通信を処理し、クライアントサイドのJavaScript（custom-scripts.js）はユーザーインターフェイスの機能を担います。