[KTECH-2900] added updated Ruby docs; tweaks to php and python demos

Author: steverucker

go-demo/Makefile

@@ -46,8 +46,7 @@ The colors for the indivdual emotion charts are found on the emotion.html page:
     });
 ```
 ### Video display
-At the same time that the highcharts graph is created, the selected video is rendered in an HTML5 tag inside the `#selected-video` div.  The example video is hosted on S3:
-`https://media.kairos.com/emodemo/videos/video_1.mp4`
+At the same time that the highcharts graph is created, the selected video is rendered in an HTML5 tag inside the `#selected-video` div.  
 
 Tools are provided so that the user can play, pause or scrub the video.  
 

go-demo/assets/docs/emotion/Emotion.md

@@ -19,7 +19,7 @@
         <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-6 main-video-container">
                 <div class="video-wrapper">
-                    <video id="video" width="100%" mediaId="video_1" src="https://media.kairos.com/demo/emotion/videos/video_1.mp4" muted  playsinline></video>
+                    <video id="video" width="100%" mediaId="video_1" src="https://media.kairos.com/demo/videos/video_1.mp4" muted  playsinline></video>
                     <div class="video-controls">
                         <a href="/" class="play" id="play-pause"></a>
                         <div id="progress">  

go-demo/public/views/emotion.html

@@ -24,7 +24,7 @@ An example video is presented to the user, and an analysis begins immediately up
 
 In order to render the analysis of the example video, you must enter a Media ID into the config.php file.  To get the Media ID for the example video, run this script at your command prompt:
 
-`curl -v -X POST -H "app_id: {your app_id}" -H "app_key: {your app_key}" http://api.kairos.com/v2/media?source=https://media.kairos.com/demo/emotion/videos/video_1.mp4`
+`curl -v -X POST -H "app_id: {your app_id}" -H "app_key: {your app_key}" http://api.kairos.com/v2/media?source=https://media.kairos.com/demo/videos/video_1.mp4`
 
 This should return something similar to this:
 
@@ -47,8 +47,7 @@ To accomplish this analysis, an AJAX script in the `emoDemoApp.js` file POSTS to
 The colors for the indivdual emotion charts are found inside `config.php`.
 
 ### Video display
-At the same time that the highcharts graph is created, the selected video is rendered in an HTML5 tag inside the `#selected-video` div.  The example video is hosted on S3:
-https://media.kairos.com/emodemo/videos/video_1.mp4
+At the same time that the highcharts graph is created, the selected video is rendered in an HTML5 tag inside the `#selected-video` div.  
 
 Tools are provided so that the user can play, pause or scrub the video.  
 

php-demo/emotion/README.md

@@ -28,7 +28,7 @@
         <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-6 main-video-container">
                 <div class="video-wrapper">
-                    <video id="video" width="100%" mediaId="video_1" src="https://media.kairos.com/demo/emotion/videos/video_1.mp4" muted  playsinline></video>
+                    <video id="video" width="100%" mediaId="video_1" src="videos/video_1.mp4" muted  playsinline></video>
                     <div class="video-controls">
                         <a href="/" class="play" id="play-pause"></a>
                         <div id="progress">  

php-demo/emotion/index.php

@@ -9,26 +9,17 @@
 from flask import Flask, render_template, request, json
 app = Flask(__name__)
 
