├── .gitignore
├── README.md
├── clarifai.js
└── index.html


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Clarifai JavaScript Starter
 2 | ===========================
 3 | 
 4 | This is a basic starter project for using the [Clarifai API](http://clarifai.com).
 5 | 
 6 | ## Usage
 7 | 
 8 | To get started, create an account at [developer.clarifai.com](http://developer.clarifai.com).
 9 | 
10 | Create an application, and get your Client ID and Client Secret.
11 | 
12 | This basic starter uses your Client ID and Client Secret to get an access token.
13 | Since this expires every so often, the client is setup to renew the token for
14 | you automatically using your credentials so you don't have to worry about it.
15 | 
16 | You'll notice that in the `.gitignore` file, it references a `keys.js` file. 
17 | This is for security purposes, so you don't share your Client ID and Client
18 | Secret with others.  Create a `keys.js` file and have it look like the following:
19 | 
20 | ```
21 | var CLIENT_ID = 'your ID here';
22 | var CLIENT_SECRET = 'your secret here';
23 | ```
24 | 
25 | Then you're all set! Happy Clarifai-ing. :)
26 | 


--------------------------------------------------------------------------------
/clarifai.js:
--------------------------------------------------------------------------------
 1 | function getCredentials(cb) {
 2 |   var data = {
 3 |     'grant_type': 'client_credentials',
 4 |     'client_id': CLIENT_ID,
 5 |     'client_secret': CLIENT_SECRET
 6 |   };
 7 |   var url = 'https://api.clarifai.com/v1/token';
 8 | 
 9 |   return axios.post(url, data, {
10 |     'transformRequest': [
11 |       function() {
12 |         return transformDataToParams(data);
13 |       }
14 |     ]
15 |   }).then(function(r) {
16 |     localStorage.setItem('accessToken', r.data.access_token);
17 |     localStorage.setItem('tokenTimestamp', Math.floor(Date.now() / 1000));
18 |     cb();
19 |   }, function(err) {
20 |     console.log(err);
21 |   });
22 | }
23 | 
24 | function transformDataToParams(data) {
25 |   var str = [];
26 |   for (var p in data) {
27 |     if (data.hasOwnProperty(p) && data[p]) {
28 |       if (typeof data[p] === 'string'){
29 |         str.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p]));
30 |       }
31 |       if (typeof data[p] === 'object'){
32 |         for (var i in data[p]) {
33 |           str.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p][i]));
34 |         }
35 |       }
36 |     }
37 |   }
38 |   return str.join('&');
39 | }
40 | 
41 | function postImage(imgurl) {
42 |   var accessToken = localStorage.getItem('accessToken');
43 |   var data = {
44 |     'url': imgurl
45 |   };
46 |   var url = 'https://api.clarifai.com/v1/tag';
47 |   return axios.post(url, data, {
48 |     'headers': {
49 |       'Authorization': 'Bearer ' + accessToken
50 |     }
51 |     /*'content-type': 'application/x-www-form-urlencoded'*/
52 |   }).then(function(r) {
53 |     parseResponse(r.data);
54 |   }, function(err) {
55 |     console.log('Sorry, something is wrong: ' + err);
56 |   });
57 | }
58 | 
59 | function parseResponse(resp) {
60 |   var tags = [];
61 |   if (resp.status_code === 'OK') {
62 |     var results = resp.results;
63 |     tags = results[0].result.tag.classes;
64 |   } else {
65 |     console.log('Sorry, something is wrong.');
66 |   }
67 | 
68 |   document.getElementById('tags').innerHTML = tags.toString().replace(/,/g, ', ');
69 |   return tags;
70 | }
71 | 
72 | function run(imgurl) {
73 |   if (Math.floor(Date.now() / 1000) - localStorage.getItem('tokenTimeStamp') > 86400
74 |     || localStorage.getItem('accessToken') === null) {
75 |     getCredentials(function() {
76 |       postImage(imgurl);
77 |     });
78 |   } else {
79 |     postImage(imgurl);
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <title>Clarifai JavaScript Starter</title>
 5 | 
 6 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 7 |   <script type="text/javascript" src="keys.js"></script>
 8 |   <script type="text/javascript" src="clarifai.js"></script>
 9 | </head>
10 | <body>
11 |   <div>
12 |     <input type="text" id="imgurl" placeholder="Image URL"/>
13 |     <button onclick="run(document.getElementById('imgurl').value)">Get tags!</button>
14 |   </div>
15 |   <div id="tags"></div>
16 | </body>
17 | </html>
18 | 


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