Spaces:
Running
Running
| <!-- | |
| M-LSD | |
| Copyright 2021-present NAVER Corp. | |
| Apache License v2.0 | |
| --> | |
| <html> | |
| <head> | |
| <title>MLSD demo</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" type="text/css"> | |
| <link rel="stylesheet" href="/static/css/app.css" type="text/css"> | |
| <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdn.staticfile.org/tether/1.4.0/js/tether.min.js"></script> | |
| <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> | |
| </head> | |
| <style> | |
| .container { | |
| width: 1000em; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| } | |
| .image { | |
| position: relative; | |
| } | |
| h2 { | |
| position: absolute; | |
| top: 200px; | |
| left: 10px; | |
| width: 100px; | |
| color: white; | |
| background: rgb(0, 0, 0); | |
| background: rgba(0, 0, 0, 0.7); | |
| } | |
| </style> | |
| <body> | |
| <div id="app"> | |
| <div> | |
| <form id="upload-form" method="post" enctype="multipart/form-data"> | |
| <h5>MLSD demo</h5> | |
| <div class="form-content-container"> | |
| image_url: <input id="upload_url" type="text" name="image_url" /><br> | |
| image_data: <input id="upload_image" type="file" name="image" /><br> | |
| <input id="upload_button" type="submit" value="Submit" /> | |
| </div> | |
| </form> | |
| </div> | |
| <hr> | |
| <div id="result" v-if="show"> | |
| <div class="item"> | |
| <div><h5>Output_image</h5> | |
| <ul> | |
| <img id="output_image" :src="output_image_url" style="float:left;margin:10px;"> | |
| </ul> | |
| <br style="clear:both"> | |
| <div><h5>Input_image</h5></div> | |
| <ul> | |
| <img id="input_image" :src="input_image_url" height="224" style="float:left;margin:10px;"> | |
| </ul> | |
| <br style="clear:both" /> | |
| </div> | |
| </div> | |
| <hr> | |
| <footer> | |
| Github url: <a href="https://github.com/navervision/mlsd">https://github.com/navervision/mlsd</a> | |
| </footer> | |
| </div> | |
| <script> | |
| $(function() { | |
| function getQueryStrings() { | |
| var vars = [], hash, hashes; | |
| if (window.location.href.indexOf('#') === -1) { | |
| hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); | |
| } else { | |
| hashes = window.location.href.slice(window.location.href.indexOf('?') + 1, window.location.href.indexOf('#')).split('&'); | |
| } | |
| for(var i = 0; i < hashes.length; i++) { | |
| hash = hashes[i].split('='); | |
| vars.push(hash[0]); | |
| vars[hash[0]] = hash[1]; | |
| } | |
| return vars; | |
| } | |
| var session_id = '{{session_id}}'; | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| session_id: session_id, | |
| show: false, | |
| }, | |
| }); | |
| var render = function(session_id) { | |
| app.session_id = session_id; | |
| app.server_info = ['loading']; | |
| $.get('/static/results/' + session_id + '/results.json', function(data) { | |
| if (typeof data == 'string') { | |
| data = JSON.parse(data); | |
| } | |
| app.input_image_url = data.input_image_url; | |
| app.session_id = data.session_id; | |
| app.output_image_url = data.output_image_url; | |
| app.show = true | |
| }); | |
| } | |
| if (session_id != 'dummy_session_id') { | |
| window.history.pushState({},"", '/?r=' + session_id); | |
| render(session_id); | |
| } else { | |
| var queryStrings = getQueryStrings(); | |
| var rid = queryStrings['r']; | |
| if (rid) { | |
| render(rid); | |
| } | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> | |