Menguji DApp Pengecaman Wajah ICP: Keputusan Akhir Akan Mengejutkan Anda

Beberapa tahun lalu adalah istimewa untuk model AI berasaskan pelayan terpusat seperti ChatGPT, Gemini Google, Copilot Microsoft, dll. Tidak syak lagi model AI sedemikian telah mengubah begitu banyak aspek. Tetapi sebaliknya, mereka mempunyai beberapa kelemahan. Mungkin, anda juga pernah mendengar tentang beberapa gangguan ChatGPT .

Model berasaskan pelayan berpusat berisiko besar untuk satu titik kegagalan. Tetapi kini, masa telah berubah. Teknologi Blockchain juga merevolusikan banyak bidang, termasuk kecerdasan buatan (AI).

Internet Computer Protocol (ICP) yang Dfinity bangunkan, sedang berusaha untuk mendesentralisasi AI dengan membolehkan aplikasi AI berjalan pada infrastruktur awan terdesentralisasi sepenuhnya. Perkara yang unik ialah, ICP membenarkan model dan perkhidmatan AI digunakan merentasi rangkaian pusat data bebas. Pendekatan desentralisasi semacam ini memastikan bahawa operasi AI adalah telus, tahan penapisan dan kurang terdedah kepada satu titik kegagalan.

Artikel ini berbeza dengan ujian praktikal DApp Pengecaman Wajah yang berdasarkan ICP. Kami akan menyemak cara desentralisasi AI berfungsi secara objektif dengan demonstrasi halus setiap langkah. Kami telah cuba untuk memecahkan konsep teknikal yang kompleks kepada tutorial yang mudah difahami jadi mari kita mulakan.

Keseluruhan proses pembangunan dan ujian projek telah dijalankan pada mesin berasaskan Windows, jadi kami mencipta subsistem Linux di sini kerana banyak alatan dan skrip pembangunan ICP dioptimumkan untuk persekitaran berasaskan Linux.

📥Prasyarat:

• Sistem Pengendalian : Windows dengan Windows Subsystem untuk Linux (WSL) dipasang. Sila rujuk panduan ini untuk pemasangan.

  
  

• Ilmu :

  • Pemahaman asas JavaScript , React.js , Rust dan WebAssembly .

  • Kebiasaan dengan konsep pembangunan web.

    
    

• Alatan :

  • DFX SDK (rangka kerja pembangunan ICP) .
  • Node.js dan npm.
  • Rust: Pasang rantai alat Rust.
  • Git: Anda memerlukannya untuk mengklon repositori. Sila pilih garis panduan mereka untuk memasangnya.
  • wasi2ic: Alat untuk menukar modul Wasm yang bergantung kepada WASI untuk dijalankan pada ICP.
  • wasm-opt: Pengoptimum WebAssembly.

📥Sediakan Persekitaran Pembangunan:

1. Buka terminal WSL anda, dan jalankan arahan berikut untuk memasang DFX:

 sh -ci "$(curl -fsSL https://smartcontracts.org/install.sh)"

👉Untuk mengesahkan pemasangan:

 dfx –version

2. Pasang Rust dengan menjalankan arahan berikut:

 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh source $HOME/.cargo/env

👉Untuk mengesahkan pemasangan, jalankan:

 rustc –version

3. Pasang Node.js dengan menjalankan arahan berikut:

 curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt install -y nodejs

👉Untuk mengesahkan pemasangan, jalankan:

 node -v npm -v

4. Pasang wasi2ic: Mula-mula mengklon repositori GitHub mereka.

 git clone https://github.com/wasm-forge/wasi2ic.git cd wasi2ic cargo install --path .

👉Untuk menyemak pemasangan, jalankan:

 echo $PATH wasi2ic –help

5. Pasang wasm-opt:

 cargo install wasm-opt

📥Klon Projek:

Kami menggunakan repositori GitHub projek untuk tujuan ujian kami. Anda boleh menyemak repositori mereka di sini .

1. Klon repositori dan navigasi ke projek pengecaman muka:

 git clone https://github.com/dfinity/examples.git cd examples/rust/face-recognition

📥Muat turun Model untuk Pengecaman Wajah

1. Muat turun model pengesanan muka:

Model pengesanan muka akan digunakan untuk mengesan wajah dalam imej. Jalankan:

 ./download-face-detection-model.sh

2. Muat turun model pengecaman muka:

Anda perlu mengeksport model dalam format ONNX menggunakan PyTorch dan facenet-pytorch . Mulakan dengan memasang perpustakaan Python ini:

 pip install torch facenet-pytorch onnx

3. Eksport model ONNX:

