使用Bootstrap 5.0和jQuery来构建一个简单的Chat GPT的HTML聊天页面以及相关的设置代码

HTML代码
来源：站三界导航
66阅读
2023-05-23

首先，我们需要在head中引入Bootstrap和jQuery库。

<!DOCTYPE html>
<html>
<head>
    <title>Chat GPT</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap 5.0 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap 5.0 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
</head>

接下来，我们可以创建一个简单的HTML结构来显示聊天界面。以下是示例代码：

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header">Chat GPT</div>
                    <div class="card-body" id="chatbox">
                        <!-- 聊天信息将动态添加到这里 -->
                    </div>
                    <form id="chatForm" class="card-footer">
                        <div class="input-group">
                            <input type="text" name="message" id="message" placeholder="Type your message here..." class="form-control">
                            <button type="submit" class="btn btn-primary">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

我们需要编写JavaScript代码来动态添加聊天信息和发送消息并获取回复。以下是示例代码：

<script>
    $(document).ready(function () {
        $("#chatForm").submit(function (event) {
            event.preventDefault();
            var message = $("#message").val();
            if (message != '') {
                displayMessage(message, 'user');
                $("#message").val('');
                $.ajax({
                    type: "POST",
                    url: "bot.php", // 将此替换为你的PHP文件名
                    data: { message: message },
                    success: function (response) {
                        displayMessage(response, 'bot');
                    }
                });
            }
        });

        function displayMessage(message, userType) {
            var chatbox = $("#chatbox");
            var html = '<div class="row justify-content-' + userType + '"><div class="col-' + (userType == 'user' ? 'auto' : '9') + '"><div class="card mb-3"><div class="card-body">' + message + '</div></div></div></div>';
            chatbox.append(html);
            chatbox.scrollTop(chatbox.get(0).scrollHeight);
        }
    });
</script>

最后，我们需要编写一个bot.php文件来处理发送消息和返回回复。以下是示例代码：

<?php
// Replace YOUR_OPENAI_API_KEY with your actual API key.
$headers = array(
    'Content-Type: application/json',
    'Authorization: Bearer YOUR_OPENAI_API_KEY',
);
$data = array(
    "prompt" => $_POST['message'],
    "max_tokens" => 150,
    "n" => 1,
    "stop" => ["\n"]
);
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_URL => "https://api.openai.com/v1/engines/davinci-codex/completions",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => json_encode($data),
    CURLOPT_HTTPHEADER => $headers,
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
    echo "cURL Error #:" . $err;
} else {
    $output = json_decode($response, true)['choices'][0]['text'];
    echo $output;
}

在这个文件中，我们使用了cURL库来发送请求到OpenAI Chat GPT API并返回机器人的回复。记得将YOUR_OPENAI_API_KEY替换为你实际的API密钥。

完成以上步骤后，启动Web服务器并在浏览器中打开聊天页面，在输入框中输入消息，然后按下“发送”按钮即可开始聊天。

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/43663.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：使用PHP的TP5.0框架来调用OpenAI的Chat GPT接口的方法及相关设置代码

下一篇：使用layui库来构建一个简单的Chat GPT聊天html页面以及相关的设置代码