Skip to content

Commit

Permalink
feat(bindgen): support input image, mesh vector inputs for demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@thewtex
thewtex committed Aug 21, 2023
1 parent cd29c91 commit 86291ef
Showing 1 changed file with 42 additions and 32 deletions.
74 changes: 42 additions & 32 deletions src/bindgen/typescript/demo/input-parameters-demo-typescript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function inputParametersDemoTypeScript(functionName, indent, parameter, required
switch (parameter.type) {
case 'INPUT_TEXT_FILE':
case 'INPUT_TEXT_FILE:FILE':
case 'INPUT_TEXT_STREAM': {
case 'INPUT_TEXT_STREAM':
result += `${indent}const ${inputIdentifier} = document.querySelector('#${functionName}Inputs input[name=${parameter.name}-file]')\n`
result += `${indent}${inputIdentifier}.addEventListener('change', async (event) => {\n`
result += `${indent}${indent}const dataTransfer = event.dataTransfer\n`
Expand All @@ -28,11 +28,10 @@ function inputParametersDemoTypeScript(functionName, indent, parameter, required
result += `${indent}${indent}details.disabled = false\n`
}
result += `${indent}})\n\n`
}
break
case 'INPUT_BINARY_FILE':
case 'INPUT_BINARY_FILE:FILE':
case 'INPUT_BINARY_STREAM': {
case 'INPUT_BINARY_STREAM':
result += `${indent}const ${inputIdentifier} = document.querySelector('#${functionName}Inputs input[name=${parameter.name}-file]')\n`
result += `${indent}${inputIdentifier}.addEventListener('change', async (event) => {\n`
result += `${indent}${indent}const dataTransfer = event.dataTransfer\n`
Expand All @@ -54,7 +53,6 @@ function inputParametersDemoTypeScript(functionName, indent, parameter, required
result += `${indent}${indent}details.disabled = false\n`
}
result += `${indent}})\n\n`
}
break
case 'TEXT':
result += `${indent}const ${inputIdentifier} = document.querySelector('#${functionName}Inputs sl-input[name=${parameter.name}]')\n`
Expand All @@ -81,40 +79,52 @@ function inputParametersDemoTypeScript(functionName, indent, parameter, required
result += `${indent}})\n\n`
break
case 'INPUT_JSON':
result += `${indent}const ${inputIdentifier} = document.querySelector('#${functionName}Inputs input[name=${parameter.name}-file]')\n`
result += `${indent}${inputIdentifier}.addEventListener('change', async (event) => {\n`
result += `${indent}${indent}const dataTransfer = event.dataTransfer\n`
result += `${indent}${indent}const files = event.target.files || dataTransfer.files\n\n`
result += `${indent}${indent}const arrayBuffer = await files[0].arrayBuffer()\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", JSON.parse(new TextDecoder().decode(new Uint8Array(arrayBuffer))))\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(model.${modelProperty}.get("${parameterName}"), globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
result += `${indent}${indent}details.disabled = false\n`
result += `${indent}})\n\n`
break
case 'INPUT_IMAGE':
result += `${indent}const ${inputIdentifier} = document.querySelector('#${functionName}Inputs input[name=${parameter.name}-file]')\n`
result += `${indent}${inputIdentifier}.addEventListener('change', async (event) => {\n`
result += `${indent}${indent}const dataTransfer = event.dataTransfer\n`
result += `${indent}${indent}const files = event.target.files || dataTransfer.files\n\n`
result += `${indent}${indent}const { image, webWorker } = await readImageFile(null, files[0])\n`
result += `${indent}${indent}webWorker.terminate()\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", image)\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(image, globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
result += `${indent}${indent}details.disabled = false\n`
result += `${indent}})\n\n`
break
case 'INPUT_MESH':
result += `${indent}const ${inputIdentifier} = document.querySelector('#${functionName}Inputs input[name=${parameter.name}-file]')\n`
result += `${indent}${inputIdentifier}.addEventListener('change', async (event) => {\n`
result += `${indent}${indent}const dataTransfer = event.dataTransfer\n`
result += `${indent}${indent}const files = event.target.files || dataTransfer.files\n\n`
result += `${indent}${indent}const { mesh, webWorker } = await readMeshFile(null, files[0])\n`
result += `${indent}${indent}webWorker.terminate()\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", mesh)\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(mesh, globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
if (parameter.type === 'INPUT_JSON') {
if (parameter.itemsExpectedMax > 1) {
console.error('items > 1 are currently not supported')
process.exit(1)
}
result += `${indent}${indent}const arrayBuffer = await files[0].arrayBuffer()\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", JSON.parse(new TextDecoder().decode(new Uint8Array(arrayBuffer))))\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(model.${modelProperty}.get("${parameterName}"), globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
} else if (parameter.type === 'INPUT_IMAGE') {
if (parameter.itemsExpectedMax > 1) {
result += `${indent}${indent}const readImages = await Promise.all(Array.from(files).map(async (file) => readImageFile(null, file)))\n`
result += `${indent}${indent}readImages.forEach(img => img.webWorker.terminate())\n`
result += `${indent}${indent}const inputImages = readImages.map(img => img.image)\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", inputImages)\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(inputImages, globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
} else {
result += `${indent}${indent}const { image, webWorker } = await readImageFile(null, files[0])\n`
result += `${indent}${indent}webWorker.terminate()\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", image)\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(image, globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
}
} else if (parameter.type === 'INPUT_MESH') {
if (parameter.itemsExpectedMax > 1) {
result += `${indent}${indent}const readMeshes = await Promise.all(Array.from(files).map(async (file) => readMeshFile(null, file)))\n`
result += `${indent}${indent}readMeshes.forEach(msh => msh.webWorker.terminate())\n`
result += `${indent}${indent}const inputMeshes = readMeshes.map(msh => msh.mesh)\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", inputMeshes)\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(inputMeshes, globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
} else {
result += `${indent}${indent}const { mesh, webWorker } = await readMeshFile(null, files[0])\n`
result += `${indent}${indent}webWorker.terminate()\n`
result += `${indent}${indent}model.${modelProperty}.set("${parameterName}", mesh)\n`
result += `${indent}${indent}const details = document.getElementById("${functionName}-${parameter.name}-details")\n`
result += `${indent}${indent}details.innerHTML = \`<pre>$\{globalThis.escapeHtml(JSON.stringify(mesh, globalThis.interfaceTypeJsonReplacer, 2))}</pre>\`\n`
}
}
result += `${indent}${indent}details.disabled = false\n`
result += `${indent}})\n\n`
break
Expand Down

0 comments on commit 86291ef

Please sign in to comment.