How can I directly edit and display markdown in Label Studio?

Label Studio Support
,
1

Hello everyone,
Currently, my data is in markdown format in Python, and I use the following function to display it as text:

def to_markdown(text):
    text = text.replace('•', '  *')
    return Markdown(textwrap.indent(text, '> ', predicate=lambda _: True))

Example data:

"Question": "Given a convex quadrilateral ABCD with AD = 6cm. Let $\\overrightarrow{v} = \\overrightarrow{AB} - \\overrightarrow{DC} - \\overrightarrow{CB}$. Calculate $\\overrightarrow{v}.\\overrightarrow{AD}$\n\n### Multiple Choice:\nA. 18\nB. 32\nC. 36\nD. 40"

However, I need a way to directly edit and display markdown in Label Studio. Is there any method to achieve this?

2

hey @Quang-Duy welcome and thanks for posting here :wave:

The HyperText tag allows you to render HTML content, which can include markdown that has been converted to HTML.

  1. Convert Markdown to HTML: Use a Python library like markdown to convert your markdown text to HTML.
  2. Create a Label Studio Configuration: Use the HyperText tag to display the HTML content.

Step 1: Convert Markdown to HTML

First, install the markdown library if you haven’t already:

pip install markdown

Then, use the following function to convert your markdown text to HTML:

import markdown

def markdown_to_html(text):
    return markdown.markdown(text)

Step 2: Create a Label Studio Configuration

Use the HyperText tag in your Label Studio configuration to display the HTML content. Here’s an example configuration:

<View>
  <Header value="Please read the text" />
  <HyperText name="html_text" value="$html_text" />
  <Header value="Provide your annotation" />
  <TextArea name="annotation" toName="html_text" showSubmitButton="true" maxSubmissions="1" editable="true" required="true" />
</View>

Example Usage

Here’s how you can integrate everything:

  1. Convert your markdown text to HTML:
    markdown_text = """
    # Title
    * Bullet point 1
    * Bullet point 2
    """
    html_text = markdown_to_html(markdown_text)
  1. Prepare your data for Label Studio:
    task_data = {
        "html_text": html_text
    }
  1. Import the task data into Label Studio using the Label Studio SDK or API.

Full Example

Here’s a full example of how you can prepare and import a task into Label Studio:

import markdown
from label_studio_sdk import Client

# Convert markdown to HTML
def markdown_to_html(text):
    return markdown.markdown(text)

markdown_text = """
# Title
* Bullet point 1
* Bullet point 2
"""
html_text = markdown_to_html(markdown_text)

# Prepare task data
task_data = {
    "html_text": html_text
}

# Connect to Label Studio
ls = Client(url="http://localhost:8080", api_key="your_api_key")

# Create a new project
project = ls.start_project(
    title="Markdown Annotation",
    label_config="""
    <View>
      <Header value="Please read the text" />
      <HyperText name="html_text" value="$html_text" />
      <Header value="Provide your annotation" />
      <TextArea name="annotation" toName="html_text" showSubmitButton="true" maxSubmissions="1" editable="true" required="true" />
    </View>
    """
)

# Import the task
project.import_tasks([task_data])

This will allow you to display and edit markdown content directly in Label Studio.

3

Hi @sajarin,
Is the current method being used with the community version? I am currently using the enterprise version on the website. Is it possible to make direct edits like this? Thank you very much for helping me out.

4

hey @Quang-Duy, yes, the sample script above would be run separately from your Label Studio instance.

Basically you are programmatically creating a project with a label config using the hypertext tag, that takes in html, which was converted from markdown from this script. The script I pasted above uses the Label Studio API which should be accessible to you as an enterprise user.