-# get environment variables
-try:
-	demo_env = os.environ["STAGE"]
-except:
-	demo_env = "dev"
-
-try:
-	api_url = os.environ["API_URL"]
-except:
-	api_url = "https://api.kairos.com"
-
-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"
+# set variables (currently dev version)
+api_url = "https://api.kairos.com"
+app_id = "YOUR_APP_ID"
+app_key = "YOUR_APP_KEY"
+demo1_id = "GENERATE_VIDEO_ID" # see documentation
+
+headers = {
+	# "Content-Type": "application/json",
+    "app_id": app_id,
+    "app_key": app_key
+}
 
 headers = {
 	# "Content-Type": "application/json",
@@ -43,7 +34,7 @@ def RenderMainIndex():
 
 @app.route('/detect')
 def renderDetect():
-	return render_template("detect.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url, CACHE_BUSTER=CacheBuster())
+	return render_template("detect.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url)
 
 @app.route('/detect/send-to-api', methods=['POST'])
 def sendToApiDetect():
@@ -54,7 +45,7 @@ def sendToApiDetect():
 
 @app.route('/emotion')
 def renderEmotion():
-	return render_template("emotion.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url, CACHE_BUSTER=CacheBuster())
+	return render_template("emotion.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url, DEMO1_ID=demo1_id)
 
 @app.route('/emotion/send-to-api', methods=['POST'])
 def sendToApiEmotion():
@@ -115,7 +106,7 @@ def sendToApiEmotion():
 		return fileUpload.content
 @app.route('/recognize')
 def renderRecognize():
-	return render_template("recognize.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url, CACHE_BUSTER=CacheBuster())
+	return render_template("recognize.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url)
 
 @app.route('/recognize/send-to-api', methods=['POST'])
 def sendToApiRecognize():
@@ -132,7 +123,7 @@ def sendToApiRecognize():
 
 @app.route('/verify')
 def renderVerify():
-	return render_template("verify.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url, CACHE_BUSTER=CacheBuster())
+	return render_template("verify.html", APP_ID=app_id, APP_KEY=app_key, API_URL=api_url)
 
 @app.route('/verify/send-to-api', methods=['POST'])
 def sendToApiVerify():

php-demo/emotion/videos/video_1.mp4

@@ -49,8 +49,7 @@ To accomplish this, an AJAX script in the `emoDemoApp.js` file POSTS to the rout
 The colors for the indivdual emotion charts are found inside `config.php`.
 
 ### Video display
-At the same time that the highcharts graph is created, the selected video is rendered in an HTML5 tag inside the `#selected-video` div.  The example video is hosted on S3:
-https://media.kairos.com/demo/videos/video_1.mp4
+At the same time that the highcharts graph is created, the selected video is rendered in an HTML5 tag inside the `#selected-video` div.  
 
 Tools are provided so that the user can play, pause or scrub the video.  
 

python-demo/app.py

@@ -157,7 +157,7 @@ <h4>Options</h4>
                 "pollTimeout":300,
                 "mediaPath": "static/",
                 "demoMedia":[
-                    {"video_1":"17b62ed9921ab34c7deb9a33"}
+                    {"video_1":"{{DEMO1_ID}}"}
                 ],
                 "apiCredentials":true
             });

python-demo/static/docs/emotion/Emotion.md

@@ -4,7 +4,6 @@
 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.
 
@@ -27,18 +26,30 @@ Point your browser to `http://127.0.0.1:4567/`
 
 ### 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](/ruby-demo/public/docs/detect/Detect.md)
 
+[Tutorial](/ruby-demo/public/docs/detect/tutorial/Detect_API_Ruby_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](/ruby-demo/public/docs/emotion/Emotion.md)
 
+[Tutorial](/ruby-demo/public/docs/emotion/tutorial/Emotion_API_Ruby_Tutorial.md)
+
 ### Recognize
 The Recognize Demo uses Kairos Face Recognition API to recognize human faces from previously enrolled faces by the user.
+
 [Documentation](/ruby-demo/public/docs/recognize/Recognize.md)
 
+[Tutorial](/ruby-demo/public/docs/recognize/tutorial/Recognize_API_Ruby_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](/ruby-demo/public/docs/verify/Verify.md)
 
+[Tutorial](/ruby-demo/public/docs/verify/tutorial/Verify_API_Ruby_Tutorial.md)
+
 

python-demo/templates/emotion.html

@@ -4,11 +4,14 @@
 require "base64"
 require "httparty"
 
+# set variables (currently dev version)
 api_url = "https://api.kairos.com"
 app_id = "YOUR_APP_ID"
 app_key = "YOUR_APP_KEY"
+demo1_id = "GENERATE_VIDEO_ID" # see documentation
 
 headers = {
+	"Content-type" => "application/json",
     "app_id" => app_id,
     "app_key" => app_key
 }
@@ -34,6 +37,7 @@
 	@API_URL = api_url
 	@APP_ID = app_id
 	@APP_KEY = app_key
+	@DEMO1_ID = demo1_id
   	erb :emotion
 end
 

ruby-demo/README.md

@@ -103,7 +103,7 @@
     width: 500px;
     height: 500px;
     margin: 0 auto;
-    background: transparent url('/images/face_overlay.png') no-repeat;
+    background: transparent url('../../images/icons/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/icons/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/icons/sad_face.png') no-repeat;
 }
 .message-container{
 	font-size: 14px;