ChatGPT API 对接页面实现及排版优化

本文将详细介绍如何创建一个页面对接 ChatGPT API，并提供代码示例展示如何优化 ChatGPT 回复的排版，使其更易读且美观。

一、创建页面

首先，我们需要创建一个 HTML 页面来实现对接 ChatGPT API 的功能。您可以使用任何文本编辑器或集成开发环境来创建该页面。以下是一个简单的 HTML 页面示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ChatGPT API Demo</title>
</head>
<body>
    <h1>ChatGPT API Demo</h1>
    <form id="chat-form">
        <label for="user-input">You:</label>
        <input type="text" id="user-input" name="user-input" required>
        <button type="submit">Send</button>
    </form>
    <div id="chat-output"></div>

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.3.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/gpt2@2.0.1/dist/gpt2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const chatForm = document.querySelector('#chat-form');
        const chatOutput = document.querySelector('#chat-output');
        const gpt2 = new GPT2();

        const generateResponse = async (inputText) => {
            try {
                const response = await axios.post('/api/chatgpt', {inputText: inputText});
                return response.data.response;
            } catch (error) {
                console.error(error);
                return 'Sorry, there was an error generating a response.';
            }
        };

        chatForm.addEventListener('submit', async (event) => {
            event.preventDefault();
            const userInput = document.querySelector('#user-input').value;
            const chatBubble = document.createElement('div');
            chatBubble.classList.add('chat-bubble', 'user-bubble');
            chatBubble.textContent = userInput;
            chatOutput.appendChild(chatBubble);
            document.querySelector('#user-input').value = '';
            const response = await generateResponse(userInput);
            const responseParagraphs = response.split('
');
            for (const responseParagraph of responseParagraphs) {
                const responseBubble = document.createElement('div');
                responseBubble.classList.add('chat-bubble', 'response-bubble');
                responseBubble.textContent = responseParagraph.trim();
                chatOutput.appendChild(responseBubble);
            }
        });
    </script>

    <style>
        .chat-bubble {
            max-width: 60%;
            border-radius: 20px;
            padding: 10px;
            margin: 10px;
            display: inline-block;
        }

        .user-bubble {
            background-color: #007aff;
            color: white;
            float: right;
            clear: both;
        }

        .response-bubble {
            background-color: #f2f2f2;
            color: black;
            float: left;
            background-image: linear-gradient(to bottom right, #f2f2f2, #e6e6e6);
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        }
    </style>
</body>
</html>

在这个 HTML 页面中，我们创建了一个简单的表单，用户可以在其中输入他们的问题或消息。我们还创建了一个名为“chat-output”的 DIV 元素，用于显示 ChatGPT 的响应。

二、对接 ChatGPT API

我们使用 Axios 来对接 ChatGPT API。在 HTML 页面的末尾，我们包含了 Axios 库的 CDN 链接，并编写了一个名为“generateResponse”的函数，该函数将用户输入发送到 ChatGPT API，并返回响应。以下是“generateResponse”函数的详细实现：

const generateResponse = async (inputText) => {
    try {
        const response = await axios.post('/api/chatgpt', {inputText: inputText});
        return response.data.response;
    } catch (error) {
        console.error(error);
        return 'Sorry, there was an error generating a response.';
    }
};

这个函数使用 Axios 的 POST 方法将用户输入发送到 ChatGPT API。我们假设您已经编写了一个名为“chatgpt”的 API，并且该 API 接受一个名为“inputText”的 POST 参数，该参数包含用户输入的消息。ChatGPT API 将返回一个 JSON 响应，其中包含一个名为“response”的属性，该属性包含 ChatGPT 生成的响应。如果 ChatGPT API 返回错误，我们将返回一个错误消息。

三、优化 ChatGPT 响应的排版

ChatGPT 的响应可能会是一个长段落或多个段落。为了提高可读性，我们可以将响应分成多个泡泡，每个泡泡包含一个短句或一小段话。以下是如何为 ChatGPT 响应优化排版的代码：

chatForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const userInput = document.querySelector('#user-input').value;
    const chatBubble = document.createElement('div');
    chatBubble.classList.add('chat-bubble', 'user-bubble');
    chatBubble.textContent = userInput;
    chatOutput.appendChild(chatBubble);
    document.querySelector('#user-input').value = '';
    const response = await generateResponse(userInput);
    const responseParagraphs = response.split('
');
    for (const responseParagraph of responseParagraphs) {
        const responseBubble = document.createElement('div');
        responseBubble.classList.add('chat-bubble', 'response-bubble');
        responseBubble.textContent = responseParagraph.trim();
        chatOutput.appendChild(responseBubble);
    }
});

在这个代码中，我们首先将 ChatGPT 的响应分成多个段落，每个段落都是通过“split”函数将响应字符串按换行符分割而成。我们使用一个循环来遍历响应的每个段落，并为每个段落创建一个名为“responseBubble”的 DIV 元素。最后，我们将每个“responseBubble”元素添加到“chatOutput”元素中。

我们还使用“trim”函数来删除每个响应段落的前导和尾随空格。

四、美化 ChatGPT 响应

最后，我们可以使用 CSS 样式美化 ChatGPT 响应。以下是一个简单的 CSS 样式，用于创建一个圆形、渐变背景和阴影的气泡形状：

.chat-bubble {
    max-width: 60%;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
}

.user-bubble {
    background-color: #007aff;
    color: white;
    float: right;
    clear: both;
}

.response-bubble {
    background-color: #f2f2f2;
    color: black;
    float: left;
    background-image: linear-gradient(to bottom right, #f2f2f2, #e6e6e6);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

在这个 CSS 样式中，我们定义了“chat-bubble”类，该类用于所有气泡。我们还定义了两个子类：“user-bubble”和“response-bubble”，分别用于用户输入和 ChatGPT 响应。

“user-bubble”类使用蓝色背景和白色文本，代表用户输入。

“response-bubble”类使用灰色背景和黑色文本，并使用 CSS 渐变来创建一个圆形形状。我们还为“response-bubble”类添加了一个阴影，以增加气泡的深度感。

这些样式将使 ChatGPT 的响应看起来更漂亮和易读。

总结

以上是对接 ChatGPT API 的页面的实现步骤。通过这个页面，用户可以向 ChatGPT 提问，并获得 ChatGPT 的响应。我们还对 ChatGPT 的响应进行了优化和美化，以提高可读性和用户体验。