AegisSight-Globe/static/js/ui/vlm.js

/**
 * VLM UI: Bildanalyse-Panel mit Upload, Zwei-Stufen-Workflow und Overpass-Kopplung.
 */
const VlmUI = {
    _panel: null,
    _dropZone: null,
    _currentAnalysis: null,
    _isAnalyzing: false,

    init: function() {
        this._createPanel();
    },

    show: function() {
        if (!this._panel) this.init();
        this._panel.style.display = 'block';
    },

    hide: function() {
        if (this._panel) this._panel.style.display = 'none';
    },

    _createPanel: function() {
        var panel = document.getElementById('vlm-panel');
        if (!panel) return;
        this._panel = panel;

        panel.innerHTML =
            '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">' +
                '<div style="font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent)">BILDANALYSE (VLM)</div>' +
                '<button onclick="VlmUI.hide();var cb=document.getElementById(\'layer-vlm\');if(cb){cb.checked=false;}" ' +
                    'style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:18px;line-height:1" title="Schliessen">&times;</button>' +
            '</div>' +
            // Drop-Zone
            '<div id="vlm-drop-zone" class="vlm-drop-zone">' +
                '<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" style="margin-bottom:8px">' +
                    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>' +
                '</svg>' +
                '<div style="font-size:12px">Bild hierher ziehen</div>' +
                '<div style="font-size:10px;color:var(--text-dim);margin-top:4px">oder klicken zum Waehlen (PNG/JPG/WEBP, max 10MB)</div>' +
            '</div>' +
            '<input type="file" id="vlm-file-input" accept="image/png,image/jpeg,image/webp" style="display:none" onchange="VlmUI._onFileSelect(this)">' +
            // Preview
            '<div id="vlm-preview" class="vlm-preview" style="display:none"></div>' +
            // Loading
            '<div id="vlm-loading" class="vlm-loading" style="display:none">' +
                '<div class="vlm-spinner"></div>' +
                '<div id="vlm-loading-text">Analysiere Bild...</div>' +
            '</div>' +
            // Analyse-Ergebnis
            '<div id="vlm-results" style="display:none">' +
                '<div class="panel-divider"></div>' +
                '<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px">SZENE</div>' +
                '<div id="vlm-scene" style="font-size:12px;color:var(--text);margin-bottom:10px;line-height:1.5"></div>' +
                '<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px">ERKANNTE OBJEKTE</div>' +
                '<div id="vlm-objects"></div>' +
                '<label style="display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);margin-top:8px;cursor:pointer">' +
                '<input type="checkbox" id="vlm-use-bbox" style="accent-color:var(--accent);width:14px;height:14px">' +
                'Nur im sichtbaren Bereich suchen' +
            '</label>' +
            '<button class="overpass-exec-btn" id="vlm-search-btn" onclick="VlmUI._confirmAndSearch()" style="margin-top:8px">AUF GLOBE SUCHEN</button>' +
                '<div id="vlm-search-result" style="margin-top:8px;font-size:11px;color:var(--text-dim);display:none"></div>' +
            '</div>' +
            // Reset
            '<button id="vlm-reset-btn" onclick="VlmUI._reset()" ' +
                'style="display:none;width:100%;padding:6px;margin-top:8px;background:none;border:1px solid var(--border);color:var(--text-dim);' +
                'font-family:var(--font-mono);font-size:11px;border-radius:4px;cursor:pointer;letter-spacing:1px">NEUES BILD</button>';

        this._dropZone = document.getElementById('vlm-drop-zone');
        this._setupDragDrop();
    },

    _setupDragDrop: function() {
        var zone = this._dropZone;
        if (!zone) return;
        var self = this;

        ['dragenter', 'dragover'].forEach(function(evt) {
            zone.addEventListener(evt, function(e) {
                e.preventDefault();
                e.stopPropagation();
                zone.classList.add('vlm-drop-active');
            });
        });
        ['dragleave', 'drop'].forEach(function(evt) {
            zone.addEventListener(evt, function(e) {
                e.preventDefault();
                e.stopPropagation();
                zone.classList.remove('vlm-drop-active');
            });
        });
        zone.addEventListener('drop', function(e) {
            var file = e.dataTransfer.files[0];
            if (file) self._handleFile(file);
        });
        zone.addEventListener('click', function() {
            document.getElementById('vlm-file-input').click();
        });
    },

    _onFileSelect: function(input) {
        if (input.files && input.files[0]) {
            this._handleFile(input.files[0]);
        }
    },

    _handleFile: function(file) {
        // Validierung
        var allowed = ['image/png', 'image/jpeg', 'image/webp'];
        if (allowed.indexOf(file.type) === -1) {
            alert('Ungültiger Dateityp. Erlaubt: PNG, JPG, WEBP');
            return;
        }
        if (file.size > 10 * 1024 * 1024) {
            alert('Bild zu gross (max 10MB)');
            return;
        }

        // Preview
        this._showPreview(file);
        // Upload + Analyse
        this._uploadAndAnalyze(file);
    },

    _showPreview: function(file) {
        var previewEl = document.getElementById('vlm-preview');
        if (!previewEl) return;
        var reader = new FileReader();
        reader.onload = function(e) {
            previewEl.innerHTML = '<img src="' + e.target.result + '" alt="Vorschau">' +
                '<div style="font-size:10px;color:var(--text-dim);margin-top:4px">' + file.name +
                ' (' + (file.size / 1024).toFixed(0) + ' KB)</div>';
            previewEl.style.display = 'block';
        };
        reader.readAsDataURL(file);
    },

    _getViewportInfo: function() {
        if (!Globe.viewer) return '';
        var cam = Globe.viewer.camera;
        var carto = cam.positionCartographic;
        if (!carto) return '';
        var lat = Cesium.Math.toDegrees(carto.latitude).toFixed(2);
        var lon = Cesium.Math.toDegrees(carto.longitude).toFixed(2);
        var alt = (carto.height / 1000).toFixed(0);
        return 'Lat ' + lat + ', Lon ' + lon + ', Hoehe ' + alt + ' km';
    },

    _uploadAndAnalyze: function(file) {
        this._isAnalyzing = true;
        this._dropZone.style.display = 'none';
        var loadingEl = document.getElementById('vlm-loading');
        if (loadingEl) loadingEl.style.display = 'block';

        var formData = new FormData();
        formData.append('file', file);
        formData.append('viewport_info', this._getViewportInfo());

        var self = this;
        fetch('/api/vlm/analyze', {
            method: 'POST',
            body: formData,
        })
        .then(function(r) {
            if (r.status === 429) {
                throw new Error('Eine Analyse laeuft bereits. Bitte warten.');
            }
            if (!r.ok) {
                return r.json().then(function(d) { throw new Error(d.detail || 'Fehler ' + r.status); });
            }
            return r.json();
        })
        .then(function(data) {
            self._currentAnalysis = data;
            self._showResults(data);
        })
        .catch(function(e) {
            alert('VLM-Fehler: ' + e.message);
            self._reset();
        })
        .finally(function() {
            self._isAnalyzing = false;
            if (loadingEl) loadingEl.style.display = 'none';
        });
    },

    _showResults: function(data) {
        var resultsEl = document.getElementById('vlm-results');
        var resetBtn = document.getElementById('vlm-reset-btn');
        if (!resultsEl) return;

        // Szene
        var sceneEl = document.getElementById('vlm-scene');
        if (sceneEl) {
            var text = data.scene_description || 'Keine Beschreibung';
            if (data.terrain) text += ' | Gelände: ' + data.terrain;
            if (data.estimated_location_type) text += ' | Region: ' + data.estimated_location_type;
            sceneEl.textContent = text;
        }

        // Objekte
        var objectsEl = document.getElementById('vlm-objects');
        if (objectsEl) {
            var html = '';
            var objects = data.objects || [];
            objects.forEach(function(obj, idx) {
                var confClass = 'vlm-confidence-' + obj.confidence;
                var confLabel = { high: 'HIGH', medium: 'MED', low: 'LOW' }[obj.confidence] || '?';
                var checked = obj.confidence !== 'low' ? ' checked' : '';
                var milBadge = obj.military_relevant ? '<span class="vlm-badge-mil">MIL</span>' : '';

                html += '<div class="vlm-object-card">' +
                    '<input type="checkbox" id="vlm-obj-' + idx + '"' + checked + ' style="accent-color:var(--accent);width:16px;height:16px;flex-shrink:0">' +
                    '<div style="flex:1;min-width:0">' +
                        '<div style="font-weight:700;color:var(--text)">' + obj.type.replace(/_/g, ' ') + '</div>' +
                        '<div style="font-size:10px;color:var(--text-dim);margin-top:2px">' + obj.description + '</div>' +
                    '</div>' +
                    '<span class="' + confClass + '" style="font-size:10px;font-weight:700;flex-shrink:0">' + confLabel + '</span>' +
                    milBadge +
                '</div>';
            });
            if (objects.length === 0) {
                html = '<div style="color:var(--text-dim);font-size:12px">Keine Objekte erkannt</div>';
            }
            objectsEl.innerHTML = html;
        }

        resultsEl.style.display = 'block';
        if (resetBtn) resetBtn.style.display = 'block';
    },

    _confirmAndSearch: function() {
        if (!this._currentAnalysis) return;

        // Ausgewaehlte Objekte sammeln
        var objects = this._currentAnalysis.objects || [];
        var selected = [];
        objects.forEach(function(obj, idx) {
            var cb = document.getElementById('vlm-obj-' + idx);
            if (cb && cb.checked) {
                selected.push(obj);
            }
        });

        if (selected.length === 0) {
            alert('Bitte mindestens ein Objekt auswaehlen');
            return;
        }

        // BBox: Standard weltweit (null), optional auf Viewport einschraenken
        var bbox = null;
        var bboxCb = document.getElementById('vlm-use-bbox');
        if (bboxCb && bboxCb.checked && Globe.viewer) {
            var rect = Globe.viewer.camera.computeViewRectangle();
            if (rect) {
                bbox = [
                    Cesium.Math.toDegrees(rect.south),
                    Cesium.Math.toDegrees(rect.west),
                    Cesium.Math.toDegrees(rect.north),
                    Cesium.Math.toDegrees(rect.east),
                ];
            }
        }

        var btn = document.getElementById('vlm-search-btn');
        if (btn) { btn.disabled = true; btn.textContent = 'SUCHE LAEUFT...'; }
        var searchResult = document.getElementById('vlm-search-result');
        if (searchResult) { searchResult.style.display = 'block'; searchResult.textContent = 'Generiere Overpass-Queries...'; searchResult.style.color = 'var(--text-dim)'; }

        // 1. Queries generieren
        var startTime = Date.now();
        fetch('/api/vlm/generate-queries', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ objects: selected, bbox: bbox }),
        })
        .then(function(r) {
            if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || 'Fehler'); });
            return r.json();
        })
        .then(function(data) {
            if (searchResult) searchResult.textContent = 'Query generiert (' + data.tag_count + ' Tags). Suche OSM-Daten...';

            // 2. Overpass-Query direkt ausfuehren
            OverpassLayer.setColor('#e040fb');
            return fetch('/api/overpass/query', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ query: data.query, bbox: bbox }),
            });
        })
        .then(function(r) {
            if (r.status === 429) {
                return r.json().then(function(d) { throw new Error(d.detail || 'Rate-Limit'); });
            }
            if (!r.ok) {
                return r.json().then(function(d) { throw new Error(d.detail || 'Overpass-Fehler'); });
            }
            return r.json();
        })
        .then(function(data) {
            var elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            OverpassLayer.render(data);
            if (searchResult) {
                var text = data.total + ' Orte gefunden (' + elapsed + 's)';
                if (data.cached) text += ' [Cache]';
                if (data.truncated) text += ' [Limit erreicht]';
                searchResult.textContent = text;
                searchResult.style.color = 'var(--accent)';
            }
            var countEl = document.getElementById('count-vlm');
            if (countEl) countEl.textContent = data.total;
        })
        .catch(function(e) {
            if (searchResult) {
                searchResult.textContent = 'Fehler: ' + e.message;
                searchResult.style.color = '#ff5252';
            }
        })
        .finally(function() {
            if (btn) { btn.disabled = false; btn.textContent = 'AUF GLOBE SUCHEN'; }
        });
    },

    _reset: function() {
        this._currentAnalysis = null;
        this._isAnalyzing = false;

        if (this._dropZone) this._dropZone.style.display = 'block';

        var els = ['vlm-preview', 'vlm-loading', 'vlm-results', 'vlm-search-result'];
        els.forEach(function(id) {
            var el = document.getElementById(id);
            if (el) el.style.display = 'none';
        });

        var resetBtn = document.getElementById('vlm-reset-btn');
        if (resetBtn) resetBtn.style.display = 'none';

        var fileInput = document.getElementById('vlm-file-input');
        if (fileInput) fileInput.value = '';

        var countEl = document.getElementById('count-vlm');
        if (countEl) countEl.textContent = '-';

        // Overpass-Ergebnisse loeschen
        if (typeof OverpassLayer !== 'undefined') OverpassLayer.clear();
    },
};