在Ubuntu服务器上部署基于chatGPT的自定义服务（前端篇）

No tag
review
Publish Date:   2023-09-02

1. 实现对话气泡

对话气泡样式

.message {
   max-width: 70%;
   padding: 10px;
   border-radius: 10px;
   margin: 5px 0;
}

.user-message {
   background-color: #4CAF50; /* 绿色 */
   color: white;
   align-self: flex-end; /* 用户消息在右边 */
   border-top-right-radius: 0; /* 右上角不要圆角 */
}

.bot-message {
   background-color: #E0E0E0; /* 灰色/白色 */
   color: black;
   align-self: flex-start; /* ChatGPT消息在左边 */
   border-top-left-radius: 0; /* 左上角不要圆角 */
}

.chat-history {
   display: flex;
   flex-direction: column;
   gap: 10px; /* 为消息添加间隔 */
}

  1. .message:

    • max-width属性限制消息框的最大宽度为页面宽度的70%，以确保消息不会过宽。
    • padding属性为消息框添加内边距，以增加消息内容与边框的间距。
    • border-radius属性设置消息框的边框为圆角矩形，使其看起来更加现代化。
    • margin属性控制消息框在垂直方向上的间距，上下各为5像素。

  2. .user-message:

    • background-color属性设置用户消息的背景颜色为绿色，增强了用户消息的可视性。
    • color属性设置文字颜色为白色，以与绿色背景形成对比。
    • align-self属性将用户消息框对齐到容器的右侧，使用户消息在聊天界面的右边显示。
    • border-top-right-radius属性设置消息框的右上角不使用圆角，使其看起来更加方正。

  3. .bot-message:

    • background-color属性设置ChatGPT消息的背景颜色为灰色/白色，与用户消息的绿色背景形成对比。
    • color属性设置文字颜色为黑色，以与灰色/白色背景形成对比。
    • align-self属性将ChatGPT消息框对齐到容器的左侧，使ChatGPT消息在聊天界面的左边显示。
    • border-top-left-radius属性设置消息框的左上角不使用圆角，使其看起来更加方正。

  4. .chat-history:

    • display属性设置聊天历史容器的布局方式为垂直列（column），使消息按照时间顺序从上到下排列。

javascript部分

function addUserMessage(message) {
    const chatHistory = document.getElementById('chatHistory');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message user-message';
    messageDiv.textContent = message;
    chatHistory.appendChild(messageDiv);
}

function addBotMessage(message) {
    const chatHistory = document.getElementById('chatHistory');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message bot-message';
    messageDiv.textContent = message;
    chatHistory.appendChild(messageDiv);
}

  1. addUserMessage(message) 函数：

    • 获取聊天历史容器元素，使用 document.getElementById('chatHistory') 语句获取页面中的聊天历史容器。
    • 创建一个新的 div 元素，用于显示消息内容。
    • 通过设置 className 属性为 'message user-message'，将用户消息的样式类应用到该 div 元素，使其呈现用户消息的样式。
    • 使用 textContent 属性将消息文本内容赋值给 div 元素。
    • 使用 appendChild 方法将该 div 元素添加到聊天历史容器中，以在聊天界面中显示用户消息。

  2. addBotMessage(message) 函数：

    • 获取聊天历史容器元素，与上一个函数相同，使用 document.getElementById('chatHistory') 获取聊天历史容器。
    • 创建一个新的 div 元素，用于显示消息内容。
    • 通过设置 className 属性为 'message bot-message'，将ChatGPT消息的样式类应用到该 div 元素，使其呈现ChatGPT消息的样式。
    • 使用 textContent 属性将消息文本内容赋值给 div 元素。
    • 使用 appendChild 方法将该 div 元素添加到聊天历史容器中，以在聊天界面中显示ChatGPT消息。

2. 实现动态背景

CSS：

首先，为每个时间段定义一个背景样式：

body.morning {
    background-image: url('path_to_morning_image.jpg');
}

body.morning {
    background-image: url('path_to_morning_image.jpg');
}

body.forenoon {
    background-image: url('path_to_forenoon_image.jpg');
}

body.noon {
    background-image: url('path_to_noon_image.jpg');
}

body.afternoon {
    background-image: url('path_to_afternoon_image.jpg');
}

body.evening {
    background-image: url('path_to_evening_image.jpg');
}

body.night {
    background-image: url('path_to_night_image.jpg');
}

使用JavaScript检测当前时间，并根据时间更改背景：

function updateBackground() {
    const now = new Date();
    const hour = now.getHours();
    let className = '';

    if (hour >= 6 && hour < 9) {
        className = 'morning';
    } else if (hour >= 9 && hour < 12) {
        className = 'forenoon';
    } else if (hour >= 12 && hour < 14) {
        className = 'noon';
    } else if (hour >= 14 && hour < 18) {
        className = 'afternoon';
    } else if (hour >= 18 && hour < 20) {
        className = 'evening';
    } else {
        className = 'night';
    }

    document.body.className = className;
}

// 当页面加载时调用此函数
window.onload = updateBackground;

3.实现视差效果

  1. CSS设置：

首先，确保背景图片比视口稍大，这样当您移动鼠标时，背景图片有足够的空间移动。

body {
    background-image: url('path_to_your_image.jpg');
    background-size: 110%;  /* 让背景图片比视口稍大 */
    background-repeat: no-repeat;
    background-position: center center;  /* 初始位置在中心 */
}
  1. JavaScript实现：

