addede a Production Branch

Dockerfile

@@ -9,7 +9,7 @@ RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
 COPY . /code
 
 # Create necessary directories and set permissions for the entire app directory
-RUN mkdir -p /code/config /code/qdrant_data && \
+RUN mkdir -p /code/config /code/qdrant_data /code/uploads && \
     chown -R 1000:1000 /code
 
 ENV HF_HOME /code/.cache

app.py

@@ -1,4 +1,5 @@
 import os
+import uuid
 from pathlib import Path
 from typing import List, Optional
 import io
@@ -50,6 +51,55 @@ async def home(request: Request):
         }
     )
 
+@app.post("/upload")
+async def upload_images(
+    files: List[UploadFile] = File(...),
+    background_tasks: BackgroundTasks = None
+):
+    """Upload multiple images and index them"""
+    try:
+        # Create uploads directory if it doesn't exist
+        upload_dir = Path("uploads")
+        upload_dir.mkdir(exist_ok=True)
+        
+        # Save uploaded files
+        saved_files = []
+        for file in files:
+            if file.content_type and file.content_type.startswith('image/'):
+                # Generate unique filename
+                file_extension = Path(file.filename).suffix
+                unique_filename = f"{uuid.uuid4()}{file_extension}"
+                file_path = upload_dir / unique_filename
+                
+                # Save the file
+                contents = await file.read()
+                with open(file_path, "wb") as f:
+                    f.write(contents)
+                
+                saved_files.append(str(file_path))
+            else:
+                raise HTTPException(status_code=400, detail=f"File {file.filename} is not a valid image")
+        
+        if saved_files:
+            # Add the upload folder to be indexed
+            folder_info = indexer.folder_manager.add_folder(str(upload_dir))
+            
+            # Start indexing in the background
+            if background_tasks:
+                background_tasks.add_task(indexer.index_folder, str(upload_dir))
+            
+            return {
+                "status": "success",
+                "message": f"Uploaded and indexing {len(saved_files)} images",
+                "folder_info": folder_info,
+                "uploaded_files": saved_files
+            }
+        else:
+            raise HTTPException(status_code=400, detail="No valid images were uploaded")
+            
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
+
 @app.post("/folders")
 async def add_folder(folder_path: str, background_tasks: BackgroundTasks):
     """Add a new folder to index"""

static/js/script.js

@@ -1,13 +1,11 @@
 console.log('script.js loaded');
 
-let currentPath = null;
-let folderModal = null;
-let selectedFolder = null;
 let ws = null;
 
 // Initialize WebSocket connection
 function connectWebSocket() {
-    ws = new WebSocket(`ws://${window.location.host}/ws`);
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
 
     ws.onopen = function () {
         console.log('WebSocket connected');
@@ -86,14 +84,14 @@ function observeLazyLoadImages() {
 
                 if (fullSrc) {
                     img.src = fullSrc;
-                    img.removeAttribute('data-src'); // Remove data-src to prevent re-processing
-                    img.classList.remove('lazy-load'); // Remove class to prevent re-observing
+                    img.removeAttribute('data-src');
+                    img.classList.remove('lazy-load');
                 }
-                observer.unobserve(img); // Stop observing the image once loaded
+                observer.unobserve(img);
             }
         });
     }, {
-        rootMargin: '0px 0px 200px 0px' // Load images 200px before they enter viewport
+        rootMargin: '0px 0px 200px 0px'
     });
 
     lazyLoadImages.forEach(img => {
@@ -101,6 +99,427 @@ function observeLazyLoadImages() {
     });
 }
 
