|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.7/dist/mini-default.min.css"> |
|
<link rel="stylesheet" href="./static/style.css"> |
|
<meta charset="UTF-8"> |
|
<title>Label to Art Demo_V_0.9 </title> |
|
</head> |
|
|
|
<h1 style="text-align: center; font-size: 40px; font-family: 'Times New Roman', Times, serif;"> |
|
Controllable Multi-domain Semantic Artwork Synthesis |
|
</a> |
|
</h1> |
|
<p style="text-align: center; font-size: 20px; font-family: 'Times New Roman', Times, serif;"> |
|
|
|
<a style="text-align: center; display:inline-block" |
|
href="https://huggingface.co/spaces/sky24h/Controllable_Multi-domain_Semantic_Artwork_Synthesis?duplicate=true" target=”_blank”> |
|
<img src="https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-sm.svg#center" |
|
alt="Duplicate Space"> |
|
</a> |
|
<a style="text-align: center; display:inline-block" |
|
href="https://sky24h.github.io/websites/cvmj2023_controllable-artwork-synthesis" target=”_blank”> |
|
<img src="https://huggingface.co/datasets/huggingface/badges/raw/main/paper-page-sm.svg#center" alt="Project Page"> |
|
</a> |
|
</p> |
|
<hr class="solid"> |
|
|
|
<div class="common"> |
|
|
|
<body> |
|
<div class="row"> |
|
<div class="col-sm-12 col-md-10 col-md-offset-1"> |
|
|
|
<div class="boxitem1"> |
|
<label for='brushSlider' style='font-size: 1.7em; font-weight: bold'>Stroke Width </label> |
|
<input type="range" name="brushsize" min="0" max="100" id="brushSlider" step="1" value="30" |
|
onchange="this.setAttribute('value',this.value);"> |
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="boxitem2"> |
|
|
|
<label for="style" style='font-size: 1.7em; font-weight: bold'>Domain:</label> |
|
<select id="style"> |
|
<option style='font-size: 1.7em; font-weight: bold' value="ink">Ink Wash</option> |
|
<option style='font-size: 1.7em; font-weight: bold' value="monet">Monet</option> |
|
<option style='font-size: 1.7em; font-weight: bold' value="vangogh">Van Gogh</option> |
|
<option style='font-size: 1.7em; font-weight: bold' value="water">WaterColor</option> |
|
</select> |
|
</div> |
|
|
|
<div class="row"> |
|
<div class="col-sm-12 col-md-10 col-md-offset-1"> |
|
<div class="boxitem1"> |
|
<label for='domainSlider' style='font-size: 1.7em; font-weight: bold'> Style Strength </label> |
|
<input type="range" name="style range" min="1" max="5" id="domainSlider" step="0.2" value="3" |
|
onchange="this.setAttribute('value',this.value);"> |
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="boxitem2"> |
|
<button id="random_pick" class="primary" |
|
style="background-color:#003449; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Random </button> |
|
</div> |
|
</div> |
|
<br> |
|
|
|
</div> |
|
<div class="divider"></div> |
|
<div class="boxitem1"> |
|
<canvas id="inputimg" width="512" height="512" style="border:5px solid #ffffff;"></canvas> |
|
</div> |
|
<div class="boxitem2"> |
|
<canvas id="outputimg" width="512" height="512" style="border:5px solid #ffffff;"></canvas> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="boxitem"> |
|
<button id="color1" class="primary" |
|
style="background-color:#87ceeb; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Sky </button> |
|
<button id="color2" class="primary" |
|
style="background-color:#9b7653; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Dirt </button> |
|
<button id="color3" class="primary" |
|
style="background-color:#b0d49b; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Mountain </button> |
|
<button id="color4" class="primary" |
|
style="background-color:#5abcd8; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
River </button> |
|
<button id="color5" class="primary" |
|
style="background-color:#C1BEBA; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Clouds </button> |
|
<button id="color6" class="primary" |
|
style="background-color:#5A4D41; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Rock </button> |
|
<button id="color7" class="primary" |
|
style="background-color:#567d46; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Grass </button> |
|
<button id="color8" class="primary" |
|
style="background-color:#42692f; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Tree </button> |
|
</div> |
|
<br> |
|
<div class="boxitem"> |
|
<button id="color9" class="primary" |
|
style="background-color:#1577be; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Sea </button> |
|
<button id="color11" class="primary" |
|
style="background-color:#3a2e27; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Ground </button> |
|
<button id="color12" class="primary" |
|
style="background-color:#4D415A; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Hill </button> |
|
<button id="color14" class="primary" |
|
style="background-color:#FDDA16; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Road </button> |
|
<button id="color15" class="primary" |
|
style="background-color:#d0cccc; margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> |
|
Snow </button> |
|
<button id="clearbtn" class="primary" |
|
style="margin-right:0px; font-size: 1.9em; font-weight: bold; border-radius:15px;"> Clear </button> |
|
|
|
</div> |
|
|
|
<script src="./static/index.js"></script> |
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
|
<script src="//d3js.org/d3.v5.min.js"></script> |
|
</body> |
