Code Monkey home page Code Monkey logo

ibm / rainbow Goto Github PK

View Code? Open in Web Editor NEW
44.0 25.0 43.0 42.87 MB

Use Watson Visual Recognition and Core ML to create a Kitura-based iOS game that has a user search for a predetermined list of objects

Home Page: https://developer.ibm.com/patterns/build-an-ios-game-powered-by-core-ml-and-watson-visual-recognition/

License: Apache License 2.0

Swift 96.64% Shell 3.09% Dockerfile 0.27%
call-for-code watson-visual-recognition kitura ios-game lumina cloudant watson-studio swift ibm-cloud ibmcode

rainbow's Introduction

Build an iOS game powered by Core ML and Watson Visual Recognition

WARNING: This repository is no longer maintained.

This repository will not be updated. The repository will be kept available in read-only mode.

This code pattern is an iOS timed game that has users find items based on a list of objects developed for Apple phones. It is built to showcase visual recognition with Core ML in a fun way. This project repository consists of an iOS app and a backend server. Both components are written in the Swift programming language and leverages the Kitura framework for the server side. Cloudant is also used to persist user records and best times, and Push Notifications are used to let a user know when they have been removed from the top of the leaderboard.

Our application has been published to the App Store under the name WatsonML, and we encourage folks to give it a try. It comes with a built-in model for identifying six objects; shirts, jeans, apples, plants, notebooks, and lastly a plush bee. Our app could not have been built if not for fantastic pre-existing content from other IBMers. We use David Okun's Lumina project, and Anton McConville's Avatar generator microservice, see the references below for more information.

We include instruction on how to modify the application to fit your own needs. Feel free to fork the code and modify it to create your own conference swap game, scavenger hunt, guided tour, or team building or training event.

When the reader has completed this Code Pattern, they will understand how to:

  • Create a custom visual recognition model in Watson Studio
  • Develop an Swift based iOS application
  • Deploy a Kitura based leaderboard
  • Detect objects with Core ML and Lumina

Sample output and gameplay

Flow

  1. Generate a Core ML model using Watson Visual Recognition and Watson Studio.
  2. User runs the iOS application for the first time.
  3. The iOS application calls out to the Avatar microservice to generate a random username.
  4. The iOS application makes a call to Cloudant to create a user record.
  5. The iOS application notifies the Kitura service that the game has started.
  6. The user aims the phone's camera as they search for items, using Core ML to identify them.
  7. The user receives a push notification if they are bumped from the leaderboard.

Included components

  • Core ML: Is a framework that will allow integration of machine learning models into apps.
  • Lumina: Lumina is an open-source Swift framework that allows you to stream video frames through a Core ML model and get instant results.
  • Kitura: Kitura is a free and open-source web framework written in Swift, developed by IBM and licensed under Apache 2.0. It’s an HTTP server and web framework for writing Swift server applications.
  • Watson Visual Recognition: Visual Recognition understands the contents of images - visual concepts tag the image, find human faces, approximate age and gender, and find similar images in a collection.

Featured technologies

  • Artificial Intelligence: Artificial intelligence can be applied to disparate solution spaces to deliver disruptive technologies.
  • Mobile: Systems of engagement are increasingly using mobile technology as the platform for delivery.

Prerequisites

The following are prereqs to start developing the application

  • Xcode
  • IBM Cloud account
  • Carthage: Download the latest release under Downloads select Carthage.pkg and install it.

Steps

Setting up your iOS app

Clone the project

git clone https://github.com/IBM/rainbow/

Build the project by navigating to the iOS folder on your terminal, and typing:

carthage update --platform iOS

Setting Up Your Kitura Server

  1. Go to the IBM Cloud console, and click Create Resource.

  2. Search for "Cloudant NoSQL DB" and create a service. Take note of the name of the created service.

  1. Go to your Cloudant service home page, and click the green Launch button. Click the database icon on the left, and along the top, click Create Database. Name it routes-users, and click Create Document. Edit your JSON to include a "username" and a "password" of your choosing. If you do this, you will need this when you set up your iOS application.

  2. Do the same thing for a Push Notifications service as well.

To set up push notifications with your app, you will need to follow the guide for embedding them into your app

  1. After cloning this repository, go to Server/ from the terminal.

  2. Run swift package generate-xcodeproj which creates the rainbow-server.xcodeproj file.

  3. In the config/ directory, find the file localdev-config.json that looks like so:

    {
        "Cloudant NoSQL DB-kl": {
            "username": "hot",
            "password": "dog",
            "host": "nothotdog",
            "port": 443,
            "url": "hotdog url"
        },
        "rainbow-server-PushNotifications-r6m1": {
            "appGuid": "hotdog guid",
            "url": "hotdo url",
            "admin_url": "hotdog admin url",
            "appSecret": "hotdog",
            "clientSecret": "not hotdog"
        }
    }

    Update the credentials for the Push Notification and Cloudant service in localdev-config.json. You will also want to make sure that the names are also correct in mappings.json.

  4. Open the project using Xcode by running: open rainbow-server.xcodeproj.

  5. You can build and run the project in Xcode, or use the accompanying runDocker.sh script to test the app in a Docker container.

Setting Up Server/Client Credentials

Though the Visual Recognition component of this application does not require API authentication, they are required if you decide to save your high scores to the API. If you created a username and password in your Cloudant database, complete the following steps:

  1. Open up the Xcode project for your iOS application.

  2. In the Model folder, create a file called WatsonMLClientCredentials.json.

  3. For the cloudant node, update the username and password with the service credentials you installed in localdev-config.json for your server.

  4. For the routes node, update the username and password with the service credentials you created in the database in the server set up tutorial.

From this point forward, you should be able to make valid calls to your Kitura API.

Build Your Own Model

For this, you should pick a theme and set of items -- museum pieces, office hardware, conference booths, whatever you want! As an example, we'll use fruits, and make a model that can distinguish between 3 fruits: apple, pear, and banana.

  1. Take lots of photos of each of them, and organize each set of at least 10 photos into their own folders. Zip each of them up so you have: a. Apple.zip b. Pear.zip c. Banana.zip

  2. If you have already created an account on IBM Cloud, then go to Watson Studio and log in with the same credentials.

  3. Click the New Project button, then click the Visual Recognition option, then click OK.

  1. Pick a project name and a description. If you haven't already created a Cloud Object storage instance, the service should create one for you. Click Ok.

  2. Look on the right hand side of the screen: you should see a label that says "Upload to project". Select all of the .zip folders you previously created and let the folders upload.

  3. As the folders upload, drag each of them to the center of the screen, and the classes should be automatically created for you.

  4. As a bonus, add as many photos as you can to the "Negative" training class. In this example, try to add as many photos as you can that resemble anything that is not an object you want to recognize. In our example, this could be an orange, grapes, or another fruit.

  5. Click the Train Model button. Go get a cup of coffee while you wait for this to finish.

  6. When you refresh the page, click the name of the model underneath Visual Recognition Models. Click the Implementation tab, and then click the Core ML option. Download the model that it tells you to download.

  7. Replace the model at iOS/rainbow/Model/ProjectRainbowModel_1753554316.mlmodel with the model you just downloaded.

  8. Update the JSON file that lists the objects iOS/rainbow/Config/GameObjects.json

  9. If you need icons check out https://thenounproject.com/ - you'll want to find both a colored and white icon for each item!

Testing The App

You should be able to build and run this app on your device by now. Try to hold the "camera" tab in front of one of the objects, and if it detects the object successfully, you are in the clear!

Links

Learn more

  • Artificial Intelligence Code Patterns: Enjoyed this Code Pattern? Check out our other AI Code Patterns.
  • AI and Data Code Pattern Playlist: Bookmark our playlist with all of our Code Pattern videos

License

This code pattern is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.

Apache Software License (ASL) FAQ

rainbow's People

Contributors

antonmc avatar dokun1 avatar imgbot[bot] avatar jamaya2001 avatar kant avatar ljbennett62 avatar sanjeevghimire avatar scottdangelo avatar stevemar avatar stevemart avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rainbow's Issues

Retroactive Logging Addition

I screwed up and didn't add enough logging throughout the server from the beginning. We can add it at different levels throughout the server, but would be good to do so.

Add ability to update username

When you tap the username that is generated for you in the player page, you should be able to edit the name and save it. As of right now, you are not able to update the name.

Leaderboard table view cell images switch around

Whenever you scroll through the table view, sometimes the images aren't caching properly and switch around.

Though they are random generated avatars, they switch around in a way that is unseemly of the app. Try scrolling around the leaderboard a bunch and you'll see them switch.

TypeSafeMiddleware.swift: Use of undeclared type 'TypeSafeMiddleware', Use of undeclared type 'RequestError'

I'm receiving two compile errors in TypeSafeMiddleware.swift: Use of undeclared type 'TypeSafeMiddleware', Use of undeclared type 'RequestError'

