代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Chohotech Javascript (Node.js) Sample</title>
</head>
<body>
<div>
<h1>Chohocloud Javascript (Node.js) Sample</h1>
<div style="color:blue; font-weight: bold; margin: 30px">
This example page is for: <br />
1. Quick API testing in the browser <br />
2. Providing JavaScript programming examples for Node.js <br />
<br />
<br />
This page will call the tooth segmentation service, which will annotate the FDI tooth numbers of each face of the semi-mandible 3D model STL passed in. <br />
After segmentation, seg_labels.txt and processed_mesh.stl will be generated. <br />
STL is the processed (simplified/registered) 3D model, and seg_labels.txt contains the FDI tooth numbers for each face of the processed 3D model. <br />
The number of lines in seg_labels.txt matches the number of faces in processed_mesh.stl.
</div>
<div style="color:red; margin: 30px">
The code for this example page is located at
<a href="https://gitee.com/chohotech/api_javascript_sample" target="_blank">
gitee.com/chohotech/api_javascript_sample
</a><br />
The core code for calling the API is located in the start_seg function in index.html. <br />
<span style="font-weight: bold;">
JavaScript programming examples are intended to provide Node.js programming references. Please do not include them in JavaScript frontend code! Otherwise, users will obtain your calling information, and you will be charged for unauthorized use of this information by users!
</span>
</div>
<div style="font-weight: bold; margin: 30px">
Please fill in the following information and click the Launch Segmentation Task button.
</div>
</div>
<div style="margin: 30px">
Select upper/lower jaw STL File: <input type="file" id="file" accept="*" /> <br /><br />
Select Upper or Lower Jaw:
<input type="radio" name="jaw_type" id="r1" value="Upper"><label for="r1">Upper</label>
<input type="radio" name="jaw_type" id="r2" value="Lower" checked><label for="r2">Lower</label>
<br /><br />
Base URL: <input type="text" name="base_url" id="base_url">
<br /><br />
File Server URL: <input type="text" name="file_server_url" id="file_server_url">
<br /><br />
User ID: <input type="text" name="user_id" id="user_id">
<br /><br />
ZH Token: <input type="text" name="zh_token" id="zh_token">
<br /> <br /> <br />
<button type="button" id="launchbtn" onclick="seg_wrapper()">Launch Segmentation Task</button>
</div>
<div id="resdiv"></div>
</body>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
async function start_seg(){
$("#resdiv").html("");
$("#launchbtn").html("Please wait for the task to complete, logs and results will be displayed below the button.");
$("#launchbtn").attr('disabled', true);
let file_server_url = $("#file_server_url").val();
let user_id = $("#user_id").val();
let zh_token = $("#zh_token").val();
let base_url = $("#base_url").val();
let jaw_type = $("input[type='radio'][name='jaw_type']:checked").val();
// Step 1. upload mesh to file server
let now = Math.floor(Date.now() / 1000);
let res = await $.ajax({
url: file_server_url + "/scratch/APIClient/" +
user_id + "/upload_url?postfix=stl",
headers: {"X-ZH-TOKEN": zh_token},
type: "GET"
})
let mesh_urn = "urn:zhfile:o:s:APIClient:"+ user_id + ":" +
res.substring(
res.indexOf(user_id) + user_id.length + 1,
res.indexOf("?")
);
await $.ajax({
url : res,
type : 'PUT',
data : $('#file')[0].files[0],
cache: false,
processData: false,
contentType: "",
});
$("#resdiv").html($("#resdiv").html() + "Upload takes " + (Math.floor(Date.now() / 1000)- now) +" seconds<br />");
// Step 2. construct request
let job_req = {
"spec_group": "mesh-processing",
"spec_name": "oral-seg",
"spec_version": "1.0-snapshot",
"user_id" : user_id,
"user_group" : "APIClient",
"input_data" : {
"jaw_type" : jaw_type,
"mesh" : {
"type" : "stl",
"data" : mesh_urn
}
},
"output_config" : {
"mesh" : {
"type" : "stl"
}
}
};
res = await $.ajax({
url: base_url + "/run",
headers: {"X-ZH-TOKEN": zh_token,
"Content-Type": "application/json",
"accept": "application/json"},
type: "POST",
data: JSON.stringify(job_req),
contentType: "application/json; charset=utf-8",
dataType: "json"
});
let run_id = res["run_id"];
$("#resdiv").html($("#resdiv").html() + "run id is: " + run_id + "<br />waiting for job completion<br />")
// Step 3. wait until job finished
now = Math.floor(Date.now() / 1000);
while(true){
await new Promise(r => setTimeout(r, 3000));
res = await $.ajax({
url: base_url + "/run/" + run_id,
headers: {"X-ZH-TOKEN": zh_token},
type: "GET",
dataType: "json"
});
if(res["failed"]){
$("#launchbtn").html("Launch Segmentation Task");
$("#launchbtn").attr('disabled', false);
$("#resdiv").html($("#resdiv").html() + "job failed with reason: " + res["reason_public"]);
return;
}
if(res["completed"]) break;
}
$("#resdiv").html($("#resdiv").html() + "job completed in " + (Math.floor(Date.now() / 1000)- now) +" seconds<br />");
// Step 4. get job results
res = await $.ajax({
url: base_url + "/data/" + run_id,
headers: {"X-ZH-TOKEN": zh_token,
"accept": "application/json"},
type: "GET",
dataType: "json"
});
let blob_seg_labels = new Blob([res["seg_labels"].join('\n')], {
type: 'text/plain'
});
// Step 5. download processed mesh from file server
res = await $.ajax({
url: file_server_url + "/file/download?urn=" + res["mesh"]["data"],
headers: {"X-ZH-TOKEN": zh_token},
type: "GET",
cache: false,
xhrFields: {
responseType: "blob"
}
});
$("#resdiv").html($("#resdiv").html() +
"<br />Results are ready for download:<br /><a href='" +
URL.createObjectURL(blob_seg_labels) +
"' download='seg_labels.txt'>seg_labels.txt</a> " +
"<a href='" + URL.createObjectURL(res) +
"' download='processed_mesh.stl'>processed_mesh.stl</a><br /><br />");
$("#resdiv").html($("#resdiv").html() +
"seg_labels.txt contains FDI of each face in processed_mesh.stl <br /><br />" +
"To start another job, fill the form again and click the button!");
$("#launchbtn").html("Launch Segmentation Task");
$("#launchbtn").attr('disabled', false);
}
async function seg_wrapper(){
try {
await start_seg();
} catch(error) {
console.log("job errored with following error object")
console.log(error);
$("#resdiv").html($("#resdiv").html() + "job failed. See console for details.");
$("#launchbtn").html("Launch Segmentation Task");
$("#launchbtn").attr('disabled', false);
}
}
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手