renderPredictor = async () => { const result = document.createElement('div'); let profile, oldResults; const selectView = document.createElement('div'); const graphView = document.createElement('div'); result.innerHTML = "

Select user profile:

"; const userSelect = document.createElement('select'); userSelect.innerHTML = Object.keys(data.userProfile).map(id => ``).join(""); userSelect.addEventListener('change', () => { selectUser(userSelect.value); }); const tags = checkbox(rawData.tags); const tagsSet = new Set(); const searchTags = {}; selectView.innerHTML = `

Select at least one tag:

`; selectView.querySelector('#tagsview').appendChild(tags); const leftView = selectView.querySelector('#left'); const rightView = selectView.querySelector('#right'); const predict = async () => { userSelect.disabled = true; result.querySelectorAll('input').forEach( input => input.disabled = true); leftView.innerHTML = 'Processing...'; let results = []; let index = 0; for (let movie of Object.values(rawData.movies)) { if (tagsSet.size === 0 || movie.tags.filter(tag => tagsSet.has(tag)).length > 0) { const { stats, tagsData, ratingData } = profile; const movieProfile = data.movieProfile[movie.id].profile; const input = [].concat(stats).concat(tagsData).concat(ratingData).concat(movieProfile); const result = await model.predict(tf.tensor([input])).data(); results.push([movie.title, result[0]]); results = results.sort( (a, b) => { return b[1] - a[1]; }).splice(0, 30); leftView.innerHTML = `

Evaluating movie: ${index++} (Total: ${data.moviesCount})

`; results.forEach( (left, index) => { leftView.innerHTML += `

${index+1}. ${left[0]}

` }) } }; leftView.innerHTML = rightView.innerHTML = ''; results.forEach( (left, index) => { let right = ['']; if (oldResults && oldResults[index]) { right = oldResults[index]; } if (left[0] !== right[0]) { leftView.innerHTML += `

${index}. ${left[0]}

`; if (right[0] !== '') rightView.innerHTML += `

${index}. ${right[0]}

`; } else { leftView.innerHTML += `

${index+1}. ${left[0]}

`; if (right[0] !== '') rightView.innerHTML += `

${index+1}. ${right[0]}

`; } }); userSelect.disabled = false; result.querySelectorAll('input').forEach( input => input.disabled = false); oldResults = results; } tags.addEventListener('change', async evt => { const { checked, value } = evt.target; if (checked) { tagsSet.add(value); } else { tagsSet.delete(value); } }); const selectUser = async (value) => { profile = data.userProfile[value]; graphView.innerHTML = `

`; const rating = await vegalite({ height: 100, data: {values: profile.ratingData.reduce((memo, data, index) => { return memo.concat({index: index / 2, data}); }, [])}, mark: "bar", encoding: { x: { field: "index",type: "ordinal" }, y: { field: "data", type: "quantitative"} } }); const tags = await vegalite({ width: 500, height: 100, data: {values: profile.tagsData.reduce((memo, data, index) => { return memo.concat({tag: rawData.tags[index], data}); }, [])}, mark: "bar", encoding: { x: { field: "tag",type: "ordinal" }, y: { field: "data", type: "quantitative"} } }); graphView.querySelector("#graph1").appendChild(rating); graphView.querySelector("#graph2").appendChild(tags); } selectUser(1); const predictBtn = document.createElement('button'); predictBtn.innerText = 'get list'; predictBtn.addEventListener('click', async () => { await predict(); }); result.appendChild(userSelect); result.appendChild(graphView); result.appendChild(selectView); selectView.querySelector('#actions').appendChild(predictBtn); return result; }