├── .gitignore
├── Clarifai_Logo.png
├── LICENSE
├── README.md
├── custom_train.js
├── index.html
├── keys.js
├── package.json
└── predict.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | keys.js
3 | 


--------------------------------------------------------------------------------
/Clarifai_Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Clarifai/javascript-starter/HEAD/Clarifai_Logo.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2016 Clarifai, Inc.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # javascript-starter
 2 | A few simple examples to help you get started using the Clarifai Javascript client and API
 3 | 
 4 | ## How to get started
 5 | Download this repo, simply invoke  
 6 | ```script
 7 | $ npm install
 8 | ```
 9 | 
10 | ## Usage
11 | 
12 | To get started, create an account at [developer.clarifai.com](http://developer.clarifai.com).
13 | 
14 | Create an application, and get your API Key.
15 | 
16 | This basic starter uses your API Key to make prediction calls. This will never expire so you only have to fill it in once.
17 | 
18 | You'll notice that in the `.gitignore` file, it references a `keys.js` file. This is for security purposes, so you don't share your API Key with others.  Add the following to that file:
19 | 
20 | ```
21 | var myApiKey = 'YOUR API KEY HERE';
22 | ```
23 | 
24 | You'll also notice a custom_train.js file which serves as a reference for Custom Training. Any custom models that you create (under these credentials) will appear in the dropdown menu on index.html, next to the "Custom" label
25 | 
26 | ## Example Output
27 | 
28 | <img src="https://s3.amazonaws.com/jared-clarifai-stuff/Screen+Shot+2017-01-05+at+4.04.37+PM.png"/>
29 | 
30 | Note the "Add image to Application" button on the bottom left of the image. This will automatically add the image to the application that is associated with your key!
31 | 


--------------------------------------------------------------------------------
/custom_train.js:
--------------------------------------------------------------------------------
  1 | // Require the client
  2 | var Clarifai = require('clarifai');
  3 | var fs = require('fs');
  4 | var FileReader = require('filereader');
  5 | 
  6 | // instantiate a new Clarifai app passing in your clientId and clientSecret
  7 | var app = new Clarifai.App(
  8 |   CLIENT_ID,
  9 |   CLIENT_SECRET
 10 | );
 11 | 
 12 | trainModel();
 13 | 
 14 | // once inputs are created, create model by giving name and list of concepts
 15 | function createModel() {
 16 |   app.models.create('pets', ["dog", "cat"]).then(
 17 |     (response) => {
 18 |       console.log(response);
 19 |     },
 20 |     (error) => {
 21 |       console.error(error);
 22 |     }
 23 |   );
 24 | }
 25 | 
 26 | // inputs with concept using urls
 27 | function addInputsWithUrls(urls, isPostive, concept){
 28 |   for (index in urls){
 29 |     app.inputs.create({
 30 |       url: urls[index],
 31 |       concepts: [
 32 |         {
 33 |           id: concept,
 34 |           value: isPostive
 35 |         }
 36 |       ]
 37 |     }).then(
 38 |       (response) => {
 39 |         console.log(response);
 40 |       },
 41 |       (error) => {
 42 |         console.error(error);
 43 |       }   
 44 |     );
 45 |   }
 46 | }
 47 | 
 48 | 
 49 | // inputs with concept using filepath
 50 | function addInputsWithFiles(filepath, isPostive, concept){
 51 | 
 52 |   for(data of getBase64s(getFiles(filepath))){
 53 |     app.inputs.create({
 54 |       base64: data,
 55 |       concepts: [
 56 |         {
 57 |           id: concept,
 58 |           value: isPostive
 59 |         }
 60 |       ]
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | 
 66 | function getFiles(dir){
 67 |     fileList = [];
 68 |  
 69 |     var files = fs.readdirSync(dir);
 70 |     for(var i in files){
 71 |         if (!files.hasOwnProperty(i) || i == 0) continue;
 72 |         var name = dir+'/'+files[i];
 73 |         if (!fs.statSync(name).isDirectory()){
 74 |             fileList.push(name);
 75 |         }
 76 |     }
 77 |     return fileList;
 78 | }
 79 | 
 80 | function getBase64s(fileList) {
 81 |   var FR = new FileReader();
 82 |   base64s = [];
 83 |   for(index in fileList) {
 84 |     base64s.push(base64_encode(fileList[index]));
 85 |   }
 86 |   return base64s;
 87 | }
 88 | 
 89 | // function to encode file data to base64 encoded string
 90 | function base64_encode(file) {
 91 |     // read binary data
 92 |     var bitmap = fs.readFileSync(file);
 93 |     // convert binary data to base64 encoded string
 94 |     return new Buffer(bitmap).toString('base64');
 95 | }
 96 | 
 97 | 
 98 | // after model is created, you can now train the model
 99 | function trainModel() {
100 |   app.models.train("pets").then(
101 |     (response) => {
102 |       console.log(response);
103 |     },
104 |     (error) => {
105 |       console.error(error);
106 |     }  
107 |   );
108 | }
109 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5 |   <title>Clarifai JavaScript Stater</title>
  6 |   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  7 |   <script type="text/javascript" src="predict.js"></script>
  8 |   <script type="text/javascript" src="keys.js"></script>
  9 |   <script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
 10 |   <script>
 11 |   try {
 12 |     var app = new Clarifai.App({
 13 |      apiKey: myApiKey
 14 |     });
 15 |   }
 16 |   catch(err) {
 17 |     alert("Need a valid API Key!");
 18 |     throw "Invalid API Key";
 19 |   }
 20 |   
 21 |   // Checks for valid image type
 22 |   function validFile(imageName) {
 23 |     var lowerImageName = imageName.toLowerCase();
 24 |     return lowerImageName.search(/jpg|png|bmp|tiff/gi) != -1;
 25 |   }
 26 |   
 27 |   // Fills custom model dropdown
 28 |   window.onload = function() {
 29 |     var select = document.getElementById("custom_models_dropdown");
 30 |     
 31 |     app.models.list().then(
 32 |       function(response) {
 33 |         var ids = response.rawData;
 34 |         
 35 |         for(var i=0; i < ids.length; i++) {
 36 |           var model = ids[i];
 37 |           if(model.app_id != "main") {
 38 |             var el = document.createElement("option");
 39 |             el.textContent = model.name;
 40 |             el.value = model.id;
 41 |             select.appendChild(el);
 42 |           }
 43 |         }
 44 |       },
 45 |       function(err) {
 46 |         alert(err);
 47 |       }
 48 |     );
 49 |   }
 50 |   </script>
 51 |   
 52 |   <style type="text/css">
 53 |     body { margin-left:20px; margin-top:20px; margin-bottom:30px; font-family: sans-serif; height:100%}
 54 |     ul {
 55 |       list-style: none;
 56 |       margin: 30px 0 0 0;
 57 |       padding: 0;
 58 |       columns: 1;
 59 |       -webkit-columns: 1;
 60 |       -moz-columns: 1;
 61 |       overflow:auto;
 62 |     }
 63 |     li {
 64 |       box-shadow: 0 0 0 2px #546578 inset;
 65 |       margin: 0 0 5px 0;
 66 |       border-radius: 16px;
 67 |       line-height: 28px;
 68 |       padding: 2px 15px;
 69 |       font-weight: 500;
 70 |       font-size: 15px;
 71 |       color: #2E4157;
 72 |     }
 73 |     ul li i{
 74 |       font-family: "Lucida Console", Courier, monospace;
 75 |       font-style: normal;
 76 |       font-size: 14px;
 77 |     }
 78 |     
 79 |     .conceptBox {
 80 |       float:left; 
 81 |       margin-left:40px; 
 82 |       margin-top:15px;
 83 |       margin-bottom:30px;
 84 |       height:100%;
 85 |     }
 86 |   </style>
 87 | </head>
 88 | <body>
 89 |   <div id="Title" style="font-size:48px; font-face:Arial; margin-bottom:20px;"><img src="Clarifai_Logo.png" id="logo"/>&nbsp;Model Tester!</div>
 90 |   <div id="Model_Title" style="font-size:16px; margin-bottom:5px">Model</div>
 91 |   <input type="hidden" id="hidden-counter" name="hidden-counter" value="1"/>
 92 |   <form action="" style="font-size:14px; margin-bottom:20px; float:left; margin-right:30px;">
 93 |     <input type="radio" name="model" value="general" checked="checked"> General<br>
 94 |     <input type="radio" name="model" value="food"> Food<br>
 95 |     <input type="radio" name="model" value="NSFW"> NSFW<br>
 96 |     <input type="radio" name="model" value="travel"> Travel<br>
 97 |     <input type="radio" name="model" value="wedding"> Wedding<br>
 98 |     <input type="radio" name="model" value="color"> Color<br>
 99 |     <input type="radio" name="model" value="apparel"> Apparel<br>
100 |     <input type="radio" name="model" value="faces"> Faces<br>
101 |     <input type="radio" name="model" value="demographic"> Demographic<br>
102 |     <input type="radio" name="model" value="celebrity"> Celebrity<br>
103 |     <input type="radio" name="model" value="logo"> Logo<br>
104 |     <input type="radio" name="model" value="focus"> Focus<br>
105 |     <input type="radio" name="model" value="moderation"> Moderation<br>
106 |     <input type="radio" name="model" value="portrait"> Portrait Quality<br>
107 |     <input type="radio" name="model" value="landscape"> Landscape Quality<br>
108 |     <input type="radio" name="model" value="texturespatterns"> Textures & Patterns<br>
109 |     <input type="radio" name="model" value="custom"> Custom &nbsp;<select id="custom_models_dropdown"></select><br>
110 |   </form>
111 |   <div style="float:left">
112 |     <button onclick="
113 |       if(imgurl.value == '') { 
114 |         alert('Please enter an image URL!'); 
115 |         return;
116 |       } 
117 |     
118 |       else if (!validFile(imgurl.value)) {
119 |         alert('Supported File Types: JPEG, PNG, TIFF, BMP');
120 |         return;
121 |       }
122 |     
123 |       predict_click($('#imgurl').val(), 'url');" style="width:112px">Predict a URL!</button>
124 |     
125 |     <input type="text" id="imgurl" placeholder="Image URL" size="80"/>
126 |     
127 |     <br/><br/>
128 |     
129 |     <button onclick="
130 |       if(filename.value == '') { 
131 |         alert('Please browse for a file!'); 
132 |         return;
133 |       } 
134 |     
135 |       else if (!validFile(filename.value)) {
136 |         alert('Supported File Types: JPEG, PNG, TIFF, BMP');
137 |         return;
138 |       }
139 |       predict_click($('#filename').val(), 'file');">Predict a local file!</button>
140 |     
141 |     <input type="file" id="filename" placeholder="Filename" size="80"/>
142 |   </div>
143 |   
144 |   <div id="predictions">
145 |     <div style="margin-top:30px; margin-left:20px; margin-bottom:30px; clear:left; float:left">
146 |       <img id="img_preview1" src="" width="400"/>
147 |       <br/>
148 |       <span id="add-image-button" style="visibility:hidden"><button onClick="addImageToApp(1)">Add image to application</button></span>
149 |     </div>
150 |     <div id="concepts" class="conceptBox">
151 |     </div>
152 |   </div>
153 |   
154 | </body>
155 | </html>
156 | 


--------------------------------------------------------------------------------
/keys.js:
--------------------------------------------------------------------------------
1 | var myApiKey = 'YOUR API KEY HERE';
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "javascript-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "Clarifai V2 JavaScript Starter",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/Clarifai/javascript-starter.git"
12 |   },
13 |   "author": "",
14 |   "license": "Apache-2.0",
15 |   "bugs": {
16 |     "url": "https://github.com/Clarifai/javascript-starter/issues"
17 |   },
18 |   "homepage": "https://github.com/Clarifai/javascript-starter#readme",
19 |   "dependencies": {
20 |     "clarifai": "^2.0.18",
21 |     "filereader": "^0.10.3"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/predict.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Purpose: Pass information to other helper functions after a user clicks 'Predict'
  3 |   Args:
  4 |     value - Actual filename or URL
  5 |     source - 'url' or 'file'
  6 | */
  7 | function predict_click(value, source) {
  8 |   // first grab current index
  9 |   var index = document.getElementById("hidden-counter").value;
 10 | 
 11 |   // Div Stuff
 12 |   if(index > 1) {
 13 |     createNewDisplayDiv(index);
 14 |   }
 15 |   
 16 |   if(source === "url") {
 17 |     document.getElementById("img_preview" + index).src = value;
 18 |     doPredict({ url: value });
 19 |     
 20 |     // Div Stuff
 21 |     createHiddenDivs("url", value);
 22 |   }
 23 |     
 24 |   else if(source === "file") {
 25 |     var preview = document.querySelector("#img_preview" + index);
 26 |     var file    = document.querySelector("input[type=file]").files[0];
 27 |     var reader  = new FileReader();
 28 | 
 29 |     // load local file picture
 30 |     reader.addEventListener("load", function () {
 31 |       preview.src = reader.result;
 32 |       var localBase64 = reader.result.split("base64,")[1];
 33 |       doPredict({ base64: localBase64 });
 34 |       
 35 |       // Div Stuff
 36 |       createHiddenDivs("base64", localBase64);
 37 |         
 38 |     }, false);
 39 | 
 40 |     if (file) {
 41 |       reader.readAsDataURL(file);
 42 |     }
 43 |   } 
 44 | }
 45 | 
 46 | /*
 47 |   Purpose: Does a v2 prediction based on user input
 48 |   Args:
 49 |     value - Either {url : urlValue} or { base64 : base64Value }
 50 | */
 51 | function doPredict(value) {
 52 | 
 53 |   var modelID = getSelectedModel();
 54 | 
 55 |   app.models.predict(modelID, value).then(
 56 |     
 57 |     function(response) {
 58 |       console.log(response);
 59 |       var conceptNames = "";
 60 |       var tagArray, regionArray;
 61 |       var tagCount = 0;
 62 |       var modelName = response.rawData.outputs[0].model.name;
 63 |       var modelNameShort = modelName.split("-")[0];
 64 |       var modelHeader = '<b><span style="font-size:14px">' + capitalize(modelNameShort) + ' Model</span></b>';
 65 |       
 66 |       // Check for regions models first
 67 |       if(response.rawData.outputs[0].data.hasOwnProperty("regions")) {
 68 |         regionArray = response.rawData.outputs[0].data.regions;
 69 |       	
 70 |         // Regions are found, so iterate through all of them
 71 |         for(var i = 0; i < regionArray.length; i++) {
 72 |       	  conceptNames += "<b>Result " + (i+1) + "</b>";  
 73 |       		 		
 74 |       	  // Demographic has separate sub-arrays
 75 |       	  if(modelName == "demographics") {
 76 |       	    var ageArray = regionArray[i].data.face.age_appearance.concepts;
 77 |       	    var ethnicArray = regionArray[i].data.face.multicultural_appearance.concepts;
 78 |       	    var genderArray = regionArray[i].data.face.gender_appearance.concepts;
 79 |           
 80 |             // Age Header
 81 |       	    conceptNames += '<br/><b><span style="font-size:10px">Age Appearance</span></b>';
 82 |       		
 83 |       	    // print top 5 ages
 84 |       	    for(var a = 0; a < 5; a++) {
 85 |       	      conceptNames += '<li>' + ageArray[a].name + ': <i>' + ageArray[a].value + '</i></li>'; 
 86 |             }
 87 |       		
 88 |       	    // Ethnicity Header
 89 |       	    conceptNames += '<b><span style="font-size:10px">Multicultural Appearance</span></b>';
 90 |       			
 91 |       	    // print top 3 ethnicities
 92 |       	    for(var e = 0; e < 3; e++) {
 93 |       	      conceptNames += '<li>' + ethnicArray[e].name + ': <i>' + ethnicArray[e].value + '</i></li>'; 
 94 |             }
 95 |             
 96 |       	    // Gender Header
 97 |       	    conceptNames += '<b><span style="font-size:10px">Gender Appearance</span></b>';
 98 |       		
 99 |       	    // print gender
100 |       	    conceptNames += '<li>' + genderArray[0].name + ': <i>' + genderArray[0].value + '</i></li>'; 
101 |       	}
102 |       		
103 |         // For faces just print bounding boxes
104 |       	else if(modelName == "face-v1.3") {
105 |       	  // Top Row
106 |       	  conceptNames += '<li>Top Row: <i>' + regionArray[i].region_info.bounding_box.top_row + '</i></li>';
107 |       	  conceptNames += '<li>Left Column: <i>' + regionArray[i].region_info.bounding_box.left_col + '</i></li>';
108 |       	  conceptNames += '<li>Bottom Row: <i>' + regionArray[i].region_info.bounding_box.bottom_row + '</i></li>';
109 |       	  conceptNames += '<li>Right Column: <i>' + regionArray[i].region_info.bounding_box.right_col + '</i></li>';
110 |       	}
111 |       		
112 |       	// Celebrity
113 |       	else if(modelName == "celeb-v1.3") {
114 |       	  tagArray = regionArray[i].data.face.identity.concepts;
115 |       			
116 |       	  // Print first 10 results
117 |       	  for(var c=0; c < 10; c++) {
118 |       	    conceptNames += '<li>' + tagArray[c].name + ': <i>' + tagArray[c].value + '</i></li>'; 
119 |           }
120 |       	}
121 |       		
122 |       	// Logos
123 |       	else if(modelName == "logo") {
124 |       	  // Print all results
125 |       	  conceptNames += '<br/><b><span style="font-size:10px">Logo</span></b>';
126 |       	  conceptNames += '<li>' + regionArray[i].data.concepts[0].name + ': <i>' + regionArray[i].data.concepts[0].value + '</i></li>';
127 |       	  conceptNames += '<br/><b><span style="font-size:10px">Location</span></b>';
128 |       	  conceptNames += '<li>Top Row: <i>' + regionArray[i].region_info.bounding_box.top_row + '</i></li>';
129 |       	  conceptNames += '<li>Left Column: <i>' + regionArray[i].region_info.bounding_box.left_col + '</i></li>';
130 |       	  conceptNames += '<li>Bottom Row: <i>' + regionArray[i].region_info.bounding_box.bottom_row + '</i></li>';
131 |       	  conceptNames += '<li>Right Column: <i>' + regionArray[i].region_info.bounding_box.right_col + '</i></li>';
132 |       	}
133 |       		
134 |       	// Focus
135 |       	else if(modelName == "focus") {
136 |       	  // Print total focus score and all regions with focus
137 |       	  conceptNames += '<br/><b><span style="font-size:10px">Focus Region</span></b>';
138 |       	  conceptNames += '<li>Top Row: <i>' + regionArray[i].region_info.bounding_box.top_row + '</i></li>';
139 |       	  conceptNames += '<li>Left Column: <i>' + regionArray[i].region_info.bounding_box.left_col + '</i></li>';
140 |       	  conceptNames += '<li>Bottom Row: <i>' + regionArray[i].region_info.bounding_box.bottom_row + '</i></li>';
141 |       	  conceptNames += '<li>Right Column: <i>' + regionArray[i].region_info.bounding_box.right_col + '</i></li>';
142 |           
143 |           if(i === regionArray.length - 1) {
144 |       		  conceptNames += '<br><br><li><br><br>Overall Focus: <i>' + response.rawData.outputs[0].data.focus.value + '</i><br><br><br></li>'; 
145 |       		}
146 |       	}
147 | 
148 |       	tagCount+=10;      	
149 |       }
150 |      }
151 |       
152 |       // Color Model
153 |       else if(modelName === "color") {
154 |       	conceptNames += '<b><span style="font-size:10px">Colors</span></b>';
155 |         tagArray = response.rawData.outputs[0].data.colors;
156 |         
157 |         for (var col = 0; col < tagArray.length; col++) {
158 |           conceptNames += '<li>' + tagArray[col].w3c.name + ': <i>' + tagArray[col].value + '</i></li>';
159 |         }
160 |         
161 |         tagCount=tagArray.length;
162 |       }
163 |       
164 |       // Generic tag response models
165 |       else if(response.rawData.outputs[0].data.hasOwnProperty("concepts")) {
166 |         tagArray = response.rawData.outputs[0].data.concepts;
167 |         
168 |         for (var other = 0; other < tagArray.length; other++) {
169 |           conceptNames += '<li>' + tagArray[other].name + ': <i>' + tagArray[other].value + '</i></li>';
170 |         }
171 |         
172 |         tagCount=tagArray.length;
173 |       }
174 |       
175 |       // Bad region request
176 |       else {
177 |       	if(modelName != "logo" && modelName != "focus") {
178 |           $('#concepts').html("<br/><br/><b>No Faces Detected!</b>");
179 |         }
180 |       	else if(modelName == "logo") {
181 |           $('#concepts').html("<br/><br/><b>No Logos Detected!</b>");
182 |         }
183 |         else {
184 |           $('#concepts').html("<br/><br/><b>No Focus Regions Detected!</b>");
185 |         }
186 |       	return;
187 |       }
188 |       
189 |       var columnCount = tagCount / 10;
190 |       
191 |       // Focus gets one more column
192 |       if(modelName == "focus") {
193 |       	columnCount += 1;
194 |       }
195 |       
196 |       conceptNames = '<ul style="margin-right:20px; margin-top:20px; columns:' + columnCount + '; -webkit-columns:' + columnCount + '; -moz-columns:' + columnCount + ';">' + conceptNames;
197 |         
198 |       conceptNames += '</ul>';
199 |       conceptNames = modelHeader + conceptNames;
200 |       
201 |       $('#concepts').html(conceptNames);
202 |       
203 |       document.getElementById("add-image-button").style.visibility = "visible";
204 |     },
205 |     function(err) {
206 |       console.log(err);
207 |     }
208 |   );
209 | }
210 | 
211 | /*
212 |   Purpose: Return a back-end model id based on current user selection
213 |   Returns:
214 |     Back-end model id
215 | */
216 | function getSelectedModel() {
217 |   var model = document.querySelector('input[name = "model"]:checked').value;
218 |   
219 |   if(model === "general") {
220 |     return Clarifai.GENERAL_MODEL;
221 |   }
222 |     
223 |   else if(model === "food") {
224 |     return Clarifai.FOOD_MODEL;
225 |   }
226 |     
227 |   else if(model === "NSFW") {
228 |     return Clarifai.NSFW_MODEL;
229 |   }
230 |     
231 |   else if(model === "travel") {
232 |     return Clarifai.TRAVEL_MODEL;
233 |   }
234 |     
235 |   else if(model === "wedding") {
236 |     return Clarifai.WEDDINGS_MODEL;
237 |   }
238 |     
239 |   else if(model === "color") {
240 |     return Clarifai.COLOR_MODEL;
241 |   }
242 |   
243 |   else if(model === "demographic") {
244 |     return Clarifai.DEMOGRAPHICS_MODEL;
245 |   }
246 |   
247 |   else if(model === "logo") {
248 |     return Clarifai.LOGO_MODEL;
249 |   }
250 |   
251 |   else if(model === "apparel") {
252 |     return "e0be3b9d6a454f0493ac3a30784001ff";
253 |   }
254 |   
255 |   else if(model === "faces") {
256 |     return Clarifai.FACE_DETECT_MODEL;
257 |   }
258 |   
259 |   else if(model == "focus") {
260 |     return Clarifai.FOCUS_MODEL;
261 |   }
262 |   
263 |   else if(model === "celebrity") {
264 |     return "e466caa0619f444ab97497640cefc4dc";
265 |   }
266 |   
267 |   else if(model === "moderation") {
268 |     return "d16f390eb32cad478c7ae150069bd2c6";
269 |   }
270 |   
271 |   else if(model === "portrait") {
272 |     return "de9bd05cfdbf4534af151beb2a5d0953";
273 |   }
274 |   
275 |   else if(model === "landscape") {
276 |     return "bec14810deb94c40a05f1f0eb3c91403";
277 |   }
278 |   
279 |   else if(model == "texturespatterns") {
280 |     return "fbefb47f9fdb410e8ce14f24f54b47ff";
281 |   }
282 |   
283 |   else if(model === "custom") {
284 |     var e = document.getElementById("custom_models_dropdown");
285 |     return e.options[e.selectedIndex].value;
286 |   }
287 | }
288 | 
289 | /*
290 |   Purpose: Add an image to an application after user clicks button
291 |   Args:
292 |     index - # of the image in the session
293 | */
294 | function addImageToApp(index) {
295 |   var imgType = document.getElementById("hidden-type" + index).value;
296 |   var imgValue = document.getElementById("hidden-val" + index).value;
297 |   
298 |   if(imgType === "url") {
299 |     app.inputs.create({
300 |       url: imgValue
301 |     }).then(
302 |       function(response) {
303 |         alert("Image successfully added!");
304 |       },
305 |       function(err) {
306 |         alert("Error Adding Image. Check to see if it is a duplicate.");
307 |       }
308 |     );
309 |   }
310 |   
311 |   else if(imgType === "base64") {
312 |     app.inputs.create({
313 |       base64: imgValue
314 |     }).then(
315 |       function(response) {
316 |         alert("Image successfully added!");
317 |       },
318 |       function(err) {
319 |         alert("Error Adding Image. Check to see if it is a duplicate.");
320 |       }
321 |     );
322 |   }
323 | }
324 | 
325 | /*
326 |   Purpose: Create a dynamic div to store entire user session
327 |   Args:
328 |     index - # of the image in the session
329 | */
330 | function createNewDisplayDiv(index) {
331 |   var mainDiv = document.getElementById("predictions");
332 |   
333 |   var elem = document.createElement('div');
334 |   elem.innerHTML = 
335 |     '<div style="margin-top:30px; margin-left:20px; margin-bottom:30px; clear:left; float:left"> \
336 |       <img id="img_preview' + index + '" src="" width="400"/> \
337 |       <br/> \
338 |       <span id="add-image-button" style="visibility:hidden"> \
339 |         <button onClick="addImageToApp(' + index + ')">Add image to application</button> \
340 |       </span> \
341 |     </div> \
342 |     <div id="concepts" class="conceptBox"> \
343 |     </div>';
344 |     
345 |   mainDiv.innerHTML = elem.innerHTML + mainDiv.innerHTML;
346 | }
347 | 
348 | /*
349 |   Purpose: Creates hidden Div elements to store info of each picture uploaded
350 |   Args:
351 |     urlOrBase64 - binary variable to store the type of image
352 |     source - the actual URL string or the base64
353 | */
354 | function createHiddenDivs(urlOrBase64, source) {
355 |   // first grab current index
356 |   var index = document.getElementById("hidden-counter").value;
357 |   
358 |   // type
359 |   var input1 = document.createElement("input");
360 |   input1.setAttribute("type", "hidden");
361 |   input1.setAttribute("id", "hidden-type"+index);
362 |   input1.setAttribute("name", "hidden-type"+index);
363 |   input1.setAttribute("value", urlOrBase64);
364 |   
365 |   // value
366 |   var input2 = document.createElement("input");
367 |   input2.setAttribute("type", "hidden");
368 |   input2.setAttribute("id", "hidden-val"+index);
369 |   input2.setAttribute("name", "hidden-val"+index);
370 |   input2.setAttribute("value", source);
371 |   
372 |   // add new inputs to page
373 |   document.getElementsByTagName('body')[0].appendChild(input1);
374 |   document.getElementsByTagName('body')[0].appendChild(input2);
375 |   
376 |   // increment index
377 |   document.getElementById("hidden-counter").value = parseInt(index)+1;
378 | }
379 | 
380 | /*
381 |   Purpose: Return a capitalized String
382 |   Args:
383 |     s - A String
384 | */
385 | function capitalize(s)
386 | {
387 |   return s[0].toUpperCase() + s.slice(1);
388 | }
389 | 


--------------------------------------------------------------------------------