integrations/tfjs/ #13963

2024-06-25T09:07:53Z

giscus[bot]
bot Jun 25, 2024

integrations/tfjs/

Convert your Ultralytics YOLOv8 models to TensorFlow.js for high-speed, local object detection. Learn how to optimize ML models for browser and Node.js apps.

https://docs.ultralytics.com/integrations/tfjs/

teengineer · 2024-06-25T09:07:54Z

teengineer
Jun 25, 2024 — with giscus

Hello, i tried to use exported model with tfjs but it threw an error.
This is my code

# Load the exported TF.js model
tfjs_model = YOLO("/content/drive/MyDrive/YOLO/Roof-Detection/best_web_model")

# Run inference
results = tfjs_model("/content/drive/MyDrive/YOLO/Image-Examples/det_3.png")

This is error message:

Unable to automatically guess model task, assuming 'task=detect'. Explicitly define task for your model, i.e. 'task=detect', 'segment', 'classify','pose' or 'obb'.

---------------------------------------------------------------------------

NotImplementedError                       Traceback (most recent call last)

<ipython-input-12-2764378200ad> in <cell line: 5>()
      3 
      4 # Run inference
----> 5 results = tfjs_model("/content/drive/MyDrive/YOLO/Image-Examples/det_3.png")

4 frames

/usr/local/lib/python3.10/dist-packages/ultralytics/nn/autobackend.py in __init__(self, weights, device, dnn, data, fp16, batch, fuse, verbose)
    352         # TF.js
    353         elif tfjs:
--> 354             raise NotImplementedError("YOLOv8 TF.js inference is not currently supported.")
    355 
    356         # PaddlePaddle

NotImplementedError: YOLOv8 TF.js inference is not currently supported.

Can you help me?

3 replies

glenn-jocher Jun 25, 2024
Maintainer

Hello,

Thank you for reaching out! It looks like you're encountering an issue with running inference using a YOLOv8 model exported to TensorFlow.js. Currently, YOLOv8 does not support direct inference with TF.js models within the Ultralytics Python environment, which is why you're seeing the NotImplementedError.

To proceed, you can use the exported TF.js model directly in a web or Node.js environment. Here’s a brief guide on how to do that:

Export the Model to TF.js Format:

from ultralytics import YOLO

# Load the YOLOv8 model
model = YOLO("yolov8n.pt")

# Export the model to TF.js format
model.export(format="tfjs")  # creates '/yolov8n_web_model'

Deploy the Model in a Web Environment:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>YOLOv8 TF.js Inference</title>
    <script src="https://cdn.jsdelivr.net/npm/ @teengineer/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
</head>
<body>
    <script>
        async function runInference() {
            // Load the model
            const model = await tf.loadGraphModel('/path/to/yolov8n_web_model/model.json');

            // Load and preprocess the image
            const img = document.getElementById('input-image');
            const tensor = tf.browser.fromPixels(img).expandDims(0).toFloat().div(tf.scalar(255));

            // Run inference
            const predictions = await model.executeAsync(tensor);

            // Handle predictions
            console.log(predictions);
        }

        window.onload = runInference;
    </script>
    <img id="input-image" src="path/to/image.jpg" alt="Input Image">
</body>
</html>

Deploy the Model in a Node.js Environment:

Node.js Script:

const tf = require('@tensorflow/tfjs-node');
const tfjsConverter = require('@tensorflow/tfjs-converter');

async function runInference() {
    // Load the model
    const model = await tfjsConverter.loadGraphModel('file://path/to/yolov8n_web_model/model.json');

    // Load and preprocess the image
    const image = tf.node.decodeImage(require('fs').readFileSync('path/to/image.jpg'));
    const tensor = image.expandDims(0).toFloat().div(tf.scalar(255));

    // Run inference
    const predictions = await model.executeAsync(tensor);

    // Handle predictions
    console.log(predictions);
}

runInference();

For more detailed instructions on deploying TF.js models, you can refer to the TensorFlow.js documentation. If you encounter any further issues, please ensure you are using the latest versions of the packages and provide a minimum reproducible example as outlined here.

I hope this helps! If you have any more questions, feel free to ask. 😊

salim4n Jul 2, 2024 — with giscus

