fix assignment before ref bug, add examples in index

index.html

@@ -116,31 +116,42 @@
     <p>
       🪞Mirror can help you deal with a wide range of Natural Language Understanding and Information Extraction tasks.
     </p>
+    <p>🔍 Mechanism behind this demo: <a href="https://arxiv.org/abs/2311.05419" target="_blank">Mirror paper</a>.</p>
     <p>
-      🌟Star me on <a href="https://github.com/Spico197/Mirror" target="_blank">GitHub</a>!
+      🌟 Star me on <a href="https://github.com/Spico197/Mirror" target="_blank">GitHub</a>!
     </p>
+    <p>📢 This demo only supports English tasks. For Chinese Information Extraction tasks, please refer to this model: <a href="https://huggingface.co/Spico/mirror-chinese-mrcqa-alpha" target="_blank">Spico/mirror-chinese-mrcqa-alpha</a>.</p>
   </header>
 
   <main>
     <div id="app">
+      <div>
+        <label for="example-select"><strong>Examples</strong></label>
+        <select id="example-select" v-model="selectedExample">
+          <optgroup label="Named Entity Recognition">
+            <option>Person & Nationality</option>
+          </optgroup>
+          <optgroup label="Relation Extraction">
+            <option>Break up</option>
+          </optgroup>
+          <optgroup label="Classification">
+            <option>The most handsome man</option>
+            <option>I'm more handsome!</option>
+          </optgroup>
+          <optgroup label="Machine Reading Comprehension">
+            <option>The former CEO of Apple</option>
+            <option>The new CEO of Apple</option>
+          </optgroup>
+        </select>
+      </div>
       <div>
         <label for="instruction"><strong>Instruction</strong></label>
         <input id="instruction" type="text" v-model="instruction" placeholder="Mirror mirror tell me ..." size="200">
       </div>
       <div>
         <label for="schema"><strong>Schema Labels</strong></label>
-        <p>Split with <code>#</code> for multiple inputs</p>
-        <p>For entities, relations or classification, input <code>{"ent|rel|cls": ["cls1", "type2"]}</code> .</p>
-        <p>For events and hyper relations, input <code>{"type": ["role1", "role2"]}</code> .</p>
+        <p>For entities, relations or classification, input <code>{"ent|rel|cls": ["type1", "type2"]}</code> .</p>
         <input id="schema" type="text" v-model="schema" size="200">
-        <!-- <div>
-          <button @click.prevent="addCls">Class</button>
-          <button @click.prevent="addEnt">Entity</button>
-          <button @click.prevent="addDisconEnt">Discontinuous Entity</button>
-          <button @click.prevent="addRel">Relation</button>
-          <button @click.prevent="addEvent">Event Type</button>
-          <button @click.prevent="addHyperRel">Hyper Relation</button>
-        </div> -->
       </div>
       <div>
         <label for="text"><strong>Text</strong></label>
@@ -198,6 +209,7 @@
           const instruction = ref("")
           const text = ref("")
           const background = ref("")
+          const selectedExample = ref("")
           const schema = ref("{}")
           const results = ref({})
           const timerHandler = ref(0)
@@ -217,6 +229,8 @@
 
           function reset() {
             schema.value = "{}"
+            instruction.value = ""
+            text.value = ""
             clearOutput()
           }
 
@@ -269,6 +283,41 @@
               .finally(() => endTimer())
           }
 
+          watch(
+            () => selectedExample.value,
+            (newValue, oldValue) => {
+              if (newValue !== oldValue) {
+                reset()
+                console.log(newValue)
+                if (newValue === "Person & Nationality") {
+                  instruction.value = "Please identify any entities in the provided text and classify them based on their types."
+                  text.value = "Isaac Newton was an English mathematician."
+                  schema.value = '{"ent": ["person", "nationality"]}'
+                } else if (newValue === "Break up") {
+                  instruction.value = "Please extract the entity relationship triplet."
+                  text.value = "The drama surrounding the high-profile divorce between Hollywood actors Johnny Depp and Amber Heard appears to be over as the couple reportedly reached an amicable settlement."
+                  schema.value = '{"rel": ["break up"]}'
+                } else if (newValue === "The most handsome man") {
+                  instruction.value = "Mirror Mirror tell me, who's the most handsome man in the world?"
+                  text.value = ""
+                  schema.value = '{"cls": ["Tong Zhu", "Leonardo Dicaprio"]}'
+                } else if (newValue === "I'm more handsome!") {
+                  instruction.value = "Mirror Mirror tell me, who's the most handsome man in the world?"
+                  text.value = "Tong Zhu won the Most Handsome Man Award every year for ten consecutive years."
+                  schema.value = '{"cls": ["Tong Zhu", "Leonardo Dicaprio"]}'
+                } else if (newValue === "The former CEO of Apple") {
+                  instruction.value = "Who's the former CEO of Apple?"
+                  text.value = "After Jobs resigned as CEO and became chairman of the board, Cook was named the new chief executive officer of Apple Inc. on August 24, 2011."
+                  schema.value = '{}'
+                } else if (newValue === "The new CEO of Apple") {
+                  instruction.value = "Who's the new CEO of Apple?"
+                  text.value = "After Jobs resigned as CEO and became chairman of the board, Cook was named the new chief executive officer of Apple Inc. on August 24, 2011."
+                  schema.value = '{}'
+                }
+              }
+            }
+          )
+
           return {
             instruction,
             text,
@@ -281,6 +330,7 @@
             searchSecondsString,
             timerHandler,
             isNotEmptyObj,
+            selectedExample,
           }
         }
       }
@@ -288,4 +338,4 @@
   </script>
 </body>
 
-</html>
+</html>

src/task.py

@@ -357,9 +357,9 @@ class SchemaGuidedInstructBertTask(MrcTaggingTask):
             string = tokenizer.decode(token_ids[span[0] : span[1] + 1])
         return (string, self.reset_position(token_ids, span))
 
-    def reset_position(self, token_ids: list[int], span: list[int]) -> list[int]:
-        if isinstance(token_ids, torch.Tensor):
-            input_ids = token_ids.cpu().tolist()
+    def reset_position(self, input_ids: list[int], span: list[int]) -> list[int]:
+        if isinstance(input_ids, torch.Tensor):
+            input_ids = input_ids.cpu().tolist()
         if len(span) < 1:
             return span