Dalam fail Python atau shell, jalankan yang berikut: Taip python3 dalam terminal kemudian jalankan kod berikut. Selepas pelaksanaan, taip exit().

 import torch import facenet_pytorch resnet = facenet_pytorch.InceptionResnetV1(pretrained='vggface2').eval() input = torch.randn(1, 3, 160, 160) torch.onnx.export(resnet, input, "face-recognition.onnx", verbose=False, opset_version=11)

Ini akan menjana fail face-recognition.onnx . Salin ke akar repositori anda.

📥Bina

Kini, tiba masanya untuk membina projek. Jalankan:

 dfx start --background dfx deploy

Jika semuanya berjalan dengan betul, anda boleh melihat URL Frontend dalam terminal.

📥Buat kanister, jalankan:

 dfx canister create backend

Anda boleh melihat mesej berikut dalam terminal.

👉Kini, anda boleh menyemak status hujung belakang kanister:

 dfx canister status backend

Anda boleh melihat sesuatu seperti ini di terminal.

📥Muat Naik Model

Oleh kerana model AI biasanya besar. Mereka tidak boleh dibenamkan terus ke dalam binari WebAssembly (Wasm) kontrak pintar. Sebaliknya, model ini perlu dimuat naik secara berasingan. Untuk mengendalikan ini, DecideAI membangunkan alat untuk memuat naik model secara berperingkat. Anda boleh menemui alat di sini: ic-file-uploader .

👉Untuk memasang alat, gunakan arahan berikut:

 cargo install ic-file-uploader

Setelah dipasang, anda boleh menggunakan skrip upload-models-to-canister.sh dengan menjalankan ./upload-models-to-canister.sh dalam terminal untuk memuat naik model. Skrip ini melakukan langkah-langkah berikut:

1. Kosongkan model AI sedia ada daripada kanister:

 dfx canister call backend clear_face_detection_model_bytes dfx canister call backend clear_face_recognition_model_bytes

2. Memuat naik model baharu secara berperingkat:

 ic-file-uploader backend append_face_detection_model_bytes version-RFB-320.onnx ic-file-uploader backend append_face_recognition_model_bytes face-recognition.onnx

3. Akhirnya, skrip menyediakan model yang dimuat naik:

 dfx canister call backend setup_models

Kini, anda boleh berinteraksi dengan Frontend dengan menggunakan URL yang anda terima dalam terminal semasa perintah dfx deploy (Rajah 1)

Sebaik sahaja anda memuat naik imej dengan mengklik pada logo ICP, cuba tambah nama seseorang dengan mengklik pada butang “ Tambah orang ” untuk melatih model.

Ia mengesan muka dengan tanda segi empat tepat automatik di muka. Sebaik sahaja anda menetapkan nama, ia memaparkan mesej penambahan yang berjaya seperti berikut:

AI mengingati nama yang anda tetapkan untuk wajah itu supaya anda boleh menguji sama ada ia mengesan wajah foto berbeza orang yang sama atau tidak. Di sini, gambar Nikola Tesla yang berbeza diambil. Untuk memuat naik Foto lain untuk pengesanan muka, muat semula halaman, dan kemudian klik pada pilihan " Kenali ". Jom tengok; ia telah berjaya mengenal pasti wajah Nikola Tesla dengan sedikit perbezaan daripada yang awal.

Di sini, foto Nikola Tesla yang dijana AI diserahkan kepada model, dan yang mengejutkan, ia telah mengesan wajah dengan tepat, mari lihat di sini:

Ia telah berjaya mengesahkan bahawa DApp Mengecam Wajah ICP berfungsi dengan sempurna kerana ia telah berjaya mengesan wajah Nikola Tesla. Anda boleh mencubanya sendiri.

Memandangkan ia adalah untuk tujuan ujian, UI dan ciri adalah terhad. Anda boleh menambah ciri dan perkhidmatan tambahan jika anda tergesa-gesa untuk membina dApp sedia pengeluaran pada ICP untuk tujuan pengecaman muka. Anda boleh mencuba ciri berikut dengan contoh kod. Sila ambil perhatian bahawa anda harus menambah atau menyesuaikan kod mengikut keperluan anda.

📥Berikut adalah beberapa petua untuk anda:

1. Tambah Pengesahan Pengguna dengan Identiti Internet

Jika anda menambahkan ciri ini pada dApp ini, hanya pengguna berdaftar yang boleh mengakses DApp. Berikut ialah cara anda boleh menambah pengesahan menggunakan Identiti Internet. Anda boleh menyepadukan Identiti Internet dengan menambahkan butang log masuk Identiti Internet pada halaman utama. Setelah pengguna log masuk, paparkan papan pemuka yang diperibadikan.

