Web için yüz stillendirme kılavuzu

MediaPipe Yüz Biçimlendirici görevi, bir resimdeki yüzlere yüz stili uygulamanızı sağlar. Bu görevi kullanarak çeşitli stillerde sanal avatarlar oluşturabilirsiniz.

Bu talimatlarda açıklanan kod örneğini şu adreste bulabilirsiniz: GitHub'a gidin. Özellikler, modeller ve yapılandırma seçenekleri hakkında daha fazla bilgi Bu görev hakkında daha fazla bilgi için Genel Bakış'ı inceleyin.

Kod örneği

Yüz Şekillendirici için örnek kod, bu özelliğin eksiksiz bir şekilde uygulanmasını sağlar. görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize Kendi yüz stili uygulamanızı geliştirmeye başlayın. Bu dosyaları görüntüleyebilir, çalıştırabilir Yüz Stilisti örneğini düzenle kodunuzu kullanarak emin olun.

Kurulum

Bu bölümde, geliştirme ortamınızı kurmaya yönelik temel adımlar açıklanmaktadır. çok özel bir çözüm olabilir. platform sürümü de dahil olmak üzere web ve JavaScript geliştirme ortamı Web için kurulum kılavuzuna bakın.

JavaScript paketleri

Yüz Stilisti kodu MediaPipe üzerinden @mediapipe/tasks-vision kullanılabilir NPM paketi. Daha fazla Kurulum bölümündeki talimatları uygulayarak bu kitaplıkları indirin. rehberini inceleyin.

Aşağıdaki komutu kullanarak gerekli paketleri NPM üzerinden yükleyebilirsiniz:

npm install @mediapipe/tasks-vision

Görev kodunu bir içerik yayınlama ağı (CDN) ile içe aktarmak istiyorsanız aşağıdaki kodu <head> bölümüne ekleyin ve etiketini ekleyin:

<!-- 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

MediaPipe Yüz Stilizatör görevi, bu yazılımla uyumlu olan eğitilmiş bir model gerektiriyor görevi görebilir. Yüz Şekillendirici için eğitilen modeller hakkında daha fazla bilgi için göreve genel bakış Modeller bölümü.

Bir model seçip indirin ve ardından bu modeli proje dizininizde depolayın:

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

Görevi oluşturma

Görevi hazırlarken Yüz Stilisti createFrom...() işlevlerinden birini kullanın. bir yöntem de vardır. createFromModelPath() işlevini göreli veya eğitilen model dosyasının mutlak yolu. Modeliniz zaten için createFromModelBuffer() yöntemini kullanabilirsiniz.

Aşağıdaki kod örneğinde, createFromOptions() işlevinin görevi ayarlayın. createFromOptions işlevi, Yapılandırma seçenekleri bulunan Yüz Stilisti.

Aşağıdaki kod, görevin özel seçenekler:

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"
      },
    });

Verileri hazırlama

Yüz Stililandırıcı, resimlerdeki yüzleri düzenleyen kişi tarafından desteklenen herhangi bir biçimde biçimlendirebilir emin olun. Bu görev, yeniden boyutlandırma, veri işleme, veri girişi değer normalleştirmesi hakkında daha fazla bilgi edinin.

Görevi çalıştırma

Yüz Oluşturucu, çıkarımları tetiklemek için stylize() yöntemini kullanır. Görev verileri işler, yüzlerin stilini düzeltmeye çalışır ve sonuçları raporlar. Yüz Biçimlendirici stylize() yöntemine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacığı.

Aşağıdaki kod, işlemin görev modeliyle nasıl yürütüldüğünü gösterir:

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

Sonuçları işleme ve görüntüleme

Yüz Stilisti, en yüksek stile sahip MPImage nesnesini döndürür. giriş görüntüsünde belirgin yüz.

Aşağıda, bu görevdeki çıkış verilerinin bir örneği gösterilmektedir:

Yukarıdaki çıktı, Renk çizimi uygulanarak oluşturulmuştur modelini aşağıdaki giriş resmine ekleyerek: