From 8d5b0d0c4e694a12ebe2930ec037aaf59759c396 Mon Sep 17 00:00:00 2001
From: CXM <chenzixin202209@163.com>
Date: Thu, 14 Mar 2024 18:58:23 +0000
Subject: [PATCH] implement using php to connect to ChatGPT API using
ChatbotConfig.php, and implement a interface to chat with bot using
cahtbotpage.php. Connect to application
---
{Presentation => Logic}/ChatbotConfig.php | 21 +--
Presentation/chatbot.php | 102 --------------
Presentation/chatbotpage.php | 163 ++++++++++++++++++++++
Presentation/interface.php | 2 +-
4 files changed, 166 insertions(+), 122 deletions(-)
rename {Presentation => Logic}/ChatbotConfig.php (66%)
delete mode 100644 Presentation/chatbot.php
create mode 100644 Presentation/chatbotpage.php
diff --git a/Presentation/ChatbotConfig.php b/Logic/ChatbotConfig.php
similarity index 66%
rename from Presentation/ChatbotConfig.php
rename to Logic/ChatbotConfig.php
index f2a55ea..98dea81 100644
--- a/Presentation/ChatbotConfig.php
+++ b/Logic/ChatbotConfig.php
@@ -26,34 +26,17 @@ function gpt35Api($messages) {
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
-
$response = curl_exec($ch);
- if (curl_errno($ch)) {
- echo 'Curl error: ' . curl_error($ch);
- }
-
- $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
- echo "HTTP Status Code: " . $httpCode . "\n";
-
curl_close($ch);
- echo "Raw response: " . $response . "\n"; // 打印原始响应
-
$responseDecoded = json_decode($response, true);
if (isset($responseDecoded['choices'][0]['message']['content'])) {
- echo $responseDecoded['choices'][0]['message']['content'];
+ return $responseDecoded['choices'][0]['message']['content'];
} else {
// 处理错误或无响应的情况
- echo "No response or an error occurred.";
+ return "No response or an error occurred.";
}
}
-
-$messages = [
- ['role' => 'user', 'content' => '请你告诉我融创有哪些好玩的'],
-];
-
-gpt35Api($messages);
-
?>
diff --git a/Presentation/chatbot.php b/Presentation/chatbot.php
deleted file mode 100644
index fe616c8..0000000
--- a/Presentation/chatbot.php
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Chat Interface with Aligned Messages</title>
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- <style>
- body, html {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- font-family: 'Roboto', sans-serif;
- background-color: #1E1E2E; /* Deep gray background */
- display: flex;
- flex-direction: column; /* 使页面内容垂直排列 */
- }
-
- #chatLog {
- flex-grow: 1;
- overflow-y: auto;
- padding: 10px;
- position: relative;
- }
- #chatLog::before {
- content: "UWE Student Assistant";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: rgba(255, 255, 255, 0.5); /* 深色模式下的文字颜色，半透明 */
- font-size: 50px;
- display: block;
- }
- #chatLog.has-messages::before {
- content: none;
- }
- .message {
- display: flex;
- flex-direction: column;
- align-items: flex-start; /* Align bot messages to the left */
- margin-bottom: 10px;
- }
- .message.user {
- align-items: flex-end; /* Align user messages to the right */
- }
- .text {
- max-width: 70%;
- background-color: #292A36; /* Bot message color */
- color: #EAEAEA;
- padding: 10px 15px;
- border-radius: 15px; /* 更圆润的边框 */;
- }
- .message.user .text {
- background-color: #555; /* User message color */
- }
- #inputContainer {
- display: flex;
- margin-top: 10px;
- position: absolute; /* 绝对定位，基于chatContainer定位 */
- bottom: 15%; /* 距离底部的距离 */
- left: 0; /* 左对齐 */
- width: 100%; /* 宽度与chatContainer一致 */
- padding: 0 15px; /* 保持内部内容与chatLog一致的padding */
- box-sizing: border-box; /* 确保padding不影响宽度计算 */
- }
- #chatInput, #sendButton {
- border: none;
- outline: none;
- transition: background-color 0.3s;
- background-color: #232533; /* 输入和按钮背景色 */
- color: #EAEAEA; /* 输入和按钮文本颜色 */
- padding: 10px 15px;
- border-radius: 15px; /* 统一圆润边框 */
- }
- #chatInput {
- flex-grow: 1;
- background-color: #414141; /* Dark input field */
- color: #fff;
- margin-right: 10px;
- }
- #sendButton {
- background-color: #575757; /* Dark button */
- color: #fff;
- cursor: pointer;
- }
- #sendButton:hover {
- background-color: #3A3B45; /* Highlight button on hover */
- }
- </style>
-</head>
-<body>
-<div id="chatLog"></div>
-<div id="inputContainer">
- <input type="text" id="chatInput" placeholder="Type a message...">
- <button id="sendButton">Send</button>
-</div>
-
-<script src="../Logic/chatbot.js"></script>
-</body>
diff --git a/Presentation/chatbotpage.php b/Presentation/chatbotpage.php
new file mode 100644
index 0000000..625e75d
--- /dev/null
+++ b/Presentation/chatbotpage.php
@@ -0,0 +1,163 @@
+<?php
+session_start(); // 开启会话
+
+// 假设这是 index.php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+ // 引入API文件
+ require_once "../Logic/ChatbotConfig.php";
+
+ // 获取用户输入
+ $userInput = $_POST['userInput'];
+
+ // 调用API函数
+ $response = gpt35Api([['role' => 'user', 'content' => $userInput]]);
+
+ // 把用户输入和响应追加到会话历史中
+ if (!isset($_SESSION['chat_history'])) {
+ $_SESSION['chat_history'] = [];
+ }
+ $_SESSION['chat_history'][] = ['user' => $userInput, 'response' => $response];
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Chat Interface</title>
+ <style>
+ html, body {
+ height: 100%;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ background-color: #1E1E2E; /* Deep gray background */
+ }
+ #chat-container {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: calc(100vh - 20px);
+ margin: 10px;
+ background: #1E1E2E;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ overflow: hidden;
+ margin-top: 50px;
+ }
+ #chat-history {
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px; /* 增加消息之间的间隔 */
+ background: #1E1E2E;
+ }
+ .user, .bot {
+ max-width: 80%;
+ padding: 10px 15px;
+ border-radius: 20px;
+ color: white;
+ font-size: 16px;
+ line-height: 1.4;
+ word-wrap: break-word;
+ }
+ .user {
+ align-self: flex-end;
+ background-color: #555; /* 用户消息的颜色 */
+ border-bottom-right-radius: 4px; /* 调整以使气泡看起来更自然 */
+ }
+ .bot {
+ align-self: flex-start;
+ background-color: #292A36; /* 机器人消息的颜色 */
+ border-bottom-left-radius: 4px; /* 调整以使气泡看起来更自然 */
+ }
+
+ form {
+ display: flex;
+ padding: 10px;
+ background: #1E1E2E;
+ align-items: center; /* 确保表单元素垂直居中 */
+ }
+ /* 调整输入框和按钮的样式以保持界面整体美观 */
+ input[type="text"], button {
+ height: 40px;
+ padding: 0 10px;
+ }
+ input[type="text"] {
+ flex-grow: 1; /* 使输入框填充剩余空间 */
+ border: none;
+ margin-right: 10px;
+ border-radius: 20px;
+ padding-left: 15px;
+ background-color: #414141; /* Dark input field */
+ color: #EAEAEA;
+ }
+ button {
+ padding: 0 20px;
+ border-radius: 20px;
+ background-color: #575757;
+ color: white;
+ border: none;
+ cursor: pointer;
+ }
+ button:hover {
+ background-color: #3A3B45;
+ }
+ /* 自定义滚动条样式 */
+ #chat-history::-webkit-scrollbar {
+ width: 8px; /* 控制滚动条的宽度 */
+ }
+ #chat-history::-webkit-scrollbar-track {
+ background: #f1f1f1; /* 滚动条的轨道背景色 */
+ border-radius: 10px; /* 轨道圆角 */
+ }
+ #chat-history::-webkit-scrollbar-thumb {
+ background: #888; /* 滚动条本身的颜色 */
+ border-radius: 10px; /* 滚动条圆角 */
+ }
+ #chat-history::-webkit-scrollbar-thumb:hover {
+ background: #555; /* 滚动条在鼠标悬停时的颜色变化 */
+ }
+
+ @media (max-width: 600px) {
+ #chat-container {
+ height: calc(100vh - 10px);
+ margin: 5px;
+ }
+ input[type="text"] {
+ width: calc(100% - 90px);
+ }
+ button {
+ width: 90px;
+ }
+ }
+ </style>
+</head>
+<body>
+<div id="chat-container">
+ <div id="chat-history">
+ <?php if (!empty($_SESSION['chat_history'])): ?>
+ <?php foreach ($_SESSION['chat_history'] as $chat): ?>
+ <div class="user"><?php echo htmlspecialchars($chat['user']); ?></div>
+ <div class="bot"><?php echo htmlspecialchars($chat['response']); ?></div>
+ <?php endforeach; ?>
+ <?php endif; ?>
+ </div>
+ <form action="chatbotpage.php" method="post">
+ <input type="text" name="userInput" required autofocus>
+ <button type="submit">Ask</button>
+ </form>
+</div>
+
+</body>
+
+<script>
+ window.onload = function() {
+ var chatHistory = document.getElementById('chat-history');
+ chatHistory.scrollTop = chatHistory.scrollHeight;
+ };
+</script>
+
+</html>
diff --git a/Presentation/interface.php b/Presentation/interface.php
index 63b7a1d..c3908fc 100644
--- a/Presentation/interface.php
+++ b/Presentation/interface.php
@@ -213,7 +213,7 @@ $userID = $_SESSION['user_id'];
</div>
<div id="chatContainer">
- <iframe id="contentFrame" src="chatbot.php" style="width: 100%; height: 100%; border: none;"></iframe>
+ <iframe id="contentFrame" src="chatbotpage.php" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
</div>
--
GitLab