<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browser test</title>
<style>
body > div, body > hr {
margin-bottom: 12px;
}
</style>
</head>
<body>
<div>
<div>API key</div>
<div><input id="api-key" placeholder="ei_..." style="width: 300px"></div>
</div>
<div>
<button id="fetch-info">Fetch project info</button>
</div>
<hr>
<div>Project info: <span id="project-name">...</span></div>
<hr>
<div>
<button id="run-export-data" disabled>Run export data job</button>
</div>
<pre id="job-output"></pre>
<script src="https://studio.edgeimpulse.com/api-bindings/browser/edge-impulse-api.js"></script>
<script>
// Create new API instance, you'll need to authenticate first (via api.authenticate()), see below
const api = new EdgeImpulseApi();
const apiKeyInputEl = document.querySelector('#api-key');
const fetchInfoBtn = document.querySelector('#fetch-info');
const projectNameEl = document.querySelector('#project-name');
const runExportDataBtn = document.querySelector('#run-export-data');
const jobOutputEl = document.querySelector('#job-output');
let projectId = -1;
fetchInfoBtn.onclick = async (ev) => {
ev.preventDefault();
fetchInfoBtn.disabled = true;
try {
await api.authenticate({
method: 'apiKey',
apiKey: apiKeyInputEl.value,
});
// this'll return a single project when you
const projects = (await api.projects.listProjects()).projects;
const project = (await api.projects.getProjectInfo(projects[0].id)).project;
console.log('project', project.owner + ' / ' + project.name);
projectNameEl.textContent = project.owner + ' / ' + project.name;
projectId = project.id;
runExportDataBtn.disabled = false;
}
catch (ex) {
runExportDataBtn.disabled = true;
alert(`Error: ${ex.message || ex.toString()}`);
}
finally {
fetchInfoBtn.disabled = false;
}
};
runExportDataBtn.onclick = async (ev) => {
ev.preventDefault();
runExportDataBtn.disabled = true;
try {
if (projectId === -1) {
throw new Error(`projectId is -1, did you not fetch info first?`);
}
jobOutputEl.textContent += 'Creating export job...\n';
// export data
let exportJob = await api.jobs.startOriginalExportJob(projectId, {
retainCrops: true,
uploaderFriendlyFilenames: false,
});
jobOutputEl.textContent += 'Created export job with ID ' + exportJob.id + '\n';
// any job can be awaited until completion (will use websockets/polling to see if the
// job succeeds). The second argument is a data callback (with job logs).
await api.runJobUntilCompletion({
type: 'project',
projectId: projectId,
jobId: exportJob.id,
}, data => {
console.log(data);
jobOutputEl.textContent += data;
});
console.log('Job completed');
jobOutputEl.textContent += 'Job completed\n';
}
catch (ex) {
alert(`Error: ${ex.message || ex.toString()}`);
}
finally {
runExportDataBtn.disabled = false;
}
};
</script>
</body>
</html>