Paid subscribers may notice that there were only 5 Daily Coding Tips last week. I’ve decided that switching to weekdays allows me to keep up with the pace of work more easily, so I’ll now be using the weekends to plan posts for the following week.
The Colormind API uses Deep Learning to generate a colour scheme from whatever colours you give to it.
Unfortunately the API uses HTTP not HTTPS, so you will need to add the App Transport Security capability to your app project. The domain colormind.io will need to be excluded from Apple’s App Transport Security requirement, which usually requires all connections use HTTPS.
Now that I have the ability to send requests to the API, I need my ViewModel
.
This will not build yet, as I still need to define the asynchronous getResponse
function that I am calling in the public getSchemeColours
function. What it does should be obvious though. It sends a request to the Colormind API server and then sets 5 local properties to the colour scheme provided in the response.
I’m going to start by defining the request that I’ll send to the API. Here’s an example request structure from the API documentation:
{
"input": [
[44, 43, 44],
"N",
"N",
"N",
[90, 83, 82]
],
"model": "default"
}
There are multiple colour models that can be used with the API, but I’ll just be using the default.
As you can see, the input takes an array that contains any number of integer arrays. The integer arrays represent an RGB colour with a red, green and blue value between zero and the maximum 8-bit unsigned integer value 255. What makes this complicated is the array can also contain a string "N"
which tells the API I want that gap to be filled with an AI generated colour.
This makes this complicated for the Codable
structure for a Request
, because [Any] is not a Codable
array type.
What I’ll do instead is create an enum that can represent an integerArray
or a string
, with a custom decoding initialiser and encode function that decides which type to use.
I’ve added a static property called unknown that stores the expected .string("N")
value, as this makes it easy not to repeat myself when I end up creating an array with 3 of them.
Now that I have my request I can get a response.
This relies on a less complicated Codable
type called Response
, which only expects a result array that contains each colour as an integer array of 3 numbers. To make things easier for myself I’ve added a function called schemeColour(atIndex:)
that converts these 3-integer arrays back into a Color
that I can display. I’ve made the Color
optional so that I can ensure that there is actually an array at the given position and also that it contains 3 integers as I expect.
Now I can finally add my user interface.
This will allow the selection of the red, green and blue values for the two input colours, displaying each of them in its own Section
of a Form
.
At the bottom I have a Button
that calls the public function getSchemeColours
, which itself is not asynchronous because it wraps the call to await getResponse
in a Task
.
Here’s what it should look like: