Skip to content
This repository has been archived by the owner on Jan 22, 2021. It is now read-only.

Commit

Permalink
Merge pull request #67 from IBM/readme
Browse files Browse the repository at this point in the history
readme tweaks
  • Loading branch information
dokun1 authored May 24, 2018
2 parents 8805731 + 4efd13a commit dad11aa
Showing 1 changed file with 60 additions and 34 deletions.
94 changes: 60 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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](https://itunes.apple.com/us/app/watsonml-visrec-game/id1387609935), 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 belwo for more information.
Our application has been published to the App Store under the name [WatsonML](https://itunes.apple.com/us/app/watsonml-visrec-game/id1387609935), 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.

Expand Down Expand Up @@ -62,50 +62,64 @@ carthage update --platform iOS
### Setting Up Your [Kitura](http://kitura.io) Server

1. Go to the [IBM Cloud console](https://console.bluemix.net), and click Create Resource.
2. Search for "Cloudant NoSQL DB" and create a service. Take note of the name of the created service.
<p align="center">
<img src="./images/cloudantChoice.png" width=300>
</p>

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

<p align="center">
<img src="./images/cloudantChoice.png" width=300>
</p>

3. 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.

4. Do the same thing for a Push Notifications service as well.
<p align="center">
<img src="./images/pushNotificationsChoice.png" width=300>
</p>

<p align="center">
<img src="./images/pushNotificationsChoice.png" width=300>
</p>

(**to set up push notifications with your app, you will need to follow the [guide](https://console.bluemix.net/docs/services/mobilepush/index.html#gettingstartedtemplate) for embedding them into your app**)
> To set up push notifications with your app, you will need to follow the [guide](https://console.bluemix.net/docs/services/mobilepush/index.html#gettingstartedtemplate) for embedding them into your app
5. After cloning this repository, go to `Server/rainbow-server` from the terminal.
6. Run `swift package generate-xcodeproj` which creates the `rainbow-server.xcodeproj` file.

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

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

```json
{
"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"
```json
{
"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`.
```

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`.

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

9. 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.
Expand All @@ -115,23 +129,35 @@ From this point forward, you should be able to make valid calls to your Kitura A
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`
a. `Apple.zip`
b. `Pear.zip`
c. `Banana.zip`

2. If you have already created an account on [IBM Cloud](https://console.bluemix.net), then go to [Watson Studio](https://dataplatform.ibm.com) and log in with the same credentials.

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

<p align="center">
<img src="./images/watsonNewProject.png" width=300>
<img src="./images/VisualRecognition.png" width=300>
</p>

4. 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.

5. 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.

6. As the folders upload, drag each of them to the center of the screen, and the classes should be automatically created for you.
7. 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.
8. Click the Train Model button. Go get a cup of coffee while you wait for this to finish.
9. 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. 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.

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

9. 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.

10. Replace the model at [iOS/rainbow/Model/ProjectRainbowModel_1753554316.mlmodel](iOS/rainbow/Model/ProjectRainbowModel_1753554316.mlmodel) with the model you just downloaded.

11. Update the JSON file that lists the objects [iOS/rainbow/Config/GameObjects.json](iOS/rainbow/Config/GameObjects.json)

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

### Testing The App
Expand Down

0 comments on commit dad11aa

Please sign in to comment.