Prueba MorphCast Ver3.0
#start_over {
position: absolute;
background-color: #7F8C8D;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
cursor: pointer;
}
#start_over span {
position: absolute;
font-size: 20px;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
display: block;
height: 20px;
margin: auto;
text-align: center;
}
#myProgress {
width: 50%;
background-color: gray;
}
#myBar {
width: 1%;
height: 30px;
background-color: green;
}
// Extended example from https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
$(function () {
// Init and start saving console logs into IndexedDB
l2i.init(function() {// successfully initialized
l2i.on(function() {
// l2i.consoles.original('--- All further logs will be saved in IndexedDB database ---');
console.log('one one');
console.log('two');
console.log('three');
console.log('444');
});
});
// Clear the database
// l2i.init(function(){l2i.on(function(){l2i.clear();});});
// Download a file with logs saved in IndexedDB
$('#download').click(function(){
l2i.download();
});
});
Results
Likely Age: -
Likely Gender: -
Dominant Emotion: -
Face Pose: -
Histogram of Emotions:
CLICK TO START
Attention level:
// Complete code documentation of MorphCast AI SDK, here:
// https://ai-sdk.morphcast.com/latest/index.html
const initSDK = new Promise((res) => {
res(CY.loader()
// Generate your key now at https://www.morphcast.com/sdk-licence-request/
.licenseKey("da6b6a903dc1dfb905a2a4fbf5e93eb63a4ef3e7198a")
.addModule(CY.modules().FACE_AGE.name)
.addModule(CY.modules().FACE_GENDER.name)
.addModule(CY.modules().FACE_EMOTION.name)
.addModule(CY.modules().FACE_ATTENTION.name)
.addModule(CY.modules().FACE_FEATURES.name, [0.90])
.addModule(CY.modules().FACE_DETECTOR.name, {})
.addModule(CY.modules().FACE_POSE.name, [0.65])
.load());
});
/*
Event listeners for MorphCast SDK output
*/
window.addEventListener(CY.modules().FACE_AGE.eventName, (evt) => {
console.log(age_div.innerHTML = 'Likely Age: ' + evt.detail.output.numericAge + ' years');
});
window.addEventListener(CY.modules().FACE_GENDER.eventName, (evt) => {
console.log(gen_div.innerHTML = 'Likely Gender: ' + evt.detail.output.mostConfident);
});
window.addEventListener(CY.modules().FACE_EMOTION.eventName, (evt) => {
console.log(emo_div.innerHTML = 'Dominant Emotion: ' + evt.detail.output.dominantEmotion);
window.addEventListener(CY.modules().FACE_POSE.eventName, (evt) => {
console.log(face_div.innerHTML = 'Face pose result: ', + evt.detail);
});
// data for the histogram
const emotions = evt.detail.output.emotion;
const labels = [];
const data = [];
Object.keys(emotions).forEach(k => {
labels.push(k);
data.push(parseInt((emotions[k] * 100).toFixed(0)));
});
chart.updateOptions({
labels: labels,
series:[{
name: 'Emotion',
data: data
}]
});
});
// face attention
window.addEventListener(CY.modules().FACE_ATTENTION.eventName, (evt) => {
const attention = evt.detail.output.attention;
const elem = document.getElementById("myBar");
elem.style.width = attention * 100 + "%";
});
//face features
window.addEventListener(CY.modules().FACE_FEATURES.eventName, (evt) => {
console.log('Face features result', evt.detail);
});
//FACE_POSE
window.addEventListener(CY.modules().FACE_POSE.eventName, (evt) => {
console.log('Face pose result', evt.detail);
});
/*
Elements of the page
*/
const startButton = document.querySelector("#start_over");
startButton.onclick = () => {
startButton.style.display = "none";
initSDK.then(({start}) => start());
};
const age_div = document.querySelector("#age");
const gen_div = document.querySelector("#gender");
const emo_div = document.querySelector("#emotion");
// const añadida para rostro
const face_div = document.querySelector("#face");
const options = {
chart: {
height: 350,
width: 500,
type: 'bar'
},
yaxis: {
min:0,
max:100
},
series:[],
title: {
text: ''
},
labels:[]
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Descargar Informe
