Why is this error in tensorflow js when model predict?

Question

If I execute my code, I get the below error

error: Uncaught (in promise) TypeError: model.predict is not a function

My code

const model = tf.loadLayersModel('./tf_js/model.json');
const video1 = document.getElementsByClassName('input_video1')[0];
const canvas = document.getElementsByClassName('output1')[0];
const ctx = canvas.getContext('2d');
var face = document.getElementById("faceImage");
    
function onResultsFace(results) {
    document.body.classList.add('loaded');
    fpsControl.tick();
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (results.detections.length > 0) {
        drawRectangle(
            ctx, results.detections[0].boundingBox,
            {color: 'white', lineWidth: 1, fillColor: '#00000000'});
            
            w = results.detections[0].boundingBox['width'] * canvas.width;
            h = results.detections[0].boundingBox['height'] * canvas.height;
            x = results.detections[0].boundingBox['xCenter'] * canvas.width;
            y = results.detections[0].boundingBox['yCenter'] * canvas.height;
    }

    ctx.drawImage(results.image, x-w/2, y-h/2, w, h, 0, 0, canvas.width, canvas.height);      
    face.src = canvas.toDataURL();
    let faceImage = tf.browser.fromPixels(face);
    faceImage = tf.image.resizeBilinear(faceImage, [224, 224]);
    faceImage = tf.expandDims(faceImage, 0);

    df = tf.zeros([1, 106], tf.float32);
    console.log(df);

    const prediction = model.predict((faceImage, df));
    const predictionArray = prediction.dataSync();
    console.log("prediction", prediction);
    const maxValue = predictionArray.indexOf(Math.max(...predictionArray));
}

input_video1 is user's webcam and output1 is face detection image of input_video1

To use face image in canvas, I received the image in canvas as face(tag:faceImage)

My model needs two input(image-(224, 224, 3) and array-(1, 106))

The df is intended to be used temporarily for testing