Swift [第5單元] 人工智慧程式基礎

A: 你好，我叫Angela，是一個中學生。

B: 你好，Angela，很高興遇見你。有什麼可以為你服務的嗎？

A: 我對電腦有興趣，但不確定該不該學程式設計，你覺得呢？

B: 學習程式設計是一個很好的選擇，因為它是一個非常多元化且廣泛應用的技能。它可以幫助你在未來的職涯中建立基礎，無論是在軟體開發、人工智能、數據科學、電腦科學等領域都可以幫上很大的忙。如果你實在不確定是否學習程式設計，你可以嘗試先學習一些基礎的程式語言，如Python，看看是否喜歡程式設計這個領域。

A: 我喜歡Apple的產品，像是iPhone或iPad

B: 學習 iOS 開發是一個很好的選擇。iOS 是 Apple 所開發的移動作業系統，用於 iPhone 和 iPad 裝置。iOS 開發需要使用 Swift 或 Objective-C 編寫程式碼。通過學習 iOS 開發，你可以開發出自己的 iPhone 和 iPad 應用程式，並且可以在 App Store 上發布你的應用程式給全世界的用戶下載。

A: 你覺得Swift適合中學生學習嗎？

B: 我認為 Swift 是一種適合中學生學習的程式語言。Swift 是一種相對新的程式語言，具有簡單易學的特點，它的語法與其他主流程式語言類似，因此容易上手。而且 Swift 是蘋果公司所開發的，可以用於 iOS 和 macOS 的開發，這意味著，如果你喜歡 Apple 的產品，學習 Swift 將是一個很好的選擇。

就算你不打算專攻移動開發或 iOS 開發，學習 Swift 也是個很好的選擇，因為它是一種流行且功能強大的程式語言，可以用於開發許多不同類型的應用程式。

A: 你知道Swift Playgrounds嗎？它跟Xcode比較起來，哪個比較適合初學者？

B: 是的，我知道 Swift Playgrounds。Swift Playgrounds 是一個蘋果公司開發的用於學習 Swift 程式語言的工具。它是一個互動式環境，允許用戶使用拖放方式將程式碼放入工作區並立即看到結果。它還提供了許多互動式課程和挑戰，可以幫助用戶學習程式設計。

Xcode 是一個蘋果公司開發的集成開發環境 (Integrated Development Environment, IDE)，用於開發 iOS、macOS 和 watchOS 應用程式。Xcode 是一個功能非常強大的工具，提供了許多功能，如代碼結構、版本控制、調試和優化等。

如果你是初學者，我建議你先使用 Swift Playgrounds，因為它是一個簡單易學的環境，可以讓你快速上手程式設計。Xcode 是一個專業級的工具，需要更多的時間和經驗才能熟練掌握。

struct Hexagon: Shape {
    func path(in rect: CGRect) -> Path {
        // 計算正六邊形的各個點的坐標
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let points = (0..<6).map {
            let x = rect.width / 2 * cos(CGFloat($0) * .pi / 3)
            let y = rect.height / 2 * sin(CGFloat($0) * .pi / 3)
            return CGPoint(x: x + center.x, y: y + center.y)
        }

        // 將這些點連接起來並返回
        return Path { path in
            path.addLines(points)
            path.closeSubpath()
        }
    }
}

GeometryReader { geometry in
    Hexagon()
        .fill(Color.blue)
        .frame(width: geometry.size.width, height: geometry.size.height)
}

struct ContentView: View {
    var body: some View {
        Hexagon()
            .fill(Color.blue)
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 100, y: 100))
            path.addLine(to: CGPoint(x: 200, y: 100))
            path.addLine(to: CGPoint(x: 250, y: 150))
            path.addLine(to: CGPoint(x: 200, y: 200))
            path.addLine(to: CGPoint(x: 100, y: 200))
            path.addLine(to: CGPoint(x: 50, y: 150))
            path.closeSubpath()
        }.stroke(Color.blue, lineWidth: 2)
    }
}

1. GPT 全名是 “Generative Pre-trained Transformer”，大意是預先訓練、生成式的轉換器，是 OpenAI 開發的自然語言模型，之前已歷經三代(GPT-1, GPT-2, GPT-3)，ChatGPT 算是 GPT-3.5。
   
2. 轉換器(Transformer)是機器學習的新技術，主要用於自然語言處理，由 Google Brain 在2017年所發表。
   
3. 推薦兩則台大教授介紹 ChatGPT 的影片：台大資工陳縕儂教授、台大電機李宏毅教授。
   
4. 試試看讓 ChatGPT 寫一個 Swift 程式，計算小於1000的質數，將結果與第1單元第5課範例1-5b比較看看。
   
5. 想想看，如果未來AI都能自動寫程式，那我們現在還有學程式的必要嗎？

import CoreImage

func qrCode(_ 輸入: String) -> UIImage {
    let 結果: UIImage
    let 圖層 = CIContext()
    let 放大 = CGAffineTransform(scaleX: 10, y: 10)
    let 濾鏡 = CIFilter.qrCodeGenerator()
    濾鏡.message = Data(輸入.utf8)
    if let 輸出 = 濾鏡.outputImage?.transformed(by: 放大) {
        if let 圖片 = 圖層.createCGImage(輸出, from: 輸出.extent) {
            結果 = UIImage(cgImage: 圖片)
        } else {
            結果 = UIImage(systemName: "xmark.square") ?? UIImage()
        }
    } else {
        結果 = UIImage(systemName: "xmark.square") ?? UIImage()
    }
    return 結果
}

let 濾鏡 = CIFilter.qrCodeGenerator()
濾鏡.message = Data(輸入.utf8)
let 輸出 = 濾鏡.outputImage?.transformed(by: 放大)

let 圖層 = CIContext()
let 圖片 = 圖層.createCGImage(輸出, from: 輸出.extent)

let 結果: UIImage
結果 = UIImage(cgImage: 圖片)
return 結果

Image(uiImage: qrCode("https://heman.lu/"))

// 5-1a QR Code Generator
// Created by Heman, 2023/02/08
import SwiftUI
import CoreImage.CIFilterBuiltins

