Flutter图像显著性检测插件apple_vision_saliency的使用

apple_vision_saliency 是一个用于在 Flutter 应用中实现苹果视觉显著性检测功能的插件。通过该插件，您可以利用 Apple 的 Vision 框架进行图像显著性检测。

插件信息

Apple Vision Saliency Detection 是一个使 Flutter 应用能够使用 Apple Vision Saliency Segmentation 的插件。

注意： 此插件并非由 Apple 赞助或维护。作者是一些希望为 macOS 开发类似 Google ML Kit 的开发者。

系统需求

MacOS

• 最低 macOS 部署目标：10.15
• Xcode 13 或更新版本
• Swift 5
• ML Kit 仅支持 64 位架构（x86_64 和 arm64）

iOS

• 目前不支持开发
• 最低 iOS 部署目标：13.0
• Xcode 13 或更新版本
• Swift 5
• ML Kit 仅支持 64 位架构（x86_64 和 arm64）

使用步骤

首先，在 Dart 文件中导入 apple_vision_saliency 包：

import 'package:apple_vision_saliency/apple_vision_saliency.dart';

初始化控制器和设置相机

在 initState 方法中初始化 AppleVisionSaliencyController 控制器，并设置相机。

class VisionSaliency extends StatefulWidget {
  const VisionSaliency({
    Key? key,
    this.onScanned
  }):super(key: key);

  final Function(dynamic data)? onScanned; 

  [@override](/user/override)
  _VisionSaliency createState() => _VisionSaliency();
}

class _VisionSaliency extends State<VisionSaliency>{
  final GlobalKey cameraKey = GlobalKey(debugLabel: "cameraKey");
  late AppleVisionSaliencyController visionController = AppleVisionSaliencyController();
  InsertCamera camera = InsertCamera();
  Size imageSize = const Size(640,640*9/16);
  String? deviceId;
  bool loading = true;

  List<Uint8List?>? saliencyImage;
  late double deviceWidth;
  late double deviceHeight;

  [@override](/user/override)
  void initState() {
    camera.setupCameras().then((value){
      setState(() {
        loading = false;
      });
      camera.startLiveFeed((InputImage i){
        if(i.metadata?.size != null){
          imageSize = i.metadata!.size;
        }
        if(mounted) {
          Uint8List? image = i.bytes;
          visionController.processImage(
            SaliencySegmentationData(
              image: rgba2bitmap(image!, imageSize.width.toInt(), imageSize.height.toInt()),//image!, 
              imageSize: i.metadata!.size,
              type: SaliencyType.object
            )
          ).then((data){
            saliencyImage = data;
            setState(() {
              
            });
          });
        }
      });
    });
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    camera.dispose();
    super.dispose();
  }

构建UI

构建一个包含相机预览和显著性检测结果的 UI。

[@override](/user/override)
Widget build(BuildContext context) {
  deviceWidth = MediaQuery.of(context).size.width;
  deviceHeight = MediaQuery.of(context).size.height;
  return ListView(
    children:<Widget>[
      SizedBox(
        width: 320, 
        height: 320*9/16, 
        child: loading?Container():CameraSetup(camera: camera, size: imageSize)
      ),
      if(saliencyImage?[0] != null) SizedBox(
        width: 320, 
        height: 320*9/16,  
        child: Stack(children: [
          Image.memory(
            saliencyImage![0]!,
            fit: BoxFit.fitHeight,
          )
        ],)
      )
    ]
  );
}

加载指示器

创建一个加载指示器以在加载过程中显示。

Widget loadingWidget(){
  return Container(
    width: deviceWidth,
    height: deviceHeight,
    color: Theme.of(context).canvasColor,
    alignment: Alignment.center,
    child: const CircularProgressIndicator(color: Colors.blue)
  );
}

示例代码

以下是一个完整的示例代码，展示了如何使用 apple_vision_saliency 插件进行图像显著性检测。

import 'package:apple_vision_saliency/apple_vision_saliency.dart';
import 'package:flutter/material.dart';
import '../camera/camera_insert.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'camera/input_image.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const VisionSaliency(),
    );
  }
}

class VisionSaliency extends StatefulWidget {
  const VisionSaliency({
    Key? key,
    this.onScanned
  }):super(key: key);

  final Function(dynamic data)? onScanned; 

  [@override](/user/override)
  _VisionSaliency createState() => _VisionSaliency();
}

class _VisionSaliency extends State<VisionSaliency>{
  final GlobalKey cameraKey = GlobalKey(debugLabel: "cameraKey");
  late AppleVisionSaliencyController visionController = AppleVisionSaliencyController();
  InsertCamera camera = InsertCamera();
  Size imageSize = const Size(640,640*9/16);
  String? deviceId;
  bool loading = true;

  List<Uint8List?>? saliencyImage;
  late double deviceWidth;
  late double deviceHeight;

  [@override](/user/override)
  void initState() {
    camera.setupCameras().then((value){
      setState(() {
        loading = false;
      });
      camera.startLiveFeed((InputImage i){
        if(i.metadata?.size != null){
          imageSize = i.metadata!.size;
        }
        if(mounted) {
          Uint8List? image = i.bytes;
          visionController.processImage(
            SaliencySegmentationData(
              image: rgba2bitmap(image!, imageSize.width.toInt(), imageSize.height.toInt()),//image!, 
              imageSize: i.metadata!.size,
              type: SaliencyType.object
            )
          ).then((data){
            saliencyImage = data;
            setState(() {
              
            });
          });
        }
      });
    });
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    camera.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    deviceWidth = MediaQuery.of(context).size.width;
    deviceHeight = MediaQuery.of(context).size.height;
    return ListView(
      children:<Widget>[
        SizedBox(
          width: 320, 
          height: 320*9/16, 
          child: loading?Container():CameraSetup(camera: camera, size: imageSize)
        ),
        if(saliencyImage?[0] != null) SizedBox(
          width: 320, 
          height: 320*9/16,  
          child: Stack(children: [
            Image.memory(
              saliencyImage![0]!,
              fit: BoxFit.fitHeight,
            )
          ],)
        )
      ]
    );
  }

  Widget loadingWidget(){
    return Container(
      width: deviceWidth,
      height: deviceHeight,
      color: Theme.of(context).canvasColor,
      alignment: Alignment.center,
      child: const CircularProgressIndicator(color: Colors.blue)
    );
  }
}