| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🪞Mirror</title> |
| <link rel="stylesheet" href="https://unpkg.com/boltcss/bolt.min.css"> |
| <script type="importmap"> |
| { |
| "imports": { |
| "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" |
| } |
| } |
| </script> |
| <style> |
| body { |
| max-width: 800px; |
| margin: 40px auto; |
| padding: 0 20px; |
| } |
| |
| .form-group { |
| display: flex; |
| flex-direction: row; |
| justify-content: flex-start; |
| align-items: center; |
| } |
| |
| label { |
| margin-right: 1rem; |
| } |
| |
| button { |
| margin: 0.2rem 0.2rem; |
| } |
| |
| button:hover { |
| background-color: #dbdbdb; |
| } |
| |
| footer { |
| text-align: center; |
| margin-top: 2rem; |
| } |
| |
| input { |
| width: 100%; |
| } |
| |
| .button-group { |
| margin-top: 1rem; |
| margin-bottom: 1rem; |
| } |
| |
| .submit-button { |
| background-color: #ffc83d; |
| color: #d67d00; |
| font-weight: bold; |
| } |
| |
| .lc-button { |
| background-color: #c4e5be; |
| } |
| |
| .lm-button { |
| background-color: #dae7fb; |
| } |
| |
| .lr-button { |
| background-color: #fff3ce; |
| } |
| |
| .submit-button:hover { |
| background-color: #ffc83dc0; |
| } |
| |
| .download-button { |
| background-color: #98ca56; |
| color: white; |
| font-weight: bold; |
| } |
| |
| .download-button:hover { |
| background-color: #98ca56d1; |
| } |
| |
| .output-title { |
| margin-top: 2rem; |
| margin-bottom: 0; |
| display: block; |
| background-color: #98ca56; |
| color: white; |
| font-weight: bold; |
| font-size: large; |
| padding: 6px 15px; |
| border-top-left-radius: 6px; |
| border-top-right-radius: 6px; |
| } |
| |
| .output-box { |
| margin-top: 0; |
| padding: 6px 15px; |
| background-color: white; |
| border: 2px solid #98ca56; |
| border-bottom-left-radius: 6px; |
| border-bottom-right-radius: 6px; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <header> |
| <h1>🪞Mirror</h1> |
| <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>! |
| </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>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> |
| <div> |
| <label for="text"><strong>Text</strong></label> |
| <input id="text" type="text" v-model="text" size="200"> |
| </div> |
| |
| |
| |
| |
|
|
| <div class="button-group"> |
| <button @click.prevent="reset">Reset</button> |
| <button @click.prevent="clearOutput">Clear Output</button> |
| <button class="submit-button" @click.prevent="getResults">Ask Mirror</button> |
| </div> |
|
|
| <div v-if="timerHandler"> |
| <p>⏱️ {{ searchSecondsString }}</p> |
| </div> |
|
|
| <div> |
| <div v-if="isNotEmptyObj(results)"> |
| <label for="output"><strong>Output</strong></label> |
| <table> |
| <thead> |
| <th>Item</th> |
| <th>Predicted</th> |
| </thead> |
| <tbody> |
| <tr v-for="(value, key, index) in results" :key="index"> |
| <template v-if="value.length"> |
| <td>{{ key }}</td> |
| <td>{{ value }}</td> |
| </template> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| </div> |
| </main> |
|
|
| <footer> |
| <hr> |
| Made by Mirror Team w/ 💖 |
| </footer> |
|
|
| <script type="module"> |
| import { createApp, ref, computed, toRaw, watch } from 'vue' |
| |
| createApp( |
| { |
| setup() { |
| const instruction = ref("") |
| const text = ref("") |
| const background = ref("") |
| const selectedExample = ref("") |
| const schema = ref("{}") |
| const results = ref({}) |
| const timerHandler = ref(0) |
| const searchSeconds = ref(0.0) |
| const searchSecondsString = computed(() => { |
| return `${searchSeconds.value.toFixed(1)}s` |
| }) |
| |
| function isNotEmptyObj(obj) { |
| return Object.keys(obj).length > 0 |
| } |
| |
| function clearOutput() { |
| timerHandler.value = 0 |
| results.value = {} |
| } |
| |
| function reset() { |
| schema.value = "{}" |
| instruction.value = "" |
| text.value = "" |
| clearOutput() |
| } |
| |
| function startTimer() { |
| searchSeconds.value = 0.0 |
| timerHandler.value = setInterval(() => { |
| searchSeconds.value += 0.1 |
| }, 100) |
| } |
| |
| function endTimer() { |
| if (timerHandler.value > 0) { |
| clearInterval(timerHandler.value) |
| } |
| } |
| |
| function getResults() { |
| clearOutput() |
| startTimer() |
| const data = { |
| "id": Date.now().toString(), |
| "instruction": instruction.value, |
| "schema": JSON.parse(schema.value), |
| "text": text.value, |
| "background": background.value, |
| "ans": {}, |
| } |
| const postData = JSON.stringify({ |
| "data": [data], |
| }) |
| fetch( |
| "/process", |
| { |
| method: "POST", |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: postData, |
| } |
| ) |
| .then((response) => response.json()) |
| .then((json) => { |
| if (json["ok"] === false) { |
| alert(json["msg"]) |
| } else { |
| results.value = json["results"][0]["results"] |
| } |
| }) |
| .catch((err) => { alert(err) }) |
| .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, |
| background, |
| schema, |
| results, |
| reset, |
| clearOutput, |
| getResults, |
| searchSecondsString, |
| timerHandler, |
| isNotEmptyObj, |
| selectedExample, |
| } |
| } |
| } |
| ).mount("#app") |
| </script> |
| </body> |
|
|
| </html> |
