|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"> |
|
<title>AI Chat Interface</title> |
|
<style> |
|
*{ |
|
padding: 0; |
|
margin: 0; |
|
font-family: 'Poppins', sans-serif; |
|
box-sizing: border-box; |
|
} |
|
body { |
|
overflow: hidden; |
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
display: none; |
|
} |
|
|
|
body{ |
|
width: 100%; |
|
height: 100vh; |
|
background-color: #212121; |
|
} |
|
|
|
.chat{ |
|
display: flex; |
|
gap: 20px; |
|
padding: 25px; |
|
color: #fff; |
|
font-size: 15px; |
|
font-weight: 300; |
|
} |
|
|
|
.chat img{ |
|
width: 35px; |
|
height: 35px; |
|
border-radius: 50px; |
|
} |
|
|
|
.response{ |
|
background-color: #212121; |
|
} |
|
|
|
.messagebar{ |
|
position: fixed; |
|
bottom: 0; |
|
height: 5rem; |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-color: #212121; |
|
} |
|
|
|
.messagebar .bar-wrapper{ |
|
background-color: #2f2f2f; |
|
border-radius: 20px; |
|
width: 70vw; |
|
padding: 10px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
|
|
.bar-wrapper input{ |
|
width: 100%; |
|
padding: 5px; |
|
border: none; |
|
outline: none; |
|
font-size: 14px; |
|
background: none; |
|
color: #ccc; |
|
} |
|
|
|
.bar-wrapper input::placeholder{ |
|
color: #ccc; |
|
} |
|
|
|
.messagebar button{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background: none; |
|
border: none; |
|
color: #fff; |
|
cursor: pointer; |
|
} |
|
|
|
.message-box{ |
|
height: calc(100vh - 5rem); |
|
overflow-y: auto; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="chatbox-wrapper"> |
|
<div class="message-box" id="chat-container"> |
|
<div class="chat response"> |
|
<img src="https://freelogopng.com/images/all_img/1681038800chatgpt-logo-black.png" alt="AI"> |
|
<span>こんにちは! <br> |
|
どのようにお手伝いできますか？ |
|
</span> |
|
</div> |
|
</div> |
|
<div class="messagebar"> |
|
<div class="bar-wrapper"> |
|
<input type="text" id="user-input" placeholder="Enter your message..."> |
|
<button onclick="sendMessage()"> |
|
<span class="material-symbols-rounded"> |
|
send |
|
</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const messageBar = document.querySelector("#user-input"); |
|
const sendBtn = document.querySelector(".bar-wrapper button"); |
|
const messageBox = document.querySelector("#chat-container"); |
|
|
|
function addMessage(message, isUser) { |
|
const messageElement = document.createElement('div'); |
|
messageElement.classList.add('chat'); |
|
if (!isUser) messageElement.classList.add('response'); |
|
|
|
const imgElement = document.createElement('img'); |
|
imgElement.src = isUser ? "https://wallpaperaccess.com/full/1595920.jpg" : "https://freelogopng.com/images/all_img/1681038800chatgpt-logo-black.png"; |
|
imgElement.alt = isUser ? "User" : "AI"; |
|
|
|
const spanElement = document.createElement('span'); |
|
spanElement.textContent = message; |
|
|
|
messageElement.appendChild(imgElement); |
|
messageElement.appendChild(spanElement); |
|
|
|
messageBox.appendChild(messageElement); |
|
messageBox.scrollTop = messageBox.scrollHeight; |
|
} |
|
|
|
function sendMessage() { |
|
const message = messageBar.value.trim(); |
|
if (message) { |
|
addMessage(message, true); |
|
messageBar.value = ''; |
|
|
|
const eventSource = new EventSource(`/chat?message=${encodeURIComponent(message)}`); |
|
let aiResponse = ''; |
|
|
|
eventSource.onmessage = function(event) { |
|
if (event.data === '[DONE]') { |
|
eventSource.close(); |
|
} else { |
|
aiResponse += event.data; |
|
const aiMessageElement = document.querySelector('.chat.response:last-child span'); |
|
if (aiMessageElement) { |
|
aiMessageElement.textContent = aiResponse; |
|
} else { |
|
addMessage(aiResponse, false); |
|
} |
|
} |
|
}; |
|
|
|
eventSource.onerror = function(error) { |
|
console.error('EventSource failed:', error); |
|
eventSource.close(); |
|
}; |
|
} |
|
} |
|
|
|
messageBar.addEventListener('keypress', function(event) { |
|
if (event.key === 'Enter') { |
|
sendMessage(); |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
