Spaces:
Runtime error
Runtime error
| <html lang="fr"> | |
| <head> | |
| <title>Text summarization API</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> | |
| <style> | |
| html, body, div, h1, h2, p, blockquote, | |
| a, code, em, img, strong, u, ul, li, | |
| label, legend, caption, tr, th, td, | |
| header, menu, nav, section, summary { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline;} | |
| header, menu, nav, section { | |
| display: block;} | |
| div { | |
| margin-bottom: 20px; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| body { | |
| -webkit-text-size-adjust: none; | |
| } | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| /* Basic */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| color: #5b5b5b; | |
| font-size: 15pt; | |
| line-height: 1.85em; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: 300; | |
| background-image: url("site_style/images/background.jpg"); | |
| background-size: cover; | |
| background-position: center center; | |
| background-attachment: fixed; | |
| } | |
| h1, h2, h3 { | |
| font-weight: 400; | |
| color: #483949; | |
| line-height: 1.25em; | |
| } | |
| h1 a, h2 a, h3 a { | |
| color: inherit; | |
| text-decoration: none; | |
| border-bottom-color: transparent; | |
| } | |
| h1 strong, h2 strong, h3 strong { | |
| font-weight: 600; | |
| } | |
| h2 { | |
| font-size: 2.85em; | |
| } | |
| h3 { | |
| font-size: 1.25em; | |
| } | |
| strong, b { | |
| font-weight: 400; | |
| color: #483949; | |
| } | |
| em, i { | |
| font-style: italic; | |
| } | |
| a { | |
| color: inherit; | |
| border-bottom: solid 1px rgba(128, 128, 128, 0.15); | |
| text-decoration: none; | |
| -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| } | |
| a:hover { | |
| color: #ef8376; | |
| border-bottom-color: transparent; | |
| } | |
| p, ul { | |
| margin-bottom: 1em; | |
| } | |
| p { | |
| text-align: justify; | |
| } | |
| hr { | |
| position: relative; | |
| display: block; | |
| border: 0; | |
| top: 4.5em; | |
| margin-bottom: 9em; | |
| height: 6px; | |
| border-top: solid 1px rgba(128, 128, 128, 0.2); | |
| border-bottom: solid 1px rgba(128, 128, 128, 0.2); | |
| } | |
| hr:before, hr:after { | |
| content: ''; | |
| position: absolute; | |
| top: -8px; | |
| display: block; | |
| width: 1px; | |
| height: 21px; | |
| background: rgba(128, 128, 128, 0.2); | |
| } | |
| hr:before { | |
| left: -1px; | |
| } | |
| hr:after { | |
| right: -1px; | |
| } | |
| /* List */ | |
| ul { | |
| list-style: disc; | |
| padding-left: 1em; | |
| } | |
| ul li { | |
| padding-left: 0.5em; | |
| font-size: 85%; | |
| list-style: none; | |
| } | |
| /* Form */ | |
| textarea { | |
| border-radius: 10px; | |
| resize: none; | |
| padding: 10px; | |
| line-height: 20px; | |
| word-spacing: 1px; | |
| font-size: 16px; | |
| width: 85%; | |
| height: 100%; | |
| } | |
| /* WebKit, Edge */ | |
| ::-webkit-input-placeholder { | |
| font-size: 17px; | |
| word-spacing: 1px; | |
| } | |
| /* Table */ | |
| table { | |
| width: 100%; | |
| } | |
| table.default { | |
| width: 100%; | |
| } | |
| table.default tbody tr:first-child { | |
| border-top: 0; | |
| } | |
| table.default tbody tr:nth-child(2n+1) { | |
| background: #fafafa; | |
| } | |
| table.default th { | |
| text-align: left; | |
| font-weight: 400; | |
| padding: 0.5em 1em 0.5em 1em; | |
| } | |
| /* Button */ | |
| input[type="button"], | |
| input[type="submit"], | |
| input[type="reset"], | |
| button, | |
| .button { | |
| position: relative; | |
| display: inline-block; | |
| background: #df7366; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 0.5em; | |
| text-decoration: none; | |
| padding: 0.65em 3em 0.65em 3em; | |
| border: 0; | |
| cursor: pointer; | |
| outline: 0; | |
| font-weight: 300; | |
| -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | |
| } | |
| input[type="button"]:hover, | |
| input[type="submit"]:hover, | |
| input[type="reset"]:hover, | |
| button:hover, | |
| .button:hover { | |
| color: #fff; | |
| background: #ef8376; | |
| } | |
| input[type="button"].alt, | |
| input[type="submit"].alt, | |
| input[type="reset"].alt, | |
| button.alt, | |
| .button.alt { | |
| background: #2B252C; | |
| } | |
| input[type="button"].alt:hover, | |
| input[type="submit"].alt:hover, | |
| input[type="reset"].alt:hover, | |
| button.alt:hover, | |
| .button.alt:hover { | |
| background: #3B353C; | |
| } | |
| /* Header */ | |
| #header { | |
| position: relative; | |
| background-size: cover; | |
| background-position: center center; | |
| background-attachment: fixed; | |
| color: #fff; | |
| text-align: center; | |
| padding: 5em 0 2em 0; | |
| cursor: default; | |
| height: 100%; | |
| } | |
| #header:before { | |
| content: ''; | |
| display: inline-block; | |
| vertical-align: middle; | |
| height: 100%; | |
| } | |
| #header .inner { | |
| position: relative; | |
| z-index: 1; | |
| margin: 0; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| #header header { | |
| display: inline-block; | |
| } | |
| #header header > p { | |
| font-size: 1.25em; | |
| margin: 0; | |
| } | |
| #header h1 { | |
| color: #fff; | |
| font-size: 3em; | |
| line-height: 1em; | |
| } | |
| #header h1 a { | |
| color: inherit; | |
| } | |
| #header .button { | |
| display: inline-block; | |
| border-radius: 100%; | |
| width: 4.5em; | |
| height: 4.5em; | |
| line-height: 4.5em; | |
| text-align: center; | |
| font-size: 1.25em; | |
| padding: 0; | |
| } | |
| #header hr { | |
| top: 1.5em; | |
| margin-bottom: 3em; | |
| border-bottom-color: rgba(192, 192, 192, 0.35); | |
| box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35); | |
| } | |
| #header hr:before, #header hr:after { | |
| background: rgba(192, 192, 192, 0.35); | |
| } | |
| /* Nav */ | |
| #nav { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| text-align: center; | |
| padding: 1.5em 0 1.5em 0; | |
| z-index: 1; | |
| overflow: hidden; | |
| } | |
| #nav > hr { | |
| top: 0.5em; | |
| margin-bottom: 6em; | |
| } | |
| /* Footer */ | |
| .copyright{ | |
| margin-top: 50px; | |
| } | |
| /* Wide */ | |
| @media screen and (max-width: 1680px) { | |
| /* Basic */ | |
| body, input, select { | |
| font-size: 14pt; | |
| line-height: 1.75em; | |
| } | |
| } | |
| /* Normal */ | |
| @media screen and (max-width: 1280px) { | |
| /* Basic */ | |
| body, input, select { | |
| font-size: 12pt; | |
| line-height: 1.5em; | |
| } | |
| /* Header */ | |
| #header { | |
| background-attachment: scroll; | |
| } | |
| #header .inner { | |
| padding-left: 2em; | |
| padding-right: 2em; | |
| } | |
| } | |
| /* Narrow */ | |
| /* Narrower */ | |
| @media screen and (max-width: 840px) { | |
| /* Basic */ | |
| body, input, select { | |
| font-size: 13pt; | |
| line-height: 1.65em; | |
| } | |
| } | |
| /* Mobile */ | |
| #navPanel, #titleBar { | |
| display: none; | |
| } | |
| @media screen and (max-width: 736px) { | |
| /* Basic */ | |
| html, body { | |
| overflow-x: hidden; | |
| } | |
| body, input, select { | |
| font-size: 12.5pt; | |
| line-height: 1.5em; | |
| } | |
| h2 { | |
| font-size: 1.75em; | |
| } | |
| h3 { | |
| font-size: 1.25em; | |
| } | |
| hr { | |
| top: 3em; | |
| margin-bottom: 6em; | |
| } | |
| #header { | |
| background-attachment: scroll; | |
| padding: 2.5em 0 0 0; | |
| } | |
| #header .inner { | |
| padding-top: 1.5em; | |
| padding-left: 1em; | |
| padding-right: 1em; | |
| } | |
| #header header > p { | |
| font-size: 1em; | |
| } | |
| #header h1 { | |
| font-size: 1.75em; | |
| } | |
| #header hr { | |
| top: 1em; | |
| margin-bottom: 2.5em; | |
| } | |
| #nav { | |
| display: none; | |
| } | |
| #main > header { | |
| text-align: center; | |
| } | |
| div.copyright { | |
| margin-top: 10px; | |
| } | |
| label, textarea { | |
| font-size: 0.8rem; | |
| letter-spacing: 1px; | |
| font-family: Georgia, 'Times New Roman', Times, serif; | |
| } | |
| .buttons { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| } | |
| </style> | |
| <script> | |
| function customReset() | |
| { | |
| document.getElementById("my_form").value = ""; | |
| document.getElementById("text").value = ""; | |
| document.getElementById("summary").value = ""; | |
| } | |
| </script> | |
| <script> | |
| function submitBothForms() | |
| { | |
| document.getElementById("my_form").submit(); | |
| document.getElementById("choixModel").submit(); | |
| } | |
| </script> | |
| <script> | |
| function getValue() { | |
| var e = document.getElementById("choixModel"); | |
| var value = e.value; | |
| var text = e.options[e.selectedIndex].text; | |
| return text} | |
| </script> | |
| <script type="text/javascript"> | |
| document.getElementById('choixModel').value = "<?php echo $_GET['choixModel'];?>"; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <div class="inner"> | |
| <header> | |
| <h1>Text summarization API</h1> | |
| <hr /> | |
| </header> | |
| </div> | |
| <nav id="nav"> | |
| <hr/> | |
| </nav> | |
| <div class="choixModel"> | |
| <form id="choixModel" method="post" action="/model"> | |
| <label for="selectModel">Choose a model :</label> | |
| <select name="choixModel" class="selectModel" id="choixModel"> | |
| <option value="lstm">LSTM</option> | |
| <option value="fineTunedT5">Fine-tuned T5</option> | |
| </select> | |
| </form> | |
| <button form ="choixModel" class='search_bn' type="submit" class="btn btn-primary btn-block btn-large" rows="1" cols="50">Select model</button> | |
| </div> | |
| <div> | |
| <table> | |
| <tr> | |
| <td> | |
| <form id = "my_form" action="/predict" method="post" class="formulaire"> | |
| <textarea id="text" name="text" placeholder="Enter your text here!" rows="15" cols="75">{{text}}</textarea> | |
| <input type="hidden" name="textarea_value" value="{{ text }}"> | |
| </form> | |
| </td> | |
| <td> | |
| <textarea id="summary" name="summary" rows="15" cols="75">{{summary}}</textarea> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="buttons"> | |
| <!-- <button id="submit" type="submit" onclick=submitBothForms()>SUBMIT</button> --> | |
| <button form ="my_form" class='search_bn' type="submit" class="btn btn-primary btn-block btn-large" rows="1" cols="50">Go !</button> | |
| <button form ="my_form" type="button" value="Reset" onclick="customReset();">Reset</button> | |
| </div> | |
| <div class="copyright"> | |
| <ul class="menu"> | |
| <li>© Untitled. All rights reserved.</li> | |
| </ul> | |
| <ul> | |
| <li>Projet mené dans le cadre des cours du master 2 TAL (Traitement Automatique des Langues)</li> | |
| <li>Lingyun GAO -- Estelle SALMON -- Eve SAUVAGE</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |