サンプルコード
<!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">
<script>
// 文章を変数として定義
const text1 = 'ここに文章1の内容';
const text2 = 'ここに文章2の内容';
const text3 = 'ここに文章3の内容';
const text4 = 'ここに文章4の内容';
// ボタンがクリックされたときの関数
function insertText(text) {
document.getElementById("question").value = text; // 質問文のテキストフィールドにテキストを設定
}
</script>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">OpenAI API テストフォーム</h2>
<!-- ボタンを追加、変数を使用 -->
<div class="mb-3">
<button onclick="insertText(text1)" class="btn btn-secondary">文章1</button>
<button onclick="insertText(text2)" class="btn btn-secondary">文章2</button>
<button onclick="insertText(text3)" class="btn btn-secondary">文章3</button>
<button onclick="insertText(text4)" class="btn btn-secondary">文章4</button>
</div>
<form method="post">
<div class="form-group">
<label for="question">質問文:</label>
<input type="text" class="form-control" id="question" name="question" required>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["question"])) {
$apikey = "sk-〇〇〇〇"; // 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" => "関西弁で話して"],
['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>
</body>
</html>
田端厚賢