func qrCode(_ 輸入: String) -> UIImage {
    let 結果: UIImage
    let 圖層 = CIContext()
    let 放大 = CGAffineTransform(scaleX: 10, y: 10)
    let 濾鏡 = CIFilter.qrCodeGenerator()
    濾鏡.message = Data(輸入.utf8)
    if let 輸出 = 濾鏡.outputImage?.transformed(by: 放大) {
        if let 圖片 = 圖層.createCGImage(輸出, from: 輸出.extent) {
            結果 = UIImage(cgImage: 圖片)
        } else {
            結果 = UIImage(systemName: "xmark.square") ?? UIImage()
        }
    } else {
        結果 = UIImage(systemName: "xmark.square") ?? UIImage()
    }
    return 結果
}

struct QRCode: View {
    let 網址 = "https://heman.lu/"
    let 水調歌頭 = """
        明月幾時有？
        把酒問青天。
        不知天上宮闕，
        今夕是何年。
        我欲乘風歸去，
        又恐瓊樓玉宇，
        高處不勝寒。
        起舞弄清影，
        何似在人間？
        轉朱閣，
        低綺戶，
        照無眠。
        不應有恨，
        何事長向別時圓？
        人有悲歡離合，
        月有陰晴圓缺，
        此事古難全。
        但願人長久，
        千里共嬋娟。
        """
    var body: some View {
        VStack {
            VStack {
                Image(uiImage: qrCode(網址))
                    .resizable()
                    .scaledToFit()
                Link(網址, destination: URL(string: 網址)!)
                    .font(.caption)
            }
            .padding()
            VStack {
                Image(uiImage: qrCode(水調歌頭))
                    .resizable()
                    .scaledToFit()
                Text("水調歌頭   (宋)蘇軾")
                    .font(.caption)
            }
            .padding()
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(QRCode())

1. QR Code 能否被用於詐騙？如果QR Code指向一個惡意網站，有什麼方法可以識別？
   
2. 作業一：可以找一篇上千字中英混雜的文章，嘗試看看QR Code最多能容納多少字元。
   
3. 作業二：請根據範例程式，加上 TextField 或 TextEditor，以便執行時輸入文字，免得將字串直接寫在程式裡不好改。

1. 「相簿單選」重新改寫。
   
2. 新版macOS 15的PhotosPicker預設行為與最初不同，必須加上 .photosPickerStyle(.inline)，否則無法選擇照片，選擇後也不會自己消失。
   
3. 測試環境：Mac mini 2023 (M2), macOS 15.2, Swift Playgrounds 4.5.1

import Vision

func qrDecode(_ 圖片參數: UIImage) -> [String] { ... }

• 步驟1. 先產出一個「工作請求」物件，請求辨識條碼（本節需要辨識三種條碼，包括 QR Code, EAN-13, Code-39，分別寫在symbologies屬性的陣列中）：
  

  let 工作請求 = VNDetectBarcodesRequest()
  工作請求.symbologies = [.qr, .ean13, .code39]



• 步驟2. 實際處理圖形辨識的工作，是另外一個「處理者」(Handler)物件負責，這個處理者專門辨識 CGImage 格式，因此要先從函式的UIImage參數中取出 CGImage 圖片，再交給處理者：
  

  if let 影像 = 圖片參數.cgImage {
      let 處理者 = VNImageRequestHandler(cgImage: 影像)
      ...
  }



• 步驟3. 將「工作請求」送入「處理者」開始進行辨識，處理者可同時處理多個工作請求，因此參數為 [工作請求] 陣列。辨識結果會存回「工作請求.results」中，條碼辨識的結果（原始內容）需轉成 VNBarcodeObservation （條碼觀測）的陣列類型，裡面就是一個個觀測（解碼）得到的字串。
  

  try 處理者.perform([工作請求])
  if let 處理結果 = 工作請求.results as? [VNBarcodeObservation] {
      ...
  }

import Vision

func qrDecode(_ 圖片參數: UIImage) throws -> [String] {
    var 結果: [String] = []
    let 工作請求 = VNDetectBarcodesRequest()
    工作請求.symbologies = [.qr, .ean13, .code39]
    print(工作請求)
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        print(處理者)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results as? [VNBarcodeObservation] {
            print(處理結果)
            for i in 處理結果 {
                if let 內容 = i.payloadStringValue {
                    結果.append(內容)
                }
            }
        }
    }
    return 結果
}

import SwiftUI
import PhotosUI

// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

// 5-1b QR Code Scanner
// Created by Heman, 2023/02/12

import SwiftUI
import PhotosUI
import Vision

func qrDecode(_ 圖片參數: UIImage) throws -> [String] {
    var 結果: [String] = []
    let 工作請求 = VNDetectBarcodesRequest()
    工作請求.symbologies = [.qr, .ean13, .code39]
    print(工作請求)
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        print(處理者)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results as? [VNBarcodeObservation] {
            print(處理結果)
            for i in 處理結果 {
                if let 內容 = i.payloadStringValue {
                    結果.append(內容)
                }
            }
        }
    }
    return 結果
}

// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}
struct 掃描條碼: View {
    @State var 條碼內容: [String] = []
    @State var 條碼圖片: UIImage? = nil
    var body: some View {
        VStack {
            if 條碼圖片 == nil {
                相簿單選(圖片: $條碼圖片)
            } else {
                Image(uiImage: 條碼圖片!)
                    .resizable()
                    .scaledToFit()
                    .onAppear {
                        do {
                            條碼內容 = try qrDecode(條碼圖片!)
                        } catch {
                            print("掃描發生錯誤")
                        }
                    }
                    .onTapGesture {    // 重新選擇圖片
                        條碼內容 = []
                        條碼圖片 = nil
                    }
            }
            ForEach(條碼內容.indices, id: \.self) { i in
                let 字數 = 條碼內容[i].count
                Text("條碼內容(\(字數)字元)：\n" + 條碼內容[i])
                    .padding()
                    .background(Color.yellow.opacity(0.5))
            }
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(掃描條碼())

• 一維條碼(Code-39)內容為”11202JP254166467539”，即(民國)112年02月份、發票號碼 JP25416646、隨機碼7539。


• 左邊的QR Code內容為 ”JP254166461120107753900000000000000590000000090620706P0lFl5GBBAbuTAp4Fuotqg==:**********:4:6:1:21Plus香草烤雞腿時蔬餐:1:89:”，包含了發票號碼、隨機碼、購買品名、數量、單價等內容。


• 右邊的QR Code內容為”*當筆購-好菌對策ABC纖姿飲39元:99:0:當筆購-健達/能多益2件25元:99:0:當筆購-芊柔紙巾買一送一:99:0”，此內容是備註，有些廠商會註明交易明細，有些則空白，小七這個發票則寫入加購促銷的商品。

1. 要測試本節範例程式前，請記得自備發票照片，加入相簿中，以便讓程式讀取。
   
2. 所謂「電腦視覺」，並不是電腦加上相機鏡頭即可，而是背後的軟體須具備人工智慧，能夠辨識標的才行，故後面課程會以「AI視覺」來稱呼。
   
3. VNDetectBarcodesRequest 工作請求的 symbologies 屬性用來指定辨識的條碼種類，symbology 字面意思是「符號學」，在此指條碼類別。
   
4. VNImageRequestHandler 可處理的圖片物件，包括 CGImage, CIImage, CVPixelBuffer (影片), NSData (原始圖檔)等低階類型，本單元一律使用 CGImage 物件，CGImage 可支援 JPG, PNG 等圖片格式。
   
5. 對Swift 錯誤處理相關語法不熟悉的同學，記得回頭看第3單元第8課。
   
6. 對 PhotosPicker 不熟悉者可參考第4單元第11課。
   
7. @Binding 用法說明請參考第4單元第10課4-10b。
   
8. 財政部自2010年左右開始推行電子發票，經過十多年努力，目前台灣絕大多數消費都已經採用電子發票，是非常成功的數位政策。
   
9. 發票的QR Code可能包含交易明細，雖然不是個人資料，但也和個人隱私有關，有使用這類App的同學要稍加注意。
   
10. CGImage, UIImage, Image 圖片物件的關係，就如同 AppKit, UIKit, SwiftUI 傳承歷史，後者（較新的）可包容前者（較舊的）格式，也就是說，Image 可包含 UIImage 物件，而 UIImage 又可將 CGImage 包入其中。
    
11. 至於前一節所用的 CoreImage 框架（約2004年發布），其中也有一個 CIImage 物件，用來存放2D繪製的圖形（如條碼）。CoreImage 框架主要用於繪製2D圖形、製作濾鏡、影像處理等功能，可說是第4單元Canvas畫布的內部核心功能。

• 步驟1. 產出一個「工作請求」物件，將條碼辨識請求 VNDetectBarcodesRequest 改為文字辨識請求 VNRecognizeTextRequest：
  

  // 5-1b 寫法：
  let 工作請求 = VNDetectBarcodesRequest()
  工作請求.symbologies = [.qr, .ean13, .code39]
  // ⬇︎⬇︎⬇︎⬇︎⬇︎
  // 5-1c 改為：
  let 工作請求 = VNRecognizeTextRequest()
  print(try 工作請求.supportedRecognitionLanguages())
  工作請求.recognitionLanguages = ["zh-Hant", "en-US"]

  
  因為這是第一次使用文字辨識，故先以 print() 列出所支援的語言種類，才知道該如何設定。此行 print() 輸出如下：
  

  ["en-US", "fr-FR", "it-IT", "de-DE", "es-ES", "pt-BR", "zh-Hans", "zh-Hant", "yue-Hans", "yue-Hant", "ko-KR", "ja-JP", "ru-RU", "uk-UA"]

  
  根據Apple原廠文件，其中 “zh-Hans” 是簡體中文，”zh-Hant” 是繁體中文，預設僅能辨識英文及數字，若要辨識中英文，必須將 “zh-Hant” 寫在陣列最前面，而且後面只能跟隨一個”en-US”。


• 步驟2. 產出一個「處理者」(Handler)物件，加入要辨識的圖片，與上一節完全相同：
  

  // 不變：
  if let 影像 = 圖片參數.cgImage {
      let 處理者 = VNImageRequestHandler(cgImage: 影像)
      ...
  }



• 步驟3. 開始進行辨識，將辨識結果轉成 [VNRecognizedTextObservation]（文字觀測結果）的陣列類型。
  

  // 5-1b 寫法：
  try 處理者.perform([工作請求])
  if let 處理結果 = 工作請求.results as? [VNBarcodeObservation] {
      ...
  }
  // ⬇︎⬇︎⬇︎⬇︎⬇︎
  // 5-1c 改為：
  try 處理者.perform([工作請求])
  if let 處理結果 = 工作請求.results as? [VNRecognizedTextObservation] {
      ...
  }

import Vision

func 圖轉文(_ 圖片參數: UIImage) throws -> [String] {
    var 結果: [String] = []
    let 工作請求 = VNRecognizeTextRequest()
    print(try 工作請求.supportedRecognitionLanguages())
    工作請求.recognitionLanguages = ["zh-Hant", "en-US"]
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        // print(處理者)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results as? [VNRecognizedTextObservation] {
            // print(處理結果)
            for i in 處理結果 {
                if let 字串 = i.topCandidates(1).first?.string {
                    結果.append(字串)
                }
            }
        }
    }
    return 結果
}

if let 字串 = i.topCandidates(1).first?.string

// 5-1c 文字辨識(Image to Text)
// Created by Heman, 2023/02/15

import SwiftUI
import PhotosUI
import Vision

func 圖轉文(_ 圖片參數: UIImage) throws -> [String] {
    var 結果: [String] = []
    let 工作請求 = VNRecognizeTextRequest()
    print(try 工作請求.supportedRecognitionLanguages())
    工作請求.recognitionLanguages = ["zh-Hant", "en-US"]
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        // print(處理者)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results as? [VNRecognizedTextObservation] {
            // print(處理結果)
            for i in 處理結果 {
                if let 字串 = i.topCandidates(1).first?.string {
                    結果.append(字串)
                }
            }
        }
    }
    return 結果
}

// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

struct 掃描文字: View {
    @State var 文字內容: [String] = []
    @State var 文字圖片: UIImage? = nil
    var body: some View {
        VStack {
            if 文字圖片 == nil {
                相簿單選(圖片: $文字圖片)
            } else {
                Image(uiImage: 文字圖片!)
                    .resizable()
                    .scaledToFit()
                    .onAppear {
                        do {
                            文字內容 = try 圖轉文(文字圖片!)
                        } catch {
                            print("掃描發生錯誤")
                        }
                    }
                    .onTapGesture {    // 重新選擇圖片
                        文字內容 = []
                        文字圖片 = nil
                    }
            }
            if 文字內容 != [] {
                Text("--文字辨識結果--\n" + 文字內容.joined(separator: "\n"))
                    .padding()
                    .background(Color.yellow.opacity(0.5))
            }
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(掃描文字())

7-ELEVEn
電子發票證明聯
112年01-02月
JP-25416646
2023-01-07 18:03:39
隨機碼：7539 總計：89
賣方90620705
小碧潭 232225 序114910 機，

1. 本節所用圖片，沿用上一節已放入相簿中的7-11發票圖片。
   
2. 若以成本比較的話，一維條碼的掃描器最便宜，其次是二維條碼掃描器，最貴的當然是AI視覺。
   
3. 此處繁體中文的代碼”zh-Hant”，其中 “zh” 是由 ISO-639 標準所定語言代碼，表示「中文」；”Han”代表漢字，”t” 代表”traditional”(傳統的)，即繁體或正體中文。有些程式也用 “zh-TW” 來表示台灣所用的繁體中文，”TW”是 ISO-3166 標準所定的國家或地區代碼。
   
4. 為什麼AI視覺的處理結果要轉成 […Observation] 類型？因為這些「觀測」(Observation)物件裡面，除了有AI視覺辨識出來的字串，還有其他資料，包括辨識的信心程度(confidence)以及文字在圖片的位置等等。
   

   let 處理結果 = 工作請求.results as? [VNRecognizedTextObservation]

   
   
5. 如果仔細觀察5-1b, 5-1c這兩節的執行結果，再比對第三段主視圖程式碼，會發現一個相當嚴重的問題：在相簿點選完圖片之後，應該先顯示圖片，再呼叫第一段函式「圖轉文()」進行AI辨識，等辨識完才會顯示文字。但實際結果卻是點選相簿後，要等到辨識完成，才一起顯示圖片與文字，感覺中間卡住了，為什麼會這樣？
   

   Image(uiImage: 文字圖片!)
       .resizable()
       .scaledToFit()
       .onAppear {
           do {
               文字內容 = try 圖轉文(文字圖片!)
           } catch {
               print("掃描發生錯誤")
           }
       }

   
   
6. 第二段「相簿單選」程式碼會重複出現在後面兩課，在 Swift Playgrounds 裡面可放在共享程式碼(SharedCode.swift，如上圖左側欄)中，即可避免重複。不過為了閱讀方便，本單元一律不用共享程式碼，這樣在debug時也會比較容易。
   
7. 前面序言曾提過，AI 程式執行結果帶有機率性，在每一台設備執行結果未必相同。本文所用設備為Mac mini 2018，在筆者另一台Macbook Air M1上面，對同一張7-11發票照片，「賣方90620706」與「機2」兩處都正確辨識，但「電子發票」誤為「電子發栗」，正確率約99%。
   
   

let 條碼辨識請求 = VNDetectBarcodesRequest()    // 請求1
條碼辨識請求.symbologies = [.qr, .ean13, .code39]

let 文字辨識請求 = VNRecognizeTextRequest()     // 請求2
文字辨識請求.recognitionLanguages = ["zh-Hant", "en-US"]

...
try 處理者.perform([條碼辨識請求, 文字辨識請求])    // 同時交給處理者

import Vision

func 圖轉文(_ 圖片參數: UIImage) async throws -> [String] {
    var 結果: [String] = []
    let 條碼辨識請求 = VNDetectBarcodesRequest()
    條碼辨識請求.symbologies = [.qr, .ean13, .code39]
    let 文字辨識請求 = VNRecognizeTextRequest()
    文字辨識請求.recognitionLanguages = ["zh-Hant", "en-US"]
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        // print(處理者)
        try 處理者.perform([條碼辨識請求, 文字辨識請求])
        if let 條碼處理結果 = 條碼辨識請求.results as? [VNBarcodeObservation] {
            // print(條碼處理結果)
            for i in 條碼處理結果 {
                結果.append("--條碼辨識結果--")
                if let 內容 = i.payloadStringValue {
                    結果.append(內容)
                }
            }
        }
        if let 文字處理結果 = 文字辨識請求.results as? [VNRecognizedTextObservation] {
            // print(文字處理結果)
            結果.append("--文字辨識結果--")
            for i in 文字處理結果 {
                if let 字串 = i.topCandidates(1).first?.string {
                    結果.append(字串)
                }
            }
        }
    }
    return 結果
}

ZStack {
    Image(uiImage: 條碼文字圖!)
        .resizable()
        .scaledToFit()
        .task {
            do {
                文字內容 = try await 圖轉文(條碼文字圖!)
            } catch {
                print("掃描發生錯誤")
            }
        }
        .onTapGesture {    // 重新選擇圖片
            文字內容 = []
            條碼文字圖 = nil
        }
    if 文字內容 == [] { 
        ProgressView() 
            .scaleEffect(2.5)
    }
}

// 5-1d 條碼＋文字同時辨識
// Created by Heman, 2023/02/16
import SwiftUI
import PhotosUI
import Vision

func 圖轉文(_ 圖片參數: UIImage) async throws -> [String] {
    var 結果: [String] = []
    let 條碼辨識請求 = VNDetectBarcodesRequest()
    條碼辨識請求.symbologies = [.qr, .ean13, .code39]
    let 文字辨識請求 = VNRecognizeTextRequest()
    文字辨識請求.recognitionLanguages = ["zh-Hant", "en-US"]
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        // print(處理者)
        try 處理者.perform([條碼辨識請求, 文字辨識請求])
        if let 條碼處理結果 = 條碼辨識請求.results as? [VNBarcodeObservation] {
            // print(條碼處理結果)
            for i in 條碼處理結果 {
                結果.append("--條碼辨識結果--")
                if let 內容 = i.payloadStringValue {
                    結果.append(內容)
                }
            }
        }
        if let 文字處理結果 = 文字辨識請求.results as? [VNRecognizedTextObservation] {
            // print(文字處理結果)
            結果.append("--文字辨識結果--")
            for i in 文字處理結果 {
                if let 字串 = i.topCandidates(1).first?.string {
                    結果.append(字串)
                }
            }
        }
    }
    return 結果
}

// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

struct 掃描文字: View {
    @State var 文字內容: [String] = []
    @State var 條碼文字圖: UIImage? = nil
    var body: some View {
        VStack {
            if 條碼文字圖 == nil {
                相簿單選(圖片: $條碼文字圖)
            } else {
                ZStack {
                    Image(uiImage: 條碼文字圖!)
                        .resizable()
                        .scaledToFit()
                        .task {
                            do {
                                文字內容 = try await 圖轉文(條碼文字圖!)
                            } catch {
                                print("掃描發生錯誤")
                            }
                        }
                        .onTapGesture {    // 重新選擇圖片
                            文字內容 = []
                            條碼文字圖 = nil
                        }
                    if 文字內容 == [] { 
                        ProgressView() 
                            .scaleEffect(2.5)
                    }
                }
            }
            if 文字內容 != [] {
                Text(文字內容.joined(separator: "\n"))
                    .padding()
                    .background(Color.yellow.opacity(0.5))
            }
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(掃描文字())

import Vision

func 人臉偵測(_ 圖片參數: UIImage) async throws -> [CGRect] {
    var 結果: [CGRect] = []
    let 工作請求 = VNDetectFaceRectanglesRequest()
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results as? [VNFaceObservation] {
            print("處理結果：\(處理結果)")
            for 矩形 in 處理結果 {
                結果.append(矩形.boundingBox)
            }
        }
    }
    if 結果.isEmpty { 結果.append(CGRect.zero) }
    print("回傳結果：\(結果)")
    return 結果
}

boundingBox=[0.333408, 0.372809, 0.339921, 0.339921]

struct 描繪外框: View {
    let 正規化圖框: [CGRect]
    var body: some View {
        Canvas { 圖層, 尺寸 in
            print(尺寸)
            let 圖寬 = 尺寸.width
            let 圖高 = 尺寸.height
            var 畫筆 = Path()
            for 外框 in 正規化圖框 {
                let 畫框 = CGRect(
                    x: 圖寬 * 外框.minX, 
                    y: 圖高 * (1.0 - 外框.minY - 外框.height), 
                    width: 圖寬 * 外框.width, 
                    height: 圖高 * 外框.height)
                畫筆.addRect(畫框)
            }
            圖層.stroke(畫筆, with: .color(.red), lineWidth: 3)
        }
    }
}

// 5-2a Face Detection (boundingBox)
// Created by Heman, 2023/02/20
import SwiftUI
import PhotosUI
import Vision

// 第1段
func 人臉偵測(_ 圖片參數: UIImage) async throws -> [CGRect] {
    var 結果: [CGRect] = []
    let 工作請求 = VNDetectFaceRectanglesRequest()
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results as? [VNFaceObservation] {
            print("處理結果：\(處理結果)")
            for 矩形 in 處理結果 {
                結果.append(矩形.boundingBox)
            }
        }
    }
    if 結果.isEmpty { 結果.append(CGRect.zero) }
    print("回傳結果：\(結果)")
    return 結果
}

// 第2段
// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

// 第3段：主視圖
struct 臉部掃描: View {
    @State var 顯示字串 = ""
    @State var 外框陣列: [CGRect] = []
    @State var 相簿圖片: UIImage? = nil
    var body: some View {
        if 相簿圖片 == nil {
            相簿單選(圖片: $相簿圖片)
        } else {
            ZStack(alignment: .bottom) {
                Image(uiImage: 相簿圖片!)
                    .resizable()
                    .scaledToFit()
                    .border(Color.secondary)
                    .opacity(0.5)
                    .overlay(描繪外框(正規化圖框: 外框陣列))
                    .task {
                        do {
                            外框陣列 = try await 人臉偵測(相簿圖片!)
                            for i in 外框陣列 {
                                let 字串 = """
    -----臉部外框（正規化）-----
    外框左下角：\(i.origin)
    外框寬：\(i.width)
    外框高：\(i.height)\n
    """
                                顯示字串.append(字串)
                            }
                        } catch {
                            print("掃描發生錯誤：\(error)")
                        }
                    }
                    .onTapGesture {
                        相簿圖片 = nil
                        外框陣列 = []
                        顯示字串 = ""
                    }
                Text(顯示字串)
                    .foregroundColor(.cyan)
                    .background(Color.white.opacity(0.5))
                    .padding()
            }
        }
    }
}

// 第4段
struct 描繪外框: View {
    let 正規化圖框: [CGRect]
    var body: some View {
        Canvas { 圖層, 尺寸 in
            print(尺寸)
            let 圖寬 = 尺寸.width
            let 圖高 = 尺寸.height
            var 畫筆 = Path()
            for 外框 in 正規化圖框 {
                let 畫框 = CGRect(
                    x: 圖寬 * 外框.minX, 
                    y: 圖高 * (1.0 - 外框.minY - 外框.height), 
                    width: 圖寬 * 外框.width, 
                    height: 圖高 * 外框.height)
                畫筆.addRect(畫框)
            }
            圖層.stroke(畫筆, with: .color(.red), lineWidth: 3)
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(臉部掃描())

1. CGPoint, CGSize, CGRect, Path 等物件的用法請參考第4單元第5課畫布Canvas。
   
2. 有關正規化座標(Normalized Coordinates)，請參考第4單元第7課4-7b介紹。
   
3. "Bounding Box" (外框、邊框)是人工智慧的術語，指視覺辨識中，包含所有辨識特徵的矩形範圍。bounding 是 bound 的動名詞，有多重字義，在這裡(boudingBox)為束縛、約束、界定的意思。

import Vision

// 第1段
func 人與貓狗辨識(_ 圖片參數: UIImage) async throws -> [CGRect] {
    var 結果: [CGRect] = []
    let 人體外框 = VNDetectHumanRectanglesRequest()
    let 貓狗辨識 = VNRecognizeAnimalsRequest()
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        try 處理者.perform([人體外框, 貓狗辨識])
        if let 處理結果 = 人體外框.results as? [VNHumanObservation] {
            print("人體外框：\(處理結果)")
            for 人體 in 處理結果 {
                結果.append(人體.boundingBox)
            }
        }
        if let 處理結果 = 貓狗辨識.results as? [VNRecognizedObjectObservation] {
            print("貓狗辨識: \(處理結果)")
            for 貓狗 in 處理結果 {
                結果.append(貓狗.boundingBox)
            }
        }
    }
    if 結果.isEmpty { 結果.append(CGRect.zero) }
    print("回傳結果：\(結果)")
    return 結果
}

// 第5段
struct 網址抓圖: View {
    @Binding var 圖片: UIImage?
    @State var 網址: String = ""
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.gray.opacity(0.5))
                .frame(height: 50)
            HStack {
                Image(systemName: "photo.fill")
                    .font(.system(size: 24))
                TextField("輸入圖片網址", text: $網址, prompt: Text("https://"))
                    .font(.system(size: 20))
                    .background(Color.white)
                    .textFieldStyle(.roundedBorder)
                    .cornerRadius(5.0)
                    .onChange(of: 網址) { 新網址 in
                        Task {
                            if let myURL = URL(string: 新網址) {
                                let (原始資料, _) = try await URLSession.shared.data(from: myURL)
                                if let 格式轉換 = UIImage(data: 原始資料) {
                                    圖片 = 格式轉換
                                } else {
                                    print("非圖片網址，請重新輸入。")
                                }
                            } else {
                                print("網址格式錯誤，請重新輸入。")
                            }
                        }
                    }
            }
            .padding()
        }
    }
}

// 第3段：主視圖
struct 照片掃描: View {
    @State var 外框陣列: [CGRect] = []
    @State var 相簿圖片: UIImage? = nil
    var body: some View {
        網址抓圖(圖片: $相簿圖片)                   // 第5段
            .onChange(of: 相簿圖片) { 新圖片 in
                外框陣列 = []
                Task {
                    do {
                        外框陣列 = try await 人與貓狗辨識(新圖片 ?? UIImage())    // 第1段
                    } catch {
                        print("無法辨識圖片：\(error)")
                    }
                }
            }
        Spacer()
        if 相簿圖片 == nil {
            相簿單選(圖片: $相簿圖片)               // 第2段
        } else {
            ZStack {
                Image(uiImage: 相簿圖片!)
                    .resizable()
                    .scaledToFit()
                    .border(Color.secondary)
                    .opacity(0.5)
                    .overlay(描繪外框(正規化圖框: 外框陣列))    // 第4段
                    .onTapGesture {
                        相簿圖片 = nil
                        外框陣列 = []
                    }
                if 外框陣列.isEmpty {
                    ProgressView()
                        .scaleEffect(2.5)
                }
            }
        }
        Spacer()
    }
}

// 5-2b Human bodies, cats and dogs Detection (boundingBox)
// Created by Heman, 2023/02/24
import SwiftUI
import PhotosUI
import Vision

// 第1段
func 人與貓狗辨識(_ 圖片參數: UIImage) async throws -> [CGRect] {
    var 結果: [CGRect] = []
    let 人體外框 = VNDetectHumanRectanglesRequest()
    let 貓狗辨識 = VNRecognizeAnimalsRequest()
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        try 處理者.perform([人體外框, 貓狗辨識])
        if let 處理結果 = 人體外框.results as? [VNHumanObservation] {
            print("人體外框：\(處理結果)")
            for 人體 in 處理結果 {
                結果.append(人體.boundingBox)
            }
        }
        if let 處理結果 = 貓狗辨識.results as? [VNRecognizedObjectObservation] {
            print("貓狗辨識: \(處理結果)")
            for 貓狗 in 處理結果 {
                結果.append(貓狗.boundingBox)
            }
        }
    }
    if 結果.isEmpty { 結果.append(CGRect.zero) }
    print("回傳結果：\(結果)")
    return 結果
}

