Web siteye ChatGPT eklemek

biltmr · 4 Kasım 2023

Web siteme ChatGPT nasıl ekleyebilirm JavaScript HTML CSS ile?

Basit tabirle yapay zekalı bir sohbet botu.

dleifteH · 4 Kasım 2023

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>ChatGPT Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-log" id="chat-log">
            <!-- Chat mesajları burada görüntülenecek -->
        </div>
        <input type="text" id="user-input" placeholder="Mesajınızı yazın...">
        <button id="send-button">Gönder</button>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

JavaScript:

// OpenAI API Anahtarınızı burada tanımlayın
const apiKey = "YOUR_OPENAI_API_KEY";

// HTML elementlerini alın
const chatLog = document.getElementById("chat-log");
const userInput = document.getElementById("user-input");
const sendButton = document.getElementById("send-button");

// Kullanıcının mesajını chat penceresine ekleyen fonksiyon
function appendUserMessage(message) {
    const userMessage = document.createElement("div");
    userMessage.className = "user-message";
    userMessage.textContent = message;
    chatLog.appendChild(userMessage);
}

// ChatGPT'den gelen yanıtı chat penceresine ekleyen fonksiyon
function appendGPTMessage(message) {
    const gptMessage = document.createElement("div");
    gptMessage.className = "gpt-message";
    gptMessage.textContent = message;
    chatLog.appendChild(gptMessage);
}

// Kullanıcının mesajını ChatGPT'ye gönderen fonksiyon
async function sendMessageToChatGPT(message) {
    // OpenAI API'sini kullanarak mesajı gönderin ve yanıtı alın
    // Bu adımda API anahtarınızı kullanmalısınız
    const response = await fetch("https://api.openai.com/v1/engines/text-davinci-003/completions", {
        method: "POST",
        headers: {
            "Authorization": `Bearer ${apiKey}`,
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            prompt: message,
            max_tokens: 150,
        }),
    });
    const data = await response.json();
    const gptReply = data.choices[0].text;

    // Chat penceresine yanıtı ekleyin
    appendGPTMessage(gptReply);
}

// Gönder düğmesine tıklama olayını dinleyin
sendButton.addEventListener("click", () => {
    const userMessage = userInput.value;
    appendUserMessage(userMessage);
    sendMessageToChatGPT(userMessage);
    userInput.value = ""; // Input alanını temizle
});

// Enter tuşuna basıldığında da mesajı gönderin
userInput.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        sendButton.click(); // Gönder düğmesine tıklama işlemini tetikleyin
    }
});

biltmr · 4 Kasım 2023

Eee nasıl yapacağım en son 3 sene once web tasarımı yaptım.

Gnosis · 12 Kasım 2023

OpenAI'dan API anahtarı almalısınız kullanıcıların yaptıkları her istek başına bir miktar ücret ödeyeceğiniz için ilk olarak OpenAI kısmını halletmeniz gerekiyor. Daha sonra YouTube'dan how to use ChatGPT API? Veya ChatGPT API kullanımı yazarak istediğiniz backend dilinde totorialler izleyebilirsiniz.

Web siteye ChatGPT eklemek

Ayrıntılı düzenleme

biltmr

Centipat

dleifteH

Centipat

biltmr

Centipat

Gnosis

Centipat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz