Interacțiune naturală cu utilizatorul la nivel de client web

Alexandru Păvăloi

 

Coordonator:

Conf. Dr. Sabin-Corneliu Buraga

Motivație

Interacțiunea naturală Om-Calculator este un subiect de cercetare cu un imens potențial pentru crearea de aplicații complet interactive în domenii precum robotică, smart-homes etc.

 

Aplicațiile web oferă interacțiune doar prin: mouse și tastatură.

PafcalJS

  • Detecție în timp real
  • Suport pentru gestul de click
  • Opțiune de personalizare
  • Exclusiv JavaScript ES5

PafcalJS

Premise:

  • Cameră Web
  • Haine contrastante
  • Mâneci lungi
  • Fundal contrastant
  • Persoane caucaziene

Procesul de detecție

7 etape ce transformă și filtrează imaginea camerei Web:

Procesul de detecție

Eliminarea fundalului

  1. Atenționăm utilizatorul să părăsească temporar spațiul camerei Web.
  2. Preluăm imagini sub formă de liste de valori în spațiul RGB.
  3. Creem o imagine de referință a fundalului.
  4. Determinăm dacă fundalul este prea dinamic.

Procesul de detecție

Eliminarea fundalului

Procesul de detecție

Detecția pielii

Filtrăm pixelii pielii folosind două praguri de culoare diferite, pentru spațiul RGB și cel HSV.

Complexitate liniară ce nu impactează procesarea în timp real.

R

G      >    15

B

Procesul de detecție

Detecția pielii

Procesul de detecție

Detecția feței

Dar, procesul anterior detectează atât pielea mâiniii cât și pe cea a feței.

 

Biblioteca JSFeat

  • oferă detecția feței utilizatorului
  • este  oferită sub licență MIT

Procesul de detecție

Detecția feței

Procesul de detecție

Dilatarea imaginii

Scop: umplerea eventualelor goluri din interiorul mâinii

 

Aplicăm operația morfologică de dilatare :

  • introduce noi pixeli în jurul pixelilor existenți
  • fiecare pixel e modificat independent de ceilalți -> O(n)

 

 

Procesul de detecție

Operații morfologice

Procesul de detecție

Eliminarea componentelor mici

Scop: filtrarea exclusivă a pixelilor mâinii eliminând zgomotul

 

Euristică proprie:

  • eliminăm toate componentele mai mici decât un prag
  • dimensiunea pragului influențează rezultatul
  • funcționează bine dacă pixelii mâinii sunt conectați între ei

Procesul de detecție

Eliminarea componentelor mici

Procesul de detecție

Înfășurătoarea convexă

Aflăm regiunea mâinii calculând înfășurătoarea convexă a acesteia.

 

Presupunere:

  • toți pixelii prezenți în imagine aparțin mâinii

Procesul de detecție

Înfășurătoarea convexă

Procesul de detecție

Diferențierea gesturilor

Am creat o metodă bazată pe proporțiile mâinii:

  • calculăm centrul înfășurătorii convexe
  • determinăm cele mai îndepărtate/apropiate puncte
  • raportul acestor distanțe ne indică gestul mâinii

Procesul de detecție

Diferențierea gesturilor

Comparație între cele două gesturi:

Optimizări

Timpul de procesare este esențial pentru utilizarea în timp real.

 

Metode de optimizare:

 

1 - Stocare economă sub formă de matrice rară

2 - Algoritm propriu pentru înfășurătoarea convexă

3 - Adaptarea ariei de căutare

Optimizări

Stocare economică

Pentru stocarea imaginilor binare am ales formatul CRS căci permite:

  • calcularea rapidă a coordonatelor unui punct știind indexul coloană
  • calcularea rapidă a indexului coloană știind coordonatele sale

Optimizări

Algoritm propriu pentru înfășurătoarea convexă

  • Algoritmii clasici oferă o complexitate medie de O(n * log n)
  • Bazându-ne pe modalitatea de stocare a pixelilor imaginii, am implementat un algoritm propriu cu o complexitate liniară.

Optimizări

Adaptarea zonei de căutare

În practică am observat că mâna utilizatorului se mișcă fluid și lent.

 

Obținem un timp mult mai bun restricționăm zona de căutare în funcție de locația mâinii din cadrul precedent.

Optimizări

Adaptarea zonei de căutare

Tehnologii utilizate

  • Javascript ES5
  • Librăria JSFeat
  • HTML 5
  • Web Workers

Tehnologii utilizate

Web Workers

Javascript este un limbaj single-threaded și asincron, deci procesările necesare detecției mâinii ar bloca interfața utilizatorului.

 

Web Worker, o modalitate de a rula cod Javascript independent de firul principal de execuție. Trimiterea imaginii și comunicarea rezultatelor se face printr-un sistem asincron de mesaje.

Tehnologii utilizate

Web Workers

Demo

Rezultate

  • Acuratețe: 80% în condiții ideale
  • Rată medie de 8 cadre pe secundă
  • Suport pentru 90% din browserele moderne.
  • Dimensiune: 600KB

Direcții viitoare

Această aplicație deschide drumul către o întreagă serie de abordări noi în scopul îmbunătățirii detecției:

 

  1. Adaptarea pragurilor de culoare a pielii în funcție de culoarea feței
  2. Utilizarea unei metode bazată pe margini pentru a detecta mâna
  3. Antrenarea unui clasificator Haar pentru o detecție sporită

Concluzie

  • Bibliotecă JS mică ca dimensiune și simplu de utilizat.
  • Control asupra aplicațiilor web în condițiile enunțate.
  • Gamă largă de configurare

 

  • Tehnicile utilizate împreună cu rezultatele obținute sunt un important punct de plecare pentru viitorii dezvoltatori.

Multumesc