Add AI face capability demos

ai-capabilities/demo-ai-face-detector/src/App.vue

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { CoreAPI } from '@cutos/core'
+import { FaceDetector, type FaceDetectionResult, type FaceDetectorDiagnostics } from '@cutos/ai-face-detector'
+import CutosTopbar from '@/components/CutosTopbar.vue'
+import { loadConfig } from '@/utils/config'
+
+interface ActivityItem { id: number; time: string; message: string }
+
+const video = ref<HTMLVideoElement | null>(null)
+const title = ref('CUTOS AI Face Detector')
+const host = ref('localhost')
+const lwaName = ref('')
+const lwaVersion = ref('')
+const coreVersion = ref('')
+const runtimeConnected = ref(false)
+const detectorReady = ref(false)
+const cameraActive = ref(false)
+const busy = ref('')
+const errorText = ref('')
+const diagnostics = ref<FaceDetectorDiagnostics | null>(null)
+const result = ref<FaceDetectionResult | null>(null)
+const detectedFace = ref('')
+const activity = ref<ActivityItem[]>([])
+const portraitLayout = ref(false)
+const detectionLocked = ref(false)
+const stabilityProgress = ref(0)
+const restartCountdown = ref(10)
+
+let detector: FaceDetector | null = null
+let stream: MediaStream | null = null
+let animationFrame = 0
+let inferenceRunning = false
+let lastResultTimestamp = 0
+let lastQualityState = ''
+let stableSince = 0
+let stableBox: FaceDetectionResult['primary'] = null
+let restartTimer = 0
+
+const STABILITY_DURATION_MS = 2000
+
+const guideCircle = computed(() => {
+  const frame = result.value?.frame
+  if (!frame) return null
+  const guideAspectRatio = portraitLayout.value ? 1 : frame.width / frame.height
+  const sourceAspectRatio = frame.width / frame.height
+  const visibleWidth = sourceAspectRatio > guideAspectRatio ? frame.height * guideAspectRatio : frame.width
+  const visibleHeight = sourceAspectRatio > guideAspectRatio ? frame.height : frame.width / guideAspectRatio
+  return {
+    viewBox: `0 0 ${frame.width} ${frame.height}`,
+    cx: frame.width / 2,
+    cy: frame.height / 2,
+    radius: Math.min(visibleWidth, visibleHeight) * 0.38
+  }
+})
+const qualityMessage = computed(() => {
+  const current = result.value
+  if (!current?.primary) return 'No face detected'
+  if (detectionLocked.value) return `Face locked · restart in ${restartCountdown.value}s`
+  if (current.quality.accepted) return `Hold still · ${Math.round(stabilityProgress.value * 100)}%`
+  return current.quality.reasons.map(reason => ({
+    'multiple-faces': 'Keep only one face in view',
+    'low-confidence': 'Improve lighting and face the camera',
+    'face-too-small': 'Move closer to the camera',
+    'face-off-center': 'Move your face towards the centre',
+    'no-face': 'No face detected'
+  })[reason]).join(' · ')
+})
+const resultSummary = computed(() => result.value ? {
+  timestamp: new Date(result.value.timestamp).toLocaleTimeString(),
+  frame: result.value.frame,
+  faceCount: result.value.faceCount,
+  score: result.value.primary?.score,
+  box: result.value.primary?.box,
+  quality: result.value.quality
+} : null)
+
+function format(value: unknown) {
+  return value == null ? 'No data' : JSON.stringify(value, null, 2)
+}
+function log(message: string) {
+  activity.value.unshift({ id: Date.now() + Math.random(), time: new Date().toLocaleTimeString(), message })
+  activity.value = activity.value.slice(0, 20)
+}
+async function run(name: string, action: () => Promise<void>) {
+  busy.value = name
+  errorText.value = ''
+  try { await action() } catch (error) {
+    errorText.value = error instanceof Error ? error.message : String(error)
+    log(errorText.value)
+  } finally { busy.value = '' }
+}
+async function initializeDetector() {
+  if (detector) return
+  await run('initialize', async () => {
+    detector = await FaceDetector.create({
+      assetBaseUrl: new URL('cutos-ai-face-detector', window.location.href).toString(),
+      preferredDelegate: 'gpu',
+      allowCpuFallback: true,
+      minIntervalMs: 200,
+      minDetectionConfidence: 0.9,
+      minFaceSizeRatio: 0.12,
+      maxCenterOffsetRatio: 0.38,
+      maxHorizontalCenterOffsetRatio: 0.16,
+      guideAspectRatio: portraitLayout.value ? 1 : 0
+    })
+    diagnostics.value = detector.getDiagnostics()
+    detectorReady.value = true
+    log(`Detector initialized with ${diagnostics.value.delegate}`)
+  })
+}
+async function initializeRuntime() {
+  try {
+    await CoreAPI.init(host.value)
+    runtimeConnected.value = CoreAPI.connected()
+    coreVersion.value = CoreAPI.getVersion()
+  } catch (error) {
+    log(`CUTOS Runtime unavailable: ${error instanceof Error ? error.message : String(error)}`)
+  }
+}
+async function startCamera() {
+  if (cameraActive.value) return
+  await run('camera', async () => {
+    await initializeDetector()
+    stream = await navigator.mediaDevices.getUserMedia({
+      video: portraitLayout.value
+        ? { width: { ideal: 720 }, height: { ideal: 720 }, aspectRatio: { ideal: 1 }, facingMode: 'user' }
+        : { width: { ideal: 1280 }, height: { ideal: 720 }, aspectRatio: { ideal: 16 / 9 }, facingMode: 'user' },
+      audio: false
+    })
+    detectionLocked.value = false
+    resetStability()
+    cameraActive.value = true
+    await nextTick()
+    if (!video.value) throw new Error('Video element is unavailable')
+    video.value.srcObject = stream
+    await video.value.play()
+    log(`Camera started at ${video.value.videoWidth}×${video.value.videoHeight}`)
+    scheduleDetection()
+  })
+}
+function stopCamera() {
+  clearRestartCountdown()
+  cancelAnimationFrame(animationFrame)
+  animationFrame = 0
+  stream?.getTracks().forEach(track => track.stop())
+  stream = null
+  if (video.value) video.value.srcObject = null
+  cameraActive.value = false
+  detectionLocked.value = false
+  resetStability()
+  result.value = null
+  log('Camera stopped')
+}
+function scheduleDetection() {
+  if (detectionLocked.value) return
+  cancelAnimationFrame(animationFrame)
+  animationFrame = requestAnimationFrame(detectionLoop)
+}
+async function detectionLoop() {
+  if (!cameraActive.value || !video.value || !detector || detectionLocked.value) return
+  if (!inferenceRunning) {
+    inferenceRunning = true
+    try {
+      const next = await detector.detect(video.value)
+      result.value = next
+      if (next.timestamp !== lastResultTimestamp) {
+        lastResultTimestamp = next.timestamp
+        if (next.primary && next.primary.score >= 0.9) detectedFace.value = next.primary.image
+        const state = next.quality.accepted ? 'accepted' : next.quality.reasons.join(',')
+        if (state !== lastQualityState) { log(`Detection: ${state || 'waiting'}`); lastQualityState = state }
+        updateStability(next)
+      }
+    } catch (error) {
+      errorText.value = error instanceof Error ? error.message : String(error)
+    } finally {
+      inferenceRunning = false
+    }
+  }
+  if (!detectionLocked.value) scheduleDetection()
+}
+function resetStability() {
+  stableSince = 0
+  stableBox = null
+  stabilityProgress.value = 0
+}
+function updateStability(next: FaceDetectionResult) {
+  const face = next.primary
+  if (!next.quality.accepted || !face) {
+    resetStability()
+    return
+  }
+
+  const previous = stableBox?.box
+  const current = face.box
+  const stable = previous &&
+    Math.hypot(
+      current.normalized.x + current.normalized.width / 2 - previous.normalized.x - previous.normalized.width / 2,
+      current.normalized.y + current.normalized.height / 2 - previous.normalized.y - previous.normalized.height / 2
+    ) <= 0.035 &&
+    Math.abs(current.normalized.width - previous.normalized.width) <= 0.04 &&
+    Math.abs(current.normalized.height - previous.normalized.height) <= 0.04
+
+  if (!stable) {
+    stableSince = performance.now()
+    stableBox = face
+    stabilityProgress.value = 0
+    return
+  }
+
+  const elapsed = performance.now() - stableSince
+  stabilityProgress.value = Math.min(1, elapsed / STABILITY_DURATION_MS)
+  if (elapsed >= STABILITY_DURATION_MS) {
+    detectedFace.value = face.image
+    detectionLocked.value = true
+    stabilityProgress.value = 1
+    log('Stable face locked after 2 seconds')
+    startRestartCountdown()
+  }
+}
+function clearRestartCountdown() {
+  if (restartTimer) window.clearInterval(restartTimer)
+  restartTimer = 0
+  restartCountdown.value = 10
+}
+function startRestartCountdown() {
+  clearRestartCountdown()
+  restartTimer = window.setInterval(() => {
+    restartCountdown.value -= 1
+    if (restartCountdown.value <= 0) detectAgain()
+  }, 1000)
+}
+function detectAgain() {
+  if (!cameraActive.value || !detector) return
+  clearRestartCountdown()
+  detectionLocked.value = false
+  detectedFace.value = ''
+  result.value = null
+  resetStability()
+  lastQualityState = ''
+  log('Detection restarted')
+  scheduleDetection()
+}
+function disposeDetector() {
+  stopCamera()
+  detector?.dispose()
+  detector = null
+  detectorReady.value = false
+  diagnostics.value = null
+  log('Detector disposed')
+}
+
+onMounted(async () => {
+  portraitLayout.value = window.matchMedia('(orientation: portrait)').matches
+  const config = await loadConfig()
+  title.value = String(config.params.title || title.value)
+  host.value = import.meta.env.VITE_CUTOS_BROKER_URL || String(config.params.host || 'localhost')
+  lwaName.value = config.name
+  lwaVersion.value = config.version
+  void initializeRuntime()
+  await startCamera()
+})
+onUnmounted(() => {
+  clearRestartCountdown()
+  cancelAnimationFrame(animationFrame)
+  stream?.getTracks().forEach(track => track.stop())
+  detector?.dispose()
+})
+</script>
+
+<template>
+  <div class="app-shell">
+    <CutosTopbar :title="title" subtitle="Browser AI · CUTOS 4.0" :core-version="coreVersion" :lwa-name="lwaName" :lwa-version="lwaVersion" :connected="runtimeConnected" />
+    <main>
+      <section v-if="errorText" class="error-banner"><strong>Operation failed</strong><span>{{ errorText }}</span></section>
+      <section class="section-heading">
+        <div><span class="eyebrow">{{ host }}</span><h2>Local face detection</h2></div>
+        <span class="dependency-tag">SDK: <strong>@cutos/ai-face-detector 4.0.0</strong></span>
+      </section>
+
+      <section class="result-grid">
+        <article class="result-card camera-card">
+          <div class="result-header method-header"><div><h3>Camera preview</h3><code>FaceDetector.detect(video)</code></div><span class="state-tag" :class="{ online: result?.quality.accepted }">{{ qualityMessage }}</span></div>
+          <div class="camera-stage" :class="{ empty: !cameraActive, portrait: portraitLayout }">
+            <video ref="video" autoplay muted playsinline></video>
+            <svg v-if="guideCircle" class="face-guide" :viewBox="guideCircle.viewBox" :preserveAspectRatio="portraitLayout ? 'xMidYMid slice' : 'none'" aria-hidden="true">
+              <defs>
+                <mask id="face-guide-mask">
+                  <rect width="100%" height="100%" fill="white" />
+                  <circle :cx="guideCircle.cx" :cy="guideCircle.cy" :r="guideCircle.radius" fill="black" />
+                </mask>
+              </defs>
+              <rect width="100%" height="100%" class="guide-shade" mask="url(#face-guide-mask)" />
+              <circle :cx="guideCircle.cx" :cy="guideCircle.cy" :r="guideCircle.radius" class="guide-ring" :class="{ accepted: result?.quality.accepted }" />
+              <g v-if="result?.primary" class="face-marker" :class="{ accepted: result.quality.accepted }">
+                <rect :x="result.primary.box.x" :y="result.primary.box.y" :width="result.primary.box.width" :height="result.primary.box.height" />
+                <rect class="confidence-bg" :x="result.primary.box.x" :y="Math.max(0, result.primary.box.y - 34)" width="76" height="30" rx="4" />
+                <text class="confidence-text" :x="result.primary.box.x + 8" :y="Math.max(22, result.primary.box.y - 12)">{{ Math.round(result.primary.score * 100) }}%</text>
+              </g>
+            </svg>
+            <div class="video-status">
+              <section class="video-panel detector-panel">
+                <header><strong>Detector</strong><b :class="{ pass: detectorReady }">{{ detectorReady ? 'READY' : 'OFF' }}</b></header>
+                <dl>
+                  <div><dt>Initialized</dt><dd>{{ diagnostics?.initialized ? 'true' : 'false' }}</dd></div>
+                  <div><dt>Delegate</dt><dd>{{ diagnostics?.delegate || '—' }}</dd></div>
+                  <div><dt>Interval</dt><dd>{{ diagnostics?.minIntervalMs || 0 }} ms</dd></div>
+                </dl>
+              </section>
+              <section class="video-panel gate-panel">
+                <header><strong>Quality gate</strong><b :class="{ pass: detectionLocked }">{{ detectionLocked ? 'LOCKED' : result?.quality.accepted ? 'STABILIZING' : 'WAIT' }}</b></header>
+                <dl>
+                  <div><dt>Single face</dt><dd :class="{ pass: result?.quality.singleFace }">{{ result?.quality.singleFace ? 'PASS' : 'WAIT' }}</dd></div>
+                  <div><dt>Confidence ≥ 0.90</dt><dd :class="{ pass: result?.quality.confident }">{{ result?.quality.confident ? 'PASS' : 'WAIT' }}</dd></div>
+                  <div><dt>Face size ≥ 12%</dt><dd :class="{ pass: result?.quality.largeEnough }">{{ result?.quality.largeEnough ? 'PASS' : 'WAIT' }}</dd></div>
+                  <div><dt>Face horizontally centred</dt><dd :class="{ pass: result?.quality.centered }">{{ result?.quality.centered ? 'PASS' : 'WAIT' }}</dd></div>
+                  <div><dt>Stable for 2 seconds</dt><dd :class="{ pass: detectionLocked }">{{ Math.round(stabilityProgress * 100) }}%</dd></div>
+                </dl>
+              </section>
+            </div>
+            <figure v-if="detectionLocked && detectedFace" class="locked-face">
+              <img :src="detectedFace" alt="Locked detected face">
+              <figcaption>Locked face</figcaption>
+            </figure>
+            <div v-if="!cameraActive" class="camera-empty">Camera is stopped</div>
+          </div>
+          <div class="card-body button-row"><button class="button primary" :disabled="cameraActive || !!busy" @click="startCamera">Start camera</button><button class="button primary" :disabled="!cameraActive || !detectionLocked" @click="detectAgain">{{ detectionLocked ? `Detect again (${restartCountdown}s)` : 'Detect again' }}</button><button class="button secondary" :disabled="!cameraActive" @click="stopCamera">Stop camera</button></div>
+        </article>
+
+        <article class="result-card detection-result-card">
+          <div class="result-header"><h3>Detection result</h3><code>FaceDetectionResult</code></div>
+          <pre>{{ format(resultSummary) }}</pre>
+        </article>
+
+        <article class="result-card activity-card">
+          <div class="result-header"><h3>Activity</h3><code>Detector lifecycle and quality changes</code></div>
+          <div class="activity-list"><div v-for="item in activity" :key="item.id"><time>{{ item.time }}</time><span>{{ item.message }}</span></div><p v-if="!activity.length">No activity</p></div>
+        </article>
+      </section>
+    </main>
+  </div>
+</template>

ai-capabilities/demo-ai-face-detector/src/components/CutosTopbar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import cutosLogo from '@/assets/cutos.png'
+
+withDefaults(defineProps<{
+  title: string
+  subtitle?: string
+  coreVersion?: string
+  lwaName?: string
+  lwaVersion?: string
+  connected: boolean
+}>(), {
+  subtitle: 'CUTOS 4.0 LWA',
+  coreVersion: '',
+  lwaName: '',
+  lwaVersion: ''
+})
+</script>
+
+<template>
+  <header class="topbar">
+    <div class="brand">
+      <img :src="cutosLogo" alt="CUTOS" />
+      <div><h1>{{ title }}</h1><p>{{ subtitle }}</p></div>
+    </div>
+    <div class="status-cluster">
+      <span class="version-tag">Core {{ coreVersion || '—' }}</span>
+      <span class="version-tag">LWA {{ lwaName }} {{ lwaVersion || '—' }}</span>
+      <span class="connection" :class="{ online: connected }"><i></i>{{ connected ? 'Connected' : 'Disconnected' }}</span>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.topbar{min-height:82px;padding:14px clamp(18px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:24px;color:#f8fafb;background:#20262c;border-bottom:4px solid #16a394}.brand{display:flex;align-items:center;gap:15px;min-width:0}.brand img{width:42px;height:42px;object-fit:contain}.brand h1{margin:0;font-size:20px;line-height:1.2;font-weight:700}.brand p{margin:4px 0 0;font-size:12px;color:#aeb8bf}.status-cluster{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.version-tag,.connection{height:30px;display:inline-flex;align-items:center;padding:0 10px;font-size:12px;white-space:nowrap;border:1px solid #4b555d;border-radius:4px;background:#2b3339}.connection i{width:8px;height:8px;margin-right:7px;border-radius:50%;background:#e06b65}.connection.online i{background:#42c6a8;box-shadow:0 0 0 3px rgba(66,198,168,.14)}@media(max-width:640px){.topbar{align-items:flex-start;flex-direction:column;gap:12px}.status-cluster{justify-content:flex-start}}
+</style>

ai-capabilities/demo-ai-face-detector/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

ai-capabilities/demo-ai-face-detector/src/style.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#20262c;background:#eef1f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.app-shell{min-height:100vh;background:#eef1f3}main{width:100%;padding:28px clamp(18px,2vw,36px) 32px}.error-banner{display:flex;gap:12px;margin-bottom:20px;padding:12px 16px;color:#7e2420;background:#fff0ef;border-left:4px solid #d54d47}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:15px}.section-heading h2{margin:3px 0 0;font-size:18px}.eyebrow{color:#64717a;font:11px "Cascadia Code",Consolas,monospace}.dependency-tag{padding:6px 9px;color:#5d6870;background:#f8fafb;border:1px solid #cbd3d8;border-radius:4px;font:11px "Cascadia Code",Consolas,monospace}.dependency-tag strong{color:#253038}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.result-card{min-width:0;min-height:260px;background:#fff;border:1px solid #d8dee2;border-radius:6px;overflow:hidden}.camera-card,.full-row{grid-column:span 2}.camera-card{min-height:0}.compact-card{min-height:220px}.detector-card pre{max-height:105px}.result-header{min-height:66px;padding:13px 15px;border-bottom:1px solid #e4e8eb;background:#f8fafb}.result-header h3{margin:0 0 6px;font-size:14px}.result-header code{display:block;color:#68757d;font-size:11px;overflow-wrap:anywhere}.method-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.state-tag{max-width:55%;padding:5px 8px;color:#8b3c37;background:#fff0ef;border-radius:3px;font:10px "Cascadia Code",Consolas,monospace;text-align:right}.state-tag.online{color:#087b71;background:#e8f7f4}.camera-stage{position:relative;width:min(100%,960px);margin:0 auto;background:#111820;line-height:0;overflow:hidden}.camera-stage.empty{min-height:280px}.camera-stage video{display:block;width:100%;height:auto}.face-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.guide-shade{fill:rgba(7,12,17,.48)}.guide-ring{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:12 8;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.guide-ring.accepted{stroke:#42c6a8;stroke-dasharray:none}.camera-empty{position:absolute;inset:0;display:grid;place-items:center;color:#9da8ae;font-size:13px;line-height:1.4}.face-box{position:absolute;border:2px solid #e06b65;box-shadow:0 0 0 1px rgba(0,0,0,.25)}.face-box.accepted{border-color:#42c6a8}.face-box span{position:absolute;left:-2px;bottom:100%;padding:3px 6px;color:#fff;background:#e06b65;font:10px "Cascadia Code",Consolas,monospace;line-height:1.4}.face-box.accepted span{background:#138b80}.card-body{padding:15px}.button-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.button{min-height:34px;padding:7px 13px;border:1px solid transparent;border-radius:4px;font-weight:650;font-size:12px}.button.primary{color:#fff;background:#138b80;border-color:#138b80}.button.secondary{color:#2d373d;background:#fff;border-color:#bfc8cd}pre{margin:0;padding:15px;max-height:280px;font:12px/1.55 "Cascadia Code",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}.quality-list{padding:8px 15px}.quality-list div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #edf0f2;font-size:12px}.quality-list div:last-child{border:0}.quality-list b{color:#8b3c37;font:10px "Cascadia Code",Consolas,monospace}.quality-list b.pass{color:#087b71}.face-preview{height:250px;display:grid;place-items:center;padding:15px;color:#77838b;font-size:12px;background:#f5f7f8}.face-preview img{max-width:100%;max-height:220px;object-fit:contain;border:1px solid #d8dee2}.activity-list{max-height:280px;overflow:auto}.activity-list div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:9px 13px;border-bottom:1px solid #edf0f2;font-size:12px}.activity-list time{color:#77838b;font-size:11px}.activity-list p{padding:8px 15px;color:#77838b;font-size:12px}@media(max-width:700px){.section-heading{align-items:flex-start;flex-direction:column}.result-grid{grid-template-columns:1fr}.camera-card,.full-row{grid-column:auto}.camera-stage.empty{min-height:200px}.state-tag{max-width:50%}}
+.face-marker rect{fill:none;stroke:#e06b65;stroke-width:2;vector-effect:non-scaling-stroke}.face-marker.accepted rect{stroke:#42c6a8}.score-badge{position:absolute;top:10px;left:10px;padding:4px 7px;color:#fff;background:#e06b65;border-radius:3px;font:11px/1.4 "Cascadia Code",Consolas,monospace}.score-badge.accepted{background:#138b80}@media(orientation:portrait){.camera-stage.portrait{width:min(100%,calc(100vh - 300px));min-width:280px;aspect-ratio:1}.camera-stage.portrait video{width:100%;height:100%;object-fit:cover}.camera-stage.portrait.empty{min-height:0}}
+.face-marker .confidence-bg{fill:#e06b65;stroke:none}.face-marker.accepted .confidence-bg{fill:#138b80;stroke:none}.confidence-text{fill:#fff;font:600 20px "Cascadia Code",Consolas,monospace}.video-status{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:grid;grid-template-columns:minmax(150px,220px) minmax(260px,360px);justify-content:space-between;gap:10px;pointer-events:none}.video-panel{padding:9px 11px;color:#f7fafb;background:rgba(16,23,28,.72);border:1px solid rgba(255,255,255,.22);border-radius:5px;backdrop-filter:blur(4px);font-size:11px;line-height:1.35}.video-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.video-panel strong{font-size:12px}.video-panel b{color:#f29a94;font:10px "Cascadia Code",Consolas,monospace}.video-panel b.pass{color:#55d8ba}.detector-panel>span{color:#c9d1d6;font:10px "Cascadia Code",Consolas,monospace}.gate-panel>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.gate-panel>div span{padding:3px 4px;color:#d99a96;text-align:center;background:rgba(196,71,64,.18);border-radius:3px;font:9px "Cascadia Code",Consolas,monospace}.gate-panel>div span.pass{color:#76dfc8;background:rgba(19,139,128,.24)}@media(max-width:700px){.video-status{grid-template-columns:1fr 1.5fr;top:8px;left:8px;right:8px;gap:6px}.video-panel{padding:7px 8px}.gate-panel>div{gap:3px}.gate-panel>div span{padding:3px 2px;font-size:8px}}
+.video-status{grid-template-columns:minmax(220px,310px) minmax(260px,360px)}.video-panel{background:rgba(16,23,28,.42);border-color:rgba(255,255,255,.3);text-shadow:0 1px 2px rgba(0,0,0,.8)}.video-panel dl{margin:0}.video-panel dl div{display:grid;grid-template-columns:minmax(82px,.8fr) minmax(0,1.5fr);gap:8px;padding:3px 0;border-top:1px solid rgba(255,255,255,.14)}.video-panel dt,.video-panel dd{margin:0;padding:0;border:0}.video-panel dt{color:#d5dde1}.video-panel dd{min-width:0;color:#fff;font:10px/1.35 "Cascadia Code",Consolas,monospace;overflow-wrap:anywhere;text-align:right}.video-panel dd.pass{color:#70e0c6}.gate-panel dl div{grid-template-columns:minmax(0,1fr) 42px}@media(max-width:700px){.video-status{grid-template-columns:1fr 1fr}.video-panel dl div{grid-template-columns:1fr;padding:2px 0}.video-panel dd{text-align:left}.gate-panel dl div{grid-template-columns:minmax(0,1fr) 38px}.gate-panel dl dd{text-align:right}}
+.compact-face-card{min-height:0}.compact-face-card+.detection-result-card{min-height:0}.compact-face-card{grid-column:1}.detection-result-card{grid-column:2}.face-preview{height:auto;min-height:0;padding:10px}.face-preview img{display:block;width:100%;height:auto;max-height:190px;object-fit:contain}.activity-card{min-height:0}.activity-card .result-header{min-height:56px;padding-top:10px;padding-bottom:10px}.activity-list{max-height:140px}.activity-list div{padding-top:6px;padding-bottom:6px}@media(min-width:701px){.result-grid{grid-template-columns:minmax(220px,32%) minmax(0,68%)}}@media(max-width:700px){.compact-face-card,.detection-result-card{grid-column:auto}.face-preview img{width:auto;max-width:100%;max-height:170px}.activity-list{max-height:110px}}
+.video-panel{padding:6px 9px}.video-panel header{margin-bottom:3px}.video-panel dl div{padding:1px 0}.locked-face{position:absolute;z-index:3;right:12px;bottom:12px;margin:0;padding:5px;background:rgba(16,23,28,.46);border:1px solid rgba(255,255,255,.42);border-radius:5px;box-shadow:0 3px 12px rgba(0,0,0,.35)}.locked-face img{display:block;width:auto;height:auto;max-width:150px;max-height:180px;object-fit:contain}.locked-face figcaption{padding:4px 2px 0;color:#fff;font:9px/1.3 "Cascadia Code",Consolas,monospace;text-align:center}.detection-result-card,.activity-card{grid-column:auto;min-height:0}.detection-result-card pre,.activity-list{max-height:180px}@media(min-width:701px){.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.locked-face{right:8px;bottom:8px}.locked-face img{max-width:105px;max-height:130px}.detection-result-card pre,.activity-list{max-height:120px}}
+.gate-panel dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.gate-panel dl div{grid-template-columns:minmax(0,1fr) 38px}.video-panel dt{font-size:9px}.video-panel dd{font-size:9px}@media(max-width:700px){.gate-panel dl{grid-template-columns:1fr 1fr;gap:0 5px}.gate-panel dl div{grid-template-columns:1fr}.gate-panel dl dd{text-align:left}}

ai-capabilities/demo-ai-face-detector/src/utils/config.ts

@@ -0,0 +1,38 @@
+export interface LwaConfig {
+  name: string
+  version: string
+  description?: string
+  params: {
+    title: string
+    host: string
+    [key: string]: unknown
+  }
+}
+
+const fallback: LwaConfig = {
+  name: 'demo-ai-face-detector',
+  version: '0.2.4',
+  params: { title: 'CUTOS AI Face Detector', host: 'localhost' }
+}
+
+function mergeQueryParams(config: LwaConfig) {
+  const params = new URL(window.location.href).searchParams.get('params')
+  if (!params) return config
+  try {
+    config.params = { ...config.params, ...JSON.parse(params) }
+  } catch (error) {
+    console.error('Invalid LWA params', error)
+  }
+  return config
+}
+
+export async function loadConfig(): Promise<LwaConfig> {
+  try {
+    const response = await fetch(new URL('config.json', window.location.href), { cache: 'no-cache' })
+    if (!response.ok) throw new Error(`Failed to load config.json: ${response.status}`)
+    return mergeQueryParams(await response.json() as LwaConfig)
+  } catch (error) {
+    console.error(error)
+    return mergeQueryParams({ ...fallback, params: { ...fallback.params } })
+  }
+}

ai-capabilities/demo-ai-face-detector/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />