update Python demo to latest changes in demo repo

Author: steverucker

python-demo/README.md

@@ -4,11 +4,15 @@
 These demo apps showcase the Kairos APIs by giving the user a means to quickly get up and running with our Emotion Analysis and Facial Recognition / Detection APIs.
 
 ## Running the App
-The demo app can easily be run using Docker with the included Dockerfile and docker-compose.yml or locally from your command prompt.
 
 The app is basically a single page application, which is viewed at index.html.
 
-The easiest way to get started is to clone or fork the repo, and add your APP_ID and API_KEY to the app.py file after signing up at [developer.kairos.com](https://developer.kairos.com) 
+The easiest way to get started is to clone or fork the repo, and add your environment, API URL, APP_ID, and API_KEY to the app.py file after signing up at [developer.kairos.com](https://developer.kairos.com) 
+
+    demo_env = "dev, stage, or prod"
+    api_url = "https://api-dev.kairos.com or https://api.kairos.com"
+    app_id = "your-app-id"
+    app_key = "your-app-key"
 
 The webcam functionality requires that your site is secure (https).  In order to run your local install using https, you will need to generate a certificate and a key.  To to this, run this command:
 
@@ -21,42 +25,37 @@ Follow the prompts, and this will generate two files: `cert.pem` and `key.pem`.
 
 ### Run the app locally from your command prompt 
 * make sure Python 2.7 is installed and accessible
-* install Python Flask `pip install flask`
+* if PIP is not installed: `sudo easy_install pip`
+* install Python Flask `sudo pip install flask`
+* install requests `sudo pip install requests`
 * cd into the python-demo repo
 * run `python app.py`
-* point your browser to `https://127.0.0.1:5000`
+* point your browser to `https://0.0.0.1:5000`
 
-### Run the app in a Docker container
-* the app uses Python 2.7
-* cd into the python-demo repo
-* run `docker build -t pythondemo .`
-* after the app compiles, run `docker run -d -p 5000:5000 pythondemo`
-* run python app.py
-* point your browser to `https://127.0.0.1:5000`
 
 ---
 
 ### Detect 
 The Detect Demo uses Kairos Face Recognition API to detect a human face in an existing photo, or a snapshot from the user's webcam.
 [Documentation](/python-demo/static/docs/detect/Detect.md)
+[Tutorial](/python-demo/static/docs/detect/tutorial/Detect_API_Python_Tutorial.md)
 
 ### Emotion
 The Emotion Demo showcases the Kairos Emotion API by giving the user three methods for analyzing human emotions in a video stream.  
 [Documentation](/python-demo/static/docs/emotion/Emotion.md)
+[Tutorial](/python-demo/static/docs/emotion/tutorial/Emotion_API_Python_Tutorial.md)
 
 ### Recognize
 The Recognize Demo uses Kairos Face Recognition API to recognize human faces from previously enrolled faces by the user.
 [Documentation](/python-demo/static/docs/recognize/Recognize.md)
+[Tutorial](/python-demo/static/docs/emotion/tutorial/Emotion_API_Python_Tutorial.md)
 
 ### Verify
 Using the Kairos Face Recognition API, the Verify Demo compares two photos, and verifies that the two photos are of the same individual.
 [Documentation](/python-demo/static/docs/verify/Verify.md)
+[Tutorial](/python-demo/static/docs/emotion/tutorial/Emotion_API_Python_Tutorial.md)
 
----
 
-#### Caching
-To cache an asset, add: `?t_{{CACHE_BUSTER}}` to the end of the resource link, for example:
-`<link rel="stylesheet" href="https://media.kairos.com/python-demo/detect/css/detect.css?t_{{CACHE_BUSTER}}">` 
 
 
 

python-demo/static/css/detect/detect.css

@@ -103,7 +103,7 @@
     width: 500px;
     height: 500px;
     margin: 0 auto;
-    background: transparent url('../images/face_overlay.png') no-repeat;
+    background: transparent url('../../images/face_overlay.png') no-repeat;
     background-size: 50%;
     background-position: 45% 45%;
     z-index: 10;
@@ -179,13 +179,13 @@
 	width: 50px; 
 	height: 50px; 
 	margin: 0 auto; 
-	background: transparent url('../images/spinner.gif') no-repeat;
+	background: transparent url('../../images/spinner.gif') no-repeat;
 }
 .sad-face {
 	width: 50px; 
 	height: 50px; 
 	margin: 0 auto; 
-	background: transparent url('../images/sad_face.png') no-repeat;
+	background: transparent url('../../images/sad_face.png') no-repeat;
 }
 .message-container{
 	font-size: 14px;

python-demo/static/css/recognize/recognize.css

@@ -176,7 +176,7 @@
 	width: 50px; 
 	height: 50px; 
 	margin: 0 auto; 
-	background: transparent url('../images/spinner.svg') no-repeat;
+	background: transparent url('../../images/spinner.svg') no-repeat;
 	position: relative;
 }
 .message-container .spinner-message{

python-demo/static/css/verify/verify.css

@@ -195,7 +195,7 @@
 	width: 50px; 
 	height: 50px; 
 	margin: 5px auto 3px; 
-	background: transparent url('https://media.kairos.com/python-demo/images/spinner.svg') no-repeat;
+	background: transparent url('../../images/spinner.svg') no-repeat;
 	position: relative;
     z-index: 9;
 }

python-demo/static/docs/detect/Detect.md

@@ -2,15 +2,17 @@
 ## What it does
 The Detect Demo demonstrates the capability of the Kairos Face Recognition API to detect facial features by giving the user four methods for detection.   In each method, image data is passed to the API, which returns a JSON object containing facial feature data.
 
+---
 ## Running the App
-The Detect demo app is run from the command line, using Python 2.7.
 
-The app is basically a single page application, which is viewed at index.html.
+See "Running the App" in the Python Demo README file: [Documentation](/python-demo/README.md)
+
+You will be able to access the UI for the Detect Demo at https://0.0.0.0:5000/detect
 
-The Detect API demo app is comprised of three modules:
+The Emotion API demo app is comprised of four modules:
 
 * Examples Module
-* Webcam Module
+* Webcam Module (not on Safari or mobile)
 * Upload Module
 * URL Module
 
@@ -25,7 +27,7 @@ Five pre-processed image examples are presented to the user.
 Upon clicking one of the image thumbnails, a POST request is made to the Kairos API with the ID of the selected video using the following endpoint:
 https://api.kairos.com/detect 
 
-To accomplish this, an AJAX script in the `detectDemoApp.js` file POSTS to the endpoint `/detect/send-to-api` using Python Flask.  Python makes a POST to the `/detect` endpoint with the proper headers containing the user's Kairos app_id and api_ky values.  The API response is sent to the `apiCallback()` method, which formats the JSON response for viewing, and draws a box around the detected face, along with various other feature points.
+To accomplish this, an AJAX script in the `detectDemoApp.js` file POSTS to the Python route `/detect/send-to-api` using Python Flask.  Python makes a POST to the `/detect` endpoint with the proper headers containing the user's Kairos app_id and api_key values.  The API response is sent to the `apiCallback()` method, which formats the JSON response for viewing, and draws a box around the detected face, along with various other feature points.
 
 ![Box Around Face](/python-demo/static/docs/detect/box.png?raw=true)
 
@@ -88,6 +90,15 @@ The functionality for a number of user interactions is contained within the `det
 If `?option-panel=yes` is added to the URL of the demo, a panel is revealed underneath the example images containing a slider/input box where the user can enter values for minHeadScale, and also radio/checkbox buttons for selector.  The payload which is sent to the API is also displayed.  See the docs for detailed information on these arguments: http://kairos.com/docs/api/
 
 
+---
+
+## Environment Variables
+
+* APP_ID - Application ID
+* APP_KEY - Application Key
+* API_URL - URL of the API server 
+* DEMO_ENV - Environment (dev, stage, prod)
+
 ---
 
 ## Dependencies

python-demo/static/docs/detect/tutorial/Detect_API_Python_Tutorial.md

@@ -10,25 +10,23 @@ Clone or fork the repo at https://github.com/kairosinc/api-examples
 
 * Go to the Kairos website at http://kairos.com/pricing and click GET YOUR FREE API KEY at the bottom of the page.
 
-* Fill out the online form.
+![Kairos Website](/python-demo/static/docs/detect/kairos_website.png?raw=true)
+
+Fill out the online form.
+
+![Registration Form](/python-demo/static/docs/detect/registration_form.png?raw=true)
 
 * You will receive a confirmation email.  Click on the link in the email, to activate your account.  This will take you to a page with your API ID and Key.
 
-## 3. Run the app 
+![ID and Key](/python-demo/static/docs/detect/id_and_key.png?raw=true)
 
-#### Running the app on your local system
+## 3. Run the app 
 
 Insert your Kairos API ID and Key into the app.py file, which is at the root of the python-demo directory.
 
-    try:
-        app_id = os.environ['APP_ID']
-    except:
-        app_id = "YOUR_APP_ID"
-    
-    try:
-        app_key = os.environ["APP_KEY"]
-    except:
-        app_key = "YOUR_APP_KEY"
+    api_url = "https://api.kairos.com"
+    app_id = "YOUR_APP_ID"
+    app_key = "YOUR_APP_KEY"
         
 * make sure Python 2.7 is installed and accessible
 * install Python Flask `pip install flask`
@@ -41,17 +39,17 @@ Insert your Kairos API ID and Key into the app.py file, which is at the root of
 * For the following applications, we recommend using the `app.py` file in the repo as a basis.  This file contains more functionality than you'll need, so if you'd like, you can strip out all but the necessary scripts.  
 * This script sends a payload to the Kairos API:
 
-        api_url = 'https://api-dev.kairos.com'
+        api_url = 'https://api.kairos.com'
         headers = {
             "app_id": YOUR_APP_ID,
             "app_key": YOUR_APP_KEY
         }
         @app.route("/detect/send-to-api", methods=['POST'])
-        def sendToApiDetect():
-        url = api_url + "/detect"
-        payload = request.form["imgObj"]
-        r = requests.post(url, data=payload, headers=headers)
-        return r.content
+            def sendToApiDetect():
+            url = api_url + "/detect"
+            payload = request.form["imgObj"]
+            r = requests.post(url, data=payload, headers=headers)
+            return r.content
 
 To use requests, you must import the library:
 `import requests`
@@ -149,7 +147,7 @@ For the Kairos demo, the MediaStreamRecorder.js library is used to capture the v
             // process the data response
         });
 
-* The "detect/send-top-api" route will POST to the script listed in "Create your own custom applications".
+* The "detect/send-to-api" route will POST to the script listed in "Create your own custom applications".
 
         api_url = "https://api.kairos.com"
         headers = {