llm-preference / layouts /task_layout.html
davidjurgens's picture
Deploy Potato demo: Potato — LLM Preference (Pairwise)
57d4ba2 verified
Raw
History Blame Contribute Delete
6.51 kB
<!-- CONFIG_HASH: 51d42ad598edc98770de6e78c02c0219_e6c84fec22420f79fd85f52fa448043d -->
<!-- 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="overall_preference" class="annotation-form pairwise pairwise-scale" action="javascript:void(0)" data-annotation-id="0" data-annotation-type="pairwise" data-schema-name="overall_preference" data-mode="scale" data-items-key="responses" data-grid-columns="1">
<fieldset schema="overall_preference">
<legend class="pairwise-question">Overall, which response is better?</legend>
<!-- Compact rating scale slider -->
<div class="pairwise-scale-widget">
<div class="pairwise-scale-labels">
<span class="pairwise-scale-label-min">Response A: A is much better</span>
<span class="pairwise-scale-label-center"></span>
<span class="pairwise-scale-label-max">Response B: B is much better</span>
</div>
<input type="range" class="pairwise-scale-slider annotation-input"
name="overall_preference"
schema="overall_preference"
label_name="scale_value"
min="1" max="6" step="1" value="3"
validation="required"
oninput="updatePairwiseScaleDisplay(this);"
onchange="registerAnnotation(this);">
<div class="pairwise-scale-value-display">
<span class="pairwise-scale-current-value">3</span>
</div>
<div class="pairwise-scale-ticks">
<span class="pairwise-scale-tick" style="left: 0.0%">1</span><span class="pairwise-scale-tick" style="left: 20.0%">2</span><span class="pairwise-scale-tick" style="left: 40.0%">3</span><span class="pairwise-scale-tick" style="left: 60.0%">4</span><span class="pairwise-scale-tick" style="left: 80.0%">5</span><span class="pairwise-scale-tick" style="left: 100.0%">6</span>
</div>
</div>
</fieldset>
</form>
<form id="helpfulness" class="annotation-form pairwise pairwise-binary" action="javascript:void(0)" data-annotation-id="1" data-annotation-type="pairwise" data-schema-name="helpfulness" data-mode="binary" data-items-key="responses" data-grid-columns="1">
<fieldset schema="helpfulness">
<legend class="pairwise-question">Which response is more helpful for the user&#x27;s actual need?</legend>
<!-- Compact selection tiles -->
<div class="pairwise-selection-container">
<div class="pairwise-tile" data-value="A" data-schema="helpfulness" tabindex="0" data-key="1">
<span class="pairwise-tile-label">A</span>
<span class="pairwise-tile-shortcut">[1]</span>
</div>
<div class="pairwise-tile" data-value="B" data-schema="helpfulness" tabindex="0" data-key="2">
<span class="pairwise-tile-label">B</span>
<span class="pairwise-tile-shortcut">[2]</span>
</div>
</div>
<div class="pairwise-extra-options">
<button type="button" class="pairwise-tie-btn" data-value="tie" data-schema="helpfulness" data-key="0">
Equally helpful [0]
</button>
</div>
<input type="hidden" class="pairwise-value annotation-input"
name="helpfulness"
schema="helpfulness"
label_name="selection"
validation=""
value="">
</fieldset>
</form>
<form id="tone" class="annotation-form pairwise pairwise-binary" action="javascript:void(0)" data-annotation-id="2" data-annotation-type="pairwise" data-schema-name="tone" data-mode="binary" data-items-key="responses" data-grid-columns="1">
<fieldset schema="tone">
<legend class="pairwise-question">Which response has a more appropriate tone?</legend>
<!-- Compact selection tiles -->
<div class="pairwise-selection-container">
<div class="pairwise-tile" data-value="A" data-schema="tone" tabindex="0" >
<span class="pairwise-tile-label">A</span>
<span class="pairwise-tile-shortcut"></span>
</div>
<div class="pairwise-tile" data-value="B" data-schema="tone" tabindex="0" >
<span class="pairwise-tile-label">B</span>
<span class="pairwise-tile-shortcut"></span>
</div>
</div>
<div class="pairwise-extra-options">
<button type="button" class="pairwise-tie-btn" data-value="tie" data-schema="tone" >
Both appropriate
</button>
</div>
<input type="hidden" class="pairwise-value annotation-input"
name="tone"
schema="tone"
label_name="selection"
validation=""
value="">
</fieldset>
</form>
<form id="justification" class="annotation-form textbox shadcn-textbox-container " action="javascript:void(0)" data-annotation-id="3" data-annotation-type="text" data-schema-name="justification" data-grid-columns="2">
<fieldset schema_name="justification">
<legend class="shadcn-textbox-title">Briefly explain your preference (optional)</legend>
<div class="shadcn-textbox-item">
<input class="justification shadcn-textbox-input annotation-input"
type="text"
id="justification_text_box_text"
name="justification:::text_box"
validation=""
schema="justification"
label_name="text_box"
style=""
>
</div></fieldset></form>
</div>