{"id":1998,"date":"2019-06-06T16:25:09","date_gmt":"2019-06-06T13:25:09","guid":{"rendered":"https:\/\/imagga.com\/blog\/?p=1998"},"modified":"2019-06-06T16:23:55","modified_gmt":"2019-06-06T13:23:55","slug":"using-alomfire-and-swiftyjson-to-create-an-app-with-image-recognition-capabilities","status":"publish","type":"post","link":"https:\/\/imagga.com\/blog\/using-alomfire-and-swiftyjson-to-create-an-app-with-image-recognition-capabilities\/","title":{"rendered":"Recognizing Objects in House Interior and Recommending Products with Image Recognition"},"content":{"rendered":"
\r\n

[vc_row][vc_column width=”2\/3″][vc_column_text]
There is a saying that If you want to become an expert of a field, you have to be a master of classification. Photographers can tell if their latest picture was beautiful or not. Musicians can classify what sounds great. Good developers can smell a good code snippet and a bad one.<\/p>\r\n

Categorizations can take many hours of training for humans. Luckily, in the age of machine learning, the machines can help and save a ton of labor time for us. Today, we are going to got our feet wet by creating a photo categorizer app from scratch.<\/p>\r\n

The mobile app we\u2019re building is a demo. You can use it as a foundation for more complex photo organization application or as functionality within another specific application. It will take one image selected by the user, upload to Imagga APIs and categorize it. This is the final result:<\/p>\r\n

 <\/p>\r\n

 <\/p>\r\n

\u00a0<\/center>\r\n

 <\/p>\r\n

Source Code<\/h3>\r\n

If you are looking into the code directly, feel free to skip reading and download from the side bar on right side. To get the code running, you will need to sign up with an Imagga Hacker Plan<\/a>\u00a0(free), get the authorization header and replace \u2018YOUR_AUTHORIZATION_HEADER\u2019 in the code. In ViewController.swift, change \u2018authorizationHeader\u2019 constant to the value of your own key. The key looks like: \u201cBasic xxxx\u201d as in the red square below:<\/p>\r\n

<\/p>\r\n

The Imagga API<\/h3>\r\n

To start, let\u2019s test our Imagga account by using this curl request from command line. This way, we can make sure that our setup is ready for the app. Here is the test image.<\/a><\/p>\r\n

'curl --request GET \\\r\n--url 'https:\/\/api.imagga.com\/v2\/categories\/personal_photos?image_url=https%3A%2F%2Fimagga.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F01%2Fentrywayheroscaled.jpg' \\\r\n--header 'accept: application\/json' \\\r\n--header 'authorization:YOUR_AUTHORIZATION_HEADER''<\/code><\/pre>\r\n
After running the code above, we should got the result like this:<\/p>\r\n
{\"result\":{\"categories\":[{\"confidence\":99.9999542236328,\"name\":{\"en\":\"interior objects\"}}]},\"status\":{\"text\":\"\",\"type\":\"success\"}}\r\n<\/code><\/pre>\r\n
Now, we confirmed that the API key works for us. Notice in the above example, we used an URL of the image file. However, the app we are going to build will use an Image file instead of an image URL. So let\u2019s see what the API doc has to say about that.<\/p>\r\n
Navigate to the developer\u2019s page, API Endpoints section and categories subsection: Imagga REST API Documentation<\/a>. We can see it asks us to send a post request to this end point, and the parameter is \u201cimage\u201d and with image file content. Be sure to keep this in mind because we gonna use it later. It\u2019s time to code!<\/p>\r\n
 <\/p>\r\n
<\/center>\r\n
 <\/p>\r\n
iOS Project Setup<\/h3>\r\n
Create a Xcode project, give it a name \u2018Imagga\u2019, select \u2018Single View App\u2019 and choose Swift as the language. In order to make the process faster, we are going to use two libraries: \u2018Alamofire\u2019 and \u2018SwiftyJSON\u2019. Make sure you have a podfile, set the platform to iOS12 and have the pods like this:<\/p>\r\n
# Pods for Imagga\r\npod 'Alamofire', '~> 4.8'\r\npod 'SwiftyJSON', '~> 4.0'<\/code><\/pre>\r\n
We are going to use \u2018Alamofire\u2019 for uploading and \u2019SwiftyJSON\u2019 for parsing the json responses. To manage the libraries, we use cocoapods. Make sure you have installed both pods before moving to the next section.<\/p>\r\n
A Simple Upload in Swift<\/h3>\r\n
First thing first: Upload image to our API. Open \u2018ViewController.swift\u2019 and add the following below<\/p>\r\n
import SwiftyJSON\r\nimport Alamofire<\/code><\/pre>\r\n
This will let you use the Alamofire module in your code. Next, create a function \u2018sendImageToServer(image: UIImage)\u2019 and add the following to it:<\/p>\r\n
func sendImageToServer(image: UIImage) {\r\n    guard let imageData = image.jpegData(compressionQuality: 0.5) else {\r\n        print(\"no image data find\")\r\n        return\r\n    }\r\n    \r\n    upload(multipartFormData: { (multipartFormData) in\r\n        multipartFormData.append(imageData,\r\n                                 withName: \"image\",\r\n                                 fileName: \"image.jpg\",\r\n                                 mimeType: \"image\/jpeg\")\r\n    },\r\n           to: \"https:\/\/api.imagga.com\/v2\/categories\/personal_photos\",\r\n           headers: [\"Authorization\": authorizationHeader,\r\n                     \"accept\": \"application\/json\"],\r\n           encodingCompletion: {encodingResult in\r\n            switch encodingResult {\r\n            case .success(let upload, _, _):\r\n                upload.responseJSON { response in\r\n                    debugPrint(response)\r\n                }\r\n            case .failure(let encodingError):\r\n                print(encodingError)\r\n            }})\r\n}\r\n<\/code><\/pre>\r\n
    \r\n
  1. First, reduced the compress quality of the image to 0.5, so the file size will be smaller when we upload it to server.<\/li>\r\n
  2. Upload an image named \u201cimage.jpg\u201d and with a parameter name \u2018image\u2019 \u2014\u2014 this is very import. If you recall from the Imagga API section, in order to upload a file, the parameter name we have to use is \u201cimage\u201d.<\/li>\r\n
  3. Send the file to end point: https:\/\/api.imagga.com\/v2\/categories\/personal_photos<\/a>, make sure the authorizationHeader is setup correctly in the headers.<\/li>\r\n
  4. Print the responses.<\/li>\r\n<\/ol>\r\n
    In order to test this upload function, let\u2019s grab an image file from the project. You can download it here<\/a> and add it to your Xcode project. After it\u2019s added, let\u2019s do a test to make sure our upload function works. Add the following into \u2018viewDidLoad()\u2019:<\/p>\r\n
    override func viewDidLoad() {\r\n    super.viewDidLoad()\r\n    \/\/ Do any additional setup after loading the view, typically from a nib.\r\n    \r\n    guard let image = UIImage(named: \"entrywayheroscaled.jpg\") else {\r\n        print(\"no image found\")\r\n        return\r\n    }\r\n    sendImageToServer(image: image)\r\n}\r\n<\/code><\/code><\/pre>\r\n
    and we should see this response from the server<\/p>\r\n
    [Result]: SUCCESS: {\r\n    result =     {\r\n        categories =         (\r\n                        {\r\n                confidence = \"99.9999542236328\";\r\n                name =                 {\r\n                    en = \"interior objects\";\r\n                };\r\n            }\r\n        );\r\n    };\r\n    status =     {\r\n        text = \"\";\r\n        type = success;\r\n    };\r\n}\r\n<\/code><\/code><\/pre>\r\n
    In Raywenderlich.com<\/a>, there\u2019s a more detailed tutorial of how to use Alamofire, SwiftyJSON with Imagga API here: https:\/\/www.raywenderlich.com\/35-alamofire-tutorial-getting-started<\/a>. Since we\u2019re more focused on using the API, I\u2019ll leave the Swift side\u2014digging to you:)<\/p>\r\n
    Handle Return Value<\/h3>\r\n
    The next step after we have printed the response is to handle it and save it to our data module. Add the following function to ViewController.swift<\/p>\r\n
    func handleResponse(response: DataResponse<Any>) {\r\n    guard response.result.isSuccess,\r\n        let value = response.result.value else {\r\n            print(\"Error while uploading file: \\(String(describing: response.result.error))\")\r\n            return\r\n    }\r\n    \r\n    self.personalPhotos = (JSON(value)[\"result\"][\"categories\"].array?.map { json in\r\n        PersonalPhoto(name: json[\"name\"][\"en\"].stringValue,\r\n                      confidence: json[\"confidence\"].doubleValue)\r\n        })!\r\n    \r\n}\r\n<\/code><\/pre>\r\n
    and in \u2018sendImageToServer(image: UIImage)\u2019 function, add<\/p>\r\n
    self.handleResponse(response: response)<\/code><\/p>\r\n
    after \u2018debugPrint(response)\u2019.<\/p>\r\n
    Inside the ViewController class, add<\/p>\r\n
    var personalPhotos: [PersonalPhoto] = []<\/code><\/p>\r\n
    before \u2018viewDidLoad()\u2019 function.<\/p>\r\n
    Here\u2019s a step-by-step explanation of the code above:<\/p>\r\n
      \r\n
    1. Check that the response was successful. If not, print the error.<\/li>\r\n
    2. Use \u2018SwiftyJSON\u2019 to retrieve the \u2018categories\u2019 array from the response. It iterates through each of the categories and transforms it to a PersonalPhoto struct.<\/li>\r\n
    3. Save the array into \u2018self.personalPhotos\u2019.<\/li>\r\n
    4. Put it inside a call back block after sending the image.<\/li>\r\n
    5. Add a variable in ViewController to save the categories.<\/li>\r\n<\/ol>\r\n
      We don\u2019t have a PersonalPhoto struct yet, so let\u2019s create one. Create a new file named: PersonalPhoto.swift. Add the following to it:<\/p>\r\n
      struct PersonalPhoto {\r\n    var name: String\r\n    var confidence: Double\r\n}\r\n<\/code><\/pre>\r\n
      Run the project, and set a breakpoint right after we assigned value to self.personalPhotos. We should see one PersonalPhoto object in the array.<\/p>\r\n
      <\/p>\r\n
      That means we are good for upload image and parse the responses. Now it is time to show the results in UI.<\/p>\r\n
      Connect UI in Xcode<\/h3>\r\n
      Let\u2019s see our app UI in the Main.storyboard file.<\/p>\r\n
      <\/p>\r\n
      There are three main items: 1. Image view, 2 Table view 3. Select button.<\/p>\r\n
      Here are my constrains:<\/p>\r\n