Update README.md

README.md

@@ -5,4 +5,55 @@ pipeline_tag: zero-shot-object-detection
 
 https://huggingface.co/google/owlvit-base-patch32 with ONNX weights to be compatible with Transformers.js.
 
+
+## Usage (Transformers.js)
+
+If you haven't already, you can install the [Transformers.js](https://huggingface.co/docs/transformers.js) JavaScript library from [NPM](https://www.npmjs.com/package/@xenova/transformers) using:
+```bash
+npm i @xenova/transformers
+```
+
+**Example:** Zero-shot object detection w/ `Xenova/owlvit-base-patch32`.
+```js
+import { pipeline } from '@xenova/transformers';
+
+const detector = await pipeline('zero-shot-object-detection', 'Xenova/owlvit-base-patch32');
+
+const url = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/astronaut.png';
+const candidate_labels = ['human face', 'rocket', 'helmet', 'american flag'];
+const output = await detector (url, candidate_labels);
+// [
+//   { score: 0.24392342567443848, label: 'human face', box: { xmin: 180, ymin: 67, xmax: 274, ymax: 175 } },
+//   { score: 0.15129457414150238, label: 'american flag', box: { xmin: 0, ymin: 4, xmax: 106, ymax: 513 } },
+//   { score: 0.13649864494800568, label: 'helmet', box: { xmin: 277, ymin: 337, xmax: 511, ymax: 511 } },
+//   { score: 0.10262022167444229, label: 'rocket', box: { xmin: 352, ymin: -1, xmax: 463, ymax: 287 } }
+// ]
+```
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c/rNLU-bl1_H0HrPgkPMhso.png)
+
+
+**Example:** Zero-shot object detection w/ `Xenova/owlvit-base-patch32` (additional parameters).
+```js
+import { pipeline } from '@xenova/transformers';
+
+const detector = await pipeline('zero-shot-object-detection', 'Xenova/owlvit-base-patch32');
+
+const url = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/beach.png';
+const candidate_labels = ['hat', 'book', 'sunglasses', 'camera'];
+const output = await detector(url, candidate_labels, { topk: 4, threshold: 0.05 });
+// [
+//   { score: 0.1606510728597641, label: 'sunglasses', box: { xmin: 347, ymin: 229, xmax: 429, ymax: 264 } },
+//   { score: 0.08935828506946564, label: 'hat', box: { xmin: 38, ymin: 174, xmax: 258, ymax: 364 } },
+//   { score: 0.08530698716640472, label: 'camera', box: { xmin: 187, ymin: 350, xmax: 260, ymax: 411 } },
+//   { score: 0.08349756896495819, label: 'book', box: { xmin: 261, ymin: 280, xmax: 494, ymax: 425 } }
+// ]
+```
+
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c/OKHu5M0RcAlwPkydxBZyB.png)
+
+---
+
+
 Note: Having a separate repo for ONNX weights is intended to be a temporary solution until WebML gains more traction. If you would like to make your models web-ready, we recommend converting to ONNX using [🤗 Optimum](https://huggingface.co/docs/optimum/index) and structuring your repo like this one (with ONNX weights located in a subfolder named `onnx`).