-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (98 loc) · 4.17 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
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>OpenSeaBiom</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<!-- <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">-->
<!-- <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>-->
<link rel="icon" type="image/png" href="favicon.png" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<py-config>
- autoclose_loader: true
- runtimes:
- src: "https://cdn.jsdelivr.net/pyodide/dev/full/pyodide.js"
name: pyodide-dev
lang: python
</py-config>
<py-env>
- opencv-python
- paths:
- ./main.py
</py-env>
<style>
.vertical {
width: 104px;
z-index: -1;
}
.horizontal {
width: 50px;
}
.hidden {
display: none;
}
#map {
position: absolute;
/*top: 0;*/
/*bottom: 0;*/
left: 110px;
right: 0;
max-width: 1280px;
max-height: 1280px;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center;
}
.canvas-container {
width: 100%;
text-align:center;
}
.canvas {
display: inline;
}
</style>
</head>
<body>
<h1 align="center"> Инструмент для замещения объекта на кадре</h1>
<p class="text-center" >Входными данными является изображение в формате .png, .jpeg, .jpg. </p>
<p class="text-center" > Результатом является изображение после обработки с замещенным объектом. </p>
<p class="text-center" style="left: 110px;"> Для тестирования инструмента необходимо нажать на кнопку загрузки и выбрать файл для редактирования. После завершения загрузки, поверх отображенного изображения из файла пользователю необходимо самостоятельно обозначить желаемый объект для замещения, закрасив его, с помощью нажатия на правую кнопку мыши. После того как все нежелательные элементы закрашены, необходимо нажать на кнопку Inpaint. По результатам работы инструмента отобразится изображение с замещенными объектами. Также пользователь может повторить этап выбора нежелательных элементов изображения.
</p>
<a href="test2.png" download><p style="text-align:center">Скачать демонстрационный пример</p>
</a>
<br></br>
<!-- <div id="debug" class="hidden"></div>-->
<input input class="center-block" id="image-file" type="file" />
<br></br>
<div class="text-center">
<button
id="corner-btn"
class="p-2 text-white bg-blue-600 border border-blue-600 rounded vertical"
type="submit"
pys-onClick="click_corner"
align="center"
>
Inpaint
</button>
</div> <br>
<div class="canvas-container">
<canvas id="layer1" width="100" height="100"
style="align-items: center;position: fixed; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="align-items: center;position: fixed; z-index: 1;"></canvas>
</div>
<!-- <canvas id="canvas" style="position: relative; z-index: 0;"></canvas>-->
<py-script src="main.py"></py-script>
<script src="index.js"></script>
</body>
</html>