Hugging Face's logo

Spaces:
akhaliq
/
mlsd
Build error

App Files Community
2
mlsd
File size: 4,078 Bytes 
9c212e5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<!doctype! html>
<!--
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/[email protected]/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>