Update static/scripts.js

static/scripts.js

@@ -1,220 +1,179 @@
-document.addEventListener("DOMContentLoaded", () => {
-  // Elements
-  const starfield = document.getElementById("starfield")
-  const ctx = starfield.getContext("2d")
-  const messages = document.getElementById("messages")
-  const messageInput = document.getElementById("messageInput")
-  const sendButton = document.getElementById("sendButton")
-  const fileInput = document.getElementById("fileInput")
-  const themeToggle = document.getElementById("themeToggle")
-  const loader = document.getElementById("loader")
-  const welcomeMessage = document.getElementById("welcomeMessage")
-
-  // Variables
-  let stars = []
-  let selectedFile = null
-  let isDarkTheme = true
-
-  // Initialize
-  initStarfield()
-  animateStars()
-  setupEventListeners()
-
-  // Functions
-  function initStarfield() {
-    starfield.width = window.innerWidth
-    starfield.height = window.innerHeight
-
-    // Create stars
-    const starCount = Math.floor((window.innerWidth * window.innerHeight) / 10000)
-    stars = []
-
-    for (let i = 0; i < starCount; i++) {
-      stars.push({
-        x: Math.random() * starfield.width,
-        y: Math.random() * starfield.height,
-        radius: Math.random() * 1.5,
-        opacity: Math.random() * 0.8 + 0.2,
-        speed: Math.random() * 0.05,
-      })
+document.addEventListener('DOMContentLoaded', () => {
+    const chatBar = document.getElementById('chatBar');
+    const chatInput = document.getElementById('chatInput');
+    const sendButton = document.getElementById('sendButton');
+    const fileInput = document.getElementById('fileInput');
+    const loader = document.getElementById('loader');
+    const welcome = document.getElementById('welcome');
+
+    let selectedFile = null;
+
+    // Star Animation
+    const canvas = document.getElementById('stars');
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const stars = [];
+    for (let i = 0; i < 80; i++) {
+        stars.push({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            radius: Math.random() * 2 + 0.5,
+            opacity: Math.random() * 0.5 + 0.4,
+            speed: Math.random() * 0.03
+        });
     }
-  }
-
-  function animateStars() {
-    ctx.clearRect(0, 0, starfield.width, starfield.height)
-
-    stars.forEach((star) => {
-      // Update star position
-      star.y += star.speed
-
-      // Reset star if it goes off screen
-      if (star.y > starfield.height) {
-        star.y = 0
-        star.x = Math.random() * starfield.width
-      }
-
-      // Draw star
-      ctx.beginPath()
-      ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
-      ctx.fillStyle = `rgba(var(--star-color), ${star.opacity})`
-      ctx.fill()
-    })
-
-    requestAnimationFrame(animateStars)
-  }
-
-  function setupEventListeners() {
-    // Send message
-    sendButton.addEventListener("click", sendMessage)
-    messageInput.addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault()
-        sendMessage()
-      }
-    })
-
-    // File input
-    fileInput.addEventListener("change", handleFileSelection)
-
-    // Theme toggle
-    themeToggle.addEventListener("click", toggleTheme)
-
-    // Window resize
-    window.addEventListener("resize", initStarfield)
-
-    // Suggestion chips
-    document.querySelectorAll(".chip").forEach((chip) => {
-      chip.addEventListener("click", () => {
-        messageInput.value = chip.textContent.trim()
-        messageInput.focus()
-      })
-    })
-  }
-
-  function sendMessage() {
-    const text = messageInput.value.trim()
-
-    if (!text && !selectedFile) return
-
-    // Hide welcome message
-    welcomeMessage.style.display = "none"
-
-    // Add user message
-    addMessage(text, true)
-
-    // Clear input
-    messageInput.value = ""
-
-    // Show loader
-    loader.classList.add("active")
-
-    // Simulate AI response (replace with actual API call)
-    setTimeout(() => {
-      // Hide loader
-      loader.classList.remove("active")
-
-      // Add AI response
-      if (selectedFile && selectedFile.type.startsWith("image/")) {
-        addImageResponse(selectedFile, text)
-      } else {
-        const responses = [
-          "I'm contemplating the vastness of your question. The stars suggest that patience leads to clarity.",
-          "The cosmos whispers that your inquiry has many facets. Let me illuminate the path forward.",
-          "Like distant galaxies, your question contains multitudes. Here's what the celestial patterns reveal.",
-          "The stellar winds bring wisdom: your question touches on fundamental truths about our existence.",
-        ]
-
-        addMessage(responses[Math.floor(Math.random() * responses.length)])
-      }
-
-      // Clear selected file
-      selectedFile = null
-      if (document.querySelector(".file-preview")) {
-        document.querySelector(".file-preview").remove()
-      }
-    }, 1500)
-  }
-
-  function addMessage(content, isUser = false) {
-    if (!content && !isUser) return
-
-    const messageElement = document.createElement("div")
-    messageElement.className = `message ${isUser ? "user" : "bot"}`
-    messageElement.textContent = content || "I understand your request. Let me process that for you."
-
-    messages.appendChild(messageElement)
-    messages.scrollTop = messages.scrollHeight
-  }
-
-  function addImageResponse(image, query) {
-    const reader = new FileReader()
-
-    reader.onload = (e) => {
-      const messageElement = document.createElement("div")
-      messageElement.className = "message bot"
-
-      const imageResponse = `
-                <div>I've analyzed the image you shared.</div>
-                <div class="image-container">
-                    <img src="${e.target.result}" alt="Uploaded image">
-                </div>
-                <div style="margin-top: 0.75rem;">
-                    ${query ? `Regarding your question "${query}": ` : ""}
-                    This appears to be an interesting visual. The composition suggests harmony and balance.
-                </div>
-            `
-
-      messageElement.innerHTML = imageResponse
-      messages.appendChild(messageElement)
-      messages.scrollTop = messages.scrollHeight
-    }
-
-    reader.readAsDataURL(image)
-  }
 
-  function handleFileSelection(e) {
-    const file = e.target.files[0]
-    if (!file) return
+    function drawStars() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        stars.forEach(star => {
+            star.opacity += star.speed;
+            if (star.opacity > 1 || star.opacity < 0.4) star.speed *= -1;
+            ctx.beginPath();
+            ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(163, 228, 215, ${star.opacity})`;
+            ctx.shadowBlur = 10;
+            ctx.shadowColor = 'rgba(163, 228, 215, 0.5)';
+            ctx.fill();
+        });
+        requestAnimationFrame(drawStars);
+    }
+    drawStars();
+
+    window.addEventListener('resize', () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    });
+
+    // Event Listeners
+    sendButton.addEventListener('click', processInput);
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            processInput();
+        }
+    });
+
+    fileInput.addEventListener('change', handleFileSelection);
+
+    chatInput.addEventListener('input', () => {
+        welcome.classList.toggle('hidden', chatInput.value.trim().length > 0);
+    });
+
+    document.querySelectorAll('.star-link').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const action = link.getAttribute('title');
+            if (action === 'Upload') fileInput.click();
+            else if (action === 'Translate') chatInput.value = 'Translate to...';
+            chatInput.focus();
+        });
+    });
+
+    function handleFileSelection(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        selectedFile = file;
+
+        const preview = document.createElement('div');
+        preview.className = 'file-preview';
+
+        let iconClass = 'bx-file';
+        if (file.type.startsWith('image/')) iconClass = 'bx-image';
+        else if (file.name.endsWith('.pdf')) iconClass = 'bx-file-pdf';
+        else if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) iconClass = 'bx-spreadsheet';
+        else if (file.name.endsWith('.docx') || file.name.endsWith('.doc')) iconClass = 'bx-file-doc';
+
+        preview.innerHTML = `
+            <div class="file-preview-icon"><i class="bx ${iconClass}"></i></div>
+            <div class="file-preview-name">${file.name}</div>
+            <button class="file-preview-remove"><i class="bx bx-x"></i></button>
+        `;
 
-    selectedFile = file
+        chatBar.appendChild(preview);
+        chatBar.scrollTop = chatBar.scrollHeight;
 
-    // Create file preview
-    const preview = document.createElement("div")
-    preview.className = "file-preview"
+        preview.querySelector('.file-preview-remove').addEventListener('click', () => {
+            preview.remove();
+            fileInput.value = '';
+            selectedFile = null;
+        });
+    }
 
-    let iconClass = "bx-file"
-    if (file.type.startsWith("image/")) iconClass = "bx-image"
-    else if (file.name.endsWith(".pdf")) iconClass = "bx-file-pdf"
-    else if (file.name.endsWith(".xlsx") || file.name.endsWith(".xls")) iconClass = "bx-spreadsheet"
-    else if (file.name.endsWith(".docx") || file.name.endsWith(".doc")) iconClass = "bx-file-doc"
+    async function processInput() {
+        const text = chatInput.value.trim();
+        const file = selectedFile;
+
+        if (!text && !file) return;
+
+        sendButton.disabled = true;
+        loader.classList.add('active');
+
+        if (text) addMessage(text, true);
+        if (file) addMessage(`Beaming up: ${file.name}`, true);
+
+        chatInput.value = '';
+        selectedFile = null;
+
+        try {
+            const formData = new FormData();
+            if (file) formData.append('file', file);
+            if (text) formData.append('text', text);
+
+            const response = await fetch('/process', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) throw new Error(`Cosmic glitch: ${response.status}`);
+
+            const data = await response.json();
+
+            if (data.type === 'visual_qa' && file && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    addMessage(`
+                        <div class="vqa-response">
+                            <img src="${reader.result}" class="uploaded-image">
+                            <div class="vqa-text">
+                                <p><strong>You asked:</strong> ${text}</p>
+                                <p><strong>I see:</strong> ${data.response}</p>
+                            </div>
+                        </div>`, false, true);
+                };
+                reader.readAsDataURL(file);
+            } else if (data.type === 'caption' && file && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    addMessage(`
+                        <div class="image-result">
+                            <img src="${reader.result}" class="uploaded-image">
+                            <div class="image-caption">${data.response}</div>
+                        </div>`, false, true);
+                };
+                reader.readAsDataURL(file);
+            } else if (data.type === 'visualization_code') {
+                addMessage(`<pre>${data.response}</pre>`, false, true);
+            } else {
+                addMessage(data.response);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            addMessage(`Oops, a starry hiccup: ${error.message}`);
+        } finally {
+            sendButton.disabled = false;
+            loader.classList.remove('active');
+        }
+    }
 
-    preview.innerHTML = `
-            <div class="file-preview-icon"><i class="bx ${iconClass}"></i></div>
-            <div class="file-preview-name">${file.name}</div>
-            <button class="file-preview-remove"><i class="bx bx-x"></i></button>
-        `
-
-    // Add preview before input
-    document.querySelector(".input-container").insertBefore(preview, document.querySelector(".input-wrapper"))
-
-    // Add remove event
-    preview.querySelector(".file-preview-remove").addEventListener("click", () => {
-      preview.remove()
-      fileInput.value = ""
-      selectedFile = null
-    })
-  }
-
-  function toggleTheme() {
-    document.body.classList.toggle("light-theme")
-    isDarkTheme = !isDarkTheme
-
-    // Update icon
-    themeToggle.innerHTML = isDarkTheme ? '<i class="bx bx-moon"></i>' : '<i class="bx bx-sun"></i>'
-
-    // Update star color based on theme
-    const computedStyle = getComputedStyle(document.documentElement)
-    const starColor = computedStyle.getPropertyValue("--star-color").trim()
-    document.documentElement.style.setProperty("--star-color", starColor)
-  }
-})
+    function addMessage(content, isUser = false, isHTML = false) {
+        const message = document.createElement('div');
+        message.className = `chat-message ${isUser ? 'user' : 'bot'}`;
+        if (isHTML) message.innerHTML = content;
+        else message.textContent = content;
+        chatBar.appendChild(message);
+        chatBar.scrollTop = chatBar.scrollHeight;
+    }
+});