public static func handle(request: RouterRequest, response: RouterResponse, completion: @escaping (Self?, RequestError?) -> Void) {

I'm running the latest Xcode, Version 9.4 (9F1027a) and during the Carthage update I was required to use the no binaries option as my Swift is at 4.1.2, whereas the frameworks are at 4.1

carthage update --platform iOS --no-use-binaries

Configure IBM Object Storage with Server

Whenever the server receives a base64 string as an avatar, we should:

  • persist it to object storage
  • update the json with the avatarURL
  • wipe out the base64 string to reduce load on couchDB

I need to look up which repo we need to add for support to this - will comment when I find it.

Swift build error

Hi,

I get the following error when I run "swift build".

/rainbow/Server/.build/checkouts/Kitura-Credentials.git-1137106172743287290/Sources/Credentials/TypeSafeCredentials.swift:48:38: error: use of undeclared type 'TypeSafeMiddleware'
public protocol TypeSafeCredentials: TypeSafeMiddleware, Codable {
                                     ^~~~~~~~~~~~~~~~~~
/rainbow/Server/.build/checkouts/Kitura-Credentials.git-1137106172743287290/Sources/Credentials/TypeSafeCredentials.swift:85:111: error: use of undeclared type 'RequestError'
    public static func handle(request: RouterRequest, response: RouterResponse, completion: @escaping (Self?, RequestError?) -> Void) {
                                                                                                              ^~~~~~~~~~~~
error: terminated(1): /usr/local/Cellar/swift/4.1/Swift-4.1.xctoolchain/usr/bin/swift-build-tool -f /Users/upkar/Documents/code-upkar/rainbow/Server/.build/debug.yaml main output:

Swift version

$ swift --version
Swift version 4.1 (swift-4.1-RELEASE)
Target: x86_64-apple-darwin17.4.0

I am new to swift to fix the code quickly. Thank you for your help !

Install Travis CI

We should be doing the following:

  • Build client for iOS 11.0 Simulator
  • Build client for iOS 11.3 Simulator
  • Build server for Swift 4.1 on macOS
  • Build server for Swift 4.1 on Docker Container (can run with runDocker.sh)
  • Ideally, run Danger with built in SwiftLint and other issues we configure.

Ability to update model using VisualRecognition SDK

As of right now, the only Core ML model available is the one loaded with the app. In addition to shipping with this model, you should be able to update the model with a recognition service if the user would like to do so.

Crash when POST sent to /entries

This only happens when running inside Docker container. You can run this container by using the command ./runDocker.sh in the server root directory.

Logs:

Could not cast value of type 'Foundation.NSNumber' (0x7f5befa7cf70) to 'Swift.Double' (0x7f5beff44dd0).
Aborted

Pretty sure this has to do with the Date Formatter for the startDate object.

"Couldn't connect to the server - keep playing"

I'm unable to connect to the server, debug log shows:

status code during device registration : Optional(201)
error during initial user save: Optional("The operation couldn’t be completed. (rainbow.RainbowClientError error 1.)")

I believe the 201 message indicates that I am connecting to the clouding database ref: https://console.bluemix.net/docs/services/Cloudant/api/database.html#databases

I'm not sure I have the WatsonMLClientCredentials.json credentials correct.

I have set them up (modelled on https://github.com/IBM/rainbow/blob/master/iOS/rainbow/Model/KituraKit/WatsonMLClientCredentials.json) as follows, for the username and password of routes, I used the username & pwd I used when I created the routes-users database, for the cloudant, I used the credentials from the service, I deleted the VR API section

{ "routes":{ "username": ".............", "password": "............" }, "cloudant":{ "username": "............................................................-bluemix", "password": ".................................................................................." } }

Problem starting the app after the first usage

I installed it from the app store and it worked perfectly the first time I tried it.
But after completing the checklist the first time, it has failed to start, stuck with a blue box cycling through "Preparing WatsonML"

I can swipe to the other screens, for the checklist, camera, player, although the camera screen does not show an image and the "Preparing WatsonML" message persists.

I tried uninstalling and reinstalling the app as well.

Using iPhone 6s - iOS 11.3.1
I do have other apps installed using CoreML working OK.

img_78a3a39af27e-1

Create Icon

Need Icon for Rainbow App.
Perhaps IBM Code or something more fun

[email protected] | 58x58 | iPhone Settings, iPad Settings for Retina display
[email protected] | 87x87 | iPhone Settings for Retina display
[email protected] | 80x80 | iPhone Spotlight results, iPad Spotlight results for retina display
[email protected] | 120x120 | iPhone Spotlight results for retina display
[email protected] | 120x120 | iPhone App Icon
[email protected] | 180x180 | iPhone App Icon for Retina display
iTunesArtwork.png | 512x512 | App Submission
[email protected] | 1024x1024 | App Submission

screen shot 2018-04-23 at 4 56 26 pm

Create leaderboard route

Create a leader board API that gives list of avatar, username, time as response order by timestamp descending

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.