chatgpt聊天界面 html_Chatgpt国内智能Ai研究中心

下面是一个简单的ChatGPT聊天界面的HTML示例：

<!DOCTYPE html>
<html>
<head>
    <title>ChatGPT 聊天界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        .chat-log {
            height: 400px;
            overflow-y: scroll;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .user-message, .bot-message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }

        .user-message {
            background-color: #dcf8c6;
        }

        .bot-message {
            background-color: #f6f6f6;
        }

        .input-container {
            margin-top: 20px;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="chat-log" id="chat-log"></div>
        <div class="input-container">
            <input type="text" id="user-input">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        const chatLog = document.getElementById('chat-log');
        const userInput = document.getElementById('user-input');

        function sendMessage() {
            const message = userInput.value;

            if (message.trim() !== '') {
                appendUserMessage(message);
                userInput.value = '';
                scrollToBottom();
                getBotResponse(message);
            }
        }

        function appendUserMessage(message) {
            const userMessageElement = document.createElement('div');
            userMessageElement.classList.add('user-message');
            userMessageElement.textContent = message;
            chatLog.appendChild(userMessageElement);
        }

        function appendBotMessage(message) {
            const botMessageElement = document.createElement('div');
            botMessageElement.classList.add('bot-message');
            botMessageElement.textContent = message;
            chatLog.appendChild(botMessageElement);
        }

        function scrollToBottom() {
            chatLog.scrollTop = chatLog.scrollHeight;
        }

        function getBotResponse(userMessage) {
            // 在这里添加与ChatGPT的API交互代码，获取机器人的回复
            // 然后调用appendBotMessage函数将回复添加到聊天界面中
        }
    </script>
</body>
</html>

这个HTML文件包含一个简单的聊天界面，具有一个聊天记录框(chat-log)、一个用户输入框(user-input)和一个发送按钮。用户在输入框中输入消息，并点击发送按钮，就会调用sendMessage()函数发送消息，并将用户的消息显示在聊天记录框中。在getBotResponse()函数中，你可以添加与ChatGPT的API交互代码，获取机器人的回复，并将回复添加到聊天记录框中。

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Chat Interface</title>
<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .header {
        background-color: #333;
        color: white;
        padding: 20px;
    }

    .header h1 {
        margin: 0;
    }

    .chatbox {
        flex: 1;
        padding: 20px;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #ccc #f0f0f0;
    }

    .chatbox::-webkit-scrollbar {
        width: 8px;
    }

    .chatbox::-webkit-scrollbar-track {
        background: #f0f0f0;
    }

    .chatbox::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .input-area {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f0f0f0;
    }

    .input-area input {
        flex: 1;
        height: 40px;
        padding: 10px;
        border: none;
        border-radius: 4px;
    }

    .input-area button {
        height: 40px;
        margin-left: 10px;
        padding: 0 20px;
        background-color: #333;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

</head>

<body>

<div class="container">
    <div class="header">
        <h1>ChatGPT Chat Interface</h1>
    </div>
    <div class="chatbox" id="chatbox">
        <!-- Chat messages will be dynamically added here -->
    </div>
    <div class="input-area">
        <input type="text" id="userInput" placeholder="Type your message...">
        <button id="sendButton">Send</button>
    </div>
</div>

<script>
    const chatbox = document.getElementById('chatbox');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');

    // Function to add user message to chatbox
    function addUserMessage(message) {
        const userMessage = document.createElement('div');
        userMessage.className = 'message user';
        userMessage.textContent = message;
        chatbox.appendChild(userMessage);
    }

    // Function to add assistant message to chatbox
    function addAssistantMessage(message) {
        const assistantMessage = document.createElement('div');
        assistantMessage.className = 'message assistant';
        assistantMessage.textContent = message;
        chatbox.appendChild(assistantMessage);
    }

    // Function to handle user input
    function handleUserInput() {
        const message = userInput.value;
        addUserMessage(message);
        // TODO: Send user message to backend for processing and get assistant's response
        // Replace the following line with appropriate code to handle backend communication
        const assistantResponse = "Assistant's response goes here";
        addAssistantMessage(assistantResponse);
        userInput.value = '';
    }

    // Event listener for send button click
    sendButton.addEventListener('click', handleUserInput);

    // Event listener for Enter key press
    userInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            handleUserInput();
        }
    });
</script>

</body>

</html>

chatgpt聊天界面 html 发布者：luotuoemo，转转请注明出处：https://www.chatairc.com/34216/