I reply, that executeAsync(tensor) doesn't give me a prediction of model but tensor datatype like this :
{"kept":false,"isDisposedInternal":false,"shape":[1,84,8400],"dtype":"float32","size":705600,"strides":[705600,8400],"dataId":{"id":9791},"id":8149,"rankType":"3","scopeId":17428}

glenn-jocher Jul 2, 2024
Maintainer

@salim4n hello,

Thank you for your detailed feedback. It appears that the executeAsync(tensor) method is returning a tensor object rather than the expected predictions. This is a common scenario when working with TensorFlow.js models, as the raw output often needs further processing to extract meaningful predictions.

Here's a step-by-step guide to help you process the tensor output and obtain the predictions:

Load the Model and Image:
Ensure you have loaded the model and image correctly.

const model = await tf.loadGraphModel('/path/to/yolov8n_web_model/model.json');
const img = document.getElementById('input-image');
const tensor = tf.browser.fromPixels(img).expandDims(0).toFloat().div(tf.scalar(255));

Run Inference:
Execute the model to get the raw predictions.
```
const predictions = await model.executeAsync(tensor);
```
Process the Output:
The output tensor needs to be processed to extract the bounding boxes, class scores, and other relevant information. Typically, YOLO models output multiple tensors, including bounding box coordinates, class scores, etc.
```
const [boxes, scores, classes] = predictions;
const boxesData = boxes.dataSync();
const scoresData = scores.dataSync();
const classesData = classes.dataSync();
```

Filter Predictions:
Apply a confidence threshold to filter out low-confidence predictions.

const confidenceThreshold = 0.5;
const validDetections = [];
for (let i = 0; i < scoresData.length; i++) {
    if (scoresData[i] > confidenceThreshold) {
        validDetections.push({
            box: boxesData.slice(i * 4, (i + 1) * 4),
            score: scoresData[i],
            class: classesData[i]
        });
    }
}

Display Results:
Use the valid detections to draw bounding boxes and labels on the image.

validDetections.forEach(detection => {
    const [x, y, width, height] = detection.box;
    const score = detection.score;
    const className = detection.class;

    // Draw bounding box and label on the image
    // (Implement your drawing logic here)
});

Here's a complete example in JavaScript:

async function runInference() {
    // Load the model
    const model = await tf.loadGraphModel('/path/to/yolov8n_web_model/model.json');

    // Load and preprocess the image
    const img = document.getElementById('input-image');
    const tensor = tf.browser.fromPixels(img).expandDims(0).toFloat().div(tf.scalar(255));

    // Run inference
    const predictions = await model.executeAsync(tensor);

    // Process the output tensors
    const [boxes, scores, classes] = predictions;
    const boxesData = boxes.dataSync();
    const scoresData = scores.dataSync();
    const classesData = classes.dataSync();

    // Filter predictions by confidence threshold
    const confidenceThreshold = 0.5;
    const validDetections = [];
    for (let i = 0; i < scoresData.length; i++) {
        if (scoresData[i] > confidenceThreshold) {
            validDetections.push({
                box: boxesData.slice(i * 4, (i + 1) * 4),
                score: scoresData[i],
                class: classesData[i]
            });
        }
    }

    // Display results
    validDetections.forEach(detection => {
        const [x, y, width, height] = detection.box;
        const score = detection.score;
        const className = detection.class;

        // Draw bounding box and label on the image
        // (Implement your drawing logic here)
    });
}

window.onload = runInference;

For more detailed information on deploying TensorFlow.js models, you can refer to the TensorFlow.js documentation. If you encounter any further issues, please ensure you are using the latest versions of the packages and provide a minimum reproducible example as outlined here.

I hope this helps! If you have any more questions, feel free to ask. 😊

teengineer · 2024-06-26T06:26:30Z

teengineer
Jun 26, 2024

@glenn-jocher thank you for your time.
This example is on your web site https://docs.ultralytics.com/integrations/tfjs/#usage

10 replies

glenn-jocher Jul 4, 2024
Maintainer

Hi @salim4n,

Thank you for your feedback and for sharing your experience. I understand that integrating TensorFlow.js (TF.js) models directly into a Chrome extension can be challenging, especially when dealing with custom models.

To address your concerns:

