The document discusses implementation details of a unidirectional and multidirectional flow architecture in UI development using Reswift, which applies concepts from the Flux and Redux patterns. It also introduces TuriCreate for simplifying custom machine learning model development, specifically for tasks like style transfer, image classification, and recommendation systems. Additionally, it includes code examples and functions for managing application state and processing images within the app.

1. ReSwift
Unidirectional Flow

2. About
Rodrigo Freitas
co-founder at Kobe
rodrigo.freitas@kobe.io

3. Architecture
MVC
MVVM
VIPER
RIBLE
}
ReSwift
Multidirectional
Unidirectional

4. Flux
Pattern for building UI in web application
Born at Facebook

5. Flux core
Make state and state transitions explicit
Enforce unidirectional flow
Separate responsibilities

6. Flux/Redux
Original pattern created by Facebook
Flux pattern + constraints
Flux
Redux
Single Store
Reducers for state updates

7. ReSwift Reactor

8. Action: Initiate a state change.Action is handle by the Reducer
Reducers: Change the state of the application.Reducers is stored in the Store
Store: Hold the application state.Modules and View can subscribe and react to changes.
Components
View: React to store and display the data.View send Actions

9. Unidirectional Flow

10. View

11. Action
View

12. Action
Store
View
State

13. Action
Store
View
Reducer
State
State
Action

14. Action
Store
View
Reducer
Reducer
State
State
Action

15. Action
Store
View
Reducer
Reducer
State
State
Action
State

16. Action
Store
View
Reducer
Reducer
State
State
Action
State
State

17. Action
Store
View
Reducer
Reducer
State
State
Action
State
State

18. Action
Store
View
Reducer
Reducer
State
State
Action
State
State

19. Stylished

21. State
struct AppState: StateType {
}
let filterState: FilterState

22. State
struct FilterState: StateType {
var styles: [String]
var isProcessing: Bool
var selectedIndex: Int
var currentImage: CIImage?
var filteredImage: CIImage?
}

23. Actions
enum FilterAction: Action {
case processing
case done
case applyFilter(image: CIImage)
case newImage(image: CGImage)
case newFilter(index: Int)
}

24. Reducer
func appReducer(action: Action, state: AppState?) -> AppState {
return AppState(
filterState: filterReducer(action: action, state: state?.filterState)
)
}

25. Reducer
func filterReducer(action: Action, state: FilterState?) -> FilterState {
guard let action = action as? FilterAction else { return state ?? FilterState() }
switch action {
case .done:
var newState = state
newState?.isProcessing = false
return newState ?? FilterState()
case .processing:
var newState = state
newState?.isProcessing = true
return newState ?? FilterState()
case .applyFilter(let image):
guard var newState = state else { return FilterState() }
newState.filteredImage = image
return newState
// ………..
}
}

26. Store
let store = Store(reducer: appReducer, state: nil)

27. Send Action
public func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo
info: [String : Any]) {
if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
store.dispatch(FilterAction.newImage(image: image))
}
picker.dismiss(animated: true, completion: nil)
}

28. Subscribe
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Listen for modification on the state
store.subscribe(self)
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
store.unsubscribe(self)
}

29. Listen and react to changes
extension ViewController: StoreSubscriber {
func newState(state: AppState) {
collectionDataSource?.models = state.filterState.styles
collectionView.reloadData()
if let image = state.filterState.filteredImage {
imageView.image = UIImage(ciImage: image)
}
if state.filterState.isProcessing {
startAnimating()
} else {
stopAnimating()
}
}
}

32. Turicreate
Turi Create simplifies the development of custom machine learning models.You
don't have to be a machine learning expert to add recommendations,object
detection,image classification,image similarity or activity classification to your
app.

33. Turicreate
Turi Create simplifies the development of custom machine learning models.You
don't have to be a machine learning expert to add recommendations,object
detection,image classification,image similarity or activity classification to your
app.
Recommender
Image Classification
Object Detection
Style Transfer
Activity Classification
Image Similarity
Classifiers
Text Classifier

34. Style Transfer
import turicreate as tc
# Load the style and content images
styles = tc.load_images('style/')
content = tc.load_images('content/')
# Create a StyleTransfer model
model = tc.style_transfer.create(styles, content)
# Load some test images
test_images = tc.load_images('test/')
# Stylize the test images
stylized_images = model.stylize(test_images)
# Save the model for later use in Turi Create
model.save('mymodel.model')
# Export for use in Core ML
model.export_coreml('MyStyleTransfer.mlmodel')

35. Interactions
model = tc.style_transfer.create(styles, content, max_iterations = 4000)

37. model.export_coreml('./StyleV6.mlmodel', image_shape=(1000,769))

40. static func styling(index: Int,
totalStyles: Int,
cgImage: CGImage,
width: Int,
height: Int, completionHandler: @escaping (CIImage?) -> Void) {
let styleArray = try? MLMultiArray(shape: [totalStyles] as [NSNumber],
dataType: MLMultiArrayDataType.double)
// Clear the array
for i in 0...((styleArray?.count)!-1) {
styleArray?[i] = 0.0
}
// Set the style to use
styleArray?[index] = 1.0
// Apply Style
DispatchQueue.global(qos: .background).async {
let mlModel = StyleV6()
let buffer = StyleCreate.pixelBuffer(cgImage: cgImage, width: width, height: height)
let output = try? mlModel.prediction(image: buffer, index: styleArray!)
let ciImage = CIImage(cvPixelBuffer: (output?.stylizedImage)!)
completionHandler(ciImage)
}
}
Deploy CoreML into iOS app

41. Thanks
• https://github.com/ReSwift/ReSwift
• https://github.com/apple/turicreate/issues/855
• http://blog.benjamin-encz.de/
rodrigo.freitas@kobe.io
• https://apple.github.io/turicreate/docs/userguide/style_transfer/
• https://arxiv.org/pdf/1610.07629.pdf