久久久午夜精品,男人的天堂午夜,国产精品秦先生手机在线

env.allowLocalModels = false;

此代碼從CDN（內容傳送網絡）中導入必要的模塊。pipeline 和 env 是從 @xenova/transformers 包中導入的。
env.allowLocalModels = false;?將環境變量?allowLocalModels?設置為?false，表示不允許使用本地模型。

Step2：文件上傳事件監聽器

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

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

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

    // 當選擇文件時觸發的事件監聽器

});

此部分代碼從HTML文檔中選擇文件上傳輸入框和圖像容器。
它向文件上傳輸入框添加了一個事件監聽器，當選擇文件時觸發一個函數。

Step3：FileReader 讀取上傳的圖像

const reader = new FileReader();

reader.onload = function (e2) {

    // 文件讀取完成時執行的函數

};

reader.readAsDataURL(file)

當選擇文件時，創建了一個 FileReader 對象。
一個 onload 事件監聽器被附加到讀取器上，當文件讀取完成時執行一個函數。
readAsDataURL?方法在讀取器上被調用，將所選文件的內容讀取為數據URL。

Step4：顯示上傳的圖像

javascriptCopy code

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

image.src = e2.target.result;

imageContainer.appendChild(image)

在 onload 函數內部，創建了一個 <img> 元素。
圖像的 src 屬性設置為讀取文件作為數據URL的結果。
圖像元素被追加到HTML文檔中的圖像容器中。

Step5：啟動AI檢測

detect(image)

在顯示上傳的圖像后，使用上傳的圖像作為參數調用 detect 函數。

Step6：使用AI模型進行對象檢測

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

const output = await detector(image.src, {

    threshold: 0.1,

    percentage: true

})

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

Step7：渲染檢測到的框

output.forEach(renderBox)

對輸出中檢測到的每個對象，調用?renderBox?函數以渲染邊界框。

Step8：渲染邊界框

function renderBox({ box, label }) {

    // 渲染邊界框的函數

}

renderBox 函數接受一個具有 box（邊界框的坐標）和 label（檢測到的對象的標簽）的對象。
在函數內部，創建一個 <div> 元素來表示邊界框。
應用 CSS 樣式來根據檢測到的對象的坐標來定位和樣式化邊界框。
創建一個 <span> 元素來在邊界框內顯示檢測到的對象的標簽。

完整代碼

<!--

    * @func 文件上傳和對象檢測功能

    * @desc 實現了圖片上傳功能，并利用Transformer模型進行對象檢測，并在圖片上標記檢測到的對象

    * @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之圖片識別，兩種語言</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>

  <!-- 頁面主體內容 -->

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

    // 導入transformers nlp任務的pipeline和env對象

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



    // 監聽文件上傳事件

    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)

    })



    // 獲取狀態信息元素

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



    // 檢測圖片的AI任務

    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)

    }



    // 渲染檢測框函數

    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>