Cara Menambah:

👉Pasang kebergantungan Identiti Internet:

 npm install @dfinity/agent @dfinity/auth-client

👉Tambahkan kod berikut pada bahagian hadapan anda untuk mendayakan pengesahan:

 import { AuthClient } from "@dfinity/auth-client"; async function init() { const authClient = await AuthClient.create(); if (await authClient.isAuthenticated()) { // Display dashboard or personalized content } else { authClient.login({ identityProvider: "https://identity.ic0.app/#authorize", onSuccess: () => { // Once authenticated, display personalized features }, }); } } init();

👉Selepas log masuk, pengguna boleh melihat sejarah wajah yang dikenali atau data peribadi yang lain.

2. Muat Naik Imej dengan fungsi Seret dan seret dan lepas

Jadikan fungsi muat naik imej dan pengalaman lebih lancar dengan membenarkan pengguna menyeret dan melepaskan imej untuk pengesanan muka.

Cara Menambah :

👉Gunakan fungsi drag-and-drop HTML5:

 <div id="drop-area"> <p>Drag and drop an image here or click to select</p> <input type="file" id="file-input" hidden /> </div>

👉Tambah JavaScript untuk mengendalikan tindakan drag-and-drop:

 const dropArea = document.getElementById("drop-area"); dropArea.addEventListener("dragover", (event) => { event.preventDefault(); }); dropArea.addEventListener("drop", (event) => { event.preventDefault(); const files = event.dataTransfer.files; // Process the uploaded image });

👉Pastikan ia berintegrasi dengan lancar dengan fungsi pengesanan muka sedia ada anda.

3. Bar Kemajuan untuk Pengecaman Wajah

Ia akan menjadi ciri yang menarik untuk memaparkan bar kemajuan apabila imej dimuat naik untuk memaklumkan pengguna bahawa sistem sedang memproses imej.

Cara Menambah:

👉Gunakan bar kemajuan HTML yang mudah:

 <div id="progress-bar"> <div id="progress-fill" style="width: 0%;"></div> </div>

👉Kemas kini bar kemajuan secara dinamik semasa imej diproses:

 const progressFill = document.getElementById("progress-fill"); let progress = 0; const interval = setInterval(() => { progress += 10; progressFill.style.width = `${progress}%`; if (progress === 100) { clearInterval(interval); } }, 100); // Simulate progress every 100ms

4. Pemberitahuan untuk Keputusan Pengecaman Wajah

Anda boleh menambah ciri untuk memberikan pemberitahuan masa nyata sebaik sahaja pengecaman wajah selesai, sama ada melalui pemberitahuan modal atau roti bakar.

Cara Menambah :

👉Anda boleh menggunakan pustaka ringan seperti Pemberitahuan Toastr atau roti bakar tersuai.

 <div id="notification" class="hidden">Face Recognition Complete!</div>

👉Dalam JavaScript anda, tunjukkan pemberitahuan apabila bahagian belakang mengembalikan hasilnya:

 function showNotification(message) { const notification = document.getElementById("notification"); notification.innerHTML = message; notification.classList.remove("hidden"); setTimeout(() => { notification.classList.add("hidden"); }, 3000); // Hide notification after 3 seconds } // Call this after face recognition is done showNotification("Face detected and recognized!");

📥Langkah Terakhir: Bina Semula dan Pasang

Selepas melaksanakan ciri baharu ini:

👉Bina semula projek:

 dfx build

👉Deploy ke testnet: Ia adalah untuk menguji dahulu sebelum bergegas ke mainnet.

 dfx deploy --network ic

Kesimpulan:

Kami telah berjaya menguji DApp Mengecam Wajah pada ICP yang merupakan percubaan sebenar untuk mendesentralisasi AI (DeAI). Mengikut ujian kami, respons DApp adalah pantas dan pengesanan wajah adalah tepat. Infrastruktur unik ICP boleh membantu kami dalam melaksanakan tugas yang rumit seperti pengecaman muka tanpa bergantung pada sistem berpusat.

Ia bukan sahaja meningkatkan keselamatan dan privasi tetapi juga mempamerkan potensi untuk aplikasi AI (DeAI) terdesentralisasi berkembang pesat. Apabila ICP terus berkembang, keupayaan untuk menggunakan model besar dan melaksanakan inferens AI pada rantaian boleh membuka kemungkinan baharu untuk inovasi. Kita boleh mengharapkan AI terdesentralisasi menjadi pemain utama dalam penyelesaian yang boleh dipercayai dan berskala masa depan. Pembangun juga mempunyai peluang baharu untuk mencipta lebih banyak produk dan perkhidmatan pada ICP.