AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität
Dateien
c7cb19d5847211f9448e35ad97289666b3f53e08
AegisSight-Globe/static/js/ui/vlm.js
Claude Dev c7cb19d584 feat: GEOINT-Toolkit mit 6 neuen Features 
- EXIF-Extraktion: Automatische GPS/Kamera/Zeitstempel-Analyse bei Bildupload
- Sonnenstand-Rechner: Azimut, Elevation, Schattenverhaeltnis fuer beliebige Position/Zeit
- Reverse Geolocation: Erweiterte VLM-Analyse mit Landschaftsmerkmalen (Vegetation, Architektur, Strassen, Schilder)
- Nachtlichter: NASA VIIRS Black Marble Layer
- Hoehenprofil: Interaktives 2-Punkte-Tool mit SVG-Chart und Sichtlinienanalyse
- Funkmasten: Mobilfunkinfrastruktur via Overpass (zoomabhaengig)

Backend: data_geoint.py (EXIF, Sun, Elevation, Celltowers)
Frontend: GEOINT Tools Section im Layer Panel
2026-03-26 08:58:05 +01:00

393 Zeilen
18 KiB
JavaScript
Originalformat Blame Verlauf

/**
* 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;
// EXIF-Metadaten
var exifHtml = '';
if (data.exif) {
var e = data.exif;
var ep = [];
if (e.has_gps) ep.push('<span style="color:var(--accent)">GPS: ' + e.latitude + ', ' + e.longitude + '</span>');
if (e.altitude) ep.push('Hoehe: ' + e.altitude + 'm');
if (e.camera_model) ep.push(e.camera_make ? e.camera_make + ' ' + e.camera_model : e.camera_model);
if (e.focal_length) ep.push(e.focal_length + 'mm');
if (e.timestamp) ep.push(e.timestamp.replace('T', ' '));
if (e.compass_heading) ep.push('Heading: ' + e.compass_heading + '\u00B0');
if (ep.length > 0) {
exifHtml = '<div class="vlm-exif-card"><div style="font-size:9px;letter-spacing:1.5px;color:#e040fb;margin-bottom:4px">EXIF METADATEN</div>' +
'<div style="font-size:11px;color:var(--text);line-height:1.6">' + ep.join(' &middot; ') + '</div></div>';
if (e.has_gps) {
exifHtml += '<button class="geoint-tool-btn" style="width:100%;margin-top:4px" onclick="Globe.viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(' + e.longitude + ',' + e.latitude + ',50000),duration:2})">GPS-Position anfliegen</button>';
}
} else {
exifHtml = '<div class="vlm-exif-card"><div style="font-size:9px;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:2px">EXIF</div><div style="font-size:11px;color:var(--text-dim)">Keine Metadaten gefunden</div></div>';
}
}
// Landscape Clues (Reverse Geolocation)
var cluesHtml = '';
if (data.landscape_clues) {
var lc = data.landscape_clues;
var cl = [];
if (lc.vegetation) cl.push('<b>Vegetation:</b> ' + lc.vegetation);
if (lc.soil_color) cl.push('<b>Boden:</b> ' + lc.soil_color);
if (lc.road_markings) cl.push('<b>Strassen:</b> ' + lc.road_markings);
if (lc.architecture_style) cl.push('<b>Architektur:</b> ' + lc.architecture_style);
if (lc.signage_language) cl.push('<b>Schilder:</b> ' + lc.signage_language);
if (lc.vehicle_types) cl.push('<b>Fahrzeuge:</b> ' + lc.vehicle_types);
if (lc.climate_indicators) cl.push('<b>Klima:</b> ' + lc.climate_indicators);
if (lc.sun_shadow_direction) cl.push('<b>Schatten:</b> ' + lc.sun_shadow_direction);
if (cl.length > 0) {
cluesHtml = '<div style="font-size:9px;letter-spacing:1.5px;color:#ff9800;margin:8px 0 4px">LANDSCHAFTSMERKMALE</div>' +
'<div style="font-size:11px;color:var(--text);line-height:1.8">' + cl.join('<br>') + '</div>';
}
}
// Szene
var sceneEl = document.getElementById('vlm-scene');
if (sceneEl) {
sceneEl.innerHTML = exifHtml +
'<div style="margin-top:8px">' + (data.scene_description || 'Keine Beschreibung') +
(data.terrain ? ' | Gelaende: ' + data.terrain : '') +
(data.estimated_location_type ? ' | Region: ' + data.estimated_location_type : '') +
'</div>' + cluesHtml;
}
// 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, estimated_location_type: VlmUI._currentAnalysis.estimated_location_type || null }),
})
.then(function(r) {
if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || 'Fehler'); });
return r.json();
})
.then(function(data) {
var regionInfo = data.region ? ' (Region: ' + data.region + ')' : ' (weltweit)';
if (searchResult) searchResult.textContent = 'Query generiert (' + data.tag_count + ' Tags)' + regionInfo + '. 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();
},
};
In neuem Issue referenzieren Git Blame ansehen Permalink kopieren