Spaces:

Blablablab
/

multi-span

Paused

File size: 54,791 Bytes

dc4d6fd

<!DOCTYPE html>
<html lang="en">
  <!--- HEADER GOES BELOW HERE--->

  {{ HEADER }}

  <!--- HEADER GOES ABOVE HERE--->

  <style>
    :root {
      --background: #ffffff;
      --foreground: #09090b;
      --card: #ffffff;
      --card-foreground: #09090b;
      --popover: #ffffff;
      --popover-foreground: #09090b;
      --primary: #6e56cf;
      --primary-foreground: #ffffff;
      --secondary: #f4f4f5;
      --secondary-foreground: #18181b;
      --muted: #f4f4f5;
      --muted-foreground: #71717a;
      --accent: #f4f4f5;
      --accent-foreground: #18181b;
      --destructive: #ef4444;
      --destructive-foreground: #fafafa;
      --border: #e4e4e7;
      --input: #e4e4e7;
      --ring: #6e56cf;
      --radius: 0.5rem;
      --primary-color: #6e56cf; /* Shadcn purple */
      --secondary-color: #7c66ce;
      --accent-color: #a18fff;
      --dark-color: #09090b;
      --light-color: #fafafa;
      --gray-color: #71717a;
      --light-gray: #f4f4f5;
      --light-bg: #f5f7fb; /* Light background for sections */
      --heading-color: white; /* For headings */
      --text-color: #555555; /* For regular text */
      --success-color: #10b981;
      --border-radius: 0.5rem;
      --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
      --transition: all 0.2s ease;
      --section-padding-top: 100px;
    }

    /* Shadcn-style button */
    .shadcn-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      font-weight: 500;
      font-size: 0.875rem;
      height: 2.5rem;
      padding-left: 1rem;
      padding-right: 1rem;
      transition: var(--transition);
      cursor: pointer;
      text-decoration: none;
    }

    .shadcn-button-primary {
      background-color: var(--primary);
      color: var(--primary-foreground);
      border: 1px solid var(--primary);
    }

    .shadcn-button-primary:hover {
      background-color: var(--secondary-color);
      color: var(--primary-foreground);
    }

    .shadcn-button-outline {
      background-color: transparent;
      color: var(--primary);
      border: 1px solid var(--border);
    }

    .shadcn-button-outline:hover {
      background-color: var(--secondary);
      color: var(--primary);
    }

    /* Sidepanel styling */
    .sidepanel {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      background-color: var(--card);
      overflow-x: hidden;
      transition: 0.3s;
      padding-top: 60px;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .sidepanel a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 16px;
      color: var(--foreground);
      display: block;
      transition: 0.3s;
    }

    .sidepanel .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
      color: var(--muted-foreground);
    }

    /* Span annotation styling */
    .span_container {
      position: relative;
      display: inline-block;
      border-radius: var(--radius);
    }

    .span_label {
      position: absolute;
      top: -18px;
      left: 0;
      font-size: 10px;
      border-radius: 3px;
      padding: 0 3px;
      color: var(--primary);
    }

    .span_close {
      position: absolute;
      top: -18px;
      right: 0;
      font-size: 12px;
      border-radius: 3px;
      padding: 0 3px;
      cursor: pointer;
      color: var(--destructive);
    }

    /* Card styling */
    .shadcn-card {
      height: 65vh;
      background-color: var(--card);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: var(--box-shadow);
      overflow: hidden;
    }

    .shadcn-card-header {
      padding: 1.5rem;
      border-bottom: 1px solid var(--border);
    }

    .shadcn-card-content {
      padding: 1.5rem;
    }

    fieldset {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem;
      margin-bottom: 1rem;
    }

    legend {
      font-weight: 500;
      color: var(--heading-color);
      padding: 0 0.5rem;
    }

    /* Form elements */
    input[type="text"],
    input[type="number"],
    textarea,
    select {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0.5rem;
      background-color: var(--background);
      color: var(--foreground);
      transition: var(--transition);
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--ring);
      box-shadow: 0 0 0 2px var(--ring-opacity);
    }
  </style>

  {{ custom_js | safe }}

  <body style="background-color: var(--background); color: var(--foreground)">
    <input type="hidden" name="username" id="username" value="{{username}}" />
    <input
      type="hidden"
      name="instance_id"
      id="instance_id"
      value="{{instance_id}}"
    />
    <input
      type="hidden"
      name="alert_time_each_instance"
      id="alert_time_each_instance"
      value="{{alert_time_each_instance}}"
    />
    <p id="timecounter" hidden>Time spent:</p>

    <div id="mySidepanel" class="sidepanel">
      <a
        href="javascript:void(0)"
        class="closebtn"
        target_id="mySidepanel"
        onclick="closeNav(this.getAttribute('target_id'))"
        >&times;</a
      >
      {{keybindings}}
    </div>

    <div id="Statpanel" class="sidepanel">
      <a
        href="javascript:void(0)"
        class="closebtn"
        target_id="Statpanel"
        onclick="closeNav(this.getAttribute('target_id'))"
        >&times;</a
      >
      [[statistics_nav]]
    </div>

    <script>
      // this is for ai hints
      document.addEventListener("click", function (event) {
        const hintEl = event.target.closest(".hint");
        if (!hintEl) return; // Not a .hint click

        const aiHelp = hintEl.closest(".ai-help");
        const tooltip = aiHelp.querySelector(".tooltip");
        const tooltipText = tooltip.querySelector(".tooltip-text");
        const annotationId = aiHelp.closest("[data-annotation-id]")?.dataset
          .annotationId;
        const text = document.getElementById("instance-text").innerText;

        fetch("get_ai_hint", {
          method: "POST",    
          credentials: "same-origin",              
          body: JSON.stringify({ annotation_id: annotationId, text: text }),
          headers: { "Content-Type": "application/json" },
        })
          .then((response) => response.json())
          .then((data) => {
            tooltipText.innerHTML = `<span class="reasoning">Reasoning:</span> ${data.reasoning}`;
            tooltip.classList.toggle("active");
          })
          .catch((error) => {
            tooltipText.innerHTML = `<span class="reasoning">Error:</span> Could not load hint`;
            tooltip.classList.toggle("active");
            console.error("Error fetching AI hint:", error);
          });
      });
      document.addEventListener("click", function (event) {
        if (!event.target.closest(".ai-help")) {
          document.querySelectorAll(".tooltip.active").forEach((tooltip) => {
            tooltip.classList.remove("active");
          });
        }
      });
    </script>

    <script>
      document.addEventListener("keyup", function (event) {
        var active_id = document.activeElement.id;
        var active_type = document.activeElement.getAttribute("type");
        if ((active_id == "go_to") | (active_type == "text")) return;

        //first check whether this keyboard input is a shortcut for checkboxes
        var checkboxes = document.querySelectorAll("input[type=checkbox]");
        var radios = document.querySelectorAll("input[type=radio]");
        var x = event.key.toLowerCase();

        for (var i = 0; i < checkboxes.length; i++) {
          //alert(checkboxes[i].value)
          if (x === checkboxes[i].value) {
            checkboxes[i].checked = !checkboxes[i].checked;
            if (checkboxes[i].onclick != null)
              checkboxes[i].onclick.apply(checkboxes[i]);
            return;
          }
        }
        for (var i = 0; i < radios.length; i++) {
          //alert(checkboxes[i].value)
          if (x === radios[i].value) {
            radios[i].checked = !radios[i].checked;
            if (radios[i].onclick != null) radios[i].onclick.apply(radios[i]);
            return;
          }
        }

        // Each time we process a user's key presses, track who is doing
        // it by grabbing the hidden firstname and lastname fields
        get_new_instance(event);
      });

      function getFieldSetState(element) {
        // console.dir('saw annotation' + element.value);
        // console.dir(element.parentElement);
        //var fieldSet = element.parentElement;

        // Find the closeset ancestor fieldset element from this input
        var fieldSet = element.closest("fieldset");

        // Get all the inputs in this field set (what are the annotation options)
        var inputs = fieldSet.querySelectorAll("input");

        // Get state of all the in this group
        var state = Array.from(inputs).map((input) => {
          return {
            name: input.getAttribute("label_name"),
            value: input.checked,
            // checked: input.value // unused??
          };
        });
        return state;
      }

      function registerAnnotation(element) {
        // If the element is a radio button, we need to uncheck all the other which
        // requires sending the state of all the other buttons in the group
        sc = element.getAttribute("selection_constraint");
        if (sc && sc == "single") {
          state = getFieldSetState(element);
        } else if (element.getAttribute("type") == "range") {
          state = [
            {
              name: element.getAttribute("label_name"),
              value: element.value,
            },
          ];
        }
        // This is a checkbox so we can just send the state of this checkbox
        else {
          state = [
            {
              name: element.getAttribute("label_name"),
              value: element.checked,
              // checked: element.value // unused??
            },
          ];
        }

        // Get which annotation group this change belongs to
        var schema = element.getAttribute("schema");

        // Get the instance id
        var instance_id = document.getElementById("instance_id").value;

        // Package this all up in a post request to the server's updateinstance endpoint
        var post_req = {
          type: "label",
          schema: schema,
          state: state,
          instance_id: instance_id,
        };

        // Send the post request
        fetch("/updateinstance", {
          method: "POST",
          body: JSON.stringify(post_req),
          credentials: "same-origin",
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        });
      }

      function registerTextAnnotation(element) {
        // Get which annotation group this change belongs to
        var schema = element.getAttribute("schema");

        // Get the instance id
        var instance_id = document.getElementById("instance_id").value;

        state = [
          {
            name: element.getAttribute("label_name"),
            value: element.value,
          },
        ];

        // Package this all up in a post request to the server's updateinstance endpoint
        var post_req = {
          type: "label",
          schema: schema,
          state: state,
          instance_id: instance_id,
        };

        // Send the post request
        fetch("/updateinstance", {
          method: "POST",
          body: JSON.stringify(post_req),
          credentials: "same-origin",
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        });
      }

      function getSelectedText() {
        var text = "";
        if (typeof window.getSelection != "undefined") {
          text = window.getSelection().toString();
        } else if (
          typeof document.selection != "undefined" &&
          document.selection.type == "Text"
        ) {
          text = document.selection.createRange().text;
        }
        return text;
      }

      function deleteSpanAnnotation(
        spanElem,
        schema,
        labelName,
        title,
        start,
        end
      ) {
        // Get the instance id
        var instance_id = document.getElementById("instance_id").value;

        // Get the text of the span
        var spanText = spanElem.innerText;

        // Package this all up in a post request to the server's updateinstance endpoint
        var post_req = {
          type: "span",
          schema: schema,
          state: [
            {
              name: labelName,
              start: start,
              end: end,
              title: title,
              value: null,
            },
          ],
          instance_id: instance_id,
        };

        // Send the post request
        fetch("/updateinstance", {
          method: "POST",
          body: JSON.stringify(post_req),
          credentials: "same-origin",
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        });

        // Remove the outer most div tag that has the span's annotation title (the small text above)
        $(spanElem).find("div").first().remove();
        // Remove the close tag
        $(spanElem).find("div").last().remove();
        // Remove the span highlight by unwrapping the inner text
        $(spanElem.firstChild).unwrap();
      }

      function getEarlierChildren(n, skipMe) {
        var r = [];
        for (; n; n = n.nextSibling)
          if (n.nodeType == 1 && n != skipMe) r.push(n);
          else if (n == skipMe) break;
        return r;
      }

      function getEarlierSiblings(n) {
        return getEarlierChildren(n.parentNode.firstChild, n);
      }

      function getTextOfSpans(elems) {
        text = "";
        for (i = 0; i < elems.length; i++) {
          //console.log(elems[i].textContent)

          e = elems[i].cloneNode(true);
          console.log("e", e);
          // Delete all the nested <div> elements with jquery to get the plain text
          $(e).find("div").remove();
          console.log("sib text", e.textContent);
          text += " " + e.textContent;
        }

        return text.trim();
      }

      function getSelectionIndices() {
        // Get the user selection
        var selection = window.getSelection();

        if (selection.rangeCount === 0) {
          return { start: -1, end: -1 }; // No selection
        }

        // Get the range object representing the selected portion
        var range = selection.getRangeAt(0);

        // Get the left most element in the selection
        var leftMost = range.startContainer;
        var leftSibs = getEarlierSiblings(leftMost);
        console.log("leftSibs", leftSibs);
        // Get the text of the left elements
        var leftText = getTextOfSpans(leftSibs);

        // Find the parent div element with name "instance_text" using jquery
        var parentDiv = $(range.commonAncestorContainer).closest(
          'div[name="instance_text"]'
        )[0];
        //console.log('parentDiv', parentDiv)

        if (!parentDiv) {
          return { start: -2, end: -2 }; // Not within a <div class="context_text">
        }

        //console.log('parentDiv')
        //console.dir(parentDiv.innerHTML)

        // Make a copy of the parent div to manipulate
        parentDiv = parentDiv.cloneNode(true);

        // Create a temporary Range to find the offset relative to the parent div
        console.log(
          "before delete",
          range.startContainer,
          range.startOffset,
          range.endOffset
        );
        var tempRange = document.createRange();
        tempRange.setStart(parentDiv, 0);
        tempRange.setEnd(range.startContainer, range.startOffset);

        // Delete all the nested <div> elements with jquery to get the plain text
        $(parentDiv).find("div").remove();

        console.log("after delete");
        console.dir(parentDiv.innerHTML);
        console.log("text");
        console.dir(parentDiv.textContent);

        console.log(
          "after delete",
          range.startContainer,
          range.startOffset,
          range.endOffset
        );

        // Get the starting offset of the selection within the parent div
        var div = document.createElement("div");
        div.appendChild(tempRange.cloneContents());

        var s = range.startContainer.textContent.toString();
        //console.log(`text: "${text}"`);
        var whitespaceOffset = s.length - s.trimStart().length;

        var startOffset = range.startOffset - whitespaceOffset;

        if (leftText.length > 0) {
          // Add 1 for space between the left text and the selected text
          startOffset += leftText.length + 1;
        }

        // Get the length of the selected text
        var selectedTextLength = range.toString().length;

        // Calculate the ending offset of the selection within the parent div
        var endOffset = startOffset + selectedTextLength;

        return { start: startOffset, end: endOffset };
      }

      function surroundSelection(schema, labelName, title, selectionColor) {
        //var span = document.createElement("span");
        //span.style.fontWeight = "bold";
        //span.style.color = "green";

        // Check that this wasn't a spurious click or the click for the delete button which
        // also seems to trigger this selection event
        if (window.getSelection().rangeCount == 0) {
          return;
        }
        var range = window.getSelection().getRangeAt(0);

        // console.dir(window.getSelection())

        // console.log(range.startOffset, range.endOffset)
        if (range.startOffset == range.endOffset) {
          return;
        }

        // Get the instance id
        var instance_id = document.getElementById("instance_id").value;

        if (window.getSelection) {
          var sel = window.getSelection();

          // console.dir(sel);

          // Check that we're labeling something in the instance text that
          // we want to annotate
          if (!sel.anchorNode.parentElement) {
            return;
          }

          // TODO: check that we're not nesting a span of the same time here

          // Otherwise, we're going to be adding a new span annotation, if
          // the user has selected some non-empty part of the text
          if (sel.rangeCount && sel.toString().trim().length > 0) {
            // Get the selection text as a string
            var selText = window.getSelection().toString().trim();
            console.log("selText1", selText);

            // Get the start and end offsets of the selection
            var range = sel.getRangeAt(0);
            var start = range.startOffset;
            var end = range.endOffset;
            // Get the generic text between the start and end offsets
            var text = range.startContainer.textContent.substring(start, end);
            var s = range.startContainer.textContent.toString();
            //console.log(`text: "${text}"`);
            var whitespaceOffset = s.length - s.trimStart().length;
            //console.log('whitespaceOffset', whitespaceOffset);

            /*
                  console.log(`full range text "${range.startContainer.textContent}`);
                  console.log('start', start);
                  console.log('end', end);
                  console.log('start', start - whitespaceOffset);
                  console.log('end', end - whitespaceOffset);
                  console.log(`ranged substring "${text}"`);
                    */
            // Get the raw text of the selection without any HTML
            var sel = window.getSelection();
            var range = sel.getRangeAt(0);
            var div = document.createElement("div");
            div.appendChild(range.cloneContents());
            var selText = div.innerHTML;
            //console.log(`selText2: "${selText}"`);

            tsc = selectionColor.replace(")", ", 0.25)");

            var span = document.createElement("span");
            span.className = "span_container";
            span.setAttribute("selection_label", labelName);
            span.setAttribute("style", "background-color:rgb" + tsc + ";");

            var label = document.createElement("div");
            label.className = "span_label";
            label.textContent = title;
            label.setAttribute(
              "style",
              "background-color:white;" +
                "border:2px solid rgb" +
                selectionColor +
                ";"
            );

            var delLabel = document.createElement("div");
            delLabel.className = "span_close";
            delLabel.textContent = "×";
            delLabel.setAttribute("style", "background-color:white;");
            //                  + "border:2px solid rgb" + selectionColor + ";");
            delLabel.onclick = function () {
              deleteSpanAnnotation(
                span,
                schema,
                labelName,
                title,
                range.startOffset,
                range.endOffset
              );
            };

            // Get the offsets
            startEnd = getSelectionIndices();
            console.log("startEnd", startEnd);
            state = [
              {
                name: labelName,
                start: startEnd["start"],
                end: startEnd["end"],
                title: title,
                value: sel.toString(),
              },
            ];

            // console.log('adding new annotation', range.startOffset, range.endOffset, sel.toString())

            // Package this all up in a post request to the server's updateinstance endpoint
            var post_req = {
              type: "span",
              schema: schema,
              state: state,
              instance_id: instance_id,
            };

            // Send the post request
            fetch("/updateinstance", {
              method: "POST",
              body: JSON.stringify(post_req),
              credentials: "same-origin",
              headers: {
                "Content-type": "application/json; charset=UTF-8",
              },
            });

            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
            span.appendChild(label);
            span.appendChild(delLabel);

            // Clear the current selection
            sel.empty();
          }
        }
      }

      function changeSpanLabel(
        checkbox,
        schema,
        spanLabel,
        spanTitle,
        spanColor
      ) {
        // Listen for when the user has highlighted some text (only when the label is checked)
        document.onmouseup = function (e) {
          var senderElement = e.target;
          // Avoid the case where the user clicks the delete button
          if (senderElement.getAttribute("class") == "span_close") {
            e.stopPropagation();
            return true;
          }
          if (checkbox.checked) {
            surroundSelection(schema, spanLabel, spanTitle, spanColor);
          }
        };
      }

      // Listen for when the user has highlighted some text
      // document.onmouseup = function() { surroundSelection("Undefined"); }
    </script>
    <script>
      function barValue(range, sibling) {
        // function used to obtain value for range input
        sibling.value = range.value;
        //var x = document.getElementsByClassName(range.className);
        //var i;
        //for (i=0: i < x.length; i++) {
        //    if(x[i].value != range.value) x[i]
        //}
      }
    </script>

    <script>
      function onlyOne(checkbox) {
        // this function is used for the single-choice setting
        //alert(checkbox.className)
        var x = document.getElementsByClassName(checkbox.className);
        var i;
        for (i = 0; i < x.length; i++) {
          if (x[i].value != checkbox.value) x[i].checked = false;
        }
      }
    </script>

    <script>
      function whetherNone(checkbox) {
        // this function is used to uncheck all the other labels when "None" is checked
        //alert(checkbox.className)
        var x = document.getElementsByClassName(checkbox.className);
        var i;
        for (i = 0; i < x.length; i++) {
          if (checkbox.value == "None" && x[i].value != "None")
            x[i].checked = false;
          if (checkbox.value != "None" && x[i].value == "None")
            x[i].checked = false;
        }
      }
    </script>

    <script>
      function click_to_next() {
        // Gacky code to simulate the submit button as a keyboard event
        // and not have two separate paths to handle keyboard and mouse
        // events
        var e = $.Event("keyup");
        e.key = "ArrowRight";

        get_new_instance(e);
      }

      function click_to_prev() {
        // Gacky code to simulate the submit button as a keyboard event
        // and not have two separate paths to handle keyboard and mouse
        // events
        var e = $.Event("keyup");
        e.key = "ArrowLeft";

        get_new_instance(e);
      }
    </script>

    {{annotation}}

    <script>
      /*
      window.onunload = check_close;
      function check_close() {
          // console.error("session closed");
          var post_req = {
              is_close: "closed"
          }
          post(post_req);
      }
          */
    </script>

    <script>
      // Set the date we're counting down to
      var countDownDate = new Date().getTime();

      // Update the count down every 1 second
      var x = setInterval(function () {
        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = now - countDownDate;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor(
          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        var total_seconds = Math.floor(distance / 1000);

        // Output the result in an element with id="timecounter"

        //document.getElementById("timecounter").innerHTML = "Time spent: " + days + "d " + hours + "h "
        //    + minutes + "m " + seconds + "s ";

        // TODO: add configurations for alert message and maximum time spent on each instance
        // If the count down is over, write some text

        var alert_time_each_instance = document.getElementById(
          "alert_time_each_instance"
        ).value;
        if (total_seconds % alert_time_each_instance == 0) {
          //clearInterval(x);
          //document.getElementById("timecounter").innerHTML = "EXPIRED";
          alert(
            "You have spent " + total_seconds + " seconds on this instance"
          );
        }
      }, 1000);
    </script>

    <script>
      // We submit a new post to the same (user/annotate) endpoint
      function post(params) {
        // Package this all up in a post request to the server's updateinstance endpoint
        var post_req = {
          instance_id: instance_id,
        };
        for (var key in params) {
          if (params.hasOwnProperty(key)) {
            post_req[key] = params[key];
          }
        }

        // Extract inputs from the DOM and add to post_req
        $("form input, form select").each(function () {
          var input = $(this);
          var type = input.attr("type");
          var name = input.attr("name");

          if (!name) return; // skip unnamed inputs

          if (type === "checkbox" || type === "radio") {
            if (input.is(":checked")) {
              post_req[name] = true;
            }
          } else if (type === "text" || input.is("select")) {
            post_req[name] = input.val();
          } else {
            console.log("unknown input type:", type);
          }
        });

        // Send the post request and re-render the page with the new instance
        //
        // TODO: fix this the server-client protocol so we're just sending over
        // the new instance data and not the entire page
        fetch("/annotate", {
          method: "POST",
          body: JSON.stringify(post_req),
          credentials: "same-origin",
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        })
          .then((response) => {
            if (!response.ok) {
              throw new Error("Network response was not ok");
            }
            return response.text(); // Assuming the response is text/html
          })
          .then((html) => {
            // 2. Update the page content
            document.body.innerHTML = html;
            // Add all the listeners back to the new page
            watch_text_boxes();
          })
          .catch((error) => {
            console.error("Error:", error);
            // Handle errors appropriately, e.g., display an error message
          });

        /*

          // The rest of this code assumes you are not using a library.
          // It can be made less wordy if you use one.
          var form = document.createElement("form");
          form.setAttribute("method", "post");
          form.setAttribute("action", "/");

          var hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "email");
          hiddenField.setAttribute("value", document.getElementById('username').value);
          form.appendChild(hiddenField);

          for (var key in params) {
              if (params.hasOwnProperty(key)) {
                  var hiddenField = document.createElement("input");
                  hiddenField.setAttribute("type", "hidden");
                  hiddenField.setAttribute("name", key);
                  hiddenField.setAttribute("value", params[key]);

                  form.appendChild(hiddenField);
              }
          }

          // Stuff all the current annotations into attributes for processing on the server side
          $('form input, form select, form textarea').each(
              function(index){
                  var input = $(this);

                  if (input.attr('type') == 'checkbox' || input.attr('type') == 'radio') {
                      if (input.is(":checked")) {
                          // Stuff all the input fields into something for the post
                          var hiddenField = document.createElement("input");
                          hiddenField.setAttribute("type", "hidden");
                          hiddenField.setAttribute("name", input.attr('name'));
                          hiddenField.setAttribute("value", input.attr('value'));
                          form.appendChild(hiddenField);
                      }
                  }
                  else if (input.attr('type') == 'text' || input.attr('type') == 'number') {
                      var hiddenField = document.createElement("input");
                      hiddenField.setAttribute("type", "hidden");
                      hiddenField.setAttribute("name", input.attr('name'));
                      hiddenField.setAttribute("value", input[0].value);
                      form.appendChild(hiddenField);
                  }
                  else if (input.attr('type') == 'range') {
                      var hiddenField = document.createElement("input");
                      hiddenField.setAttribute("type", "hidden");
                      hiddenField.setAttribute("name", input.attr('name'));
                      hiddenField.setAttribute("value", input[0].value);
                      form.appendChild(hiddenField);
                  }
                  else if (input.attr('type') == 'select-one') {
                      //alert(input[0].value)
                      var hiddenField = document.createElement("input");
                      hiddenField.setAttribute("type", "hidden");
                      hiddenField.setAttribute("name", input.attr('name'));
                      hiddenField.setAttribute("value", input[0].value);
                      form.appendChild(hiddenField);
                  }
                  else {
                      console.log("unknown form type: \"" + input.attr('type') + "\"")
                  }
              }
          );
          */

        /*
          // Get all the highlighted text for this instance and marshall that
          // into some kind of representation for the server side
          $(".span_container").first().each(
              function(index) {

                  // we save the outerHTML to accomadate user-defined HTML inputs,
                  // otherwise we just save the plain text
                  if ($(this).parent().parent().attr("name") == "instance_text"){
                      var annotated_spans = $(this).parent().prop('outerHTML');
                  } else {
                      var annotated_spans = $(this).parent().prop('innerHTML');
                  }

                  // Due to the DJ's inability to write decent Javascript, we're
                  // fully punting on the idea of doing label preprocessing here
                  // and instead shuttling the entire HTML of the instance to
                  // the server for python-based processing. The main issue is
                  // figuring out the precise text offsets of the annotated
                  // spans while dealing with nested DOM elements.
                  var hiddenField = document.createElement("input");
                  hiddenField.setAttribute("type", "hidden");
                  hiddenField.setAttribute("name", "span-annotation");
                  hiddenField.setAttribute("value", annotated_spans);
                  form.appendChild(hiddenField);
                  //console.log(annotated_spans)
              }
          );
          */

        //document.body.appendChild(form);
        //form.submit();
      }

      /**
       * Validate if the user has completed each row for multi-rate schema
       */
      function validateForm() {
        var rows = document.querySelectorAll("tr[schema='multirate']");
        for (var i = 0; i < rows.length; i++) {
          var inputs = rows[i].querySelectorAll(
            "input[type='radio'][validation='required']"
          );
          if (inputs.length > 0) {
            var checked = Array.from(inputs).some((input) => input.checked);
          } else {
            var checked = true;
          }

          if (!checked) {
            alert("Please complete all the require fields");
            return false;
          }
        }
        return true;
      }

      /**
       * Validate if the input answers meet certain rules
       * along with any relevant key presses to request a new instance to
       * annotate.
       */
      function validate_answers() {
        // Test whether all the required labels are checked
        var inputs = document.querySelectorAll(
          "input[validation=required_label]"
        );
        for (var i = 0; i < inputs.length; ++i) {
          if (
            inputs[i].getAttribute("validation") == "required_label" &&
            inputs[i].checked == false
          ) {
            // Get the text of the legend element that contains the question
            var legend = inputs[i].closest("fieldset").querySelector("legend");
            var question = legend.textContent;

            // Get the text of the answer
            var neededAnswer = inputs[i].getAttribute("label_name");

            // Generate an alert that shows the question text and the required label
            // so the user knows what they missed
            alert(
              'The question "' +
                question +
                '" requires the label "' +
                neededAnswer +
                '" to be selected to proceed'
            );
            return false;
          }
        }

        // identify all the fieldsets and check if all the required forms are filled
        var fields = document.getElementsByTagName("fieldset");
        for (var i = 0; i < fields.length; ++i) {
          var inputs = fields[i].querySelectorAll(
            "input[validation=required], select[validation=required], textarea[validation=required]"
          );

          // continue if all there's no required inputs in the current field set
          if (inputs.length == 0) {
            continue;
          }
          //var required = true;
          // check if the current form requires inputs
          //if (inputs[0].getAttribute('validation') == 'required'){
          //    required= true;
          //}

          checked_flag = false;
          for (var j = 0; j < inputs.length; ++j) {
            // if a right_label is not selected, display an error msg and return false
            //if (inputs[j].getAttribute('validation') == 'right_label' && inputs[j].checked == false) {
            //alert(inputs[j].name + " must be selected to proceed");
            //    return false;
            //}
            // if the input is for a span annotation schema, check if the at least some span is annotated or if the
            // bad_text label is selected
            if (inputs[j].getAttribute("for_span") == "True") {
              //alert($(".span_container").length);
              if ($(".span_container").length > 0) {
                checked_flag = true;
                break;
              } else if (
                inputs[j].name.slice(-8) == "bad_text" &&
                inputs[j].checked == true
              ) {
                checked_flag = true;
                break;
              }
            }

            // if any of the labels is checked, set checked_flag as true;
            if (
              inputs[j].getAttribute("for_span") != "True" &&
              inputs[j].checked == true
            ) {
              checked_flag = true;
              break;
            }

            // if the input_type is number, text, select or textarea, check if it's empty
            // todo: the current way might not work well if there are mixed textinput and radio buttons under a sample fieldset
            if (
              inputs[j].type == "text" ||
              inputs[j].tagName == "TEXTAREA" ||
              inputs[j].type == "number" ||
              inputs[j].type == "select-one"
            ) {
              if (inputs[j].value.length == 0) {
                alert(inputs[j].name + " must be completed to proceed");
                return false;
              } else {
                checked_flag = true;
              }
            }
          }

          // Get the text of the legend element that contains the question
          //
          // TODO: check that this works with questions for the text input fields
          var legend = inputs[i].closest("fieldset").querySelector("legend");
          var question = legend.textContent;

          // if this form requires inputs, but nothing is checked, display an error msg and return false
          if (checked_flag == false) {
            alert("You must answer the following item to proceed: " + question);
            return false;
          }
          //alert(instance_obj.id)
        }
        return true;
      }

      /**
       * Sends the current state of the instance's annotation to the server,
       * along with any relevant key presses to request a new instance to
       * annotate.
       */
      function get_new_instance(event) {
        var x = event.key;
        var action = "";
        var ism = "";

        //console.log(x)
        //console.log(firstname)
        //console.log(lastname)
        if (x == "ArrowLeft") {
          // Spacebar
          action = "prev_instance";
        } else if (x == "ArrowRight") {
          //console.log("validateForm", validateForm())
          //console.log("validate_answers", validate_answers())
          if (validateForm() == true && validate_answers() == true) {
            action = "next_instance";
          } else {
            return;
          }
        } else {
          // console.log("Unknown key press", event)
          return;
        }

        var instance_id = document.getElementById("instance_id").value;
        var time_string = document.getElementById("timecounter").innerHTML; //get time spent on this instance
        //time_string = '-1'
        var post_req = {
          label: ism,
          action: action,
          instance_id: instance_id,
          behavior_time_string: time_string,
        };

        console.log("post_req: ", post_req);
        // Sends the post message to the server which will let us update the
        // currently displayed content
        post(post_req);
      }
    </script>

    <script>
      $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

    {{var_elems | safe}}

    <!-- Header navigation bar -->
    <nav
      class="navbar sticky-top shadow-sm"
      style="
        background-color: var(--primary-color);
        padding: 0.75rem 1rem;
        margin-bottom: 1.5rem;
      "
    >
      <div class="container-fluid d-flex align-items-center">
        <!-- Task name (left aligned) -->
        <div class="navbar-brand">
          <span
            class="fw-bold"
            style="color: var(--light-color); font-size: 1.25rem"
            >{{annotation_task_name}}</span
          >
        </div>

        <!-- Middle section with three elements -->
        <div
          class="d-flex align-items-center justify-content-center flex-grow-1 gap-4"
        >
          <!-- 1. Annotation codebook link -->
          <div>{{annotation_codebook}}</div>

          <!-- 2. Progress counter -->
          <div
            class="d-flex align-items-center"
            style="color: var(--light-color); margin-right: 40px"
          >
            <span
              >Progress:
              <span class="fw-medium">{{finished}}/{{total_count}}</span></span
            >
          </div>

          <!-- 3. Jump to item form -->
          <div style="margin-left: 40px">
            <form
              action="/go_to"
              method="post"
              class="d-flex align-items-center"
            >
              <input
                type="hidden"
                name="firstname"
                id="a"
                value="{{firstname}}"
              />
              <input
                type="hidden"
                name="lastname"
                id="b"
                value="{{lastname}}"
              />
              <input type="hidden" name="email" id="c" value="{{username}}" />
              <input type="hidden" name="src" id="src" value="go_to" />
              <label
                for="go_to"
                class="me-2"
                style="color: var(--light-color); margin-bottom: 0"
                >Go to:</label
              >
              <input
                type="number"
                name="go_to"
                id="go_to"
                class="form-control form-control-sm me-2"
                style="
                  width: 70px;
                  height: 31px;
                  border: none;
                  border-radius: var(--radius);
                "
                value=""
                onfocusin="user_input()"
                onfocusout="user_input_leave()"
                max="{{total_count}}"
                min="0"
                required
              />
              <button
                type="submit"
                class="shadcn-button"
                style="
                  height: 31px;
                  line-height: 1;
                  padding: 0 0.75rem;
                  background-color: var(--light-color);
                  color: var(--primary-color);
                  border: none;
                "
              >
                Go
              </button>
            </form>
          </div>
        </div>

        <!-- User info and logout (right aligned) -->
        <div
          class="d-flex align-items-center"
          style="
            background-color: rgba(255, 255, 255, 0.15);
            padding: 0.5rem 1rem;
            border-radius: var(--radius);
          "
        >
          <div class="me-3" style="color: var(--light-color)">
            <span
              >Logged in as <span class="fw-medium">{{username}}</span></span
            >
          </div>
          <div
            class="border-start"
            style="
              padding-left: 20px;
              height: 24px;
              display: flex;
              align-items: center;
            "
          >
            <a
              href="/logout"
              class="shadcn-button"
              style="
                background-color: var(--light-color);
                color: var(--primary-color);
                height: auto;
                padding: 0.25rem 0.75rem !important;
                font-size: 0.875rem;
                min-width: 60px;
                text-align: center;
                border: none;
                text-decoration: none;
              "
              >Logout</a
            >
          </div>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div id="task_layout" class="shadcn-card mb-4">
        <div class="shadcn-card-content">
          <!--- LAYOUT GOES BELOW HERE --->

          {{ TASK_LAYOUT }}

          <!--- LAYOUT GOES ABOVE  --->
        </div>
      </div>
      <!-- Test -->
      <!-- <div id="task_layout" class="shadcn-card mb-4">
        <div class="shadcn-card-content">
          <strong>AI Label Suggestion</strong>
          <div>{{ ai }}</div>
        </div>
      </div> -->
      <!-- Test -->

      <div class="my-4">
        <!-- Reorganized button layout with 3 columns -->
        <div class="d-flex justify-content-between align-items-center">
          <!-- Statistics button (left) -->
          <div>
            <a
              role="button"
              href="#"
              class="shadcn-button shadcn-button-outline openbtn"
              target_id="Statpanel"
              width="475px"
              onclick="openNav(this.getAttribute('target_id'),this.getAttribute('width'))"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-bar-chart-line me-1"
                viewBox="0 0 16 16"
              >
                <path
                  d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"
                />
              </svg>
              Statistics
            </a>
          </div>

          <!-- Previous/Next buttons (center) -->
          <div>
            <a
              class="shadcn-button shadcn-button-outline me-2"
              href="#"
              role="button"
              onclick="click_to_prev()"
              style="vertical-align: middle"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-arrow-left"
                viewBox="0 0 16 16"
                style="
                  display: inline-block;
                  vertical-align: middle;
                  margin-right: 0.25rem;
                "
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                />
              </svg>
              <span style="display: inline-block; vertical-align: middle"
                >Previous</span
              >
            </a>
            <a
              class="shadcn-button shadcn-button-primary"
              href="#"
              role="button"
              onclick="click_to_next()"
              style="vertical-align: middle"
            >
              <span style="display: inline-block; vertical-align: middle"
                >Next</span
              >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-arrow-right"
                viewBox="0 0 16 16"
                style="
                  display: inline-block;
                  vertical-align: middle;
                  margin-left: 0.25rem;
                "
              >
                <path
                  fill-rule="evenodd"
                  d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
                />
              </svg>
            </a>
          </div>

          <!-- Help button (right) -->
          <div>
            <a
              role="button"
              href="#"
              class="shadcn-button shadcn-button-outline openbtn"
              target_id="mySidepanel"
              onclick="openNav(this.getAttribute('target_id'))"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-question-circle me-1"
                viewBox="0 0 16 16"
              >
                <path
                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
                />
                <path
                  d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"
                />
              </svg>
              Help
            </a>
          </div>
        </div>
      </div>

      <hr style="color: var(--border)" />
      <footer
        class="py-2 text-center"
        style="font-size: 0.75rem; color: var(--muted-foreground)"
      >
        Copyright &copy; 2025
        <a
          href="https://blablablab.si.umich.edu/"
          style="color: var(--primary); text-decoration: none"
          >Blablablab</a
        >
        <span class="mx-2">|</span>
        <a
          href="https://github.com/davidjurgens/potato"
          style="color: var(--primary); text-decoration: none"
          >Chat with us on GitHub</a
        >
        <span class="mx-2">|</span>
        <a
          href="https://github.com/davidjurgens/potato#cite-us"
          style="color: var(--primary); text-decoration: none"
          >Cite Us</a
        >
      </footer>
    </div>

    <script>
      /* Set the width of the sidebar to 250px (show it) */
      function openNav(target_id, width = "350px") {
        document.getElementById(target_id).style.width = width;
      }

      /* Set the width of the sidebar to 0 (hide it) */
      function closeNav(target_id) {
        document.getElementById(target_id).style.width = "0";
      }

      function closeNav2(target_id) {
        // document.getElementById(target_id).style.height = "20px";
        console.error(document.getElementById(target_id).style.display);
        if (
          document.getElementById(target_id).style.display == "block" ||
          document.getElementById(target_id).style.display == ""
        ) {
          document.getElementById(target_id).style.display = "none";
          localStorage.setItem("show_instructions", "false");
        } else {
          document.getElementById(target_id).style.display = "block";
          localStorage.setItem("show_instructions", "true");
        }
      }

      /* Keep the instructions hidden/shown across instance transitions based on
         what the user had selected */
      window.addEventListener("load", function () {
        var show = localStorage.getItem("show_instructions");
        if (document.getElementById("instructions")) {
          if (show === "true") {
            document.getElementById("instructions").style.display = "block";
          } else {
            document.getElementById("instructions").style.display = "none";
          }
        }
      });

      function watch_text_boxes() {
        let timer;
        const waitTime = 1000;

        var text_boxes = document.querySelectorAll("input[type=text]");
        for (var i = 0; i < text_boxes.length; i++) {
          //console.log('adding event listener to text box');
          //console.log(text_boxes[i]);
          text_boxes[i].addEventListener("input", function (event) {
            console.log("text box input event");
            clearTimeout(timer);
            timer = setTimeout(() => {
              registerTextAnnotation(event.target);
            }, waitTime);
          });
        }

        var text_areas = document.querySelectorAll("textarea");
        //console.log('num text_areas: ' + text_areas.length);
        for (var i = 0; i < text_areas.length; i++) {
          //console.log('adding event listener to text area');
          //console.dir(text_areas[i]);
          text_areas[i].addEventListener("input", function (event) {
            //console.log('text area input event')
            clearTimeout(timer);
            timer = setTimeout(() => {
              registerTextAnnotation(event.target);
            }, waitTime);
          });
        }
      }
      watch_text_boxes();
    </script>
  </body>
</html>