Spaces:
Sleeping
Sleeping
| <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; | |
| } | |
| /* Bottom Label Layout */ | |
| .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; | |
| } | |
| /* Top Label Layout */ | |
| .highlight.top { | |
| flex-direction: column; | |
| white-space: normal; | |
| } | |
| .highlight.top .highlight__label { | |
| min-height: 22px; | |
| } | |
| /* Interactions */ | |
| .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; | |
| } | |
| /******************************************** | |
| Colors | |
| ********************************************/ | |
| /* Gray (Default) */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Blue */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Green */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Pink */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Orange */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Purple */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Teal */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Tan */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Red */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Cobalt */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Brown */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Slate */ | |
| .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; | |
| } | |
| /********************************************/ | |
| /* Fuchsia */ | |
| .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; | |
| } | |
| /******************************************** | |
| Tooltip | |
| ********************************************/ | |
| .highlight__tooltip { | |
| display: block; | |
| position: absolute; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, .2); | |
| border-radius: 6px; | |
| /*background: rgba(70, 70, 70, .9);*/ | |
| 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 ; | |
| } | |
| </style> | |
| <style> | |
| .highlight-container { | |
| line-height: 42px ; | |
| align-items: center; | |
| display: flex; | |
| flex-wrap: wrap; | |
| white-space: pre; | |
| cursor: default; | |
| } | |
| /* Bottom Label Layout */ | |
| .highlight-container.highlight-container--bottom-labels { | |
| padding: 10px 1.125em; | |
| align-items: flex-start; | |
| } | |
| /* Diagram Layout */ | |
| .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> | |