前端使用transformers进行图像识别

最新推荐文章于 2024-09-11 22:31:16 发布

AwesomeCPA

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量373

点赞数 4

分类专栏： ai 文章标签：前端 transformer

本文链接：https://blog.csdn.net/cpa0701/article/details/140920641

版权

ai 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

transformer介绍
请打开魔法再运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nlp之图片识别</title>
    <style>
        .container {
            margin: 40px auto;
            width: max(50vw, 400px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .custom-file-upload {
            display: flex;
            align-items: center;
            cursor: pointer;
            gap: 10px;
            border: 2px solid black;
            padding: 8px 16px;
            border-radius: 6px;
        }

        #file-upload {
            display: none;
        }

        #image-container {
            width: 100%;
            margin-top: 20px;
            position: relative;
        }

        #image-container>img {
            width: 100%;
        }

        .bounding-box {
            position: absolute;
            box-sizing: border-box;
        }

        .bounding-box-label {
            position: absolute;
            color: white;
            font-size: 12px;
        }
    </style>
</head>

<body>

    <main class="container">
        <label for="file-upload" class="custom-file-upload">
            <!-- input#file-upload -->
            <!-- <input type="text" id="file-upload"> -->
            <input type="file" accept="image/*" id="file-upload">
            上传图片
        </label>
        <div id="image-container"></div>
        <p id="status"></p>
    </main>

    <script type="module">
        // transformers nlp 任务
        import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
        env.allowLocalModels = false;

        const fileUplod = document.getElementById('file-upload');
        const imageContainer = document.getElementById('image-container');

        fileUplod.addEventListener('change', (e) => {
            // console.log(e.target.files[0]);
            const file = e.target.files[0];
            // 新建一个FileReader 对象   01 序列
            // 图片比较大 
            const reader = new FileReader();
            reader.onload = function (e2) {
                // 加载完成
                const image = document.createElement('img'); //创建图片对象
                // console.log(e2.target.result);
                image.src = e2.target.result;
                imageContainer.appendChild(image);
                detect(image); // 启动ai任务 功能模块化， 封装出去
            }
            reader.readAsDataURL(file);
        })

        const status = document.getElementById("status")
        // 检测图片AI任务
        const detect = async (image) => {
            status.textContent = "分析中...";
            // 实例化了一个对象
            const detector = await pipeline("object-detection", "Xenova/detr-resnet-50"); //model 图片对象检测
            const output = await detector(image.src, {
                threshold: 0.1,
                percentage: true
            })
            // console.log(output);
            output.forEach(renderBox)
        }

        function renderBox({ box, label }) {
            console.log(box, label);
            const { xmax, xmin, ymax, ymin } = box;
            const boxElement = document.createElement('div');
            boxElement.className = 'bounding-box';
            Object.assign(boxElement.style, {
                borderColor: '#FF0000',
                borderWidth: '1px',
                borderStyle: 'solid',
                left: 100 * xmin + '%',
                top: 100 * ymin + '%',
                width: 100 * (xmax - xmin) + '%',
                height: 100 * (ymax - ymin) + '%'
            })
            imageContainer.appendChild(boxElement);
            const labelElement = document.createElement('span');
            labelElement.textContent = label;
            labelElement.className = 'bounding-box-label';
            labelElement.style.backgroundColor = '#FF0000';

            boxElement.appendChild(labelElement);
            imageContainer.appendChild(boxElement);
        }



    </script>
</body>
</html>

AwesomeCPA

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端使用transformers进行图像识别

/ 新建一个FileReader 对象 01 序列。// transformers nlp 任务。// 启动ai任务功能模块化，封装出去。//model 图片对象检测。// 检测图片AI任务。// 实例化了一个对象。
复制链接

扫一扫