// 第2段
// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

// 第3段：主視圖
struct 照片掃描: View {
    @State var 外框陣列: [CGRect] = []
    @State var 相簿圖片: UIImage? = nil
    var body: some View {
        網址抓圖(圖片: $相簿圖片)                   // 第5段
            .onChange(of: 相簿圖片) { 新圖片 in
                外框陣列 = []
                Task {
                    do {
                        外框陣列 = try await 人與貓狗辨識(新圖片 ?? UIImage())    // 第1段
                    } catch {
                        print("無法辨識圖片：\(error)")
                    }
                }
            }
        Spacer()
        if 相簿圖片 == nil {
            相簿單選(圖片: $相簿圖片)               // 第2段
        } else {
            ZStack {
                Image(uiImage: 相簿圖片!)
                    .resizable()
                    .scaledToFit()
                    .border(Color.secondary)
                    .opacity(0.5)
                    .overlay(描繪外框(正規化圖框: 外框陣列))    // 第4段
                    .onTapGesture {
                        相簿圖片 = nil
                        外框陣列 = []
                    }
                if 外框陣列.isEmpty {
                    ProgressView()
                        .scaleEffect(2.5)
                }
            }
        }
        Spacer()
    }
}

// 第4段
struct 描繪外框: View {
    let 正規化圖框: [CGRect]
    var body: some View {
        Canvas { 圖層, 尺寸 in
            let 圖寬 = 尺寸.width
            let 圖高 = 尺寸.height
            var 畫筆 = Path()
            for 外框 in 正規化圖框 {
                let 畫框 = CGRect(
                    x: 圖寬 * 外框.minX, 
                    y: 圖高 * (1.0 - 外框.minY - 外框.height), 
                    width: 圖寬 * 外框.width, 
                    height: 圖高 * 外框.height)
                畫筆.addRect(畫框)
            }
            圖層.stroke(畫筆, with: .color(.red), lineWidth: 3)
        }
    }
}

