Add AI face capability demos
This commit is contained in:
yankun
@@ -0,0 +1,20 @@
|
||||
# Demo AI Face Service
|
||||
|
||||
This LWA demonstrates the complete browser-to-Gateway face workflow:
|
||||
|
||||
1. `@cutos/ai-face-detector` captures one qualified face locally.
|
||||
2. `@cutos/gw-client` connects with the CUTOS device credentials obtained from `@cutos/core`.
|
||||
3. `@cutos/ai-face-service` creates the selected collection and invokes registration, lookup, listing, search, comparison, removal, and clearing.
|
||||
|
||||
During SDK development, the demo references `file:../sdk`. After `@cutos/ai-face-service` is published, replace it with `^4.0.0` and regenerate `package-lock.json`.
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
npm install
|
||||
cutos lwa build
|
||||
cutos lwa upload --upload-mode oss
|
||||
cutos lwa publish --device <device-id>
|
||||
```
|
||||
|
||||
The target CUTOS Runtime must provide device information including Gateway credentials (`id`, `gwi`, `token`, and `gwUrl`).
|
||||
@@ -0,0 +1,13 @@
|
||||
<!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 Service</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "demo-ai-face-service",
|
||||
"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/ai-face-service": "file:../sdk",
|
||||
"@cutos/core": "^4.0.8",
|
||||
"@cutos/gw-client": "^1.0.9",
|
||||
"vue": "^3.4.31"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.40",
|
||||
"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: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "demo-ai-face-service",
|
||||
"version": "0.2.0",
|
||||
"description": "CUTOS 4.0 Gateway AI face service demo",
|
||||
"params": {
|
||||
"title": "CUTOS AI Face Service",
|
||||
"host": "localhost"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,396 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { CoreAPI } from '@cutos/core'
|
||||
import { FaceDetector, type FaceDetectionResult } from '@cutos/ai-face-detector'
|
||||
import { FaceService, type FaceSearchResult } from '@cutos/ai-face-service'
|
||||
import { IPC } from '@cutos/gw-client'
|
||||
import { loadConfig } from './utils/config'
|
||||
|
||||
interface DeviceInfo {
|
||||
id: string
|
||||
gwi: string
|
||||
token: string
|
||||
gwUrl: string
|
||||
name?: string
|
||||
}
|
||||
interface ActivityItem { id: number; time: string; message: string }
|
||||
interface ServiceNotice { tone: 'success' | 'empty'; message: string }
|
||||
|
||||
const video = ref<HTMLVideoElement | null>(null)
|
||||
const title = ref('CUTOS AI Face Service')
|
||||
const host = ref('localhost')
|
||||
const lwaName = ref('demo-ai-face-service')
|
||||
const lwaVersion = ref('0.1.0')
|
||||
const coreVersion = ref('')
|
||||
const runtimeConnected = ref(false)
|
||||
const gatewayConnected = ref(false)
|
||||
const cameraActive = ref(false)
|
||||
const busy = ref('')
|
||||
const errorText = ref('')
|
||||
const latest = ref<FaceDetectionResult | null>(null)
|
||||
const capturedImage = ref('')
|
||||
const registeredId = ref('')
|
||||
const userId = ref('demo-user')
|
||||
const serviceResult = ref<unknown>(null)
|
||||
const serviceNotice = ref<ServiceNotice | null>(null)
|
||||
const activity = ref<ActivityItem[]>([])
|
||||
const autoCaptureProgress = ref(0)
|
||||
const restartCountdown = ref(10)
|
||||
|
||||
let detector: FaceDetector | null = null
|
||||
let gateway: IPC | null = null
|
||||
let faceService: FaceService | null = null
|
||||
let stream: MediaStream | null = null
|
||||
let animationFrame = 0
|
||||
let inferenceRunning = false
|
||||
let stableSince = 0
|
||||
let stableBox: FaceDetectionResult['primary'] = null
|
||||
let restartTimer = 0
|
||||
|
||||
const STABILITY_DURATION_MS = 2000
|
||||
const FACE_MATCH_THRESHOLD = 0.5
|
||||
|
||||
const faceStatus = computed(() => {
|
||||
if (!latest.value?.primary) return 'No face detected'
|
||||
if (!latest.value.quality.accepted) return latest.value.quality.reasons.join(' · ')
|
||||
if (capturedImage.value) return `Face captured · restart in ${restartCountdown.value}s`
|
||||
if (stableSince) return `Hold still · ${Math.round(autoCaptureProgress.value * 100)}%`
|
||||
return 'Face ready to capture'
|
||||
})
|
||||
const serviceStatus = computed(() => gatewayConnected.value ? 'CONNECTED' : 'WAITING')
|
||||
const guideCircle = computed(() => {
|
||||
const frame = latest.value?.frame
|
||||
if (!frame) {
|
||||
return { viewBox: '0 0 100 100', cx: 50, cy: 50, radius: 43 }
|
||||
}
|
||||
return {
|
||||
viewBox: `0 0 ${frame.width} ${frame.height}`,
|
||||
cx: frame.width / 2,
|
||||
cy: frame.height / 2,
|
||||
radius: Math.min(frame.width, frame.height) * 0.43,
|
||||
}
|
||||
})
|
||||
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 = ''
|
||||
serviceNotice.value = null
|
||||
try { await action() } catch (error) {
|
||||
errorText.value = error instanceof Error ? error.message : String(error)
|
||||
log(`${name}: ${errorText.value}`)
|
||||
} finally { busy.value = '' }
|
||||
}
|
||||
async function initializeRuntimeAndGateway() {
|
||||
await CoreAPI.init(host.value)
|
||||
runtimeConnected.value = CoreAPI.connected()
|
||||
coreVersion.value = CoreAPI.getVersion()
|
||||
const info = await CoreAPI.getDeviceInfo<DeviceInfo>()
|
||||
if (!info?.id || !info.gwi || !info.token || !info.gwUrl) {
|
||||
throw new Error('CUTOS device information does not include Gateway credentials.')
|
||||
}
|
||||
gateway = await new Promise<IPC>((resolve, reject) => {
|
||||
const ipc = new IPC(info.gwUrl, { gwi: info.gwi, username: info.id, token: info.token }, status => {
|
||||
if (status.status) resolve(ipc)
|
||||
else reject(new Error(status.msg || 'Gateway connection failed.'))
|
||||
})
|
||||
})
|
||||
faceService = new FaceService(gateway, { lwaName: lwaName.value })
|
||||
await faceService.init()
|
||||
gatewayConnected.value = true
|
||||
log(`Gateway connected for ${info.name || info.id}; face collection is ${lwaName.value}`)
|
||||
}
|
||||
async function initializeDetector() {
|
||||
if (detector) return
|
||||
detector = await FaceDetector.create({
|
||||
assetBaseUrl: new URL('cutos-ai-face-detector', window.location.href).toString(),
|
||||
preferredDelegate: 'gpu',
|
||||
allowCpuFallback: true,
|
||||
minIntervalMs: 180,
|
||||
minDetectionConfidence: 0.9,
|
||||
minFaceSizeRatio: 0.06,
|
||||
maxHorizontalCenterOffsetRatio: 0.2,
|
||||
guideAspectRatio: 1,
|
||||
})
|
||||
log('Local face detector initialized')
|
||||
}
|
||||
async function startCamera() {
|
||||
if (cameraActive.value) return
|
||||
await run('start camera', async () => {
|
||||
await initializeDetector()
|
||||
stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
width: { ideal: 720 },
|
||||
height: { ideal: 720 },
|
||||
aspectRatio: { ideal: 1 },
|
||||
facingMode: 'user',
|
||||
},
|
||||
audio: false,
|
||||
})
|
||||
cameraActive.value = true
|
||||
await nextTick()
|
||||
if (!video.value) throw new Error('Video element is unavailable.')
|
||||
video.value.srcObject = stream
|
||||
await video.value.play()
|
||||
clearRestartCountdown()
|
||||
capturedImage.value = ''
|
||||
resetStability()
|
||||
detectLoop()
|
||||
log('Camera started')
|
||||
})
|
||||
}
|
||||
function stopCamera() {
|
||||
clearRestartCountdown()
|
||||
resetStability()
|
||||
cancelAnimationFrame(animationFrame)
|
||||
stream?.getTracks().forEach(track => track.stop())
|
||||
stream = null
|
||||
if (video.value) video.value.srcObject = null
|
||||
cameraActive.value = false
|
||||
latest.value = null
|
||||
log('Camera stopped')
|
||||
}
|
||||
async function detectLoop() {
|
||||
if (!cameraActive.value || !video.value || !detector || capturedImage.value) return
|
||||
if (!inferenceRunning) {
|
||||
inferenceRunning = true
|
||||
try {
|
||||
const next = await detector.detect(video.value)
|
||||
latest.value = next
|
||||
updateStability(next)
|
||||
}
|
||||
catch (error) { errorText.value = error instanceof Error ? error.message : String(error) }
|
||||
finally { inferenceRunning = false }
|
||||
}
|
||||
if (!capturedImage.value) animationFrame = requestAnimationFrame(detectLoop)
|
||||
}
|
||||
function resetStability() {
|
||||
stableSince = 0
|
||||
stableBox = null
|
||||
autoCaptureProgress.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
|
||||
autoCaptureProgress.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
const elapsed = performance.now() - stableSince
|
||||
autoCaptureProgress.value = Math.min(1, elapsed / STABILITY_DURATION_MS)
|
||||
if (elapsed >= STABILITY_DURATION_MS) {
|
||||
capturedImage.value = face.image
|
||||
autoCaptureProgress.value = 1
|
||||
serviceResult.value = { captured: true, automatic: true, score: face.score, timestamp: new Date().toISOString() }
|
||||
log('Stable face captured 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()
|
||||
capturedImage.value = ''
|
||||
latest.value = null
|
||||
resetStability()
|
||||
log('Detection restarted')
|
||||
animationFrame = requestAnimationFrame(detectLoop)
|
||||
}
|
||||
function requireServiceAndImage(): FaceService {
|
||||
if (!faceService || !gatewayConnected.value) throw new Error('Gateway face service is not connected.')
|
||||
if (!capturedImage.value) throw new Error('Capture a qualified face first.')
|
||||
return faceService
|
||||
}
|
||||
function requireService(): FaceService {
|
||||
if (!faceService || !gatewayConnected.value) throw new Error('Gateway face service is not connected.')
|
||||
return faceService
|
||||
}
|
||||
async function searchCapturedFace(service: FaceService): Promise<FaceSearchResult | null> {
|
||||
try {
|
||||
return await service.search(capturedImage.value)
|
||||
} catch (error) {
|
||||
if (error instanceof Error && /no match found/i.test(error.message)) return null
|
||||
throw error
|
||||
}
|
||||
}
|
||||
async function register() {
|
||||
await run('register', async () => {
|
||||
const service = requireServiceAndImage()
|
||||
try {
|
||||
registeredId.value = await service.register(capturedImage.value, {
|
||||
userId: userId.value,
|
||||
saveImage: true,
|
||||
})
|
||||
} catch (error) {
|
||||
if (!(error instanceof Error) || !/USER_ID_ALREADY_EXISTS/i.test(error.message)) throw error
|
||||
const existing = await service.getByUserId(userId.value)
|
||||
if (!existing) throw error
|
||||
registeredId.value = existing.id
|
||||
serviceResult.value = existing
|
||||
serviceNotice.value = {
|
||||
tone: 'success',
|
||||
message: `User ID ${userId.value} is already registered. Face ID: ${existing.id}`,
|
||||
}
|
||||
log(`User ${userId.value} is already registered as ${existing.id}`)
|
||||
return
|
||||
}
|
||||
serviceResult.value = { registeredId: registeredId.value, userId: userId.value, imageSaved: true }
|
||||
serviceNotice.value = { tone: 'success', message: `Registered successfully. Face ID: ${registeredId.value}` }
|
||||
log(`Registered face ${registeredId.value} for ${userId.value}`)
|
||||
})
|
||||
}
|
||||
async function search() {
|
||||
await run('search', async () => {
|
||||
const service = requireServiceAndImage()
|
||||
const match = await searchCapturedFace(service)
|
||||
if (match && match.score >= FACE_MATCH_THRESHOLD) {
|
||||
registeredId.value = match.id
|
||||
serviceResult.value = match
|
||||
serviceNotice.value = {
|
||||
tone: 'success',
|
||||
message: `Face found. ID: ${match.id}, score: ${(match.score * 100).toFixed(1)}%`,
|
||||
}
|
||||
log(`Search match ${match.id}, score ${match.score.toFixed(3)}`)
|
||||
} else {
|
||||
registeredId.value = ''
|
||||
serviceResult.value = match
|
||||
serviceNotice.value = { tone: 'empty', message: 'No registered face matches the captured image.' }
|
||||
log('No matching face found')
|
||||
}
|
||||
})
|
||||
}
|
||||
async function unregister() {
|
||||
await run('unregister', async () => {
|
||||
const service = requireService()
|
||||
if (!registeredId.value) throw new Error('No registered face id is available.')
|
||||
const id = await service.unregister(registeredId.value)
|
||||
serviceResult.value = { unregisteredId: id }
|
||||
registeredId.value = ''
|
||||
serviceNotice.value = { tone: 'success', message: `Face ${id} was unregistered.` }
|
||||
log(`Unregistered face ${id}`)
|
||||
})
|
||||
}
|
||||
async function getByUserId() {
|
||||
await run('get by user id', async () => {
|
||||
const service = requireService()
|
||||
const record = await service.getByUserId(userId.value, { includeImage: true })
|
||||
serviceResult.value = record
|
||||
if (record) registeredId.value = record.id
|
||||
else registeredId.value = ''
|
||||
serviceNotice.value = record
|
||||
? { tone: 'success', message: `Face found. ID: ${record.id}` }
|
||||
: { tone: 'empty', message: `No face is registered for ${userId.value}.` }
|
||||
log(record ? `Loaded face ${record.id} for ${userId.value}` : `No face registered for ${userId.value}`)
|
||||
})
|
||||
}
|
||||
async function listFaces() {
|
||||
await run('list faces', async () => {
|
||||
const service = requireService()
|
||||
const page = await service.list({ limit: 20 })
|
||||
serviceResult.value = page
|
||||
log(`Listed ${page.items.length} face records`)
|
||||
})
|
||||
}
|
||||
async function clearFaces() {
|
||||
if (!window.confirm(`Clear every face registered for ${lwaName.value}?`)) return
|
||||
await run('clear faces', async () => {
|
||||
const service = requireService()
|
||||
await service.clear()
|
||||
registeredId.value = ''
|
||||
serviceResult.value = { cleared: true }
|
||||
serviceNotice.value = { tone: 'success', message: 'All registered faces were cleared.' }
|
||||
log(`Cleared face collection ${lwaName.value}`)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
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 || host.value)
|
||||
lwaName.value = String(config.name || lwaName.value)
|
||||
lwaVersion.value = String(config.version || lwaVersion.value)
|
||||
await run('initialize Gateway service', initializeRuntimeAndGateway)
|
||||
await startCamera()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearRestartCountdown()
|
||||
stopCamera()
|
||||
detector?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<header class="topbar"><div class="brand"><span class="brand-mark">CUTOS</span><div><h1>{{ title }}</h1><p>Gateway AI · CUTOS 4.0</p></div></div><div class="tags"><span>Core {{ coreVersion || '—' }}</span><span>LWA {{ lwaName }} {{ lwaVersion }}</span><b :class="{ online: runtimeConnected }">{{ runtimeConnected ? 'Runtime connected' : 'Runtime offline' }}</b></div></header>
|
||||
<main>
|
||||
<section v-if="errorText" class="error-banner"><strong>Operation failed</strong><span>{{ errorText }}</span></section>
|
||||
<section class="heading"><div><small>{{ host }}</small><h2>Gateway face recognition service</h2></div><span class="dependency">Detector: <b>@cutos/ai-face-detector 4.0.1</b> · Service: <b>@cutos/ai-face-service 4.0.0</b></span></section>
|
||||
<section class="grid">
|
||||
<article class="card camera-card">
|
||||
<header><div><h3>Capture face</h3><code>FaceDetector.detect(video)</code></div><b class="state" :class="{ ready: latest?.quality.accepted }">{{ faceStatus }}</b></header>
|
||||
<div class="camera">
|
||||
<video ref="video" autoplay muted playsinline></video>
|
||||
<svg v-if="guideCircle" class="face-guide" :viewBox="guideCircle.viewBox" preserveAspectRatio="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="{ ready: latest?.quality.accepted }" />
|
||||
<g v-if="latest?.primary" class="face-marker" :class="{ accepted: latest.quality.accepted }">
|
||||
<rect :x="latest.primary.box.x" :y="latest.primary.box.y" :width="latest.primary.box.width" :height="latest.primary.box.height" />
|
||||
<rect class="confidence-bg" :x="latest.primary.box.x" :y="Math.max(0, latest.primary.box.y - 34)" width="76" height="30" rx="4" />
|
||||
<text class="confidence-text" :x="latest.primary.box.x + 8" :y="Math.max(22, latest.primary.box.y - 12)">{{ Math.round(latest.primary.score * 100) }}%</text>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="video-status">
|
||||
<section class="video-panel gate-panel">
|
||||
<header><strong>Quality gate</strong><b :class="{ pass: Boolean(capturedImage) }">{{ capturedImage ? 'LOCKED' : latest?.quality.accepted ? 'STABILIZING' : 'WAIT' }}</b></header>
|
||||
<dl>
|
||||
<div><dt>Single face</dt><dd :class="{ pass: latest?.quality.singleFace }">{{ latest?.quality.singleFace ? 'PASS' : 'WAIT' }}</dd></div>
|
||||
<div><dt>Confidence ≥ 0.90</dt><dd :class="{ pass: latest?.quality.confident }">{{ latest?.quality.confident ? 'PASS' : 'WAIT' }}</dd></div>
|
||||
<div><dt>Face size ≥ 6%</dt><dd :class="{ pass: latest?.quality.largeEnough }">{{ latest?.quality.largeEnough ? 'PASS' : 'WAIT' }}</dd></div>
|
||||
<div><dt>Face horizontally centred</dt><dd :class="{ pass: latest?.quality.centered }">{{ latest?.quality.centered ? 'PASS' : 'WAIT' }}</dd></div>
|
||||
<div><dt>Stable for 2 seconds</dt><dd :class="{ pass: Boolean(capturedImage) }">{{ Math.round(autoCaptureProgress * 100) }}%</dd></div>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
<figure v-if="capturedImage" class="locked-face"><img :src="capturedImage" alt="Locked detected face"><figcaption>Locked face</figcaption></figure>
|
||||
<p v-if="!cameraActive">Camera is stopped</p>
|
||||
</div>
|
||||
<footer><button class="primary" :disabled="cameraActive || !!busy" @click="startCamera">Start camera</button><button class="primary" :disabled="!cameraActive || !capturedImage || !!busy" @click="detectAgain">{{ capturedImage ? `Capture again (${restartCountdown}s)` : 'Capture again' }}</button><button :disabled="!cameraActive" @click="stopCamera">Stop camera</button></footer>
|
||||
</article>
|
||||
<article class="card service-card"><header><div><h3>Face service</h3><code>Gateway request / response</code></div><b class="state" :class="{ ready: gatewayConnected }">{{ serviceStatus }}</b></header><div class="identity-fields"><label><span>User ID</span><input v-model.trim="userId" :disabled="!!busy" autocomplete="off"></label><label><span>Face ID</span><input :value="registeredId" readonly placeholder="Not assigned"></label></div><div class="service-actions"><button class="primary" :disabled="!!busy || !capturedImage || !userId" @click="register">Register</button><button :disabled="!!busy || !userId" @click="getByUserId">Get user</button><button :disabled="!!busy" @click="listFaces">List</button><button :disabled="!!busy" @click="clearFaces">Clear</button><button class="primary" :disabled="!!busy || !capturedImage" @click="search">Search</button><button :disabled="!!busy || !registeredId" @click="unregister">Unregister</button></div><p v-if="serviceNotice" class="service-notice" :class="serviceNotice.tone">{{ serviceNotice.message }}</p><dl><div><dt>Captured image</dt><dd>{{ capturedImage ? 'Ready' : 'Waiting' }}</dd></div></dl><pre>{{ format(serviceResult) }}</pre></article>
|
||||
<article class="card activity-card"><header><h3>Activity</h3><code>Gateway, detector, and service actions</code></header><div class="activity"><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>
|
||||
@@ -0,0 +1,113 @@
|
||||
.camera { width: min(100%, 720px); aspect-ratio: 1; }
|
||||
.camera video { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.camera .face-guide {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.camera .guide-shade { fill: rgba(7, 12, 17, 0.56); }
|
||||
|
||||
.camera .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, 0.6));
|
||||
}
|
||||
|
||||
.camera .guide-ring.ready { stroke: #42c6a8; stroke-dasharray: none; }
|
||||
|
||||
.face-marker rect { fill: none; stroke: #e06b65; stroke-width: 2; vector-effect: non-scaling-stroke; }
|
||||
.face-marker.accepted rect { stroke: #42c6a8; }
|
||||
.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(220px, 310px) minmax(240px, 320px);
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-panel {
|
||||
color: #f7fafb;
|
||||
background: rgba(16, 23, 28, 0.42);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 5px;
|
||||
backdrop-filter: blur(4px);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.video-panel { padding: 6px 9px; font-size: 11px; line-height: 1.35; }
|
||||
.video-panel header { min-height: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 3px; background: transparent; border: 0; }
|
||||
.video-panel strong { font-size: 12px; }
|
||||
.video-panel b { color: #f29a94; font: 10px "Cascadia Code", Consolas, monospace; }
|
||||
.video-panel b.pass { color: #55d8ba; }
|
||||
.gate-panel { grid-column: 2; }
|
||||
.video-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin: 0; }
|
||||
.video-panel dl div { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; padding: 1px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
|
||||
.video-panel dt,
|
||||
.video-panel dd { margin: 0; padding: 0; border: 0; }
|
||||
.video-panel dt { color: #d5dde1; font-size: 9px; }
|
||||
.video-panel dd { min-width: 0; color: #fff; font: 9px/1.35 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; text-align: right; }
|
||||
.video-panel dd.pass { color: #70e0c6; }
|
||||
|
||||
.locked-face { position: absolute; z-index: 3; right: 12px; bottom: 12px; margin: 0; padding: 5px; background: rgba(16, 23, 28, 0.46); border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 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; }
|
||||
|
||||
.identity-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr);
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #edf0f2;
|
||||
}
|
||||
|
||||
.identity-fields label { display: grid; gap: 6px; min-width: 0; }
|
||||
.identity-fields span { color: #68757d; font-size: 11px; font-weight: 600; }
|
||||
.identity-fields input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
color: #253038;
|
||||
background: #fff;
|
||||
border: 1px solid #bcc6cc;
|
||||
border-radius: 4px;
|
||||
font: 12px "Cascadia Code", Consolas, monospace;
|
||||
}
|
||||
.identity-fields input[readonly] { color: #4e5b63; background: #f5f7f8; }
|
||||
|
||||
.service-notice {
|
||||
margin: 0;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #edf0f2;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.service-notice.success { color: #087b71; background: #e8f7f4; }
|
||||
.service-notice.empty { color: #8b3c37; background: #fff0ef; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.identity-fields { grid-template-columns: 1fr; }
|
||||
.video-status { top: 8px; left: 8px; right: 8px; grid-template-columns: 1fr 1fr; gap: 6px; }
|
||||
.video-panel { padding: 7px 8px; }
|
||||
.video-panel dl { gap: 0 5px; }
|
||||
.video-panel dl div { grid-template-columns: 1fr; gap: 1px; padding: 2px 0; }
|
||||
.video-panel dd { text-align: left; }
|
||||
.locked-face { right: 8px; bottom: 8px; }
|
||||
.locked-face img { max-width: 105px; max-height: 130px; }
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
declare module '@cutos/gw-client' {
|
||||
export class IPC {
|
||||
gwi: string
|
||||
constructor(
|
||||
gwUrl: string,
|
||||
options: { gwi: string; username: string; token: string; ext?: Record<string, unknown> },
|
||||
callback?: (status: { status: boolean; msg?: string }) => void,
|
||||
)
|
||||
publishRequest(
|
||||
topic: string,
|
||||
body: unknown,
|
||||
callback?: (response: unknown, error?: unknown) => void,
|
||||
userContext?: Record<string, unknown>,
|
||||
options?: unknown,
|
||||
): void
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import './camera-overlay.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1 @@
|
||||
: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{padding:8px 12px;color:#2d373d;background:#fff;border:1px solid #bcc6cc;border-radius:4px;font:600 12px inherit;cursor:pointer}button.primary{color:#fff;background:#138b80;border-color:#138b80}button:disabled{cursor:not-allowed;opacity:.46}.app-shell{min-height:100vh}.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}.brand-mark{display:grid;place-items:center;width:46px;height:46px;color:#fff;border:1px solid #6ccbbb;border-radius:50%;font-size:10px;font-weight:800;letter-spacing:.7px}.brand h1{margin:0;font-size:20px}.brand p{margin:4px 0 0;color:#aeb8bf;font-size:12px}.tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.tags span,.tags b{padding:7px 9px;background:#2b3339;border:1px solid #4b555d;border-radius:4px;font:11px "Cascadia Code",Consolas,monospace}.tags b{color:#eb9b96}.tags b.online{color:#55d8ba}main{padding:28px clamp(18px,2vw,36px) 32px}.error-banner{display:flex;gap:12px;margin-bottom:18px;padding:12px 15px;color:#7e2420;background:#fff0ef;border-left:4px solid #d54d47;font-size:13px}.heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}.heading small{color:#64717a;font:11px "Cascadia Code",Consolas,monospace}.heading h2{margin:3px 0 0;font-size:18px}.dependency{padding:6px 9px;color:#5d6870;background:#f8fafb;border:1px solid #cbd3d8;border-radius:4px;font:11px "Cascadia Code",Consolas,monospace}.dependency b{color:#253038}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{min-width:0;background:#fff;border:1px solid #d8dee2;border-radius:6px;overflow:hidden}.card header{min-height:64px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f8fafb;border-bottom:1px solid #e4e8eb}.card h3{margin:0 0 6px;font-size:14px}.card code{display:block;color:#68757d;font-size:11px;overflow-wrap:anywhere}.camera-card{grid-column:span 2}.state{max-width:52%;padding:5px 8px;color:#8b3c37;background:#fff0ef;border-radius:3px;font:10px "Cascadia Code",Consolas,monospace;text-align:right}.state.ready{color:#087b71;background:#e8f7f4}.camera{position:relative;width:min(100%,900px);margin:auto;background:#111820;line-height:0;overflow:hidden}.camera video{display:block;width:100%;height:auto}.camera>p{min-height:280px;margin:0;display:grid;place-items:center;color:#aab4ba;font-size:13px;line-height:1.4}.face-box{position:absolute;border:2px solid #e06b65}.face-box.ready{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.ready span{background:#138b80}.card footer,.service-actions{display:flex;gap:9px;flex-wrap:wrap;padding:14px}.service-actions{border-bottom:1px solid #edf0f2}.service-card dl{margin:0;padding:0 15px}.service-card dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf0f2;font-size:12px}.service-card dt{color:#68757d}.service-card dd{margin:0;max-width:60%;font-family:"Cascadia Code",Consolas,monospace;overflow-wrap:anywhere;text-align:right}pre{max-height:180px;margin:0;padding:14px;overflow:auto;font:12px/1.55 "Cascadia Code",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.preview{min-height:210px;padding:12px;display:grid;place-items:center;background:#f5f7f8}.preview img{max-width:100%;max-height:260px;object-fit:contain;border:1px solid #d8dee2}.preview p{color:#77838b;font-size:12px;text-align:center}.quality-gates{padding:8px 15px}.quality-gates div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #edf0f2;font-size:12px}.quality-gates div:last-child{border-bottom:0}.quality-gates b{color:#9a443e;font:10px "Cascadia Code",Consolas,monospace}.quality-gates b.pass{color:#087b71}.activity{max-height:265px;overflow:auto}.activity div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:9px 13px;border-bottom:1px solid #edf0f2;font-size:12px}.activity time{color:#77838b;font-size:11px}.activity p{padding:8px 15px;color:#77838b;font-size:12px}@media(max-width:700px){.topbar,.heading{align-items:flex-start;flex-direction:column;gap:12px}.tags{justify-content:flex-start}.grid{grid-template-columns:1fr}.camera-card{grid-column:auto}.state{max-width:50%}.camera>p{min-height:200px}}
|
||||
@@ -0,0 +1,6 @@
|
||||
export async function loadConfig(): Promise<Record<string, any>> {
|
||||
const response = await fetch('./config.json', { cache: 'no-store' })
|
||||
if (!response.ok) throw new Error(`Unable to load config.json: ${response.status}`)
|
||||
return response.json()
|
||||
}
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,ts}'],
|
||||
theme: { extend: {} },
|
||||
plugins: []
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": false,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.vue"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
publicDir: 'public',
|
||||
build: { target: ['chrome74'] },
|
||||
resolve: { alias: { '@': '/src' } },
|
||||
plugins: [vue()],
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: { global: 'globalThis' },
|
||||
target: 'es2015',
|
||||
supported: { bigint: true }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user