-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
100 lines (98 loc) · 5.8 KB
/
index.html
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
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>li { margin: 10px 0; }</style>
</head>
<body>
<form id="form">
<ul>
<li>
<b>Contenido:</b>
<input type="file" name="content" accept="image/png, image/jpeg" onchange="$('#submit_btn').prop('disabled', false);" />
</li>
<li>
<b>Estilo (predefinido):</b>
<select id="style_select" name="pred_style" disabled="true">
<option value="">Loading styles...</option>
</select>
</li>
<li>
<b>Estilo (propio):</b>
<input type="file" name="own_style" accept="image/png, image/jpeg" onchange="$('#style_select').closest('li').hide();" />
</li>
</ul>
<input type="reset" />
<input id="submit_btn" type="submit" disabled="true" />
</form>
<img id="output" style="display: none;" />
<svg id="spinner" style="display: none;" width="64" height="64">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M.6 57.54c5.73-6.23 17.33-15.5 33.66-12.35C55.4 48.5 64 63.95 64 63.95S42.42 65 30.28 83.63a38.63 38.63 0 0 0-3.4 32.15 64.47 64.47 0 0 1-5.52-4.44A63.64 63.64 0 0 1 .6 57.54z" fill="#ffcb02"/><path d="M65.32 29.05c7.65 19.98-1.44 35.18-1.44 35.18S52.2 46.05 30.03 44.85A38.6 38.6 0 0 0 .56 57.93 63.8 63.8 0 0 1 37.56 6c8.2 1.8 22.26 7.16 27.76 23.05z" fill="#ff9e02"/><path d="M94.92 47.7c-13.48 16.63-31.2 16.36-31.2 16.36s9.92-19.2-.13-39a38.6 38.6 0 0 0-26.18-19 63.78 63.78 0 0 1 63.52 6.03c2.56 8 4.98 22.85-6.05 35.6z" fill="#ff4b42"/><path d="M93.52 82.53C72.38 79.17 63.75 63.7 63.75 63.7s21.6-1.02 33.7-19.63a38.6 38.6 0 0 0 3.43-32.04 64.33 64.33 0 0 1 5.74 4.6 63.63 63.63 0 0 1 20.82 53.26c-5.62 6.2-17.34 15.8-33.94 12.6z" fill="#c063d6"/><path d="M62.5 99c-7.65-19.98 1.44-35.17 1.44-35.17S75.56 81.6 97.74 82.8a39.1 39.1 0 0 0 29.73-13.03 63.8 63.8 0 0 1-37.16 52.3c-8.2-1.8-22.25-7.15-27.8-23.06z" fill="#17a4f6"/><path d="M26.64 115.63C24 107.6 21.6 93.06 32.5 80.5c13.48-16.62 31.58-16.55 31.58-16.55s-9.6 19.06.44 38.86a38.82 38.82 0 0 0 26.05 19.17 63.78 63.78 0 0 1-63.93-6.3z" fill="#4fca24"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1800ms" repeatCount="indefinite"></animateTransform></g></svg>
</svg>
<script>
$("#form").submit(function(f){
try {
$("#spinner").show();
var form = f.target;
var content_input = form.content;
var pred_style_input = form.pred_style;
var own_style_input = form.own_style;
var pred_value_style = pred_style_input.value;
var content_reader = new FileReader();
content_reader.onload = function () {
var value_content = content_reader.result;
if (own_style_input.files.length > 0) {
var own_style_reader = new FileReader();
own_style_reader.onload = function () {
var value_own_style = own_style_reader.result;
transfer(null, value_own_style, value_content);
};
own_style_reader.readAsDataURL(own_style_input.files[0]);
} else {
transfer(pred_value_style, null, value_content);
}
};
content_reader.readAsDataURL(content_input.files[0]);
return false;
} catch(error){
console.error(error)
return false;
}
}).on('reset', function(f){
$('#style_select').closest('li').show();
});
function transfer(pred_style, own_style, content){
var data = {'pred_style': pred_style, 'own_style': own_style, 'content_image': content};
// console.log(data);
$("#output").hide();
$.ajax({
type: "POST",
url: 'http://localhost:5000/transfer',
data: JSON.stringify(data),
success: function(response){
var base64_image = response['image'];
$("#output").prop("src", base64_image);
$("#spinner").hide();
$("#output").show();
},
dataType: "json",
contentType: "application/json; charset=utf-8"
});
}
$(document).ready(function() {
$.ajax({
type: "GET",
url: 'http://localhost:5000/available_styles',
success: function(response){
var sorted_ids = Object.keys(response).sort();
var options_str = sorted_ids.map(function(style_id){
var style_name = response[style_id];
return '<option value="' + style_id + '">' + style_name + '</option>';
}).join('');
$("#style_select").html(options_str).prop('disabled', false);
},
dataType: "json"
});
});
</script>
</body>
</html>