/eval/ratings-human/mturk_ui.html

 
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>

<script>function displayEmoji() {

  /**
   * utf8ByteArrayToString() copied from:
   *   https://github.com/google/closure-library/blob/e877b1eac410c0d842bcda118689759512e0e26f/closure/goog/crypt/crypt.js
   *
   * Converts a UTF-8 byte array to JavaScript's 16-bit Unicode.
   * @param {Uint8Array|Array<number>} bytes UTF-8 byte array.
   * @return {string} 16-bit Unicode string.
   */
  var utf8ByteArrayToString = function(bytes) {
    var out = [], pos = 0, c = 0;
    while (pos < bytes.length) {
      var c1 = bytes[pos++];
      if (c1 < 128) {
        out[c++] = String.fromCharCode(c1);
      } else if (c1 > 191 && c1 < 224) {
        var c2 = bytes[pos++];
        out[c++] = String.fromCharCode((c1 & 31) << 6 | c2 & 63);
      } else if (c1 > 239 && c1 < 365) {
        // Surrogate Pair
        var c2 = bytes[pos++];
        var c3 = bytes[pos++];
        var c4 = bytes[pos++];
        var u = ((c1 & 7) << 18 | (c2 & 63) << 12 | (c3 & 63) << 6 | c4 & 63) -
                0x10000;
        out[c++] = String.fromCharCode(0xD800 + (u >> 10));
        out[c++] = String.fromCharCode(0xDC00 + (u & 1023));
      } else {
        var c2 = bytes[pos++];
        var c3 = bytes[pos++];
        out[c++] =
          String.fromCharCode((c1 & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
      }
    }
    return out.join('');
  }

  jQuery(this).text(utf8ByteArrayToString(JSON.parse(jQuery(this).attr('data-emoji-bytes'))));
}</script>

<style>
  body {
    padding-left: 20px;
    margin-bottom: 20px;
  }
  #outer-container {
      display: flex;
      justify-content: space-around;
      max-width: 900px;
      margin-left: 100px;
  }
  .left-container {
      margin-right: auto;
      padding-right: 50px;
      max-width: 500px;
      word-wrap:break-word;
  }
  .right-container {
      margin-left: auto;
      padding-left: 50px;
      max-width:500px;
      word-wrap:break-word;
  }
  #vertical-separator {
      border: solid 1px #d5dbdb;
  }
</style>

<crowd-form>
    <div>
        <h1>Task</h1>
        We would like to request your feedback on the performance of two AI assistants in response to the user question displayed below.
        <br><br>
        Please consider the helpfulness, relevance, accuracy, level of details of their responses.
        <br><br>
        Please choose the best response, avoiding any potential bias, ensuring that the order in which the responses were presented does not affect your judgment.
    </div>
    <div>
        <h2>User Question</h2>
      <p>${prompt_html}</p>
    </div>
    <div id="outer-container">
  <span class="left-container">
      <h2>Response A</h2>
      <p> ${generation_a_html} </p>
  </span>
  <span id="vertical-separator"></span>
  <span class="right-container">
      <h2>Response B</h2>
      <p>${generation_b_html}</p>
    </div>
    <div>
        <h2>Response Comparion</h2>
                <div>
          <input type="radio" id="a" name="pairwise" value="a" required>
          <label for="a"><b>Response A is better</b> than Response B.</label>
        </div>
         <div>
          <input type="radio" id="b" name="pairwise" value="b" required>
          <label for="b"><b>Response B is better</b> than Response A.</label>
        </div>
        
        <div>
          <input type="radio" id="c" name="pairwise" value="c" required>
          <label for="c"></label><b>The responses are EXACTLY</b> the same in quality.</label>
        </div>

  </span>
    </div>
    <br><br>
</crowd-form>

<script>
$(document).ready(function() {
  $('span.emoji-bytes').each(displayEmoji);
});
</script>