// 第5段
struct 網址抓圖: View {
    @Binding var 圖片: UIImage?
    @State var 網址: String = ""
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.gray.opacity(0.5))
                .frame(height: 50)
            HStack {
                Image(systemName: "photo.fill")
                    .font(.system(size: 24))
                TextField("輸入圖片網址", text: $網址, prompt: Text("https://"))
                    .font(.system(size: 20))
                    .background(Color.white)
                    .textFieldStyle(.roundedBorder)
                    .cornerRadius(5.0)
                    .onChange(of: 網址) { 新網址 in
                        Task {
                            if let myURL = URL(string: 新網址) {
                                let (原始資料, _) = try await URLSession.shared.data(from: myURL)
                                if let 格式轉換 = UIImage(data: 原始資料) {
                                    圖片 = 格式轉換
                                } else {
                                    print("非圖片網址，請重新輸入。")
                                }
                            } else {
                                print("網址格式錯誤，請重新輸入。")
                            }
                        }
                    }
            }
            .padding()
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(照片掃描())

1. 第5段輸入的網址必須是圖片本身的網址（通常末尾是 .jpg 或 .png），而不是看到圖片的網頁（通常末尾是 .html），若下載資料無法直接轉成圖片，會在主控台列印錯誤訊息。
   
2. 輸入網址的具體操作方式，通常先用瀏覽器找到目標圖片，用瀏覽器本身的功能「複製圖片位址」，然後執行範例程式，點入文字框中，按⌘-V將網址貼上（如果文字框還留著舊網址，記得先按⌘-A全選，再⌘-V貼上取代舊網址）。
   
3. 也可以用本節範例的圖片網址

   https://images.unsplash.com/photo-1628071719729-de25b1794632?ixlib=rb-4.0.3&auto=format&fit=crop&w=1080&q=80

   
   
4. VNDetectHumanRectanglesRequest 預設僅找出半身人像（上半身），若需偵測全身，需設定「人體外框.upperBodyOnly = false」。

1. 在左側欄是程式檔案區，可隨意分不同目錄存放；還可拖拉加入本機資源（如JSON、圖片、影片、音樂…等）或外部套件（輸入網址）
   
2. 中間欄是程式碼編輯區
   
3. 右側欄是預覽區，可預覽App或本段（在編輯區）程式
   
4. 最上方還有SwiftUI物件選單
   
5. 檔案區上方可設定App屬性（如更改名稱、加入權限）或上架到App Store

1. 為了保持每節課程內容的完整性，後面課程仍以電子書模式為主，以方便閱讀；但鼓勵大家改寫成App模式，以熟悉進階的功能。
   
2. App模式的檔案(.swiftpm)相容性更好，可在Swift Playgrounds 與 Xcode使用，電子書模式(.playgroundbook)則只能用於Swift Playgrounds。
   
3. 要熟悉macOS 常用的快捷鍵：⌘-C 複製、⌘-X 剪下、⌘-V 貼上、⌘-Z 還原、⌘-A 全選。

