VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework

2022.10  2022.10〜   Retty登壇用テンプレート   Retty株式会社　名前なまえ   Copyright ©2025 Retty,
Inc.   Copyright ©2025 Retty, Inc.   VisionFrameworkで実現する - プライバシーに配慮した   「顔ぼかし」機能   2025/09/20 iOSDC Japan 2025  Retty株式会社アプリチームリードエンジニア   今泉智博 (@imaizume)  

Inc.   Copyright ©2025 Retty, Inc.   iOS 11から登場したApple公式の画像解析フレームワーク    • ML/画像処理の知識不要で様々な解析が可能  • OSバンドル・オンデバイスのモデルを使用  • シンプルなインターフェイス  • 利用・実装における追加料金不要    (認識技術の基盤になるのはCore ML)  VisionFrameworkの概要   8 

Inc.   Copyright ©2025 Retty, Inc.   補足: VFで可能な画像解析の例   9  2025/09時点で31種類   • 顔認識 ← これを使用   • 物体認識  • テキスト検出  • 水平検出  • 軌道検出  • 体の姿勢  • 画像の審美的評価  • etc…  https://developer.apple.com/jp/machine-learning/api/

Inc.   Copyright ©2025 Retty, Inc.   解析内容に応じたRequest/Observationを使用 • Request: 画像への質問  • Observation: 質問への回答  • Handler: コールバック    顔認識の場合  • VNDetectFaceRectanglesRequest • VNFaceObservation • VNImageRequestHandler VF APIの呼び出し方   13  Vision Framework Core ML App Request Observation

Inc.   Copyright ©2025 Retty, Inc.   • iOS17まで: Objective-C + Swiftベース  • iOS18から: Swiftベース    インターフェースがシンプルになりConcurrencyにも対応   補足: iOS18からのVisionFramework   14  https://developer.apple.com/documentation/vision

Inc.   Copyright ©2025 Retty, Inc.   let request = VNDetectFaceRectanglesRequest() request.preferBackgroundProcessing = true let request = DetectFaceRectanglesRequest() FaceRecognitionManager   顔認識Requestの作成  15  iOS 18 iOS 17

Inc.   Copyright ©2025 Retty, Inc.   let request = VNDetectFaceRectanglesRequest() request.preferBackgroundProcessing = true let request = DetectFaceRectanglesRequest() FaceRecognitionManager   顔認識Requestの作成  16  iOS 18 iOS 17 バックグラウンドスレッドで実行処理中に UIをブロックしない

Inc.   Copyright ©2025 Retty, Inc.   FaceRecognitionManager   EXIFに含まれる画像の向きを取得・保持  17  let orientation: CGImagePropertyOrientation = switch image.imageOrientation { case .up: .up case .down: .down case .left: .left … @unknown default: .up }

Inc.   Copyright ©2025 Retty, Inc.   FaceRecognitionManager   Handler(コールバック)から顔領域を受け取る  18  let handler = VNImageRequestHandler(cgImage: cgImage, orientation: orientation) return try await withTaskCancellationHandler { try Task.checkCancellation() return try await withCheckedThrowingContinuation { continuation in do { try handler.perform([request]) continuation.resume( returning: (request.results ?? []).map { $0.boundingBox } ) } catch { continuation.resume(throwing: error) } } } onCancel: { request.cancel() } iOS 17

