| <!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> |
|
|
