how to provide custom html template on the view_id `text_input`.

,
1

so we are adding a auto complete feature on the view_id text_input and we have the auto complete js file in a html template and want to use that auto complete in the text_input area of view_id text input. how do I do it ? And if you want to make changes to the view_id text_input itself where can I find the source code apart from the one installed using pip ?

Below is our current custom recipe


import logging
from tools.config import LAYOUT_ANALYSIS_BUCKET, layout_analysis_s3_client
import random
import prodigy
import jsonlines
from pathlib import Path

s3_client = layout_analysis_s3_client
bucket_name = LAYOUT_ANALYSIS_BUCKET


@prodigy.recipe("line-to-text-recipe")
def line_to_text_recipe(dataset, jsonl_file):
    logging.info(f"dataset:{dataset}, jsonl_file_path:{jsonl_file}")

    blocks = [
        {"view_id": "image"},
        {
            "view_id": "text_input",
            'config': {
                 'html_template': "<textarea id='text_input' placeholder='this is it, it works' onchange='changeInput()'></textarea>",
            }
        },
        
    ]
    return {
        "dataset": dataset,
        "stream": stream_from_jsonl(jsonl_file),
        "view_id": "blocks",
        "config": {
            "blocks": blocks,
            "editable": True
        }
    }


def stream_from_jsonl(jsonl_file):
    with jsonlines.open(jsonl_file) as reader:
        for line in reader:
            image_id = line["id"]
            obj_key = line["image_url"]
            text = line["user_input"]
            image_url = get_new_url(obj_key)
            yield {"id": image_id, "image": image_url}

def get_new_url(image_url):
    new_image_url = s3_client.generate_presigned_url(
        ClientMethod="get_object",
        Params={"Bucket": bucket_name, "Key": image_url},
        ExpiresIn=31536000
    )
    return new_image_url
2

Hi there!

Could you describe the use-case for autocomplete a bit more? What are you trying to annotate and why would an autocomplete be required?

That said, the text input of Prodigy already allows for some pre-filling.

If you specify the field_suggestions you can predefine the expected outputs and you'll get autocompletion that way.

{
  "field_id": "country",
  "field_placeholder": "Your country",
  "field_suggestions": ["United States", "United Kingdom", "Germany", "France"]
}

Would that suffice?

3

no that will not suffice, we are streaming a Tibetan text image to the prodigy and then the annotators will transcribe what is in the image, since Tibetan text is little bit hard to type, we have made a Tibetan autocomplete so we want to use it in the prodigy to ease the work or lessen the type mistake by using this.

4

Could you share a GIF of the auto-complete? Are you using a javascript project for this or an external API? I'm also wondering if there is a browser auto-completion extension that might work here.

You could go down the custom JS path, but it's usually preferable to omit it because it can be more error prone.

Just an alternative suggestion, do you pre-fill the text field with suggestions from a machine learning model? That might also be a method to make the annotations easier.

5

we wanted a suggestions like this to be part of the text_input . when a user type a word we should be able to provide him with some suggestion dynamically , we tried the field_suggestion and it seems like a dropdown menu, so it wont be usable here.
it will be great if you can suggest a way to implement it and also if i have to use a custom js what library will be good to implement this with Prodigy app.

6

The JS library that you mention, is that available publicly so that I might try and use it locally? It'll be easier to me to explore this locally if I have access to the same JS code.

7

@koaning
i am trying TributeJs as a suggestion tool for the textarea and it worked .
but ritenow i tried to import tributejs using a cdn inside the index.html located at .env/lib/prodigy/static/index.html . it will be much better if i can import tributeJs in the js file that i am using inside the recipe config itself. the issue is config javascript inside the recipe take string as input , so i am not sure how to import tributeJs library in it.

import Tribute from 'tributejs'

i dont think it will work ,any suggestion?