Inc.   Copyright ©2025 Retty, Inc.   FaceRecognitionManager   Handler(コールバック)から顔領域を受け取る  19  let handler = VNImageRequestHandler(cgImage: cgImage, orientation: orientation) return try await withTaskCancellationHandler { try Task.checkCancellation() return try await withCheckedThrowingContinuation { continuation in do { try handler.perform([request]) continuation.resume( returning: (request.results ?? []).map { $0.boundingBox } // $0.confidence ) } catch { continuation.resume(throwing: error) } } } onCancel: { request.cancel() } Observationから得られる情報 • boundingBox: 特定した領域 • confidence: 信頼度画像の向きを指定してリクエスト iOS 17

Inc.   Copyright ©2025 Retty, Inc.   iOS18以降で使えるRequest   20  let request = DetectFaceRectanglesRequest() return try await request .perform(on: cgImage, orientation: orientation) .map { $0.boundingBox.cgRect } • Handlerが不要になりより簡潔に  • 全体的に命名が変更  let request = VNDetectFaceRectanglesRequest() let handler = VNImageRequestHandler( cgImage: cgImage, orientation: orientation ) try await withTaskCancellationHandler { try Task.checkCancellation() return try await withCheckedThrowingContinuation { c in do { try handler.perform([request]) c.resume(returning: request.results) } catch { c.resume(throwing: error) } } } onCancel: { request.cancel() } iOS 18 iOS 17

Inc.   Copyright ©2025 Retty, Inc.   • 通常: 左上を原点とし、両端が整数  • Vision: 左下を原点とし、両端が1  • 座標系とサイズ変換クラスを使用  VisionFrameworkでの座標系   22  0.42, 0.51 public func VNImageRectForNormalizedRect( _ normalizedRect: CGRect, _ imageWidth: Int, _ imageHeight: Int ) -> CGRect iOS 17

Inc.   Copyright ©2025 Retty, Inc.   ImageBlurProcessor   23  guard let cgImage = originalImage.cgImage else { throw ErrorType.invalidImage } for blurFrame in blurFrames { let normalizedRect = VNImageRectForNormalizedRect( blurFlame, Int(cgImage.width), Int(cgImage.height) ) … } 顔の座標・領域を元画像の座標系に変換  元画像の座標系・大きさに変換

Inc.   Copyright ©2025 Retty, Inc.   非同期処理・Request実行・座標変換をまとめて短く  iOS18以降はさらにシンプルに   24  @available(iOS 18.0, *) private func performDetectionRequest( cgImage: CGImage, orientation: CGImagePropertyOrientation ) async throws -> [CGRect] { let request = DetectFaceRectanglesRequest() let size: CGSize = .init(width: Int(cgImage.width), height: Int(cgImage.height)) return try await request .perform(on: cgImage, orientation: orientation) .map { $0.boundingBox.toImageCoordinates(size, origin: .upperLeft) } } 指定のサイズ x 原点に変換した CGRectに iOS 18

Inc.   Copyright ©2025 Retty, Inc.   元写真を一定幅でピクセル化  ImageBlurProcessor   26  let pixelateFilter = CIFilter(name: "CIPixellate") pixelateFilter?.setValue(ciImage, forKey: kCIInputImageKey) pixelateFilter?.setValue( max(ciImage.extent.width, ciImage.extent.height) / 60.0, forKey: kCIInputScaleKey ) 今回は長辺の 60分の1でピクセル化

Inc.   Copyright ©2025 Retty, Inc.   円形グラデーションのマスク用領域を作成    ImageBlurProcessor   27  let centerX = normalizedRect.midX let centerY = normalizedRect.midY let size = normalizedRect.size let radius = min(size.width, size.height) / 1.5 let radialGradient = CIFilter(name: "CIRadialGradient") radialGradient?.setValue(radius * 0.8, forKey: "inputRadius0") radialGradient?.setValue(radius * 1.1, forKey: "inputRadius1") radialGradient?.setValue(CIColor(red: 0, green: 1, blue: 0, alpha: 1), forKey: "inputColor0") radialGradient?.setValue(CIColor(red: 0, green: 0, blue: 0, alpha: 0), forKey: "inputColor1") radialGradient?.setValue(CIVector(x: centerX, y: centerY), forKey: kCIInputCenterKey) let circleImage = radialGradient?.outputImage?.cropped(to: ciImage.extent) マスク用のため指定する色は任意顔領域より若干小さめの円を作成

Inc.   Copyright ©2025 Retty, Inc.   画像の合成   28  let composite = CIFilter(name: "CIBlendWithMask") composite?.setValue(pixelate?.outputImage, forKey: kCIInputImageKey) // ピクセル画像 composite?.setValue(maskImage, forKey: kCIInputMaskImageKey) // マスク画像 composite?.setValue(ciImage, forKey: kCIInputBackgroundImageKey) // 元画像 guard let output = composite?.outputImage else { throw ErrorType.invalidCompositeResult } guard let cgImage = CIContext().createCGImage(output, from: output.extent) else { throw ErrorType.invalidCGImageResult } return UIImage(cgImage: cgImage, scale: 1, orientation: originalImage.imageOrientation) マスク画像ピクセル画像元画像合成後

Inc.   Copyright ©2025 Retty, Inc.   データの保持   • 元画像とぼかし画像・顔領域を個別に保持  • アップロードまでは再編集可能 & VFへのリクエスト数を節約  30  struct PostReportPhotoItem: Sendable { /// アップロード状態 let type: EditingReport.PhotoType /// 検出された顔のフレーム情報 let recognizedFaceFrames: FaceRecognitionResult /// 適用するぼかしのフレーム情報 var blurFrames: EditingReportEntity.BlurFrameStatus /// ぼかしの適用されたoutput画像 var editedImage: UIImage? }

Inc.   Copyright ©2025 Retty, Inc.   /// アップロードステータス enum PhotoType: String, Codable, Sendable { case notUploaded // 未アップロード case uploaded // アップロード済 } /// 顔認識状態 enum FaceRecognitionResult: Equatable, Sendable { case notYet // 未認識 case recognized([CGRect]) // 認識済み } /// ぼかしの適用状態 enum BlurFrameStatus: Equatable, Hashable, Sendable { /// ぼかし画面を一度も開いていない状態。この状態で開くと、自動的に検出された顔にぼかしが適用される。 case notYet /// 一度ぼかし画面を開いている状態。この状態で開いても、自動で検出された顔にぼかしは適用されない。 case confirmed([CGRect]) } 状態定義  31  2度目は自動でぼかさない顔認識の結果をキャッシュ再編集可能

Inc.   Copyright ©2025 Retty, Inc.   シミュレーターで動かす場合   • VFのReq(Core ML)はGPU使用が前提  • SimulatorはCPU指定しないと動かない 32  写真が表示されない let request = VNDetectFaceRectanglesRequest() request.preferBackgroundProcessing = true #if targetEnvironment(simulator) // シミュレーターでは CPUを使用 request.usesCPUOnly = true } #endif iOS 16

Inc.   Copyright ©2025 Retty, Inc.   let request = VNDetectFaceRectanglesRequest() #if targetEnvironment(simulator) if #available(iOS 17.0, *) { for device in MLComputeDevice.allComputeDevices { if device.description.contains("MLCPUComputeDevice") { request.setComputeDevice(.some(device), for: .main) break } } } #endif setComputeDevice() でCPUデバイスを指定する  シミュレーターで動かす場合(iOS17以降)   33  iOS 17 利用可能なデバイスに CPUデバイスがあればリクエストのメインステージ (解析処理 )で使用

Inc.   Copyright ©2025 Retty, Inc.   • ぼかしのつけ方  ◦ 「矩形ではなくペンでつけたい」という要望  ◦ 開発工数上の観点で矩形に (Androidはペン)  • 読み込み時に映り込みを伝えるアイコン  ◦ 複数写真に同時にRequestが必要  ◦ メモリ消費・処理順序の保証ができず断念  ◦ Concurrency対応APIならできるかも?  機能としての課題   39 

Inc.   Copyright ©2025 Retty, Inc.   項目 VisionFramework MLKit OpenCV Cloud Vision (Firebase ML) AWS Rekognition モデル学習済/自前学習済学習済/自前学習済自前方式オンデバイスオンデバイスオンデバイスクラウドクラウド料金無料無料無料従量課金プラン課金 Platform Apple製の各OS iOS/Android 任意 iOS/Android 任意顔認識可能可能可能不可可能手軽さ ◎ ◯ △ ◯ △ 補足: 他の画像解析フレームワーク・サービスとの比較   40 

Inc.   Copyright ©2025 Retty, Inc.   補足: 他の学習済みモデルの使用   • Core MLのモデルフォーマット .mlmodel  • 公開されているモデルをプロジェクトに追加し利用可能  • TensorFlowで自前モデルを作って載せることも  • https://developer.apple.com/jp/machine-learning/models/  41 

Inc.   Copyright ©2025 Retty, Inc.   写真選別 (審美的評価)   • CalculateImageAestheticsScoresRequest  • 映える写真をhintで表示する料理写真の分類(被写体認識)   • 被写体分析で料理写真を分類  • ラベリング・投稿に活用可能    メニュー表の読み取り(文字認識)   • 投稿や写真へのタイトル付けに  補足: こんな使い方もできるかも?   42  https://engineer.retty.me/entry/ios_vision_framework iOS 18

Inc.   Copyright ©2025 Retty, Inc.   参考リンク・文献 (Apple公式)   47  Apple公式  • 機械学習を活用したAPI https://developer.apple.com/jp/machine-learning/api/   • モデル - 機械学習 - Apple Developer https://developer.apple.com/jp/machine-learning/models/   • Vision | Apple Developer Documentation https://developer.apple.com/documentation/vision/  • VisionフレームワークにおけるSwiftの機能強化 - WWDC24 - ビデオ - Apple Developer https://developer.apple.com/jp/videos/play/wwdc2024/10163/   その他  • 2024/01/16 【iPhone/Android】投稿写真に「ぼかし」をかけられる新機能が追加されました！ https://inforetty.zendesk.com/hc/ja/articles/27250495983513   • ML Kit for Firebase https://firebase.google.com/docs/ml-kit   • [iOS] Visionフレームワークを用いた料理写真の画像分類精度検証 - Retty Tech Blog https://engineer.retty.me/entry/ios_vision_framework   • Core MLのmlmodelファイルフォーマット詳解 https://zenn.dev/shu223/articles/coreml-mlmodel    

VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Fa...

VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework

More Decks by Tomohiro Imaizumi

Other Decks in Programming

Featured

Transcript