Udhëzues për stilizimin e fytyrës për ueb

Detyra MediaPipe Face Stylizer ju lejon të aplikoni stilizime të fytyrës tek fytyrat në një imazh. Ju mund ta përdorni këtë detyrë për të krijuar avatarë virtualë në stile të ndryshme.

Shembulli i kodit i përshkruar në këto udhëzime është i disponueshëm në GitHub . Për më shumë informacion rreth aftësive, modeleve dhe opsioneve të konfigurimit të kësaj detyre, shihni Përmbledhjen .

Shembull kodi

Shembulli i kodit për Face Stylizer ofron një zbatim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod ju ndihmon të testoni këtë detyrë dhe të filloni ndërtimin e aplikacionit tuaj të stilizimit të fytyrës. Mund të shikoni, ekzekutoni dhe modifikoni kodin shembull të Face Stylizer duke përdorur vetëm shfletuesin tuaj të internetit.

Konfigurimi

Ky seksion përshkruan hapat kryesorë për konfigurimin e mjedisit tuaj të zhvillimit posaçërisht për të përdorur Face Stylizer. Për informacion të përgjithshëm mbi konfigurimin e mjedisit tuaj të zhvillimit të uebit dhe JavaScript, duke përfshirë kërkesat e versionit të platformës, shihni udhëzuesin e konfigurimit për ueb .

Paketat JavaScript

Kodi Face Stylizer ofrohet përmes paketës MediaPipe @mediapipe/tasks-vision NPM . Ju mund t'i gjeni dhe shkarkoni këto biblioteka duke ndjekur udhëzimet në udhëzuesin e konfigurimit të platformës.

Ju mund të instaloni paketat e kërkuara përmes NPM duke përdorur komandën e mëposhtme:

npm install @mediapipe/tasks-vision

Nëse dëshironi të importoni kodin e detyrës me një shërbim të rrjetit të shpërndarjes së përmbajtjes (CDN), shtoni kodin e mëposhtëm në etiketën <head> në skedarin tuaj HTML:

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

Detyra MediaPipe Face Stylizer kërkon një model të trajnuar që është në përputhje me këtë detyrë. Për më shumë informacion mbi modelet e disponueshme të trajnuara për Face Stylizer, shihni seksionin Modelet e përmbledhjes së detyrave.

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni në direktorinë e projektit tuaj:

<dev-project-root>/app/shared/models/

Krijo detyrën

Përdorni një nga funksionet Face Stylizer createFrom...() për të përgatitur detyrën për ekzekutimin e konkluzioneve. Përdorni funksionin createFromModelPath() me një shteg relative ose absolute drejt skedarit të modelit të trajnuar. Nëse modeli juaj tashmë është i ngarkuar në memorie, mund të përdorni metodën createFromModelBuffer() .

Shembulli i kodit më poshtë tregon përdorimin e funksionit createFromOptions() për të vendosur detyrën. Funksioni createFromOptions ju lejon të personalizoni stilizuesin e fytyrës me opsionet e konfigurimit.

Kodi i mëposhtëm tregon se si të ndërtoni dhe konfiguroni detyrën me opsione të personalizuara:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

Përgatitni të dhënat

Face Stylizer mund të stilizojë fytyrat në imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra trajton gjithashtu parapërpunimin e hyrjes së të dhënave, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerës.

Drejtoni detyrën

Stilizuesi i fytyrës përdor metodën stylize() për të nxjerrë konkluzione. Detyra përpunon të dhënat, përpiqet të stilizojë fytyrat dhe më pas raporton rezultatet. Thirrjet në metodën Face Stylizer stylize() ekzekutohen në mënyrë sinkronike dhe bllokojnë lidhjen e ndërfaqes së përdoruesit.

Kodi i mëposhtëm tregon se si kryhet përpunimi me modelin e detyrës:

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

Trajtoni dhe shfaqni rezultatet

Stilizuesi i fytyrës kthen një objekt MPImage me një stilizim të fytyrës më të spikatur brenda imazhit të hyrjes.

Më poshtë tregon një shembull të të dhënave dalëse nga kjo detyrë:

Një pamje nga afër e krijuar e një gruaje të vizatuar në stilin e skicës me laps dhe shënues.

Dalja e mësipërme u krijua duke aplikuar modelin e skicës me ngjyra në imazhin e mëposhtëm hyrës:

Fotografia e gruas imazhi i së cilës është përdorur për të gjeneruar rezultatin e mëparshëm