import Vision

// 第1段
func 臉部五官辨識(_ 圖片參數: UIImage) async throws -> [CGPoint] {
    var 結果: [CGPoint] = []
    let 工作請求 = VNDetectFaceLandmarksRequest()
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results {    // 不需要再寫 as? [VNFaceObservation] 
            print("處理結果：\(處理結果)")
            for 臉部 in 處理結果 {
                let 外框 = 臉部.boundingBox    // 以圖片寬高比例的正規化座標
                if let 五官位置 = 臉部.landmarks {    // 以外框寬高比例的正規化座標
                    let 所有特徵點 = 五官位置.allPoints!.normalizedPoints.map { 各點 in
                        CGPoint(    // 改成圖片寬高比例的正規化座標
                            x: 外框.origin.x + 各點.x * 外框.width, 
                            y: 外框.origin.y + 各點.y * 外框.height)
                    }
                    結果 = 結果 + 所有特徵點
                }
            }
        }
    }
    if 結果.isEmpty { 結果.append(CGPoint.zero) }
    print("回傳結果：\(結果)")
    return 結果
}

let 外框 = 臉部.boundingBox    // 以圖片寬高比例的正規化座標
if let 五官位置 = 臉部.landmarks {    // 以外框寬高比例的正規化座標
    let 所有特徵點 = 五官位置.allPoints!.normalizedPoints.map { 各點 in
        CGPoint(    // 改成圖片寬高比例的正規化座標
            x: 外框.origin.x + 各點.x * 外框.width, 
            y: 外框.origin.y + 各點.y * 外框.height)
    }
    結果 = 所有特徵點
}

.faceContour: 17點，臉頰輪廓
.leftEye: 6點，左眼輪廓
.rightEye: 6點，右眼輪廓
.leftPupil: 1點，左眼瞳
.rightPupil: 1點，右眼瞳
.leftEyebrow: 6點，左眉
.rightEyebrow: 6點，右眉
.nose: 8點，鼻子輪廓
.noseCrest: 6點，鼻樑與鼻翼
.medianLine: 10點，臉部中線（眉心到下巴）
.outerLips: 14點，嘴唇外緣
.innerLips: 6點，嘴唇內緣

// 第4段
struct 描繪特徵點: View {
    let 正規化點陣列: [CGPoint]
    var body: some View {
        Canvas { 圖層, 尺寸 in
            // print(尺寸)
            let 圖寬 = 尺寸.width
            let 圖高 = 尺寸.height
            var 畫筆 = Path()
            for 單點 in 正規化點陣列 {
                let 點座標 = CGPoint(
                    x: 圖寬 * 單點.x, 
                    y: 圖高 - 圖高 * 單點.y)
                畫筆.move(to: 點座標)
                畫筆.addArc(
                    center: 點座標, 
                    radius: 3.0, 
                    startAngle: .zero, 
                    endAngle: .degrees(360), 
                    clockwise: false)
            }
            圖層.fill(畫筆, with: .color(.red))
        }
    }
}

// 5-3a Face Landmarks Detection (76 Points)
// Created by Heman, 2023/03/04
import SwiftUI
import PhotosUI
import Vision

// 第1段
func 臉部五官辨識(_ 圖片參數: UIImage) async throws -> [CGPoint] {
    var 結果: [CGPoint] = []
    let 工作請求 = VNDetectFaceLandmarksRequest()
    if let 影像 = 圖片參數.cgImage {
        let 處理者 = VNImageRequestHandler(cgImage: 影像)
        try 處理者.perform([工作請求])
        if let 處理結果 = 工作請求.results {    // 不需要再寫 as? [VNFaceObservation] 
            print("處理結果：\(處理結果)")
            for 臉部 in 處理結果 {
                let 外框 = 臉部.boundingBox    // 以圖片寬高比例的正規化座標
                if let 五官位置 = 臉部.landmarks {    // 以外框寬高比例的正規化座標
                    let 所有特徵點 = 五官位置.allPoints!.normalizedPoints.map { 各點 in
                        CGPoint(    // 改成圖片寬高比例的正規化座標
                            x: 外框.origin.x + 各點.x * 外框.width, 
                            y: 外框.origin.y + 各點.y * 外框.height)
                    }
                    結果 = 結果 + 所有特徵點
                }
            }
        }
    }
    if 結果.isEmpty { 結果.append(CGPoint.zero) }
    print("回傳結果：\(結果)")
    return 結果
}

