| <!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/transformers@3.0.0'; |
| |
| |
| 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> |
