৩ সহজ ধাপে দ্রুত ARKit Smile-Tracking অ্যাপ তৈরি করুন

ARKit ভয়ঙ্কর লাগতে পারে কিন্তু এটি তত কঠিন নয় যদি আপনার ইতিমধ্যে iOS অ্যাপ বানানোর বেসিক অভিজ্ঞতা থাকে।

আমি লার্ন-বাই-ডুইং টাইপের, তাই ARKit নিয়ে এক্সপেরিমেন্ট করছি, বেসিক অ্যাপ বানিয়ে এর সাথে পরিচিত হওয়ার জন্য। এই পোস্টে, আমি একটি সিম্পল ফেস ট্র্যাকিং অ্যাপ বানিয়ে যা শিখলাম সেটি রিভিউ করব।

এটি ৩ পার্টে করব:

1. Initial Setup → প্রথমে ক্যামেরা পারমিশন এবং ডিভাইস ARKit সাপোর্ট করে কিনা নিশ্চিত করুন।
2. Smile tracking → ARKit-এ স্মাইল ট্র্যাকিং শুরু করুন। সম্ভবত আপনি এর জন্য এখানে আছেন।
3. User Interface → আমাদের অ্যাপের UI যোগ করুন যা স্মাইল সাপেক্ষে রিয়াক্ট করবে।

এই লেখা লেখা পর্যন্ত, Xcode সিমুলেটর ফ্রন্ট ফেসিং ক্যামেরা সাপোর্ট করে না তাই অ্যাপ রান করতে একটি রিয়েল ডিভাইস দরকার। আপনার ডিভাইসে TrueDepth ক্যামেরা থাকতে হবে (iPhone X বা নয়া কোনো মডেল চলে)।

অবশেষে, আমার কপি পেস্ট ক্লাবের সদস্যদের জন্য, সকল কোড GitHub-এ উপলব্ধ।

Initial Setup

Xcode খুলুন এবং "SmileTracker" (অথবা আপনার পছন্দের নাম) নামে একটি নতুন প্রজেক্ট তৈরি করুন।

ফেস ট্র্যাকিং-এ যাওয়ার আগে, আমাদের দুটি কাজ করতে হবে:

1. নিশ্চিত করুন আপনার ডিভাইস ARKit সাপোর্ট করে
2. আপনার ডিভাইসের ক্যামেরা অ্যাক্সেসের পারমিশন নিন

আপনার নতুন প্রজেক্টে, ViewController.swift খুলুন। ফাইলটার টপে, import UIKit-এর নিচে, এই লাইন যোগ করুন: import ARKit। এটি আমাদের Apple-এর সব গুডি অ্যাক্সেস দেবে যাতে ফেস ট্র্যাকিং সুপার ইজি হয়।

এখন viewDidLoad-এর ভিতরে নিচের কোড যোগ করুন:

guard ARFaceTrackingConfiguration.isSupported else { fatalError("Device does not support face tracking") }

ARFaceTrackingConfiguration.isSupported একটি বুলিয়ান যা true হবে যদি অ্যাপ রান করা ডিভাইস ফেস ট্র্যাকিং সাপোর্ট করে এবং false যদি না করে। এই কেসে, যদি ডিভাইস ফেস ট্র্যাকিং সাপোর্ট না করে, আমরা একটি ফেটাল এরর দিয়ে অ্যাপ ক্র্যাশ করব।

পরবর্তী, ক্যামেরা ব্যবহারের পারমিশন নিই। আমাদের guard স্টেটমেন্টের নিচে viewDidLoad-এ নিচের কোড যোগ করুন:

