layouts/task_layout.html

<!-- CONFIG_HASH: c6d71f95780258f80e49f6fef0df21ed_a0667de77c0d1324c3c932fca37378c9 -->
<!-- Generated annotation layout file -->
<!-- This file was automatically generated based on the annotation schemes in your config -->
<!-- You can customize this file to modify the layout of your annotation interface -->
<!-- Changes to this file will be preserved across server restarts -->

<div class="annotation_schema">

    <form id="tokens" class="annotation-form span shadcn-span-container" action="javascript:void(0)" data-annotation-id="0" data-grid-columns="1">
            
        <fieldset schema="tokens">
            <legend class="shadcn-span-title">Highlight individual tokens and assign POS tags</legend>
            
            
            <div class="shadcn-span-options">
    
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_NOUN"
                       name="span_label:::tokens"
                       value="n"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'NOUN', 'NOUN', '(110, 86, 207)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_NOUN" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Nouns (cat, dog, idea)">
                    <span style="background-color:rgb(110, 86, 207,0.4);">NOUN</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_VERB"
                       name="span_label:::tokens"
                       value="v"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'VERB', 'VERB', '(239, 68, 68)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_VERB" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Verbs (run, eat, think)">
                    <span style="background-color:rgb(239, 68, 68,0.4);">VERB</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_ADJ"
                       name="span_label:::tokens"
                       value="a"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'ADJ', 'ADJ', '(113, 113, 122)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_ADJ" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Adjectives (big, red, happy)">
                    <span style="background-color:rgb(113, 113, 122,0.4);">ADJ</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_ADV"
                       name="span_label:::tokens"
                       value="r"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'ADV', 'ADV', '(245, 158, 11)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_ADV" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Adverbs (quickly, very, well)">
                    <span style="background-color:rgb(245, 158, 11,0.4);">ADV</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_DET"
                       name="span_label:::tokens"
                       value="d"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'DET', 'DET', '(16, 185, 129)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_DET" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Determiners (the, a, this)">
                    <span style="background-color:rgb(16, 185, 129,0.4);">DET</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_ADP"
                       name="span_label:::tokens"
                       value="p"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'ADP', 'ADP', '(59, 130, 246)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_ADP" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Adpositions/Prepositions (in, on, at)">
                    <span style="background-color:rgb(59, 130, 246,0.4);">ADP</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_PRON"
                       name="span_label:::tokens"
                       value="o"
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'PRON', 'PRON', '(220, 38, 38)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_PRON" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Pronouns (he, she, it)">
                    <span style="background-color:rgb(220, 38, 38,0.4);">PRON</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="tokens shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="tokens_PUNCT"
                       name="span_label:::tokens"
                       value="."
                       onclick="onlyOne(this); changeSpanLabel(this, 'tokens', 'PUNCT', 'PUNCT', '(139, 92, 246)', '');"
                       data-target-field=""
                       validation="">
                <label for="tokens_PUNCT" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Punctuation (., !, ?)">
                    <span style="background-color:rgb(139, 92, 246,0.4);">PUNCT</span>
                </label>
            </div>
        </div></fieldset></form>

    <div id="dependencies" class="span-link-container annotation-form"
         data-annotation-type="span_link"
         data-annotation-id="1"
         data-span-schema="tokens"
         data-show-arcs="true"
         data-arc-position="above"
         data-show-labels="true"
         data-multi-line-mode="single_line">

        <div class="span-link-header">
            <h4 class="span-link-title">Create dependency relations between tokens (click head first, then dependent)</h4>
        </div>

        <!-- Link Type Selector -->
        <div class="span-link-type-selector">
            <label class="span-link-section-label">Select Link Type:</label>
            <div class="span-link-types">
                
            <div class="span-link-type" data-link-type="nsubj"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#dc2626"
                 data-source-labels=""
                 data-target-labels="VERB"
                 data-toggle="tooltip" data-placement="top" title="Target: VERB">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_nsubj"
                       value="nsubj"
                       class="span-link-type-radio">
                <label for="dependencies_link_nsubj"
                       class="span-link-type-label directed"
                       style="--link-color: #dc2626">
                    <span class="link-color-indicator" style="background-color: #dc2626"></span>
                    <span class="link-type-name">nsubj</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="obj"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#22c55e"
                 data-source-labels=""
                 data-target-labels="VERB"
                 data-toggle="tooltip" data-placement="top" title="Target: VERB">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_obj"
                       value="obj"
                       class="span-link-type-radio">
                <label for="dependencies_link_obj"
                       class="span-link-type-label directed"
                       style="--link-color: #22c55e">
                    <span class="link-color-indicator" style="background-color: #22c55e"></span>
                    <span class="link-type-name">obj</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="iobj"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#10b981"
                 data-source-labels=""
                 data-target-labels="VERB"
                 data-toggle="tooltip" data-placement="top" title="Target: VERB">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_iobj"
                       value="iobj"
                       class="span-link-type-radio">
                <label for="dependencies_link_iobj"
                       class="span-link-type-label directed"
                       style="--link-color: #10b981">
                    <span class="link-color-indicator" style="background-color: #10b981"></span>
                    <span class="link-type-name">iobj</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="amod"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#3b82f6"
                 data-source-labels=""
                 data-target-labels="NOUN,PRON"
                 data-toggle="tooltip" data-placement="top" title="Target: NOUN, PRON">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_amod"
                       value="amod"
                       class="span-link-type-radio">
                <label for="dependencies_link_amod"
                       class="span-link-type-label directed"
                       style="--link-color: #3b82f6">
                    <span class="link-color-indicator" style="background-color: #3b82f6"></span>
                    <span class="link-type-name">amod</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="advmod"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#8b5cf6"
                 data-source-labels=""
                 data-target-labels="VERB,ADJ,ADV"
                 data-toggle="tooltip" data-placement="top" title="Target: VERB, ADJ, ADV">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_advmod"
                       value="advmod"
                       class="span-link-type-radio">
                <label for="dependencies_link_advmod"
                       class="span-link-type-label directed"
                       style="--link-color: #8b5cf6">
                    <span class="link-color-indicator" style="background-color: #8b5cf6"></span>
                    <span class="link-type-name">advmod</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="nmod"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#f59e0b"
                 data-source-labels=""
                 data-target-labels="NOUN,VERB"
                 data-toggle="tooltip" data-placement="top" title="Target: NOUN, VERB">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_nmod"
                       value="nmod"
                       class="span-link-type-radio">
                <label for="dependencies_link_nmod"
                       class="span-link-type-label directed"
                       style="--link-color: #f59e0b">
                    <span class="link-color-indicator" style="background-color: #f59e0b"></span>
                    <span class="link-type-name">nmod</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="det"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#6b7280"
                 data-source-labels="DET"
                 data-target-labels="NOUN"
                 data-toggle="tooltip" data-placement="top" title="Source: DET; Target: NOUN">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_det"
                       value="det"
                       class="span-link-type-radio">
                <label for="dependencies_link_det"
                       class="span-link-type-label directed"
                       style="--link-color: #6b7280">
                    <span class="link-color-indicator" style="background-color: #6b7280"></span>
                    <span class="link-type-name">det</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="case"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#a855f7"
                 data-source-labels="ADP"
                 data-target-labels=""
                 data-toggle="tooltip" data-placement="top" title="Source: ADP">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_case"
                       value="case"
                       class="span-link-type-radio">
                <label for="dependencies_link_case"
                       class="span-link-type-label directed"
                       style="--link-color: #a855f7">
                    <span class="link-color-indicator" style="background-color: #a855f7"></span>
                    <span class="link-type-name">case</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="punct"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#9ca3af"
                 data-source-labels="PUNCT"
                 data-target-labels=""
                 data-toggle="tooltip" data-placement="top" title="Source: PUNCT">
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_punct"
                       value="punct"
                       class="span-link-type-radio">
                <label for="dependencies_link_punct"
                       class="span-link-type-label directed"
                       style="--link-color: #9ca3af">
                    <span class="link-color-indicator" style="background-color: #9ca3af"></span>
                    <span class="link-type-name">punct</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            <div class="span-link-type" data-link-type="root"
                 data-directed="true"
                 data-max-spans="2"
                 data-color="#ef4444"
                 data-source-labels=""
                 data-target-labels=""
                 >
                <input type="radio" name="dependencies_link_type"
                       id="dependencies_link_root"
                       value="root"
                       class="span-link-type-radio">
                <label for="dependencies_link_root"
                       class="span-link-type-label directed"
                       style="--link-color: #ef4444">
                    <span class="link-color-indicator" style="background-color: #ef4444"></span>
                    <span class="link-type-name">root</span>
                    <span class="link-direction-icon">→</span>
                </label>
            </div>
        
            </div>
        </div>

        <!-- Selected Spans Display -->
        <div class="span-link-selection">
            <label class="span-link-section-label">Selected Spans:</label>
            <div class="span-link-selected-spans" id="dependencies_selected_spans">
                <p class="no-selection-message">Click on highlighted spans to select them for linking</p>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="span-link-actions">
            <button type="button" class="span-link-create-btn" id="dependencies_create_link"
                    disabled>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                </svg>
                Create Link
            </button>
            <button type="button" class="span-link-clear-btn" id="dependencies_clear_selection"
                    title="Exit link mode to create new span annotations (Esc)">
                Exit Link Mode
            </button>
        </div>

        <!-- Existing Links Display -->
        <div class="span-link-existing">
            <label class="span-link-section-label">Existing Links:</label>
            <div class="span-link-list" id="dependencies_link_list">
                <p class="no-links-message">No links created yet</p>
            </div>
        </div>

        <!-- Visual Display Toggle -->
        <div class="span-link-visual-toggle">
            <label>
                <input type="checkbox" id="dependencies_show_arcs"
                       checked>
                Show link arcs above text
            </label>
        </div>

        <!-- Hidden input to store link data for form submission -->
        <input type="hidden" name="span_link:::dependencies"
               id="dependencies_link_data" value="[]">
    </div>
    

</div>