Add AI face capability demos
This commit is contained in:
yankun
@@ -0,0 +1,55 @@
|
||||
# demo-ai-face-detector
|
||||
|
||||
CUTOS 4.0 Vue 3/Vite LWA demonstrating local browser-side face detection with `@cutos/ai-face-detector`.
|
||||
|
||||
No Device Provider or Gateway service is required. The LWA needs camera permission and packages the MediaPipe model/WASM resources for offline use.
|
||||
|
||||
## Behaviour
|
||||
|
||||
- Starts the user-facing camera automatically.
|
||||
- Uses the source camera ratio in landscape and a centre-cropped 1:1 preview in portrait.
|
||||
- Guides the user with a circular capture area and a moving confidence box.
|
||||
- Requires one face, confidence ≥ 0.90, face size ≥ 12%, and horizontal centering.
|
||||
- Requires the accepted face position and size to remain stable for about two seconds.
|
||||
- Locks the stable face image and stops inference while keeping the camera preview visible.
|
||||
- Restarts detection automatically after ten seconds, or immediately when `Detect again` is selected.
|
||||
- Displays the locked face in the lower-right corner and keeps Detection Result and Activity in two equal cards.
|
||||
|
||||
## Development with the sibling SDK
|
||||
|
||||
```sh
|
||||
cd ../sdk
|
||||
npm install
|
||||
npm run build
|
||||
|
||||
cd ../demo-ai-face-detector
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Both `dev` and the CUTOS build copy version-matched model assets through the SDK's asset command.
|
||||
|
||||
## Build and package
|
||||
|
||||
```sh
|
||||
npx cutos lwa build
|
||||
```
|
||||
|
||||
The generated package is:
|
||||
|
||||
```text
|
||||
release/demo-ai-face-detector-v<version>.lwa
|
||||
```
|
||||
|
||||
The LWA version comes from `public/config.json`; `package.json` intentionally remains `0.0.0`.
|
||||
|
||||
## Upload and publish
|
||||
|
||||
```sh
|
||||
npx cutos login --username office
|
||||
npx cutos lwa upload
|
||||
npx cutos lwa list demo-ai-face-detector
|
||||
npx cutos lwa publish --lwa <content-id> --device <device-id>
|
||||
```
|
||||
|
||||
For a release build, depend on the published npm SDK rather than `file:../sdk`.
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CUTOS AI Face Detector</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "demo-ai-face-detector",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"assets": "cutos-ai-face-detector-assets public/cutos-ai-face-detector",
|
||||
"dev": "npm run assets && vite",
|
||||
"build": "cutos lwa build",
|
||||
"build:app": "npm run assets && vue-tsc --noEmit && vite build",
|
||||
"package": "cutos lwa package",
|
||||
"validate": "cutos lwa validate",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cutos/ai-face-detector": "^4.0.1",
|
||||
"@cutos/core": "^4.0.8",
|
||||
"vue": "^3.4.31"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.40",
|
||||
"postcss-import": "^16.1.0",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"tailwindcss": "^3.4.7",
|
||||
"typescript": "^5.5.4",
|
||||
"unplugin-auto-import": "^0.18.0",
|
||||
"vite": "^5.3.4",
|
||||
"vue-tsc": "^2.0.26"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "demo-ai-face-detector",
|
||||
"version": "0.2.6",
|
||||
"description": "CUTOS 4.0 browser-side AI face detector demo",
|
||||
"params": {
|
||||
"title": "CUTOS AI Face Detector",
|
||||
"host": "localhost"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
@@ -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>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -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}}
|
||||
@@ -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 } })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: { extend: {} },
|
||||
plugins: []
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"baseUrl": ".",
|
||||
"paths": { "@/*": ["src/*"] },
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
publicDir: 'public',
|
||||
build: { target: ['chrome74'] },
|
||||
resolve: { alias: { '@': '/src' } },
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
|
||||
imports: ['vue'],
|
||||
vueTemplate: true,
|
||||
cache: true,
|
||||
dts: false
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: { global: 'globalThis' },
|
||||
target: 'es2015',
|
||||
supported: { bigint: true }
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user