Membina Pembuang Latar Belakang Dikuasakan AI dengan React dan Transformers.js

Pengalihan keluar latar belakang ialah tugas biasa dalam pemprosesan imej yang secara tradisinya memerlukan perisian desktop yang kompleks atau perkhidmatan berasaskan awan. Walau bagaimanapun, dengan kemajuan terkini dalam teknologi web dan model AI, kini mungkin untuk membina pengalih keluar latar belakang yang berkuasa yang berjalan sepenuhnya dalam penyemak imbas. Dalam tutorial ini, kami akan meneroka cara mencipta alat sedemikian menggunakan React, Transformers.js dan model AI yang canggih.

Cuba Alih Keluar Latar Belakang Sekarang!

Ciri-ciri Utama

• ? Pemprosesan sebelah pelanggan - tiada muat naik pelayan diperlukan
• ? Sokongan untuk berbilang model AI (RMBG-1.4 dan ModNet)
• ? Keupayaan pemprosesan kelompok
• ? Editor imej terbina dalam untuk pemprosesan pasca
• ? Berfokuskan privasi - semua pemprosesan berlaku secara setempat

Seni Bina Teknikal

Aplikasi ini dibina dengan beberapa komponen utama:

1. UI Depan: Bertindak balas dengan TypeScript untuk keselamatan jenis
2. Pemprosesan AI: Transformers.js untuk menjalankan model AI
3. Benang Pekerja: Pekerja Web untuk pemprosesan tidak menyekat
4. Pengurusan Negeri: React hook untuk pengurusan negeri tempatan

Butiran Pelaksanaan

Menyediakan Model

Kami menggunakan dua model berbeza untuk mengalih keluar latar belakang:

type ModelType = "briaai/RMBG-1.4" | "Xenova/modnet";

RMBG-1.4 ialah model disyorkan kami untuk kualiti yang lebih baik, manakala ModNet berfungsi sebagai pilihan alternatif. Kedua-dua model dimuatkan dan dijalankan sepenuhnya dalam penyemak imbas menggunakan Transformers.js.

Komponen Teras

Struktur komponen utama terdiri daripada tiga bidang utama:

1. Kawasan Muat Naik: Mengendalikan input fail dan pemilihan model
2. Kawasan Edit: Memaparkan imej yang diproses dengan keupayaan mengedit
3. Senarai Imej: Menunjukkan semua imej yang dimuat naik dan status pemprosesannya

Pelaksanaan Benang Pekerja

Untuk memastikan UI responsif semasa pemprosesan imej, kami menggunakan Pekerja Web:

const useTask = (onImageProcessed?: (id: string) => void) => {
  const [files, setFiles] = useState<FileWithMoreInfo[]>([]);

  const { worker, isModelLoading } = useWorker(
    (event: WorkerResponseMessageEvent) => {
      const { type, data, id, status } = event.data;

      switch (type) {
        case WorkerResponseTaskType.REMOVE_BACKGROUND_COMPLETE:
          // Update UI with processed image
          break;
      }
    }
  );

  // ... task management logic
};

Memproses Saluran Paip

1. Pengguna memuat naik imej
2. Imej beratur untuk diproses
3. Benang pekerja memuatkan model AI yang dipilih
4. Penyingkiran latar belakang dilakukan
5. Imej yang diproses dipaparkan dengan latar belakang lutsinar

Ciri Pasca Pemprosesan

Selepas dialih keluar latar belakang, pengguna boleh:

• Putar imej
• Tambah teks atau pelekat
• Gunakan penapis
• Muat turun imej individu atau muat turun kelompok sebagai ZIP

Pertimbangan Prestasi

• Model dicache selepas dimuatkan pertama
• Pemprosesan berlaku dalam ketulan untuk mengelakkan pembekuan UI
• Imej diproses secara berurutan dalam muat naik kelompok
• Pratonton lakaran kecil dijana dengan cekap

Penambahbaikan Masa Depan

1. Sokongan untuk lebih banyak model AI
2. Ciri penyuntingan lanjutan
3. Pilihan penggantian latar belakang
4. Pengoptimuman pemprosesan kelompok
5. Eksport dalam format berbeza

Kesimpulan

Membina pengalih keluar latar belakang berasaskan pelayar menunjukkan sejauh mana kemajuan teknologi web. Dengan memanfaatkan rangka kerja moden dan model AI, kami boleh mencipta alat pemprosesan imej yang berkuasa yang berfungsi sepenuhnya pada bahagian pelanggan, memastikan prestasi dan privasi.

Kod sumber lengkap mempamerkan cara untuk menstrukturkan aplikasi sedemikian, mengendalikan tugas pemprosesan imej yang kompleks dan memberikan pengalaman pengguna yang lancar. Jangan ragu untuk meneroka dan menyesuaikan pelaksanaan ini untuk projek anda sendiri!

Sumber

• Dokumentasi Transformers.js
• Model RMBG-1.4
• Dokumentasi ModNet

Atas ialah kandungan terperinci Membina Pembuang Latar Belakang Dikuasakan AI dengan React dan Transformers.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!