Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Integrating with Other Frameworks Chapter 19

First, we need to log in to Clarifai:

var app = new Clarifai.App(

'7CDIjv_VqEYfmFi_ygwKsKAaDe-LwEzc78CcW1sA',

'XC0S9GHxS0iONFsAdiA2xOUuBsOhAT0jZWQTx4hl'

)

Obviously, you want to enter your clientId and clientSecret from Clarifai.

Then, we need to spin up Horizon and have a handle to the entries collection that we

will create:

const horizon = new Horizon()

const entries = horizon('entries')

Now, we finally write our Vue instance with three state variables:

new Vue({

el: '#app',

data: {

tentativeEntries: [],

data_uri: undefined,

entries: []

},

...

The tentativeEntries array will contain a list of possible entries for the diary we can

choose from; data_uri will contain the (base64 code of the) image we want to use as a

reference for what we did today; entries are all the past entries.

When we load an image, we ask Clarifai to come up with possible entries:

...

methods: {

selectFile(e) {

const file = e.target.files[0]

const reader = new FileReader()

if (file) {

reader.addEventListener('load', () => {

const data_uri = reader.result

this.data_uri = data_uri

const base64 = data_uri.split(',')[1]

app.models.predict(Clarifai.GENERAL_MODEL, base64)

.then(response => {

this.tentativeEntries =

response.outputs[0].data.concepts

.map(c => c.name)

})