监听鼠标的移动事件，并根据鼠标的位置调整背景的位置。

document.addEventListener('mousemove', function(e) {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    
    // 计算背景位置的偏移量。这里的数字“20”决定了偏移的最大量，可以根据需要调整。
    const bgPosX = (mouseX / width * 20) - 10;  // -10 to 10
    const bgPosY = (mouseY / height * 20) - 10; // -10 to 10
    
    // 设置背景位置
    document.body.style.backgroundPosition = `${50 + bgPosX}% ${50 + bgPosY}%`;
});

4.移动端多色渐变

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, var(--gradient-start, #f4f4f4), var(--gradient-end, #e0e0e0)); /* 使用CSS变量 */
    margin: 0;
    padding: 0;
    background-image: url('path_to_your_image.jpg');
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (max-width: 768px) {
    body {
        background-image: none; /* 移除背景图片 */
        background: radial-gradient(circle, var(--gradient-start, #f4f4f4), var(--gradient-end, #e0e0e0)); /* 使用径向渐变 */
    }
}

function updateGradient() {
    const now = new Date();
    const hour = now.getHours();
    let gradientStart, gradientEnd;

    if (hour >= 6 && hour < 9) {
        gradientStart = '#FFB6C1'; // LightPink
        gradientEnd = '#FF69B4';   // HotPink
    } else if (hour >= 9 && hour < 12) {
        gradientStart = '#ADD8E6'; // LightBlue
        gradientEnd = '#1E90FF';   // DodgerBlue
    } /* ... 其他时间段 ... */ else {
        gradientStart = '#f4f4f4';
        gradientEnd = '#e0e0e0';
    }

    document.body.style.setProperty('--gradient-start', gradientStart);
    document.body.style.setProperty('--gradient-end', gradientEnd);
}

window.onload = updateGradient;

这段JavaScript代码用于根据当前时间动态更新页面的背景渐变颜色。以下是代码的更新说明：

  1. 获取当前时间：

    • 使用 new Date() 创建一个新的 Date 对象，以获取当前日期和时间。

  2. 获取当前小时：

    • 通过 getHours() 方法获取当前时间的小时部分，用于判断当前时间所属的时间段。

  3. 根据时间段设置渐变颜色：

    • 使用条件语句根据当前小时判断时间段，然后分别为 gradientStart 和 gradientEnd 变量赋值不同的颜色值。
    • 每个时间段对应不同的背景渐变起始色和结束色。

  4. 更新页面背景渐变颜色：

    • 使用 document.body.style.setProperty 方法分别为页面的 --gradient-start 和 --gradient-end 自定义属性设置新的颜色值。
    • 这些自定义属性可以在CSS中使用，用于定义页面背景渐变的起始色和结束色。

  5. 设置窗口加载时的更新：

    • 使用 window.onload 事件将 updateGradient 函数绑定到页面加载完成的时机，以确保页面加载时调用该函数一次。

5.实现按钮点击相应和锁定

修改HTML部分：

在<button>标签内部添加一个<span>元素，用于显示冷却剩余的时间。

<button id="sendButton" onclick="cooldownButton()">Send <span id="cooldownTimer"></span></button>
修改JavaScript部分：
function cooldownButton() {
    const button = document.getElementById('sendButton');
    const cooldownTimer = document.getElementById('cooldownTimer');
    let remainingTime = 60; // 冷却时间为1分钟

    button.disabled = true;
    cooldownTimer.textContent = `(${remainingTime}s)`;

    const interval = setInterval(() => {
        remainingTime--;
        cooldownTimer.textContent = `(${remainingTime}s)`;

        if (remainingTime <= 0) {
            clearInterval(interval);
            button.disabled = false;
            cooldownTimer.textContent = ""; // 清除冷却时间显示
        }
    }, 1000); // 每秒更新一次
}
  1. 获取按钮元素和冷却时间元素：
    • 使用 document.getElementById('sendButton') 获取页面上的按钮元素，用于进行操作。
    • 使用 document.getElementById('cooldownTimer') 获取页面上用于显示冷却时间的元素，以便在冷却过程中更新倒计时。
  2. 初始化冷却时间：
    • 初始冷却时间设置为60秒（1分钟），用于冷却按钮的操作。
  3. 禁用按钮并显示初始倒计时：
    • 将按钮的 disabled 属性设置为 true，以禁用按钮，防止在冷却过程中多次点击。
    • 在冷却时间元素中显示初始倒计时，格式为 (${remainingTime}s)。
  4. 设置倒计时更新间隔：
    • 使用 setInterval 创建一个定时器，每隔1秒执行一次回调函数。
  5. 更新倒计时和按钮状态：
    • 在回调函数中，将剩余冷却时间递减1秒。
    • 更新冷却时间元素的内容，显示更新后的倒计时。
    • 如果剩余冷却时间小于等于0，清除定时器以停止倒计时。
    • 将按钮的 disabled 属性设置为 false，以启用按钮。
    • 清空冷却时间元素的内容，以清除倒计时显示。
  6. 设置定时器间隔：
    • 定时器每隔1秒（1000毫秒）执行一次回调函数，用于更新倒计时和按钮状态。
修改CSS部分使按钮变灰
.chat-input button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
Author: morphotherain
Link: https://morphotherain.github.io/2023/09/02/2/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source morphotherain !
No tag
  TOC