Repository: ufal/factgenie (language: python)

Issue:
Newlines are poorly rendered in annotation page
On the browsing page, it works great, but on the annotation page,  the phrase `use\n\nFitrzroy` is split as a single word. See the screenshots below.

Documented at commit 825c7de970c757a3fff232cfecc2627ec50e103c


<img width="1710" alt="Screenshot 2024-08-30 at 14 26 20" src="https://github.com/user-attachments/assets/d1c0d12a-b931-4cf7-9ad9-e36d43a6bb6e">
<img width="1705" alt="Screenshot 2024-08-30 at 14 25 48" src="https://github.com/user-attachments/assets/24ccecb1-76fe-4819-80d1-dc68db8220b1">




Discussion / hints:

Fix patch:
diff --git a/.gitignore b/.gitignore
index efcfe413..835ee0d6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,4 +16,5 @@ build
 venv/
 wiki
 factgenie/annotations
-factgenie/templates
\ No newline at end of file
+factgenie/templates/campaigns/*
+!factgenie/templates/campaigns/*.*
\ No newline at end of file
diff --git a/factgenie/config/crowdsourcing/example.yaml b/factgenie/config/crowdsourcing/example.yaml
index 4cb7ff0a..a0426e61 100644
--- a/factgenie/config/crowdsourcing/example.yaml
+++ b/factgenie/config/crowdsourcing/example.yaml
@@ -8,25 +8,26 @@ annotation_span_categories:
   - name: "Other"
     color: "#bbbbbb"
 examples_per_batch: 10
+annotation_granularity: words
 sort_order: dataset-level
 idle_time: 120
 has_display_overlay: true
 annotator_instructions: |
   In this task, you will annotate outputs of an automatic text generation system. For each example, you will see **data** on the left side and the corresponding generated **text** on the right side. Your task is to **annotate errors** in the text with respect to the data.
 
-  There are five types of errors that you can mark in the generated text:
+  There are four types of errors that you can mark in the generated text:
 
   1.  <span style="background-color: #FFBCBC"><b>Incorrect fact</b></span>: The fact in the text contradicts the data.
   2.  <span style="background-color: #e9d2ff"><b>Not checkable</b></span> : The fact in the text cannot be checked given the data.
   3.  <span style="background-color: #FFF79F"><b>Misleading</b></span>: The fact in the text is misleading in the given context.
   4.  <span style="background-color: #bbbbbb"><b>Other</b></span> : The text is problematic for another reason, e.g. grammatically or stylistically incorrect, irrelevant, or repetitive.
 
-  You can annotate the errors by dragging your mouse over the text, highlighting the error span.
+  You can annotate the errors by selecting the appropriate error category and dragging your mouse over the text, highlighting the error span.
   
   Once you think you have marked all the errors present in the text, click the **✅ Mark example as complete** button (you can still update the annotation later). 
   
   You will be able to submit the annotations once they are all are marked as complete.
-annotator_prompt: "Please annotate all the errors in the text:"
+annotator_prompt: "Drag your mouse over the text to annotate the selected category:"
 final_message: |
   Your annotations have been submitted.
 
diff --git a/factgenie/loaders/logicnlg.py b/factgenie/loaders/logicnlg.py
index 50124fe6..ca68f4ac 100644
--- a/factgenie/loaders/logicnlg.py
+++ b/factgenie/loaders/logicnlg.py
@@ -66,7 +66,10 @@ def load_generated_outputs(self, output_path):
                 for table_out in j["generated"]:
                     if table_out["table_id"] != current_table_id:
                         current_table_id = table_out["table_id"]
-                        outputs[split][setup_id]["generated"].append({"out": "\\n\\n".join(all_claims)})
+                        prefixed_claims = [] 
+                        for i, claim in enumerate(all_claims):
+                            prefixed_claims.append(f"----- {i+1} ----- \n{claim}")
+                        outputs[split][setup_id]["generated"].append({"out": "\n\n".join(prefixed_claims)})
                         all_claims = []
 
                     all_claims.append(table_out["out"])
diff --git a/factgenie/main.py b/factgenie/main.py
index f4e1c0a8..9f67f9e4 100755
--- a/factgenie/main.py
+++ b/factgenie/main.py
@@ -417,7 +417,6 @@ def render_example():
         return jsonify({"error": f"Error\n\t{e}\nwhile getting example data: {dataset_id=}, {split=}, {example_idx=}"})
 
 
-
 @app.route("/export_annotations", methods=["GET", "POST"])
 @login_required
 def export_annotations():
diff --git a/factgenie/static/css/brush.png b/factgenie/static/css/brush.png
new file mode 100644
index 00000000..84bfff1d
Binary files /dev/null and b/factgenie/static/css/brush.png differ
diff --git a/factgenie/static/css/custom.css b/factgenie/static/css/custom.css
index b076b21b..08383fd5 100755
--- a/factgenie/static/css/custom.css
+++ b/factgenie/static/css/custom.css
@@ -147,7 +147,14 @@ pre {
 }
 
 #outputarea {
-    margin-top: 20px;
+    /* margin-top: 20px; */
+    /* font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
+    padding: 10px;
+    /* font-size: 16px; */
+}
+
+#outputarea .paragraph {
+    cursor: url(brush.png), grab !important;
 }
 
 #pipelinearea {
