Web için yüz stillendirme kılavuzu

MediaPipe Yüz Stiliz Aracı görevi, bir resimdeki yüzlere yüz stillendirmeleri uygulamanıza olanak tanır. Bu görevi çeşitli stillerde sanal avatarlar oluşturmak için kullanabilirsiniz.

Bu talimatlarda açıklanan kod örneğine GitHub'dan ulaşabilirsiniz. Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi için Genel Bakış'a bakın.

Kod örneği

Yüz Stilisti için örnek kod, size referans olması açısından bu görevin JavaScript'te eksiksiz bir şekilde uygulanmasını sağlar. Bu kod, bu görevi test etmenize ve kendi yüz stili uygulamanızı oluşturmaya başlamanıza yardımcı olur. Yalnızca web tarayıcınızı kullanarak Yüz Stili Aracı örnek kodunu görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.

Kurulum

Bu bölümde, özellikle Yüz Stilisti'ni kullanmak için geliştirme ortamınızı ayarlamayla ilgili temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri de dahil olmak üzere web ve JavaScript geliştirme ortamınızı ayarlama hakkında genel bilgiler için Web için kurulum kılavuzuna bakın.

JavaScript paketleri

Yüz Stili Aracı kodu, MediaPipe @mediapipe/tasks-vision NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platform Kurulum kılavuzundaki talimatları uygulayarak bulabilir ve indirebilirsiniz.

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

npm install @mediapipe/tasks-vision

Görev kodunu bir içerik yayınlama ağı (CDN) hizmetiyle içe aktarmak istiyorsanız aşağıdaki kodu HTML dosyanızdaki <head> etiketine 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 Stilisti görevi, bu görevle uyumlu, eğitilmiş bir model gerektirir. Yüz Stilisti için eğitilmiş modellerle ilgili daha fazla bilgi için göreve genel bakış Modeller bölümüne bakın.

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

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

Görevi oluşturma

Görevi çıkarımlarda bulunmaya hazırlamak için Yüz Stilisti createFrom...() işlevlerinden birini kullanın. createFromModelPath() işlevini, eğitilen model dosyasına giden göreli veya mutlak bir yolla kullanın. Modeliniz belleğe zaten yüklenmişse createFromModelBuffer() yöntemini kullanabilirsiniz.

Aşağıdaki kod örneği, görevi ayarlamak için createFromOptions() işlevinin kullanımını gösterir. createFromOptions işlevi, yapılandırma seçenekleriyle Yüz Stil Aracı'nı özelleştirmenize olanak tanır.

Aşağıdaki kod, görevin özel seçeneklerle nasıl oluşturulacağını ve yapılandırılacağını gösterir:

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 Stilisti, resimlerdeki yüzleri ana makine tarayıcısının desteklediği herhangi bir biçimde biçimlendirebilir. Görev; yeniden boyutlandırma, rotasyon ve değer normalleştirmesi dahil olmak üzere veri girişi ön işlemesini de yönetir.

Görevi çalıştırma

Yüz Stilisti, çıkarımları tetiklemek için stylize() yöntemini kullanır. Görev, verileri işler, yüzleri biçimlendirmeye çalışır ve ardından sonuçları bildirir. Yüz Stilisti stylize() yöntemine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacığını engeller.

Aşağıdaki kod, işlemenin 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, giriş resmindeki en belirgin yüzün stilinin yer aldığı bir MPImage nesnesi döndürür.

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

Yukarıdaki çıkış, aşağıdaki giriş resmine Renk çizimi modeli uygulanarak oluşturulmuştur: