Noob seeking help, visionkit implementation!

Hi all apple devs! I am a young developer who is completely new to everything programming. I am currently trying to develop an app where I want to use visionkit, but I can't for the life of me figure out how to implement its features. I've been stuck on this for several days, so I am now resorting to asking all of you experts for help! Your assistance would be immensely appreciated!

I started to develop the app trying to exclusively use swiftUI to futureproof my app. Upon figuring out what visionkit is, to my understanding it is more compatible with UIkit? So I rewrote the part of my code that will use visionkit into a UIkit based view, to simplify the integration of visionkits features. It might just have overcomplicated my code? Can visionkit be easily implemented using only swiftUI? I noticed in the demo on the video tutorial the code is in a viewcontroller not a contentview, is this what makes my image unresponsive?

My image is not interactable like her demo in the video, where in my code do I go wrong? Help a noob out!

The desired user flow is like this: User selects an image through the "Open camera" or "Open Camera Roll" buttons. Upon selection the UIkit based view opens and the selected image is displayed on it. (This is where I want to implement visionkit features) User interacts with the image by touching on it, if touching on a subject, the subject should be lifted out of the rest of the image and be assigned to the editedImage, which in turn displays only the subject without the background on the contentview. (For now the image is assigned to editedimage by longpressing without any subjectlifting since I cant get visionkit to work as I want)

Anyways, here's a code snippet of my peculiar effort to implement subject lifting and visionkit into my app:

Replies

import SwiftUI
import VisionKit
import UIKit

struct ContentView: View {
    @State private var image: UIImage?
    @State private var selectedTab = 0
    @State private var showingCameraPicker = false
    @State private var showingCameraRollPicker = false
    @State private var groups: [String: [UIImage]] = [:]
    @State private var selectedGroup: String?
    @State private var groupName = ""
    @State private var showingCreateGroup = false
    @State private var showingGroupSelection = false
    @State private var showAlert = false
    @State private var alertMessage = ""
    @State private var complementaryColor: Color?
    @State private var showMatches = false // Control to show matched images with white borders
    @State private var isShowingImageView = false // State variable to control the image display view
    @State private var editedImage: UIImage? // State variable to hold the edited image

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                VStack {
                    Button("Open Camera", action: openCamera)
                        .padding()

                    Button("Open Camera Roll", action: openCameraRoll)
                        .padding()
                    
                    // Display the edited image above the navigation bar
                    if let editedImage = editedImage {
                        Image(uiImage: editedImage)
                            .resizable()
                            .scaledToFit()
                            .padding()
                    }
                }
                .padding()
                .navigationBarTitle("Home") // Set the navigation title
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            .tag(0)

            NavigationView {
                GroupList(groups: $groups, selectedGroup: $selectedGroup)
                    .navigationBarTitle("Groups")
                    .navigationBarItems(trailing:
                        Button("Create Group", action: {
                            showingCreateGroup = true
                        })
                    )
            }
            .tabItem {
                Label("Groups", systemImage: "folder")
            }
            .tag(1)
        }
                .sheet(isPresented: $showingCameraPicker, onDismiss: {
                    if let _ = image {
                        print("Camera picker dismissed with selected image. Image variable after selecting:", image)
                        isShowingImageView = true
                    } else {
                        print("Camera picker dismissed without selecting an image.")
                    }
                }) {
                    ImagePicker(image: self.$image, sourceType: .camera)
                }
                .sheet(isPresented: $showingCameraRollPicker, onDismiss: {
                    if let _ = image {
                        print("Camera roll picker dismissed with selected image. Image variable after selecting:", image)
                        isShowingImageView = true
                    } else {
                        print("Camera roll picker dismissed without selecting an image.")
                    }
                }) {
                    ImagePicker(image: self.$image, sourceType: .photoLibrary)
                }
        .sheet(isPresented: $showingCreateGroup) {
            CreateGroupView(groupName: $groupName, groups: $groups, showingCreateGroup: $showingCreateGroup)
        }
        .sheet(isPresented: $showingGroupSelection) {
            GroupSelectionView(groups: $groups, selectedGroup: $selectedGroup, image: image, showingGroupSelection: $showingGroupSelection)
        }
        .alert(isPresented: $showAlert) {
            Alert(title: Text("No color matches"), message: Text(alertMessage), dismissButton: .default(Text("OK")))
        }
        .sheet(isPresented: $isShowingImageView) {
            if let image = image {
                ImageViewControllerWrapper(image: image)
                    .onLongPressGesture {
                        self.editedImage = image
                        print("Original image long-pressed. Assigning to editedImage.")
                        isShowingImageView = false // Close the ImageView
                    }
            }
        }

        .onChange(of: image) { newImage, _ in
        }

        .onAppear {
            // Print statements for debugging
            print("ContentView appeared.")
        }
        .onDisappear {
            // Print statements for debugging
            print("ContentView disappeared.")
        }
    }

    func openCamera() {
        showingCameraPicker = true
    }

    func openCameraRoll() {
        showingCameraRollPicker = true
    }
}

class ImageViewController: UIViewController, ImageAnalysisInteractionDelegate {
    var imageView: UIImageView!
    var image: UIImage? {
        didSet {
            imageView?.image = image
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        imageView.isUserInteractionEnabled = true
        print("User interaction enabled:", imageView.isUserInteractionEnabled)
        view.addSubview(imageView)
        imageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: view.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        // Configure ImageAnalysisInteraction
        let interaction = ImageAnalysisInteraction()
        interaction.delegate = self
        interaction.preferredInteractionTypes = [.imageSubject]
        imageView.addInteraction(interaction)
    }

    // Implement delegate method to handle subject selection
    func subject(_ interaction: ImageAnalysisInteraction, didSelect subject: ImageAnalysisInteraction.Subject) {
        // Handle the selection of the subject here
        print("Selected subject:", subject)
    }

    // Additional debugging
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        print("ImageViewController appeared")
    }
}

struct ImageViewControllerWrapper: UIViewControllerRepresentable {
    var image: UIImage?

    func makeUIViewController(context: Context) -> ImageViewController {
        let viewController = ImageViewController()
        viewController.image = image
        return viewController
    }

    func updateUIViewController(_ uiViewController: ImageViewController, context: Context) {
        uiViewController.image = image
    }
}

Hi, it looks like you haven't made an analysis.
You need to create an ImageAnalyzer, and analyze the image, to make an image analysis then set that on the interaction. This WWDC talk should help. https://developer.apple.com/videos/play/wwdc2022/10026/