Spaces:

HGKo
/

vision-web-app

Sleeping

File size: 11,816 Bytes

bd99505

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Model Vision App</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        h1 { color: #3f51b5; text-align: center; }
        .container { display: flex; flex-direction: column; gap: 20px; }
        .card { border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .model-selection { display: flex; gap: 10px; margin: 20px 0; }
        .model-btn { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; background-color: #e0e0e0; }
        .model-btn.active { background-color: #3f51b5; color: white; }
        .model-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .upload-container { display: flex; flex-direction: column; gap: 10px; }
        #file-input { margin-bottom: 10px; }
        #process-btn { padding: 10px 15px; background-color: #3f51b5; color: white; border: none; border-radius: 4px; cursor: pointer; }
        #process-btn:disabled { background-color: #9e9e9e; cursor: not-allowed; }
        .preview-container { display: flex; justify-content: center; margin: 20px 0; }
        .preview-image { max-width: 100%; max-height: 300px; border-radius: 4px; }
        .result-container { margin-top: 20px; }
        .result-image { max-width: 100%; max-height: 400px; border-radius: 4px; }
        .detection-list { list-style-type: none; padding: 0; }
        .detection-item { padding: 8px; border-bottom: 1px solid #eee; }
        .detection-item:last-child { border-bottom: none; }
        .confidence { display: inline-block; padding: 2px 6px; background-color: #3f51b5; color: white; border-radius: 10px; font-size: 0.8em; margin-left: 8px; }
        .performance { margin-top: 20px; font-size: 0.9em; color: #666; }
        .error { color: #f44336; font-weight: bold; }
        .loading { text-align: center; margin: 20px 0; }
    </style>
</head>
<body>
    <h1>Multi-Model Vision App</h1>
    
    <div class="container">
        <div class="card">
            <h2>Select Model</h2>
            <div class="model-selection">
                <button id="yolo-btn" class="model-btn">YOLOv8 (Detection)</button>
                <button id="detr-btn" class="model-btn">DETR (Detection)</button>
                <button id="vit-btn" class="model-btn">ViT (Classification)</button>
            </div>
        </div>
        
        <div class="card upload-container">
            <h2>Upload Image</h2>
            <input type="file" id="file-input" accept="image/*">
            <div class="preview-container" id="preview-container"></div>
            <button id="process-btn" disabled>Process Image</button>
        </div>
        
        <div class="card result-container" id="result-container" style="display: none;">
            <h2 id="result-title">Results</h2>
            <div id="result-content"></div>
        </div>
    </div>

    <script>
        // Model selection
        const yoloBtn = document.getElementById('yolo-btn');
        const detrBtn = document.getElementById('detr-btn');
        const vitBtn = document.getElementById('vit-btn');
        const fileInput = document.getElementById('file-input');
        const processBtn = document.getElementById('process-btn');
        const previewContainer = document.getElementById('preview-container');
        const resultContainer = document.getElementById('result-container');
        const resultTitle = document.getElementById('result-title');
        const resultContent = document.getElementById('result-content');
        
        let selectedModel = null;
        let selectedFile = null;
        let modelsStatus = { yolo: false, detr: false, vit: false };
        
        // Check API status
        async function checkApiStatus() {
            try {
                const response = await fetch('/api/status');
                const data = await response.json();
                modelsStatus = data.models;
                
                // Update UI based on model availability
                yoloBtn.disabled = !modelsStatus.yolo;
                detrBtn.disabled = !modelsStatus.detr;
                vitBtn.disabled = !modelsStatus.vit;
                
                if (!modelsStatus.yolo) yoloBtn.title = "YOLOv8 model not available";
                if (!modelsStatus.detr) detrBtn.title = "DETR model not available";
                if (!modelsStatus.vit) vitBtn.title = "ViT model not available";
            } catch (error) {
                console.error('Error checking API status:', error);
                alert('Error connecting to the API. Please make sure the server is running.');
            }
        }
        
        // Format time for display
        function formatTime(ms) {
            if (ms < 1000) return `${ms.toFixed(2)} ms`;
            return `${(ms / 1000).toFixed(2)} s`;
        }
        
        // Select model
        function selectModel(model) {
            selectedModel = model;
            yoloBtn.classList.remove('active');
            detrBtn.classList.remove('active');
            vitBtn.classList.remove('active');
            
            switch(model) {
                case 'yolo':
                    yoloBtn.classList.add('active');
                    break;
                case 'detr':
                    detrBtn.classList.add('active');
                    break;
                case 'vit':
                    vitBtn.classList.add('active');
                    break;
            }
            
            updateProcessButton();
        }
        
        // Update process button state
        function updateProcessButton() {
            processBtn.disabled = !selectedModel || !selectedFile;
        }
        
        // Handle file selection
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                selectedFile = file;
                const reader = new FileReader();
                reader.onload = (e) => {
                    previewContainer.innerHTML = `<img src="${e.target.result}" class="preview-image" alt="Preview">`;
                };
                reader.readAsDataURL(file);
                updateProcessButton();
            } else {
                selectedFile = null;
                previewContainer.innerHTML = '';
                updateProcessButton();
            }
        });
        
        // Model selection event listeners
        yoloBtn.addEventListener('click', () => selectModel('yolo'));
        detrBtn.addEventListener('click', () => selectModel('detr'));
        vitBtn.addEventListener('click', () => selectModel('vit'));
        
        // Process image
        processBtn.addEventListener('click', async () => {
            if (!selectedModel || !selectedFile) return;
            
            resultContainer.style.display = 'block';
            resultTitle.textContent = `Processing with ${selectedModel.toUpperCase()}...`;
            resultContent.innerHTML = '<div class="loading">Processing image...</div>';
            
            const formData = new FormData();
            formData.append('image', selectedFile);
            
            let endpoint = '';
            switch(selectedModel) {
                case 'yolo':
                    endpoint = '/api/detect/yolo';
                    break;
                case 'detr':
                    endpoint = '/api/detect/detr';
                    break;
                case 'vit':
                    endpoint = '/api/classify/vit';
                    break;
            }
            
            try {
                const response = await fetch(endpoint, {
                    method: 'POST',
                    body: formData
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                
                const data = await response.json();
                displayResults(selectedModel, data);
            } catch (error) {
                console.error('Error processing image:', error);
                resultTitle.textContent = 'Error';
                resultContent.innerHTML = `<div class="error">Error processing image: ${error.message}</div>`;
            }
        });
        
        // Display results
        function displayResults(model, data) {
            resultTitle.textContent = `${model.toUpperCase()} Results`;
            let html = '';
            
            if (model === 'yolo' || model === 'detr') {
                // Detection results
                html += `
                    <div style="display: flex; flex-direction: column; gap: 20px;">
                        <div>
                            <h3>Processed Image</h3>
                            <img src="data:image/jpeg;base64,${data.image_with_boxes}" class="result-image" alt="Detection Result">
                        </div>
                        <div>
                            <h3>Detected Objects</h3>
                `;
                            
                if (data.detections && data.detections.length > 0) {
                    html += '<ul class="detection-list">';
                    data.detections.forEach(item => {
                        html += `
                            <li class="detection-item">
                                ${item.label}
                                <span class="confidence">${(item.confidence * 100).toFixed(0)}%</span>
                            </li>
                        `;
                    });
                    html += '</ul>';
                } else {
                    html += '<p>No objects detected</p>';
                }
                
                html += `
                        </div>
                        <div class="performance">
                            <p>Inference Time: ${formatTime(data.inference_time)}</p>
                            <p>Total Processing Time: ${formatTime(data.total_time)}</p>
                        </div>
                    </div>
                `;
            } else if (model === 'vit') {
                // Classification results
                html += `
                    <div style="display: flex; flex-direction: column; gap: 20px;">
                        <div>
                            <h3>Classification Results</h3>
                `;
                            
                if (data.classifications && data.classifications.length > 0) {
                    html += '<ul class="detection-list">';
                    data.classifications.forEach(item => {
                        html += `
                            <li class="detection-item">
                                ${item.label}
                                <span class="confidence">${(item.confidence * 100).toFixed(1)}%</span>
                            </li>
                        `;
                    });
                    html += '</ul>';
                } else {
                    html += '<p>No classifications found</p>';
                }
                
                html += `
                        </div>
                        <div class="performance">
                            <p>Inference Time: ${formatTime(data.inference_time)}</p>
                            <p>Total Processing Time: ${formatTime(data.total_time)}</p>
                        </div>
                    </div>
                `;
            }
            
            resultContent.innerHTML = html;
        }
        
        // Initialize
        checkApiStatus();
    </script>
</body>
</html>