|
<html> |
|
|
|
<head> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" |
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> |
|
<link rel="stylesheet" href="static/themestr.css"> |
|
</head> |
|
|
|
|
|
<body> |
|
|
|
<div id="sociofillmore-demo" class="mx-auto" style="max-width: 1350px;"> |
|
<div class="py-5"> |
|
<div class="bg-primary mx-5 px-5 py-5"> |
|
<h1 class="display-3 text-light">SocioFillmore</h1> |
|
<h3 class="text-light">Computational Frame Semantics for Events in Society</h4> |
|
</div> |
|
<div v-show="showIntroductionBox" class="bg-dark text-light mx-5 p-5"> |
|
<div class="row text-center"> |
|
|
|
<p class="mx-5 px-5 mb-3 fs-3"> |
|
When using language, we talk about events differently depending on where |
|
we find ourselves in |
|
<em>space</em>, |
|
<em>time</em>, |
|
<em>society</em>, and |
|
<em>ideology</em>. |
|
</p> |
|
</div> |
|
<div class="mx-3 text-center"> |
|
<div class="fs-5 d-flex flex-wrap"> |
|
<div class="mx-auto"> |
|
<i class="far fa-comment"></i> |
|
<em class="text-secondary"> |
|
Did <em>I <strong>lend</strong> you a book</em> |
|
or did <em>you <strong>borrow</strong> a book from me</em>?</em> |
|
</div> |
|
<div class="mx-auto"> |
|
<i class="far fa-comment"></i> |
|
<em class="text-secondary"> |
|
Did <em>planes <strong>hit</strong> the WTC</em> |
|
or do we remember <em>the 9/11 <strong>attacks</strong></em>?</em> |
|
</div> |
|
</div> |
|
<div class="fs-5 d-flex flex-wrap"> |
|
<div class="mx-auto"> |
|
<i class="far fa-comment"></i> |
|
<em class="text-secondary"> |
|
Did <em>a driver <strong>injure</strong> a child</em> |
|
or did <em>a cyclist <strong>collide</strong> with a car</em>?</em> |
|
</div> |
|
<div class="mx-auto"> |
|
<i class="far fa-comment"></i> |
|
<em class="text-secondary"> |
|
Did <em>a man <strong>murder</strong> a woman</em> |
|
or did <em>a tragic <strong>incident</strong></em> occur?</em> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-show="showIntroductionBox" class="bg-secondary text-dark mx-5 p-5"> |
|
<p class="fs-3 text-center"> |
|
This NLP tool based on <em>frame semantics</em> and <em>construction grammar</em> can help visualize |
|
<em>perspective shifts</em> caused by <em>backgrounding</em> of event participants and their |
|
<em>agentivity</em>. |
|
</p> |
|
|
|
</div> |
|
<div class="mx-5 p-2 bg-secondary text-primary"> |
|
<div class="form-check form-check-inline form-switch mx-auto"> |
|
<input v-model="showIntroductionBox" class="form-check-input" type="checkbox" checked> |
|
<label class="form-check-label"><i>Show introduction box</i></label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="py-3"> |
|
<div class="bg-dark text-light mx-5"> |
|
<div class="p-5"> |
|
<div class="py-2"> |
|
<span class="fs-3"> |
|
How would you like to use the app? |
|
</span> |
|
</div> |
|
<span class=""> |
|
<a v-on:click="startInteractiveMode" class="btn btn-primary fs-4 mr-3"><i |
|
class="fas fa-robot"></i> |
|
Interactive Mode</a> |
|
</span> |
|
<span> |
|
<a href="explore" class="btn btn-primary fs-4 mx-3"><i class="fas fa-database"></i> Explore Existing |
|
Datasets</a> |
|
</span> |
|
</div> |
|
<div class="p-2 text-primary"> |
|
<div class="form-check form-check-inline form-switch mx-auto"> |
|
<input v-model="showExplanationText" class="form-check-input" type="checkbox" checked> |
|
<label class="form-check-label"><i>Show explanatory texts</i></label> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-show="interactiveModeEnabled" class="bg-primary text-light mx-5 py-5 px-5"> |
|
<h2 ref="interactiveModeHeading" class="text-light mb-5">Interactive Mode</h2> |
|
<div v-show="showExplanationText"> |
|
<p class="fs-5">First, define the real-world |
|
<em class="bg-dark mx-1 px-2 py-1"><i class="fas fa-globe-europe"></i> event type</em> |
|
that you would like to analyze. |
|
</p> |
|
<a v-on:click="showEventExample()" class="btn btn-outline-secondary text-dark btn-xs"><i |
|
class="far fa-question-circle"></i> |
|
Show me an example |
|
</a> |
|
|
|
</div> |
|
<div class="bg-light text-dark m-5 p-3"> |
|
<h4 class="mb-4">Event type</h4> |
|
<div class="input-group mb-2"> |
|
<input v-model="eventTypeName" class="form-control border border-primary" type="text" |
|
placeholder="Event type name"> |
|
</div> |
|
<div class="input-group mb-2"> |
|
<textarea v-model="eventTypeDescr" class="form-control border border-primary" type="text" |
|
rows="4" placeholder="Describe your event type"></textarea> |
|
|
|
</div> |
|
</div> |
|
|
|
<div v-show="showExplanationText"> |
|
|
|
<p class="fs-5">Next, define a set of <em class="bg-dark mx-1 px-2 py-1"><i |
|
class="fas fa-vector-square"></i> frames</em> — |
|
pieces of conceptual information the define how language users imagine and describe your |
|
event. If you're not sure which frames to use, we can help you find relevant frames either using |
|
a keyword search or by automatically processing a text that you provide. |
|
</p> |
|
<a v-on:click="showFrameExample()" class="btn btn-outline-secondary text-dark btn-xs"><i |
|
class="far fa-question-circle"></i> Show me an example</a> |
|
</div> |
|
<div class="bg-light text-dark m-5 p-3"> |
|
<h4 class="mb-2">Semantic Frames</h4> |
|
<p>Select up to three frames that define your event. |
|
Where applicable, we will automatically detect further frames that provide alternative |
|
perspectives on your event.</p> |
|
<div class="container"> |
|
<div class="my-2 row row-cols-4 justify-content-center"> |
|
<div v-for="(frame, idx) in primaryFrames" class="mx-2"> |
|
<div class="mt-3 mb-1 border border-dark border-3 rounded align-center" |
|
style="font-size: 300%;"> |
|
<div class="text-center">@{idx + 1}</div> |
|
</div> |
|
<div v-if="frame"> |
|
<div><button v-on:click="removeFrame(frame.name)" |
|
class="btn btn-small btn-outline-primary w-100 mb-1"><i |
|
class="fas fa-trash"></i></button></div> |
|
<div class="card border-primary mb-3" style="max-width: 18rem;"> |
|
<div class="card-header justify-content-between d-flex"> |
|
<div class="text-primary"><i class="fas fa-eye"></i> Main Perspective</div> |
|
</div> |
|
<div class="card-body"> |
|
<h6 class="card-title text-primary mb-3"><i class="fas fa-vector-square" |
|
style="font-size: 75%;"></i> @{frame.name}</h6> |
|
<p class="card-text" v-html="frame.description"></p> |
|
<div v-if="frame.typicalExemplar" class="bg-info text-white p-2"> |
|
<strong><em>@{frame.typicalExemplar.text}</em></strong> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-for="altFrame in frame.altPerspectives" class="card border-secondary mb-3" |
|
style="max-width: 18rem;"> |
|
<div class="card-header"><i class="fas fa-eye"></i> @{altFrame.type} Perspective |
|
</div> |
|
<div class="card-body"> |
|
<h6 class="card-title mb-3"><i class="fas fa-vector-square" |
|
style="font-size: 75%;"></i> @{altFrame.name}</h5> |
|
|
|
</h6> |
|
<p class="card-text" v-html="altFrame.description"></p> |
|
<div v-if="altFrame.typicalExemplar" class="bg-info text-white p-2"> |
|
<strong><em>@{altFrame.typicalExemplar.text}</em></strong> |
|
</div> |
|
</div> |
|
<div class="card-footer"><button v-on:click="switchFrame(idx, altFrame.name)" |
|
class="btn btn-dark btn-sm w-100"><i class="fas fa-retweet"></i> Switch |
|
Main Perspective </button></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<h6 class="my-2">Add frames manually</h3> |
|
<div class="input-group my-2"> |
|
<input v-model="frameToAdd" class="form-control border border-primary" type="text" |
|
placeholder="Add a frame..."> |
|
<button v-on:click="addFrame(frameToAdd)" class="btn btn-primary"><i |
|
class="fas fa-plus"></i></button> |
|
</div> |
|
<h6 class="my-2">Help me choose frames</h6> |
|
<a v-on:click="showKeywords()" class="btn btn-primary mx-2"><i class="fas fa-book"></i> |
|
Infer |
|
from keywords</a> |
|
|
|
</div> |
|
|
|
|
|
<div v-show="keywordAreaShown" class="bg-dark p-3"> |
|
<div v-show="showExplanationText"> |
|
<p class="fs-5">To help you choose frames, please enter some <em |
|
class="bg-light text-dark mx-1 px-2 py-1"><i class="fas fa-book"></i> keywords</em> |
|
describing your |
|
event:</p> |
|
</div> |
|
<div class="bg-light text-dark m-5 p-3"> |
|
<h4 ref="keywordHeading" class="mb-2">Keywords</h4> |
|
<p v-show="selectedKeywords.length == 0" class="fs-6"><i>No keywords selected yet.</i></p> |
|
<p v-show="showInvalidKeywordWarning" class="fs-6 bg-warning">One or more of the keywords |
|
you |
|
selected are invalid.</p> |
|
<a v-for="kwd in selectedKeywords" v-on:click="removeKeyword" v-bind:title="kwd.text" |
|
class="btn btn-info fs-6 m-2"><i class="fas fa-book"></i> @{kwd.text}</a> |
|
<p v-show="selectedKeywords.length > 0" class="m-2"><i>(Click a keyword to remove it)</i> |
|
</p> |
|
<div class="input-group my-2"> |
|
<input v-model="keywordToAdd" class="form-control border border-primary" type="text" |
|
placeholder="Add a keyword..."> |
|
<button v-on:click="addKeyword()" class="btn btn-primary"><i |
|
class="fas fa-plus"></i></button> |
|
</div> |
|
<div> |
|
<div v-if="keywordSuggestedFrames.length > 0" class="my-2 mr-5"> |
|
<h5>Suggested frames</h5> |
|
<p>Based on your keywords, we suggest the frames listed below.</p> |
|
<p>Frames marked with the eye symbol ("<i class="fas fa-eye"></i>") are more likely to |
|
yield interesting |
|
results because they allow for automatically detecting alternative perspectives on |
|
the event. </p> |
|
</div> |
|
<div v-for="frm in keywordSuggestedFrames" class="d-flex my-3"> |
|
<div class="flex-grow-1 bg-secondary text-dark"> |
|
<div class="p-2"> |
|
<h6>@{frm.text} <i v-if="frm.altPerspectives.length > 0" class="fas fa-eye"></i> |
|
</h6> |
|
<p><small v-html="frm.description"></small></p> |
|
</div> |
|
<div v-if="frm.exemplars.length > 0" class="bg-info text-white"> |
|
<div class="p-2"> |
|
<h6><strong>Examples</strong></h6> |
|
</div> |
|
<div :id="'carousel-examples-' + frm.text" |
|
class="carousel bg-info text-white slide w-100" data-bs-ride="false" |
|
data-bs-interval="false"> |
|
<div class="carousel-inner"> |
|
<div v-for="(ex, idx) in frm.exemplars" |
|
:class="{ 'carousel-item': true, 'active': idx === 0 }"> |
|
<div class="d-block w-100 p-4"> |
|
<div class="text-center mx-auto"> |
|
<small><strong><em>...@{ex.text}...</em></strong></small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<button class="carousel-control-prev" type="button" |
|
:data-bs-target="'#carousel-examples-' + frm.text" data-bs-slide="prev"> |
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span> |
|
<span class="visually-hidden">Previous</span> |
|
</button> |
|
<button class="carousel-control-next" type="button" |
|
:data-bs-target="'#carousel-examples-' + frm.text" data-bs-slide="next"> |
|
<span class="carousel-control-next-icon" aria-hidden="true"></span> |
|
<span class="visually-hidden">Next</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<button v-on:click="addFrame(frm.text)" class="btn btn-primary"> |
|
|
|
<span class="translate-middle"> |
|
<strong>SELECT</strong> |
|
</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div v-show="showExplanationText"> |
|
<p class="mt-5 fs-5"> |
|
Enter the text you want to analyze below. |
|
</p> |
|
<a v-on:click="showTextExample()" class="btn btn-outline-secondary text-dark btn-xs"><i |
|
class="far fa-question-circle"></i> Show me an example</a> |
|
</div> |
|
|
|
<div class="bg-light text-dark m-5 p-3"> |
|
<h4 class="mb-2">Text Analysis</h4> |
|
<p><em>Powered by LOME <a href="https://aclanthology.org/2021.eacl-demos.19/">(Xia et al. EACL 2021)</a></em></p> |
|
<p>Enter any text in Italian, Dutch, or English.</p> |
|
|
|
<div class="input-group my-2"> |
|
<select v-model="analysisLanguage" class="form-select form-select-sm" aria-label=".form-select-sm example"> |
|
<option disabled value="">Select a language...</option> |
|
<option value="it">Italian</option> |
|
<option value="nl">Dutch</option> |
|
<option value="en">English</option> |
|
</select> |
|
</div> |
|
<div class="input-group my-2"> |
|
<textarea v-model="textToAnalyze" class="form-control border border-primary" type="text" |
|
placeholder="Enter your text"></textarea> |
|
<button v-on:click="analyzeText(textToAnalyze, analysisLanguage)" class="btn btn-primary">GO</button> |
|
</div> |
|
<div class="my-2"> |
|
<div v-show="analyzingTextBusy" class="spinner-border text-info" role="status"> |
|
<span class="visually-hidden">Loading...</span> |
|
</div> |
|
|
|
<div> |
|
<div v-for="(sentence, sentIdx) in analyzedSentences" class="card m-3"> |
|
<div class="card-header"> |
|
<small>sentence @{sentIdx + 1}</small> |
|
</div> |
|
<div class="card-body"> |
|
|
|
<span v-for="part in sentence.textParts" class="mx-1"> |
|
<span v-if="part.type == 'nonTarget'">@{part.text}</span> |
|
<a v-if="part.type == 'target' && part.subType == 'otherTarget'" |
|
data-bs-toggle="tooltip" data-bs-placement="top" :title="part.frame" |
|
class="btn btn-outline-secondary text-dark">@{part.text}</a> |
|
<a v-if="part.type == 'target' && part.subType == 'primaryTarget'" |
|
class="btn btn-outline-primary">@{part.text} |
|
|
|
</a> |
|
<a v-if="part.type == 'target' && part.subType == 'altTarget'" |
|
class="btn btn-outline-primary">@{part.text} |
|
|
|
</a> |
|
</span> |
|
</div> |
|
|
|
<div v-if="sentence.relevantTargets.length > 0" class="card-footer"> |
|
|
|
<ul class="list-group list-group-flush bg-secondary"> |
|
<li v-for="tgt in sentence.relevantTargets" |
|
class="list-group-item bg-dark text-white"> |
|
<small> |
|
<button class="btn btn-outline-primary text-light btn-sm"> |
|
<div><em>trigger</em></div> |
|
<div><strong>@{tgt.text}</em></div> |
|
</button> |
|
|
|
<button v-if="tgt.subType == 'primaryTarget'" |
|
class="btn btn-outline-light btn-sm ms-3"> |
|
<div><em>frame</em></div> |
|
<div><strong>@{tgt.frame}</strong></div> |
|
|
|
</button> |
|
<button v-if="tgt.subType == 'altTarget'" |
|
class="btn btn-outline-light btn-sm ms-3"> |
|
<div><em>frame</em></div> |
|
<div><strong> |
|
@{tgt.frame}</strong></div> |
|
</button> |
|
<button v-if="tgt.subType == 'altTarget'" |
|
class="btn btn-outline-light btn-sm ms-3"> |
|
<div><span class="badge bg-light text-dark ms-1"><i |
|
class="fas fa-eye"></i> |
|
@{tgt.perspectiveType}</span><em> of</em></div> |
|
<div> |
|
<strong>@{tgt.perspectiveOn}</strong> |
|
|
|
</div> |
|
</button> |
|
<button class="btn btn-outline-light btn-sm ms-3"> |
|
<div><em>grammar</em></div> |
|
<div> |
|
<strong>@{tgt.grammarInfo}</strong> |
|
</div> |
|
</button> |
|
<button v-for="role in tgt.roles" |
|
class="btn btn-outline-light btn-sm ms-3"> |
|
<div><em>role</em> <span class="badge bg-light text-dark ms-1"> |
|
@{role.name}</span></div> |
|
<div> |
|
<strong data-bs-toggle="tooltip" data-bs-placement="top" :title="role.spanTxt">@{role.spanTxtClipped}</strong> |
|
</div> |
|
</button> |
|
|
|
</small> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> |
|
|
|
<script src="https://code.jquery.com/jquery-3.5.0.min.js" |
|
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" |
|
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" |
|
crossorigin="anonymous"></script> |
|
|
|
<script src="https://kit.fontawesome.com/9ba3f3de18.js" crossorigin="anonymous"></script> |
|
|
|
<script src="static/demo.js"></script> |
|
</body> |
|
|
|
</html> |
|
|
