99热久久国产精品这里有9,男女羞羞视频免费观看,久久97精品久久久久久清纯

env.allowLocalModels = false;

此代碼從CDN（內(nèi)容傳送網(wǎng)絡(luò)）中導(dǎo)入必要的模塊。pipeline 和 env 是從 @xenova/transformers 包中導(dǎo)入的。
env.allowLocalModels = false;?將環(huán)境變量?allowLocalModels?設(shè)置為?false，表示不允許使用本地模型。

Step2：文件上傳事件監(jiān)聽(tīng)器

const fileUpload = document.getElementById('file-upload');

const imageContainer = document.getElementById('image-container')

fileUpload.addEventListener('change', function (e) {

    // 當(dāng)選擇文件時(shí)觸發(fā)的事件監(jiān)聽(tīng)器

});

此部分代碼從HTML文檔中選擇文件上傳輸入框和圖像容器。
它向文件上傳輸入框添加了一個(gè)事件監(jiān)聽(tīng)器，當(dāng)選擇文件時(shí)觸發(fā)一個(gè)函數(shù)。

Step3：FileReader 讀取上傳的圖像

const reader = new FileReader();

reader.onload = function (e2) {

    // 文件讀取完成時(shí)執(zhí)行的函數(shù)

};

reader.readAsDataURL(file)

當(dāng)選擇文件時(shí)，創(chuàng)建了一個(gè) FileReader 對(duì)象。
一個(gè) onload 事件監(jiān)聽(tīng)器被附加到讀取器上，當(dāng)文件讀取完成時(shí)執(zhí)行一個(gè)函數(shù)。
readAsDataURL?方法在讀取器上被調(diào)用，將所選文件的內(nèi)容讀取為數(shù)據(jù)URL。

Step4：顯示上傳的圖像

javascriptCopy code

const image = document.createElement('img');

image.src = e2.target.result;

imageContainer.appendChild(image)

在 onload 函數(shù)內(nèi)部，創(chuàng)建了一個(gè) <img> 元素。
圖像的 src 屬性設(shè)置為讀取文件作為數(shù)據(jù)URL的結(jié)果。
圖像元素被追加到HTML文檔中的圖像容器中。

Step5：?jiǎn)?dòng)AI檢測(cè)

detect(image)

在顯示上傳的圖像后，使用上傳的圖像作為參數(shù)調(diào)用 detect 函數(shù)。

Step6：使用AI模型進(jìn)行對(duì)象檢測(cè)

const detector = await pipeline("object-detection", "Xenova/detr-resnet-50")

const output = await detector(image.src, {

    threshold: 0.1,

    percentage: true

})

使用 pipeline 函數(shù)從指定的模型（"Xenova/detr-resnet-50"）實(shí)例化一個(gè)對(duì)象檢測(cè)模型（"object-detection"）。
使用 await 等待 detector 對(duì)象，確保模型完全加載后再繼續(xù)。
然后使用 detector 對(duì)象在上傳的圖像上執(zhí)行對(duì)象檢測(cè)。
output?包含對(duì)象檢測(cè)任務(wù)的結(jié)果。

Step7：渲染檢測(cè)到的框

output.forEach(renderBox)

對(duì)輸出中檢測(cè)到的每個(gè)對(duì)象，調(diào)用?renderBox?函數(shù)以渲染邊界框。

Step8：渲染邊界框

function renderBox({ box, label }) {

    // 渲染邊界框的函數(shù)

}

renderBox 函數(shù)接受一個(gè)具有 box（邊界框的坐標(biāo)）和 label（檢測(cè)到的對(duì)象的標(biāo)簽）的對(duì)象。
在函數(shù)內(nèi)部，創(chuàng)建一個(gè) <div> 元素來(lái)表示邊界框。
應(yīng)用 CSS 樣式來(lái)根據(jù)檢測(cè)到的對(duì)象的坐標(biāo)來(lái)定位和樣式化邊界框。
創(chuàng)建一個(gè) <span> 元素來(lái)在邊界框內(nèi)顯示檢測(cè)到的對(duì)象的標(biāo)簽。

完整代碼

<!--

    * @func 文件上傳和對(duì)象檢測(cè)功能

    * @desc 實(shí)現(xiàn)了圖片上傳功能，并利用Transformer模型進(jìn)行對(duì)象檢測(cè)，并在圖片上標(biāo)記檢測(cè)到的對(duì)象

    * @author [Your Name]

    * @data 2024-04-17

-->

<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>nlp之圖片識(shí)別，兩種語(yǔ)言</title>

  <!-- CSS 樣式 -->

  <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>

  <!-- 頁(yè)面主體內(nèi)容 -->

  <main class="container">

    <label for="file-upload" class="custom-file-upload">

      <input type="file" accept="image/*" id="file-upload">

      上傳圖片

    </label>

    <div id="image-container"></div>

    <p id="status"></p>

  </main>



  <!-- JavaScript 代碼 -->

  <script type="module">

    // 導(dǎo)入transformers nlp任務(wù)的pipeline和env對(duì)象

    import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"

    // 允許本地模型

    env.allowLocalModels = false;



    // 獲取文件上傳和圖片容器元素

    const fileUpload = document.getElementById('file-upload');

    const imageContainer = document.getElementById('image-container')



    // 監(jiān)聽(tīng)文件上傳事件

    fileUpload.addEventListener('change', function (e) {

      const file = e.target.files[0];

      const reader = new FileReader();

      reader.onload = function (e2) {

        const image = document.createElement('img');

        image.src = e2.target.result;

        imageContainer.appendChild(image)

        detect(image)

      }

      reader.readAsDataURL(file)

    })



    // 獲取狀態(tài)信息元素

    const status = document.getElementById('status');



    // 檢測(cè)圖片的AI任務(wù)

    const detect = async (image) => {

      status.textContent = "分析中..."

      const detector = await pipeline("object-detection", "Xenova/detr-resnet-50")

      const output = await detector(image.src, {

        threshold: 0.1,

        percentage: true

      })

      output.forEach(renderBox)

    }



    // 渲染檢測(cè)框函數(shù)

    function renderBox({ box, label }) {

      const { xmax, xmin, ymax, ymin } = box

      const boxElement = document.createElement("div");

      boxElement.className = "bounding-box"

      Object.assign(boxElement.style, {

        borderColor: '#123123',

        borderWidth: '1px',

        borderStyle: 'solid',

        left: 100 * xmin + '%',

        top: 100 * ymin + '%',

        width: 100 * (xmax - xmin) + "%",

        height: 100 * (ymax - ymin) + "%"

      })



      const labelElement = document.createElement('span');

      labelElement.textContent = label;

      labelElement.className = "bounding-box-label"

      labelElement.style.backgroundColor = '#000000'



      boxElement.appendChild(labelElement);

      imageContainer.appendChild(boxElement);

    }

</script>

</body>



</html>

效果圖

還需要調(diào)整參數(shù)，加強(qiáng)精確度

總結(jié)

這篇文章，我們探討了將AI對(duì)象檢測(cè)與前端Web開(kāi)發(fā)無(wú)縫集成的方法。通過(guò)按照所述步驟并利用現(xiàn)成的AI庫(kù)，開(kāi)發(fā)人員可以為其Web應(yīng)用程序增加強(qiáng)大的圖像識(shí)別功能。這種AI和前端技術(shù)的融合為在Web上創(chuàng)建智能和交互式用戶體驗(yàn)開(kāi)啟了廣闊的可能性。

文章轉(zhuǎn)自微信公眾號(hào)@web前端開(kāi)發(fā)營(yíng)