|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Chat</title> |
|
|
<link rel="manifest" href="/manifest.json"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
height: 600px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
overflow: hidden; |
|
|
animation: slideUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 15px 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.header .avatar { |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
border-radius: 50%; |
|
|
background: #ffffff33; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 20px; |
|
|
font-weight: 500; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.message-counter { |
|
|
background: #ef4444; |
|
|
color: white; |
|
|
font-size: 12px; |
|
|
padding: 4px 8px; |
|
|
border-radius: 12px; |
|
|
line-height: 1; |
|
|
} |
|
|
|
|
|
.status { |
|
|
padding: 10px 20px; |
|
|
background: #f7f9fc; |
|
|
border-bottom: 1px solid #e1e8ed; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
background: #fbbf24; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.status-indicator.ready { |
|
|
background: #10b981; |
|
|
animation: none; |
|
|
} |
|
|
|
|
|
.status-indicator.error { |
|
|
background: #ef4444; |
|
|
animation: none; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.message { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.message.user { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
max-width: 70%; |
|
|
padding: 12px 16px; |
|
|
border-radius: 18px; |
|
|
word-wrap: break-word; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.message.user .message-bubble { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
border-bottom-right-radius: 4px; |
|
|
} |
|
|
|
|
|
.message.ai .message-bubble { |
|
|
background: #f1f3f5; |
|
|
color: #1a1a1a; |
|
|
border-bottom-left-radius: 4px; |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.message.user .avatar { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
|
|
|
.message.ai .avatar { |
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: none; |
|
|
padding: 12px 16px; |
|
|
background: #f1f3f5; |
|
|
border-radius: 18px; |
|
|
border-bottom-left-radius: 4px; |
|
|
width: fit-content; |
|
|
} |
|
|
|
|
|
.typing-indicator.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
display: inline-block; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #667eea; |
|
|
margin: 0 2px; |
|
|
animation: typing 1.4s infinite; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
0%, 60%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
30% { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
} |
|
|
|
|
|
.input-container { |
|
|
padding: 20px; |
|
|
background: #f7f9fc; |
|
|
border-top: 1px solid #e1e8ed; |
|
|
} |
|
|
|
|
|
.input-wrapper { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.message-input { |
|
|
flex: 1; |
|
|
padding: 12px 16px; |
|
|
border: 2px solid #e1e8ed; |
|
|
border-radius: 25px; |
|
|
font-size: 14px; |
|
|
outline: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.message-input:focus { |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
|
|
|
.send-button { |
|
|
padding: 12px 24px; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.send-button:hover:not(:disabled) { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
.send-button:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
background: #fee; |
|
|
color: #c00; |
|
|
padding: 10px; |
|
|
border-radius: 8px; |
|
|
margin: 10px 20px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.error-message.show { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.footer { |
|
|
text-align: center; |
|
|
padding: 10px; |
|
|
font-size: 12px; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.footer a { |
|
|
color: #667eea; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.container { |
|
|
height: 100vh; |
|
|
max-width: 100%; |
|
|
border-radius: 0; |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
max-width: 85%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<div class="message-counter">3</div> |
|
|
<div class="avatar" id="friendAvatar"></div> |
|
|
<h1 id="friendName">Loading...</h1> |
|
|
</div> |
|
|
|
|
|
<div class="status"> |
|
|
<div class="status-indicator" id="statusIndicator"></div> |
|
|
<span id="statusText">Connecting...</span> |
|
|
</div> |
|
|
|
|
|
<div class="error-message" id="errorMessage"></div> |
|
|
|
|
|
<div class="chat-container" id="chatContainer"> |
|
|
<div class="message ai"> |
|
|
<div class="avatar" id="aiAvatar">AI</div> |
|
|
<div class="message-bubble"> |
|
|
Hey! What's up? |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-container"> |
|
|
<div class="input-wrapper"> |
|
|
<input |
|
|
type="text" |
|
|
class="message-input" |
|
|
id="messageInput" |
|
|
placeholder="Message..." |
|
|
disabled |
|
|
> |
|
|
<button class="send-button" id="sendButton" disabled> |
|
|
<span>Send</span> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer"> |
|
|
Powered by <a href="https://huggingface.co/HuggingFaceTB/SmolLM-135M-Instruct" target="_blank">SmolLM</a> from Hugging Face (Apache 2.0). |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
if ('serviceWorker' in navigator) { |
|
|
window.addEventListener('load', () => { |
|
|
navigator.serviceWorker.register('/sw.js') |
|
|
.then(reg => console.log('Service Worker registered')) |
|
|
.catch(err => console.error('Service Worker registration failed:', err)); |
|
|
}); |
|
|
} |
|
|
|
|
|
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]'; |
|
|
|
|
|
|
|
|
env.allowLocalModels = false; |
|
|
env.useBrowserCache = true; |
|
|
|
|
|
let generator = null; |
|
|
let isProcessing = false; |
|
|
let conversationHistory = []; |
|
|
let modelId = /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase()) |
|
|
? 'HuggingFaceTB/SmolLM-135M-Instruct' |
|
|
: 'HuggingFaceTB/SmolLM2-360M-Instruct'; |
|
|
|
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
const messageInput = document.getElementById('messageInput'); |
|
|
const sendButton = document.getElementById('sendButton'); |
|
|
const statusIndicator = document.getElementById('statusIndicator'); |
|
|
const statusText = document.getElementById('statusText'); |
|
|
const errorMessage = document.getElementById('errorMessage'); |
|
|
const friendNameElement = document.getElementById('friendName'); |
|
|
const friendAvatar = document.getElementById('friendAvatar'); |
|
|
const aiAvatar = document.getElementById('aiAvatar'); |
|
|
|
|
|
|
|
|
let friendName = prompt('Who are you chatting with?', 'Alex'); |
|
|
friendName = friendName ? friendName.trim() : 'Alex'; |
|
|
friendNameElement.textContent = friendName; |
|
|
friendAvatar.textContent = friendName[0].toUpperCase(); |
|
|
aiAvatar.textContent = friendName[0].toUpperCase(); |
|
|
|
|
|
|
|
|
function checkBrowserCompatibility() { |
|
|
const ua = navigator.userAgent.toLowerCase(); |
|
|
const isMobile = /mobile|android|iphone|ipad/.test(ua); |
|
|
const isChrome = ua.includes('chrome') && !ua.includes('edge'); |
|
|
const isEdge = ua.includes('edg/'); |
|
|
const isSafari = ua.includes('safari') && !ua.includes('chrome'); |
|
|
return { isMobile, isChrome, isEdge, isSafari }; |
|
|
} |
|
|
|
|
|
|
|
|
async function checkWebGPU() { |
|
|
if (!navigator.gpu) return false; |
|
|
try { |
|
|
const adapter = await navigator.gpu.requestAdapter(); |
|
|
return !!adapter; |
|
|
} catch (e) { |
|
|
console.error('WebGPU check failed:', e); |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function initializeModel(attemptSmallerModel = false) { |
|
|
try { |
|
|
statusText.textContent = `Connecting...`; |
|
|
|
|
|
generator = await pipeline( |
|
|
'text-generation', |
|
|
attemptSmallerModel ? 'HuggingFaceTB/SmolLM-135M-Instruct' : modelId |
|
|
); |
|
|
|
|
|
statusIndicator.classList.add('ready'); |
|
|
statusText.textContent = 'Connected'; |
|
|
messageInput.disabled = false; |
|
|
sendButton.disabled = false; |
|
|
messageInput.focus(); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error loading model:', error, error.stack); |
|
|
if (!attemptSmallerModel && error.message.includes('memory')) { |
|
|
console.warn('Memory error detected, trying smaller model...'); |
|
|
modelId = 'HuggingFaceTB/SmolLM-135M-Instruct'; |
|
|
initializeModel(true); |
|
|
} else { |
|
|
statusIndicator.classList.add('error'); |
|
|
statusText.textContent = 'Offline'; |
|
|
showError(`Oops, can't connect right now. Try refreshing?`); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const browser = checkBrowserCompatibility(); |
|
|
if (browser.isMobile && (browser.isSafari || (!browser.isChrome && !browser.isEdge))) { |
|
|
statusText.textContent = 'Connecting...'; |
|
|
showError('Hey, this works best on Chrome or Edge. Give one of those a try?'); |
|
|
initializeModel(); |
|
|
} else { |
|
|
checkWebGPU().then(supported => { |
|
|
if (!supported) { |
|
|
statusText.textContent = 'Connecting...'; |
|
|
showError('Running a bit slow, but we’re good! Try a short message.'); |
|
|
initializeModel(); |
|
|
} else { |
|
|
initializeModel(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
errorMessage.textContent = message; |
|
|
errorMessage.classList.add('show'); |
|
|
setTimeout(() => { |
|
|
errorMessage.classList.remove('show'); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
function addMessage(content, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message ${isUser ? 'user' : 'ai'}`; |
|
|
|
|
|
const avatar = document.createElement('div'); |
|
|
avatar.className = 'avatar'; |
|
|
avatar.textContent = isUser ? 'You' : friendName[0].toUpperCase(); |
|
|
|
|
|
const bubble = document.createElement('div'); |
|
|
bubble.className = 'message-bubble'; |
|
|
bubble.textContent = content; |
|
|
|
|
|
messageDiv.appendChild(avatar); |
|
|
messageDiv.appendChild(bubble); |
|
|
|
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
|
|
|
if (isUser) { |
|
|
conversationHistory.push(`user: ${content}`); |
|
|
} else { |
|
|
conversationHistory.push(`assistant: ${content}`); |
|
|
} |
|
|
if (conversationHistory.length > 2) { |
|
|
conversationHistory = conversationHistory.slice(-2); |
|
|
} |
|
|
} |
|
|
|
|
|
function showTypingIndicator() { |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'message ai'; |
|
|
typingDiv.id = 'typingIndicator'; |
|
|
|
|
|
const avatar = document.createElement('div'); |
|
|
avatar.className = 'avatar'; |
|
|
avatar.textContent = friendName[0].toUpperCase(); |
|
|
|
|
|
const indicator = document.createElement('div'); |
|
|
indicator.className = 'typing-indicator active'; |
|
|
indicator.innerHTML = '<span></span><span></span><span></span>'; |
|
|
|
|
|
typingDiv.appendChild(avatar); |
|
|
typingDiv.appendChild(indicator); |
|
|
|
|
|
chatContainer.appendChild(typingDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
function removeTypingIndicator() { |
|
|
const indicator = document.getElementById('typingIndicator'); |
|
|
if (indicator) { |
|
|
indicator.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
async function generateResponse(userMessage) { |
|
|
if (!generator || isProcessing) return; |
|
|
|
|
|
isProcessing = true; |
|
|
sendButton.disabled = true; |
|
|
messageInput.disabled = true; |
|
|
|
|
|
showTypingIndicator(); |
|
|
|
|
|
try { |
|
|
const history = conversationHistory.length > 0 |
|
|
? conversationHistory.join('\n') + '\n' |
|
|
: ''; |
|
|
const prompt = `<|im_start|>user\n${history}${userMessage}\n<|im_end|>\n<|im_start|>assistant\n`; |
|
|
|
|
|
const output = await generator(prompt, { |
|
|
max_new_tokens: 100, |
|
|
temperature: 0.8, |
|
|
top_p: 0.9, |
|
|
return_full_text: false |
|
|
}); |
|
|
|
|
|
removeTypingIndicator(); |
|
|
|
|
|
let response = output[0].generated_text.trim(); |
|
|
response = response.replace(/<\|im_end\|>|<\|im_start\|>.*$/g, '').trim(); |
|
|
|
|
|
if (response) { |
|
|
addMessage(response); |
|
|
} else { |
|
|
addMessage("Not sure what to say... Wanna try that again?"); |
|
|
console.warn('Empty or invalid response received from model'); |
|
|
showError('Hmm, I got nothing. Try a different question?'); |
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error generating response:', error, error.stack); |
|
|
removeTypingIndicator(); |
|
|
let errorMsg = error.message || 'Unknown error'; |
|
|
if (error.message.includes('memory')) { |
|
|
errorMsg = 'Phone’s a bit overloaded. Close some apps?'; |
|
|
} else if (error.message.includes('WebGPU')) { |
|
|
errorMsg = 'Need a better connection or browser. Try Chrome?'; |
|
|
} |
|
|
addMessage("Oops, something’s up! Try again?"); |
|
|
showError(`Can’t reply right now: ${errorMsg}`); |
|
|
} finally { |
|
|
isProcessing = false; |
|
|
sendButton.disabled = false; |
|
|
messageInput.disabled = false; |
|
|
messageInput.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
async function handleSend() { |
|
|
const inputMessage = messageInput.value.trim(); |
|
|
if (!inputMessage || !generator || isProcessing) return; |
|
|
|
|
|
addMessage(inputMessage, true); |
|
|
messageInput.value = ''; |
|
|
|
|
|
await generateResponse(inputMessage); |
|
|
} |
|
|
|
|
|
|
|
|
sendButton.addEventListener('click', handleSend); |
|
|
|
|
|
messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
handleSend(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
