Image Detection using SwiftUI and CoreML

Ashish Langhe
3 min readDec 1, 2023

--

Introduction

In the dynamic landscape of iOS development, the fusion of SwiftUI’s aesthetic prowess with CoreML’s precision heralds a new era. In this immersive guide, we embark on a journey to construct an advanced image detection application. The cornerstone of our endeavor is the implementation of the Resnet50 model for meticulous image classification. Join us as we navigate through the intricacies of creating a sophisticated iOS application that seamlessly integrates SwiftUI’s visual elegance with the analytical intelligence of CoreML.

Setting the Stage

Project Inception: Our initial step involves the establishment of the SwiftUI project. Initiating a new SwiftUI project named “IdentifyImageApp,” the ContentView takes center stage, serving as the canvas where the symphony of SwiftUI and CoreML unfolds.

@main
struct IdentifyImageApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}

The ContentView

Architecting a Seamless User Experience: Architected as a symphony of visual and functional elements, ContentView presents a horizontally scrollable gallery of images. The “Catch” button serves as the maestro, initiating the image detection process with each tap, while the detected label gracefully descends onto the stage below.

struct ContentView: View {
// ...

var body: some View {
NavigationView {
VStack {
// ... Scrollable image list

Button("Catch") {
self.imageDVM.detect(self.selectedImage)
}
.padding()
.background(Color.blue)
.foregroundColor(Color.white)
.cornerRadius(20)

Text(self.imageDVM.getDetect)
.padding()
}
}
.navigationTitle("SwiftUI with CoreML")
}
}

Image Detection Logic

Precision in Execution: The crux of our narrative unfolds within the realms of the ImageDetectManager and ImageDetectVM classes. Here, the Resnet50 model from CoreML engages in a meticulous analysis of selected images, delivering insights through discerning labels.

class ImageDetectManager {
// ...

let model = Resnet50()

func detectImage(_ img: UIImage) -> String? {
// ... CoreML image detection logic
}
}

Scaling Images and Pixel Buffer Conversion

Bridging the CoreML Divide: Here we introduces extensions that gracefully resize images and seamlessly convert them into CVPixelBuffers. This ensures an unobtrusive bridge between SwiftUI’s visual realm and the analytical power of CoreML.

extension UIImage {
func resizeImage(targerS: CGSize) -> UIImage {
// ... Image resizing and conversion logic
return newImage!
}
}

Conclusion

In the culmination of our exploration, we witness the seamless integration of visual elegance and analytical depth. SwiftUI and CoreML converge to deliver a sophisticated image detection application, where users engage with precision and witness the analytical prowess of CoreML as they interact with the app.

This narrative serves as a testament to the successful integration of advanced cognitive frameworks into SwiftUI projects, establishing new avenues for innovation in iOS app development. As you progress, I encourage you to extend beyond these foundations, experiment with diverse CoreML models, and shape your app’s narrative with precision and sophistication.

In your coding endeavors, may the confluence of SwiftUI and CoreML not only meet functional requirements but also elevate the overall user experience.

You can download the GitHub code for the above Image Detection example using SwiftUI & CoreML.

Happy coding..!!

--

--

Ashish Langhe

I'm Ashish Langhe, a Senior Software Engineer with over 7+ years of expertise in developing native and cross-platform mobile applications.