Spaces:

polaroidresearch
/

PolaroidVL-Installer

Running

App Files Files Community

marsadh commited on about 17 hours ago

Commit

64b7f84

verified ·

1 Parent(s): 5091c87

Update index.html

Browse files

Files changed (1) hide show

index.html +1 -394

index.html CHANGED Viewed

@@ -1,394 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vision AI</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&display=swap" rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        'inter-tight': ['Inter Tight', 'system-ui', 'sans-serif']
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        .loading-dots::after {
-            content: '';
-            display: inline-block;
-            animation: loading 1.5s infinite;
-        }
-        @keyframes loading {
-            0% { content: ''; }
-            25% { content: '.'; }
-            50% { content: '..'; }
-            75% { content: '...'; }
-            100% { content: ''; }
-        }
-        .drag-over {
-            @apply border-gray-900 bg-gray-50;
-        }
-        @keyframes slideIn {
-            from {
-                transform: translateX(100%);
-                opacity: 0;
-            }
-            to {
-                transform: translateX(0);
-                opacity: 1;
-            }
-        }
-        .notification {
-            animation: slideIn 0.3s ease;
-        }
-        textarea {
-            text-align: left !important;
-            direction: ltr !important;
-        }
-        #questionInput {
-            text-align: left !important;
-        }
-    </style>
-</head>
-<body class="min-h-screen bg-white text-gray-900 font-inter-tight antialiased">
-    <div class="max-w-2xl mx-auto px-6 py-12">
-        <!-- Header -->
-        <header class="mb-16">
-            <div class="flex items-center justify-between mb-8">
-                <div>
-                    <h1 class="text-2xl font-semibold text-gray-900 tracking-tight">Vision AI</h1>
-                    <p class="text-gray-600 text-sm mt-1">AI-powered image analysis</p>
-                </div>
-                <div class="w-2 h-2 bg-gray-900 rounded-full"></div>
-            </div>
-        </header>
-        <!-- Upload Section -->
-        <div class="mb-12">
-            <!-- Modified dropZone: relative for icon positioning, fixed height -->
-            <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-xl p-12 text-center cursor-pointer transition-all duration-200 hover:border-gray-900 hover:bg-gray-50 bg-gray-25 h-[300px] relative flex items-center justify-center">
-                <div id="dropContent" class="space-y-4">
-                    <div class="mx-auto w-12 h-12 text-gray-400">
-                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
-                        </svg>
-                    </div>
-                    <div>
-                        <p class="text-gray-700 text-base font-medium mb-1">Drop your image here or click to browse</p>
-                        <p class="text-gray-500 text-sm">Supports JPG, PNG, GIF up to 10MB</p>
-                    </div>
-                </div>
-                <!-- Modified imagePreview: relative for icon positioning, flex column, full height/width -->
-                <div id="imagePreview" class="hidden absolute inset-0 flex-col">
-                    <!-- Modified previewImg: object-contain to fit without cropping -->
-                    <img id="previewImg" class="w-full h-full object-contain object-center" alt="Preview">
-                    <!-- Cross Icon Button: absolute top-right -->
-                    <button id="removeImage" class="absolute top-3 right-3 p-1.5 rounded-full bg-white/70 hover:bg-white/100 shadow-sm border border-gray-300 text-gray-700 hover:text-gray-900 transition-colors duration-200" aria-label="Remove image">
-                        <!-- Heroicons X Mark Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <input type="file" id="fileInput" accept="image/*" class="hidden">
-        </div>
-        <!-- Question Section -->
-        <div class="mb-12 space-y-6">
-            <div>
-                <textarea
-                    id="questionInput"
-                    rows="4"
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-gray-900 focus:border-transparent text-base placeholder-gray-500 transition-all duration-200 text-left"
-                    placeholder="What would you like to know about this image?"
-                ></textarea>
-            </div>
-            <button id="analyzeBtn" disabled class="w-full bg-gray-900 text-white px-6 py-4 rounded-lg font-medium text-base hover:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed transition-all duration-200 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2">
-                <span id="analyzeText">Analyze Image</span>
-            </button>
-        </div>
-        <!-- Results Section -->
-        <div id="resultsSection" class="hidden mb-12">
-            <div class="border border-gray-200 rounded-xl p-8 bg-gray-50">
-                <div class="space-y-6">
-                    <div>
-                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Question</div>
-                        <div class="text-gray-900 leading-relaxed" id="questionDisplay"></div>
-                    </div>
-                    <div>
-                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Answer</div>
-                        <div class="text-gray-900 leading-relaxed text-base" id="answerDisplay"></div>
-                    </div>
-                    <div class="flex justify-between items-center pt-4 border-t border-gray-200 text-xs text-gray-500">
-                        <span>ID: <span id="requestId" class="font-mono"></span></span>
-                        <span id="responseTime" class="font-medium"></span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Footer -->
-        <footer class="pt-12 border-t border-gray-100">
-            <div class="flex items-center justify-between">
-                <p class="text-sm text-gray-500">
-                    Powered by <a href="https://moondream.ai" target="_blank" class="text-gray-700 hover:text-gray-900 font-medium transition-colors duration-200 underline decoration-1 underline-offset-2">Moondream</a>
-                </p>
-                <div class="text-xs text-gray-400 font-mono">
-                    v1.0.0
-                </div>
-            </div>
-        </footer>
-    </div>
-    <script>
-        class VisionApp {
-            constructor() {
-                // API key embedded in the app
-                // Note: Exposing API keys in client-side code is a security risk.
-                this.apiKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXlfaWQiOiJkMjc1N2QwNS04OGRjLTQ4YjUtOGVjNC05Y2M1ODYxYjBmOGMiLCJvcmdfaWQiOiIyUlJuZUVNMGVEblVRWFdjbDZKa3M3Y01vaWdTMmJ2aCIsImlhdCI6MTc1ODYyNzkzNywidmVyIjoxfQ.-Wqw1RXeev4ERwl18R9fefMzvOvSBVMvbVWiR3E-BOE';
-                this.currentImage = null;
-                this.initializeElements();
-                this.bindEvents();
-            }
-            initializeElements() {
-                this.elements = {
-                    dropZone: document.getElementById('dropZone'),
-                    fileInput: document.getElementById('fileInput'),
-                    dropContent: document.getElementById('dropContent'),
-                    imagePreview: document.getElementById('imagePreview'),
-                    previewImg: document.getElementById('previewImg'),
-                    removeImageBtn: document.getElementById('removeImage'), // Updated reference
-                    questionInput: document.getElementById('questionInput'),
-                    analyzeBtn: document.getElementById('analyzeBtn'),
-                    analyzeText: document.getElementById('analyzeText'),
-                    resultsSection: document.getElementById('resultsSection'),
-                    questionDisplay: document.getElementById('questionDisplay'),
-                    answerDisplay: document.getElementById('answerDisplay'),
-                    requestId: document.getElementById('requestId'),
-                    responseTime: document.getElementById('responseTime')
-                };
-            }
-            bindEvents() {
-                // File upload events
-                this.elements.dropZone.addEventListener('click', () => this.elements.fileInput.click());
-                this.elements.dropZone.addEventListener('dragover', this.handleDragOver.bind(this));
-                this.elements.dropZone.addEventListener('dragleave', this.handleDragLeave.bind(this));
-                this.elements.dropZone.addEventListener('drop', this.handleDrop.bind(this));
-                this.elements.fileInput.addEventListener('change', this.handleFileSelect.bind(this));
-                this.elements.removeImageBtn.addEventListener('click', (e) => {
-                    e.stopPropagation(); // Prevent triggering drop zone click
-                    this.removeImage();
-                });
-                // Question events
-                this.elements.questionInput.addEventListener('input', () => this.updateAnalyzeButton());
-                this.elements.analyzeBtn.addEventListener('click', () => this.analyzeImage());
-            }
-            handleDragOver(e) {
-                e.preventDefault();
-                this.elements.dropZone.classList.add('drag-over');
-            }
-            handleDragLeave(e) {
-                e.preventDefault();
-                if (!this.elements.dropZone.contains(e.relatedTarget)) {
-                    this.elements.dropZone.classList.remove('drag-over');
-                }
-            }
-            handleDrop(e) {
-                e.preventDefault();
-                this.elements.dropZone.classList.remove('drag-over');
-                const files = e.dataTransfer.files;
-                if (files.length > 0) {
-                    this.processFile(files[0]);
-                }
-            }
-            handleFileSelect(e) {
-                if (e.target.files.length > 0) {
-                    this.processFile(e.target.files[0]);
-                }
-            }
-            processFile(file) {
-                if (!file.type.startsWith('image/')) {
-                    this.showNotification('Please select a valid image file', 'error');
-                    return;
-                }
-                if (file.size > 10 * 1024 * 1024) {
-                    this.showNotification('File size should be less than 10MB', 'error');
-                    return;
-                }
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    this.currentImage = e.target.result;
-                    this.showImagePreview(file);
-                };
-                reader.readAsDataURL(file);
-            }
-            showImagePreview(file) {
-                this.elements.previewImg.src = this.currentImage;
-                // this.elements.fileName.textContent = file.name; // Removed filename display
-                this.elements.dropContent.classList.add('hidden');
-                this.elements.imagePreview.classList.remove('hidden');
-                this.updateAnalyzeButton();
-            }
-            removeImage() {
-                this.currentImage = null;
-                this.elements.dropContent.classList.remove('hidden');
-                this.elements.imagePreview.classList.add('hidden');
-                this.elements.fileInput.value = '';
-                this.updateAnalyzeButton();
-            }
-            updateAnalyzeButton() {
-                const hasImage = this.currentImage !== null;
-                const hasQuestion = this.elements.questionInput.value.trim().length > 0;
-                this.elements.analyzeBtn.disabled = !(hasImage && hasQuestion);
-            }
-            async analyzeImage() {
-                if (!this.currentImage || !this.elements.questionInput.value.trim()) {
-                    this.showNotification('Please provide an image and question', 'error');
-                    return;
-                }
-                const question = this.elements.questionInput.value.trim();
-                this.setLoading(true);
-                try {
-                    const startTime = Date.now();
-                    const result = await this.queryMoondream(this.currentImage, question);
-                    const endTime = Date.now();
-                    const responseTime = ((endTime - startTime) / 1000).toFixed(1);
-                    if (!result || !result.answer) {
-                        throw new Error('Invalid response from API');
-                    }
-                    this.showResults(question, result.answer, result.request_id, responseTime);
-                    this.showNotification('Analysis completed successfully', 'success');
-                } catch (error) {
-                    console.error('Analysis error:', error);
-                    this.showNotification(`Analysis failed: ${error.message}`, 'error');
-                } finally {
-                    this.setLoading(false);
-                }
-            }
-            async queryMoondream(imageDataUrl, question) {
-                try {
-                    const requestBody = {
-                        image_url: imageDataUrl,
-                        question: question,
-                        stream: false
-                    };
-                    // Fixed the extra space in the URL
-                    const response = await fetch('https://api.moondream.ai/v1/query', {
-                        method: 'POST',
-                        headers: {
-                            'X-Moondream-Auth': this.apiKey,
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(requestBody)
-                    });
-                    if (!response.ok) {
-                        const errorText = await response.text();
-                        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
-                        try {
-                            const errorData = JSON.parse(errorText);
-                            errorMessage = errorData.message || errorData.error || errorMessage;
-                        } catch (e) {
-                            errorMessage = errorText || errorMessage;
-                        }
-                        throw new Error(errorMessage);
-                    }
-                    const result = await response.json();
-                    return {
-                        answer: result.result || result.answer || 'No answer received',
-                        request_id: result.request_id || result.id || `req_${Date.now()}`
-                    };
-                } catch (error) {
-                    throw new Error(`API request failed: ${error.message}`);
-                }
-            }
-            setLoading(isLoading) {
-                if (isLoading) {
-                    this.elements.analyzeText.innerHTML = '<span class="loading-dots">Analyzing</span>';
-                    this.elements.analyzeBtn.disabled = true;
-                } else {
-                    this.elements.analyzeText.textContent = 'Analyze Image';
-                    this.updateAnalyzeButton();
-                }
-            }
-            showResults(question, answer, requestId, responseTime) {
-                this.elements.questionDisplay.textContent = question;
-                this.elements.answerDisplay.textContent = answer;
-                this.elements.requestId.textContent = requestId;
-                this.elements.responseTime.textContent = `${responseTime}s`;
-                this.elements.resultsSection.classList.remove('hidden');
-                // Smooth scroll to results
-                this.elements.resultsSection.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest'
-                });
-            }
-            showNotification(message, type = 'info') {
-                const notification = document.createElement('div');
-                const bgColor = type === 'error' ? 'bg-red-600' : type === 'success' ? 'bg-green-600' : 'bg-gray-900';
-                notification.className = `notification fixed top-4 right-4 ${bgColor} text-white px-4 py-3 rounded-lg shadow-lg z-50 text-sm font-medium`;
-                notification.textContent = message;
-                document.body.appendChild(notification);
-                setTimeout(() => {
-                    notification.remove();
-                }, 4000);
-            }
-        }
-        // Initialize the app when DOM is loaded
-        document.addEventListener('DOMContentLoaded', () => {
-            new VisionApp();
-        });
-    </script>
-</body>
-</html>


1	+ Coming soon