Image Recognize App

by Julien Roche

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
<section id="app">
  <select v-model="selectedPictureURL">
    <option v-for="pictureURL in pictureURLs" v-bind:value="pictureURL.url">
      {{ pictureURL.text }}
    </option>
  </select>
  <br />
  <hr />
  <br />
  <article v-if="selectedPictureURL !== null">
    <img v-bind:src="selectedPictureURL" height="200" />
    <br />
    <ul>
      <li v-for="metadata in fetchedMetadata">{{ metadata }}</li>
    </ul>
  </article>
</section>

Babel + JSX

const pictureURLs = [
	{ text: 'Picture 01', 'url': 'https://images.pexels.com/photos/911758/pexels-photo-911758.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 02', 'url': 'https://images.pexels.com/photos/694629/pexels-photo-694629.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 03', 'url': 'https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 04', 'url': 'https://images.pexels.com/photos/731082/pexels-photo-731082.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 05', 'url': 'https://images.pexels.com/photos/57690/pexels-photo-57690.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 06', 'url': 'https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 07', 'url': 'https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 08', 'url': 'https://images.pexels.com/photos/915051/pexels-photo-915051.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 09', 'url': 'https://images.pexels.com/photos/913215/pexels-photo-913215.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 10', 'url': 'https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 11', 'url': 'https://images.pexels.com/photos/705075/pexels-photo-705075.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 12', 'url': 'https://images.pexels.com/photos/137576/pexels-photo-137576.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 13', 'url': 'https://images.pexels.com/photos/916335/pexels-photo-916335.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture 14', 'url': 'https://images.pexels.com/photos/761872/pexels-photo-761872.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb' },
  { text: 'Picture...