Hugging Face's logo

Spaces:
responsibility-framing
/
sociofillmore_public
Build error

App Files Community
sociofillmore_public / sociofillmore /webapp /templates /demo.html
Gosse Minnema
Fix Vue JS version
ddb649c
raw
history blame
26.7 kB
<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">
<!-- <h4 class="mb-3 text-light">What is this all about?</h4> -->
<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>
<!-- <a class="btn btn-primary mt-3">Learn more...</a> -->
</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> &mdash;
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>
<!-- <small><em><strong>[@{altFrame.type}]</strong></em></small> -->
</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>
<!-- <a class="btn btn-primary mx-2"><i class="far fa-file-alt"> </i> Infer from text</a> -->
</div>
<!-- Keyword-assisted frame selection -->
<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">
<!-- <i class="fas fa-chevron-circle-right"></i> -->
<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">
<!-- <p>@{sentence.text}</p> -->
<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}
<!-- <span class="badge bg-primary">@{part.frame}</span> -->
</a>
<a v-if="part.type == 'target' && part.subType == 'altTarget'"
class="btn btn-outline-primary">@{part.text}
<!-- <span class="badge bg-primary">@{part.frame}</span> -->
</a>
</span>
</div>
<div v-if="sentence.relevantTargets.length > 0" class="card-footer">
<!-- <h6>Frames &amp; Perspectives</h6> -->
<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>
<!-- <strong class="mx-2">triggers</strong> -->
<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>
<!-- <span class="badge bg-light text-dark"><i class="fas fa-eye"></i> Main</span> -->
</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>
<!-- JavaScript libraries -->
<!-- Vue -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- Bootstrap -->
<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>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/9ba3f3de18.js" crossorigin="anonymous"></script>
<!-- Custom script -->
<script src="static/demo.js"></script>
</body>
</html>