NPM Package: Currently, there is no ultralytics package available on NPM. The recommended approach is to use the Python package to export your model to the TF.js format and then integrate the exported model into your JavaScript project.
Loading Custom Models in TF.js: Loading custom models in TF.js can indeed be complex. Here’s a simplified approach to help you get started:
- Export the Model: Use the Ultralytics Python package to export your YOLOv8 model to the TF.js format.
- Integrate with TF.js: Use the exported model in your JavaScript code.

Example Code for Integration

Here’s a basic example to load and use the exported TF.js model in a Chrome extension:

Export the Model (Python)

from ultralytics import YOLO

# Load the YOLOv8 model
model = YOLO("yolov8n.pt")

# Export the model to TF.js format
model.export(format="tfjs")  # creates '/yolov8n_web_model'

Load and Use the Model (JavaScript)

import * as tf from '@tensorflow/tfjs';

async function loadModel() {
  const model = await tf.loadGraphModel('/path/to/yolov8n_web_model/model.json');
  return model;
}

async function runInference(imageElement) {
  const model = await loadModel();
  const tensor = tf.browser.fromPixels(imageElement).expandDims(0);
  const predictions = await model.executeAsync(tensor);
  console.log(predictions);
}

// Example usage
const imageElement = document.getElementById('input-image');
runInference(imageElement);

Additional Resources

For more detailed instructions on deploying TF.js models, you can refer to:

If you encounter any issues, please ensure you are using the latest version of the Ultralytics package and provide a minimum reproducible example if possible. This helps us diagnose and resolve any problems more effectively. You can find more information on creating a reproducible example here.

Feel free to reach out if you have any further questions or need additional assistance. Happy coding! 😊

wuhonglei Jul 11, 2024 — with giscus

i have the same problem about how to get the boxes, scores and classes from the predictions variable, predictions is an object ,not an array, there is no property named boxes, scores and classes, does anyone know how to solve this, very appreciate 😄

my html code is below:

<!DOCTYPE html>
<html>
  <head>
    <title>YOLOv8 Model Inference</title>
  </head>
  <body>
    <!-- 用于显示输入图片和绘制推理结果 -->
    <canvas id="input-image" width="640" height="640"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script>
      async function runModel() {
        const model = await tf.loadGraphModel("./best_web_model/model.json");

        // 1. 准备图片数据（这里使用示例图片）
        const imgElement = document.getElementById("input-image");
        const tensor = tf.browser
          .fromPixels(imgElement)
          .expandDims(0)
          .toFloat()
          .div(tf.scalar(255));

        // 2. 进行推理
        const predictions = await model.executeAsync([tensor]);
      }
    </script>
    <script>
      // 获取 canvas 元素
      const canvas = document.getElementById("input-image");
      const ctx = canvas.getContext("2d");

      // 创建新的图片对象
      const img = new Image();

      // 图片加载完成后绘制到 canvas 上
      img.onload = function () {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        runModel();
      };

      // 设置图片的来源
      img.src = "./imgs/20217191442296037.jpg"; // 替换为您的图片路径
    </script>
  </body>
</html>

the output of predictions is below:

{
    "kept": false,
    "isDisposedInternal": false,
    "shape": [
        1,
        5,
        8400
    ],
    "dtype": "float32",
    "size": 42000,
    "strides": [
        42000,
        8400
    ],
    "dataId": {
        "id": 1212
    },
    "id": 701,
    "rankType": "3",
    "scopeId": 879
}

glenn-jocher Jul 11, 2024
Maintainer

Hi @wuhonglei,

Thank you for your detailed question and for sharing your code! 😊

To extract the boxes, scores, and classes from the predictions object in TensorFlow.js, you need to process the tensor outputs correctly. The predictions object you have is a tensor, and you can use TensorFlow.js methods to extract the necessary information.

Here’s how you can modify your code to get the boxes, scores, and classes:

Updated JavaScript Code

import * as tf from '@tensorflow/tfjs';

