mirror of https://github.com/hnmr293/posex.git
66 lines
2.7 KiB
HTML
66 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Posex - Estimated Image Generator for Pose2Image</title>
|
|
<link rel="icon" type="image/png" href="image/favicon.png">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<script async src="js/es-module-shims.js"></script>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "./js/three.module.js",
|
|
"three-trackballcontrols": "./js/TrackballControls.js",
|
|
"three-dragcontrols": "./js/DragControls.js",
|
|
"three-meshline": "./js/THREE.MeshLine.Module.min.js",
|
|
"posex": "./js/posex.js"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="esms-options">
|
|
{
|
|
"noLoadEventRetriggers": true
|
|
}
|
|
</script>
|
|
<script defer type="module" src="js/app.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="cont">
|
|
<button id="all_reset" class="box">🔄 All Reset</button>
|
|
<div style="display: flex; flex-direction: row; gap: 0 0.5em;">
|
|
<button id="reset_camera" class="box" style="flex: 1 1 0">🎥 Reset Camera</button>
|
|
<button id="reset_pose" class="box" style="flex: 1 1 0">🧍 Reset Pose</button>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; ">
|
|
|
|
<canvas width="512" height="512" id="main_canvas"></canvas>
|
|
|
|
<div style="margin-left: 1em; display: flex; flex-direction: column; gap: 0.25em; font-size: smaller;">
|
|
<div>- Body</div>
|
|
<button id="add_body" style="width: max-content; min-width: 100%; text-align: left;">➕ Add</button>
|
|
<button id="remove_body" style="width: max-content; min-width: 100%; text-align: left;">➖ Remove</button>
|
|
<div>- Canvas Size</div>
|
|
<input type="number" id="canvas_width" value="512" min="64" />
|
|
<input type="number" id="canvas_height" value="512" min="64" />
|
|
<div>- Background</div>
|
|
<div style="display: flex; flex-direction: row; gap: 0 0.25em;">
|
|
<label style="flex: 0 0 0;"><button onclick="document.querySelector('#bg_file').click();">🖼 Set</button><input type="file" id="bg_file" style="display: none;"/></label>
|
|
<button id="reset_bg" style="flex: 0 0 0;">❌ Del</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="body_indicator2"></div>
|
|
<div id="body_indicator1"></div>
|
|
<div style="display: flex; flex-direction: row; gap: 0 0.25em;">
|
|
<a id="save_button" class="box" style="flex: 1 1 0;" href="#">💾 Save Image</a>
|
|
<a id="copy_button" class="box" style="flex: 1 1 0;" href="#">📋 Copy to clipboard</a>
|
|
</div>
|
|
<button id="save_pose" class="box">💾🧍 Save Pose</button>
|
|
<div id="saved_poses"></div>
|
|
</div>
|
|
<p id="notation"></p>
|
|
<div id="notifications"></div>
|
|
</body>
|
|
|
|
</html> |