HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body { margin:0; font-family:'Poppins', sans-serif; background:#121212; color:#e0e0e0; }
.chat-container { max-width:600px; margin:0 auto; display:flex; flex-direction:column; height:100vh; position:relative; }
.chat-header { height:60px; display:flex; align-items:center; padding:0 20px; background:#1e1e1e; font-weight:600; font-size:18px; box-shadow:0 1px 3px rgba(0,0,0,0.5); }
.chat-messages { flex:1; padding:20px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.message { max-width:80%; padding:12px 16px; border-radius:16px; word-break:break-word; }
.message.bot { background:#2f2f2f; align-self:flex-start; }
.message.user { background:#2979ff; align-self:flex-end; }
.chat-input-container { position:fixed; bottom:0; left:0; right:0; max-width:600px; margin:0 auto; display:flex; background:#1e1e1e; padding:10px; box-shadow:0 -2px 5px rgba(0,0,0,0.5); }
.chat-input { flex:1; padding:10px; border:none; border-radius:8px; background:#2f2f2f; color:#fff; resize:none; font-size:16px; }
.send-button { margin-left:10px; padding:10px 20px; background:#2979ff; color:#fff; border:none; border-radius:8px; cursor:pointer; }
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">GPT-3.5 Beta</div>
<div id="chatMessages" class="chat-messages"></div>
<div class="chat-input-container">
<textarea id="userInput" class="chat-input" placeholder="Mesajınızı yazın..." rows="1"></textarea>
<button id="sendButton" class="send-button">Gönder</button>
</div>
</div>
<script>
const chatMessages = document.getElementById('chatMessages');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
const OPENROUTER_KEY = "XXXXXXXXXXXXXX";
const MODEL = "openai/gpt-4o-mini";
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', function(e){
if(e.key==='Enter' && !e.shiftKey){
e.preventDefault();
sendMessage();
}
});
async function sendMessage(){
const text = userInput.value.trim();
if(!text) return;
addMessage('user', text);
userInput.value = '';
addMessage('bot', 'Yazıyor...');
try{
const res = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${OPENROUTER_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: MODEL,
messages: [{role:'user', content:text}]
})
});
const data = await res.json();
const typingMsg = document.querySelector('.message.bot:last-child');
if(typingMsg) typingMsg.remove();
const assistantMessage = data.choices[0].message.content;
addMessage('bot', assistantMessage);
} catch(err){
const typingMsg = document.querySelector('.message.bot:last-child');
if(typingMsg) typingMsg.remove();
addMessage('bot', 'Hata: ' + err.message);
}
}
function addMessage(sender, text){
const msg = document.createElement('div');
msg.classList.add('message', sender);
msg.textContent = text;
chatMessages.appendChild(msg);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
</script>
</body>
</html>openrouter.ai sitesinden api key alıp kodu düzenleyebilirsiniz.