async function runModel() {
  const model = await tf.loadGraphModel('./best_web_model/model.json');

  // Prepare image data
  const imgElement = document.getElementById('input-image');
  const tensor = tf.browser.fromPixels(imgElement).expandDims(0).toFloat().div(tf.scalar(255));

  // Run inference
  const predictions = await model.executeAsync(tensor);

  // Extract boxes, scores, and classes
  const [boxes, scores, classes] = await Promise.all([
    predictions[0].array(),
    predictions[1].array(),
    predictions[2].array()
  ]);

  console.log('Boxes:', boxes);
  console.log('Scores:', scores);
  console.log('Classes:', classes);

  // Optionally, draw boxes on the canvas
  drawBoxes(imgElement, boxes, scores, classes);
}

function drawBoxes(imgElement, boxes, scores, classes) {
  const canvas = document.getElementById('input-image');
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imgElement, 0, 0, canvas.width, canvas.height);

  boxes.forEach((box, i) => {
    const [y, x, height, width] = box;
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.strokeRect(x, y, width, height);
    ctx.fillStyle = 'red';
    ctx.fillText(`Class: ${classes[i]}, Score: ${scores[i].toFixed(2)}`, x, y > 10 ? y - 5 : 10);
  });
}

// Load image and run model
const img = new Image();
img.onload = function () {
  const canvas = document.getElementById('input-image');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  runModel();
};
img.src = './imgs/20217191442296037.jpg'; // Replace with your image path

Explanation

Model Loading: Load the model using tf.loadGraphModel.
Image Preparation: Convert the image to a tensor and normalize it.
Run Inference: Execute the model and get the predictions.
Extract Data: Use array() to convert tensors to JavaScript arrays.
Draw Boxes: Optionally, draw the bounding boxes on the canvas.

This should help you extract and visualize the boxes, scores, and classes from your predictions. If you encounter any issues, please ensure you are using the latest version of TensorFlow.js and the Ultralytics package.

For more detailed information, you can refer to our TF.js integration guide.

Feel free to reach out if you have any further questions or need additional assistance. Happy coding! 😊

wuhonglei Jul 11, 2024 — with giscus

thanks very much for your detailed response, In order to better assist future developers, I will paste the code that I have successfully run in the end。
My business background: i use the yolov8 to detect the penguin in the image(object detection ).
my final html code:

<!DOCTYPE html>
<html>
  <head>
    <title>YOLOv8 Object Detection with TensorFlow.js</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  </head>
  <body>
    <input type="file" id="upload" accept="image/*" />
    <canvas id="canvas"></canvas>
    <script>
      async function loadModel() {
        // 加载模型
        const model = await tf.loadGraphModel("./best_web_model/model.json");
        return model;
      }

      async function predict(model, imageElement) {
        // 将图像转换为张量
        const tensor = tf.browser
          .fromPixels(imageElement)
          .resizeNearestNeighbor([640, 640]) // 调整大小到模型输入大小
          .toFloat()
          .expandDims(0)
          .div(tf.scalar(255.0));

        // inference
        const predictions = await model.executeAsync(tensor);

        //  predictions shape is [1, 5, 8400]
        const reshapedPredictions = predictions.reshape([5, 8400]);
        const boxesTensor = reshapedPredictions.slice([0, 0], [4, 8400]);
        const scoresTensor = reshapedPredictions
          .slice([4, 0], [1, 8400])
          .squeeze();

        // Assuming that the category label of each box is fixed (you can adjust it as needed)
        const classesTensor = tf.fill([8400], 0);

        return {
          boxes: boxesTensor,
          scores: scoresTensor,
          classes: classesTensor,
        };
      }

      function drawBoxes(imageElement, canvas, boxes, scores, classes) {
        const ctx = canvas.getContext("2d");
        canvas.width = imageElement.width;
        canvas.height = imageElement.height;
        ctx.drawImage(imageElement, 0, 0, canvas.width, canvas.height);

        const labels = ["企鹅"]; // Replace with actual label
        const validBoxes = [];

        for (let i = 0; i < scores.length; i++) {
          if (scores[i] > 0.5) {
            const x_c = boxes[0][i] / 640;
            const y_c = boxes[1][i] / 640;
            const w = boxes[2][i] / 640;
            const h = boxes[3][i] / 640;

            const x = x_c - w / 2;
            const y = y_c - h / 2;

            validBoxes.push([x, y, w, h, scores[i], classes[i]]);
          }
        }

        validBoxes.forEach((box) => {
          const [x, y, w, h, score, className] = box;
          ctx.strokeStyle = "red";
          ctx.lineWidth = 2;
          ctx.strokeRect(
            x * canvas.width,
            y * canvas.height,
            w * canvas.width,
            h * canvas.height
          );
          const text = `${className}: ${(score * 100).toFixed(2)}%`;
          ctx.fillText(text, x * canvas.width, y * canvas.height - 10);
        });
      }

      document
        .getElementById("upload")
        .addEventListener("change", async (event) => {
          const file = event.target.files[0];
          const imageElement = new Image();
          const reader = new FileReader();

          reader.onload = () => {
            imageElement.src = reader.result;
            imageElement.onload = async () => {
              const canvas = document.getElementById("canvas");
              const model = await loadModel();
              const { boxes, scores, classes } = await predict(
                model,
                imageElement
              );
              drawBoxes(
                imageElement,
                canvas,
                boxes.arraySync(),
                scores.arraySync(),
                classes.arraySync()
              );
            };
          };

          reader.readAsDataURL(file);
        });
    </script>
  </body>
