ESPER

PHOTO ANALYSIS — LAPD ISSUE

\n \n \n \n \n

\n\n

◎

LOAD PHOTOGRAPH FOR ANALYSIS

\n \n

or drag & drop

\n \n

\n\n

Enhancing...

\n\n

—

VOICE INACTIVE

\n MIC:\n \n —\n

\n\n

Zoom

1.00x

Position

0, 0

Sector

—

\n VOICE OFF\n

Transcript

—

\n\n\n\n",[160],"b421b70c-1045-11f1-aaf8-42dde27851f2","app.js","9095a6a8-103c-11f1-b2c5-42dde27851f2",["D",1771802698593],16,"// ===== AUTHENTICATION =====\n(async function checkAuth() {\n const loginScreen = document.getElementById('login-screen');\n const appEl = document.getElementById('app');\n const passwordInput = document.getElementById('login-password');\n const submitBtn = document.getElementById('login-submit');\n const errorEl = document.getElementById('login-error');\n\n // Check if already authenticated\n try {\n const resp = await fetch('/api/auth-status');\n const data = await resp.json();\n if (data.authenticated) {\n loginScreen.classList.add('hidden');\n appEl.classList.remove('hidden');\n return; // Already logged in\n }\n } catch (e) {\n // If auth check fails, show login\n }\n\n // Show login screen\n loginScreen.classList.remove('hidden');\n appEl.classList.add('hidden');\n\n async function doLogin() {\n const pw = passwordInput.value.trim();\n if (!pw) { errorEl.textContent = 'ENTER ACCESS CODE'; return; }\n errorEl.textContent = 'AUTHENTICATING...';\n submitBtn.disabled = true;\n try {\n const resp = await fetch('/api/login', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ password: pw }),\n });\n const data = await resp.json();\n if (data.ok) {\n errorEl.textContent = '';\n errorEl.style.color = '#00ff88';\n errorEl.textContent = 'ACCESS GRANTED';\n setTimeout(() => {\n loginScreen.classList.add('hidden');\n appEl.classList.remove('hidden');\n }, 500);\n } else {\n errorEl.style.color = '#ff3333';\n errorEl.textContent = data.error || 'ACCESS DENIED';\n submitBtn.disabled = false;\n passwordInput.value = '';\n passwordInput.focus();\n }\n } catch (e) {\n errorEl.style.color = '#ff3333';\n errorEl.textContent = 'CONNECTION ERROR';\n submitBtn.disabled = false;\n }\n }\n\n submitBtn.onclick = doLogin;\n passwordInput.onkeydown = (e) => { if (e.key === 'Enter') doLogin(); };\n passwordInput.focus();\n})();\n\n// ===== STATE =====\nconst state = {\n imageLoaded: false, zoom: 1, panX: 0, panY: 0,\n imageWidth: 0, imageHeight: 0,\n listening: false, recognition: null,\n isDragging: false, dragStartX: 0, dragStartY: 0, panStartX: 0, panStartY: 0,\n animating: false, enhancing: false,\n};\n\n// Tile-based image storage\nlet baseImage = null; // The original loaded Image\nlet tiles = []; // Array of { img: Image, x, y, w, h } — enhanced overlays in image-space coords\n\nconst MIN_ZOOM = 0.1, MAX_ZOOM = 200, ZOOM_STEP = 1.4, PAN_STEP_FACTOR = 0.15;\nconst $ = (s) => document.querySelector(s);\nconst canvas = $('#viewport-canvas'), ctx = canvas.getContext('2d');\nconst container = $('#viewport-container'), uploadOverlay = $('#upload-overlay');\nconst fileInput = $('#file-input'), commandLog = $('#command-log'), processing = $('#processing');\nconst voiceOverlay = $('#voice-overlay'), voiceLiveTranscript = $('#voice-live-transcript');\nconst voiceStateLabel = $('#voice-state-label'), micSelect = $('#mic-select');\nconst micLevelEl = $('#mic-level'), waveBars = document.querySelectorAll('.wave-bar');\n\nfunction sleep(ms) { return new Promise(r => setTimeout(r, ms)); }\n\n// ===== CANVAS SIZING =====\nfunction resizeCanvas() {\n const dpr = window.devicePixelRatio || 1;\n const cw = container.clientWidth, ch = container.clientHeight;\n canvas.width = cw * dpr;\n canvas.height = ch * dpr;\n canvas.style.width = cw + 'px';\n canvas.style.height = ch + 'px';\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n}\n\n// ===== VIEWPORT RENDERING =====\n// This is the core render function — draws the base image + all enhanced tiles onto the viewport canvas\nfunction renderViewport() {\n const cw = container.clientWidth, ch = container.clientHeight;\n if (!cw || !ch) return;\n\n // Clear\n ctx.clearRect(0, 0, cw, ch);\n\n if (!state.imageLoaded || !baseImage) return;\n\n // Calculate image → screen transform\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n const scale = fitScale * state.zoom;\n const imgScreenX = (cw - state.imageWidth * scale) / 2 + state.panX;\n const imgScreenY = (ch - state.imageHeight * scale) / 2 + state.panY;\n\n // Draw base image\n ctx.drawImage(baseImage,\n imgScreenX, imgScreenY,\n state.imageWidth * scale, state.imageHeight * scale);\n\n // Draw enhanced tiles on top (in order — later tiles overlay earlier ones)\n for (const tile of tiles) {\n const tx = imgScreenX + tile.x * scale;\n const ty = imgScreenY + tile.y * scale;\n const tw = tile.w * scale;\n const th = tile.h * scale;\n ctx.drawImage(tile.img, tx, ty, tw, th);\n }\n}\n\n// ===== IMAGE LOADING =====\nfunction loadImage(src) {\n return new Promise((resolve) => {\n const img = new Image();\n img.onload = () => {\n baseImage = img;\n tiles = []; // Clear all enhanced tiles\n state.imageWidth = img.naturalWidth;\n state.imageHeight = img.naturalHeight;\n state.imageLoaded = true; state.zoom = 1; state.panX = 0; state.panY = 0;\n uploadOverlay.classList.add('hidden');\n $('#btn-enhance').disabled = false; $('#btn-reset').disabled = false;\n resizeCanvas();\n renderViewport();\n updateHUD();\n logCommand('system', 'PHOTOGRAPH LOADED — ' + state.imageWidth + 'x' + state.imageHeight);\n resolve();\n };\n img.src = src;\n });\n}\n\n$('#btn-upload').onclick = () => fileInput.click();\n$('#btn-upload-inner').onclick = () => fileInput.click();\nfileInput.onchange = (e) => {\n const file = e.target.files[0]; if (!file) return;\n const reader = new FileReader();\n reader.onload = (ev) => loadImage(ev.target.result);\n reader.readAsDataURL(file);\n};\n\ncontainer.ondragover = (e) => { e.preventDefault(); container.classList.add('drag-over'); };\ncontainer.ondragleave = () => container.classList.remove('drag-over');\ncontainer.ondrop = (e) => {\n e.preventDefault(); container.classList.remove('drag-over');\n const file = e.dataTransfer.files[0];\n if (file && file.type.startsWith('image/')) {\n const reader = new FileReader();\n reader.onload = (ev) => loadImage(ev.target.result);\n reader.readAsDataURL(file);\n }\n};\n\n// ===== HUD =====\nfunction updateHUD() {\n $('#hud-zoom').textContent = state.zoom.toFixed(2) + 'x';\n $('#hud-pos').textContent = Math.round(state.panX) + ', ' + Math.round(state.panY);\n const cols = 'ABCDEFGHIJ';\n const cw = container.clientWidth, ch = container.clientHeight;\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n const imgDispW = state.imageWidth * fitScale * state.zoom;\n const imgDispH = state.imageHeight * fitScale * state.zoom;\n const imgLeft = (cw - imgDispW) / 2;\n const imgTop = (ch - imgDispH) / 2;\n const relX = ((cw / 2 - state.panX) - imgLeft) / imgDispW;\n const relY = ((ch / 2 - state.panY) - imgTop) / imgDispH;\n const col = Math.max(0, Math.min(9, Math.floor(relX * 10)));\n const row = Math.max(0, Math.min(9, Math.floor(relY * 10)));\n $('#hud-sector').textContent = (state.imageLoaded ? cols[col] + '-' + (row + 1) : '—');\n}\n\n// ===== PAN & ZOOM =====\nfunction animateTo(props, duration = 400) {\n if (state.animating) return;\n state.animating = true;\n const start = { zoom: state.zoom, panX: state.panX, panY: state.panY };\n const target = { ...start, ...props };\n const startTime = performance.now();\n function frame(now) {\n const t = Math.min(1, (now - startTime) / duration);\n const ease = t < 0.5 ? 2*t*t : -1 + (4-2*t)*t;\n state.zoom = start.zoom + (target.zoom - start.zoom) * ease;\n state.panX = start.panX + (target.panX - start.panX) * ease;\n state.panY = start.panY + (target.panY - start.panY) * ease;\n renderViewport(); updateHUD();\n if (t < 1) requestAnimationFrame(frame); else state.animating = false;\n }\n requestAnimationFrame(frame);\n}\n\nfunction zoomToward(newZoom) {\n const ratio = newZoom / state.zoom;\n const newPanX = state.panX * ratio;\n const newPanY = state.panY * ratio;\n animateTo({ zoom: newZoom, panX: newPanX, panY: newPanY });\n}\n\nfunction zoomIn(amount = 1) {\n if (!state.imageLoaded) return;\n let z = state.zoom;\n for (let i = 0; i < amount; i++) z *= ZOOM_STEP;\n z = Math.min(MAX_ZOOM, z);\n zoomToward(z);\n logCommand('system', 'ZOOM IN — ' + z.toFixed(2) + 'x');\n}\nfunction zoomOut(amount = 1) {\n if (!state.imageLoaded) return;\n let z = state.zoom;\n for (let i = 0; i < amount; i++) z /= ZOOM_STEP;\n z = Math.max(MIN_ZOOM, z);\n zoomToward(z);\n logCommand('system', 'ZOOM OUT — ' + z.toFixed(2) + 'x');\n}\nfunction panDirection(dir, amount = 1) {\n if (!state.imageLoaded) return;\n const step = Math.max(container.clientWidth, container.clientHeight) * PAN_STEP_FACTOR * amount;\n const moves = { left: [step,0], right: [-step,0], up: [0,step], down: [0,-step] };\n const [dx,dy] = moves[dir] || [0,0];\n animateTo({ panX: state.panX + dx, panY: state.panY + dy });\n logCommand('system', 'PAN ' + dir.toUpperCase() + (amount > 1 ? ' x' + amount : ''));\n}\nfunction resetView() { if (!state.imageLoaded) return; animateTo({ zoom: 1, panX: 0, panY: 0 }, 600); logCommand('system', 'VIEW RESET'); }\n\n// ===== SECTOR NAVIGATION =====\nfunction parseSector(sectorStr) {\n const match = sectorStr.toUpperCase().match(/^([A-J])-?(\\d{1,2})$/);\n if (!match) return null;\n const col = match[1].charCodeAt(0) - 65;\n const row = parseInt(match[2]) - 1;\n if (row < 0 || row > 9) return null;\n return { col, row };\n}\n\nfunction moveToSector(sectorStr, zoomLevel) {\n if (!state.imageLoaded) return;\n const sector = parseSector(sectorStr);\n if (!sector) { logCommand('error', 'INVALID SECTOR: ' + sectorStr); return; }\n const cw = container.clientWidth, ch = container.clientHeight;\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n const targetZoom = zoomLevel || Math.max(2, state.zoom);\n const cellCenterX = (sector.col + 0.5) / 10;\n const cellCenterY = (sector.row + 0.5) / 10;\n const imgDispW = state.imageWidth * fitScale * targetZoom;\n const imgDispH = state.imageHeight * fitScale * targetZoom;\n const panX = imgDispW * (0.5 - cellCenterX);\n const panY = imgDispH * (0.5 - cellCenterY);\n animateTo({ zoom: targetZoom, panX, panY }, 800);\n const cols = 'ABCDEFGHIJ';\n logCommand('system', 'MOVING TO SECTOR ' + cols[sector.col] + '-' + (sector.row + 1) + ' — ' + targetZoom.toFixed(1) + 'x');\n}\n\n$('#btn-reset').onclick = resetView;\n\n// ===== MOUSE / KEYBOARD INPUT =====\ncontainer.onmousedown = (e) => {\n if (!state.imageLoaded || e.target.tagName === 'BUTTON') return;\n state.isDragging = true; state.dragStartX = e.clientX; state.dragStartY = e.clientY;\n state.panStartX = state.panX; state.panStartY = state.panY;\n};\nwindow.onmousemove = (e) => {\n if (!state.isDragging) return;\n state.panX = state.panStartX + (e.clientX - state.dragStartX);\n state.panY = state.panStartY + (e.clientY - state.dragStartY);\n renderViewport(); updateHUD();\n};\nwindow.onmouseup = () => { state.isDragging = false; };\n\ncontainer.onwheel = (e) => { e.preventDefault(); if (!state.imageLoaded) return; e.deltaY < 0 ? zoomIn() : zoomOut(); };\n\nwindow.onkeydown = (e) => {\n if (!state.imageLoaded) return;\n switch(e.key) {\n case '+': case '=': zoomIn(); break;\n case '-': zoomOut(); break;\n case 'ArrowLeft': panDirection('left'); break;\n case 'ArrowRight': panDirection('right'); break;\n case 'ArrowUp': panDirection('up'); break;\n case 'ArrowDown': panDirection('down'); break;\n case 'r': case 'R': resetView(); break;\n case 'e': case 'E': enhance(); break;\n }\n};\n\n// ===== ENHANCE =====\n// Get viewport info: what region of the image is visible, and is outpainting needed?\nfunction getViewportInfo() {\n const cw = container.clientWidth, ch = container.clientHeight;\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n const scale = fitScale * state.zoom;\n const imgDispW = state.imageWidth * scale, imgDispH = state.imageHeight * scale;\n const imgScreenX = (cw - imgDispW) / 2 + state.panX;\n const imgScreenY = (ch - imgDispH) / 2 + state.panY;\n\n const viewLeft = -imgScreenX / scale;\n const viewTop = -imgScreenY / scale;\n const viewRight = (cw - imgScreenX) / scale;\n const viewBottom = (ch - imgScreenY) / scale;\n\n const srcX = Math.max(0, viewLeft);\n const srcY = Math.max(0, viewTop);\n const srcRight = Math.min(state.imageWidth, viewRight);\n const srcBottom = Math.min(state.imageHeight, viewBottom);\n const srcW = Math.max(1, srcRight - srcX);\n const srcH = Math.max(1, srcBottom - srcY);\n\n const needsOutpaint = viewLeft < -1 || viewTop < -1 ||\n viewRight > state.imageWidth + 1 || viewBottom > state.imageHeight + 1;\n\n const viewW = viewRight - viewLeft;\n const viewH = viewBottom - viewTop;\n const imgArea = srcW * srcH;\n const viewArea = viewW * viewH;\n const outpaintRatio = viewArea > 0 ? 1 - (imgArea / viewArea) : 0;\n\n return {\n srcX, srcY, srcW, srcH,\n viewLeft, viewTop, viewRight, viewBottom, viewW, viewH,\n imgScreenX, imgScreenY, imgDispW, imgDispH, scale,\n cw, ch,\n needsOutpaint, outpaintRatio,\n };\n}\n\n// Render the current view (base + tiles) into a capture canvas at a target resolution\nfunction captureViewport(targetSize) {\n const info = getViewportInfo();\n const captureCanvas = document.createElement('canvas');\n const captureCtx = captureCanvas.getContext('2d');\n\n if (info.needsOutpaint) {\n // Outpaint mode: capture full viewport including black areas\n const aspect = info.cw / info.ch;\n if (aspect >= 1) {\n captureCanvas.width = targetSize;\n captureCanvas.height = Math.round(targetSize / aspect);\n } else {\n captureCanvas.height = targetSize;\n captureCanvas.width = Math.round(targetSize * aspect);\n }\n captureCtx.fillStyle = '#000';\n captureCtx.fillRect(0, 0, captureCanvas.width, captureCanvas.height);\n\n // Map screen coords to capture canvas coords\n const scaleToCapture = captureCanvas.width / info.cw;\n const imgCX = info.imgScreenX * scaleToCapture;\n const imgCY = info.imgScreenY * scaleToCapture;\n const imgCW = info.imgDispW * scaleToCapture;\n const imgCH = info.imgDispH * scaleToCapture;\n\n // Draw base\n captureCtx.drawImage(baseImage, imgCX, imgCY, imgCW, imgCH);\n // Draw tiles\n const scale = info.scale;\n for (const tile of tiles) {\n const tx = (info.imgScreenX + tile.x * scale) * scaleToCapture;\n const ty = (info.imgScreenY + tile.y * scale) * scaleToCapture;\n const tw = tile.w * scale * scaleToCapture;\n const th = tile.h * scale * scaleToCapture;\n captureCtx.drawImage(tile.img, tx, ty, tw, th);\n }\n } else {\n // Enhance mode: capture only the visible image region at high res\n const aspect = info.srcW / info.srcH;\n if (aspect >= 1) {\n captureCanvas.width = targetSize;\n captureCanvas.height = Math.round(targetSize / aspect);\n } else {\n captureCanvas.height = targetSize;\n captureCanvas.width = Math.round(targetSize * aspect);\n }\n\n // Scale factor from image-space crop to capture canvas\n const cropScaleX = captureCanvas.width / info.srcW;\n const cropScaleY = captureCanvas.height / info.srcH;\n\n // Draw base image (cropped to visible region)\n captureCtx.drawImage(baseImage,\n info.srcX, info.srcY, info.srcW, info.srcH,\n 0, 0, captureCanvas.width, captureCanvas.height);\n\n // Draw tiles that overlap the visible region\n for (const tile of tiles) {\n // Tile bounds in image space\n const tLeft = tile.x, tTop = tile.y;\n const tRight = tile.x + tile.w, tBottom = tile.y + tile.h;\n\n // Visible region bounds\n const vLeft = info.srcX, vTop = info.srcY;\n const vRight = info.srcX + info.srcW, vBottom = info.srcY + info.srcH;\n\n // Intersection\n const iLeft = Math.max(tLeft, vLeft), iTop = Math.max(tTop, vTop);\n const iRight = Math.min(tRight, vRight), iBottom = Math.min(tBottom, vBottom);\n if (iLeft >= iRight || iTop >= iBottom) continue; // no overlap\n\n // Source rect within the tile's image\n const tileSrcX = (iLeft - tLeft) / tile.w * tile.img.naturalWidth;\n const tileSrcY = (iTop - tTop) / tile.h * tile.img.naturalHeight;\n const tileSrcW = (iRight - iLeft) / tile.w * tile.img.naturalWidth;\n const tileSrcH = (iBottom - iTop) / tile.h * tile.img.naturalHeight;\n\n // Destination rect on capture canvas\n const destX = (iLeft - info.srcX) * cropScaleX;\n const destY = (iTop - info.srcY) * cropScaleY;\n const destW = (iRight - iLeft) * cropScaleX;\n const destH = (iBottom - iTop) * cropScaleY;\n\n captureCtx.drawImage(tile.img,\n tileSrcX, tileSrcY, tileSrcW, tileSrcH,\n destX, destY, destW, destH);\n }\n }\n\n return { canvas: captureCanvas, info };\n}\n\nasync function enhance() {\n if (!state.imageLoaded || state.enhancing) return;\n state.enhancing = true; processing.classList.add('active'); container.classList.add('enhancing');\n const sector = $('#hud-sector').textContent;\n const info = getViewportInfo();\n\n const mode = info.needsOutpaint ? 'outpaint' : 'enhance';\n logCommand('system', (mode === 'outpaint' ? 'EXPANDING FIELD OF VIEW' : 'ENHANCING') +\n ' — SECTOR ' + sector + ' — ' + state.zoom.toFixed(1) + 'x MAGNIFICATION...');\n\n try {\n // Capture what's visible at 1024px\n const { canvas: captureCanvas } = captureViewport(1024);\n const base64 = captureCanvas.toDataURL('image/jpeg', 0.85).split(',')[1];\n\n console.log('[ESPER Enhance]', mode.toUpperCase(), '| capture:', captureCanvas.width + 'x' + captureCanvas.height,\n '| crop:', Math.round(info.srcX) + ',' + Math.round(info.srcY),\n Math.round(info.srcW) + 'x' + Math.round(info.srcH),\n '| zoom:', state.zoom.toFixed(2) + 'x',\n '| tiles:', tiles.length);\n\n const resp = await fetch('/api/enhance', {\n method: 'POST', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageData: base64, mode }),\n });\n const data = await resp.json();\n\n if (data.error) {\n logCommand('error', (mode === 'outpaint' ? 'OUTPAINT' : 'ENHANCE') + ' FAILED: ' + data.error);\n } else if (data.image) {\n // Load the enhanced image\n const enhancedImg = await new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.src = 'data:image/png;base64,' + data.image;\n });\n\n if (mode === 'outpaint') {\n // For outpaint: the result covers the full viewport including areas outside the image\n // We need to expand the base image to include the new area\n const newLeft = Math.min(0, Math.floor(info.viewLeft));\n const newTop = Math.min(0, Math.floor(info.viewTop));\n const newRight = Math.max(state.imageWidth, Math.ceil(info.viewRight));\n const newBottom = Math.max(state.imageHeight, Math.ceil(info.viewBottom));\n const newW = newRight - newLeft;\n const newH = newBottom - newTop;\n\n // Create expanded base image\n const fc = document.createElement('canvas');\n fc.width = newW; fc.height = newH;\n const fctx = fc.getContext('2d');\n\n // Draw the outpainted result scaled to fill the new canvas\n fctx.drawImage(enhancedImg, 0, 0, newW, newH);\n\n // Draw original base image on top (preserves original detail)\n const offsetX = -newLeft;\n const offsetY = -newTop;\n fctx.drawImage(baseImage, offsetX, offsetY, state.imageWidth, state.imageHeight);\n\n // Draw existing tiles on top too\n for (const tile of tiles) {\n fctx.drawImage(tile.img, offsetX + tile.x, offsetY + tile.y, tile.w, tile.h);\n }\n\n // Create new base image from the expanded canvas\n const newBase = new Image();\n await new Promise((resolve) => {\n newBase.onload = resolve;\n newBase.src = fc.toDataURL('image/jpeg', 0.92);\n });\n\n // Update tiles: shift their coordinates to account for new origin\n for (const tile of tiles) {\n tile.x += offsetX;\n tile.y += offsetY;\n }\n\n // Adjust pan\n const scale = info.scale;\n state.panX -= newLeft * scale;\n state.panY -= newTop * scale;\n\n baseImage = newBase;\n state.imageWidth = newW;\n state.imageHeight = newH;\n\n renderViewport(); updateHUD();\n logCommand('system', 'FIELD OF VIEW EXPANDED — ' + newW + 'x' + newH);\n } else {\n // For enhance: store as a new tile covering the visible region\n // The tile's image-space coordinates are the visible crop region\n tiles.push({\n img: enhancedImg,\n x: info.srcX,\n y: info.srcY,\n w: info.srcW,\n h: info.srcH,\n });\n\n renderViewport();\n logCommand('system', 'ENHANCEMENT COMPLETE — SECTOR ' + sector +\n ' — TILE ' + tiles.length +\n ' (' + enhancedImg.naturalWidth + 'x' + enhancedImg.naturalHeight +\n ' covering ' + Math.round(info.srcW) + 'x' + Math.round(info.srcH) + 'px)');\n }\n }\n } catch (err) { logCommand('error', 'ENHANCE ERROR: ' + err.message); }\n finally { state.enhancing = false; processing.classList.remove('active'); setTimeout(() => container.classList.remove('enhancing'), 1500); }\n}\n\n$('#btn-enhance').onclick = enhance;\n\n// ===== VOICE CONTROL =====\nlet micStream = null;\nlet micTrack = null;\nlet audioCtx = null;\nlet analyser = null;\nlet levelRAF = null;\n\nfunction setVoiceState(s) {\n console.log('[ESPER Voice] State:', s);\n voiceOverlay.classList.remove('speaking');\n voiceStateLabel.classList.remove('processing');\n switch(s) {\n case 'inactive':\n voiceOverlay.classList.remove('active');\n voiceStateLabel.textContent = 'VOICE INACTIVE';\n voiceLiveTranscript.textContent = '—'; voiceLiveTranscript.className = '';\n break;\n case 'listening':\n voiceOverlay.classList.add('active');\n voiceStateLabel.textContent = 'LISTENING — SPEAK A COMMAND';\n break;\n case 'speaking':\n voiceOverlay.classList.add('active', 'speaking');\n voiceStateLabel.textContent = 'RECEIVING AUDIO';\n break;\n case 'processing':\n voiceOverlay.classList.add('active'); voiceOverlay.classList.remove('speaking');\n voiceStateLabel.textContent = 'INTERPRETING COMMAND...';\n voiceStateLabel.classList.add('processing');\n break;\n }\n}\n\nasync function enumerateMics() {\n try {\n const tempStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n tempStream.getTracks().forEach(t => t.stop());\n const devices = await navigator.mediaDevices.enumerateDevices();\n const inputs = devices.filter(d => d.kind === 'audioinput');\n console.log('[ESPER Mic] Found', inputs.length, 'devices');\n micSelect.innerHTML = '';\n inputs.forEach((d, i) => {\n const opt = document.createElement('option');\n opt.value = d.deviceId;\n opt.textContent = d.label || ('Microphone ' + (i + 1));\n micSelect.appendChild(opt);\n });\n const saved = localStorage.getItem('esper-mic-id');\n if (saved) micSelect.value = saved;\n } catch (err) {\n console.error('[ESPER Mic] Enumerate failed:', err);\n logCommand('error', 'MIC ACCESS DENIED');\n }\n}\n\nasync function startLevelMonitor() {\n stopLevelMonitor();\n const deviceId = micSelect.value;\n const constraints = deviceId ? { audio: { deviceId: { exact: deviceId } } } : { audio: true };\n try {\n micStream = await navigator.mediaDevices.getUserMedia(constraints);\n micTrack = micStream.getAudioTracks()[0];\n console.log('[ESPER Mic] Acquired track:', micTrack.label, '| id:', micTrack.id);\n logCommand('system', 'MIC: ' + (micTrack.label || 'Default'));\n localStorage.setItem('esper-mic-id', micSelect.value);\n\n audioCtx = new AudioContext();\n const source = audioCtx.createMediaStreamSource(new MediaStream([micTrack]));\n analyser = audioCtx.createAnalyser();\n analyser.fftSize = 256; analyser.smoothingTimeConstant = 0.6;\n source.connect(analyser);\n\n const bufLen = analyser.frequencyBinCount;\n const data = new Uint8Array(bufLen);\n const numBars = waveBars.length;\n let peak = 0;\n\n function tick() {\n levelRAF = requestAnimationFrame(tick);\n analyser.getByteFrequencyData(data);\n const bandSize = Math.floor(bufLen / numBars);\n let maxLvl = 0;\n for (let i = 0; i < numBars; i++) {\n let sum = 0;\n for (let j = 0; j < bandSize; j++) sum += data[i * bandSize + j];\n const avg = sum / bandSize;\n if (avg > maxLvl) maxLvl = avg;\n waveBars[i].style.height = Math.max(3, (avg / 255) * 24) + 'px';\n }\n peak = peak * 0.9 + maxLvl * 0.1;\n if (peak > 2) { micLevelEl.style.color = peak > 100 ? '#00ff88' : '#ff8800'; micLevelEl.textContent = Math.round(peak); }\n else { micLevelEl.style.color = '#ff3333'; micLevelEl.textContent = 'SILENT'; }\n }\n tick();\n } catch(err) { console.error('[ESPER Mic] Monitor failed:', err); }\n}\n\nfunction stopLevelMonitor() {\n if (levelRAF) { cancelAnimationFrame(levelRAF); levelRAF = null; }\n if (micStream) { micStream.getTracks().forEach(t => t.stop()); micStream = null; }\n micTrack = null;\n if (audioCtx) { try { audioCtx.close(); } catch(e) {} audioCtx = null; analyser = null; }\n waveBars.forEach(b => { b.style.height = '4px'; });\n micLevelEl.textContent = '—'; micLevelEl.style.color = '#555';\n}\n\nfunction initRecognition() {\n const SR = window.SpeechRecognition || window.webkitSpeechRecognition;\n if (!SR) { logCommand('error', 'SPEECH RECOGNITION NOT AVAILABLE'); return; }\n\n console.log('[ESPER Voice] Creating SpeechRecognition');\n const rec = new SR();\n rec.continuous = true;\n rec.interimResults = true;\n rec.lang = 'en-US';\n state.recognition = rec;\n\n rec.onstart = () => { console.log('[ESPER Voice] onstart'); setVoiceState('listening'); };\n rec.onaudiostart = () => { console.log('[ESPER Voice] onaudiostart'); };\n rec.onspeechstart = () => { console.log('[ESPER Voice] onspeechstart'); setVoiceState('speaking'); };\n rec.onspeechend = () => { console.log('[ESPER Voice] onspeechend'); if (state.listening) setVoiceState('listening'); };\n\n rec.onresult = (event) => {\n let finalText = '', interim = '';\n for (let i = event.resultIndex; i < event.results.length; i++) {\n const t = event.results[i][0].transcript.trim();\n const c = event.results[i][0].confidence;\n if (event.results[i].isFinal) {\n finalText = t;\n console.log('[ESPER Voice] FINAL:', t, '(' + (c*100).toFixed(1) + '%)');\n } else {\n interim = t;\n }\n }\n if (interim) {\n voiceLiveTranscript.textContent = interim;\n voiceLiveTranscript.className = 'interim';\n $('#hud-transcript').textContent = interim;\n setVoiceState('speaking');\n }\n if (finalText) {\n voiceLiveTranscript.textContent = '\"' + finalText + '\"';\n voiceLiveTranscript.className = 'final';\n $('#hud-transcript').textContent = finalText;\n logCommand('voice', '▶ ' + finalText);\n processVoiceCommand(finalText);\n }\n };\n\n rec.onerror = (event) => {\n console.warn('[ESPER Voice] onerror:', event.error);\n if (event.error === 'no-speech' || event.error === 'aborted') return;\n logCommand('error', 'VOICE ERROR: ' + event.error);\n };\n\n rec.onend = () => {\n console.log('[ESPER Voice] onend — listening:', state.listening);\n if (state.listening) {\n setVoiceState('listening');\n setTimeout(() => {\n if (state.listening && state.recognition) {\n try {\n if (micTrack && micTrack.readyState === 'live') state.recognition.start(micTrack);\n else state.recognition.start();\n console.log('[ESPER Voice] Restarted');\n } catch(e) {\n console.warn('[ESPER Voice] Restart failed, retrying...', e.message);\n setTimeout(() => {\n if (state.listening) try {\n if (micTrack && micTrack.readyState === 'live') state.recognition.start(micTrack);\n else state.recognition.start();\n } catch(e2) {}\n }, 500);\n }\n }\n }, 200);\n } else {\n setVoiceState('inactive');\n }\n };\n}\n\nmicSelect.onchange = async () => {\n console.log('[ESPER Mic] Selected:', micSelect.options[micSelect.selectedIndex].textContent);\n localStorage.setItem('esper-mic-id', micSelect.value);\n if (state.listening) {\n logCommand('system', 'SWITCHING MICROPHONE...');\n if (state.recognition) try { state.recognition.stop(); } catch(e) {}\n state.listening = false;\n await sleep(200);\n await startLevelMonitor();\n state.listening = true;\n try {\n if (micTrack) state.recognition.start(micTrack);\n else state.recognition.start();\n console.log('[ESPER Voice] Restarted with new mic');\n } catch(e) { console.error('[ESPER Voice] Restart with new mic failed:', e); }\n }\n};\n\nif (navigator.mediaDevices?.addEventListener) {\n navigator.mediaDevices.addEventListener('devicechange', () => { console.log('[ESPER Mic] Device change'); enumerateMics(); });\n}\n\nasync function toggleVoice() {\n if (state.listening) {\n state.listening = false;\n if (state.recognition) try { state.recognition.stop(); } catch(e) {}\n stopLevelMonitor();\n $('#voice-dot').classList.remove('listening');\n $('#voice-status').textContent = 'VOICE OFF';\n $('#btn-voice').classList.remove('active');\n setVoiceState('inactive');\n logCommand('system', 'VOICE CONTROL DEACTIVATED');\n } else {\n if (!state.recognition) initRecognition();\n if (!state.recognition) return;\n if (micSelect.options.length <= 1) await enumerateMics();\n await startLevelMonitor();\n state.listening = true;\n try {\n if (micTrack) {\n console.log('[ESPER Voice] Starting recognition with track:', micTrack.label);\n state.recognition.start(micTrack);\n } else {\n console.log('[ESPER Voice] Starting recognition with default mic');\n state.recognition.start();\n }\n } catch(e) {\n console.error('[ESPER Voice] Start failed:', e);\n logCommand('error', 'VOICE START FAILED: ' + e.message);\n state.listening = false; stopLevelMonitor(); return;\n }\n $('#voice-dot').classList.add('listening');\n $('#voice-status').textContent = 'LISTENING';\n $('#btn-voice').classList.add('active');\n logCommand('system', 'VOICE CONTROL ACTIVATED — AWAITING COMMANDS');\n console.log('[ESPER Voice] Activated');\n }\n}\n\n$('#btn-voice').onclick = toggleVoice;\n\n// ===== VOICE COMMAND PROCESSING =====\nasync function processVoiceCommand(text) {\n setVoiceState('processing');\n console.log('[ESPER Voice] → Gemini:', text);\n try {\n const resp = await fetch('/api/interpret', {\n method: 'POST', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ transcript: text }),\n });\n const data = await resp.json();\n console.log('[ESPER Voice] ← Gemini:', JSON.stringify(data));\n if (data.error) {\n logCommand('error', 'INTERPRET FAILED: ' + data.error);\n setVoiceState(state.listening ? 'listening' : 'inactive'); return;\n }\n const commands = data.commands || [];\n if (commands.length === 0) {\n logCommand('system', 'NO ACTIONABLE COMMAND');\n setVoiceState(state.listening ? 'listening' : 'inactive'); return;\n }\n const summary = commands.map(c => {\n if (c.action === 'pan') return 'PAN ' + (c.direction||'').toUpperCase() + (c.amount > 1 ? ' x'+c.amount : '');\n if (c.action === 'zoom_in') return 'ZOOM IN' + (c.amount > 1 ? ' x'+c.amount : '');\n if (c.action === 'zoom_out') return 'ZOOM OUT' + (c.amount > 1 ? ' x'+c.amount : '');\n if (c.action === 'move_to_sector') return 'MOVE → SECTOR ' + (c.sector||'').toUpperCase();\n if (c.action === 'zoom_sector') return 'ZOOM → SECTOR ' + (c.sector||'').toUpperCase() + (c.zoom ? ' @' + c.zoom + 'x' : '');\n if (c.action === 'noop') return c.message || 'OK';\n return c.action.toUpperCase();\n }).join(' → ');\n voiceLiveTranscript.textContent = '⚡ ' + summary;\n voiceLiveTranscript.className = 'final';\n logCommand('system', '⚡ ' + summary);\n\n for (let i = 0; i < commands.length; i++) {\n if (i > 0) await sleep(300);\n await executeCommand(commands[i]);\n }\n await sleep(500);\n setVoiceState(state.listening ? 'listening' : 'inactive');\n } catch (err) {\n logCommand('error', 'ERROR: ' + err.message);\n setVoiceState(state.listening ? 'listening' : 'inactive');\n }\n}\n\nasync function executeCommand(cmd) {\n const amt = cmd.amount || 1;\n switch (cmd.action) {\n case 'zoom_in': zoomIn(amt); break;\n case 'zoom_out': zoomOut(amt); break;\n case 'pan': if (cmd.direction) panDirection(cmd.direction, amt); break;\n case 'enhance': await enhance(); break;\n case 'move_to_sector':\n if (cmd.sector) moveToSector(cmd.sector, cmd.zoom);\n break;\n case 'zoom_sector':\n if (cmd.sector) moveToSector(cmd.sector, cmd.zoom || 5);\n break;\n case 'reset': resetView(); break;\n case 'hardcopy':\n logCommand('system', 'HARDCOPY OUTPUT INITIATED');\n // Export the viewport canvas as an image download\n const dataUrl = canvas.toDataURL('image/jpeg', 0.95);\n const a = document.createElement('a'); a.href = dataUrl; a.download = 'esper-output.jpg'; a.click();\n break;\n case 'hold': logCommand('system', 'HOLDING POSITION'); break;\n case 'noop': if (cmd.message) logCommand('system', cmd.message); break;\n default: logCommand('system', 'UNKNOWN: ' + cmd.action);\n }\n}\n\n// ===== COMMAND LOG =====\nfunction logCommand(type, text) {\n const entry = document.createElement('div');\n entry.className = 'command-entry ' + type;\n entry.textContent = '[' + new Date().toLocaleTimeString('en-US', { hour12: false }) + '] ' + text;\n commandLog.appendChild(entry);\n while (commandLog.children.length > 8) commandLog.removeChild(commandLog.firstChild);\n setTimeout(() => {\n if (entry.parentNode) { entry.style.transition = 'opacity 2s'; entry.style.opacity = '0'; setTimeout(() => entry.remove(), 2000); }\n }, 8000);\n}\n\n// ===== GRID =====\nfunction drawGrid() {\n const ov = $('#grid-overlay'); ov.innerHTML = '';\n const cw = container.clientWidth, ch = container.clientHeight, sp = 80;\n for (let y = sp; y < ch; y += sp) { const l = document.createElement('div'); l.className = 'grid-line-h'; l.style.top = y+'px'; ov.appendChild(l); }\n for (let x = sp; x < cw; x += sp) { const l = document.createElement('div'); l.className = 'grid-line-v'; l.style.left = x+'px'; ov.appendChild(l); }\n}\n\n// ===== INIT =====\nwindow.onresize = () => {\n resizeCanvas();\n drawGrid();\n if (state.imageLoaded) { renderViewport(); updateHUD(); }\n};\nresizeCanvas();\ndrawGrid();\nlogCommand('system', 'ESPER MACHINE ONLINE');\nlogCommand('system', 'LAPD FILE ACCESS — AUTHENTICATED');\nlogCommand('system', 'AWAITING PHOTOGRAPH INPUT...');",[167],"pulls",0,"branches","forks","envVars",{"_181":20,"_183":174},"connections",{"_181":174,"_182":174},"count","unfilledCount","emptyCount",{"_27":166,"_13":167,"_56":168,"_37":-5,"_29":30,"_143":98,"_145":131,"_31":198,"_33":170,"_59":47,"_148":171,"_61":24,"_150":-5,"_189":199,"_113":200},{"_27":159,"_13":160,"_56":161,"_37":-5,"_29":30,"_143":162,"_145":131,"_31":195,"_33":20,"_59":47,"_148":164,"_61":24,"_150":-5,"_189":196,"_113":197},{"_27":152,"_13":58,"_56":57,"_37":-5,"_29":30,"_143":153,"_145":131,"_31":192,"_33":155,"_59":156,"_148":157,"_61":24,"_150":14,"_189":193,"_113":194},{"_27":140,"_13":141,"_56":142,"_37":-5,"_29":30,"_143":144,"_145":131,"_31":188,"_33":147,"_59":47,"_148":149,"_61":24,"_150":-5,"_189":190,"_113":191},["D",1771802687024],"children",[],[141],["D",1771802662820],[],[58],["D",1771802673476],[],[160],["D",1771802698593],[],[167],["D",1771796521729],{"_11":12,"_112":64},{"_11":12,"_107":108,"_63":64,"_25":62,"_109":110,"_111":24},{"_33":98,"_13":16,"_27":30,"_99":65,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":14,"_106":12},"ctx",{"_45":-5,"_133":238,"_239":240,"_241":242,"_243":24,"_244":24,"_245":24,"_246":131,"_247":-5,"_248":-7,"_249":-7,"_250":174,"_251":24,"_252":24,"_253":-5,"_254":24,"_255":24,"_256":24,"_257":-5},"ENV",{"_209":210,"_211":212,"_213":16,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History