{"id":120,"date":"2026-07-05T19:15:04","date_gmt":"2026-07-05T17:15:04","guid":{"rendered":"https:\/\/sichtraum.tha.de\/2026\/projekt-xy-copy\/"},"modified":"2026-07-22T11:14:55","modified_gmt":"2026-07-22T09:14:55","slug":"maritime-fleet-control","status":"publish","type":"post","link":"https:\/\/sichtraum.tha.de\/2026\/maritime-fleet-control\/","title":{"rendered":"Maritime Intelligent Interface"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":12,"featured_media":607,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"class_list":["post-120","post","type-post","status-publish","has-post-thumbnail","hentry","category-work"],"grid":"{\"colCount\":12,\"colGutter\":0,\"rowGutters\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],\"frameMargin\":5,\"leftFrameMargin\":5,\"rightFrameMargin\":5,\"topFrameMargin\":400,\"mus\":{\"colGutterMu\":\"px\",\"rowGutterMu\":\"%\",\"topFrameMu\":\"px\",\"bottomFrameMu\":\"%\",\"frameMu\":\"%\"},\"bottomFrameMargin\":5,\"rowAttrs\":[{\"relid\":19},{\"relid\":1},{\"relid\":62},{\"relid\":8},{\"bgvideo\":{\"mp4\":\"\/wp-content\/uploads\/2026\/07\/MARIIVideo.mp4\",\"mp4Ar\":0.5625,\"filename\":\"MARIIVideo.mp4\",\"image\":{\"full\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster-1.png\",\"_1280\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster-1-1280x720.png\",\"_1024\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster-1-1024x576.png\",\"_768\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster-1-768x432.png\",\"_512\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster-1-512x288.png\",\"_265\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster-1-265x149.png\"},\"imageAr\":0.5625,\"imageW\":1920,\"imageH\":1080,\"imageAttid\":156,\"mp4Attid\":601,\"mp4H\":1080,\"mp4W\":1920,\"useExternalVideo\":null,\"externalVideoUrl\":null,\"unmutebutton\":false,\"unmuteButtonStyle\":1,\"unmuteButtonPosition\":\"bottom-right\",\"invertIconColor\":false},\"bgimageopacity\":65,\"rowBgObjectPosition\":\"center center\",\"relid\":7,\"rowPaddingTop\":300,\"rowPaddingTopMu\":\"px\",\"rowPaddingBottom\":300,\"rowPaddingBottomMu\":\"px\"},{\"relid\":55},{\"relid\":3},{\"relid\":16},{\"relid\":5},{\"relid\":10},{\"relid\":4},{\"relid\":43},{\"relid\":15},{\"relid\":69},{\"relid\":14},{\"relid\":50},{\"relid\":46},{\"relid\":71},{\"relid\":48},{\"relid\":52},{\"relid\":54},{\"relid\":73},{\"relid\":57},{\"relid\":25},{\"relid\":32},{\"relid\":36},{\"relid\":38},{\"relid\":34},{\"relid\":60},{\"relid\":63},{\"relid\":65},{\"relid\":23},{\"relid\":68},{\"relid\":30},{\"relid\":28},{\"relid\":79}],\"bgColor\":null,\"bgImage\":null,\"cont\":[{\"type\":\"img\",\"cont\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster16-9.png\",\"align\":\"middle\",\"row\":0,\"col\":0,\"colspan\":12,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":21,\"attid\":607,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster16-9.png\",\"_1024\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster16-9-1024x576.png\",\"_768\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster16-9-768x432.png\",\"_512\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster16-9-512x288.png\",\"_265\":\"\/wp-content\/uploads\/2026\/07\/MARII-poster16-9-265x149.png\"},\"w\":1179,\"h\":663,\"ar\":0.56234096692111957,\"alt\":\"\",\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<h1 class=\\\"_Header1\\\"><span style=\\\"color: #020a3a;\\\">MARII<\/span><\/h1><h1 class=\\\"_Header1\\\"><span style=\\\"color: #020a3a;\\\">(Maritime Intelligent Interface)<\/span><\/h1><h2><span style=\\\"color: #020a3a;\\\">Control between humans and autonomous maritime swarms<\/span><\/h2>\",\"align\":\"top\",\"row\":1,\"col\":0,\"colspan\":12,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":2,\"absolute_position\":false,\"bgColor\":{\"enableBgColor\":false,\"bgColor\":\"#ffffff\",\"bgOpacity\":100},\"textAnimation\":{\"enableTextAnimation\":false,\"animationType\":\"masked_lines\",\"easing\":\"easeOutExpo\",\"top\":80,\"duration\":40,\"delay\":0,\"lineMaskPaddingBottom\":false,\"syncWithNavigationAnimations\":false}},{\"type\":\"text\",\"cont\":\"<p>The core idea of MARII is to pick two of the most important mediums of human communication, voice and gestures, and combine them to create a significantly better interaction experience than the current state of text-based prompting. By delivering context over two different modalities simultaneously, the user can express intent much faster and more naturally than typing.<br \/>For example, instead of typing \\\"Move ship 1 to the windfarm located at coordinates 54.32\\u00b0N, 10.14\\u00b0E\\\", the user can simply point at the ship, point at the windfarm, and say \\\"Move this ship here.\\\" The gesture provides the spatial reference, and the voice provides the action and intent. This division of labor is precisely how humans naturally communicate about physical spaces.<\/p>\",\"align\":\"middle\",\"row\":2,\"col\":0,\"colspan\":12,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":67,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"html\",\"cont\":\"<div class=\\\"boat-section\\\" style=\\\"height: 300px;\\\">\\n  <svg id=\\\"routeSvg\\\" viewBox=\\\"0 0 1000 200\\\" preserveAspectRatio=\\\"none\\\">\\n    <path id=\\\"routePath\\\"\\n      d=\\\"M 40 100 C 250 40, 400 160, 600 100 S 850 40, 960 100\\\"\\n      fill=\\\"none\\\" stroke=\\\"#888\\\" stroke-width=\\\"2\\\" stroke-dasharray=\\\"6 8\\\" \/>\\n  <\/svg>\\n  <div id=\\\"boatIcon\\\" class=\\\"boat-triangle\\\"><\/div>\\n<\/div>\\n<style>\\n.boat-triangle {\\n  position: absolute;\\n  width: 0;\\n  height: 0;\\n  border-left: 12px solid transparent;\\n  border-right: 12px solid transparent;\\n  border-bottom: 24px solid #0a1f4d;\\n  transform-origin: 50% 50%;\\n  z-index: 10;\\n  filter: drop-shadow(0 0 2px #00d9ff) drop-shadow(0 0 4px #00d9ff);\\n}\\n<\/style>\\n\\n<script>\\nconst path = document.getElementById('routePath');\\nconst boat = document.getElementById('boatIcon');\\nconst section = document.querySelector('.boat-section');\\nconst total = path.getTotalLength();\\n\\nfunction updateBoat() {\\n  const rect = section.getBoundingClientRect();\\n  const scrollableDist = rect.height + window.innerHeight;\\n  let progress = (window.innerHeight - rect.top) \/ scrollableDist;\\n  progress = Math.min(Math.max(progress, 0), 1);\\n\\n  const dist = progress * total;\\n  const p = path.getPointAtLength(dist);\\n  const p2 = path.getPointAtLength(Math.min(dist + 1, total));\\n  const angle = Math.atan2(p2.y - p.y, p2.x - p.x) * 180 \/ Math.PI + 90;\\n\\n  const scaleX = section.clientWidth \/ 1000;\\n  const scaleY = section.clientHeight \/ 200;\\n\\n  boat.style.left = (p.x * scaleX - 12) + 'px';\\n  boat.style.top = (p.y * scaleY - 30) + 'px';\\n  boat.style.transform = `rotate(${angle}deg)`;\\n}\\n\\nwindow.addEventListener('scroll', updateBoat);\\nwindow.addEventListener('resize', updateBoat);\\nupdateBoat();\\n<\/script>\",\"align\":\"middle\",\"row\":3,\"col\":0,\"colspan\":12,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":12,\"config\":{\"label\":\"\"},\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p><p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":5,\"col\":4,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":4,\"relid\":59,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p class=\\\"_Teaser\\\">What is MARII?<\/p>\",\"align\":\"top\",\"row\":6,\"col\":0,\"colspan\":8,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":6,\"absolute_position\":false,\"bgColor\":{\"enableBgColor\":false,\"bgColor\":\"#ffffff\",\"bgOpacity\":100}},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":7,\"col\":4,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":4,\"relid\":17,\"absolute_position\":false},{\"type\":\"img\",\"cont\":\"\/wp-content\/uploads\/2026\/07\/isla-ejemplo.png\",\"align\":\"top\",\"row\":8,\"col\":0,\"colspan\":3,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":13,\"attid\":136,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2026\/07\/isla-ejemplo.png\",\"_1024\":\"\/wp-content\/uploads\/2026\/07\/isla-ejemplo-1024x1489.png\",\"_768\":\"\/wp-content\/uploads\/2026\/07\/isla-ejemplo-768x1117.png\",\"_512\":\"\/wp-content\/uploads\/2026\/07\/isla-ejemplo-512x744.png\",\"_265\":\"\/wp-content\/uploads\/2026\/07\/isla-ejemplo-265x385.png\"},\"w\":1095,\"h\":1592,\"ar\":1.4538812785388129,\"alt\":\"\",\"absolute_position\":false,\"textOnElement\":{\"topLeft\":\"\",\"topCenter\":\"\",\"topRight\":\"\",\"leftCenter\":\"\",\"centerCenter\":\"\",\"rightCenter\":\"\",\"bottomLeft\":\"\",\"bottomCenter\":\"\",\"bottomRight\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"enableSpacePhone\":false,\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\",\"darkGradientAtTop\":false,\"darkGradientAtBottom\":false,\"darkGradientAtTopColor\":\"#000000\",\"darkGradientAtBottomColor\":\"#000000\"},\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p>MARII is a platform that studies how humans and AI agents in maritime environments work together <strong>under pressure.<\/strong><\/p><p>Operators <strong>command a fleet<\/strong> of vessels using hand gestures and voice, on a screen.<\/p><p>Behind the scenes, an AI orchestrator interprets human intent in real time and decides how much control to hand back.<\/p><p>By measuring cognitive load and response times across rescue, resource-allocation, and crisis scenarios, MARII asks one question:<\/p><p>When the stakes are high at sea <strong>who should be in charge?<\/strong> The human, the machine, or the space between them?<\/p>\",\"align\":\"middle\",\"row\":8,\"col\":4,\"colspan\":8,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":26,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p><p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":9,\"col\":4,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":4,\"relid\":11,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p class=\\\"_Teaser\\\" style=\\\"text-align: right;\\\">hOW DOES IT WORK?<\/p>\",\"align\":\"top\",\"row\":10,\"col\":4,\"colspan\":3,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":4,\"relid\":9,\"absolute_position\":false,\"bgColor\":{\"enableBgColor\":false,\"bgColor\":\"#ffffff\",\"bgOpacity\":100}},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":11,\"col\":5,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":5,\"relid\":44,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p>\\u00a0Video Capture &amp; 3D Landmark Tracking<\/p>\",\"align\":\"middle\",\"row\":12,\"col\":0,\"colspan\":5,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":42,\"absolute_position\":false,\"frameOverflow\":\"\",\"borderRadius\":{\"topLeft\":100,\"topRight\":100,\"bottomLeft\":0,\"bottomRight\":0,\"topLeftMu\":\"px\",\"topRightMu\":\"px\",\"bottomLeftMu\":\"px\",\"bottomRightMu\":\"px\",\"cornerShape\":\"round\"}},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"top\",\"row\":12,\"col\":7,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":2,\"relid\":18,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":13,\"col\":8,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":8,\"relid\":70,\"absolute_position\":false},{\"type\":\"html\",\"cont\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n  <title>Point 1: Video Capture & 3D Landmark Tracking<\/title>\\n  <link href=\\\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;500&display=swap\\\" rel=\\\"stylesheet\\\">\\n  <style>\\n    .marii-section-1 {\\n      font-family: 'Inter', system-ui, sans-serif;\\n      color: #f0f4fc;\\n      max-width: 850px;\\n      margin: 0 auto;\\n      box-sizing: border-box;\\n    }\\n\\n    .marii-section-1 * {\\n      box-sizing: border-box;\\n    }\\n\\n    .marii-section-1 .marii-card {\\n      background: rgba(18, 26, 43, 0.95);\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n      border-radius: 20px;\\n      padding: 1.5rem;\\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);\\n    }\\n\\n    .marii-section-1 .marii-canvas-wrapper {\\n      position: relative;\\n      background: #050811;\\n      border-radius: 14px;\\n      overflow: hidden;\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n    }\\n\\n    .marii-section-1 canvas {\\n      width: 100%;\\n      display: block;\\n    }\\n\\n    .marii-section-1 .marii-overlay {\\n      position: absolute;\\n      top: 12px;\\n      left: 12px;\\n      background: rgba(0, 0, 0, 0.75);\\n      padding: 8px 14px;\\n      border-radius: 8px;\\n      font-family: 'JetBrains Mono', monospace;\\n      font-size: 0.85rem;\\n      color: #00f0ff;\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n      display: flex;\\n      gap: 15px;\\n    }\\n\\n    .marii-section-1 .marii-metrics-grid {\\n      display: grid;\\n      grid-template-columns: repeat(3, 1fr);\\n      gap: 1rem;\\n      margin-top: 1.2rem;\\n    }\\n\\n    @media (max-width: 600px) {\\n      .marii-section-1 .marii-metrics-grid {\\n        grid-template-columns: 1fr;\\n      }\\n    }\\n\\n    .marii-section-1 .marii-metric-box {\\n      background: rgba(255, 255, 255, 0.03);\\n      padding: 0.85rem;\\n      border-radius: 10px;\\n      border-left: 3px solid #00f0ff;\\n    }\\n\\n    .marii-section-1 .marii-metric-box h4 {\\n      font-size: 0.75rem;\\n      color: #00f0ff;\\n      text-transform: uppercase;\\n      margin: 0 0 0.3rem 0;\\n    }\\n\\n    .marii-section-1 .marii-metric-box p {\\n      font-size: 0.95rem;\\n      font-weight: 600;\\n      margin: 0;\\n    }\\n  <\/style>\\n<\/head>\\n<body>\\n\\n  <!-- SCOPED CONTAINER WITHOUT TITLE -->\\n  <div class=\\\"marii-section-1\\\">\\n    <div class=\\\"marii-card\\\">\\n      <div class=\\\"marii-canvas-wrapper\\\">\\n        <div class=\\\"marii-overlay\\\">\\n          <span>FPS: <strong>30.0<\/strong><\/span>\\n          <span>Resolution: <strong>480\\u00d7300<\/strong><\/span>\\n          <span>Nodes: <strong>21 Joints<\/strong><\/span>\\n        <\/div>\\n        <canvas id=\\\"marii_canvas1\\\" width=\\\"480\\\" height=\\\"300\\\"><\/canvas>\\n      <\/div>\\n\\n      <div class=\\\"marii-metrics-grid\\\">\\n        <div class=\\\"marii-metric-box\\\">\\n          <h4>OpenCV Ingestion<\/h4>\\n          <p>30 FPS @ 480\\u00d7300 RGB<\/p>\\n        <\/div>\\n        <div class=\\\"marii-metric-box\\\">\\n          <h4>MediaPipe Inference<\/h4>\\n          <p>21 3D Landmarks (x,y,z)<\/p>\\n        <\/div>\\n        <div class=\\\"marii-metric-box\\\" style=\\\"border-color: #00ff88;\\\">\\n          <h4>Tracking Status<\/h4>\\n          <p style=\\\"color: #00ff88;\\\">Hand Skeleton Locked<\/p>\\n        <\/div>\\n      <\/div>\\n    <\/div>\\n  <\/div>\\n\\n  <script>\\n    (function() {\\n      const canvas = document.getElementById('marii_canvas1');\\n      if(!canvas) return;\\n      const ctx = canvas.getContext('2d');\\n      let t = 0;\\n\\n      const links = [[0,1],[1,2],[2,3],[3,4],[0,5],[5,6],[6,7],[7,8],[0,9],[9,10],[10,11],[11,12],[0,13],[13,14],[14,15],[15,16],[0,17],[17,18],[18,19],[19,20],[5,9],[9,13],[13,17]];\\n\\n      function getHandPoints(t) {\\n        const cx = 240 + Math.sin(t) * 20, cy = 160 + Math.cos(t) * 10;\\n        return [\\n          {x: cx, y: cy+60},\\n          {x: cx-30, y: cy+30}, {x: cx-45, y: cy+10}, {x: cx-55, y: cy-10}, {x: cx-65, y: cy-30},\\n          {x: cx-20, y: cy}, {x: cx-25, y: cy-40}, {x: cx-30, y: cy-75}, {x: cx-35, y: cy-110},\\n          {x: cx, y: cy}, {x: cx, y: cy-45}, {x: cx, y: cy-80}, {x: cx, y: cy-115},\\n          {x: cx+20, y: cy}, {x: cx+22, y: cy-40}, {x: cx+25, y: cy-75}, {x: cx+28, y: cy-105},\\n          {x: cx+40, y: cy+10}, {x: cx+42, y: cy-25}, {x: cx+45, y: cy-55}, {x: cx+48, y: cy-80}\\n        ];\\n      }\\n\\n      function animate() {\\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\\n        t += 0.04;\\n        const pts = getHandPoints(t);\\n\\n        ctx.lineWidth = 3;\\n        links.forEach(([i, j]) => {\\n          ctx.strokeStyle = '#00f0ff';\\n          ctx.beginPath();\\n          ctx.moveTo(pts[i].x, pts[i].y);\\n          ctx.lineTo(pts[j].x, pts[j].y);\\n          ctx.stroke();\\n        });\\n\\n        pts.forEach((p, idx) => {\\n          ctx.beginPath();\\n          ctx.arc(p.x, p.y, idx === 8 ? 7 : 4, 0, Math.PI * 2);\\n          ctx.fillStyle = idx === 8 ? '#00ff88' : '#00f0ff';\\n          ctx.fill();\\n          ctx.fillStyle = '#fff';\\n          ctx.font = '9px JetBrains Mono';\\n          ctx.fillText(idx, p.x + 6, p.y - 4);\\n        });\\n\\n        requestAnimationFrame(animate);\\n      }\\n      animate();\\n    })();\\n  <\/script>\\n<\/body>\\n<\/html>\",\"align\":\"top\",\"row\":14,\"col\":0,\"colspan\":7,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":45,\"config\":{\"label\":\"\"},\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p>MARII captures raw video from a standard webcam, downscaling frames to 480 \\u00d7 300 pixels to optimize memory bandwidth. Using MediaPipe's neural landmarker, the system extracts 21<br \/>three-dimensional joint coordinates (x,y,z) at 30 FPS. Vector dot-product angle calculations evaluate joint flexion in real time, locking onto the operator's hand skeleton with zero frame drops.<\/p>\",\"align\":\"middle\",\"row\":14,\"col\":8,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":29,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":15,\"col\":6,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":6,\"relid\":51,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p style=\\\"text-align: right;\\\">Gesture Vocabulary &amp; Actions<\/p>\",\"align\":\"top\",\"row\":16,\"col\":8,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":8,\"relid\":47,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":17,\"col\":6,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":6,\"relid\":72,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p>To eliminate cognitive fatigue, MARII relies on a compact, natural gesture vocabulary: Point (spatial selection), Grab (entity lock), Thumbs Up \/ Down (AI route confirmation), Wave (canvas reset), and Draw (route tracing). Each pose generates a 5-bit binary finger vector, pairing spatial intent directly with spoken voice commands.<\/p>\",\"align\":\"middle\",\"row\":18,\"col\":0,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":40,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"html\",\"cont\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n  <title>Point 3: Gesture Vocabulary & Actions<\/title>\\n  <link href=\\\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;500&display=swap\\\" rel=\\\"stylesheet\\\">\\n  <style>\\n    .marii-section-3 {\\n      font-family: 'Inter', system-ui, sans-serif;\\n      color: #f0f4fc;\\n      max-width: 900px;\\n      margin: 0 auto;\\n      box-sizing: border-box;\\n    }\\n\\n    .marii-section-3 * {\\n      box-sizing: border-box;\\n    }\\n\\n    .marii-section-3 .marii-card {\\n      background: rgba(18, 26, 43, 0.95);\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n      border-radius: 20px;\\n      padding: 1.5rem;\\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);\\n    }\\n\\n    .marii-section-3 .marii-gestures-grid {\\n      display: grid;\\n      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\\n      gap: 1rem;\\n      margin-bottom: 1.2rem;\\n    }\\n\\n    .marii-section-3 .marii-g-card {\\n      background: rgba(255, 255, 255, 0.03);\\n      border: 1px solid rgba(255, 255, 255, 0.1);\\n      border-radius: 12px;\\n      padding: 1rem;\\n      text-align: center;\\n      cursor: pointer;\\n      transition: all 0.25s ease;\\n    }\\n\\n    .marii-section-3 .marii-g-card:hover, \\n    .marii-section-3 .marii-g-card.active {\\n      background: rgba(0, 240, 255, 0.15);\\n      border-color: #00f0ff;\\n      transform: translateY(-3px);\\n      box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);\\n    }\\n\\n    .marii-section-3 .marii-g-icon {\\n      font-size: 2rem;\\n      margin-bottom: 0.3rem;\\n    }\\n\\n    .marii-section-3 .marii-g-name {\\n      font-weight: 700;\\n      font-size: 0.95rem;\\n    }\\n\\n    .marii-section-3 .marii-output-box {\\n      background: #050811;\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n      border-radius: 12px;\\n      padding: 1.2rem;\\n      display: flex;\\n      justify-content: space-between;\\n      align-items: center;\\n      flex-wrap: wrap;\\n      gap: 1rem;\\n    }\\n\\n    .marii-section-3 .marii-vector {\\n      font-family: 'JetBrains Mono', monospace;\\n      color: #00ff88;\\n      background: rgba(0, 255, 136, 0.1);\\n      padding: 6px 12px;\\n      border-radius: 6px;\\n      border: 1px solid rgba(0, 255, 136, 0.2);\\n    }\\n\\n    .marii-section-3 .marii-action {\\n      font-weight: 600;\\n      color: #00f0ff;\\n      font-size: 1rem;\\n    }\\n  <\/style>\\n<\/head>\\n<body>\\n\\n  <!-- SCOPED CONTAINER WITHOUT TITLE -->\\n  <div class=\\\"marii-section-3\\\">\\n    <div class=\\\"marii-card\\\">\\n      <div class=\\\"marii-gestures-grid\\\">\\n        <div class=\\\"marii-g-card active\\\" onclick=\\\"mariiSelectGesture(this, '[0, 1, 0, 0, 0]', '\\ud83d\\udc48 Target spatial cursor & select vessel')\\\">\\n          <div class=\\\"marii-g-icon\\\">\\ud83d\\udc48<\/div>\\n          <div class=\\\"marii-g-name\\\">Point<\/div>\\n        <\/div>\\n        <div class=\\\"marii-g-card\\\" onclick=\\\"mariiSelectGesture(this, '[0, 0, 0, 0, 0]', '\\u270a Lock entity selection \/ Grab ship')\\\">\\n          <div class=\\\"marii-g-icon\\\">\\u270a<\/div>\\n          <div class=\\\"marii-g-name\\\">Grab<\/div>\\n        <\/div>\\n        <div class=\\\"marii-g-card\\\" onclick=\\\"mariiSelectGesture(this, '[1, 0, 0, 0, 0]', '\\ud83d\\udc4d Approve AI-proposed route overlay')\\\">\\n          <div class=\\\"marii-g-icon\\\">\\ud83d\\udc4d<\/div>\\n          <div class=\\\"marii-g-name\\\">Thumbs Up<\/div>\\n        <\/div>\\n        <div class=\\\"marii-g-card\\\" onclick=\\\"mariiSelectGesture(this, '[1, 0, 0, 0, 0]', '\\ud83d\\udc4e Reject AI proposal \/ Recalculate')\\\">\\n          <div class=\\\"marii-g-icon\\\">\\ud83d\\udc4e<\/div>\\n          <div class=\\\"marii-g-name\\\">Thumbs Down<\/div>\\n        <\/div>\\n        <div class=\\\"marii-g-card\\\" onclick=\\\"mariiSelectGesture(this, '[1, 1, 1, 1, 1]', '\\ud83d\\udc4b Clear active selection & reset canvas')\\\">\\n          <div class=\\\"marii-g-icon\\\">\\ud83d\\udc4b<\/div>\\n          <div class=\\\"marii-g-name\\\">Wave<\/div>\\n        <\/div>\\n        <div class=\\\"marii-g-card\\\" onclick=\\\"mariiSelectGesture(this, '[0, 1, 0, 0, 0]', '\\u270d\\ufe0f Freehand route tracing mode')\\\">\\n          <div class=\\\"marii-g-icon\\\">\\u270d\\ufe0f<\/div>\\n          <div class=\\\"marii-g-name\\\">Draw<\/div>\\n        <\/div>\\n      <\/div>\\n\\n      <div class=\\\"marii-output-box\\\">\\n        <div>\\n          <div style=\\\"color: #8a9bb8; font-size: 0.8rem; margin-bottom: 4px;\\\">Finger State Vector [Thumb, Index, Middle, Ring, Pinky]:<\/div>\\n          <div class=\\\"marii-vector\\\" id=\\\"marii_vecDisplay\\\">[0, 1, 0, 0, 0]<\/div>\\n        <\/div>\\n        <div class=\\\"marii-action\\\" id=\\\"marii_actDisplay\\\">\\ud83d\\udc48 Target spatial cursor & select vessel<\/div>\\n      <\/div>\\n    <\/div>\\n  <\/div>\\n\\n  <script>\\n    function mariiSelectGesture(el, vec, act) {\\n      document.querySelectorAll('.marii-section-3 .marii-g-card').forEach(c => c.classList.remove('active'));\\n      el.classList.add('active');\\n      document.getElementById('marii_vecDisplay').innerText = vec;\\n      document.getElementById('marii_actDisplay').innerText = act;\\n    }\\n  <\/script>\\n<\/body>\\n<\/html>\\n\",\"align\":\"top\",\"row\":18,\"col\":5,\"colspan\":7,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":49,\"config\":{\"label\":\"\"},\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":19,\"col\":7,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":7,\"relid\":53,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p>Camera to Map Projection<\/p>\",\"align\":\"top\",\"row\":20,\"col\":0,\"colspan\":5,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":56,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":21,\"col\":6,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":6,\"relid\":74,\"absolute_position\":false},{\"type\":\"html\",\"cont\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n  <title>Point 4: Camera to Map Projection (3x3 Homography)<\/title>\\n  <link href=\\\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;500&display=swap\\\" rel=\\\"stylesheet\\\">\\n  <style>\\n    .marii-section-4 {\\n      font-family: 'Inter', system-ui, sans-serif;\\n      color: #f0f4fc;\\n      max-width: 900px;\\n      margin: 0 auto;\\n      box-sizing: border-box;\\n    }\\n\\n    .marii-section-4 * {\\n      box-sizing: border-box;\\n    }\\n\\n    .marii-section-4 .marii-card {\\n      background: rgba(18, 26, 43, 0.95);\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n      border-radius: 20px;\\n      padding: 1.5rem;\\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);\\n    }\\n\\n    .marii-section-4 .marii-grid {\\n      display: grid;\\n      grid-template-columns: 1fr 1fr;\\n      gap: 1.5rem;\\n    }\\n\\n    @media (max-width: 700px) {\\n      .marii-section-4 .marii-grid {\\n        grid-template-columns: 1fr;\\n      }\\n    }\\n\\n    .marii-section-4 .marii-box {\\n      background: #050811;\\n      border: 1px solid rgba(255, 255, 255, 0.1);\\n      border-radius: 14px;\\n      padding: 1rem;\\n    }\\n\\n    .marii-section-4 .marii-header {\\n      display: flex;\\n      justify-content: space-between;\\n      font-size: 0.82rem;\\n      font-weight: 600;\\n      color: #8a9bb8;\\n      margin-bottom: 0.8rem;\\n    }\\n\\n    .marii-section-4 .marii-pad {\\n      width: 100%;\\n      height: 230px;\\n      background: #080c16;\\n      border: 2px dashed rgba(0, 240, 255, 0.4);\\n      border-radius: 10px;\\n      position: relative;\\n      cursor: crosshair;\\n      overflow: hidden;\\n    }\\n\\n    .marii-section-4 .marii-cursor {\\n      width: 22px;\\n      height: 22px;\\n      background: rgba(0, 240, 255, 0.4);\\n      border: 2px solid #00f0ff;\\n      border-radius: 50%;\\n      position: absolute;\\n      transform: translate(-50%, -50%);\\n      pointer-events: none;\\n      box-shadow: 0 0 12px #00f0ff;\\n    }\\n\\n    .marii-section-4 .marii-cursor::after {\\n      content: '\\ud83d\\udc48';\\n      position: absolute;\\n      top: -22px;\\n      left: 8px;\\n      font-size: 1.1rem;\\n    }\\n\\n    .marii-section-4 .marii-map {\\n      width: 100%;\\n      height: 230px;\\n      background: linear-gradient(rgba(10, 20, 35, 0.7), rgba(10, 20, 35, 0.9)), #07111e;\\n      border: 1px solid rgba(58, 134, 255, 0.4);\\n      border-radius: 10px;\\n      position: relative;\\n      overflow: hidden;\\n    }\\n\\n    .marii-section-4 .marii-ship {\\n      position: absolute;\\n      font-size: 1.5rem;\\n      transform: translate(-50%, -50%);\\n      filter: drop-shadow(0 0 8px #00f0ff);\\n    }\\n\\n    .marii-section-4 .marii-island {\\n      position: absolute;\\n      background: rgba(30, 50, 75, 0.8);\\n      border: 1px solid rgba(0, 240, 255, 0.3);\\n      border-radius: 40%;\\n    }\\n\\n    .marii-section-4 .marii-stats {\\n      margin-top: 1rem;\\n      background: rgba(10, 15, 26, 0.9);\\n      padding: 0.8rem 1rem;\\n      border-radius: 10px;\\n      font-family: 'JetBrains Mono', monospace;\\n      font-size: 0.82rem;\\n      color: #00f0ff;\\n      border: 1px solid rgba(0, 240, 255, 0.2);\\n      display: flex;\\n      justify-content: space-between;\\n    }\\n  <\/style>\\n<\/head>\\n<body>\\n\\n  <!-- SCOPED CONTAINER WITHOUT TITLE -->\\n  <div class=\\\"marii-section-4\\\">\\n    <div class=\\\"marii-card\\\">\\n      <div class=\\\"marii-grid\\\">\\n        <div class=\\\"marii-box\\\">\\n          <div class=\\\"marii-header\\\">\\n            <span>CAMERA FRAME (480\\u00d7300 px)<\/span>\\n            <span id=\\\"marii_camCoords\\\">x: 240px | y: 150px<\/span>\\n          <\/div>\\n          <div class=\\\"marii-pad\\\" id=\\\"marii_camPad\\\">\\n            <div class=\\\"marii-cursor\\\" id=\\\"marii_handCursor\\\" style=\\\"left: 50%; top: 50%;\\\"><\/div>\\n          <\/div>\\n        <\/div>\\n\\n        <div class=\\\"marii-box\\\">\\n          <div class=\\\"marii-header\\\">\\n            <span>LEAFLET.JS MAP DISPLAY<\/span>\\n            <span id=\\\"marii_geoCoords\\\" style=\\\"color: #00ff88;\\\">54.3200\\u00b0 N, 10.1500\\u00b0 E<\/span>\\n          <\/div>\\n          <div class=\\\"marii-map\\\">\\n            <div class=\\\"marii-island\\\" style=\\\"top: 20px; left: 30px; width: 70px; height: 50px;\\\"><\/div>\\n            <div class=\\\"marii-island\\\" style=\\\"bottom: 20px; right: 30px; width: 90px; height: 70px;\\\"><\/div>\\n            <div class=\\\"marii-ship\\\" id=\\\"marii_shipIcon\\\" style=\\\"left: 50%; top: 50%;\\\">\\ud83d\\udea2<\/div>\\n          <\/div>\\n        <\/div>\\n      <\/div>\\n\\n      <div class=\\\"marii-stats\\\">\\n        <span>Planar Homography Matrix H Transformation<\/span>\\n        <span>Projection Latency: <strong>0.38 ms<\/strong><\/span>\\n      <\/div>\\n    <\/div>\\n  <\/div>\\n\\n  <script>\\n    (function() {\\n      const pad = document.getElementById('marii_camPad');\\n      const hand = document.getElementById('marii_handCursor');\\n      const ship = document.getElementById('marii_shipIcon');\\n      const camCoords = document.getElementById('marii_camCoords');\\n      const geoCoords = document.getElementById('marii_geoCoords');\\n      if(!pad) return;\\n      let active = false;\\n\\n      function move(e) {\\n        const rect = pad.getBoundingClientRect();\\n        let x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));\\n        let y = Math.max(0, Math.min(rect.height, e.clientY - rect.top));\\n\\n        const px = (x \/ rect.width) * 100;\\n        const py = (y \/ rect.height) * 100;\\n\\n        hand.style.left = px + '%';\\n        hand.style.top = py + '%';\\n        ship.style.left = px + '%';\\n        ship.style.top = py + '%';\\n\\n        const cx = Math.round((x \/ rect.width) * 480);\\n        const cy = Math.round((y \/ rect.height) * 300);\\n        camCoords.innerText = `x: ${cx}px | y: ${cy}px`;\\n\\n        const lat = (54.4000 - (py \/ 100) * 0.1600).toFixed(4);\\n        const lon = (10.0500 + (px \/ 100) * 0.2000).toFixed(4);\\n        geoCoords.innerText = `${lat}\\u00b0 N, ${lon}\\u00b0 E`;\\n      }\\n\\n      pad.addEventListener('mousedown', (e) => { active = true; move(e); });\\n      window.addEventListener('mousemove', (e) => { if (active) move(e); });\\n      window.addEventListener('mouseup', () => { active = false; });\\n    })();\\n  <\/script>\\n<\/body>\\n<\/html>\",\"align\":\"middle\",\"row\":22,\"col\":0,\"colspan\":7,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":58,\"config\":{\"label\":\"\"},\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p>Operating on planar projective geometry, MARII applies a calibrated 3 \\u00d7 3 Planar Homography Matrix (H) to translate raw camera pixel coordinates directly onto geographic latitude and longitude (lat,lon) on the Leaflet.js map display. With an execution latency under 0.4 ms, operators experience fluid, lag-free cursor <br \/>pointing across maritime operational charts.<\/p>\",\"align\":\"middle\",\"row\":22,\"col\":8,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":41,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p><p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":23,\"col\":0,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":27,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p class=\\\"_Teaser\\\" style=\\\"text-align: center;\\\">Internal Architecture<\/p>\",\"align\":\"top\",\"row\":24,\"col\":3,\"colspan\":6,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":3,\"relid\":33,\"absolute_position\":false,\"bgColor\":{\"enableBgColor\":false,\"bgColor\":\"#ffffff\",\"bgOpacity\":100}},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":25,\"col\":5,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":5,\"relid\":37,\"absolute_position\":false},{\"type\":\"html\",\"cont\":\"<div style=\\\"position:relative; width:100%; max-width:680px; height:420px; margin:0 auto; background:#0a1140; font-family:'Courier New', monospace; border-radius:8px;\\\">\\r\\n  <svg viewBox=\\\"0 0 680 420\\\" width=\\\"100%\\\" height=\\\"100%\\\" style=\\\"position:absolute; top:0; left:0; display:block;\\\">\\r\\n    <defs>\\r\\n      <marker id=\\\"arrow2\\\" viewBox=\\\"0 0 10 10\\\" refX=\\\"8\\\" refY=\\\"5\\\" markerWidth=\\\"6\\\" markerHeight=\\\"6\\\" orient=\\\"auto-start-reverse\\\">\\r\\n        <path d=\\\"M2 1L8 5L2 9\\\" fill=\\\"none\\\" stroke=\\\"#8a86c8\\\" stroke-width=\\\"1.5\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"\/>\\r\\n      <\/marker>\\r\\n    <\/defs>\\r\\n    <path d=\\\"M195,96 L195,140 L245,170\\\" fill=\\\"none\\\" stroke=\\\"#8a86c8\\\" stroke-width=\\\"1\\\" marker-end=\\\"url(#arrow2)\\\"\/>\\r\\n    <path d=\\\"M495,96 L495,140 L435,170\\\" fill=\\\"none\\\" stroke=\\\"#8a86c8\\\" stroke-width=\\\"1\\\" marker-end=\\\"url(#arrow2)\\\"\/>\\r\\n    <path d=\\\"M245,242 L245,280 L195,320\\\" fill=\\\"none\\\" stroke=\\\"#8a86c8\\\" stroke-width=\\\"1\\\" marker-end=\\\"url(#arrow2)\\\"\/>\\r\\n    <path d=\\\"M435,242 L435,280 L495,320\\\" fill=\\\"none\\\" stroke=\\\"#8a86c8\\\" stroke-width=\\\"1\\\" marker-end=\\\"url(#arrow2)\\\"\/>\\r\\n    <path d=\\\"M90,330 L50,330 L50,200 L190,200\\\" fill=\\\"none\\\" stroke=\\\"#6a66a0\\\" stroke-width=\\\"1\\\" stroke-dasharray=\\\"4 4\\\" marker-end=\\\"url(#arrow2)\\\"\/>\\r\\n    <text x=\\\"60\\\" y=\\\"264\\\" fill=\\\"#8a86c8\\\" font-size=\\\"12\\\" font-family=\\\"'Courier New', monospace\\\">TELEMETRY<\/text>\\r\\n  <\/svg>\\r\\n\\r\\n  <div class=\\\"arch-box\\\" style=\\\"left:90px; top:40px; width:210px; height:56px;\\\">\\r\\n    <div class=\\\"arch-title\\\">GESTURE & POINTING<\/div>\\r\\n    <div class=\\\"arch-sub\\\">Camera tracking<\/div>\\r\\n  <\/div>\\r\\n\\r\\n  <div class=\\\"arch-box\\\" style=\\\"left:390px; top:40px; width:210px; height:56px;\\\">\\r\\n    <div class=\\\"arch-title\\\">VOICE COMMANDS<\/div>\\r\\n    <div class=\\\"arch-sub\\\">Whisper speech-to-text<\/div>\\r\\n  <\/div>\\r\\n\\r\\n  <div class=\\\"arch-box arch-core\\\" style=\\\"left:190px; top:170px; width:300px; height:72px;\\\">\\r\\n    <div class=\\\"arch-title\\\">CENTRAL ORCHESTRATOR<\/div>\\r\\n    <div class=\\\"arch-sub\\\">Async Python + LLM reasoning<\/div>\\r\\n  <\/div>\\r\\n\\r\\n  <div class=\\\"arch-box\\\" style=\\\"left:90px; top:320px; width:210px; height:56px;\\\">\\r\\n    <div class=\\\"arch-title\\\">VESSEL SWARM<\/div>\\r\\n    <div class=\\\"arch-sub\\\">Trajectories & telemetry<\/div>\\r\\n  <\/div>\\r\\n\\r\\n  <div class=\\\"arch-box\\\" style=\\\"left:390px; top:320px; width:210px; height:56px;\\\">\\r\\n    <div class=\\\"arch-title\\\">WEB SERVER<\/div>\\r\\n    <div class=\\\"arch-sub\\\">Visual explainability<\/div>\\r\\n  <\/div>\\r\\n<\/div>\\r\\n\\r\\n<style>\\r\\n.arch-box {\\r\\n  position: absolute;\\r\\n  background: #121a4f;\\r\\n  border: 1px solid #4a4590;\\r\\n  border-radius: 6px;\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  align-items: center;\\r\\n  justify-content: center;\\r\\n  transition: transform 0.2s ease, border-color 0.2s ease;\\r\\n  cursor: pointer;\\r\\n}\\r\\n.arch-box:hover {\\r\\n  transform: scale(1.06);\\r\\n  border-color: #00d9ff;\\r\\n}\\r\\n.arch-core {\\r\\n  background: #1c1560;\\r\\n  border-color: #6b5ecf;\\r\\n}\\r\\n.arch-core:hover {\\r\\n  border-color: #00d9ff;\\r\\n}\\r\\n.arch-title {\\r\\n  color: #d6d3f0;\\r\\n  font-size: 13px;\\r\\n  font-weight: bold;\\r\\n  letter-spacing: 0.5px;\\r\\n  text-align: center;\\r\\n}\\r\\n.arch-sub {\\r\\n  color: #9d9ac0;\\r\\n  font-size: 11px;\\r\\n  margin-top: 4px;\\r\\n  text-align: center;\\r\\n  padding: 0 8px;\\r\\n}\\r\\n<\/style>\",\"align\":\"top\",\"row\":26,\"col\":3,\"colspan\":6,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":3,\"relid\":39,\"config\":{\"label\":\"\"},\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p><p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":27,\"col\":1,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":35,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p class=\\\"_Teaser\\\" style=\\\"text-align: left;\\\">Summary<\/p>\",\"align\":\"top\",\"row\":28,\"col\":0,\"colspan\":6,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":61,\"absolute_position\":false,\"bgColor\":{\"enableBgColor\":false,\"bgColor\":\"#ffffff\",\"bgOpacity\":100}},{\"type\":\"text\",\"cont\":\"<p>MARII (Maritime Intelligent Interface) transforms human-AI communication by replacing text prompting with real-time 3D hand gesture tracking and natural voice commands. By eliminating coordinate typing and back-and-forth prompt iterations (ping-pong prompting), MARII empowers operators to command complex maritime fleets through intuitive pointing and speaking\\u2014delivering sub-second, zero-typing execution.<\/p>\",\"align\":\"middle\",\"row\":29,\"col\":0,\"colspan\":12,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":64,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p><p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":30,\"col\":6,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":6,\"relid\":66,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p class=\\\"_Teaser\\\" style=\\\"text-align: center;\\\">OUR TEAM<\/p>\",\"align\":\"middle\",\"row\":31,\"col\":3,\"colspan\":6,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":3,\"relid\":24,\"absolute_position\":false,\"frameOverflow\":\"\",\"bgColor\":{\"enableBgColor\":false,\"bgColor\":\"#ffffff\",\"bgOpacity\":100}},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #fbb2c1;\\\">.<\/span><\/p>\",\"align\":\"middle\",\"row\":32,\"col\":6,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":6,\"relid\":75,\"absolute_position\":false},{\"type\":\"text\",\"cont\":\"<p><strong>Tomas Herrero Valero<\/strong><\/p><p>Universitat Polit\\u00e8cnica de Val\\u00e8ncia<\/p><p>tomas.herrero.valero@tha.de<\/p>\",\"align\":\"top\",\"row\":33,\"col\":0,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":31,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><strong>Felix Baeuml<\/strong><\/p><p>Technische Hochschule Augsburg<\/p><p>felix.baeuml@tha.de<\/p>\",\"align\":\"top\",\"row\":33,\"col\":4,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":20,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><strong>Piotr Grzelak<\/strong><\/p><p>Politechnika Lodzka<\/p><p>piotr.grzelak@tha.de<\/p>\",\"align\":\"top\",\"row\":33,\"col\":8,\"colspan\":4,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":22,\"absolute_position\":false,\"frameOverflow\":\"\"},{\"type\":\"text\",\"cont\":\"<p><span style=\\\"color: #f296d2;\\\">.<\/span><\/p>\",\"align\":\"top\",\"row\":34,\"col\":2,\"colspan\":2,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":2,\"relid\":77,\"absolute_position\":false},{\"type\":\"img\",\"cont\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image-2.png\",\"align\":\"top\",\"row\":35,\"col\":0,\"colspan\":3,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":0,\"relid\":78,\"attid\":609,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image-2.png\",\"_512\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image-2-512x612.png\",\"_265\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image-2-265x317.png\"},\"w\":568,\"h\":679,\"ar\":1.1954225352112675,\"alt\":\"\",\"absolute_position\":false,\"textOnElement\":{\"topLeft\":\"\",\"topCenter\":\"\",\"topRight\":\"\",\"leftCenter\":\"\",\"centerCenter\":\"\",\"rightCenter\":\"\",\"bottomLeft\":\"\",\"bottomCenter\":\"\",\"bottomRight\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"enableSpacePhone\":false,\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\",\"darkGradientAtTop\":false,\"darkGradientAtBottom\":false,\"darkGradientAtTopColor\":\"#000000\",\"darkGradientAtBottomColor\":\"#000000\"},\"frameOverflow\":\"\"},{\"type\":\"img\",\"cont\":\"\/wp-content\/uploads\/2026\/07\/felix.jpg\",\"align\":\"top\",\"row\":35,\"col\":4,\"colspan\":3,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":80,\"attid\":618,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2026\/07\/felix.jpg\",\"_768\":\"\/wp-content\/uploads\/2026\/07\/felix-768x904.jpg\",\"_512\":\"\/wp-content\/uploads\/2026\/07\/felix-512x603.jpg\",\"_265\":\"\/wp-content\/uploads\/2026\/07\/felix-265x312.jpg\"},\"w\":947,\"h\":1115,\"ar\":1.1774023231256601,\"alt\":\"\",\"absolute_position\":false,\"frameOverflow\":\"\",\"textOnElement\":{\"topLeft\":\"\",\"topCenter\":\"\",\"topRight\":\"\",\"leftCenter\":\"\",\"centerCenter\":\"\",\"rightCenter\":\"\",\"bottomLeft\":\"\",\"bottomCenter\":\"\",\"bottomRight\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"enableSpacePhone\":false,\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\",\"darkGradientAtTop\":false,\"darkGradientAtBottom\":false,\"darkGradientAtTopColor\":\"#000000\",\"darkGradientAtBottomColor\":\"#000000\"}},{\"type\":\"img\",\"cont\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image.png\",\"align\":\"top\",\"row\":35,\"col\":8,\"colspan\":3,\"offsetx\":0,\"offsety\":0,\"spaceabove\":0,\"spacebelow\":0,\"yvel\":1,\"push\":1,\"relid\":76,\"attid\":608,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image.png\",\"_512\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image-512x610.png\",\"_265\":\"\/wp-content\/uploads\/2026\/07\/Pasted-image-265x316.png\"},\"w\":530,\"h\":631,\"ar\":1.1905660377358491,\"alt\":\"\",\"absolute_position\":false,\"textOnElement\":{\"topLeft\":\"\",\"topCenter\":\"\",\"topRight\":\"\",\"leftCenter\":\"\",\"centerCenter\":\"\",\"rightCenter\":\"\",\"bottomLeft\":\"\",\"bottomCenter\":\"\",\"bottomRight\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"enableSpacePhone\":false,\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\",\"darkGradientAtTop\":false,\"darkGradientAtBottom\":false,\"darkGradientAtTopColor\":\"#000000\",\"darkGradientAtBottomColor\":\"#000000\"}}]}","phonegrid":"","_links":{"self":[{"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/posts\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":0,"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/media\/607"}],"wp:attachment":[{"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sichtraum.tha.de\/2026\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}