chao
/
spine


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <head>
        <script src="./model/jszip.min.js"></script>
        <script src="./model/tf.min.js"></script>
        <script>
            async function main() {
                const video = document.querySelector('video');
                const canvas = document.querySelector('canvas');
                const select = document.querySelector('select');
                const startRecordingBtn = document.getElementById("startRecording")
                const load = document.getElementById("load")
                let show = false
                const setTime = setInterval(()=>{
                    if(show){
                        startRecordingBtn.classList.remove("disabled")
                        startRecordingBtn.disabled = false
                        load.classList.remove('loading')
                        clearInterval(setTime)
                    }
                },500)
                video.width = 700;
                video.height = 700;
                const webcam = await tf.data.webcam(video);
                const model = await tf.loadGraphModel('/model/model.json');

                
                // Set initial recurrent state
                let [r1i, r2i, r3i, r4i] = [tf.tensor(0.), tf.tensor(0.), tf.tensor(0.), tf.tensor(0.)];

                // Set downsample ratio
                const downsample_ratio = tf.tensor(0.5);

                // Inference loop
                while (true) {
                    await tf.nextFrame();
                    const img = await webcam.capture();
                    const src = tf.tidy(() => img.expandDims(0).div(255)); // normalize input
                    const [fgr, pha, r1o, r2o, r3o, r4o] = await model.executeAsync(
                        {src, r1i, r2i, r3i, r4i, downsample_ratio}, // provide inputs
                        ['fgr', 'pha', 'r1o', 'r2o', 'r3o', 'r4o']   // select outputs
                    );
                    show = true
                    // Draw the result based on selected view
                    const viewOption = "white";
                    if (viewOption === 'recurrent1') {
                        drawHidden(r1o, canvas);
                    } else if (viewOption === 'recurrent2') {
                        drawHidden(r2o, canvas);
                    } else if (viewOption === 'recurrent3') {
                        drawHidden(r3o, canvas);
                    } else if (viewOption === 'recurrent4') {
                        drawHidden(r4o, canvas);
                    } else if (viewOption === 'white') {
                        drawMatte(fgr.clone(), pha.clone(), canvas);
                        canvas.style.background = 'rgb(255, 255, 255)';
                    } else if (viewOption === 'green') {
                        drawMatte(fgr.clone(), pha.clone(), canvas);
                        canvas.style.background = 'rgb(120, 255, 155)';
                    } else if (viewOption === 'alpha') {
                        drawMatte(null, pha.clone(), canvas);
                        canvas.style.background = 'rgb(0, 0, 0)';
                    } else if (viewOption === 'foreground') {
                        drawMatte(fgr.clone(), null, canvas);
                    }

                    // Dispose old tensors.
                    tf.dispose([img, src, fgr, pha, r1i, r2i, r3i, r4i]);

                    // Update recurrent states.
                    [r1i, r2i, r3i, r4i] = [r1o, r2o, r3o, r4o];
                }
            }

            async function drawMatte(fgr, pha, canvas){
                const rgba = tf.tidy(() => {
                    const rgb = (fgr !== null) ?
                        fgr.squeeze(0).mul(255).cast('int32') :
                        tf.fill([pha.shape[1], pha.shape[2], 3], 255, 'int32');
                    const a = (pha !== null) ?
                        pha.squeeze(0).mul(255).cast('int32') :
                        tf.fill([fgr.shape[1], fgr.shape[2], 1], 255, 'int32');
                    return tf.concat([rgb, a], -1);
                });
                fgr && fgr.dispose();
                pha && pha.dispose();
                const [height, width] = rgba.shape.slice(0, 2);
                const pixelData = new Uint8ClampedArray(await rgba.data());
                const imageData = new ImageData(pixelData, width, height);
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').putImageData(imageData, 0, 0);
                rgba.dispose();
            }

            async function drawHidden(r, canvas) {
                const rgba = tf.tidy(() => {
                    r = r.unstack(-1)
                    r = tf.concat(r, 1)
                    r = r.split(4, 1)
                    r = tf.concat(r, 2)
                    r = r.squeeze(0)
                    r = r.expandDims(-1)
                    r = r.add(1).mul(127.5).cast('int32')
                    r = r.tile([1, 1, 3])
                    r = tf.concat([r, tf.fill([r.shape[0], r.shape[1], 1], 255, 'int32')], -1)
                    return r;
                });
                const [height, width] = rgba.shape.slice(0, 2);
                const pixelData = new Uint8ClampedArray(await rgba.data());
                const imageData = new ImageData(pixelData, width, height);
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').putImageData(imageData, 0, 0);
                rgba.dispose();
            }
            

            window.addEventListener('load', main);
        </script>
        <title>脊柱识别</title>
        <style>
            body{
                height: 100vh;
                margin: 0;
                padding: 0;
                position: relative;
            }
            #myCanvas{
                width: 700px;
                height: 700px;
                border: 2px slategray solid;
                border-radius: 8px;
            }
            button{
                padding: 10px 15px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
            }
            .leftCanvasLine{
                position: absolute;
                height: 99%;
                top: 50%;
                left: 58%;
                transform: translate(0,-50%);
                border: 2px dashed #fc5531;
            }
            .rightCanvasLine{
                position: absolute;
                height: 99%;
                top: 50%;
                left: 42%;
                transform: translate(0,-50%);
                border: 2px dashed #fc5531;
            }
            .loading{
                display: block !important;
                position: fixed;
                width: 100vw;
                height: 100vh;
                background-color: rgba(255, 255, 255, 0.9);
                top: 0;
            }
            .loading div{
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                
            }
            .loading div img{
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div style="text-align: center;height: 100%;">
            <h3 style="padding: 10px 0;margin: 0;opacity: 0.7;">这是一个基于tensorflow处理的检测脊柱是否弯曲的一个平台，在一段时间内，一个人从直立到弯腰的过程，通过AI算法来判断这个人的脊柱是否有问题</h3>
            <h1 style="opacity: 0.7;">请进入灰色框里面，并站在虚线中间的位置</h1>
            <button id="startRecording" disabled>开始识别</button>
            <div style="position: relative;margin-top: 15px;">
                <video id="preview" style="display: none;"></video>
                <canvas id="myCanvas"></canvas>
                <div class="leftCanvasLine"></div>
                <div class="rightCanvasLine"></div>
            </div>
        </div>
        <div class="loading" id="load" style="display: none;">
            <div>
                <img src="./loading.gif" alt="">
                <h3>加载中...</h3>
            </div>
        </div>
    </body>
</html>
<script src="./index.js"></script>