|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<title>FrameNet Parser</title> |
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" |
|
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" |
|
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" |
|
crossorigin="anonymous"></script> |
|
<style> |
|
.highlight { |
|
border: 2px solid; |
|
color: #232323; |
|
margin: 4px 6px 4px 3px; |
|
vertical-align: middle; |
|
box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.1); |
|
position: relative; |
|
cursor: default; |
|
min-width: 26px; |
|
line-height: 22px; |
|
display: flex; |
|
} |
|
|
|
.highlight:last-child { |
|
margin-right: 4px; |
|
} |
|
|
|
.highlight:first-child { |
|
margin-left: 0; |
|
} |
|
|
|
.highlight, |
|
.highlight span { |
|
transition: background-color .1s ease, |
|
box-shadow .1s ease, |
|
opacity .1s ease; |
|
} |
|
|
|
.highlight.short-text { |
|
text-align: center; |
|
} |
|
|
|
.highlight__label { |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
padding: 0 8px; |
|
text-align: center; |
|
user-select: none; |
|
} |
|
|
|
.highlight__label strong, |
|
.highlight__label span.highlight__label__secondary-label { |
|
display: block; |
|
font-size: 11px; |
|
color: #fff; |
|
-webkit-font-smoothing: subpixel-antialiased; |
|
letter-spacing: 0.1em; |
|
} |
|
|
|
.highlight__label strong { |
|
text-transform: uppercase; |
|
} |
|
|
|
.highlight__label span.highlight__label__secondary-label { |
|
opacity: .75; |
|
padding-left: 6px; |
|
} |
|
|
|
.highlight__content { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
padding: 2px 2px 2px 6px; |
|
} |
|
|
|
|
|
|
|
.highlight-container.highlight-container--bottom-labels .highlight.bottom { |
|
margin-top: 6px; |
|
} |
|
|
|
.highlight.bottom { |
|
display: block; |
|
white-space: normal; |
|
} |
|
|
|
.highlight.bottom .highlight__content:after { |
|
content: " "; |
|
padding-right: 3px; |
|
} |
|
|
|
.highlight.bottom .highlight__label { |
|
line-height: 14px; |
|
padding-top: 1px; |
|
} |
|
|
|
|
|
|
|
.highlight.top { |
|
flex-direction: column; |
|
white-space: normal; |
|
} |
|
|
|
.highlight.top .highlight__label { |
|
min-height: 22px; |
|
} |
|
|
|
|
|
|
|
.highlight.active, |
|
.highlight.active span { |
|
color: #fff; |
|
} |
|
|
|
.highlight.active .highlight:not(.active) span { |
|
color: #232323; |
|
} |
|
|
|
.highlight.clickable { |
|
cursor: pointer; |
|
} |
|
|
|
.highlight.clickable.clicking { |
|
opacity: 0.66; |
|
transition-duration: 0s; |
|
} |
|
|
|
.clicking .highlight, |
|
.clicking .highlight span, |
|
.clicking .highlight:before, |
|
.clicking .highlight:after { |
|
transition-duration: 0s; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.highlight.gray { |
|
background: #f2f4f6; |
|
} |
|
|
|
.highlight.gray, |
|
.highlight-arrow--gray .highlight-arrow__triangle { |
|
border-color: #a0aab5; |
|
} |
|
|
|
.highlight.gray .highlight__label, |
|
.highlight-arrow--gray .highlight-arrow__stalk, |
|
.highlight.gray .highlight__button .highlight__button__body { |
|
background-color: #a0aab5; |
|
} |
|
|
|
.highlight.gray.active { |
|
background: #a0aab5; |
|
} |
|
|
|
.highlight.gray.active .highlight__label { |
|
background-color: #aab3bd; |
|
} |
|
|
|
.highlight.gray .highlight__button svg { |
|
fill: #a0aab5; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.blue { |
|
background: #edf4fa; |
|
} |
|
|
|
.highlight.blue, |
|
.highlight-arrow--blue .highlight-arrow__triangle { |
|
border-color: #4db1f7; |
|
} |
|
|
|
.highlight.blue > .highlight__label, |
|
.highlight-arrow--blue .highlight-arrow__stalk, |
|
.highlight.blue .highlight__button .highlight__button__body { |
|
background-color: #4db1f7; |
|
} |
|
|
|
.highlight.blue.active { |
|
background: #4db1f7; |
|
} |
|
|
|
.highlight.blue.active > .highlight__label { |
|
background-color: #5fb9f8; |
|
} |
|
|
|
.highlight.blue .highlight__button svg { |
|
fill: #4db1f7; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.green { |
|
background: #f1f4f1; |
|
} |
|
|
|
.highlight.green, |
|
.highlight-arrow--green .highlight-arrow__triangle { |
|
border-color: #90ac4e; |
|
} |
|
|
|
.highlight.green > .highlight__label, |
|
.highlight-arrow--green .highlight-arrow__stalk, |
|
.highlight.green .highlight__button .highlight__button__body { |
|
background-color: #90ac4e; |
|
} |
|
|
|
.highlight.green.active { |
|
background: #90ac4e; |
|
} |
|
|
|
.highlight.green.active > .highlight__label { |
|
background-color: #9bb460; |
|
} |
|
|
|
.highlight.green .highlight__button svg { |
|
fill: #90ac4e; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.pink { |
|
background: #f4f1f4; |
|
} |
|
|
|
.highlight.pink, |
|
.highlight-arrow--pink .highlight-arrow__triangle { |
|
border-color: #ce6587; |
|
} |
|
|
|
.highlight.pink > .highlight__label, |
|
.highlight-arrow--pink .highlight-arrow__stalk, |
|
.highlight.pink .highlight__button .highlight__button__body { |
|
background-color: #ce6587; |
|
} |
|
|
|
.highlight.pink.active { |
|
background: #ce6587; |
|
} |
|
|
|
.highlight.pink.active > .highlight__label { |
|
background-color: #d37593; |
|
} |
|
|
|
.highlight.pink .highlight__button svg { |
|
fill: #ce6587; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.orange { |
|
background: #f2f4f4; |
|
} |
|
|
|
.highlight.orange, |
|
.highlight-arrow--orange .highlight-arrow__triangle { |
|
border-color: #dd9e3e; |
|
} |
|
|
|
.highlight.orange > .highlight__label, |
|
.highlight-arrow--orange .highlight-arrow__stalk, |
|
.highlight.orange .highlight__button .highlight__button__body { |
|
background-color: #dd9e3e; |
|
} |
|
|
|
.highlight.orange.active { |
|
background: #dd9e3e; |
|
} |
|
|
|
.highlight.orange.active > .highlight__label { |
|
background-color: #e0a852; |
|
} |
|
|
|
.highlight.orange .highlight__button svg { |
|
fill: #dd9e3e; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.purple { |
|
background: #f1f0f7; |
|
} |
|
|
|
.highlight.purple, |
|
.highlight-arrow--purple .highlight-arrow__triangle { |
|
border-color: #9a5eba; |
|
} |
|
|
|
.highlight.purple > .highlight__label, |
|
.highlight-arrow--purple .highlight-arrow__stalk, |
|
.highlight.purple .highlight__button .highlight__button__body { |
|
background-color: #9a5eba; |
|
} |
|
|
|
.highlight.purple.active { |
|
background: #9a5eba; |
|
} |
|
|
|
.highlight.purple.active > .highlight__label { |
|
background-color: #a46ec1; |
|
} |
|
|
|
.highlight.purple .highlight__button svg { |
|
fill: #9a5eba; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.teal { |
|
background: #eef4f6; |
|
} |
|
|
|
.highlight.teal, |
|
.highlight-arrow--teal .highlight-arrow__triangle { |
|
border-color: #5bb1ad; |
|
} |
|
|
|
.highlight.teal > .highlight__label, |
|
.highlight-arrow--teal .highlight-arrow__stalk, |
|
.highlight.teal .highlight__button .highlight__button__body { |
|
background-color: #5bb1ad; |
|
} |
|
|
|
.highlight.teal.active { |
|
background: #5bb1ad; |
|
} |
|
|
|
.highlight.teal.active > .highlight__label { |
|
background-color: #6cb9b5; |
|
} |
|
|
|
.highlight.teal .highlight__button svg { |
|
fill: #5bb1ad; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.tan { |
|
background: #f2f4f4; |
|
} |
|
|
|
.highlight.tan, |
|
.highlight-arrow--tan .highlight-arrow__triangle { |
|
border-color: #b0a481; |
|
} |
|
|
|
.highlight.tan > .highlight__label, |
|
.highlight-arrow--tan .highlight-arrow__stalk, |
|
.highlight.tan .highlight__button .highlight__button__body { |
|
background-color: #b0a481; |
|
} |
|
|
|
.highlight.tan.active { |
|
background: #b0a481; |
|
} |
|
|
|
.highlight.tan.active > .highlight__label { |
|
background-color: #b8ad8e; |
|
} |
|
|
|
.highlight.tan .highlight__button svg { |
|
fill: #b0a481; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.red { |
|
background: #f5eef0; |
|
} |
|
|
|
.highlight.red, |
|
.highlight-arrow--red .highlight-arrow__triangle { |
|
border-color: #df3838; |
|
} |
|
|
|
.highlight.red > .highlight__label, |
|
.highlight-arrow--red .highlight-arrow__stalk, |
|
.highlight.red .highlight__button .highlight__button__body { |
|
background-color: #df3838; |
|
} |
|
|
|
.highlight.red.active { |
|
background: #df3838; |
|
} |
|
|
|
.highlight.red.active > .highlight__label { |
|
background-color: #e24c4c; |
|
} |
|
|
|
.highlight.red .highlight__button svg { |
|
fill: #df3838; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.cobalt { |
|
background: #eef0f5; |
|
} |
|
|
|
.highlight.cobalt, |
|
.highlight-arrow--cobalt .highlight-arrow__triangle { |
|
border-color: #5f5b97; |
|
} |
|
|
|
.highlight.cobalt > .highlight__label, |
|
.highlight-arrow--cobalt .highlight-arrow__stalk, |
|
.highlight.cobalt .highlight__button .highlight__button__body { |
|
background-color: #5f5b97; |
|
} |
|
|
|
.highlight.cobalt.active { |
|
background: #5f5b97; |
|
} |
|
|
|
.highlight.cobalt.active > .highlight__label { |
|
background-color: #6f6ca2; |
|
} |
|
|
|
.highlight.cobalt .highlight__button svg { |
|
fill: #5f5b97; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.brown { |
|
background: #f2f4f6; |
|
} |
|
|
|
.highlight.brown, |
|
.highlight-arrow--brown .highlight-arrow__triangle { |
|
border-color: #6a4e3d; |
|
} |
|
|
|
.highlight.brown > .highlight__label, |
|
.highlight-arrow--brown .highlight-arrow__stalk, |
|
.highlight.brown .highlight__button .highlight__button__body { |
|
background-color: #6a4e3d; |
|
} |
|
|
|
.highlight.brown.active { |
|
background: #6a4e3d; |
|
} |
|
|
|
.highlight.brown.active > .highlight__label { |
|
background-color: #796051; |
|
} |
|
|
|
.highlight.brown .highlight__button svg { |
|
fill: #6a4e3d; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.slate { |
|
background: #eceff1; |
|
} |
|
|
|
.highlight.slate, |
|
.highlight-arrow--slate .highlight-arrow__triangle { |
|
border-color: #3b4247; |
|
} |
|
|
|
.highlight.slate > .highlight__label, |
|
.highlight-arrow--slate .highlight-arrow__stalk, |
|
.highlight.slate .highlight__button .highlight__button__body { |
|
background-color: #3b4247; |
|
} |
|
|
|
.highlight.slate.active { |
|
background: #3b4247; |
|
} |
|
|
|
.highlight.slate.active > .highlight__label { |
|
background-color: #4f555a; |
|
} |
|
|
|
.highlight.slate .highlight__button svg { |
|
fill: #3b4247; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight.fuchsia { |
|
background: #f5f1f9; |
|
} |
|
|
|
.highlight.fuchsia, |
|
.highlight-arrow--fuchsia .highlight-arrow__triangle { |
|
border-color: #e875e8; |
|
} |
|
|
|
.highlight.fuchsia > .highlight__label, |
|
.highlight-arrow--fuchsia .highlight-arrow__stalk, |
|
.highlight.fuchsia .highlight__button .highlight__button__body { |
|
background-color: #e875e8; |
|
} |
|
|
|
.highlight.fuchsia.active { |
|
background: #e875e8; |
|
} |
|
|
|
.highlight.fuchsia.active > .highlight__label { |
|
background-color: #ea83ea; |
|
} |
|
|
|
.highlight.fuchsia .highlight__button svg { |
|
fill: #e875e8; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.highlight__tooltip { |
|
display: block; |
|
position: absolute; |
|
box-shadow: 0 0 30px rgba(0, 0, 0, .2); |
|
border-radius: 6px; |
|
|
|
background: transparent; |
|
padding: 4px 9px 5px 9px; |
|
opacity: 0; |
|
z-index: -9; |
|
left: 50%; |
|
top: 100%; |
|
margin-top: 10px; |
|
font-size: 14px; |
|
color: #000; |
|
transform: translate(-50%, -6px); |
|
transition: opacity .2s ease, |
|
z-index .2s ease, |
|
transform .2s ease .3s; |
|
font-weight: bold; |
|
white-space: nowrap; |
|
user-select: none; |
|
cursor: default; |
|
} |
|
|
|
.highlight__tooltip:before { |
|
display: block; |
|
position: absolute; |
|
left: 50%; |
|
top: 0; |
|
margin-top: -6px; |
|
margin-left: -6px; |
|
content: ""; |
|
width: 0; |
|
height: 0; |
|
border-style: solid; |
|
border-width: 0 6px 6px 6px; |
|
border-color: transparent transparent rgba(70, 70, 70, .9) transparent; |
|
} |
|
|
|
.highlight:hover .highlight__tooltip { |
|
z-index: 9; |
|
opacity: 1; |
|
transform: translate(-50%, 0); |
|
transition-delay: 0s; |
|
} |
|
|
|
.highlight__tooltip:hover { |
|
z-index: -9 !important; |
|
} |
|
</style> |
|
<style> |
|
.highlight-container { |
|
line-height: 42px !important; |
|
align-items: center; |
|
display: flex; |
|
flex-wrap: wrap; |
|
white-space: pre; |
|
cursor: default; |
|
} |
|
|
|
|
|
|
|
.highlight-container.highlight-container--bottom-labels { |
|
padding: 10px 1.125em; |
|
align-items: flex-start; |
|
} |
|
|
|
|
|
|
|
.highlight-container.highlight-container--diagram { |
|
align-items: flex-start; |
|
} |
|
|
|
.highlight-container.highlight-container--diagram.passage.model__content__summary { |
|
background: transparent; |
|
align-items: stretch; |
|
padding: 0; |
|
} |
|
</style> |
|
<style> |
|
span { |
|
text-align: center |
|
} |
|
|
|
.event { |
|
margin: 0 auto |
|
} |
|
</style> |
|
<script> |
|
let colors = ['Aqua', 'Chartreuse', 'Cyan', 'Linen', 'Orchid', 'Yellow', 'Red', 'DimGray', 'GreenYellow', 'Lime'] |
|
|
|
function highlight_args(event_idx, prefix = "") { |
|
for (let arg_idx = 0; arg_idx < 10; arg_idx++) { |
|
$("." + prefix + "-arg-" + event_idx + "-" + arg_idx).css('background-color', colors[arg_idx]); |
|
} |
|
} |
|
|
|
function cancel_highlight(prefix = "") { |
|
for (let event_idx = 0; event_idx < 100; event_idx++) { |
|
for (let arg_idx = 0; arg_idx < 10; arg_idx++) { |
|
$("." + prefix + "-arg-" + event_idx + "-" + arg_idx).css('background-color', 'transparent'); |
|
} |
|
} |
|
} |
|
</script> |
|
</head> |
|
|
|
<body> |
|
|
|
<div class="container"> |
|
<div class="card border-dark mb-3"> |
|
<div class="card-body"> |
|
<form action="/"> |
|
<div class="form-group"> |
|
<label for="sentence">Text (sentences separated by lines): </label><br> |
|
<textarea type="text" id="sentence" name="sentence" rows="8" cols="64" class="form-control">DEFAULT_SENTENCE</textarea><br> |
|
</div> |
|
<input type="submit" value="Parse" class="btn btn-primary"> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div class="card border-dark mb-3"> |
|
<div class="card-header">Visualized Output</div> |
|
<div class="card-body"> |
|
VISUALIZED_PREDICTION |
|
</div> |
|
</div> |
|
|
|
<div class="card border-dark mb-3"> |
|
<div class="card-header">Structured Output</div> |
|
<div class="card-body"> |
|
STRUCTURED_PREDICTION |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</body> |
|
|
|
</html> |
|
|