AVCaptureDevice.requestAccess(for: AVMediaType.video) { granted in if (granted) { Dispatch.main.sync { // এই ফাংশনটি এক মিনিটে বাস্তবায়ন করব self.setupSmileTracker() } } else { fatalError("User did not grant camera permission!") } }

এখানে আমরা ডিভাইসকে ক্যামেরা পারমিশন অনুরোধ করছি। যদি ইউজার পারমিশন দেন, আমরা স্মাইল ট্র্যাকিং সেটআপ করার ফাংশনটি রান করব (এরর নিয়ে চিন্তা করবেন না, এক মিনিটে বাস্তবায়ন করব)।

আমরা ফাংশনটিকে Dispatch.main.sync দিয়ে র‍্যাপ করেছি কারণ এই ফাংশনে UI এলিমেন্ট যোগ করব, যা শুধু মেইন থ্রেডে করা যায়।

আমাদের Info.plist-এ একটি Camera Usage Description যোগ করতে হবে। Info.plist খুলুন এবং একটি নতুন সারি যোগ করুন (লাস্ট সারি হাইলাইট করে enter চাপলে হবে)।

আপনি যা সারি তৈরি করলেন, সেখানে Privacy — Camera Usage Description Key কলামে যোগ করুন এবং নিশ্চিত করুন Type কলামটি string-এ সেট আছে। Value কলাম খালি রাখুন বা ইউজারকে কীভাবে ক্যামেরা ব্যবহার করবেন তা ব্যাখ্যা করার একটি মেসেজ যোগ করুন।

আপনার Info.plist এখন এভাবে দেখাবে:

আপনি যদি এতক্ষণ অ্যাপ টেস্ট করতে চান, তবে setupSmileTracker() কল করার লাইনটি কমেন্ট আউট করুন। বাদে আনকমেন্ট করলে ভুলবেন না।

আপনি যদি এখন অ্যাপ রান করেন, তবে ক্যামেরা পারমিশন ইনেবল করার একটি পপআপ দেখবেন। যদি আপনি না বলেন তবে অ্যাপ সেটিংসে যেতে হবে সেই পারমিশন ইনেবল করার জন্য অ্যাপ রান করার জন্য।

যদি অ্যাপ ক্র্যাশ করে, কনসোল চেক করুন আমাদের দুটি এরর মেসেজের যেকোনো একটা দেখতে পাবেন কী মিস হয়েছে।

Smile tracking

ViewController.swift খুলুন এবং ViewController-এর টপে নিচের ভেরিয়েবল যোগ করুন:

class ViewController: UIViewController { let sceneView = ARSCNView() override func viewDidLoad() {...} }

ARSCNView একটি ARSession দিয়ে সজ্জিত যা আপনার iPhone AR এক্সপেরিয়েন্স কোঅর্ডিনেট করতে ব্যবহার করে। আমরা sceneView-এর ARSession ব্যবহার করব ফ্রন্ট ফেসিং ক্যামেরার মাধ্যমে ইউজারের ফেস বিশ্লেষণ করতে।

viewDidLoad-এর নিচে এই ফাংশনটি আপনার ফাইলে যোগ করুন:

func setupSmileTracker() { let configuration = ARFaceTrackingConfiguration() sceneView.session.run(configuration) sceneView.delegate = self view.addSubview(sceneView) }

এখানে আমরা ফেস ট্র্যাকিং হ্যান্ডেল করার একটি কনফিগারেশন তৈরি করলাম এবং এটি ব্যবহার করে আমাদের sceneView-এর ARSession রান করলাম।

তারপর sceneView-এর ডেলিগেটকে self সেট করলাম এবং ভিউতে অ্যাড করলাম।

Xcode আপনাকে বলবে একটি সমস্যা আছে কারণ ViewController ARSCNViewDelegate কনফর্ম করে না। ফাইলটার টপে যেখানে ViewController ডিক্লেয়ার করা আছে সেখানে যান এবং লাইনটি নিচের মত পরিবর্তন করুন:

class ViewController: ViewController, ARSCNViewDelegate { ... }

এখন আপনার ViewController ক্লাসে setupSmileTracker-এ এই ARSCNViewDelegate ফাংশনটি যোগ করুন:

func renderer(_renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) { ... }

renderer প্রতিবার আমাদের সিন আপডেট হলে চলে এবং আমাদের ইউজারের ফেসের সাথে সংশ্লিষ্ট ARAnchor দেয়।

ফেস ট্র্যাকিং এক্সপেরিয়েন্স সহজ করার জন্য, Apple অটোমেটিক্যালি একটি ARFaceAnchor তৈরি করে এবং আমাদের সেশনে অ্যাড করে যখন আমরা একটি ARFacetrackingConfiguration ব্যবহার করে সেশন রান করি। এই ARFaceAnchor তারপর renderer-এ ARAnchor হিসেবে পাস করা হয়।

renderer-এ নিচের কোড যোগ করুন:

func renderer(_renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {   // 1 guard let faceAnchor = anchor as? ARFaceAnchor else { return } // 2 let leftSmileValue = faceAnchor.blendshapes[.mouthSmileLeft] as! CGFloat let rightSmileValue = faceAnchor.blendShapes[.mouthSmileRight] as! CGFloat // 3 print(leftSmileValue, rightSmileValue) }

এই ফাংশনের ভিতরে অনেক কিছু হচ্ছে তাই আমি ধাপগুলো নম্বর দিয়েছি (Ray Wenderlich শৈলীতে)।

ধাপ ১-এ আমরা ARAnchor-কে ARFaceAnchor-এ কনভার্ট করি এবং faceAnchor ভেরিয়েবলে অ্যাসাইন করি।

ARFaceAnchor আমাদের ট্র্যাক করা ফেসের বর্তমান পজিশন এবং অরিয়েন্টেশন, টপোলজি, এবং ফেসিয়াল এক্সপ্রেশন সম্পর্কিত তথ্য ধারণ করে।

ARFaceAnchor ফেসিয়াল এক্সপ্রেশন সম্পর্কিত তথ্য তার blendShapes ভেরিয়েবলে সংরক্ষণ করে। blendShapes একটি ডিকশনারি যা বিভিন্ন ফেসিয়াল ফিচারের কোইফিশিয়েন্ট সংরক্ষণ করে। আপনি আগ্রহী হলে, Apple-এর ডকুমেন্টেশনে ফেসিয়াল ফিচারosof ফুল লিস্ট চেক করুন। (হিন্ট: ফ্রাউন ট্র্যাকিং যোগ করতে চাইলে সেটা এখানে পাবেন।)

ধাপ ২-এ, আমরা faceAnchor.blendShapes ব্যবহার করে ইউজারের মুখের বাম এবং ডান দিক কতটুকু হেসেছে তা বোঝানো CGFloat পাই mouthSmileLeft এবং mouthSmileRight কি ব্যবহার করে।

অবশেষে, ধাপ ৩ শুধু দুটি ভ্যালু প্রিন্ট করে যাতে নিশ্চিত হইতে পারি এটি ঠিকমতো কাজ করছে ?।

এই পয়েন্টে আপনার একটি অ্যাপ থাকা উচিত যা:

• ইউজার থেকে ক্যামেরা এবং ফেস ট্র্যাকিং পারমিশন নেয়
• ARKit ব্যবহার করে ইউজারের ফেসিয়াল এক্সপ্রেশন ট্র্যাক করে
• ইউজারের মুখের বাম এবং ডান দিক কতটুকু হেসেছে তা কনসোলে প্রিন্ট করে

আমরা অনেক প্রগতি করেছি, তাই এক সেকেন্ড নেই সব ঠিকমতো রান হচ্ছে কিনা চেক করি।

যখন আপনি প্রথমবার অ্যাপ রান করবেন, ক্যামেরা পারমিশন দেবেন কিনা पूछा যাবে। হ্যাঁ বলুন।

তারপর আপনি একটি ব্ল্যাঙ্ক স্ক্রিন দেখবেন, কিন্তু কনসোলে CGFloat ভ্যালু প্রিন্ট হওয়া শুরু হবে (হয়তো ছোট একটি 딜ে এর পর)।

যখন আপনি আপনার ফোনে হেসবেন, প্রিন্ট হওয়া ভ্যালুগুলো বাড়তে থাকবে। আপনি যত বেশি হেসবেন, নাম্বারগুলো তত বেশি হবে।

যদি সঠিকভাবে কাজ করে, অভিনন্দন ?! যদি এরর হয়, ডাবল চেক করুন আপনার ডিভাইস ফেস ট্র্যাকিং সাপোর্ট করে কিনা এবং ক্যামেরা পারমিশন অন আছে কিনা। আপনি যদি শুরুর থেকে এই রাইটআপ ফলো করেন, কনসোল উভয় কেসে এরর প্রিন্ট করবে।

User interface

আমরা ফেস ট্র্যাক করছি, এখন স্মাইল সাপেক্ষে রিয়াক্ট করার UI বানাই।

প্রথমে একটি নতুন UILabel যেটা smileLabel নামে, ফাইলটার টপে sceneView-এর ঠিক নিচে যোগ করুন।

class ViewController: UIViewController { let sceneView = ARSCNView() let smileLabel = UILabel() ... }

এটি वो ভিউ যেটা ইউজারের ফেসিয়াল এক্সপ্রেশনের সাথে রিয়াক্ট করবে।

আপনার setupSmileTracker ফাংশনের তলে নিচের কোড যোগ করুন:

smileLabel.text = "?"smileLabel.font = UIFont.systemFont(ofSize: 150) view.addSubview(smileLabel) // সেট কনস্ট্রেইন্টস smileLabel.translatesAutoresizingMaskIntoConstraints = false smileLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true smileLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

এখানে, আমরা আমাদের smileLabel-এর বেসিক UI প্রোপার্টি যোগ করছি এবং এর কনস্ট্রেইন্ট সেট করছি যাতে এটি স্ক্রিনের মাঝখানে থাকে। এখন অ্যাপ রান করলে আপনি স্ক্রিনের মাঝখানে একটি বিশাল ? ইমোজি দেখবেন।

ইমোজি দেখার পর, আপনার ViewController-এ নিচের ফাংশনটি যোগ করুন:

func handleSmile(leftValue: CGFloat, rightValue: CGFloat) { let smileValue = (leftValue + rightValue)/2.0 switch smileValue { case _ where smileValue > 0.5: smileLabel.text = "?" case _ where smileValue > 0.2: smileLabel.text = "?" default: smileLabel.text = "?" } } 

এই ফাংশন আমাদের smileLabel-এর ইমোজি পরিবর্তন করবে ইউজার কতটুকু হেসেছে তার ওপর নির্ভর করে। আমরা smileValue ক্যালকুলেট করি বাম এবং ডান স্মাইল ভ্যালুর গড় নেই (খুব সায়েন্টিফিক, আমি জানি)।

এই ভ্যালুটাকে সুইচ স্টেটমেন্টে প্লাগ করুন, এবং ইউজার যত বেশি হেসবেন আমাদের ইমোজি তত খুশি হবে।

অবশেষে, আমাদের renderer ফাংশনে ফিরে যান এবং নিচের কোড যোগ করুন বাম এবং ডান স্মাইল ভ্যালু handleSmile-এ প্লাগ ইন করতে:

DispatchQueue.main.async { self.handleSmile(leftValue: leftSmileValue, rightValue: rightSmileValue) }

আবার, আমরা DispatchQueue ব্যবহার করছি কারণ আমরা UI-এ পরিবর্তন আনছি, যা মেইন থ্রেডে করা উচিত।

যখন আপনি অ্যাপ রান করবেন, আপনি দেখবেন ইমোজি পরিবর্তন হচ্ছে আপনি কতটুকু হেসেছেন তার ওপর নির্ভর করে।

নিচের GIF-এ আমার ফেস যোগ করেছি যাতে আপনি ক্যামেরা আউটপুট সহ এটি কীভাবে কাজ করে তা দেখতে পারেন ইমোজির সাথে।

আপনার অ্যাপে ক্যামেরা আউটপুট থাকবে না, কিন্তু আপনি আমাদের ARSCNView, sceneView, সুপারভিউতে যোগ করে এবং ডাইমেনশন দিয়ে এটি যোগ করতে পারেন।

Wrapping up

আশা করি এই পোস্ট আপনাকে ARKit-এ অ্যাপ তৈরি শুরু করতে সাহায্য করল।

আপনি যদি এই অ্যাপটি আরও এক্সটেন্ড করতে চান, উপরে উল্লেখ করা লিস্ট চেক করুন যেটা আপনি ট্র্যাক করতে পারেন এমন অন্যান্য ফেসিয়াল ফিচারের। আমি ফ্রাউন চেক করার জন্য এক্সটেন্ড করার একটি হিন্ট ছেড়ে দিয়েছি।

ফিরে আসুন এবং আপনার নিজে বানানো যেকোনো কুল প্রজেক্ট নিয়ে কমেন্ট করুন, আমি এখনও এই জিনিসগুলোতে পা রেখে শিখছি তাই আরও কমপ্লেক্স অ্যাপ দেখতে একসাইটেড।

এই অ্যাপের সকল কোড আমি GitHub-এ পোস্ট করেছি ফিডব্যাক এবং প্রশ্নের জন্য। পড়ার জন্য ধন্যবাদ এবং শুভকামনা!

পড়ার জন্য ধন্যবাদ! আপনি এই গল্প পছন্দ করলে টুইটারে ফলো করুন যেখানে আমি লিখছি এমন গল্পের আপডেট এবং আমি কী করছি সেটি পোস্ট করি।