We made a thing called Pic2Trip, a Chrome extension combining the powers of Clarifai and TripAdvisor. Follow along with this easy Copy + Paste guide to learn how to make it yourself with Clarifai's new Travel model, or just download the extension to try the app!

cassidy

When the new Clarifai Travel model came out last week, I was so pumped about it.  I’ve always looked at friends’ photos of cool places and felt a hot pang of envy, so I thought I’d make a mini-hack with the Travel model to assuage my #FOMO.

Behold! Pic2Trip, a Chrome extension combining the powers of Clarifai and TripAdvisor (I’m an engineer, don’t shame me for my name choices please)!

Here’s how it works: you’re browsing the interwebs on Chrome, and you come across a photo that inspires you to travel. When you right-click on the photo and hit Pic2Trip, a new tab opens searching TripAdvisor based on the Clarifai-generated travel tags!

The results get really interesting when you ask for recommendations with non-travel photos. I'm already starting to feel withdrawal since the Game of Thrones season finale this past weekend, so I'm going to ask Pic2Trip to recommend where in Westeros I should go:

westeros

Building this was pretty straightforward.  First, I had to build a manifest.json for Chrome to understand:

{
  "name": "Pic2Trip",
  ...
  "permissions": [
    "https://*/*",
    "http://*/*",
    "contextMenus",
    "tabs"
  ],
  "background": {
    "page": "src/bg/background.html",
    "persistent": true
  }
}

The only things here that are really important are the permissions and the background sections.  Having the contextMenus allows us to get the right-click capabilities, and tabs lets us make new tabs.  The background page is our HTML file that references all of our JavaScript that we need (this part of the extension could have been built in different ways, but I just went with the simple route).

The next file that is important is the previously referenced background page!  Here we import our Clarifai client, our API keys, and our extension code:

<html>
  <head>
    <script src="clarifai-1.2.0.js"></script>
    <script src="keys.js"></script>
    <script src="background.js"></script>
  </head>
</html>

Dang.  So simple, right?  Now, here’s the more meaty stuff.  In background.js, we initialize the Clarifai client with our keys, create a context menu that only appears on images, and generate the TripAdvisor connection that opens a new tab:

Clarifai.initialize({
  'clientId': CLIENT_ID,
  'clientSecret': CLIENT_SECRET
});

chrome.contextMenus.create({
  "id": "Pic2Trip",
  "title": "Pic2Trip",
  "contexts": ["image"]
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  generateLink(info.srcUrl);
});

function generateLink(imgurl) {
  Clarifai.getTagsByUrl(imgurl, {
    'model': 'travel-v0.1'
  }).then(function(r){
    var tags = r.results[0].result.tag.classes;
    chrome.tabs.create({
      "url" : "https://www.tripadvisor.com/Search?q=" + getSearchString(tags)
    });
  }, function(err) {
    console.log(err);
  });
}

All in all, the entire extension is less than 70 lines of code!  Definitely check it all out here in the GitHub repo if you want to see more details in the code and how to install it.

And don’t forget to check out the new Clarifai Travel model to make your own fun hacks, or the other Clarifai Copy + Paste guides to learn more about hacking with APIs! If you’d like to ask me or anyone at Clarifai more questions about the API, feel free to tweet us at @clarifaidev and we’ll get back to you ASAP!

"Try Pic2Trip - it gives you a travel recommendation based on any image on the interwebs! @cassidoo @clarifai 💯 http://bit.ly/291v2kV"