如何使用javascript和HTML在浏览器上打印消息

我目前正在浏览器上进行人脸检测。下面是我的java脚本代码片段。当面在屏幕上可见时，它会检测边界框。当我的模型没有检测到人脸时，我想在画布上打印一条消息。在这种情况下，predicts.length将等于0 这是我的代码，我如何为我的功能修改它

async function draw(video,context, width, height)
{
    context.drawImage(video,0,0,width,height);
    const model = await blazeface.load();
    const returnTensors = false;
    const predictions = await model.estimateFaces(video, returnTensors);
    
    console.log(predictions);
    for (let i = 0; i < predictions.length; i++) {

    const start = predictions[i].topLeft;
    const end = predictions[i].bottomRight;
    var probability = predictions[i].probability;
    const size = [end[0] - start[0], end[1] - start[1]];
    // Render a rectangle over each detected face.
    context.beginPath();
    context.strokeStyle="green";
    context.lineWidth = "4";
    context.rect(start[0], start[1],size[0], size[1]);
    context.stroke();
    var prob = (probability[0]*100).toPrecision(5).toString();
    var text = prob+"%";
    context.fillStyle = "red";
    context.font = "13pt sans-serif";
    context.fillText(text,start[0]+5,start[1]+20);
    
    
    }
    setTimeout(draw,250,video,context,width,height);
}

异步函数绘制（视频、上下文、宽度、高度）
{
drawImage（视频，0,0，宽度，高度）；
const model=wait blazeface.load（）；
常量返回张量=假；
常数预测=等待模型。估计面（视频、返回张量）；
控制台日志（预测）；
for（设i=0；i<0.length；i++）{
常数开始=预测[i]。左上角；
const end=预测[i]。右下角；
var概率=预测[i]。概率；
常量大小=[end[0]-start[0]，end[1]-start[1]]；
//在每个检测到的面上渲染一个矩形。
context.beginPath（）；
context.strokeStyle=“绿色”；
context.lineWidth=“4”；
rect（开始[0]，开始[1]，大小[0]，大小[1]）；
stroke（）；
var prob=（概率[0]*100）.toPrecision（5）.toString（）；
var text=prob+“%”；
context.fillStyle=“红色”；
context.font=“13pt无衬线”；
context.fillText（text，start[0]+5，start[1]+20）；
}
设置超时（绘图、250、视频、上下文、宽度、高度）；
}

这是我正在实施的Git回购协议 请不要太苛刻，我是第一次使用JS

检查预测长度

如果没有预测，则在画布中呈现错误消息

。。。
常数预测=等待模型。估计面（视频、返回张量）；
如果（长度<1）{
context.fillText（'未检测到人脸'），150，20）；
context.textAlign=“中心”；
}
控制台日志（预测）；
for（设i=0；i<0.length；i++）{
...

只需使用要显示的消息创建一个

div

或

h1

，并向其中添加

style=“display:none”

。当您要显示消息时，请将

display

属性设置为如下所示的block:

document.getElementById（“myDIV”）.style.display=“block”；

我在html文件中添加了//1，我在常量开始上方的for循环开始处添加了if-else。但是，该文本框在ui中不可见，我做错了什么？你想在for循环之前添加它，而不是在它里面。如果没有任何预测，循环根本不会运行。我将更新我的答案以使其生效更清晰。非常感谢，它可以工作。但是，再多一个帮助。我可以更改当前消息的位置吗？它位于左上角（我将其设置为h1）。我希望它出现在视频帧中，就像如果有脸，以概率显示边界框，如果没有脸，则消息“未检测到脸”好的，我们可以通过将消息写入画布而不是html元素来实现这一点。我将更新我的答案。非常感谢，这很有效，而且代码很容易理解：）

...
const predictions = await model.estimateFaces(video, returnTensors);

if (predictions.length < 1) {
  context.fillText('No face detected.', 150, 20);
  context.textAlign = "center"; 
}

console.log(predictions);
for (let i = 0; i < predictions.length; i++) {
...