Sample labeling config for pausing annotators

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+## Description
+
+<!-- A brief description of what this PR accomplishes. Include any screenshots if helpful. -->
+
+## Related Issues
+
+<!-- If this PR fixes an issue, link it here (e.g. Fixes #123). -->
+
+## Checklist
+
+- [ ] I have tested the changes in the Label Studio Labeling Config.
+- [ ] I have added the `script.js` file.
+- [ ] I have added the `view.xml` file.
+- [ ] My code follows the guidelines stated in the README.md.
+
+<!-- Thanks for contributing to Awesome Label Studio Configs! -->

.github/workflows/validate-structure.yml

@@ -0,0 +1,22 @@
+name: Validate Folder Structure
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  check-structure:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Run Folder Structure Check
+        run: node validate-structure.mjs

README.md

@@ -1 +1,73 @@
-# label-studio-custom-scripts
+![Label Studio Custom Scripts](docs/banner.png)
+
+# Label Studio Custom Scripts
+
+Welcome to **Label Studio Custom Scripts**! This repository contains `custom scripts` designed to extend the functionality of [Label Studio](https://labelstud.io), a powerful data labeling tool. These scripts can be used to automate workflows, integrate with external tools, and customize the labeling process according to your needs.
+
+Whether you're building custom data processors, integrations, or UI components, you'll find the necessary resources and examples in this repo to get started.
+
+## Official Documentation
+
+For detailed documentation and guides on how to use and extend Label Studio with custom scripts, visit the official [Label Studio Scripts Documentation](https://docs.humansignal.com/guide/scripts).
+
+## File Structure
+
+This repository follows a clear folder structure to organize the various custom scripts and configuration files:
+
+```bash
+label-studio-custom-scripts/
+├── custom-scripts/
+│   ├── script1/
+│   │   ├── data.{json|mp3|mp4}
+│   │   ├── script.js
+│   │   └── view.xml
+│   ├── script2/
+│   │   ├── data.{json|mp3|mp4}
+│   │   ├── script.js
+│   │   └── view.xml
+│   └── ...
+└── manifest.json
+```
+
+- **`/script1`**: Contains all the files to document a custom script.
+  - Each script has a `script.js` and `view.xml` file that define the logic and UI of the script.
+- **`/script.js`**: Contains the actual custom script `javascript` file that can be embedded in the Label Studio code editor.
+- **`/view.xml`**: Stores an example of a `<View>` that will work along the script.
+- **`/data.{json|mp3|mp4}`**: Stores an example of the data that can be used along with the script.
+- **`manifest.json`**: This file lists the scripts, their metadata (title, description, etc.), and their paths for easy integration with Label Studio.
+
+## Usage
+
+After your script gets merged you will be able to find it in your project's **Labeling Interface**
+
+![Labeling Interface](docs/labeling-interface.png)
+
+## Contributing
+
+We welcome contributions! Whether it's bug fixes or new scripts, feel free to open a pull request. Here's how you can get started:
+
+1. **Create a new branch** for your feature or bugfix.
+2. **Make your changes** and ensure that they adhere to the project's file structure and guidelines. You need to create a folder with the name using underscores (`path`) of your script and add a `view.xml` and a `script.js` file minimum.
+3. **Register the script** in the `manifest.json` adding the following information:
+   ```json
+   [
+      {
+        "title": "Your script title",
+        "description": "Your script description",
+        "path": "exact_name_of_the_script_folder", // `script1` as per the File Structure example
+        "private": false // whether you want to hide it in the "Insert Script" dropdown in the Configurator code tab
+      }
+   ]
+   ```
+4. **Test your changes** to ensure everything works as expected.
+5. **Submit a pull request** explaining the changes you made.
+
+Please make sure that your contributions follow the existing code style and structure.
+
+## License
+
+This software is licensed under the [Apache 2.0 LICENSE](/LICENSE) © [Heartex](https://www.heartex.com/). 2020-2025
+
+---
+
+If you have any questions or need assistance, feel free to reach out through issues or discussions. We look forward to your contributions!

bulk_labeling/js.txt → custom-scripts/bulk-labeling/script.js

@@ -1,11 +1,20 @@
+/**
+ * Automatically creates all the text regions containing all instances of the selected text.
+ */
+
+// It will be triggered when a text selection happens
 LSI.on('entityCreate', region => {
   if (window.BULK_REGIONS) return;
+
   window.BULK_REGIONS = true;
   setTimeout(() => window.BULK_REGIONS = false, 1000);
-  console.log('matches', region.object._value.matchAll(region.text));
+
   setTimeout(() => {
+    // Find all the text regions matching the selection
     region.object._value.matchAll(new RegExp(region.text, "gi")).forEach(m => {
       if (m.index === region.startOffset) return;
+
+      // Include them in the results as new selections
       Htx.annotationStore.selected.createResult(
         { text: region.text, start: "/span[1]/text()[1]", startOffset: m.index, end: "/span[1]/text()[1]", endOffset: m.index + region.text.length },
         { labels: [...region.labeling.value.labels] },

custom-scripts/bulk-labeling/view.xml

@@ -0,0 +1,23 @@
+<View>
+  <Labels name="label" toName="text">
+    <Label value="PER" background="red"/>
+    <Label value="ORG" background="darkorange"/>
+    <Label value="LOC" background="orange"/>
+    <Label value="MISC" background="green"/>
+  </Labels>
+
+  <Text name="text" value="$text"/>
+</View>
+
+<!--
+{
+  "data": {
+    "text": [
+      "Opossums, commonly known as possums in North America, are marsupials found primarily in the Americas. The most well-known species is the Virginia opossum (Didelphis virginiana), which ranges from Central America and the eastern United States to southern Canada. These adaptable creatures are known for their ability to thrive in a variety of environments, including both rural and urban areas. Opossums are also found in South America, where different species inhabit a range of ecosystems, from tropical rainforests to temperate forests.",
+      "Opossums are highly adaptable in terms of habitat, often residing in woodlands, farmland, and even suburban backyards. They typically seek shelter in hollow trees, abandoned burrows, or any dark, enclosed space they can find. Opossums are nocturnal and omnivorous, with a diet that includes fruits, insects, small animals, and even carrion. Their opportunistic feeding habits contribute to their resilience and ability to live in close proximity to human settlements.",
+      "In terms of behavior, opossums are solitary and nomadic, often moving to different locations in search of food. They are known for their unique defense mechanism of 'playing dead' or 'playing possum' when threatened, which involves mimicking the appearance and smell of a sick or dead animal to deter predators. Opossums have relatively short lifespans, typically living only 2 to 4 years in the wild. Despite their short lives, they reproduce quickly, with females giving birth to large litters of up to 20 young, although not all offspring typically survive to maturity.",
+      "In popular culture, opossums often appear as symbols of resilience and survival due to their hardy nature and ability to adapt to various environments. They are sometimes depicted in a comical or misunderstood light, given their nocturnal habits and somewhat disheveled appearance. Despite this, they play a crucial role in the ecosystem by controlling insect and rodent populations and cleaning up carrion. Opossums have been featured in various forms of media, from cartoons and children's books to movies, often emphasizing their unique behaviors and survival strategies."
+    ]
+  }
+}
+-->

custom-scripts/count-words-in-textarea/data.json

@@ -0,0 +1,5 @@
+{
+  "data": {
+	  "text": "The quick brown fox jumps over the lazy dog."
+  }
+}

count_words_in_textarea/js.txt → custom-scripts/count-words-in-textarea/script.js

@@ -1,15 +1,22 @@
+/**
+ * Validates the word count of the entered text to prevent submission if it exceeds a specified threshold
+ */
+
 let dismissed = false;
 
 LSI.on("beforeSaveAnnotation", (store, annotation) => {
   const textAreaResult = annotation.results.find(r => r.type === 'textarea' && r.from_name.name === 'textarea');
+
   if (textAreaResult) {
     words = textAreaResult.value.text[0]
     word_count = words.split(" ").length;
+
     if (word_count > 10) {
       Htx.showModal("Word count is " + word_count + ". Please reduce to 10 or less.");
       dismissed = true;
-      return false;
+      return false; // Block submission
     }
   }
-  return true;
-});
+
+  return true; // Allow submission
+});

custom-scripts/count-words-in-textarea/view.xml

@@ -0,0 +1,13 @@
+<View>
+  <Header value="Classify the text in less than 10 words"/>
+  <Text name="text" value="$text"/>
+  <TextArea name="textarea" toName="text" />
+</View>
+
+<!--
+{
+  "data": {
+	  "text": "The quick brown fox jumps over the lazy dog.",
+  }
+}
+-->

custom-scripts/different-images-per-label/data.json

@@ -0,0 +1,5 @@
+{
+  "data": {
+    "image": "/static/custom-scripts/custom-scripts/show_different_images_based_on_label_selected/img/demo-sample.png"
+  }
+}

show_different_images_based_on_label_selected/js.txt → custom-scripts/different-images-per-label/script.js

@@ -1,23 +1,22 @@
-/*
-Objective:
-Display different example check images at the bottom of the layout 
-depending on the class label selected
-*/
+/**
+ * Display different example check images at the bottom of the layout
+ * depending on the class label selected
+ */
 
 const IMG_ID = 'img_uniq'
 // TODO: use your own keys and values here for label lookup and data objects to display
+const imagesRoot = '/static/custom-scripts/custom-scripts/show_different_images_based_on_label_selected/img'
 const images = {
-  'Addressee': '/storage-data/uploaded/?filepath=upload/86849/f7bce1e6-addressee.jpg',
-  'Account number': '/storage-data/uploaded/?filepath=upload/86849/f3fe2182-account-routing-number.png',
-  'Routing number': '/storage-data/uploaded/?filepath=upload/86849/f3fe2182-account-routing-number.png',
-  'Signature': '/storage-data/uploaded/?filepath=upload/86849/6926d68d-sign.jpg',
-  'Amount': '/storage-data/uploaded/?filepath=upload/86849/d8bf4fac-amount.jpg',
-  'Watermark': '/storage-data/uploaded/?filepath=upload/86849/695ba9b9-watermark.png',
-  'Date': '/storage-data/uploaded/?filepath=upload/86849/afc3193a-date.png',
-  'Correction': '/storage-data/uploaded/?filepath=upload/86849/d2c0218b-correction.jpg',
+  'Addressee': `${imagesRoot}/demo-addressee.jpg`,
+  'Account number': `${imagesRoot}/demo-routing-number.png`,
+  'Routing number': `${imagesRoot}/demo-routing-number.png`,
+  'Signature': `${imagesRoot}/demo-sign.jpg`,
+  'Amount': `${imagesRoot}/demo-amount.jpg`,
+  'Watermark': `${imagesRoot}/demo-watermark.png`,
+  'Date': `${imagesRoot}/demo-date.png`,
+  'Correction': `${imagesRoot}/demo-correction.jpg`,
 }
 
-
 function appendCheckImg() {
   let imageEl = window[IMG_ID]
   if (!imageEl) {
@@ -34,11 +33,12 @@ function appendCheckImg() {
 
   // `label` is an actual tag name from config
   const labels = LSI.annotation.names.get('label').children
-  // hardcoded access to rendered labels,
-  // if you will have more Labels in a future adjust the logic
+
+  // If you will have more Labels in a future adjust the logic
   document.querySelectorAll('.lsf-label_clickable').forEach(
     (lbl, index) => lbl.addEventListener('click', () => {
       const src = images[labels[index].value]
+
       // if there are no images with this key image will just have an empty src
       imageEl.src = src
     })

custom-scripts/different-images-per-label/view.xml

@@ -0,0 +1,28 @@
+<View>
+  <View>
+    <Image name="image" value="$image" />
+    <Labels name="label" toName="image">
+        <Label value="Addressee" background="gray" maxUsages="1" />
+        <Label value="Account number" background="magenta" maxUsages="1" />
+        <Label value="Routing number" background="green" maxUsages="1" />
+        <Label value="Signature" background="red" maxUsages="1" />
+        <Label value="Amount" background="orange" maxUsages="2" />
+        <Label value="Watermark" background="purple" />
+        <Label value="Date" background="brown" maxUsages="1" />
+        <Label value="Correction" background="black" maxUsages="1" />
+    </Labels>
+    <Rectangle name="bbox" toName="image" strokeWidth="3" />
+  </View>
+  <View>
+    <Header value="Example" />
+    <Header value="(Please make a selection)" size="5" />
+  </View>
+</View>
+
+<!--
+{
+  "data": {
+    "image": "/static/custom-scripts/custom-scripts/show_different_images_based_on_label_selected/img/demo-sample.png"
+  }
+}
+-->