@@ -306,12 +313,22 @@ pre {
 }
 
 .output-box {
-    padding: 20px;
-    border: 1px solid #ddd;
-    border-radius: 2%;
-    margin: 10px;
-    position: relative;
-    font-size: smaller;
+    /* padding: 20px; */
+    /* border: 1px solid #ddd;
+    border-radius: 2%; */
+    margin-bottom: 10px;
+    /* position: relative; */
+    /* font-size: 16px !important; */
+}
+
+.card-text>pre {
+    font-size: 14px !important;
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+}
+
+.output-box .card-body {
+    padding: 5px;
 }
 
 .annotate-box {
@@ -341,14 +358,14 @@ pre {
 
 
 
-.output-box>label {
+/* .output-box>label {
     position: absolute;
     font-size: smaller;
     top: -17px;
     padding-left: 3px;
     padding-right: 3px;
     background-color: white;
-}
+} */
 
 
 .select2-search--inline {
@@ -754,7 +771,9 @@ a:hover {
 }
 
 #sidepanel-content {
-    padding: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 15px;
 }
 
 
@@ -833,4 +852,25 @@ a:hover {
 .CodeMirror,
 .CodeMirror-scroll {
     min-height: 150px !important;
+}
+
+.btn-err-cat-label {
+    box-shadow: 0 2px 4px darkslategray;
+    color: #4a4a4a;
+    border-color: transparent !important;
+    padding: 2px 5px !important;
+}
+
+.btn-err-cat-label:not(.active) {
+    filter: opacity(0.4);
+    /* border-color: transparent !important; */
+}
+
+.btn-err-cat-label.active {
+    font-weight: bold;
+}
+
+.btn-ann-select {
+    /* box-shadow: 0 1px 2px darkslategray; */
+    border: 1px solid #ddd;
 }
\ No newline at end of file
diff --git a/factgenie/static/js/factgenie.js b/factgenie/static/js/factgenie.js
index 829cedc6..7bd32bc2 100644
--- a/factgenie/static/js/factgenie.js
+++ b/factgenie/static/js/factgenie.js
@@ -9,7 +9,7 @@ var generated_outputs = window.generated_outputs;
 var mode = window.mode;
 var examples_cached = {};
 var sizes = mode == "annotate" ? [50, 50] : [66, 33];
-var selected_ann = null;
+var selected_campaigns = [];
 
 
 if (mode == "annotate") {
@@ -61,7 +61,7 @@ function randomBtn() {
 function goToAnnotation(page) {
     $(".page-link").removeClass("bg-active");
     $(`#page-link-${page}`).addClass("bg-active");
-    saveCurrentOnly();
+    saveCurrentAnnotations();
     showAnnotation();
 }
 
@@ -138,7 +138,7 @@ function loadAnnotations() {
 
                 for (const [annotation_idx, data] of Object.entries(examples_cached)) {
 
-                    var p = new Paragraph({ 'text': data.generated_outputs.generated });
+                    var p = new Paragraph({ 'text': data.generated_outputs.generated, 'granularity': metadata.config.annotation_granularity });
 
                     paragraphs[`p${annotation_idx}`] = p;
                     regions[`p${annotation_idx}`] = `#out-text-${annotation_idx}`;
@@ -180,6 +180,13 @@ function loadAnnotations() {
 }
 
 function submitAnnotations(campaign_id) {
+    // remove `words` from the annotations: they are only used by the YPet library
+    for (const example of annotation_set) {
+        for (const annotation of example.annotations) {
+            delete annotation.words;
+        }
+    }
+
     $.post({
         url: `${url_prefix}/submit_annotations`,
         contentType: 'application/json', // Specify JSON content type
@@ -207,16 +214,14 @@ function collectFlags() {
     return flags;
 }
 
-function saveCurrentOnly() {
+function saveCurrentAnnotations() {
     var collection = YPet[`p${example_idx}`].currentView.collection.parentDocument.get('annotations').toJSON();
     annotation_set[example_idx]["annotations"] = collection;
 }
 
 
 function markAnnotationAsComplete() {
-    var collection = YPet[`p${example_idx}`].currentView.collection.parentDocument.get('annotations').toJSON();
-    annotation_set[example_idx]["annotations"] = collection;
-    console.log(example_idx);
+    saveCurrentAnnotations();
     annotation_set[example_idx]["flags"] = collectFlags();
 
     $('#page-link-' + example_idx).removeClass("bg-incomplete");
@@ -339,12 +344,13 @@ function changeExample(dataset, split, example_idx) {
 
 function getAnnotatedOutput(output, campaign_id) {
     const setup_id = output.setup.id;
+    // replace newlines with any spaces around them with <br>
     const content = output.generated.replace(/\\n/g, '<br>');
 
     // if the campaign_id is in output.annotations, show the annotated content
     const annotations_campaign = output.annotations.filter(a => a.metadata.id == campaign_id);
 
-    var placeholder = $('<div>', { id: `out-${setup_id}-${campaign_id}-placeholder`, class: `font-mono out-placeholder out-${campaign_id}-placeholder` });
+    var placeholder = $('<pre>', { id: `out-${setup_id}-${campaign_id}-placeholder`, class: `font-mono out-placeholder out-${campaign_id}-placeholder` });
     var annotated_content;
 
     if (annotations_campaign.length > 0) {
@@ -353,19 +359,19 @@ function getAnnotatedOutput(output, campaign_id) {
 
         annotated_content = annotateContent(content, annotations, annotation_span_categories);
     } else {
-        annotated_content = content;
-
-        if (campaign_id != "None") {
+        // we do not have outputs for the particular campaign -> grey out the text
+        if (campaign_id != "original") {
             placeholder.css("color", "#c2c2c2");
         }
-
+        annotated_content = content;
     }
     placeholder.html(annotated_content);
-    placeholder.hide();
-
+    // placeholder.hide();
     return placeholder;
 }
 
+// Our custom function to highlight the text spans using the collected annotations
+// Here we do *not* use the YPet library, but directly work with HTML
 function annotateContent(content, annotations, annotation_span_categories) {
     let offset = 0; // Track cumulative offset
     const annotationSet = annotations.annotations;
@@ -384,7 +390,7 @@ function annotateContent(content, annotations, annotation_span_categories) {
             return;
         }
         const color = annotation_span_categories[annotationType].color;
-        const text = annotation.text;
+        const text = annotation.text.trimEnd();
 
         const start = annotation.start + offset;
         const end = start + text.length;
@@ -410,21 +416,50 @@ function annotateContent(content, annotations, annotation_span_categories) {
 }
 
 function updateDisplayedAnnotations() {
-    const annotator = $("#annotations-select").val();
-    // if `selected_ann` contains one of the values in the selectbox, show it
-    // otherwise, show the first one
-    // const annotator = selected_ann || $("#annotations-select").val();
-    // selected_ann = annotator;
-
+    const activeButtons = $('.btn-ann-select.active');
+    selected_campaigns = activeButtons.map(function () {
+        return $(this).data('ann');
+    }).get();
     // hide all placeholders
-    $(".out-placeholder").hide();
-
-    // show the selected annotator
-    $(`.out-${annotator}-placeholder`).show();
+    $(".output-box").hide();
 
+    // if no campaign ids, show the original output
+    if (selected_campaigns.length == 0) {
+        $(".box-original").show();
+    }
+    for (const campaign_id of selected_campaigns) {
+        // show the selected annotator
+        $(`.box-${campaign_id}`).show();
+    }
     enableTooltips();
 }
 
+
+function createOutputBox(content, campaign_id, setup) {
+    const setup_id = setup.id;
+    const model = setup.model;
+
+    var card = $('<div>', { class: `card output-box generated-output-box box-${setup_id} box-${campaign_id} box-${setup_id}-${campaign_id}` });
+
+    var annotationBadge = (campaign_id !== "original") ? `<span class="small"><i class="fa fa-pencil"></i> ${campaign_id}</span>` : ""
+    var headerHTML = `<div class="d-flex justify-content-between">
+    <span class="small">${setup_id}</span>
+    ${annotationBadge}
+    </div>
+    `
+
+    var cardHeader = $('<div>', { class: "card-header small" }).html(headerHTML);
+    var cardBody = $('<div>', { class: "card-body" });
+    var cardTitle = $('<h5>', { class: "card-title" }).text(model);
+    var cardText = $('<div>', { class: "card-text" }).html(content);
+
+    cardBody.append(cardTitle);
+    cardBody.append(cardText);
+    card.append(cardHeader);
+    card.append(cardBody);
+    return card;
+}
+
 function createOutputBoxes(generated_outputs) {
     // clear the output area
     $("#outputarea").empty();
@@ -433,7 +468,6 @@ function createOutputBoxes(generated_outputs) {
     generated_outputs.sort(function (a, b) {
         return a.setup.id.localeCompare(b.setup.id);
     });
-    const selectBox = $("#annotations-select");
 
     // find all campaign ids in output annotations
     const campaign_ids = new Set();
@@ -443,38 +477,58 @@ function createOutputBoxes(generated_outputs) {
             campaign_ids.add(annotation.metadata.id);
         });
     });
-    campaign_ids.add("None");
-
-    for (const output of generated_outputs) {
-        const setup_id = output.setup.id;
-        // const model = output.setup.model;
-
-        var label = $('<label>', { class: "label-name" }).text(setup_id);
-        var output_box = $('<div>', {
-            id: `out-${setup_id}`,
-            class: `output-box generated-output-box box-${setup_id}`,
-        }).append(label);
-        output_box.appendTo("#outputarea");
-    }
-
+    const selectBox = $("#annotations-select");
     // clear the selectbox
     selectBox.empty();
 
     // add an option for each campaign id
     for (const campaign_id of campaign_ids) {
-        selectBox.append(`<option value="${campaign_id}">${campaign_id}</option>`);
+        const button = $(`<button type="button" class="btn btn-sm btn-light btn-ann-select" data-ann="${campaign_id}">${campaign_id}</button>`);
+        button.on('click', function () {
+            $(this).toggleClass('active');
+            updateDisplayedAnnotations();
+        });
+        selectBox.append(button);
+    }
+
+    if (campaign_ids.size > 0) {
+        $("#setuparea").show();
+    } else {
+        $("#setuparea").hide();
+    }
+
+    // add the annotated outputs
+    for (const output of generated_outputs) {
+        groupDiv = $('<div>', { class: `output-group box-${output.setup.id} d-inline-flex gap-2` });
+        groupDiv.appendTo("#outputarea");
+
+        plain_output = getAnnotatedOutput(output, "original");
+        card = createOutputBox(plain_output, "original", output.setup);
+        card.appendTo(groupDiv);
 
-        for (const output of generated_outputs) {
+        for (const campaign_id of campaign_ids) {
             const annotated_output = getAnnotatedOutput(output, campaign_id);
-            $(`#out-${output.setup.id}`).append(annotated_output);
+            card = createOutputBox(annotated_output, campaign_id, output.setup);
+            card.appendTo(groupDiv);
+            card.hide();
         }
     }
 
 }
 
+function showSelectedCampaigns() {
+    // if the annotator is still among the values, restore it
+    // prevent resetting to the first annotation when switching examples
+    $(".btn-ann-select").each(function () {
+        if (selected_campaigns.includes($(this).data('ann'))) {
+            $(this).addClass("active").trigger("change");
+        } else {
+            $(this).removeClass("active");
+        }
+    });
+}
+
 function fetchExample(dataset, split, example_idx) {
-    // save the current selected annotator
-    const selected_ann = $("#annotations-select").val();
     $.get(`${url_prefix}/example`, {
         "dataset": dataset,
         "example_idx": example_idx,
@@ -488,13 +542,7 @@ function fetchExample(dataset, split, example_idx) {
         $("#total-examples").html(total_examples - 1);
 
         createOutputBoxes(data.generated_outputs);
-
-        // if the annotator is still among the values, restore it
-        // prevent resetting to the first annotation when switching examples
-        if ($("#annotations-select").find(`option[value='${selected_ann}']`).length > 0) {
-            $("#annotations-select").val(selected_ann).trigger("change");
-        }
-
+        showSelectedCampaigns();
         updateDisplayedAnnotations();
     });
 }
@@ -502,7 +550,20 @@ function fetchExample(dataset, split, example_idx) {
 
 $("#dataset-select").on("change", changeDataset);
 $("#split-select").on("change", changeSplit);
-$("#annotations-select").on("change", updateDisplayedAnnotations);
+
+if (mode == "annotate") {
+    $('.btn-check').on('change', function () {
+        $('.btn-check').each(function () {
+            const label = $(`label[for=${this.id}]`);
+            if (this.checked) {
+                label.addClass('active');
+            } else {
+                label.removeClass('active');
+            }
+        });
+    });
+}
+
 
 $(document).keydown(function (event) {
     const key = event.key;
@@ -531,6 +592,13 @@ $("#data-select-area input[type='checkbox']").change(function () {
     updateSelectedDatasets();
 });
 
+$(".btn-err-cat").change(function () {
+    if (this.checked) {
+        const cat_idx = $(this).attr("data-cat-idx");
+        YPet.setCurrentAnnotationType(cat_idx);
+    }
+});
+
 function updateSelectedDatasets() {
     var selectedData = gatherCampaignData();
     $("#selectedDatasetsContent").html("<ul>" + selectedData.map(d => `<li>${d.dataset} ▸ ${d.split} ▸ ${d.setup_id}</li>`).join("\n") + "</ul>");
@@ -583,6 +651,7 @@ function gatherConfig() {
         config.hasDisplayOverlay = $("#displayOverlay").is(":checked");
         config.examplesPerBatch = $("#examplesPerBatch").val();
         config.idleTime = $("#idleTime").val();
+        config.annotationGranularity = $("#annotationGranularity").val();
         config.sortOrder = $("#sortOrder").val();
         config.annotationSpanCategories = getAnnotationSpanCategories();
         config.flags = getKeys($("#flags"));
@@ -1007,6 +1076,7 @@ function updateCrowdsourcingConfig() {
     const finalMessage = cfg.final_message;
     const examplesPerBatch = cfg.examples_per_batch;
     const idleTime = cfg.idle_time;
+    const annotationGranularity = cfg.annotation_granularity;
     const sortOrder = cfg.sort_order;
     const annotationSpanCategories = cfg.annotation_span_categories;
     const flags = cfg.flags;
@@ -1016,6 +1086,7 @@ function updateCrowdsourcingConfig() {
     finalMessageMDE.value(finalMessage);
     $("#examplesPerBatch").val(examplesPerBatch);
     $("#idleTime").val(idleTime);
+    $("#annotationGranularity").val(annotationGranularity);
     $("#sortOrder").val(sortOrder);
     $("#annotation-span-categories").empty();
 
@@ -1119,4 +1190,4 @@ if (mode == "annotate") {
     window.onbeforeunload = function () {
         return "Are you sure you want to reload the page? Your work will be lost.";
     }
-}
\ No newline at end of file
+}
diff --git a/factgenie/static/js/ypet.js b/factgenie/static/js/ypet.js
index db1964c7..03b457c8 100644
--- a/factgenie/static/js/ypet.js
+++ b/factgenie/static/js/ypet.js
@@ -11,6 +11,7 @@ Word = Backbone.RelationalModel.extend({
     start: null,
     latest: null,
     neighbor: false,
+    space_padding: '',
   }
 });
 
@@ -51,13 +52,15 @@ Annotation = Backbone.RelationalModel.extend({
   }],
 
   toggleType: function () {
-    /* Removes (if only 1 Annotation type) or changes
-     * the Annotation type when clicked after existing */
-    if (this.get('type') == YPet.AnnotationTypes.length - 1) {
-      this.destroy();
-    } else {
-      this.set('type', this.get('type') + 1);
-    }
+    // Use the current annotation type
+    this.set('type', YPet.currentAnnotationType);
+    // /* Removes (if only 1 Annotation type) or changes
+    //  * the Annotation type when clicked after existing */
+    // if (this.get('type') == YPet.AnnotationTypes.length - 1) {
+    //   this.destroy();
+    // } else {
+    //   this.set('type', this.get('type') + 1);
+    // }
   }
 });
 
@@ -75,17 +78,14 @@ AnnotationList = Backbone.Collection.extend({
   model: Annotation,
   url: '/api/v1/annotations',
 
-  sanitizeAnnotation: function (full_str, start) {
-    /* Return the cleaned string and the (potentially) new start position */
-    var str = _.str.clean(full_str).replace(/^[^a-z\d]*|[^a-z\d]*$/gi, '');
-    return { 'text': str, 'start': start + full_str.indexOf(str) };
-  },
-
   initialize: function (options) {
     this.listenTo(this, 'add', function (annotation) {
-      var ann = this.sanitizeAnnotation(annotation.get('words').pluck('text').join(' '), annotation.get('words').first().get('start'));
-      annotation.set('text', ann.text);
-      annotation.set('start', ann.start);
+      var text = annotation.get('words').map(word => word.get('text') + word.get('space_padding')).join('');
+      var start = annotation.get('words').first().get('start');
+
+      annotation.set('text', text);
+      annotation.set('start', start);
+
       this.drawAnnotations(annotation);
     });
 
@@ -111,10 +111,11 @@ AnnotationList = Backbone.Collection.extend({
   drawAnnotations: function (annotation) {
     var annotation_type = YPet.AnnotationTypes.at(annotation.get('type')),
       words_len = annotation.get('words').length;
-
     annotation.get('words').each(function (word, word_index) {
-      word.trigger('highlight', { 'color': annotation_type.get('color') });
-      if (word_index == words_len - 1) { word.set('neighbor', true); }
+      word.trigger('highlight', { 'color': annotation_type.get('color'), 'name': annotation_type.get('name') });
+      if (word_index == words_len - 1) {
+        word.set('neighbor', true);
+      }
     });
   },
 
@@ -159,20 +160,32 @@ Paragraph = Backbone.RelationalModel.extend({
   /* Required step after attaching YPet to a <p> to
    * extract the individual words */
   initialize: function (options) {
-    var step = 0,
-      space_padding,
-      word_obj,
-      text = options.text,
-      words = _.map(_.str.words(text), function (word) {
-        word_obj = {
-          'text': word,
-          'start': step,
-        }
-        space_padding = (text.substring(step).match(/\s+/g) || [""])[0].length;
-        step = step + word.length + space_padding;
-        return word_obj;
-      });
 
+    if (options.granularity == "words") {
+      var wordsArray = options.text.split(/(\s+)/).filter(function (word) { return word.replace(/\s+/g, '').length > 0; });
+    } else if (options.granularity == "chars") {
+      var wordsArray = options.text.split('').filter(function (word) { return word.replace(/\s+/g, '').length > 0; });
+    }
+    var words = [];
+    var step = 0;
+
+    for (var i = 0; i < wordsArray.length; i++) {
+      const word = wordsArray[i];
+      if (options.granularity == "words") {
+        var space_padding = (options.text.substring(step).match(/\s+/g) || [""])[0];
+      } else if (options.granularity == "chars") {
+        var space_padding = (options.text.substring(step + 1).match(/^\s+/g) || [""])[0];
+      }
+
+      words.push(new Word({
+        text: word,
+        start: step,
+        space_padding: space_padding,
+      }));
+      // Matches the first whitespace segment after the word
+      space_padding_length = space_padding.length;
+      step = step + word.length + space_padding_length;
+    }
     this.get('words').each(function (word) { word.destroy(); });
     this.get('words').add(words);
   },
@@ -182,7 +195,7 @@ Paragraph = Backbone.RelationalModel.extend({
  * Views
  */
 WordView = Backbone.Marionette.ItemView.extend({
-  template: _.template('<% if(neighbor) { %><%= text %><% } else { %><%= text %> <% } %>'),
+  template: _.template('<% if(neighbor) { %><%= text %><%= space_padding.replace(/\\n/g, "<br>") %><% } else { %><%= text %><%= space_padding.replace(/\\n/g, "<br>") %><% } %>'),
   tagName: 'span',
 
   /* These events are only triggered when over
@@ -198,7 +211,8 @@ WordView = Backbone.Marionette.ItemView.extend({
     this.listenTo(this.model, 'change:neighbor', this.render);
     this.listenTo(this.model, 'change:latest', function (model, value, options) {
       if (this.model.get('latest')) {
-        this.model.trigger('highlight', { 'color': '#FFBCBC' });
+        color = YPet.AnnotationTypes.at(YPet.currentAnnotationType).get('color');
+        this.model.trigger('highlight', { 'color': color });
       }
       if (options.force) {
         this.model.trigger('highlight', { 'color': '#fff' });
@@ -206,13 +220,19 @@ WordView = Backbone.Marionette.ItemView.extend({
     });
     this.listenTo(this.model, 'highlight', function (options) {
       this.$el.css({ 'backgroundColor': options.color });
+      this.$el.attr('title', options.name);
     });
   },
 
   /* Triggers the proper class assignment
    * when the word <span> is redrawn */
   onRender: function () {
-    this.$el.css({ 'margin-right': this.model.get('neighbor') ? '5px' : '0px' });
+    // if neighbor is true, trim the right whitespace and add it to the next span
+    if (this.model.get('neighbor')) {
+      this.$el.html(this.model.get('text') + "<span style='background-color: #FFF !important;'>" + this.model.get('space_padding').replace(/\n/g, "<br>") + "</span>");
+
+    }
+
   },
 
   /* When clicking down, make sure to keep track
@@ -267,8 +287,12 @@ WordView = Backbone.Marionette.ItemView.extend({
       words = word.collection;
 
     var selected = words.filter(function (word) { return word.get('latest') });
+
     if (selected.length == 1 && word.get('parentAnnotation')) {
-      word.get('parentAnnotation').toggleType();
+      // word.get('parentAnnotation').toggleType();
+
+      // remove annotation on click
+      word.get('parentAnnotation').destroy();
     } else {
       /* if selection includes an annotation, delete that one */
       _.each(selected, function (w) {
@@ -276,11 +300,11 @@ WordView = Backbone.Marionette.ItemView.extend({
           w.get('parentAnnotation').destroy();
         }
       })
-      word.get('parentDocument').get('annotations').create({ words: selected });
+      word.get('parentDocument').get('annotations').create({ words: selected, type: YPet.currentAnnotationType });
     };
 
     words.each(function (word) { word.set('latest', null); });
-  }
+  },
 
 });
 
@@ -375,6 +399,15 @@ WordCollectionView = Backbone.Marionette.CollectionView.extend({
 });
 
 YPet = new Backbone.Marionette.Application();
+
+
+YPet.currentAnnotationType = 0; // Default to the first annotation type
+
+YPet.setCurrentAnnotationType = function (typeIndex) {
+  YPet.currentAnnotationType = typeIndex;
+};
+
+
 // YPet.AnnotationTypes = new AnnotationTypeList([
 //   { name: 'Disease', color: '#00ccff' },
 //   { name: 'Gene', color: '#22A301' },
diff --git a/factgenie/templates/about.html b/factgenie/templates/about.html
index c73285e6..88cf38b8 100755
--- a/factgenie/templates/about.html
+++ b/factgenie/templates/about.html
@@ -12,33 +12,35 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
-
-<div class="container w-50 mt-5">
-  <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>
-  <div id="about-info" class="area-content">
-    <p><img src=" {{ host_prefix }}/static/img/genie.png" width="25px">
-      <span style="margin-left: 5px; font-weight: bold;">factgenie</span> is a toolkit for visualizing and annotating
-      errors in LLM outputs.
-    </p>
-
-    <p>
-      Please report any issues at <a
-        href="https://github.com/kasnerz/factgenie">https://github.com/kasnerz/factgenie</a>.
-    </p>
-
-    <p>Available as open-source under MIT License.
-    </p>
-
-    <p>
-      © 2023 <a href="https://ufal.mff.cuni.cz/">
-        Institute of Formal and Applied
-        Linguistics, Charles University</a>.
-    </p>
-
+<body>
+  {% include 'navbar.html' %}
+
+  <div class="container w-50 mt-5">
+    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>
+    <div id="about-info" class="area-content">
+      <p><img src=" {{ host_prefix }}/static/img/genie.png" width="25px">
+        <span style="margin-left: 5px; font-weight: bold;">factgenie</span> is a toolkit for visualizing and annotating
+        errors in LLM outputs.
+      </p>
+
+      <p>
+        Please report any issues at <a
+          href="https://github.com/kasnerz/factgenie">https://github.com/kasnerz/factgenie</a>.
+      </p>
+
+      <p>Available as open-source under MIT License.
+      </p>
+
+      <p>
+        © 2023 <a href="https://ufal.mff.cuni.cz/">
+          Institute of Formal and Applied
+          Linguistics, Charles University</a>.
+      </p>
+
+    </div>
   </div>
-</div>
 
+</body>
 
 <script>
   // variable to be used in factgenie.js
diff --git a/factgenie/templates/browse.html b/factgenie/templates/browse.html
index b88e31cf..e5cfe4b5 100755
--- a/factgenie/templates/browse.html
+++ b/factgenie/templates/browse.html
@@ -119,13 +119,15 @@
 
         <div id="rightpanel" class="collapse show">
           <div id='sidepanel-content' class="tab-content">
-            <div id='setuparea'>
-              <ul class="list-inline">
-                <li class="list-inline-item"><small class="text-muted">Annotations</small></li>
-                <li class="list-inline-item"><select class="form-select form-select-sm" id="annotations-select">
-                  </select></li>
-              </ul>
+            <div id='setuparea' style="display: none">
+              <!-- inline buttons -->
+              <div>
+                <small class="text-muted"><i class="fa fa-pencil"></i> Annotations</small>
+              </div>
+              <p class="d-inline-flex gap-1" id="annotations-select">
+              </p>
             </div>
+
           </div>
 
           <div id='outputarea'></div>
diff --git a/factgenie/templates/campaigns/annotate_body.html b/factgenie/templates/campaigns/annotate_body.html
index 47f0dcc6..baddaefb 100755
--- a/factgenie/templates/campaigns/annotate_body.html
+++ b/factgenie/templates/campaigns/annotate_body.html
@@ -54,12 +54,24 @@ <h2 class="accordion-header">
                 </div>
               </div>
             </div>
-
             <div id='output-content'>
-              <div id='outputarea'>
-                <div id='text-type-info'>{{ annotator_prompt | safe }}
+              <div>
+                <div class="mt-3 mb-4" role="group" aria-label="Basic radio toggle button group">
+                  {% for category in annotation_span_categories %}
+                  <input type="radio" class="btn-check btn-outline-secondary btn-err-cat" name="btnradio"
+                    id="btnradio{{ loop.index }}" autocomplete="off" {% if loop.first %}checked{% endif %}
+                    data-cat-idx="{{ loop.index - 1 }}">
+                  <label class="btn btn-err-cat-label {% if loop.first %}active{% endif %}"
+                    for="btnradio{{ loop.index  }}" style="background-color: {{ category.color }};">
+                    {{ category.name }}
+                  </label>
+                  {% endfor %}
                 </div>
               </div>
+              <div id='text-type-info' class='mt-3'>{{ annotator_prompt | safe }}
+              </div>
+              <div id='outputarea'>
+              </div>
             </div>
             <div class="" id="checkbox-annotation-box">
               {{ flags | safe }}
diff --git a/factgenie/templates/crowdsourcing.html b/factgenie/templates/crowdsourcing.html
index 8b2ff10d..8ada809a 100755
--- a/factgenie/templates/crowdsourcing.html
+++ b/factgenie/templates/crowdsourcing.html
@@ -14,78 +14,80 @@
 
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
 
-<div class="container w-75 mt-5">
-  <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>
-  <a href="{{ host_prefix }}/crowdsourcing/new" class="btn btn-primary mb-5">New campaign</a>
+  <div class="container w-75 mt-5">
+    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>
+    <a href="{{ host_prefix }}/crowdsourcing/new" class="btn btn-primary mb-5">New campaign</a>
 
-  <div class="mt-1">
+    <div class="mt-1">
 
-    <!-- if login is not enabled in the app config, show red warning -->
-    {% if not is_password_protected %}
-    <div class="alert alert-danger" role="alert">
-      <i class="fa fa-exclamation-triangle"></i>
-      <span>Warning: The app is unprotected. You should enable authentication in <code>factgenie/config.yml</code>
-        before sharing
-        the URL with the
-        public.</span>
-    </div>
-    {% endif %}
+      <!-- if login is not enabled in the app config, show red warning -->
+      {% if not is_password_protected %}
+      <div class="alert alert-danger" role="alert">
+        <i class="fa fa-exclamation-triangle"></i>
+        <span>Warning: The app is unprotected. You should enable authentication in <code>factgenie/config.yml</code>
+          before sharing
+          the URL with the
+          public.</span>
+      </div>
+      {% endif %}
 
-    <h3><img src="{{ host_prefix }}/static/img/pencil.png" class="heading-img-inline">
-      <b>List of crowdsourcing campaigns</b>
-    </h3>
-    <div id="campaigns">
-      <table class="table table-hover">
-        <thead>
-          <tr>
-            <th scope="col">Id</th>
-            <th scope="col">Created</th>
-            <th scope="col">Status</th>
-            <th scope="col">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for name, campaign in campaigns.items() %}
-          <tr>
-            <td><a href="{{ host_prefix }}/crowdsourcing/detail?campaign={{ campaign.metadata.id }}"
-                class="blue-link">{{
-                campaign.metadata.id }}</a></td>
-            <td>{{ campaign.metadata.created }}</td>
-            <!-- <td>{{ campaign.stats }}</td> -->
-            <td> {% for status, count in campaign.stats.items() %}
-              <span class="badge bg-secondary">{{ status }}: {{ count }}</span>
-              {% endfor %}
-            </td>
-            <td>
-              <a href="{{ host_prefix }}/annotate?campaign={{ campaign.metadata.id }}" class="btn btn-outline-secondary"
-                data-bs-toggle="tooltip" title="Preview the crowdsourcing page">
-                <i class="fa fa-eye"></i>
-              </a>
-              <a href="{{ host_prefix }}/export_annotations?campaign={{ campaign.metadata.id }}"
-                class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Export annotations">
-                <i class="fa fa-download"></i>
-              </a>
-              <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
-                data-bs-target="#duplicate-eval-modal-{{ campaign.metadata.id }}">
-                <i class="fa fa-clone"></i>
-              </a>
-              <a onclick="deleteCampaign('{{ campaign.metadata.id }}', 'crowdsourcing')" class="btn btn-outline-danger"
-                data-bs-toggle="tooltip" title="Delete the campaign">
-                <i class="fa fa-trash"></i>
-              </a>
-            </td>
-          </tr>
-          {% include 'forms/duplicate_modal.html' %}
-          {% endfor %}
-        </tbody>
+      <h3><img src="{{ host_prefix }}/static/img/pencil.png" class="heading-img-inline">
+        <b>List of crowdsourcing campaigns</b>
+      </h3>
+      <div id="campaigns">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th scope="col">Id</th>
+              <th scope="col">Created</th>
+              <th scope="col">Status</th>
+              <th scope="col">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for name, campaign in campaigns.items() %}
+            <tr>
+              <td><a href="{{ host_prefix }}/crowdsourcing/detail?campaign={{ campaign.metadata.id }}"
+                  class="blue-link">{{
+                  campaign.metadata.id }}</a></td>
+              <td>{{ campaign.metadata.created }}</td>
+              <!-- <td>{{ campaign.stats }}</td> -->
+              <td> {% for status, count in campaign.stats.items() %}
+                <span class="badge bg-secondary">{{ status }}: {{ count }}</span>
+                {% endfor %}
+              </td>
+              <td>
+                <a href="{{ host_prefix }}/annotate?campaign={{ campaign.metadata.id }}"
+                  class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Preview the crowdsourcing page">
+                  <i class="fa fa-eye"></i>
+                </a>
+                <a href="{{ host_prefix }}/export_annotations?campaign={{ campaign.metadata.id }}"
+                  class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Export annotations">
+                  <i class="fa fa-download"></i>
+                </a>
+                <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
+                  data-bs-target="#duplicate-eval-modal-{{ campaign.metadata.id }}">
+                  <i class="fa fa-clone"></i>
+                </a>
+                <a onclick="deleteCampaign('{{ campaign.metadata.id }}', 'crowdsourcing')"
+                  class="btn btn-outline-danger" data-bs-toggle="tooltip" title="Delete the campaign">
+                  <i class="fa fa-trash"></i>
+                </a>
+              </td>
+            </tr>
+            {% include 'forms/duplicate_modal.html' %}
+            {% endfor %}
+          </tbody>
 
+      </div>
     </div>
-  </div>
 
-</div>
+  </div>
+</body>
 <script>
   // variable to be used in factgenie.js
   window.url_prefix = "{{ host_prefix }}";
diff --git a/factgenie/templates/crowdsourcing_detail.html b/factgenie/templates/crowdsourcing_detail.html
index b284397f..371b3a4c 100755
--- a/factgenie/templates/crowdsourcing_detail.html
+++ b/factgenie/templates/crowdsourcing_detail.html
@@ -12,52 +12,54 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container w-50 mt-5">
+  <div class="container w-50 mt-5">
 
-  <div class="mt-5">
-    <a href="{{ host_prefix }}/crowdsourcing" class="btn btn-outline-secondary mb-5">← List of campaigns</a>
-    <h3><b>{{ campaign_id }}</b></h3>
+    <div class="mt-5">
+      <a href="{{ host_prefix }}/crowdsourcing" class="btn btn-outline-secondary mb-5">← List of campaigns</a>
+      <h3><b>{{ campaign_id }}</b></h3>
 
-    <div class="card text-center">
-      <div class="card-body">
-        <h5 class="card-title">Crowdsourcing page link</h5>
-        <p><small class="text-muted">Use this link for your crowdsourcing service.</small></p>
-        <p class="card-text"><span class="font-monospace">{{ request.url | annotate_url }}?campaign={{
-            campaign_id }}</span>
-        </p>
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title">Crowdsourcing page link</h5>
+          <p><small class="text-muted">Use this link for your crowdsourcing service.</small></p>
+          <p class="card-text"><span class="font-monospace">{{ request.url | annotate_url }}?campaign={{
+              campaign_id }}</span>
+          </p>
+        </div>
       </div>
-    </div>
 
-    <div id="campaign-status">
-      <table class="table table-striped">
-        <thead>
-          <tr>
-            <th scope="col">Batch index</th>
-            <th scope="col">Examples</th>
-            <th scope="col">Status</th>
-            <th scope="col">Annotator id</th>
-            <th scope="col">Start time</th>
-            <th scope="col">Elapsed</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for batch in db %}
-          <tr>
-            <td>{{ batch.batch_idx }}</td>
-            <td>{{ batch.example_cnt }}</td>
-            <td>{{ batch.status }}</td>
-            <td>{{ batch.annotator_id }}</td>
-            <td>{{ batch.start | ctime }}</td>
-            <td>{{ batch.start | elapsed }}</td>
-          </tr>
-          {% endfor %}
-        </tbody>
+      <div id="campaign-status">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col">Batch index</th>
+              <th scope="col">Examples</th>
+              <th scope="col">Status</th>
+              <th scope="col">Annotator id</th>
+              <th scope="col">Start time</th>
+              <th scope="col">Elapsed</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for batch in db %}
+            <tr>
+              <td>{{ batch.batch_idx }}</td>
+              <td>{{ batch.example_cnt }}</td>
+              <td>{{ batch.status }}</td>
+              <td>{{ batch.annotator_id }}</td>
+              <td>{{ batch.start | ctime }}</td>
+              <td>{{ batch.start | elapsed }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
 
+      </div>
     </div>
   </div>
-</div>
+</body>
 <script>
   // variable to be used in factgenie.js
   window.url_prefix = "{{ host_prefix }}";
diff --git a/factgenie/templates/crowdsourcing_new.html b/factgenie/templates/crowdsourcing_new.html
index 9d067178..9c0ed557 100755
--- a/factgenie/templates/crowdsourcing_new.html
+++ b/factgenie/templates/crowdsourcing_new.html
@@ -16,235 +16,250 @@
   <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
 
-<div class="container w-50  mt-5">
-  <a href="{{ host_prefix }}/crowdsourcing" class="btn btn-outline-secondary mb-5">← Crowdsourcing campaigns</a>
-  <div class="mt-1">
+  <div class="container w-50  mt-5">
+    <a href="{{ host_prefix }}/crowdsourcing" class="btn btn-outline-secondary mb-5">← Crowdsourcing campaigns</a>
+    <div class="mt-1">
 
-    <form id="annotation-campaign-form">
-      <h3>New crowdsourcing campaign</h3>
+      <form id="annotation-campaign-form">
+        <h3>New crowdsourcing campaign</h3>
 
-      <ul class="nav nav-tabs nav-justified mt-5">
-        <li class="nav-item">
-          <a class="nav-link active" id="nav-tabs-campaign" aria-current="page" href="#tab-campaign"
-            data-bs-toggle="pill">Campaign</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="nav-tabs-config" href="#tab-config" data-bs-toggle="pill">Configuration</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="nav-tabs-data" href="#tab-data" data-bs-toggle="pill">Data</a>
-        </li>
-      </ul>
+        <ul class="nav nav-tabs nav-justified mt-5">
+          <li class="nav-item">
+            <a class="nav-link active" id="nav-tabs-campaign" aria-current="page" href="#tab-campaign"
+              data-bs-toggle="pill">Campaign</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="nav-tabs-config" href="#tab-config" data-bs-toggle="pill">Configuration</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="nav-tabs-data" href="#tab-data" data-bs-toggle="pill">Data</a>
+          </li>
+        </ul>
 
-      <div class="tab-content">
-        <div id="tab-campaign" role="tabpanel" class="tab-pane active new-campaign-form" tabindex="0">
-          <div class="row g-3 mb-3 align-items-center">
-            <div class="col-auto">
-              <label for="campaignId">Campaign Id</label>
-            </div>
-            <div class="col-auto">
-              <input type="text" class="form-control" id="campaignId" name="campaignId"
-                value="{{ default_campaign_id }}" required>
+        <div class="tab-content">
+          <div id="tab-campaign" role="tabpanel" class="tab-pane active new-campaign-form" tabindex="0">
+            <div class="row g-3 mb-3 align-items-center">
+              <div class="col-auto">
+                <label for="campaignId">Campaign Id</label>
+              </div>
+              <div class="col-auto">
+                <input type="text" class="form-control" id="campaignId" name="campaignId"
+                  value="{{ default_campaign_id }}" required>
+              </div>
+              <div class="col-auto">
+                <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip"
+                  title="Create a unique campaign identifier"></i>
+              </div>
             </div>
-            <div class="col-auto">
-              <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip"
-                title="Create a unique campaign identifier"></i>
+            <div style="text-align: center;">
+              <button type="button" class="btn btn-primary mt-3"
+                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Next</button>
             </div>
           </div>
-          <div style="text-align: center;">
-            <button type="button" class="btn btn-primary mt-3"
-              onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Next</button>
-          </div>
-        </div>
-        <div id="tab-config" role="tabpanel" class="tab-pane new-campaign-form" tabindex="1">
-          <div class="row g-3 mb-3 align-items-center">
-            <div class="col-auto">
-              <span style="margin-left: 5px; margin-right: 10px;">Preset</span>
-            </div>
-            <div class="col-auto">
-              <select class="form-select" id="crowdsourcingConfig" name="crowdsourcingConfig"
-                onchange="updateCrowdsourcingConfig();">
-                <option value="[None]">[None]</option>
-                {% for config_name in configs.keys() %}
-                <option value="{{ config_name }}">{{ config_name }}</option>
-                {% endfor %}
-              </select>
-            </div>
-            <div class="col-auto">
-              <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip" title="Add your custom preset to
+          <div id="tab-config" role="tabpanel" class="tab-pane new-campaign-form" tabindex="1">
+            <div class="row g-3 mb-3 align-items-center">
+              <div class="col-auto">
+                <span style="margin-left: 5px; margin-right: 10px;">Preset</span>
+              </div>
+              <div class="col-auto">
+                <select class="form-select" id="crowdsourcingConfig" name="crowdsourcingConfig"
+                  onchange="updateCrowdsourcingConfig();">
+                  <option value="[None]">[None]</option>
+                  {% for config_name in configs.keys() %}
+                  <option value="{{ config_name }}">{{ config_name }}</option>
+                  {% endfor %}
+                </select>
+              </div>
+              <div class="col-auto">
+                <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip" title="Add your custom preset to
           factgenie/config/crowdsourcing or save your current configuration."></i>
+              </div>
             </div>
-          </div>
 
-          <div class="rounded-box mt-4">
-            <!-- textarea for annotator instructions -->
-            <div class="form-group">
-              <label for="annotatorInstructions">Annotator instructions</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">Instructions shown to the annotators. Use Markdown syntax.</small>
+            <div class="rounded-box mt-4">
+              <!-- textarea for annotator instructions -->
+              <div class="form-group">
+                <label for="annotatorInstructions">Annotator instructions</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">Instructions shown to the annotators. Use Markdown syntax.</small>
+                </div>
+                <textarea class="form-control" id="annotatorInstructions" name="annotatorInstructions"
+                  required></textarea>
               </div>
-              <textarea class="form-control" id="annotatorInstructions" name="annotatorInstructions"
-                required></textarea>
-            </div>
-            <!-- checkbox for displaying overlay -->
-            <div class="form-group">
-              <label for="displayOverlay">Show overlay</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">Display an introductory overlay with the instructions.</small>
+              <!-- checkbox for displaying overlay -->
+              <div class="form-group">
+                <label for="displayOverlay">Show overlay</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">Display an introductory overlay with the instructions.</small>
+                </div>
+                <div class="form-check form-switch">
+                  <input type="checkbox" class="form-check-input" id="displayOverlay" name="displayOverlay" checked>
+                </div>
               </div>
-              <div class="form-check form-switch">
-                <input type="checkbox" class="form-check-input" id="displayOverlay" name="displayOverlay" checked>
+              <!-- textarea for annotator prompt -->
+              <div class="form-group mt-3">
+                <label for="annotatorPrompt">Annotator prompt</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">The message shown right before the annotated text.</small>
+                </div>
+                <textarea class="form-control" id="annotatorPrompt" name="annotatorPrompt" rows="1" required></textarea>
               </div>
-            </div>
-            <!-- textarea for annotator prompt -->
-            <div class="form-group mt-3">
-              <label for="annotatorPrompt">Annotator prompt</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">The message shown right before the annotated text.</small>
+              <!-- textarea for final message -->
+              <div class="form-group  mt-4">
+                <label for="finalMessage">Final message</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">The message shown after the annotator has submitted the
+                    annotations.
+                    Use Markdown syntax. You should include the completion code here. </small>
+                </div>
+                <textarea class="form-control" id="finalMessage" name="finalMessage" required></textarea>
               </div>
-              <textarea class="form-control" id="annotatorPrompt" name="annotatorPrompt" rows="1" required></textarea>
-            </div>
-            <!-- textarea for final message -->
-            <div class="form-group  mt-4">
-              <label for="finalMessage">Final message</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">The message shown after the annotator has submitted the annotations.
-                  Use Markdown syntax. You should include the completion code here. </small>
+              <div class="form-group">
+                <label for="examplesPerBatch">Examples per batch</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">Number of examples shown to each annotator </small>
+                </div>
+                <input type="number" class="form-control" id="examplesPerBatch" name="examplesPerBatch" min="1"
+                  required>
               </div>
-              <textarea class="form-control" id="finalMessage" name="finalMessage" required></textarea>
-            </div>
-            <div class="form-group">
-              <label for="examplesPerBatch">Examples per batch</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">Number of examples shown to each annotator </small>
+              <div class="form-group mt-4">
+                <!-- select for sort order -->
+                <label for="annotationGranularity">Annotation granularity</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">The smallest unit annotators can annotate.</small>
+                </div>
+                <select class="form-select" id="annotationGranularity" name="annotationGranularity">
+                  <option value="words">Words</option>
+                  <option value="chars">Characters</option>
+                </select>
               </div>
-              <input type="number" class="form-control" id="examplesPerBatch" name="examplesPerBatch" min="1" required>
-            </div>
-            <div class="form-group mt-4">
-              <!-- select for sort order -->
-              <label for="sortOrder">Shuffle outputs</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">How to shuffle examples before batching (model outputs are
-                  shuffled always).</small>
+              <div class="form-group mt-4">
+                <!-- select for sort order -->
+                <label for="sortOrder">Shuffle outputs</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">How to shuffle examples before batching (model outputs are
+                    shuffled always).</small>
+                </div>
+                <select class="form-select" id="sortOrder" name="sortOrder">
+                  <option value="dataset-level">Shuffle the examples</option>
+                  <option value="example-level">Keep the order of examples</option>
+                </select>
               </div>
-              <select class="form-select" id="sortOrder" name="sortOrder">
-                <option value="dataset-level">Shuffle the examples</option>
-                <option value="example-level">Keep the order of examples</option>
-              </select>
-            </div>
-            <div class="form-group mt-4">
-              <label for="idleTime">Idle Time (minutes)</label>
-              <div class="mb-2">
-                <small class="form-text text-muted">The time after which an unfinished example can be re-assigned to a
-                  new annotator.
-                </small>
+              <div class="form-group mt-4">
+                <label for="idleTime">Idle Time (minutes)</label>
+                <div class="mb-2">
+                  <small class="form-text text-muted">The time after which an unfinished example can be re-assigned to a
+                    new annotator.
+                  </small>
+                </div>
+                <input type="number" class="form-control" id="idleTime" name="idleTime" min="0">
               </div>
-              <input type="number" class="form-control" id="idleTime" name="idleTime" min="0">
-            </div>
 
-            {% include 'forms/annotation_span_categories.html' %}
-            <div class="accordion " id="advancedAccordion">
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="headingAdvanced">
-                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
-                    Advanced
-                  </button>
-                </h2>
-                <div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced"
-                  data-bs-parent="#advancedAccordion">
-                  <div class="accordion-body">
-                    <div class="row mb-1 align-items-center">
-                      <div class="col-auto">
-                        <i class="fa fa-list-ul"></i>
-                        <span style="margin-left: 5px; margin-right: 10px;">Flags</span>
-                        <div class="mb-2">
-                          <small class="form-text text-muted">Checkboxes that the annotators can mark for each
-                            example.</small>
+              {% include 'forms/annotation_span_categories.html' %}
+              <div class="accordion " id="advancedAccordion">
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="headingAdvanced">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
+                      Advanced
+                    </button>
+                  </h2>
+                  <div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced"
+                    data-bs-parent="#advancedAccordion">
+                    <div class="accordion-body">
+                      <div class="row mb-1 align-items-center">
+                        <div class="col-auto">
+                          <i class="fa fa-list-ul"></i>
+                          <span style="margin-left: 5px; margin-right: 10px;">Flags</span>
+                          <div class="mb-2">
+                            <small class="form-text text-muted">Checkboxes that the annotators can mark for each
+                              example.</small>
+                          </div>
+                        </div>
+                        <div id="flags"></div>
+                        <div class="col-auto mt-1">
+                          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addFlag();">+</button>
                         </div>
-                      </div>
-                      <div id="flags"></div>
-                      <div class="col-auto mt-1">
-                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addFlag();">+</button>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
 
 
 
-          <div style="text-align: center;">
-            <button type="button" class="btn btn-outline-secondary mt-3"
-              onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-campaign")).show()'>Back</button>
-            <button type="button" class="btn btn-outline-secondary mt-3" data-bs-toggle="modal"
-              data-bs-target="#save-cfg-modal">Save config as...</button>
-            <button type="button" class="btn btn-primary mt-3"
-              onclick=' bootstrap.Tab.getOrCreateInstance($("#nav-tabs-data")).show()'>Next</button>
+            <div style="text-align: center;">
+              <button type="button" class="btn btn-outline-secondary mt-3"
+                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-campaign")).show()'>Back</button>
+              <button type="button" class="btn btn-outline-secondary mt-3" data-bs-toggle="modal"
+                data-bs-target="#save-cfg-modal">Save config as...</button>
+              <button type="button" class="btn btn-primary mt-3"
+                onclick=' bootstrap.Tab.getOrCreateInstance($("#nav-tabs-data")).show()'>Next</button>
+            </div>
           </div>
-        </div>
 
-        <div id="tab-data" class="tab-pane new-campaign-form" role="tabpanel" tabindex="2">
+          <div id="tab-data" class="tab-pane new-campaign-form" role="tabpanel" tabindex="2">
 
-          {% include 'forms/data_selection.html' %}
+            {% include 'forms/data_selection.html' %}
 
-          <div style="text-align: center;">
-            <button type="button" class="btn btn-outline-secondary mt-3"
-              onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Back</button>
-            <button type="button" class="btn btn-primary mt-3" onclick="createHumanCampaign();">Create campaign</button>
+            <div style="text-align: center;">
+              <button type="button" class="btn btn-outline-secondary mt-3"
+                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Back</button>
+              <button type="button" class="btn btn-primary mt-3" onclick="createHumanCampaign();">Create
+                campaign</button>
+            </div>
           </div>
         </div>
-      </div>
-    </form>
-    <div>
+      </form>
+      <div>
 
+      </div>
     </div>
-  </div>
 
 
-  <div class="modal fade" id="save-cfg-modal" tabindex="-1">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="about-modal-label">Save config as...</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <div id='configarea' class="tab-pane sidepanel-panel w-75" role="tabpanel" tabindex="0">
-            <label for="exampleDataList" class="form-label">Config name</label>
-            <div class="input-group mb-3">
-              <input type="text" class="form-control" id="config-save-filename" list="datalistOptions"
-                placeholder="Click to see existing configurations..."
-                aria-label="Click to see existing configurations..." aria-describedby="basic-addon2">
-              <span class="input-group-text" id="basic-addon2">.yaml</span>
+    <div class="modal fade" id="save-cfg-modal" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="about-modal-label">Save config as...</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div id='configarea' class="tab-pane sidepanel-panel w-75" role="tabpanel" tabindex="0">
+              <label for="exampleDataList" class="form-label">Config name</label>
+              <div class="input-group mb-3">
+                <input type="text" class="form-control" id="config-save-filename" list="datalistOptions"
+                  placeholder="Click to see existing configurations..."
+                  aria-label="Click to see existing configurations..." aria-describedby="basic-addon2">
+                <span class="input-group-text" id="basic-addon2">.yaml</span>
+              </div>
+              <datalist id="datalistOptions">
+                {% for config_filename in configs.keys() %}
+                <!-- save the name without suffix to variable -->
+                {% set config_name = config_filename.rstrip(".yaml") %}
+                <option value="{{ config_name }}">{{ config_filename }}</option>
+                {% endfor %}
+              </datalist>
             </div>
-            <datalist id="datalistOptions">
-              {% for config_filename in configs.keys() %}
-              <!-- save the name without suffix to variable -->
-              {% set config_name = config_filename.rstrip(".yaml") %}
-              <option value="{{ config_name }}">{{ config_filename }}</option>
-              {% endfor %}
-            </datalist>
           </div>
-        </div>
-        <div class="modal-footer">
-          <button type="submit" id="save-cfg-submit" class="btn btn-primary mt-3"
-            onclick="saveConfig('crowdsourcing')">Save
-            config</button>
+          <div class="modal-footer">
+            <button type="submit" id="save-cfg-submit" class="btn btn-primary mt-3"
+              onclick="saveConfig('crowdsourcing')">Save
+              config</button>
+          </div>
         </div>
       </div>
+
     </div>
 
   </div>
 
-</div>
-
-
+</body>
 <script>
   // variable to be used in factgenie.js
   window.url_prefix = "{{ host_prefix }}";
diff --git a/factgenie/templates/index.html b/factgenie/templates/index.html
index 14d08f5f..db98a4e3 100755
--- a/factgenie/templates/index.html
+++ b/factgenie/templates/index.html
@@ -12,81 +12,82 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container">
-  <div class="row mt-5">
-    <!-- <b>Actions</b> -->
-    <div class="col-md-4">
-      <div class="card text-center mt-3" style="min-width: 100%;">
-        <div class="card-body">
-          <a href="{{ host_prefix }}/browse">
-            <img src="{{ host_prefix }}/static/img/book.png" class="intro-img">
-            <h5 class="card-title">Browse</h5>
-          </a>
-          <p class="card-text">View data and annotations.</p>
+  <div class="container">
+    <div class="row mt-5">
+      <!-- <b>Actions</b> -->
+      <div class="col-md-4">
+        <div class="card text-center mt-3" style="min-width: 100%;">
+          <div class="card-body">
+            <a href="{{ host_prefix }}/browse">
+              <img src="{{ host_prefix }}/static/img/book.png" class="intro-img">
+              <h5 class="card-title">Browse</h5>
+            </a>
+            <p class="card-text">View data and annotations.</p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="col-md-4">
-      <div class="card text-center mt-3">
-        <div class="card-body">
-          <a href="{{ host_prefix }}/llm_eval">
-            <img src="{{ host_prefix }}/static/img/llm.png" class="intro-img">
-            <h5 class="card-title">Annotate with LLMs</h5>
-          </a>
-          <p class="card-text">Collect model annotations.</p>
+      <div class="col-md-4">
+        <div class="card text-center mt-3">
+          <div class="card-body">
+            <a href="{{ host_prefix }}/llm_eval">
+              <img src="{{ host_prefix }}/static/img/llm.png" class="intro-img">
+              <h5 class="card-title">Annotate with LLMs</h5>
+            </a>
+            <p class="card-text">Collect model annotations.</p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="col-md-4">
-      <div class="card text-center mt-3">
-        <div class="card-body">
-          <a href="{{ host_prefix }}/crowdsourcing">
-            <img src="{{ host_prefix }}/static/img/pencil.png" class="intro-img">
-            <h5 class="card-title">Annotate with human annotators</h5>
-          </a>
-          <p class="card-text">Collect human annotations.</p>
+      <div class="col-md-4">
+        <div class="card text-center mt-3">
+          <div class="card-body">
+            <a href="{{ host_prefix }}/crowdsourcing">
+              <img src="{{ host_prefix }}/static/img/pencil.png" class="intro-img">
+              <h5 class="card-title">Annotate with human annotators</h5>
+            </a>
+            <p class="card-text">Collect human annotations.</p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="col-md-4">
-      <div class="card text-center mt-3">
-        <div class="card-body">
-          <a href="{{ host_prefix }}/datasets">
-            <img src="{{ host_prefix }}/static/img/datasets.png" class="intro-img">
-            <h5 class="card-title">Datasets</h5>
-          </a>
-          <p class="card-text">Manage datasets.</p>
+      <div class="col-md-4">
+        <div class="card text-center mt-3">
+          <div class="card-body">
+            <a href="{{ host_prefix }}/datasets">
+              <img src="{{ host_prefix }}/static/img/datasets.png" class="intro-img">
+              <h5 class="card-title">Datasets</h5>
+            </a>
+            <p class="card-text">Manage datasets.</p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="col-md-4">
-      <div class="card text-center mt-3">
-        <div class="card-body">
-          <a href="{{ host_prefix }}/model_outputs">
-            <img src="{{ host_prefix }}/static/img/output.png" class="intro-img">
-            <h5 class="card-title">Model outputs</h5>
-          </a>
-          <p class="card-text">Manage model outputs.</p>
+      <div class="col-md-4">
+        <div class="card text-center mt-3">
+          <div class="card-body">
+            <a href="{{ host_prefix }}/model_outputs">
+              <img src="{{ host_prefix }}/static/img/output.png" class="intro-img">
+              <h5 class="card-title">Model outputs</h5>
+            </a>
+            <p class="card-text">Manage model outputs.</p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="col-md-4">
-      <div class="card text-center mt-3">
-        <div class="card-body">
-          <a href="{{ host_prefix }}/about">
-            <img src="{{ host_prefix }}/static/img/info.png" class="intro-img">
-            <h5 class="card-title">About</h5>
-          </a>
-          <p class="card-text">More details.</p>
+      <div class="col-md-4">
+        <div class="card text-center mt-3">
+          <div class="card-body">
+            <a href="{{ host_prefix }}/about">
+              <img src="{{ host_prefix }}/static/img/info.png" class="intro-img">
+              <h5 class="card-title">About</h5>
+            </a>
+            <p class="card-text">More details.</p>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-
+</body>
 
-  <script>
-    // variable to be used in factgenie.js
-    window.url_prefix = "{{ host_prefix }}";
-  </script>
\ No newline at end of file
+<script>
+  // variable to be used in factgenie.js
+  window.url_prefix = "{{ host_prefix }}";
+</script>
\ No newline at end of file
diff --git a/factgenie/templates/llm_eval.html b/factgenie/templates/llm_eval.html
index 3f31ebf3..795ecbc4 100755
--- a/factgenie/templates/llm_eval.html
+++ b/factgenie/templates/llm_eval.html
@@ -14,67 +14,68 @@
 
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
 
-<div class="container w-75 mt-5">
-  <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>
-  <a href="{{ host_prefix }}/llm_eval/new" class="btn btn-primary mb-5">New LLM
-    eval</a>
+  <div class="container w-75 mt-5">
+    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>
+    <a href="{{ host_prefix }}/llm_eval/new" class="btn btn-primary mb-5">New LLM
+      eval</a>
 
-  <div class="mt-1">
-    <h3><img src="{{ host_prefix }}/static/img/llm.png" class="heading-img-inline">
-      <b>List of LLM evaluation campaigns</b>
-    </h3>
-    <div id="campaigns">
-      <table class="table table-hover">
-        <thead>
-          <tr>
-            <th scope="col">Id</th>
-            <th scope="col">Created</th>
-            <th scope="col">Status</th>
-            <th scope="col">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for name, campaign in campaigns.items() %}
-          <tr>
-            <td><a href="{{ host_prefix }}/llm_eval/detail?campaign={{ campaign.metadata.id }}" class="blue-link">{{
-                campaign.metadata.id }}</a></td>
-            <td>{{ campaign.metadata.created }}</td>
-            <!-- <td>{{ campaign.stats }}</td> -->
-            <td> {% for status, count in campaign.stats.items() %}
-              <span class="badge bg-secondary">{{ status }}: {{ count }}</span>
-              {% endfor %}
-            </td>
-            <td>
-              <a href="{{ host_prefix }}/export_annotations?campaign={{ campaign.metadata.id }}"
-                class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Export annotations">
-                <i class="fa fa-download"></i>
-              </a>
-              <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#duplicate-eval-modal-{{
+    <div class="mt-1">
+      <h3><img src="{{ host_prefix }}/static/img/llm.png" class="heading-img-inline">
+        <b>List of LLM evaluation campaigns</b>
+      </h3>
+      <div id="campaigns">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th scope="col">Id</th>
+              <th scope="col">Created</th>
+              <th scope="col">Status</th>
+              <th scope="col">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for name, campaign in campaigns.items() %}
+            <tr>
+              <td><a href="{{ host_prefix }}/llm_eval/detail?campaign={{ campaign.metadata.id }}" class="blue-link">{{
+                  campaign.metadata.id }}</a></td>
+              <td>{{ campaign.metadata.created }}</td>
+              <!-- <td>{{ campaign.stats }}</td> -->
+              <td> {% for status, count in campaign.stats.items() %}
+                <span class="badge bg-secondary">{{ status }}: {{ count }}</span>
+                {% endfor %}
+              </td>
+              <td>
+                <a href="{{ host_prefix }}/export_annotations?campaign={{ campaign.metadata.id }}"
+                  class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Export annotations">
+                  <i class="fa fa-download"></i>
+                </a>
+                <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#duplicate-eval-modal-{{
                   campaign.metadata.id }}">
-                <i class="fa fa-clone"></i>
-              </a>
-              <a onclick="deleteCampaign('{{ campaign.metadata.id }}', 'llm_eval')" class="btn btn-outline-danger"
-                data-bs-toggle="tooltip" title="Delete the campaign">
-                <i class="fa fa-trash"></i>
-              </a>
-            </td>
-          </tr>
-          {% include 'forms/duplicate_modal.html' %}
-          {% endfor %}
-        </tbody>
+                  <i class="fa fa-clone"></i>
+                </a>
+                <a onclick="deleteCampaign('{{ campaign.metadata.id }}', 'llm_eval')" class="btn btn-outline-danger"
+                  data-bs-toggle="tooltip" title="Delete the campaign">
+                  <i class="fa fa-trash"></i>
+                </a>
+              </td>
+            </tr>
+            {% include 'forms/duplicate_modal.html' %}
+            {% endfor %}
+          </tbody>
 
-    </div>
-
-  </div>
+      </div>
 
+    </div>
+</body>
 
 
-  <script>
-    // variable to be used in factgenie.js
-    window.url_prefix = "{{ host_prefix }}";
-    window.mode = "llm_eval";
-  </script>
-  <script src="{{ host_prefix }}/static/js/factgenie.js"></script>
\ No newline at end of file
+<script>
+  // variable to be used in factgenie.js
+  window.url_prefix = "{{ host_prefix }}";
+  window.mode = "llm_eval";
+</script>
+<script src="{{ host_prefix }}/static/js/factgenie.js"></script>
\ No newline at end of file
diff --git a/factgenie/templates/llm_eval_detail.html b/factgenie/templates/llm_eval_detail.html
index 412a4a5a..b7023de5 100755
--- a/factgenie/templates/llm_eval_detail.html
+++ b/factgenie/templates/llm_eval_detail.html
@@ -13,120 +13,122 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container w-50 mt-5">
+  <div class="container w-50 mt-5">
 
-  <div class="mt-5">
-    <a href="{{ host_prefix }}/llm_eval" class="btn btn-outline-secondary mb-5">← List of LLM evals</a>
-    <h3><b>{{ campaign_id }}</b></h3>
+    <div class="mt-5">
+      <a href="{{ host_prefix }}/llm_eval" class="btn btn-outline-secondary mb-5">← List of LLM evals</a>
+      <h3><b>{{ campaign_id }}</b></h3>
 
-    <div id="metadata-block" class="mt-3">
-      <hr>
-      <dl class="row">
-        <dt class="col-sm-3"> Created </dt>
-        <dd class="col-sm-9" id="metadata-created"> {{ metadata.created }} </dd>
-        <dt class="col-sm-3"> Status </dt>
-        <dd class="col-sm-9" id="metadata-status"> {{ metadata.status }} </dd>
-        <dt class="col-sm-3"> Examples </dt>
-        <dd class="col-sm-9" id="metadata-example-cnt"> {{ finished_examples | length }} / {{ overview | length }} </dd>
-      </dl>
-      <div>
-        <a onclick="runLlmEval('{{ campaign_id }}')" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
-          id="run-button" title="Run evaluation" {% if metadata.status=='finished' or metadata.status=='running' %}
-          style="display: none;" {% endif %}>
-          <i class="fa fa-play"></i> {{ 'Continue' if metadata.status == 'paused' else 'Run' }} evaluation
-        </a>
-        <a onclick="pauseLlmEval('{{ campaign_id }}')" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
-          id="stop-button" title="Stop evaluation" {% if metadata.status!='running' %} style="display: none;" {% endif
-          %}>
-          <i class="fa fa-pause"></i> Pause evaluation
-        </a>
-        <a href="{{ host_prefix }}/export_annotations?campaign={{ campaign_id }}" class="btn btn-outline-secondary"
-          data-bs-toggle="tooltip" id="download-button" title="Export annotations" {% if metadata.status=='new' %}
-          style="display: none;" {% endif %}>
-          <i class="fa fa-download"></i> Download annotations
-        </a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#config-modal"><i
-            class="fa fa-cog"></i> Show
-          configuration</a>
-      </div>
-      <div class="progress mt-3" style="display: {{ 'none' if metadata.status != 'running' else block }};"
-        id="llm-eval-progress">
-        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0"
-          id="llm-eval-progress-bar" aria-valuemax="100"
-          style="width: {{ (finished_examples|length) / (overview | length) * 100 }}%;">
+      <div id="metadata-block" class="mt-3">
+        <hr>
+        <dl class="row">
+          <dt class="col-sm-3"> Created </dt>
+          <dd class="col-sm-9" id="metadata-created"> {{ metadata.created }} </dd>
+          <dt class="col-sm-3"> Status </dt>
+          <dd class="col-sm-9" id="metadata-status"> {{ metadata.status }} </dd>
+          <dt class="col-sm-3"> Examples </dt>
+          <dd class="col-sm-9" id="metadata-example-cnt"> {{ finished_examples | length }} / {{ overview | length }}
+          </dd>
+        </dl>
+        <div>
+          <a onclick="runLlmEval('{{ campaign_id }}')" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
+            id="run-button" title="Run evaluation" {% if metadata.status=='finished' or metadata.status=='running' %}
+            style="display: none;" {% endif %}>
+            <i class="fa fa-play"></i> {{ 'Continue' if metadata.status == 'paused' else 'Run' }} evaluation
+          </a>
+          <a onclick="pauseLlmEval('{{ campaign_id }}')" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
+            id="stop-button" title="Stop evaluation" {% if metadata.status!='running' %} style="display: none;" {% endif
+            %}>
+            <i class="fa fa-pause"></i> Pause evaluation
+          </a>
+          <a href="{{ host_prefix }}/export_annotations?campaign={{ campaign_id }}" class="btn btn-outline-secondary"
+            data-bs-toggle="tooltip" id="download-button" title="Export annotations" {% if metadata.status=='new' %}
+            style="display: none;" {% endif %}>
+            <i class="fa fa-download"></i> Download annotations
+          </a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#config-modal"><i
+              class="fa fa-cog"></i> Show
+            configuration</a>
+        </div>
+        <div class="progress mt-3" style="display: {{ 'none' if metadata.status != 'running' else block }};"
+          id="llm-eval-progress">
+          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0"
+            id="llm-eval-progress-bar" aria-valuemax="100"
+            style="width: {{ (finished_examples|length) / (overview | length) * 100 }}%;">
+          </div>
         </div>
+        <div id="log-area" class="font-monospace mt-3"></div>
+        <hr>
       </div>
-      <div id="log-area" class="font-monospace mt-3"></div>
-      <hr>
-    </div>
 
-    <div id="progress-block" class="mt-3">
+      <div id="progress-block" class="mt-3">
 
-      <div id="finished-examples" class="mt-3">
-        <h4>Examples</h4>
-        <div id="llm-status">
-          <table class="table table-sm table-striped">
-            <thead>
-              <tr>
-                <th scope="col">#</th>
-                <th scope="col">Dataset</th>
-                <th scope="col">Setup</th>
-                <th scope="col">Split</th>
-                <th scope="col">Example</th>
-                <th scope="col">Status</th>
-                <th scope="col">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for example in overview %}
-              {% set rowId = example.dataset + "-" + example.split + "-" + example.setup_id + "-" +
-              (example.example_idx|string) %}
-              <tr>
-                <td>{{ loop.index }}</td>
-                <td>{{ example.dataset }}</td>
-                <td>{{ example.setup_id }}</td>
-                <td>{{ example.split }}</td>
-                <td>{{ example.example_idx }}</td>
-                <td id="statusBtn{{ rowId }}">
-                  {{ example.status }}</td>
-                <!-- use collapse for hiding annotations -->
-                <td>
-                  <a class="btn btn-sm btn-outline-secondary"
-                    href="{{host_prefix}}/browse?dataset={{ example.dataset }}&split={{ example.split }}&example_idx={{ example.example_idx }}"
-                    role="button">
-                    <i class="fa fa-eye"></i>
-                  </a>
-                  <a class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse"
-                    href="#collapseExample{{ rowId }}" role="button" aria-expanded="false" id="annotBtn{{ rowId }}"
-                    aria-controls="collapseExample" {% if example.status !="finished" %} style="display: none;" {% endif
-                    %}>
-                    <i class="fa fa-list"></i>
-                  </a>
-                </td>
-              <tr class="collapse" id="collapseExample{{ rowId }}">
-                <td colspan="7">
-                  <div class="card card-body">
-                    <pre id="annotPre{{ rowId }}">{{ example.annotations }}</pre>
-                  </div>
-                </td>
-              </tr>
-              </tr>
-              <tr>
+        <div id="finished-examples" class="mt-3">
+          <h4>Examples</h4>
+          <div id="llm-status">
+            <table class="table table-sm table-striped">
+              <thead>
+                <tr>
+                  <th scope="col">#</th>
+                  <th scope="col">Dataset</th>
+                  <th scope="col">Setup</th>
+                  <th scope="col">Split</th>
+                  <th scope="col">Example</th>
+                  <th scope="col">Status</th>
+                  <th scope="col">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for example in overview %}
+                {% set rowId = example.dataset + "-" + example.split + "-" + example.setup_id + "-" +
+                (example.example_idx|string) %}
+                <tr>
+                  <td>{{ loop.index }}</td>
+                  <td>{{ example.dataset }}</td>
+                  <td>{{ example.setup_id }}</td>
+                  <td>{{ example.split }}</td>
+                  <td>{{ example.example_idx }}</td>
+                  <td id="statusBtn{{ rowId }}">
+                    {{ example.status }}</td>
+                  <!-- use collapse for hiding annotations -->
+                  <td>
+                    <a class="btn btn-sm btn-outline-secondary"
+                      href="{{host_prefix}}/browse?dataset={{ example.dataset }}&split={{ example.split }}&example_idx={{ example.example_idx }}"
+                      role="button">
+                      <i class="fa fa-eye"></i>
+                    </a>
+                    <a class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse"
+                      href="#collapseExample{{ rowId }}" role="button" aria-expanded="false" id="annotBtn{{ rowId }}"
+                      aria-controls="collapseExample" {% if example.status !="finished" %} style="display: none;" {%
+                      endif %}>
+                      <i class="fa fa-list"></i>
+                    </a>
+                  </td>
+                <tr class="collapse" id="collapseExample{{ rowId }}">
+                  <td colspan="7">
+                    <div class="card card-body">
+                      <pre id="annotPre{{ rowId }}">{{ example.annotations }}</pre>
+                    </div>
+                  </td>
+                </tr>
+                </tr>
+                <tr>
 
-              </tr>
-              {% endfor %}
-            </tbody>
+                </tr>
+                {% endfor %}
+              </tbody>
 
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
-
-{% include 'forms/config_modal.html' %}
 
+  {% include 'forms/config_modal.html' %}
+</body>
 <script>
   // variable to be used in factgenie.js
   window.url_prefix = "{{ host_prefix }}";
diff --git a/factgenie/templates/llm_eval_new.html b/factgenie/templates/llm_eval_new.html
index 287f421f..f84588ea 100755
--- a/factgenie/templates/llm_eval_new.html
+++ b/factgenie/templates/llm_eval_new.html
@@ -13,249 +13,254 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
 
-<div class="container w-50  mt-5">
-  <a href="{{ host_prefix }}/llm_eval" class="btn btn-outline-secondary mb-5">← LLM evals</a>
-  <div class="mt-1">
+  <div class="container w-50  mt-5">
+    <a href="{{ host_prefix }}/llm_eval" class="btn btn-outline-secondary mb-5">← LLM evals</a>
+    <div class="mt-1">
 
-    <form id="annotation-campaign-form">
-      <h3>New LLM evaluation campaign</h3>
+      <form id="annotation-campaign-form">
+        <h3>New LLM evaluation campaign</h3>
 
-      <ul class="nav nav-tabs nav-justified mt-5">
-        <li class="nav-item">
-          <a class="nav-link active" id="nav-tabs-campaign" aria-current="page" href="#tab-campaign"
-            data-bs-toggle="pill">Campaign</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="nav-tabs-config" href="#tab-config" data-bs-toggle="pill">Configuration</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="nav-tabs-data" href="#tab-data" data-bs-toggle="pill">Data</a>
-        </li>
-      </ul>
+        <ul class="nav nav-tabs nav-justified mt-5">
+          <li class="nav-item">
+            <a class="nav-link active" id="nav-tabs-campaign" aria-current="page" href="#tab-campaign"
+              data-bs-toggle="pill">Campaign</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="nav-tabs-config" href="#tab-config" data-bs-toggle="pill">Configuration</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="nav-tabs-data" href="#tab-data" data-bs-toggle="pill">Data</a>
+          </li>
+        </ul>
 
-      <div class="tab-content">
-        <div id="tab-campaign" role="tabpanel" class="tab-pane active new-campaign-form" tabindex="0">
-          <div class="row g-3 mb-3 align-items-center">
-            <div class="col-auto">
-              <label for="campaignId">Campaign Id</label>
-            </div>
-            <div class="col-auto">
-              <input type="text" class="form-control" id="campaignId" name="campaignId"
-                value="{{ default_campaign_id }}" required>
-            </div>
-            <div class="col-auto">
-              <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip"
-                title="Create a unique campaign identifier"></i>
-            </div>
-          </div>
-          <div style="text-align: center;">
-            <button type="button" class="btn btn-primary mt-3"
-              onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Next</button>
-          </div>
-        </div>
-        <div id="tab-config" role="tabpanel" class="tab-pane new-campaign-form" tabindex="1">
-          <div class="row g-3 mb-3 align-items-center">
-            <div class="col-auto">
-              <span style="margin-left: 5px;">Preset</span>
-            </div>
-            <div class="col-auto">
-              <select class="form-select" id="llmConfig" name="llmConfig" onchange="updateLLMMetricConfig();">
-                <option value="[None]">[None]</option>
-                {% for config_name in configs.keys() %}
-                <option value="{{ config_name }}">{{ config_name }}</option>
-                {% endfor %}
-              </select>
+        <div class="tab-content">
+          <div id="tab-campaign" role="tabpanel" class="tab-pane active new-campaign-form" tabindex="0">
+            <div class="row g-3 mb-3 align-items-center">
+              <div class="col-auto">
+                <label for="campaignId">Campaign Id</label>
+              </div>
+              <div class="col-auto">
+                <input type="text" class="form-control" id="campaignId" name="campaignId"
+                  value="{{ default_campaign_id }}" required>
+              </div>
+              <div class="col-auto">
+                <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip"
+                  title="Create a unique campaign identifier"></i>
+              </div>
             </div>
-            <div class="col-auto">
-              <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip" title="Add your custom preset to
-          factgenie/config/llm-eval"></i>
+            <div style="text-align: center;">
+              <button type="button" class="btn btn-primary mt-3"
+                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Next</button>
             </div>
           </div>
-
-          <div class="rounded-box mt-4">
+          <div id="tab-config" role="tabpanel" class="tab-pane new-campaign-form" tabindex="1">
             <div class="row g-3 mb-3 align-items-center">
               <div class="col-auto">
-                <i class="fa fa-code"></i>
-                <span style="margin-left: 5px; margin-right: 10px;">API</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">Select one of the available metric types (or add your own class to
-                    <code>factgenie/metrics.py</code>).
-                  </small>
-                </div>
+                <span style="margin-left: 5px;">Preset</span>
               </div>
-              <div class="form-group mt-1">
-                <select class="form-select" id="metric-type" name="metric-type">
-                  {% for metric_type in metric_types %}
-                  <option value="{{ metric_type }}">{{ metric_type }}</option>
+              <div class="col-auto">
+                <select class="form-select" id="llmConfig" name="llmConfig" onchange="updateLLMMetricConfig();">
+                  <option value="[None]">[None]</option>
+                  {% for config_name in configs.keys() %}
+                  <option value="{{ config_name }}">{{ config_name }}</option>
                   {% endfor %}
                 </select>
               </div>
-            </div>
-
-            <div class="row g-3 mb-3 align-items-center">
               <div class="col-auto">
-                <i class="fa fa-cube"></i>
-                <span style="margin-left: 5px; margin-right: 10px;">Model</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">The identifier of the model you are querying.
-                  </small>
-                </div>
-              </div>
-              <div class="form-group mt-1">
-                <textarea class="form-control" id="model-name" name="model-name" rows="1"></textarea>
+                <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip" title="Add your custom preset to
+          factgenie/config/llm-eval"></i>
               </div>
             </div>
 
-            <div class="row g-3 mb-3 align-items-center">
-              <div class="col-auto">
-                <i class="fa fa-align-left"></i>
-                <span style="margin-left: 5px; margin-right: 10px;">Prompt template</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">Prompt for the model. See the instructions for configuring the
-                    prompt at <a
-                      href="https://github.com/kasnerz/factgenie/wiki/03-LLM-Annotations#-configuring-the-prompt">factgenie
-                      wiki</a>.
-                  </small>
+            <div class="rounded-box mt-4">
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-code"></i>
+                  <span style="margin-left: 5px; margin-right: 10px;">API</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">Select one of the available metric types (or add your own class
+                      to
+                      <code>factgenie/metrics.py</code>).
+                    </small>
+                  </div>
+                </div>
+                <div class="form-group mt-1">
+                  <select class="form-select" id="metric-type" name="metric-type">
+                    {% for metric_type in metric_types %}
+                    <option value="{{ metric_type }}">{{ metric_type }}</option>
+                    {% endfor %}
+                  </select>
                 </div>
               </div>
 
-              <div class="form-group mt-1">
-                <textarea class="form-control" id="prompt-template" name="prompt-template" rows="8"></textarea>
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-cube"></i>
+                  <span style="margin-left: 5px; margin-right: 10px;">Model</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">The identifier of the model you are querying.
+                    </small>
+                  </div>
+                </div>
+                <div class="form-group mt-1">
+                  <textarea class="form-control" id="model-name" name="model-name" rows="1"></textarea>
+                </div>
               </div>
-            </div>
 
-            <div class="row g-3 mb-3 align-items-center">
-              <div class="col-auto">
-                <i class="fa fa-user"></i>
-                <span style="margin-left: 5px; margin-right: 10px;">System message</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">For OpenAI API, this will be sent in the
-                    <code>system_message</code> parameter.
-                  </small>
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-align-left"></i>
+                  <span style="margin-left: 5px; margin-right: 10px;">Prompt template</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">Prompt for the model. See the instructions for configuring the
+                      prompt at <a
+                        href="https://github.com/kasnerz/factgenie/wiki/03-LLM-Annotations#-configuring-the-prompt">factgenie
+                        wiki</a>.
+                    </small>
+                  </div>
                 </div>
-              </div>
 
-              <div class="form-group mt-1">
-                <textarea class="form-control" id="system-message" name="system-message" rows="2"></textarea>
+                <div class="form-group mt-1">
+                  <textarea class="form-control" id="prompt-template" name="prompt-template" rows="8"></textarea>
+                </div>
               </div>
-            </div>
 
-            <div class="row g-3 mb-3 align-items-center">
-              <div class="col-auto">
-                <i class="fa fa-link"></i>
-                <span style=" margin-left: 10px; margin-right: 10px;">API URL</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">For Ollama API, this is the API URL, e.g.
-                    <code>http://my-server.com:11434/api/generate</code>. The parameter is ignored for OpenAI API.
-                  </small>
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-user"></i>
+                  <span style="margin-left: 5px; margin-right: 10px;">System message</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">For OpenAI API, this will be sent in the
+                      <code>system_message</code> parameter.
+                    </small>
+                  </div>
                 </div>
 
+                <div class="form-group mt-1">
+                  <textarea class="form-control" id="system-message" name="system-message" rows="2"></textarea>
+                </div>
               </div>
-              <div class="form-group mt-1">
-                <textarea class="form-control" id="api-url" name="api-url" rows="1"></textarea>
-              </div>
-            </div>
 
-            <div class="row g-3 mb-3 align-items-center">
-              <div class="col-auto">
-                <i class="fa fa-cogs"></i>
-                <span style="margin-left: 10px; margin-right: 10px;">Model arguments</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">API arguments to be passed to the model
-                  </small>
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-link"></i>
+                  <span style=" margin-left: 10px; margin-right: 10px;">API URL</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">For Ollama API, this is the API URL, e.g.
+                      <code>http://my-server.com:11434/api/generate</code>. The parameter is ignored for OpenAI API.
+                    </small>
+                  </div>
+
+                </div>
+                <div class="form-group mt-1">
+                  <textarea class="form-control" id="api-url" name="api-url" rows="1"></textarea>
                 </div>
               </div>
-              <div id="model-arguments">
-              </div>
-              <div class="col-auto mt-1">
-                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addModelArgument();">+</button>
+
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-cogs"></i>
+                  <span style="margin-left: 10px; margin-right: 10px;">Model arguments</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">API arguments to be passed to the model
+                    </small>
+                  </div>
+                </div>
+                <div id="model-arguments">
+                </div>
+                <div class="col-auto mt-1">
+                  <button type="button" class="btn btn-outline-secondary btn-sm"
+                    onclick="addModelArgument();">+</button>
+                </div>
               </div>
-            </div>
 
-            {% include 'forms/annotation_span_categories.html' %}
+              {% include 'forms/annotation_span_categories.html' %}
 
-            <div class="row g-3 mb-3 align-items-center">
-              <div class="col-auto">
-                <i class="fa fa-list-ul"></i>
-                <span style="margin-left: 5px; margin-right: 10px;">Extra arguments</span>
-                <div class="mb-2">
-                  <small class="form-text text-muted">Any other parameters used by the metric.
-                  </small>
+              <div class="row g-3 mb-3 align-items-center">
+                <div class="col-auto">
+                  <i class="fa fa-list-ul"></i>
+                  <span style="margin-left: 5px; margin-right: 10px;">Extra arguments</span>
+                  <div class="mb-2">
+                    <small class="form-text text-muted">Any other parameters used by the metric.
+                    </small>
+                  </div>
                 </div>
-              </div>
 
-              <div id="extra-arguments">
-              </div>
-              <div class="col-auto mt-1">
-                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addExtraArgument();">+</button>
+                <div id="extra-arguments">
+                </div>
+                <div class="col-auto mt-1">
+                  <button type="button" class="btn btn-outline-secondary btn-sm"
+                    onclick="addExtraArgument();">+</button>
+                </div>
               </div>
             </div>
+            <div style="text-align: center;">
+              <button type="button" class="btn btn-outline-secondary mt-3"
+                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-campaign")).show()'>Back</button>
+              <button type="button" class="btn btn-outline-secondary mt-3" data-bs-toggle="modal"
+                data-bs-target="#save-cfg-modal">Save config as...</button>
+              <button type="button" class="btn btn-primary mt-3"
+                onclick=' bootstrap.Tab.getOrCreateInstance($("#nav-tabs-data")).show()'>Next</button>
+            </div>
           </div>
-          <div style="text-align: center;">
-            <button type="button" class="btn btn-outline-secondary mt-3"
-              onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-campaign")).show()'>Back</button>
-            <button type="button" class="btn btn-outline-secondary mt-3" data-bs-toggle="modal"
-              data-bs-target="#save-cfg-modal">Save config as...</button>
-            <button type="button" class="btn btn-primary mt-3"
-              onclick=' bootstrap.Tab.getOrCreateInstance($("#nav-tabs-data")).show()'>Next</button>
-          </div>
-        </div>
 
-        <div id="tab-data" class="tab-pane new-campaign-form" role="tabpanel" tabindex="2">
+          <div id="tab-data" class="tab-pane new-campaign-form" role="tabpanel" tabindex="2">
 
-          {% include 'forms/data_selection.html' %}
+            {% include 'forms/data_selection.html' %}
 
-          <div style="text-align: center;">
-            <button type="button" class="btn btn-outline-secondary mt-3"
-              onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Back</button>
-            <button type="button" class="btn btn-primary mt-3" onclick="createLLMEval();">Create campaign</button>
+            <div style="text-align: center;">
+              <button type="button" class="btn btn-outline-secondary mt-3"
+                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Back</button>
+              <button type="button" class="btn btn-primary mt-3" onclick="createLLMEval();">Create campaign</button>
+            </div>
           </div>
         </div>
-      </div>
-    </form>
-    <div>
+      </form>
+      <div>
 
+      </div>
     </div>
-  </div>
 
-  <div class="modal fade" id="save-cfg-modal" tabindex="-1">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="about-modal-label">Save config as...</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <div id='configarea' class="tab-pane sidepanel-panel w-75" role="tabpanel" tabindex="0">
-            <label for="exampleDataList" class="form-label">Config name</label>
-            <div class="input-group mb-3">
-              <input type="text" class="form-control" id="config-save-filename" list="datalistOptions"
-                placeholder="Click to see existing configurations..."
-                aria-label="Click to see existing configurations..." aria-describedby="basic-addon2">
-              <span class="input-group-text" id="basic-addon2">.yaml</span>
+    <div class="modal fade" id="save-cfg-modal" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="about-modal-label">Save config as...</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div id='configarea' class="tab-pane sidepanel-panel w-75" role="tabpanel" tabindex="0">
+              <label for="exampleDataList" class="form-label">Config name</label>
+              <div class="input-group mb-3">
+                <input type="text" class="form-control" id="config-save-filename" list="datalistOptions"
+                  placeholder="Click to see existing configurations..."
+                  aria-label="Click to see existing configurations..." aria-describedby="basic-addon2">
+                <span class="input-group-text" id="basic-addon2">.yaml</span>
+              </div>
+              <datalist id="datalistOptions">
+                {% for filename in configs.keys() %}
+                <!-- save the name without suffix to variable -->
+                {% set config_name = filename.rstrip(".yaml") %}
+                <option value="{{ config_name }}">{{ filename }}</option>
+                {% endfor %}
+              </datalist>
             </div>
-            <datalist id="datalistOptions">
-              {% for filename in configs.keys() %}
-              <!-- save the name without suffix to variable -->
-              {% set config_name = filename.rstrip(".yaml") %}
-              <option value="{{ config_name }}">{{ filename }}</option>
-              {% endfor %}
-            </datalist>
           </div>
-        </div>
-        <div class="modal-footer">
-          <button type="submit" id="save-cfg-submit" class="btn btn-primary mt-3" onclick="saveConfig('llm_eval')">Save
-            config</button>
+          <div class="modal-footer">
+            <button type="submit" id="save-cfg-submit" class="btn btn-primary mt-3"
+              onclick="saveConfig('llm_eval')">Save
+              config</button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-
-</div>
 
+  </div>
+</body>
 
 <script>
   // variable to be used in factgenie.js
diff --git a/factgenie/templates/login.html b/factgenie/templates/login.html
index 8d43e913..c077495b 100755
--- a/factgenie/templates/login.html
+++ b/factgenie/templates/login.html
@@ -12,33 +12,34 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container">
-  <div class="form-container">
-    <div class="mt-5 form-box">
-      <form action="{{ host_prefix }}/login" method="post">
-        <div class="mb-3 row">
-          <label for="username" class="col-sm-4 col-form-label">Username:</label>
-          <div class="col-sm-8">
-            <input type="text" class="form-control" id="username" name="username">
+  <div class="container">
+    <div class="form-container">
+      <div class="mt-5 form-box">
+        <form action="{{ host_prefix }}/login" method="post">
+          <div class="mb-3 row">
+            <label for="username" class="col-sm-4 col-form-label">Username:</label>
+            <div class="col-sm-8">
+              <input type="text" class="form-control" id="username" name="username">
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="password" class="col-sm-4 col-form-label">Password:</label>
-          <div class="col-sm-8">
-            <input type="password" class="form-control" id="password" name="password">
+          <div class="mb-3 row">
+            <label for="password" class="col-sm-4 col-form-label">Password:</label>
+            <div class="col-sm-8">
+              <input type="password" class="form-control" id="password" name="password">
+            </div>
           </div>
-        </div>
-        <div class="d-flex justify-content-center">
-          <button type="submit" class="btn btn-primary" value="Login">Submit</button>
-        </div>
-      </form>
+          <div class="d-flex justify-content-center">
+            <button type="submit" class="btn btn-primary" value="Login">Submit</button>
+          </div>
+        </form>
+      </div>
     </div>
-  </div>
-
-</div>
 
+  </div>
+</body>
 
 <script>
   // variable to be used in factgenie.js
diff --git a/factgenie/templates/manage_datasets.html b/factgenie/templates/manage_datasets.html
index 7c00e836..a6b6213a 100755
--- a/factgenie/templates/manage_datasets.html
+++ b/factgenie/templates/manage_datasets.html
@@ -13,92 +13,94 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container">
-  <!-- <div class="text-center mt-5" style="font-size: 20px; font-weight: bold;">
+  <div class="container">
+    <!-- <div class="text-center mt-5" style="font-size: 20px; font-weight: bold;">
     Visualize data-to-text generation datasets + annotate LLM outputs.
   </div> -->
-  <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mt-5">← Main page</a>
-  <a type="button" class="btn btn-primary mt-5" data-bs-toggle="modal" data-bs-target="#add-dataset-modal">Add
-    dataset</a>
+    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mt-5">← Main page</a>
+    <a type="button" class="btn btn-primary mt-5" data-bs-toggle="modal" data-bs-target="#add-dataset-modal">Add
+      dataset</a>
 
-  <div class="mt-5">
-    <h3><img src="{{ host_prefix }}/static/img/datasets.png" class="heading-img-inline">
-      <b>Datasets</b>
-    </h3>
+    <div class="mt-5">
+      <h3><img src="{{ host_prefix }}/static/img/datasets.png" class="heading-img-inline">
+        <b>Datasets</b>
+      </h3>
 
-    <table class="table table-hover mt-3">
-      <thead>
-        <tr>
-          <th scope="col" width="5%"></th>
-          <th scope="col" width="12%">Dataset</th>
-          <th scope="col" width="22%">Class</th>
-          <!-- <th scope="col">Description</th> -->
-          <th scope="col" width="8%">Splits</th>
-          <th scope="col" width="8%">Examples</th>
-          <th scope="col" width="5%">Loaded</th>
-          <th scope="col" width="10%">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for dataset_id, dataset in datasets.items() %}
-        <tr>
-          <td><img src="{{ host_prefix }}/static/img/datatypes/{{ dataset.type }}.png" class="intro-img"></td>
-          <td>
-            {% if dataset.enabled %}
-            <a href="{{ host_prefix }}/browse?dataset={{ dataset_id }}&split={{ dataset.splits[0] }}&example_idx=0"
-              class="blue-link">
-              {{ dataset_id
-              }}</a>
-            {% else %}
-            <span class="text-muted"><i>{{ dataset_id }}</i></span>
-            {% endif %}
-          </td>
-          <td>{{ dataset.class }}</td>
-          <!-- <td class="underline-link">{{ dataset.description | safe }}</td> -->
-          <td>
-            {% for split in dataset.splits %}
-            <div class="sub-row"><a
-                href="{{ host_prefix }}/browse?dataset={{ dataset_id }}&split={{ split }}&example_idx=0">{{ split }}</a>
-            </div>
-            {% endfor %}
-          </td>
-          <td>
-            {% for split in dataset.splits %}
-            {{ dataset.example_count[split] }}<br>
-            {% endfor %}
-          </td>
-          <td>
-            <div class="form-check form-switch">
-              <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" {% if dataset.enabled %}
-                checked {% endif %} onclick="setDatasetEnabled('{{ dataset_id }}', this.checked)">
-            </div>
-          </td>
-          <td>
-            <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
-              data-bs-target="#dataset-info-modal-{{ dataset_id }}">
-              <i class="fa fa-info-circle"></i>
-            </a>
-            <a href="{{ host_prefix }}/export_dataset?dataset_id={{ dataset_id }}" class="btn btn-outline-secondary"
-              data-bs-toggle="tooltip" title="Download the dataset">
-              <i class="fa fa-download"></i>
-            </a>
-            <a onclick="deleteDataset('{{ dataset_id }}')" class="btn btn-outline-danger" data-bs-toggle="tooltip"
-              title="Delete the dataset">
-              <i class="fa fa-trash"></i>
-            </a>
-          </td>
-        </tr>
-        {% include 'forms/dataset_info_modal.html' %}
-        {% endfor %}
-      </tbody>
-    </table>
+      <table class="table table-hover mt-3">
+        <thead>
+          <tr>
+            <th scope="col" width="5%"></th>
+            <th scope="col" width="12%">Dataset</th>
+            <th scope="col" width="22%">Class</th>
+            <!-- <th scope="col">Description</th> -->
+            <th scope="col" width="8%">Splits</th>
+            <th scope="col" width="8%">Examples</th>
+            <th scope="col" width="5%">Loaded</th>
+            <th scope="col" width="10%">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for dataset_id, dataset in datasets.items() %}
+          <tr>
+            <td><img src="{{ host_prefix }}/static/img/datatypes/{{ dataset.type }}.png" class="intro-img"></td>
+            <td>
+              {% if dataset.enabled %}
+              <a href="{{ host_prefix }}/browse?dataset={{ dataset_id }}&split={{ dataset.splits[0] }}&example_idx=0"
+                class="blue-link">
+                {{ dataset_id
+                }}</a>
+              {% else %}
+              <span class="text-muted"><i>{{ dataset_id }}</i></span>
+              {% endif %}
+            </td>
+            <td>{{ dataset.class }}</td>
+            <!-- <td class="underline-link">{{ dataset.description | safe }}</td> -->
+            <td>
+              {% for split in dataset.splits %}
+              <div class="sub-row"><a
+                  href="{{ host_prefix }}/browse?dataset={{ dataset_id }}&split={{ split }}&example_idx=0">{{ split
+                  }}</a>
+              </div>
+              {% endfor %}
+            </td>
+            <td>
+              {% for split in dataset.splits %}
+              {{ dataset.example_count[split] }}<br>
+              {% endfor %}
+            </td>
+            <td>
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" {% if dataset.enabled %}
+                  checked {% endif %} onclick="setDatasetEnabled('{{ dataset_id }}', this.checked)">
+              </div>
+            </td>
+            <td>
+              <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
+                data-bs-target="#dataset-info-modal-{{ dataset_id }}">
+                <i class="fa fa-info-circle"></i>
+              </a>
+              <a href="{{ host_prefix }}/export_dataset?dataset_id={{ dataset_id }}" class="btn btn-outline-secondary"
+                data-bs-toggle="tooltip" title="Download the dataset">
+                <i class="fa fa-download"></i>
+              </a>
+              <a onclick="deleteDataset('{{ dataset_id }}')" class="btn btn-outline-danger" data-bs-toggle="tooltip"
+                title="Delete the dataset">
+                <i class="fa fa-trash"></i>
+              </a>
+            </td>
+          </tr>
+          {% include 'forms/dataset_info_modal.html' %}
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </div>
-</div>
-
-{% include 'forms/add_dataset_modal.html' %}
 
+  {% include 'forms/add_dataset_modal.html' %}
+</body>
 <script>
   // variable to be used in factgenie.js
   window.url_prefix = "{{ host_prefix }}";
diff --git a/factgenie/templates/manage_model_outputs.html b/factgenie/templates/manage_model_outputs.html
index 3c0c530d..0ec22a82 100755
--- a/factgenie/templates/manage_model_outputs.html
+++ b/factgenie/templates/manage_model_outputs.html
@@ -13,96 +13,97 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container">
-  <div>
-    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mt-5">← Main page</a>
-    <a type="button" class="btn btn-primary mt-5" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload
-      outputs</a>
-  </div>
+  <div class="container">
+    <div>
+      <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mt-5">← Main page</a>
+      <a type="button" class="btn btn-primary mt-5" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload
+        outputs</a>
+    </div>
 
-  <div class="mt-5">
-    <h3><img src="{{ host_prefix }}/static/img/datasets.png" class="heading-img-inline">
-      <b>Model outputs</b>
-    </h3>
+    <div class="mt-5">
+      <h3><img src="{{ host_prefix }}/static/img/datasets.png" class="heading-img-inline">
+        <b>Model outputs</b>
+      </h3>
 
-    <div class="row g-3 mb-3 mt-3 align-items-center">
-      <div class="col-auto">
-        <span style="margin-left: 5px;">Dataset</span>
-      </div>
-      <div class="col-auto">
-        <select id="dataset-select-overview" class="form-select form-select-sm"
-          style="display: inline-block; margin-right: 10px; max-width: 250px;">
-          {% for name, dataset in datasets.items() %}
-          <option value="{{ name }}">{{ name }}</option>
-          {% endfor %}
-        </select>
+      <div class="row g-3 mb-3 mt-3 align-items-center">
+        <div class="col-auto">
+          <span style="margin-left: 5px;">Dataset</span>
+        </div>
+        <div class="col-auto">
+          <select id="dataset-select-overview" class="form-select form-select-sm"
+            style="display: inline-block; margin-right: 10px; max-width: 250px;">
+            {% for name, dataset in datasets.items() %}
+            <option value="{{ name }}">{{ name }}</option>
+            {% endfor %}
+          </select>
+        </div>
       </div>
-    </div>
 
-    <table class="table table-hover" id="model-out-table">
-      <thead>
-        <tr>
-          <th scope="col">Dataset</th>
-          <th scope="col">Split</th>
-          <th scope="col">Source</th>
-          <th scope="col">Examples</th>
-          <th scope="col">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-      </tbody>
-    </table>
+      <table class="table table-hover" id="model-out-table">
+        <thead>
+          <tr>
+            <th scope="col">Dataset</th>
+            <th scope="col">Split</th>
+            <th scope="col">Source</th>
+            <th scope="col">Examples</th>
+            <th scope="col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
 
-  </div>
+    </div>
 
-  <div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="uploadModalLabel">Upload model outputs</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body text-left">
-          <div class="row mb-3 mt-3 align-items-center">
-            <div class="col-auto">
-              <span>Dataset</span>
+    <div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="uploadModalLabel">Upload model outputs</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body text-left">
+            <div class="row mb-3 mt-3 align-items-center">
+              <div class="col-auto">
+                <span>Dataset</span>
+              </div>
+              <div class="col-auto">
+                <select id="dataset-select" class="form-select form-select-sm"
+                  style="display: inline-block; margin-right: 10px; max-width: 250px;">
+                  {% for name, dataset in datasets.items() %}
+                  <option value="{{ name }}">{{ name }}</option>
+                  {% endfor %}
+                </select>
+              </div>
+              <div class="col-auto">
+                <span>Split</span>
+              </div>
+              <div class="col-auto">
+                <select id="split-select" class="form-select form-select-sm"
+                  style="display: inline-block; margin-right: 10px; max-width: 200px;">
+                </select>
+              </div>
             </div>
-            <div class="col-auto">
-              <select id="dataset-select" class="form-select form-select-sm"
-                style="display: inline-block; margin-right: 10px; max-width: 250px;">
-                {% for name, dataset in datasets.items() %}
-                <option value="{{ name }}">{{ name }}</option>
-                {% endfor %}
-              </select>
+            <div class="mb-3">
+              <label for="setup-id" class="form-label">Setup ID</label>
+              <input type="text" class="form-control" id="setup-id" name="setup-id" placeholder="my-custom-input">
             </div>
-            <div class="col-auto">
-              <span>Split</span>
+            <label for="model-output-upload" class="form-label">Outputs</label>
+            <div class="mb-1"><small class="text-muted">Upload a plain text file containing an output per line.</small>
             </div>
-            <div class="col-auto">
-              <select id="split-select" class="form-select form-select-sm"
-                style="display: inline-block; margin-right: 10px; max-width: 200px;">
-              </select>
+            <div class="mb-3">
+              <input type="file" class="form-control" id="model-output-upload" name="model-output-upload">
             </div>
+            <button type="submit" class="btn btn-primary" onclick="uploadModelOutputs()">Upload</button>
           </div>
-          <div class="mb-3">
-            <label for="setup-id" class="form-label">Setup ID</label>
-            <input type="text" class="form-control" id="setup-id" name="setup-id" placeholder="my-custom-input">
-          </div>
-          <label for="model-output-upload" class="form-label">Outputs</label>
-          <div class="mb-1"><small class="text-muted">Upload a plain text file containing an output per line.</small>
-          </div>
-          <div class="mb-3">
-            <input type="file" class="form-control" id="model-output-upload" name="model-output-upload">
-          </div>
-          <button type="submit" class="btn btn-primary" onclick="uploadModelOutputs()">Upload</button>
         </div>
       </div>
     </div>
   </div>
-</div>
-
+</body>
 
 <script>
   // variable to be used in factgenie.js
diff --git a/factgenie/templates/navbar.html b/factgenie/templates/navbar.html
index 7ff1127b..d6bf833a 100644
--- a/factgenie/templates/navbar.html
+++ b/factgenie/templates/navbar.html
@@ -1,14 +1,12 @@
-<body>
-    <nav class="navbar navbar-light bg-annotate justify-content-center">
-        <a class="navbar-brand" href="{{ host_prefix }}/">
-            <img src="{{ host_prefix }}/static/img/genie.png" width="25px">
-            <span style="margin-left: 5px; font-weight: bold;">factgenie</span>
-        </a>
-    </nav>
-
-    <!-- add a github link with the github icon to the right corner -->
-    <a href="https://github.com/kasnerz/factgenie/" target="_blank"
-        style="position: absolute; top: 0; right: 0; margin: 15px;">
-        <img src="{{ host_prefix }}/static/img/github.png" width="30px">
+<nav class="navbar navbar-light bg-annotate justify-content-center">
+    <a class="navbar-brand" href="{{ host_prefix }}/">
+        <img src="{{ host_prefix }}/static/img/genie.png" width="25px">
+        <span style="margin-left: 5px; font-weight: bold;">factgenie</span>
     </a>
-</body>
\ No newline at end of file
+</nav>
+
+<!-- add a github link with the github icon to the right corner -->
+<a href="https://github.com/kasnerz/factgenie/" target="_blank"
+    style="position: absolute; top: 0; right: 0; margin: 15px;">
+    <img src="{{ host_prefix }}/static/img/github.png" width="30px">
+</a>
\ No newline at end of file
diff --git a/factgenie/templates/outputs.html b/factgenie/templates/outputs.html
index 31612ff9..239e330a 100755
--- a/factgenie/templates/outputs.html
+++ b/factgenie/templates/outputs.html
@@ -12,37 +12,38 @@
   <script src="{{ host_prefix }}/static/js/bootstrap.min.js"></script>
 </head>
 
-{% include 'navbar.html' %}
+<body>
+  {% include 'navbar.html' %}
 
-<div class="container">
-  <!-- <div class="text-center mt-5" style="font-size: 20px; font-weight: bold;">
+  <div class="container">
+    <!-- <div class="text-center mt-5" style="font-size: 20px; font-weight: bold;">
     Visualize data-to-text generation datasets + annotate LLM outputs.
   </div> -->
-  <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mt-5">← Main page</a>
+    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mt-5">← Main page</a>
 
-  <div class="row">
-    {% for name, dataset in datasets.items() %}
-    <div class="col-md-3">
-      <div class="card text-center mt-5">
-        <div class="card-body">
-          <img src="{{ host_prefix }}/static/img/datatypes/{{ dataset.type }}.png" class="intro-img">
-          <a href="{{ host_prefix }}/browse?dataset={{ name }}&split={{ dataset.splits[0] }}&example_idx=0">
-            <h5 class="card-title">{{ name }}</h5>
-          </a>
-          <p class="card-text">{{ dataset.description | safe }}</p>
-          <p class="card-text"><b>splits</b>: {% for split in dataset.splits %}{{ split }}{% if not loop.last %}, {%
-            endif %}{%
-            endfor %}<br>
-            <b>examples</b>: {{ dataset.example_count }}
-          </p>
+    <div class="row">
+      {% for name, dataset in datasets.items() %}
+      <div class="col-md-3">
+        <div class="card text-center mt-5">
+          <div class="card-body">
+            <img src="{{ host_prefix }}/static/img/datatypes/{{ dataset.type }}.png" class="intro-img">
+            <a href="{{ host_prefix }}/browse?dataset={{ name }}&split={{ dataset.splits[0] }}&example_idx=0">
+              <h5 class="card-title">{{ name }}</h5>
+            </a>
+            <p class="card-text">{{ dataset.description | safe }}</p>
+            <p class="card-text"><b>splits</b>: {% for split in dataset.splits %}{{ split }}{% if not loop.last %}, {%
+              endif %}{%
+              endfor %}<br>
+              <b>examples</b>: {{ dataset.example_count }}
+            </p>
+          </div>
         </div>
       </div>
+      {% endfor %}
     </div>
-    {% endfor %}
-  </div>
+</body>
 
-
-  <script>
-    // variable to be used in factgenie.js
-    window.url_prefix = "{{ host_prefix }}";
-  </script>
\ No newline at end of file
+<script>
+  // variable to be used in factgenie.js
+  window.url_prefix = "{{ host_prefix }}";
+</script>
\ No newline at end of file
diff --git a/factgenie/utils.py b/factgenie/utils.py
index ecb66f0f..cd87b877 100644
--- a/factgenie/utils.py
+++ b/factgenie/utils.py
@@ -38,7 +38,9 @@
 
 DATASET_CONFIG_PATH = DIR_PATH / "loaders" / "datasets.yml"
 MAIN_CONFIG = DIR_PATH / "config.yml"
-assert MAIN_CONFIG.exists(), f"Invalid path to config.yml {MAIN_CONFIG=}. Please rename config_TEMPLATE.yml to config.yml. Change the password, update the host profix, etc."
+assert (
+    MAIN_CONFIG.exists()
+), f"Invalid path to config.yml {MAIN_CONFIG=}. Please rename config_TEMPLATE.yml to config.yml. Change the password, update the host prefix, etc."
 
 file_handler = logging.FileHandler("error.log")
 file_handler.setLevel(logging.ERROR)
@@ -790,6 +792,7 @@ def parse_crowdsourcing_config(config):
         "final_message": config.get("finalMessage"),
         "examples_per_batch": int(config.get("examplesPerBatch")),
         "idle_time": int(config.get("idleTime")),
+        "annotation_granularity": config.get("annotationGranularity"),
         "sort_order": config.get("sortOrder"),
         "annotation_span_categories": config.get("annotationSpanCategories"),
         "flags": config.get("flags"),
@@ -840,6 +843,7 @@ def create_crowdsourcing_page(campaign_id, config):
         instructions=instructions_html,
         annotator_prompt=annotator_prompt,
         final_message=final_message_html,
+        annotation_span_categories=config.get("annotation_span_categories", []),
         has_display_overlay='style="display: none"' if not has_display_overlay else "",
         flags=generate_checkboxes(config.get("flags", [])),
     )
@@ -909,4 +913,4 @@ def run_llm_eval(campaign_id, announcer, campaign, datasets, metric, threads):
         campaign.metadata["status"] = "finished"
         campaign.update_metadata()
 
-    return jsonify(success=True, status=campaign.metadata["status"])
\ No newline at end of file
+    return jsonify(success=True, status=campaign.metadata["status"])


Test patch:
diff --git a/factgenie/outputs/quintd1-gsmarena/test/llama2.json b/factgenie/outputs/quintd1-gsmarena/test/llama2.json
index f26bfc75..1373e4ca 100644
--- a/factgenie/outputs/quintd1-gsmarena/test/llama2.json
+++ b/factgenie/outputs/quintd1-gsmarena/test/llama2.json
@@ -823,4 +823,4 @@
             }
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/factgenie/outputs/quintd1-gsmarena/test/mistral.json b/factgenie/outputs/quintd1-gsmarena/test/mistral.json
index 174e863b..1fa11756 100644
--- a/factgenie/outputs/quintd1-gsmarena/test/mistral.json
+++ b/factgenie/outputs/quintd1-gsmarena/test/mistral.json
@@ -823,4 +823,4 @@
             }
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/factgenie/outputs/quintd1-gsmarena/test/zephyr.json b/factgenie/outputs/quintd1-gsmarena/test/zephyr.json
index 304c2f2d..c845dbf0 100644
--- a/factgenie/outputs/quintd1-gsmarena/test/zephyr.json
+++ b/factgenie/outputs/quintd1-gsmarena/test/zephyr.json
@@ -823,4 +823,4 @@
             }
         }
     ]
-}
+}
\ No newline at end of file