+// Open file upload dialog
+function openFileUpload() {
+    document.getElementById('multipleImageUpload').click();
+}
+
+// Upload images
+async function uploadImages(event) {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+
+    // Validate file types
+    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+    const validFiles = Array.from(files).filter(file => 
+        allowedTypes.includes(file.type.toLowerCase())
+    );
+
+    if (validFiles.length === 0) {
+        alert('Please select valid image files (JPEG, PNG, GIF, WebP)');
+        return;
+    }
+
+    if (validFiles.length !== files.length) {
+        const skipped = files.length - validFiles.length;
+        alert(`${skipped} file(s) were skipped as they are not valid image files`);
+    }
+
+    try {
+        // Show upload progress
+        showUploadProgress(validFiles.length);
+
+        const formData = new FormData();
+        validFiles.forEach(file => {
+            formData.append('files', file);
+        });
+
+        const response = await fetch('/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            hideUploadProgress();
+            
+            // Show success message
+            showNotification('success', `Successfully uploaded ${validFiles.length} image(s)!`);
+            
+            // Reload folders and images
+            await loadIndexedFolders();
+        } else {
+            const error = await response.json();
+            hideUploadProgress();
+            showNotification('error', `Upload failed: ${error.detail || 'Unknown error'}`);
+        }
+    } catch (error) {
+        console.error('Upload error:', error);
+        hideUploadProgress();
+        showNotification('error', 'Upload failed. Please try again.');
+    }
+
+    // Reset file input
+    event.target.value = '';
+}
+
+// Show upload progress
+function showUploadProgress(fileCount) {
+    const progressDiv = document.getElementById('uploadProgress');
+    const statusText = document.getElementById('uploadStatus');
+    
+    progressDiv.style.display = 'block';
+    statusText.textContent = `Uploading ${fileCount} image(s)...`;
+    
+    // Simulate progress
+    const progressBar = document.getElementById('uploadProgressBar');
+    let progress = 0;
+    
+    const interval = setInterval(() => {
+        progress += 5;
+        progressBar.style.width = `${progress}%`;
+        
+        if (progress >= 90) {
+            statusText.textContent = 'Processing and indexing images...';
+            clearInterval(interval);
+        }
+    }, 100);
+    
+    progressDiv.dataset.intervalId = interval;
+}
+
+// Hide upload progress
+function hideUploadProgress() {
+    const progressDiv = document.getElementById('uploadProgress');
+    const progressBar = document.getElementById('uploadProgressBar');
+    
+    if (progressDiv.dataset.intervalId) {
+        clearInterval(progressDiv.dataset.intervalId);
+        delete progressDiv.dataset.intervalId;
+    }
+    
+    progressBar.style.width = '100%';
+    
+    setTimeout(() => {
+        progressDiv.style.display = 'none';
+        progressBar.style.width = '0%';
+    }, 1000);
+}
+
+// Show notification
+function showNotification(type, message) {
+    const notification = document.createElement('div');
+    notification.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
+    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
+    
+    notification.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        if (notification.parentNode) {
+            notification.remove();
+        }
+    }, 5000);
+}
+
+// Load indexed folders
+async function loadIndexedFolders() {
+    try {
+        const response = await fetch('/folders');
+        const folders = await response.json();
+
+        const folderList = document.getElementById('folderList');
+        folderList.innerHTML = '';
+
+        if (folders.length === 0) {
+            folderList.innerHTML = `
+                <div class="text-center p-4 text-muted">
+                    <i class="bi bi-folder-x fs-2 d-block mb-2"></i>
+                    <small>No folders indexed yet</small>
+                </div>
+            `;
+            return;
+        }
+
+        folders.forEach(folder => {
+            const escapedPath = folder.path.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+            const folderCard = document.createElement('div');
+            folderCard.className = `folder-item-card ${!folder.is_valid ? 'invalid' : ''}`;
+            folderCard.innerHTML = `
+                <div class="d-flex justify-content-between align-items-start p-3">
+                    <div class="flex-grow-1 me-2">
+                        <div class="d-flex align-items-center mb-1">
+                            <i class="bi bi-folder-fill me-2 ${folder.is_valid ? 'text-primary' : 'text-danger'}"></i>
+                            <span class="fw-semibold ${!folder.is_valid ? 'text-danger' : 'text-dark'}" style="font-size: 0.9rem;">
+                                ${folder.path.split(/[\\/]/).pop()}
+                            </span>
+                        </div>
+                        <div class="text-muted small" style="word-break: break-all; line-height: 1.3;">
+                            ${folder.path}
+                        </div>
+                        ${!folder.is_valid ? '<small class="text-danger"><i class="bi bi-exclamation-triangle me-1"></i>Path not accessible</small>' : ''}
+                    </div>
+                    <button class="btn btn-outline-danger btn-sm" onclick="removeFolder('${escapedPath}')" title="Remove folder">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            `;
+            folderList.appendChild(folderCard);
+        });
+
+        // Load images from all folders
+        await loadImages();
+    } catch (error) {
+        console.error('Error loading folders:', error);
+    }
+}
+
+// Remove folder
+async function removeFolder(path) {
+    if (confirm('Are you sure you want to remove this folder?')) {
+        try {
+            const encodedPath = encodeURIComponent(path).replace(/%5C/g, '\\');
+            const response = await fetch(`/folders/${encodedPath}`, {
+                method: 'DELETE'
+            });
+
+            if (response.ok) {
+                await loadIndexedFolders();
+            } else {
+                const error = await response.text();
+                alert(`Error removing folder: ${error}`);
+            }
+        } catch (error) {
+            console.error('Error removing folder:', error);
+            alert('Error removing folder. Please try again.');
+        }
+    }
+}
+
+// Load images
+async function loadImages(folder = null) {
+    try {
+        const url = folder ? `/images?folder=${encodeURIComponent(folder)}` : '/images';
+        const response = await fetch(url);
+        const images = await response.json();
+
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.innerHTML = '';
+
+        if (images.length === 0) {
+            imageGrid.innerHTML = `
+                <div class="col-12">
+                    <div class="text-center p-5">
+                        <i class="bi bi-images fs-1 text-muted d-block mb-3"></i>
+                        <h5 class="text-muted mb-2">No images found</h5>
+                        <p class="text-muted">Upload some images to start building your visual search database</p>
+                    </div>
+                </div>
+            `;
+            return;
+        }
+
+        images.forEach(image => {
+            const card = document.createElement('div');
+            card.className = 'image-card';
+            card.innerHTML = `
+                <div class="image-wrapper">
+                    <img class="lazy-load"
+                         src="/thumbnail/${image.id}"
+                         data-src="/image/${image.id}"
+                         alt="${image.filename || image.path}"
+                         loading="lazy">
+                </div>
+                <div class="image-info">
+                    <span class="filename" title="${image.filename || image.path}">${image.filename || image.path}</span>
+                    <span class="file-size">${formatFileSize(image.file_size)}</span>
+                </div>
+            `;
+            imageGrid.appendChild(card);
+        });
+        observeLazyLoadImages();
+    } catch (error) {
+        console.error('Error loading images:', error);
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.innerHTML = '<div class="col-12"><div class="error text-center p-4">Error loading images. Please try again.</div></div>';
+    }
+}
+
+// Utility function to format file sizes
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Search images
+async function searchImages(event) {
+    event.preventDefault();
+    const query = document.getElementById('searchInput').value;
+    if (!query) return;
+
+    try {
+        const searchUrl = `/search/text?query=${encodeURIComponent(query)}`;
+        const response = await fetch(searchUrl);
+        const results = await response.json();
+
+        displaySearchResults(results);
+    } catch (error) {
+        console.error('Error searching images:', error);
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.innerHTML = `
+            <div class="col-12">
+                <div class="error text-center p-5">
+                    <i class="bi bi-exclamation-triangle fs-1 text-danger d-block mb-3"></i>
+                    <h5 class="text-danger mb-2">Search Error</h5>
+                    <p class="text-muted">An error occurred while searching. Please try again.</p>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Search by image
+async function searchByImage(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const searchUrl = '/search/image';
+        const response = await fetch(searchUrl, {
+            method: 'POST',
+            body: formData
+        });
+        const results = await response.json();
+
+        displaySearchResults(results);
+        event.target.value = '';
+    } catch (error) {
+        console.error('Error searching by image:', error);
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.innerHTML = `
+            <div class="col-12">
+                <div class="error text-center p-5">
+                    <i class="bi bi-exclamation-triangle fs-1 text-danger d-block mb-3"></i>
+                    <h5 class="text-danger mb-2">Image Search Error</h5>
+                    <p class="text-muted">An error occurred while processing your image. Please try again.</p>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Search by URL
+async function searchByUrl(event) {
+    event.preventDefault();
+    const url = document.getElementById('urlInput').value;
+    if (!url) return;
+
+    try {
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.innerHTML = `
+            <div class="col-12">
+                <div class="loading text-center p-5">
+                    <div class="spinner-border text-primary mb-3" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    <h5 class="text-primary mb-2">Downloading and analyzing image...</h5>
+                    <p class="text-muted">This may take a few moments</p>
+                </div>
+            </div>
+        `;
+
+        const searchUrl = `/search/url?url=${encodeURIComponent(url)}`;
+        const response = await fetch(searchUrl);
+        const results = await response.json();
+
+        displaySearchResults(results);
+        document.getElementById('urlInput').value = '';
+        toggleUrlSearch();
+    } catch (error) {
+        console.error('Error searching by URL:', error);
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.innerHTML = `
+            <div class="col-12">
+                <div class="error text-center p-5">
+                    <i class="bi bi-exclamation-triangle fs-1 text-danger d-block mb-3"></i>
+                    <h5 class="text-danger mb-2">Error processing URL</h5>
+                    <p class="text-muted">Please check the URL and try again. Make sure it points to a valid image.</p>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Display search results
+function displaySearchResults(results) {
+    const imageGrid = document.getElementById('imageGrid');
+    imageGrid.innerHTML = '';
+
+    if (results.length === 0) {
+        imageGrid.innerHTML = `
+            <div class="col-12">
+                <div class="no-results text-center p-5">
+                    <i class="bi bi-search fs-1 text-muted d-block mb-3"></i>
+                    <h5 class="text-muted mb-2">No similar images found</h5>
+                    <p class="text-muted">Try adjusting your search terms or uploading a different image</p>
+                </div>
+            </div>
+        `;
+        return;
+    }
+
+    results.forEach(result => {
+        const card = document.createElement('div');
+        card.className = 'image-card';
+        card.innerHTML = `
+            <div class="image-wrapper">
+                <img class="lazy-load"
+                     src="/thumbnail/${result.id}"
+                     data-src="/image/${result.id}"
+                     alt="${result.filename || result.path}"
+                     loading="lazy">
+                <div class="similarity-score">${result.similarity}%</div>
+            </div>
+            <div class="image-info">
+                <span class="filename" title="${result.filename || result.path}">${result.filename || result.path}</span>
+                <span class="file-size">${formatFileSize(result.file_size)}</span>
+            </div>
+        `;
+        imageGrid.appendChild(card);
+    });
+    observeLazyLoadImages();
+}
+
+// Toggle URL search form visibility
+function toggleUrlSearch() {
+    const urlForm = document.getElementById('urlSearchForm');
+    const isVisible = urlForm.style.display !== 'none';
+    
+    if (isVisible) {
+        urlForm.style.display = 'none';
+        document.getElementById('urlInput').value = '';
+    } else {
+        urlForm.style.display = 'flex';
+        document.getElementById('urlInput').focus();
+    }
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    connectWebSocket();
+    loadIndexedFolders();
+});
+
 // Initialize folder browser
 async function initFolderBrowser() {
     folderModal = new bootstrap.Modal(document.getElementById('folderBrowserModal'));

templates/index.html

@@ -472,10 +472,14 @@
         <div class="row g-4">
             <div class="col-lg-3">
                 <div class="sidebar">
-                    <button class="add-folder-btn" onclick="openFolderBrowser()">
-                        <i class="bi bi-folder-plus me-2"></i>Add Folder
+                    <button class="add-folder-btn" onclick="openFileUpload()">
+                        <i class="bi bi-cloud-upload me-2"></i>Upload Images
                     </button>
                     
+                    <!-- Hidden file input for multiple image uploads -->
+                    <input type="file" id="multipleImageUpload" style="display: none" 
+                           accept="image/*" multiple onchange="uploadImages(event)">
+                    
                     <div class="sidebar-title">
                         <i class="bi bi-folder2-open"></i>
                         Indexed Folders
@@ -483,6 +487,19 @@
                     <div id="folderList">
                         <!-- Folders will be listed here -->
                     </div>
+                    
+                    <!-- Upload Progress (initially hidden) -->
+                    <div id="uploadProgress" style="display: none;" class="mt-3">
+                        <div class="sidebar-title">
+                            <i class="bi bi-upload"></i>
+                            Upload Progress
+                        </div>
+                        <div class="progress mb-2">
+                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
+                                 id="uploadProgressBar" style="width: 0%"></div>
+                        </div>
+                        <small class="text-muted" id="uploadStatus">Preparing upload...</small>
+                    </div>
                 </div>
             </div>
             
@@ -495,36 +512,5 @@
             </div>
         </div>
     </div>
-        
-    <!-- Folder Browser Modal -->
-    <div class="modal fade" id="folderBrowserModal" tabindex="-1">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">
-                        <i class="bi bi-folder2-open me-2 text-primary"></i>
-                        Choose Folder to Index
-                    </h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                </div>
-                <div class="modal-body">
-                    <nav aria-label="breadcrumb">
-                        <ol class="breadcrumb" id="folderBreadcrumb">
-                            <li class="breadcrumb-item active">Root</li>
-                        </ol>
-                    </nav>
-                    <div class="folder-browser" id="folderBrowser">
-                        <!-- Folder contents will be displayed here -->
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" onclick="addSelectedFolder()">
-                        <i class="bi bi-plus-circle me-1"></i>Add Folder
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
 </body>
 </html>