Add transformers.js example code (#6)

- Add transformers.js example code (bbba93430bde5319fdfcfee8079796f9c44603dd)


Co-authored-by: Joshua <Xenova@users.noreply.huggingface.co>

README.md

@@ -2,10 +2,11 @@
 library_name: transformers
 license: apache-2.0
 language:
-  - en
+- en
 tags:
-  - reranker
-  - cross-encoder
+- reranker
+- cross-encoder
+- transformers.js
 ---
 
 <br><br>
@@ -126,6 +127,66 @@ sentence_pairs = [[query, doc] for doc in documents]
 scores = model.compute_score(sentence_pairs)
 ```
 
+4. You can also use the `transformers.js` library to run the model directly in JavaScript (in-browser, Node.js, Deno, etc.)!
+
+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
+```
+
+Then, you can use the following code to interact with the model:
+```js
+import { AutoTokenizer, AutoModelForSequenceClassification } from '@xenova/transformers';
+
+const model_id = 'jinaai/jina-reranker-v1-tiny-en';
+const model = await AutoModelForSequenceClassification.from_pretrained(model_id, { quantized: false });
+const tokenizer = await AutoTokenizer.from_pretrained(model_id);
+
+/**
+ * Performs ranking with the CrossEncoder on the given query and documents. Returns a sorted list with the document indices and scores.
+ * @param {string} query A single query
+ * @param {string[]} documents A list of documents
+ * @param {Object} options Options for ranking
+ * @param {number} [options.top_k=undefined] Return the top-k documents. If undefined, all documents are returned.
+ * @param {number} [options.return_documents=false] If true, also returns the documents. If false, only returns the indices and scores.
+ */
+async function rank(query, documents, {
+    top_k = undefined,
+    return_documents = false,
+} = {}) {
+    const inputs = tokenizer(
+        new Array(documents.length).fill(query),
+        { text_pair: documents, padding: true, truncation: true }
+    )
+    const { logits } = await model(inputs);
+    return logits.sigmoid().tolist()
+        .map(([score], i) => ({
+            corpus_id: i,
+            score,
+            ...(return_documents ? { text: documents[i] } : {})
+        })).sort((a, b) => b.score - a.score).slice(0, top_k);
+}
+
+// Example usage:
+const query = "Organic skincare products for sensitive skin"
+const documents = [
+    "Eco-friendly kitchenware for modern homes",
+    "Biodegradable cleaning supplies for eco-conscious consumers",
+    "Organic cotton baby clothes for sensitive skin",
+    "Natural organic skincare range for sensitive skin",
+    "Tech gadgets for smart homes: 2024 edition",
+    "Sustainable gardening tools and compost solutions",
+    "Sensitive skin-friendly facial cleansers and toners",
+    "Organic food wraps and storage solutions",
+    "All-natural pet food for dogs with allergies",
+    "Yoga mats made from recycled materials",
+]
+
+const results = await rank(query, documents, { return_documents: true, top_k: 3 });
+console.log(results);
+```
+
+
 That's it! You can now use the `jina-reranker-v1-tiny-en` model in your projects.
 
 # Evaluation
@@ -152,4 +213,4 @@ For more details, please refer to our [benchmarking sheets](https://docs.google.
 
 # Contact
 
-Join our [Discord community](https://discord.jina.ai/) and chat with other community members about ideas.
+Join our [Discord community](https://discord.jina.ai/) and chat with other community members about ideas.