view_id text, how do I enlarge the text ?

[ngawangtrinley]

so I am using two view_id in a single recipe where I am using the image_manual as well text but I want to show the text as big as I can so annoatators can see it well.
Below is the image of my UI where I have circled the text that I want to enlarge.

and below is my recipe that I used for this UI.

@prodigy.recipe("glyph-annotation-recipe")
def glyph_annotation_recipe(dataset, jsonl_file):
    logging.info(f"dataset:{dataset}, jsonl_file_path:{jsonl_file}")
    blocks = [
        {
            "view_id": "image_manual",
            "labels": ["Base Line", "Glyph"],
        },
        {
            "view_id": "text"
        },
    ]
    return {
        "dataset": dataset,
        "stream": stream_from_jsonl(jsonl_file),
        "view_id": "blocks",
        "config": {
            "blocks": blocks
        }
    }

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

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["text"]
            image_url = get_new_url(obj_key)
            eg = {"id": image_id, "image": image_url, "text": text}
            yield set_hashes(eg, input_keys=("id"))

and below is the example of the jsonl that I use.

{"id": "ཨོཾ_92", "image_url": "glyph/glyph_test/ཨོཾ/ཨོཾ_92.jpg", "text": "ཨོཾ"}
{"id": "ཨོཾ_34", "image_url": "glyph/glyph_test/ཨོཾ/ཨོཾ_34.jpg", "text": "ཨོཾ"}
{"id": "སྙེ_79", "image_url": "glyph/glyph_test/སྙེ/སྙེ_79.jpg", "text": "སྙེ"}
{"id": "སྙེ_86", "image_url": "glyph/glyph_test/སྙེ/སྙེ_86.jpg", "text": "སྙེ"}

[koaning (Vincent D Warmerdam)]

For this sort of thing I usually prefer to use the html view. Mainly because it's a bit easier to tweak the looks from HTML. Here's a demo:

import prodigy 
from prodigy.components.stream import get_stream

@prodigy.recipe("glyph-annotation-recipe")
def glyph_annotation_recipe(dataset, jsonl_file):
    blocks = [
        {"view_id": "image_manual", "labels": ["A", "B"]},
        {"view_id": "html"},
    ]
    stream = get_stream(jsonl_file)

    def text_to_html(stream):
        for ex in stream:
            ex['html'] = f"<p style='font-size: 10em;'>{ex['text']}</p>"
            yield ex
    
    stream.apply(text_to_html)

    return {
        "dataset": dataset,
        "stream": stream,
        "view_id": "blocks",
        "config": {
            "blocks": blocks
        }
    }

This is the example that I'm using.

{"image": "https://placekitten.com/200/200", "text": "ཨོཾ"}

When I run it from the terminal, it looks like this:

python -m prodigy glyph-annotation-recipe issue-6703 examples.jsonl -F recipe.py

Does this suffice? The important bit here is the font-size: 10em; in the HTML.

[ngawangtrinley]

I will try it out and let you know. Thank you for swift response.

[ngawangtrinley]

hi @koaning
I got the solution but I did not use the get_stream from prodigy.components.stream because I need to call get_new_url function on every image before it is yielded, so that image can get access to be downloaded from the s3. my new recipe looks like the below.

@prodigy.recipe("glyph-annotation-recipe")
def glyph_annotation_recipe(dataset, jsonl_file):
    logging.info(f"dataset:{dataset}, jsonl_file_path:{jsonl_file}")
    blocks = [
        {"view_id": "image_manual"},
        {"view_id": "html"},
    ]
    return {
        "dataset": dataset,
        "stream": stream_from_jsonl(jsonl_file),
        "view_id": "blocks",
        "config": {
            "blocks": blocks
        }
    }

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

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["text"]
            image_url = get_new_url(obj_key)
            html = f"<p style='font-size: 10em;'>{text}</p>"
            eg = {"id": image_id, "image": image_url, 'html':html }
            yield set_hashes(eg, input_keys=("id"))

but now I want the annotators to be able to zoom in and zoom out on the images, how do I do that ? do I add something to the prodigy.json or do I make changes to the recipe.
how do I zoom in and zoom out ?

below is UI from the above recipe

[koaning (Vincent D Warmerdam)]

Prodigy does not natively support widgets to zoom in on the image, but the browser can be used for this too. On my Mac, the "pin and zoom" action on the trackpad allows one to do this:

I'd expect other browsers/operating systems to also have support for this. Does the browser-based approach work for you?