|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
|
<title>AI Chat with Athspi</title> |
|
|
<style> |
|
|
:root { |
|
|
--background-color: #212121; |
|
|
--input-area-color: #212121; |
|
|
--user-bubble-color: #303030; |
|
|
--ai-bubble-color: #2a2a2a; |
|
|
--text-color: #e0e0e0; |
|
|
--placeholder-color: #888888; |
|
|
--icon-color: #b0b0b0; |
|
|
--send-button-color: #4CAF50; |
|
|
--border-color: #333333; |
|
|
--code-bg-color: #1e1e1e; |
|
|
--code-text-color: #f8f8f2; |
|
|
--link-color: #64b5f6; |
|
|
--quote-color: #4CAF50; |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
html, body { |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
|
|
background-color: var(--background-color); |
|
|
color: var(--text-color); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 100%; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
border-left: 1px solid var(--border-color); |
|
|
border-right: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.chat-area { |
|
|
flex-grow: 1; |
|
|
overflow-y: auto; |
|
|
padding: 20px 16px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.welcome-screen { |
|
|
text-align: center; |
|
|
margin: auto; |
|
|
color: var(--placeholder-color); |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.welcome-screen h2 { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 400; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.welcome-screen p { |
|
|
font-size: 1rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.welcome-screen.hidden { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.message { |
|
|
max-width: 85%; |
|
|
padding: 12px 16px; |
|
|
border-radius: 18px; |
|
|
margin-bottom: 12px; |
|
|
word-wrap: break-word; |
|
|
line-height: 1.6; |
|
|
font-size: 1rem; |
|
|
position: relative; |
|
|
animation: fadeIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background-color: var(--user-bubble-color); |
|
|
align-self: flex-end; |
|
|
border-bottom-right-radius: 4px; |
|
|
} |
|
|
|
|
|
.ai-message { |
|
|
background-color: var(--ai-bubble-color); |
|
|
align-self: flex-start; |
|
|
border-bottom-left-radius: 4px; |
|
|
padding-bottom: 30px; |
|
|
} |
|
|
|
|
|
.ai-message-content { |
|
|
overflow: hidden; |
|
|
} |
|
|
.ai-message-content p { margin-bottom: 12px; } |
|
|
.ai-message-content p:last-child { margin-bottom: 0; } |
|
|
.ai-message-content strong { color: #ffffff; font-weight: 600; } |
|
|
.ai-message-content em { color: #d1d1d1; font-style: italic; } |
|
|
.ai-message-content a { color: var(--link-color); text-decoration: none; word-break: break-all; } |
|
|
.ai-message-content a:hover { text-decoration: underline; } |
|
|
.ai-message-content ul, .ai-message-content ol { padding-left: 24px; margin-bottom: 12px; } |
|
|
.ai-message-content li { margin-bottom: 6px; } |
|
|
.ai-message-content blockquote { |
|
|
border-left: 3px solid var(--quote-color); |
|
|
padding-left: 12px; |
|
|
margin-left: 0; |
|
|
color: #bdbdbd; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
.ai-message-content pre { |
|
|
background-color: var(--code-bg-color); |
|
|
border-radius: 6px; |
|
|
padding: 12px; |
|
|
overflow-x: auto; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
.ai-message-content code { |
|
|
font-family: 'Courier New', Courier, monospace; |
|
|
background-color: var(--code-bg-color); |
|
|
padding: 2px 4px; |
|
|
border-radius: 3px; |
|
|
color: var(--code-text-color); |
|
|
font-size: 0.9em; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
.ai-message-content .code-block code { |
|
|
padding: 0; |
|
|
background-color: transparent; |
|
|
color: inherit; |
|
|
} |
|
|
|
|
|
.audio-button { |
|
|
position: absolute; |
|
|
bottom: 6px; |
|
|
right: 8px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
z-index: 10; |
|
|
} |
|
|
.audio-button:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.audio-button svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
fill: var(--icon-color); |
|
|
transition: fill 0.2s; |
|
|
} |
|
|
.audio-button:hover svg { |
|
|
fill: white; |
|
|
} |
|
|
.audio-button.loading .speaker-icon { |
|
|
display: none; |
|
|
} |
|
|
.audio-button .loader { |
|
|
display: none; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
border: 2px solid #f3f3f3; |
|
|
border-top: 2px solid var(--send-button-color); |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
.audio-button.loading .loader { |
|
|
display: block; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 12px 16px; |
|
|
} |
|
|
.typing-indicator span { |
|
|
height: 8px; width: 8px; background-color: var(--icon-color); border-radius: 50%; display: inline-block; margin: 0 2px; |
|
|
animation: bounce 1.4s infinite both; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
|
|
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 80%, 100% { transform: scale(0); } |
|
|
40% { transform: scale(1.0); } |
|
|
} |
|
|
|
|
|
.input-area { |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
padding: 10px 16px; |
|
|
border-top: 1px solid var(--border-color); |
|
|
background-color: var(--input-area-color); |
|
|
flex-shrink: 0; |
|
|
} |
|
|
.input-wrapper { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
width: 100%; |
|
|
background-color: var(--user-bubble-color); |
|
|
border-radius: 24px; |
|
|
padding: 4px; |
|
|
} |
|
|
.input-area textarea { |
|
|
flex-grow: 1; |
|
|
border: none; |
|
|
background: transparent; |
|
|
color: var(--text-color); |
|
|
resize: none; |
|
|
font-size: 1rem; |
|
|
line-height: 1.5; |
|
|
max-height: 120px; |
|
|
overflow-y: auto; |
|
|
padding: 8px 12px; |
|
|
font-family: inherit; |
|
|
outline: none; |
|
|
} |
|
|
.input-area textarea::placeholder { color: var(--placeholder-color); } |
|
|
|
|
|
.input-area .icon-button { |
|
|
background: none; |
|
|
border: none; |
|
|
padding: 8px; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: opacity 0.2s; |
|
|
} |
|
|
.input-area .icon-button:hover { |
|
|
opacity: 0.8; |
|
|
} |
|
|
.input-area .icon-button svg { width: 24px; height: 24px; fill: var(--icon-color); } |
|
|
|
|
|
.send-button { |
|
|
background-color: var(--send-button-color); |
|
|
border-radius: 50%; |
|
|
padding: 8px; |
|
|
transition: background-color 0.2s, opacity 0.2s; |
|
|
} |
|
|
.send-button.disabled { |
|
|
background-color: #555; |
|
|
cursor: not-allowed; |
|
|
opacity: 0.6; |
|
|
} |
|
|
.send-button.disabled svg { |
|
|
fill: #888; |
|
|
} |
|
|
.send-button svg { fill: white; width: 24px; height: 24px; } |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="chat-container"> |
|
|
<main class="chat-area"> |
|
|
<div class="welcome-screen"> |
|
|
<h2>Welcome to Athspi!</h2> |
|
|
<p>Hello! I'm your AI assistant Athspi powered by Gemini. Ask me anything - I can explain concepts, generate ideas, or help with coding!</p> |
|
|
<p>Try asking me something like: <em>"Explain quantum computing in simple terms"</em> or <em>"Help me debug this Python code"</em></p> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="input-area"> |
|
|
<form id="chat-form" class="input-wrapper"> |
|
|
<button type="button" class="icon-button" id="attach-button"> |
|
|
<svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H10v9.5a2.5 2.5 0 0 0 5 0V5c-1.38 0-2.5 1.12-2.5 2.5v10.5c0 1.38-1.12 2.5-2.5 2.5s-2.5-1.12-2.5-2.5V5a4 4 0 0 1 8 0v11.5c-1.1 0-2-.9-2-2V6h-1.5z"></path></svg> |
|
|
</button> |
|
|
<textarea id="message-input" placeholder="Ask anything..." rows="1"></textarea> |
|
|
<button type="submit" id="send-button" class="icon-button send-button disabled"> |
|
|
<svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"></path></svg> |
|
|
</button> |
|
|
</form> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
const chatArea = document.querySelector('.chat-area'); |
|
|
const welcomeScreen = document.querySelector('.welcome-screen'); |
|
|
const sendButton = document.getElementById('send-button'); |
|
|
const attachButton = document.getElementById('attach-button'); |
|
|
|
|
|
let currentAudio = null; |
|
|
|
|
|
const adjustTextareaHeight = () => { |
|
|
messageInput.style.height = 'auto'; |
|
|
messageInput.style.height = `${messageInput.scrollHeight}px`; |
|
|
updateSendButtonState(); |
|
|
}; |
|
|
|
|
|
const updateSendButtonState = () => { |
|
|
const isDisabled = messageInput.value.trim() === ''; |
|
|
sendButton.classList.toggle('disabled', isDisabled); |
|
|
sendButton.disabled = isDisabled; |
|
|
}; |
|
|
|
|
|
const scrollToBottom = () => { |
|
|
chatArea.scrollTop = chatArea.scrollHeight; |
|
|
}; |
|
|
|
|
|
const addMessage = (content, sender, isHTML = false, plainText = '') => { |
|
|
welcomeScreen.classList.add('hidden'); |
|
|
|
|
|
const messageElement = document.createElement('div'); |
|
|
messageElement.classList.add('message', `${sender}-message`); |
|
|
|
|
|
const contentDiv = document.createElement('div'); |
|
|
if (isHTML) { |
|
|
contentDiv.classList.add(`${sender}-message-content`); |
|
|
contentDiv.innerHTML = content; |
|
|
} else { |
|
|
contentDiv.textContent = content; |
|
|
} |
|
|
messageElement.appendChild(contentDiv); |
|
|
|
|
|
if (sender === 'ai' && plainText) { |
|
|
const audioButton = document.createElement('button'); |
|
|
audioButton.classList.add('audio-button'); |
|
|
audioButton.dataset.plainText = plainText; |
|
|
audioButton.innerHTML = ` |
|
|
<svg class="speaker-icon" viewBox="0 0 24 24"> |
|
|
<path d="M3 10v4c0 .55.45 1 1 1h3.5l5.5 5V5L7.5 9H4c-.55 0-1 .45-1 1zm14 0h-1.5c-2.31 0-4.22-1.74-4.47-4H10v12h1.5v-2.22c.25-2.26 2.16-4.22 4.47-4.22H17c1.1 0 2 .9 2 2s-.9 2-2 2h-1.5v2H17c2.21 0 4-1.79 4-4s-1.79-4-4-4z"/> |
|
|
</svg> |
|
|
<div class="loader"></div> |
|
|
`; |
|
|
audioButton.title = "Listen to response"; |
|
|
audioButton.addEventListener('click', () => playAudio(audioButton, plainText)); |
|
|
messageElement.appendChild(audioButton); |
|
|
} |
|
|
|
|
|
chatArea.appendChild(messageElement); |
|
|
scrollToBottom(); |
|
|
return messageElement; |
|
|
}; |
|
|
|
|
|
const showTypingIndicator = () => { |
|
|
const indicatorElement = document.createElement('div'); |
|
|
indicatorElement.classList.add('message', 'ai-message', 'typing-indicator'); |
|
|
indicatorElement.innerHTML = '<span></span><span></span><span></span>'; |
|
|
chatArea.appendChild(indicatorElement); |
|
|
scrollToBottom(); |
|
|
return indicatorElement; |
|
|
}; |
|
|
|
|
|
const playAudio = async (buttonElement, text) => { |
|
|
if (currentAudio) { |
|
|
currentAudio.pause(); |
|
|
currentAudio.currentTime = 0; |
|
|
currentAudio = null; |
|
|
} |
|
|
|
|
|
buttonElement.classList.add('loading'); |
|
|
buttonElement.disabled = true; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/generate-audio', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ text: text }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (data.error) { |
|
|
throw new Error(data.error); |
|
|
} |
|
|
|
|
|
currentAudio = new Audio(data.audio_url); |
|
|
currentAudio.play(); |
|
|
|
|
|
currentAudio.onended = () => { |
|
|
buttonElement.classList.remove('loading'); |
|
|
buttonElement.disabled = false; |
|
|
currentAudio = null; |
|
|
}; |
|
|
|
|
|
currentAudio.onerror = () => { |
|
|
console.error("Error playing audio."); |
|
|
alert("Could not play audio. Please try again."); |
|
|
buttonElement.classList.remove('loading'); |
|
|
buttonElement.disabled = false; |
|
|
currentAudio = null; |
|
|
}; |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Error generating audio:", error); |
|
|
alert("Failed to generate audio. " + (error.message || "Please try again.")); |
|
|
buttonElement.classList.remove('loading'); |
|
|
buttonElement.disabled = false; |
|
|
} |
|
|
}; |
|
|
|
|
|
const getAIResponse = async (userMessage) => { |
|
|
const indicator = showTypingIndicator(); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/chat', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ message: userMessage }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (data.error) { |
|
|
throw new Error(data.error); |
|
|
} |
|
|
|
|
|
chatArea.removeChild(indicator); |
|
|
addMessage(data.response_html, 'ai', true, data.response_text); |
|
|
|
|
|
} catch (error) { |
|
|
chatArea.removeChild(indicator); |
|
|
addMessage("Sorry, I encountered an error. Please try again.", 'ai'); |
|
|
console.error("Error:", error); |
|
|
} |
|
|
}; |
|
|
|
|
|
chatForm.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
const message = messageInput.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
addMessage(message, 'user'); |
|
|
messageInput.value = ''; |
|
|
adjustTextareaHeight(); |
|
|
|
|
|
await getAIResponse(message); |
|
|
} |
|
|
}); |
|
|
|
|
|
messageInput.addEventListener('keydown', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
chatForm.dispatchEvent(new Event('submit')); |
|
|
} |
|
|
}); |
|
|
|
|
|
messageInput.addEventListener('input', adjustTextareaHeight); |
|
|
|
|
|
attachButton.addEventListener('click', () => { |
|
|
alert("Attachment feature not implemented yet!"); |
|
|
messageInput.focus(); |
|
|
}); |
|
|
|
|
|
updateSendButtonState(); |
|
|
messageInput.focus(); |
|
|
|
|
|
const isFirstVisit = !localStorage.getItem('chatVisited'); |
|
|
if (isFirstVisit) { |
|
|
localStorage.setItem('chatVisited', 'true'); |
|
|
setTimeout(() => {}, 500); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
