Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>AtlasVision — Apple Intelligence UI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #0a84ff; | |
| --primary-light: rgba(10, 132, 255, 0.15); | |
| --background: #0d0d0d; | |
| --glass: rgba(255, 255, 255, 0.06); | |
| --glow: 0 0 24px rgba(10, 132, 255, 0.45); | |
| --border: rgba(255, 255, 255, 0.08); | |
| --text: #ffffff; | |
| --text-secondary: rgba(255, 255, 255, 0.7); | |
| --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: var(--font); | |
| background: var(--background); | |
| color: var(--text); | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .bg-pattern { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: radial-gradient(circle at 25% 25%, rgba(10, 132, 255, 0.1) 0%, transparent 50%); | |
| z-index: -1; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1000px; | |
| height: 85vh; | |
| background: var(--glass); | |
| border-radius: 24px; | |
| border: 1px solid var(--border); | |
| box-shadow: var(--glow); | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| header { | |
| padding: 20px 24px; | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| text-align: center; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .logo { | |
| width: 28px; | |
| height: 28px; | |
| background: linear-gradient(135deg, var(--primary), #5e5eff); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .logo i { | |
| font-size: 14px; | |
| } | |
| .chat { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| .message { | |
| padding: 14px 20px; | |
| border-radius: 18px; | |
| max-width: 80%; | |
| word-wrap: break-word; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| animation: fadeIn 0.3s forwards; | |
| position: relative; | |
| line-height: 1.5; | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .user { | |
| align-self: flex-end; | |
| background-color: var(--primary); | |
| color: white; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .assistant { | |
| align-self: flex-start; | |
| background-color: var(--primary-light); | |
| color: var(--text); | |
| border-bottom-left-radius: 4px; | |
| } | |
| .assistant::before { | |
| content: ''; | |
| position: absolute; | |
| left: -8px; | |
| top: 0; | |
| width: 0; | |
| height: 0; | |
| border: 8px solid transparent; | |
| border-right-color: var(--primary-light); | |
| border-left: 0; | |
| } | |
| .user::before { | |
| content: ''; | |
| position: absolute; | |
| right: -8px; | |
| top: 0; | |
| width: 0; | |
| height: 0; | |
| border: 8px solid transparent; | |
| border-left-color: var(--primary); | |
| border-right: 0; | |
| } | |
| .typing-indicator { | |
| display: flex; | |
| gap: 6px; | |
| padding: 14px 20px; | |
| background-color: var(--primary-light); | |
| border-radius: 18px; | |
| align-self: flex-start; | |
| width: fit-content; | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| background-color: var(--text-secondary); | |
| border-radius: 50%; | |
| animation: typingAnimation 1.4s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typingAnimation { | |
| 0%, 60%, 100% { | |
| transform: translateY(0); | |
| opacity: 0.6; | |
| } | |
| 30% { | |
| transform: translateY(-5px); | |
| opacity: 1; | |
| } | |
| } | |
| footer { | |
| display: flex; | |
| border-top: 1px solid var(--border); | |
| padding: 16px; | |
| position: relative; | |
| } | |
| .input-container { | |
| flex: 1; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| input[type="text"] { | |
| flex: 1; | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 12px 48px 12px 16px; | |
| color: white; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: all 0.3s ease; | |
| } | |
| input[type="text"]:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2); | |
| } | |
| .input-icons { | |
| position: absolute; | |
| right: 12px; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .input-icon { | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: color 0.2s ease; | |
| } | |
| .input-icon:hover { | |
| color: var(--primary); | |
| } | |
| button { | |
| margin-left: 12px; | |
| padding: 12px 20px; | |
| background-color: var(--primary); | |
| border: none; | |
| border-radius: 12px; | |
| color: white; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease-in-out; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| button:hover { | |
| background-color: #007aff; | |
| transform: translateY(-1px); | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| .timestamp { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| text-align: right; | |
| } | |
| .download { | |
| margin-top: 20px; | |
| font-size: 0.95rem; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| padding: 12px 24px; | |
| background: var(--glass); | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| .download:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .download a { | |
| color: var(--primary); | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: color 0.2s ease; | |
| } | |
| .download a:hover { | |
| color: #007aff; | |
| } | |
| /* Custom scrollbar */ | |
| .chat::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .chat::-webkit-scrollbar-thumb { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-radius: 3px; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .container { | |
| width: 95%; | |
| height: 82vh; | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| button { | |
| padding: 12px 16px; | |
| } | |
| .download { | |
| padding: 10px 16px; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-pattern"></div> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-atlas"></i> | |
| </div> | |
| <span>AtlasVision — Apple Intelligence UI</span> | |
| </header> | |
| <div class="chat" id="chat"> | |
| <div class="message assistant"> | |
| <div>👋 Welcome to AtlasVision, your AI-powered assistant with Apple Intelligence.</div> | |
| <div class="timestamp">Just now</div> | |
| </div> | |
| <div class="message assistant"> | |
| <div>I can help with information, creative ideas, problem solving, and more. What would you like to explore today?</div> | |
| <div class="timestamp">Just now</div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="input-container"> | |
| <input type="text" id="input" placeholder="Ask me anything..." autocomplete="off" /> | |
| <div class="input-icons"> | |
| <i class="fas fa-microphone input-icon" title="Voice input" id="voice-btn"></i> | |
| <i class="fas fa-image input-icon" title="Image upload"></i> | |
| </div> | |
| </div> | |
| <button onclick="sendMessage()"> | |
| <span>Send</span> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </footer> | |
| </div> | |
| <div class="download"> | |
| ⬇️ Download the full AtlasVision desktop app:<br/> | |
| <a href="https://huggingface.co/spaces/lattmamb/AtlasVisionApp/resolve/main/AtlasVisionInstaller.dmg" target="_blank"> | |
| <i class="fab fa-apple"></i> Download for macOS (.dmg) | |
| </a> | |
| </div> | |
| <script> | |
| const chat = document.getElementById("chat"); | |
| const input = document.getElementById("input"); | |
| const voiceBtn = document.getElementById("voice-btn"); | |
| // Get current time in HH:MM format | |
| function getCurrentTime() { | |
| const now = new Date(); | |
| const hours = now.getHours().toString().padStart(2, '0'); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| return `${hours}:${minutes}`; | |
| } | |
| // Voice recognition setup | |
| let recognition; | |
| try { | |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| recognition = new SpeechRecognition(); | |
| recognition.continuous = false; | |
| recognition.interimResults = false; | |
| recognition.onresult = (event) => { | |
| const transcript = event.results[0][0].transcript; | |
| input.value = transcript; | |
| sendMessage(); | |
| }; | |
| recognition.onerror = (event) => { | |
| addMessage("⚠️ Voice recognition error: " + event.error, "assistant"); | |
| }; | |
| voiceBtn.addEventListener('click', () => { | |
| try { | |
| recognition.start(); | |
| voiceBtn.style.color = "var(--primary)"; | |
| addMessage("🎤 Listening... Speak now", "assistant"); | |
| } catch (e) { | |
| addMessage("⚠️ Voice recognition not supported in your browser", "assistant"); | |
| } | |
| }); | |
| } catch (e) { | |
| voiceBtn.style.display = "none"; | |
| } | |
| async function sendMessage() { | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| // Add user message | |
| addMessage(text, "user"); | |
| input.value = ""; | |
| // Show typing indicator | |
| const typingIndicator = document.createElement("div"); | |
| typingIndicator.className = "typing-indicator"; | |
| typingIndicator.innerHTML = ` | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| `; | |
| chat.appendChild(typingIndicator); | |
| chat.scrollTop = chat.scrollHeight; | |
| try { | |
| // Send to backend API | |
| const response = await fetch("/query", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ | |
| prompt: text | |
| }) | |
| }); | |
| const data = await response.json(); | |
| // Remove typing indicator | |
| chat.removeChild(typingIndicator); | |
| // Add assistant message | |
| addMessage(data.response || "I couldn't process that request.", "assistant"); | |
| } catch (error) { | |
| console.error("Error:", error); | |
| chat.removeChild(typingIndicator); | |
| addMessage("⚠️ Could not connect to the backend. Please try again later.", "assistant"); | |
| } | |
| } | |
| function addMessage(content, role) { | |
| const msg = document.createElement("div"); | |
| msg.className = `message ${role}`; | |
| msg.innerHTML = ` | |
| <div>${content}</div> | |
| <div class="timestamp">${getCurrentTime()}</div> | |
| `; | |
| chat.appendChild(msg); | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| // Allow sending message with Enter key | |
| input.addEventListener("keypress", function(e) { | |
| if (e.key === "Enter") { | |
| sendMessage(); | |
| } | |
| }); | |
| // Focus input on page load | |
| window.addEventListener("load", () => { | |
| input.focus(); | |
| }); | |
| // Add click handler for image upload | |
| document.querySelector('.fa-image').addEventListener('click', () => { | |
| addMessage("📷 Image upload feature coming soon!", "assistant"); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lattmamb/atlasvisionapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |