<!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>
// 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
}
});
Bu sitenin çalışmasını sağlamak için gerekli çerezleri ve deneyiminizi iyileştirmek için isteğe bağlı çerezleri kullanıyoruz.