| <!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> |
