以下是一个简单的网站源码示例,用于调用ChatGPT AI模型:

  1. HTML文件(index.html):
<!DOCTYPE html>
<html>
<head>
    <title>ChatGPT AI Demo</title>
</head>
<body>
    <h1>ChatGPT AI Demo</h1>
    <div id="chat-container">
        <div id="chat-log"></div>
        <input type="text" id="user-input" placeholder="输入消息..." />
        <button id="send-button" onclick="sendMessage()">发送</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript文件(script.js):
$(document).ready(function() {
    // ChatGPT API URL
    const apiUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';

    // Replace with your OpenAI API key
    const apiKey = 'YOUR_API_KEY';

    // Chat log container
    const chatLog = $('#chat-log');

    // Send user message to ChatGPT
    function sendMessage() {
        const userInput = $('#user-input').val();
        if (userInput.trim() === '') {
            return;
        }

        // Add user message to chat log
        chatLog.append('<div class="user-message">' + userInput + '</div>');

        // Clear user input
        $('#user-input').val('');

        // Call ChatGPT API
        $.ajax({
            url: apiUrl,
            type: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + apiKey
            },
            data: JSON.stringify({
                'prompt': userInput,
                'max_tokens': 50 // Adjust as needed
            }),
            success: function(response) {
                const chatGptResponse = response.choices[0].text.trim();

                // Add ChatGPT response to chat log
                chatLog.append('<div class="chatgpt-message">' + chatGptResponse + '</div>');

                // Scroll to bottom of chat log
                chatLog.scrollTop(chatLog[0].scrollHeight);
            },
            error: function() {
                alert('Error calling the ChatGPT API.');
            }
        });
    }

    // Register enter key press event
    $('#user-input').keypress(function(event) {
        if (event.which === 13) {
            sendMessage();
        }
    });
});

请注意,此源码示例仅提供了一个基本的前端实现,您需要将其中的YOUR_API_KEY替换为您自己的OpenAI API密钥,并确保已在OpenAI平台上创建了ChatGPT AI模型。此外,还应根据需要进行样式和布局的自定义

写一个调用chatgpt ai的网站源码

原文地址: https://www.cveoy.top/t/topic/iKlv 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录