</html>

the predictions variable is a tensor, the format is as below:

the chrome html running result is below:

glenn-jocher Jul 11, 2024
Maintainer

Hi @wuhonglei,

Thank you for sharing your detailed implementation and the final working code! It's fantastic to see how you've successfully integrated YOLOv8 with TensorFlow.js for penguin detection in your web application. 🐧

For those looking to extract boxes, scores, and classes from the predictions tensor, your approach is spot on. Here's a concise summary and a few additional tips for clarity:

Key Steps:

Load the Model:

const model = await tf.loadGraphModel("./best_web_model/model.json");

Prepare the Image:

const tensor = tf.browser.fromPixels(imageElement)
  .resizeNearestNeighbor([640, 640])
  .toFloat()
  .expandDims(0)
  .div(tf.scalar(255.0));

Run Inference:

const predictions = await model.executeAsync(tensor);

Extract Predictions:

const reshapedPredictions = predictions.reshape([5, 8400]);
const boxesTensor = reshapedPredictions.slice([0, 0], [4, 8400]);
const scoresTensor = reshapedPredictions.slice([4, 0], [1, 8400]).squeeze();
const classesTensor = tf.fill([8400], 0); // Adjust as needed

Draw Boxes:

function drawBoxes(imageElement, canvas, boxes, scores, classes) {
  const ctx = canvas.getContext("2d");
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;
  ctx.drawImage(imageElement, 0, 0, canvas.width, canvas.height);

  const labels = ["企鹅"]; // Replace with actual label
  const validBoxes = [];

  for (let i = 0; i < scores.length; i++) {
    if (scores[i] > 0.5) {
      const x_c = boxes[0][i] / 640;
      const y_c = boxes[1][i] / 640;
      const w = boxes[2][i] / 640;
      const h = boxes[3][i] / 640;

      const x = x_c - w / 2;
      const y = y_c - h / 2;

      validBoxes.push([x, y, w, h, scores[i], classes[i]]);
    }
  }

  validBoxes.forEach((box) => {
    const [x, y, w, h, score, className] = box;
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.strokeRect(
      x * canvas.width,
      y * canvas.height,
      w * canvas.width,
      h * canvas.height
    );
    const text = `${className}: ${(score * 100).toFixed(2)}%`;
    ctx.fillText(text, x * canvas.width, y * canvas.height - 10);
  });
}

Additional Tips:

Model Optimization: Ensure your model is optimized for TF.js to improve performance.
Threshold Adjustment: Adjust the score threshold (0.5 in this case) based on your application's requirements.
Class Labels: Replace the placeholder labels with actual class names if you have multiple classes.

For more detailed information on deploying YOLOv8 models with TensorFlow.js, you can refer to our TF.js integration guide.

If you encounter any issues or have further questions, feel free to reach out. We're here to help! 😊

Fernand0GC · 2024-09-11T16:10:09Z

Fernand0GC
Sep 11, 2024 — with giscus

