├── .gitignore ├── README.md ├── clarifai.js ├── index.html ├── main.css └── screenshot.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | keys.js 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Chihuahua or Muffin 2 | =========================== 3 | 4 | This is a quick webapp that tells you if a picture is a chihuahua or a muffin. 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 uses your Client ID and Client Secret to get an access token. Since this 13 | expires every so often, the client is setup to renew the token for you 14 | 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 | ## Example screenshot 26 | 27 | ![screenshot](screenshot.jpg) 28 | -------------------------------------------------------------------------------- /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 | 8 | return $.ajax({ 9 | 'url': 'https://api.clarifai.com/v1/token', 10 | 'data': data, 11 | 'type': 'POST' 12 | }) 13 | .then(function(r) { 14 | localStorage.setItem('token', r.access_token); 15 | localStorage.setItem('tokenTimestamp', Math.floor(Date.now() / 1000)); 16 | cb(); 17 | }); 18 | } 19 | 20 | function postImage(imgurl) { 21 | var accessToken = localStorage.getItem('token'); 22 | 23 | return $.ajax({ 24 | 'url': 'https://api.clarifai.com/v1/tag/?select_classes=muffin,dog&url=' + imgurl, 25 | 'headers': { 26 | 'Authorization': 'Bearer ' + accessToken 27 | }, 28 | 'type': 'GET' 29 | }).then(function(r){ 30 | parseResponse(r, imgurl); 31 | }); 32 | } 33 | 34 | function parseResponse(resp, imgurl) { 35 | var probs = []; 36 | if (resp.status_code === 'OK') { 37 | var results = resp.results; 38 | probs = results[0].result.tag.probs; 39 | console.log(probs); 40 | } else { 41 | console.log('Sorry, something is wrong.'); 42 | } 43 | 44 | var text = probs[0] > probs[1] ? 'muffin' : 'chihuahua'; 45 | 46 | $('#photos').append('
' + text + '
'); 47 | } 48 | 49 | function run(imgurl) { 50 | if (Math.floor(Date.now() / 1000) - localStorage.getItem('tokenTimeStamp') > 86400 51 | || localStorage.getItem('token') === null) { 52 | getCredentials(function() { 53 | postImage(imgurl); 54 | }); 55 | } else { 56 | postImage(imgurl); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chihuahua or Muffin 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Chihuahua or Muffin?

15 |
16 |
17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background-color: #9439DF; 8 | color: #6a7c83; 9 | font-family: 'Helvetica', 'Arial', sans-serif; 10 | font-size: 11px; 11 | margin: 40px; 12 | } 13 | 14 | h1 { 15 | color: black; 16 | font-size: 4em; 17 | margin: 0px; 18 | } 19 | 20 | .container { 21 | background-color: #fff; 22 | box-shadow: 0px 3px 15px 5px rgba(0,0,0,.3); 23 | min-height: calc(100% - 80px); 24 | 25 | display: flex; 26 | align-content: flex-start; 27 | flex-flow: row wrap; 28 | justify-content: center; 29 | } 30 | 31 | .heading { 32 | background-color: #ebf0f1; 33 | padding: 20px; 34 | margin-bottom: 40px; 35 | width: 100%; 36 | text-align: center; 37 | } 38 | 39 | .input-group { 40 | min-width: calc(100% - 80px); 41 | } 42 | 43 | button { 44 | background-color: #b07ed8; 45 | border: solid 2px #9439DF; 46 | color: #fff; 47 | margin: 10px 10px 5px; 48 | outline: none; 49 | padding: 10px; 50 | transition: border 0.3s; 51 | width: 80px; 52 | } 53 | 54 | button:hover { 55 | background-color: #9439DF; 56 | } 57 | 58 | input { 59 | padding: 10px; 60 | border: none; 61 | border-bottom: solid 2px #ebf0f1; 62 | margin-bottom: 5px; 63 | outline: none; 64 | width: calc(100% - 130px); 65 | transition: border 0.3s; 66 | } 67 | 68 | input:focus { 69 | border-bottom: solid 2px #6a7c83; 70 | } 71 | 72 | #photos { 73 | display: flex; 74 | align-content: flex-start; 75 | flex-flow: row wrap; 76 | } 77 | 78 | #photos div { 79 | width: 150px; 80 | } 81 | 82 | #photos img { 83 | height: 100%; 84 | width: auto; 85 | } 86 | 87 | #photos img { 88 | position: relative; 89 | width: 100%; 90 | height: 150px; 91 | overflow: hidden; 92 | } 93 | 94 | #photos span { 95 | background-color: rgba(0,0,0,.3); 96 | color: #fff; 97 | width: 100%; 98 | height: 30px; 99 | display: block; 100 | bottom: -30px; 101 | line-height: 25pt; 102 | text-align: center; 103 | } 104 | 105 | -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cassidoo/chihuahua-or-muffin/3f5a0bfdc66735ad12b57a133c2e10d5296c98cf/screenshot.jpg --------------------------------------------------------------------------------