Spaces:
Sleeping
Sleeping
| <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>paper-hero</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; | |
| } | |
| .button-group { | |
| margin-top: 3rem; | |
| } | |
| .search-button { | |
| background-color: #ffc83d; | |
| color: #d67d00; | |
| font-weight: bold; | |
| } | |
| .search-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>💪 Paper Hero</h1> | |
| <p> | |
| Paper Hero is a toolkit to help search for papers from aclanthology, arXiv and dblp. | |
| </p> | |
| <p>GitHub Address: <a href="https://github.com/Spico197/paper-hero" target="_blank">Spico197/paper-hero</a></p> | |
| </header> | |
| <main> | |
| <div id="app"> | |
| <div class="form-group"> | |
| <label for="method"><strong>Source</strong></label> | |
| <select id="method" v-model="method"> | |
| <option value="" disabled>Please select a source</option> | |
| <option value="aclanthology">ACL Anthology</option> | |
| <option value="arxiv">ArXiv</option> | |
| <option value="dblp">DBLP</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="max-res"><strong>Max Results</strong></label> | |
| <input id="max-res" type="number" v-model="maxResults"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="add-field"><strong>New Field</strong></label> | |
| <select id="add-field" v-model="addField"> | |
| <option value="" disabled>Please select a field</option> | |
| <option :value="field" v-for="field in restFields">{{ field }}</option> | |
| </select> | |
| <button @click.prevent="addNewField">Add</button> | |
| </div> | |
| <hr> | |
| <div> | |
| <p><strong>Fields</strong></p> | |
| <p> | |
| Add <code>&&</code> to represent <code>AND</code> logic, e.g. <code>span-based && event extraction</code> | |
| means <em>span-based</em> and <em>event extraction</em> both appear in a field. | |
| </p> | |
| <p> | |
| For <code>year</code> and <code>month</code> fields, the query should | |
| follow the <code>start && end</code> format, | |
| e.g. year <code>2006 && 2013</code> means searching for papers published | |
| between <code>2006</code> and <code>2013</code>. | |
| </p> | |
| <div v-for="(groups, field) in query"> | |
| <label :for="field"><strong>{{ field }}</strong></label> | |
| <div v-for="(group, index) in groups"> | |
| <input class="field-input" type="text" v-model="query[field][index]" placeholder="text1 && text2 && text3" | |
| size="50"> | |
| <button @click.prevent="rmAnd(field, index)">X</button> | |
| </div> | |
| <button @click.prevent="addOr(field)">OR</button> | |
| </div> | |
| </div> | |
| <div v-if="timerHandler"> | |
| <p>⏱️ {{ searchSecondsTwoDecimal }}</p> | |
| </div> | |
| <div v-if="output"> | |
| <p class="output-title">Output Info</p> | |
| <p class="output-box"> | |
| {{ output }} | |
| <br> | |
| You are ready to download the results by clicking the download button below. | |
| <br> | |
| Like this tool? ⭐ me on <a href="https://github.com/Spico197/paper-hero" target="_blank">GitHub</a> ! | |
| </p> | |
| </div> | |
| <div class="button-group"> | |
| <button @click.prevent="resetQuery">Reset</button> | |
| <button class="search-button" @click.prevent="search">Search</button> | |
| <a :href="downloadHref" :download="`${method}.json`" v-if="downloadHref"> | |
| <button class="search-button download-button">Download</button> | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <hr> | |
| Made by <a href="https://spico197.github.io" target="_blank">Tong Zhu</a> w/ 💖 | |
| </footer> | |
| <script type="module"> | |
| import { createApp, ref, computed, toRaw, watch } from 'vue' | |
| createApp( | |
| { | |
| setup() { | |
| const method = ref("aclanthology") | |
| const query = ref({ title: [[]] }) | |
| const maxResults = ref(2000) | |
| const addField = ref("") | |
| const allFields = ["title", "author", "abstract", "venue", "year", "month"] | |
| const downloadUrl = ref('') | |
| const downloadToken = ref('') | |
| const downloadHref = ref('') | |
| const output = ref('') | |
| const timerHandler = ref(0) | |
| const searchSeconds = ref(0.0) | |
| const searchSecondsTwoDecimal = computed(() => { | |
| return `${searchSeconds.value.toFixed(1)}s` | |
| }) | |
| const restFields = computed(() => { | |
| let rest = [] | |
| for (const field of allFields) { | |
| if (!(field in query.value)) { | |
| rest.push(field) | |
| } | |
| } | |
| return rest | |
| }) | |
| function addNewField() { | |
| if (addField.value) { | |
| query.value[addField.value] = [[]] | |
| addField.value = "" | |
| } | |
| } | |
| function rmAnd(field, index) { | |
| if (query.value[field].length == 1) { | |
| delete query.value[field] | |
| } else { | |
| query.value[field].splice(index, 1) | |
| } | |
| } | |
| function addOr(field) { | |
| query.value[field].push([]) | |
| } | |
| function resetOutput() { | |
| output.value = "" | |
| downloadUrl.value = "" | |
| downloadToken.value = "" | |
| URL.revokeObjectURL(downloadHref.value) | |
| downloadHref.value = "" | |
| searchSeconds.value = 0.0 | |
| timerHandler.value = 0 | |
| searchSecondsTwoDecimal.value = "" | |
| } | |
| function resetQuery() { | |
| query.value = { title: [[]] } | |
| resetOutput() | |
| } | |
| function startTimer() { | |
| console.log("start") | |
| timerHandler.value = setInterval(() => { | |
| searchSeconds.value += 0.1 | |
| }, 100) | |
| } | |
| function endTimer() { | |
| console.log("end") | |
| if (timerHandler.value > 0) { | |
| console.log("endi") | |
| clearInterval(timerHandler.value) | |
| } | |
| } | |
| function search() { | |
| resetOutput() | |
| startTimer() | |
| let q = {} | |
| for (const prop in query.value) { | |
| q[prop] = [] | |
| for (let i = 0; i < query.value[prop].length; i++) { | |
| if (query.value[prop][i].length > 0) { | |
| let andString = toRaw(query.value[prop][i]) | |
| let andStrings = andString.split('&&') | |
| for (let j = 0; j < andStrings.length; j++) { | |
| andStrings[j] = andStrings[j].trim() | |
| } | |
| q[prop].push(andStrings) | |
| } | |
| } | |
| if (q[prop].length < 1) { | |
| delete q[prop] | |
| } | |
| } | |
| const postData = JSON.stringify({ | |
| "method": method.value, | |
| "query": q, | |
| "max_results": maxResults.value, | |
| "return_content": false, | |
| }) | |
| fetch( | |
| "/api/", | |
| { | |
| method: "POST", | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: postData, | |
| } | |
| ) | |
| .then((response) => response.json()) | |
| .then((json) => { | |
| if (json["ok"] === false) { | |
| alert(json["msg"]) | |
| } else { | |
| downloadUrl.value = json["url"] | |
| downloadToken.value = json["token"] | |
| output.value = `${json["msg"]}, #matched paper: ${json["paper"]}` | |
| } | |
| }) | |
| .catch((err) => { alert(err) }) | |
| .finally(() => endTimer()) | |
| } | |
| watch(downloadUrl, (newUrl, oldUrl) => { | |
| if (downloadToken.value) { | |
| fetch( | |
| `/download/?u=${downloadUrl.value}&t=${downloadToken.value}`, | |
| { | |
| method: "GET", | |
| } | |
| ) | |
| .then((response) => response.blob()) | |
| .then((data) => { | |
| downloadHref.value = URL.createObjectURL(data) | |
| }) | |
| } | |
| }) | |
| return { | |
| method, | |
| query, | |
| restFields, | |
| addField, | |
| addNewField, | |
| search, | |
| rmAnd, | |
| addOr, | |
| resetQuery, | |
| maxResults, | |
| output, | |
| downloadUrl, | |
| downloadHref, | |
| searchSeconds, | |
| timerHandler, | |
| searchSecondsTwoDecimal, | |
| } | |
| } | |
| } | |
| ).mount("#app") | |
| </script> | |
| </body> | |
| </html> |