buenas, alguien podria ayudarme a interpretar mi output?
el modelo es de deteccion de objetos y esta entrenado para reconocer 5 clases
names:
0: black-shape
1: diana
2: targets-holes
3: targets-holes-2
4: targets-holes-black
en la consola recibo el siguiente objeto:
{
"kept": false,
"isDisposedInternal": false,
"shape": [
1,
9,
8400
],
"dtype": "float32",
"size": 75600,
"strides": [
75600,
8400
],
"dataId": {
"id": 801
},
"id": 492,
"rankType": "3",
"scopeId": 578
}

pude acceder al tensor mediante predictions.array()
lo cual me da un output de un arreglo de 9 arreglos. este arreglo contiene valores numericos que aun no logro decifrar.
0 : (8400) [2.8815157413482666, 16.799739837646484, 35.85880661010742 ...]
1 : (8400) [4.487062931060791, 6.242208003997803, 7.13232421875 ...]
2 : (8400) [6.577016353607178, 32.058311462402344, 74.6260757446289 ...]
3 : (8400) [8.778525352478027, 12.535199165344238, 13.99738883972168 ...]
4 : (8400) [0.000003607327244026237, 0.000010992955139954574, 0.000006420665613404708 ...]
5 : (8400) [0.0000034999770832655486, 0.000010910729542956688, 0.000004991020887246123 ...]
6 : (8400) [0.000057105469750240445, 0.000025020823159138672, 0.000024430628400295973 ...]
7 : (8400) [0.000027735275580198504, 0.000019603612599894404, 0.000015360352335846983 ...]
8 : (8400) [0.00006247103010537103, 0.000020798512196051888, 0.000007502545486204326 ...]

me podrian ayudar a interpretar este output porfabor

1 reply

glenn-jocher Sep 13, 2024
Maintainer

@Fernand0GC hola, para interpretar tu output, los valores numéricos en los arreglos representan las predicciones del modelo. Cada arreglo de 8400 valores corresponde a diferentes aspectos de la detección, como coordenadas de cajas delimitadoras y puntuaciones de confianza para cada clase. Te recomiendo revisar cómo se estructuran las salidas de tu modelo en la documentación de TensorFlow.js para entender mejor cada componente. Si necesitas más detalles sobre el formato TF.js, puedes visitar aquí.

venkatshan707 · 2024-10-15T14:15:27Z

venkatshan707
Oct 15, 2024 — with giscus

Hi All,
I have tried trained converting custom trained yolov8m-obb.pt model as tfjs. I am getting 26 Shard .bin files as output with size of around 100 MB. I can't use them on Front end or in Edge device. What is the issue I am doing here and how can I avoid this issue ?

I have tried converting yolov8n.pt which is purely pre-trained only (without any customization), that also giving 26 .bin files. Please some one help me here. Thanks in advance !!

3 replies

glenn-jocher Oct 16, 2024
Maintainer

@venkatshan707 it seems you're encountering large file sizes when converting models to TensorFlow.js. This is typical due to the model's complexity and size. Consider using model quantization or pruning to reduce the size. For more detailed guidance, please visit our TensorFlow.js integration page.

venkatshan707 Oct 16, 2024 — with giscus

When I tried converting original model downloaded from ultralytics (yolov8n.pt- On which I didn't any customization), that also giving 26 bin files. It contains default model graph right?. I have not increased complexity on that.

Would you share the documentation link which explains .pt model quantization or pruning to reduce the size? is there any version mismatch between ultralytics and tensorflow libraires which is causing this issue ?

glenn-jocher Oct 16, 2024
Maintainer

To reduce the size of your TensorFlow.js model, consider using quantization techniques. This can significantly decrease the model size and improve performance on edge devices. For detailed guidance, please refer to the TensorFlow.js integration documentation.

venkatshan707 · 2024-10-16T04:11:50Z

venkatshan707
Oct 16, 2024

@glenn-jocher
sorry for correcting. When I convert yolov8n.pt I am getting 4 bin files. when I convert yolov8m.pt and yolov8m-obb.pt I am getting 26 bin files.
I could understand your point explains model complexity of yolov8m.pt and yolov8m-obb.pt are higher than yolov8n.pt. I have tried finding code snippet which can help us pruning the model and gives us small number bin files. But I have failed in that.

Would you kindly help me with code example which can fix this issue ?

#This is the code I have used to get web model from official yolov8m-obb.pt

from ultralytics import YOLO

Load the YOLO11 model

model = YOLO("yolov8m-obb.pt")

Export the model to TF.js format

model.export(format="tfjs") # creates '/yolov8m-obb.pt_web_model'

1 reply

glenn-jocher Oct 16, 2024
Maintainer

@venkatshan707 to reduce the number of bin files when exporting to TF.js, consider model pruning or quantization techniques. Unfortunately, we don't provide specific code examples for this, but you can explore TensorFlow.js documentation for optimization strategies. For more guidance, visit Ultralytics TF.js integration.

viniciusmra · 2024-11-25T22:17:41Z

viniciusmra
Nov 25, 2024 — with giscus

I've been trying to export some models that I trained, but I keep getting several errors when trying to run the command. Erros:

requirements: Ultralytics requirements ['sng4onnx>=1.0.1', 'onnx_graphsurgeon>=0.3.26', 'onnxslim>=0.1.31', 'tflite_support', 'onnxruntime'] not found, attempting AutoUpdate...

The message says that the Ultralytics library is missing these dependencies (which is strange because I just installed Ultralytics, so it should be complete). The 'autoupdate' fails, and installing them manually also fails..

1 reply

glenn-jocher Nov 25, 2024
Maintainer

@viniciusmra the error indicates that some dependencies required for exporting are missing. First, try updating all packages by running pip install ultralytics --upgrade to ensure you have the latest version. If manual dependency installation issues persist, verify your Python environment and ensure compatibility with the supported Ultralytics and dependency versions. For further guidance, refer to our Common Issues guide. Let me know if you encounter further issues.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ultralytics

integrations/tfjs/ #13963

{{title}}

Replies: 6 comments 19 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Ultralytics

integrations/tfjs/ #13963

giscus[bot] bot Jun 25, 2024

integrations/tfjs/

Replies: 6 comments · 19 replies

teengineer Jun 25, 2024 — with giscus

glenn-jocher Jun 25, 2024 Maintainer

salim4n Jul 2, 2024 — with giscus

glenn-jocher Jul 2, 2024 Maintainer

teengineer Jun 26, 2024

glenn-jocher Jul 4, 2024 Maintainer

Example Code for Integration

Export the Model (Python)

Load and Use the Model (JavaScript)

Additional Resources

wuhonglei Jul 11, 2024 — with giscus

glenn-jocher Jul 11, 2024 Maintainer

Updated JavaScript Code

Explanation

wuhonglei Jul 11, 2024 — with giscus

glenn-jocher Jul 11, 2024 Maintainer

Key Steps:

Additional Tips:

Fernand0GC Sep 11, 2024 — with giscus

glenn-jocher Sep 13, 2024 Maintainer

venkatshan707 Oct 15, 2024 — with giscus

glenn-jocher Oct 16, 2024 Maintainer

venkatshan707 Oct 16, 2024 — with giscus

glenn-jocher Oct 16, 2024 Maintainer

venkatshan707 Oct 16, 2024

Load the YOLO11 model

Export the model to TF.js format

glenn-jocher Oct 16, 2024 Maintainer

viniciusmra Nov 25, 2024 — with giscus

glenn-jocher Nov 25, 2024 Maintainer

giscus[bot]
bot Jun 25, 2024

Replies: 6 comments 19 replies

teengineer
Jun 25, 2024 — with giscus

glenn-jocher Jun 25, 2024
Maintainer

glenn-jocher Jul 2, 2024
Maintainer

teengineer
Jun 26, 2024

glenn-jocher Jul 4, 2024
Maintainer

glenn-jocher Jul 11, 2024
Maintainer

glenn-jocher Jul 11, 2024
Maintainer

Fernand0GC
Sep 11, 2024 — with giscus

glenn-jocher Sep 13, 2024
Maintainer

venkatshan707
Oct 15, 2024 — with giscus

glenn-jocher Oct 16, 2024
Maintainer

glenn-jocher Oct 16, 2024
Maintainer

venkatshan707
Oct 16, 2024

glenn-jocher Oct 16, 2024
Maintainer

viniciusmra
Nov 25, 2024 — with giscus

glenn-jocher Nov 25, 2024
Maintainer