// 第2段
// Updated by Heman, 2024/12/24. 重新改寫
struct 相簿單選: View {
    @State var 單選: PhotosPickerItem?
    @Binding var 圖片: UIImage?
    var body: some View {
        if 圖片 == nil {
            PhotosPicker(selection: $單選) {
                VStack {
                    Image(systemName: "barcode.viewfinder")
                        .resizable()
                        .scaledToFit()
                    Text("請點選條碼照片")
                        .font(.title)
                }
            }
            .photosPickerStyle(.inline)
            .photosPickerAccessoryVisibility(.hidden, edges: .leading)
            .onChange(of: 單選) { 選擇結果 in
                Task {
                    do {
                        if let 原始資料 = try await 選擇結果?.loadTransferable(type: Data.self) {
                            if let 轉換圖片 = UIImage(data: 原始資料) {
                                圖片 = 轉換圖片
                            }
                        }
                    } catch {
                        print("無法取得或轉換照片: \(error)")
                        圖片 = nil
                    }
                }
            }
        } else {
            Image(uiImage: 圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

// 第3段
struct 照片掃描: View {
    @State var 點座標陣列: [CGPoint] = []
    @State var 相簿圖片: UIImage? = nil
    var body: some View {
        網址抓圖(圖片: $相簿圖片)                   // 第5段
            .onChange(of: 相簿圖片) { 新圖片 in
                點座標陣列 = []
                Task {
                    do {
                        點座標陣列 = try await 臉部五官辨識(新圖片 ?? UIImage())    // 第1段
                    } catch {
                        print("無法辨識圖片：\(error)")
                    }
                }
            }
        Spacer()
        if 相簿圖片 == nil {
            相簿單選(圖片: $相簿圖片)               // 第2段
        } else {
            ZStack() {
                Image(uiImage: 相簿圖片!)
                    .resizable()
                    .scaledToFit()
                    .border(Color.secondary)
                    .opacity(0.5)    // 將圖片淡化作為底圖
                    .overlay(描繪特徵點(正規化點陣列: 點座標陣列))    // 第4段
                    .onTapGesture {
                        相簿圖片 = nil
                        點座標陣列 = []
                    }
                if 點座標陣列.isEmpty {
                    ProgressView()
                        .scaleEffect(2.5)
                }
            }
        }
        Spacer()
    }
}

// 第4段
struct 描繪特徵點: View {
    let 正規化點陣列: [CGPoint]
    var body: some View {
        Canvas { 圖層, 尺寸 in
            // print(尺寸)
            let 圖寬 = 尺寸.width
            let 圖高 = 尺寸.height
            var 畫筆 = Path()
            for 單點 in 正規化點陣列 {
                let 點座標 = CGPoint(
                    x: 圖寬 * 單點.x, 
                    y: 圖高 - 圖高 * 單點.y)
                畫筆.move(to: 點座標)
                畫筆.addArc(
                    center: 點座標, 
                    radius: 3.0, 
                    startAngle: .zero, 
                    endAngle: .degrees(360), 
                    clockwise: false)
            }
            圖層.fill(畫筆, with: .color(.red))
        }
    }
}

// 第5段
struct 網址抓圖: View {
    @Binding var 圖片: UIImage?
    @State var 網址: String = ""
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.gray.opacity(0.5))
                .frame(height: 50)
            HStack {
                Image(systemName: "photo.fill")
                    .font(.system(size: 24))
                TextField("輸入圖片網址", text: $網址, prompt: Text("https://"))
                    .font(.system(size: 20))
                    .background(Color.white)
                    .textFieldStyle(.roundedBorder)
                    .cornerRadius(5.0)
                    .onChange(of: 網址) { 新網址 in
                        Task {
                            if let myURL = URL(string: 新網址) {
                                let (原始資料, _) = try await URLSession.shared.data(from: myURL)
                                if let 格式轉換 = UIImage(data: 原始資料) {
                                    圖片 = 格式轉換
                                } else {
                                    print("非圖片網址，請重新輸入。")
                                }
                            } else {
                                print("網址格式錯誤，請重新輸入。")
                            }
                        }
                    }
            }
            .padding()
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(照片掃描())

1. AI 視覺辨識的過程，通常會將畫面分區，從大範圍逐步縮小到臉部，找出臉部外框，然後再進一步從外框範圍內找出五官位置，這與AI背後的機器學習訓練過程有關。
   
2. 我們的眼睛是怎麼辨識人臉呢？似乎和AI不同，我們通常是先看出眼睛、鼻子、嘴巴等五官，然後才在心中組成臉形。
   
3. 如果AI視覺臉部外框找錯位置，辨識五官就會一錯再錯，如下圖：
   
   
4. 此例（上圖）主控台輸出的處理結果如下，外框辨識的信心程度是1.0 (100%)，臉部五官信心程度約為0.89 (89%)，表示很有信心。

   處理結果：[<vnfaceobservation: 0x15a94ae40=""> 0897808B-AF8E-4E78-AAAC-C5CE3F6AC493 VNDetectFaceRectanglesRequestRevision2 confidence=1.000000 boundingBox=[0.625709, 0.126032, 0.270598, 0.360797] VNFaceLandmarks2D [VNRequestFaceLandmarksConstellation76Points, confidence=0.891891]]</vnfaceobservation:>

   
   
5. 本節使用的VNDetectFaceLandmarksRequest，目前是第3版(revision 3)，有76個特徵點；之前第2版有65個特徵點。顯然未來還有機會提升版本，強化功能與精準度。
   
6. 本節範例所使用圖片網址如下：
   
   • https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Face_Measurements_Lombroso's_method.jpg/1920px-Face_Measurements_Lombroso's_method.jpg
   
   
   • https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80
   
   
7. 本節AI所辨識的臉部五官，並未包含額頭與耳朵，為什麼會這樣？
   
8. 有了臉部五官這76個特徵點，是不是就能判別各種不同表情（高興、憤怒、厭惡、悲傷…）？
   
9. 這76個特徵點對每個人都是獨一無二的嗎？也就是說，利用這76點，就能夠辨識出每一個人嗎？
   
10. 人臉辨識的有趣應用（Face8 台灣臉霸），想想看背後的原理。https://kikinote.net/160586