仿chatgpt网页源码_Chatgpt国内智能Ai研究中心

仿chatgpt网页源码

luotuoemo • 2023年11月12日下午7:28 • ChatGPT新闻动态 • 阅读 889

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

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
    }
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    .chat-container {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    .chat-bubble {
        background-color: #f0f0f0;
        padding: 10px 15px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
    .user-bubble {
        background-color: #c3e1fc;
        text-align: right;
    }
    input[type="text"] {
        width: calc(100% - 50px);
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 10px;
    }
    input[type="submit"] {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

</head>
<body>

<div class="container">
    <h1>ChatGPT</h1>
    <div class="chat-container">
        <div class="chat-bubble user-bubble">
            Hi there, how can I help you today?
        </div>
        <div class="chat-bubble">
            Well, I'm looking for some information on AI chatbots.
        </div>
    </div>
    <form id="chat-form">
        <input type="text" id="user-input" placeholder="Type your message...">
        <input type="submit" value="Send">
    </form>
</div>

<script>
    document.getElementById('chat-form').addEventListener('submit', function(e) {
        e.preventDefault();
        var userInput = document.getElementById('user-input').value;
        var userBubble = document.createElement('div');
        userBubble.classList.add('chat-bubble', 'user-bubble');
        userBubble.textContent = userInput;
        document.querySelector('.chat-container').appendChild(userBubble);
        document.getElementById('user-input').value = '';

        // Make a request to the ChatGPT API to get the response
        fetch('https://api.chatgpt.com/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: userInput })
        })
        .then(response => response.json())
        .then(data => {
            var chatBubble = document.createElement('div');
            chatBubble.classList.add('chat-bubble');
            chatBubble.textContent = data.message;
            document.querySelector('.chat-container').appendChild(chatBubble);
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>ChatGPT</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">

<div class="chat-log" id="chat-log">
  <div class="chat-message">
    <div class="sender">ChatGPT</div>
    <div class="message">Hello there! How can I help you today?</div>
  </div>
</div>
<div class="chat-input">
  <input type="text" id="user-input" placeholder="Type your message...">
  <button id="send-button">Send</button>
</div>

</div>

const chatLog = document.getElementById('chat-log');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');

sendButton.addEventListener('click', () => {
  const userMessage = userInput.value;
  const userChatMessage = document.createElement('div');
  userChatMessage.classList.add('chat-message');
  userChatMessage.innerHTML = `
    <div class="sender">You</div>
    <div class="message">${userMessage}</div>
  `;
  chatLog.appendChild(userChatMessage);

  // Call ChatGPT API to get response
  fetch('https://api.chatgpt.com/ask', {
    method: 'POST',
    body: JSON.stringify({ message: userMessage }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    const { message } = data;
    const chatGPTMessage = document.createElement('div');
    chatGPTMessage.classList.add('chat-message');
    chatGPTMessage.innerHTML = `
      <div class="sender">ChatGPT</div>
      <div class="message">${message}</div>
    `;
    chatLog.appendChild(chatGPTMessage);
  })
});

</script>
</body>
</html>

仿chatgpt网页源码发布者：luotuoemo，转转请注明出处：https://www.chatairc.com/34664/