how to add custom font on the text_input view_id ?

,
1

Screenshot 2023-12-01 at 1.17.22 PM
Screenshot 2023-12-01 at 1.17.22 PM3020×1654 352 KB

so the above instance is what I made for the annotators to transcribe the line image below in the text input area. And the font in the image and the font in the text are not same font of Tibetan. I have the font file of the text font that is in the line image in .ttf and I want to use that font in the text input area so that annotators have the same font to compare with. how can I add my custom font .ttf in the prodigy's view_id text input ?

Below is the custom recipe used to create the above instance.

import logging
import prodigy
from tools.config import MONLAM_AI_OCR_BUCKET, monlam_ocr_s3_client
import jsonlines
from prodigy import set_hashes


s3_client = monlam_ocr_s3_client
bucket_name = MONLAM_AI_OCR_BUCKET

# log config 
logging.basicConfig(
    filename="/usr/local/prodigy/logs/line_to_text.log",
    format="%(levelname)s: %(message)s",
    level=logging.INFO,
    )

# Prodigy has a logger named "prodigy" according to 
# https://support.prodi.gy/t/how-to-write-log-data-to-file/1427/10
prodigy_logger = logging.getLogger('prodigy')
prodigy_logger.setLevel(logging.INFO)

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

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

Below is the configuration json file.

{
    "theme": "basic",
    "custom_theme": { "cardMaxWidth": 2000 },
    "buttons": ["accept","ignore"],
    "batch_size": 10,
    "history_size": 10,
    "port": 8041,
    "host": "localhost",
    "cors": true,
    "db": "sqlite",
    "db_settings": {
      "sqlite": {
        "name": "ltt_batch19-20.sqlite",
        "path": "/usr/local/prodigy"
      }
    },
    "validate": true,
    "auto_exclude_current": true,
    "instant_submit": true,
    "feed_overlap": false,
    "auto_count_stream": false,
    "total_examples_target": 0,
    "allow_work_stealing": false,
    "ui_lang": "en",
    "project_info": ["dataset", "session", "lang", "recipe_name", "view_id", "label"],
    "show_stats": false,
    "hide_meta": false,
    "show_flag": false,
    "instructions": false,
    "swipe": false,
    "swipe_gestures": { "left": "accept", "right": "reject" },
    "split_sents_threshold": false,
    "html_template": false,
    "global_css": null,
    "javascript": null,
    "writing_dir": "ltr",
    "show_whitespace": false,
    "exclude_by": "input"
  }
2

hi @ngawangtrinley,

In general, to use a custom font in Prodigy, you can use the global_css configuration option in your prodigy.json file.

To use a custom .ttf font, you would need to first host the font file somewhere accessible (like an S3 bucket or a public URL), then you can include a @font-face rule in your CSS to specify the custom font, and apply it to the elements you want.

You'll also want to apply it to this class .prodigy-text-input (see this for more details).

Here's a pseudo-example:

{
  "global_css": "@font-face { font-family: 'MyCustomFont'; src: url('https://mywebsite.com/myfont.ttf') format('truetype'); } .prodigy-text-input { font-family: 'MyCustomFont'; }"
}

You can replace these values with your actual font name, hosted font file URL, and the correct CSS selector for your use case.

Please note that the URL to the font file must be accessible from the client's browser. If you're running Prodigy on a local machine, you might need to host the font file on a server that's accessible from that machine.

Hope this helps!