Improve web interface

assets/index.html

@@ -32,11 +32,6 @@
           Limits: Size: 2MB, Noise Reduction: 2560x2560px, Upscaling: 1280x1280px
         </div>
       </fieldset>
-      <fieldset>
-        <legend>Style</legend>
-	<label><input type="radio" name="style" value="art" checked>Artwork</label>
-	<label><input type="radio" name="style" value="photo">Photo</label>
-      </fieldset>
       <fieldset class="noise-field">
         <legend>Noise Reduction (expect JPEG Artifact)</legend>
         <label><input type="radio" name="noise" value="0"> None</label>
@@ -52,14 +47,28 @@
         <label><input type="radio" name="scale" value="1"> 1.6x</label>
         <label><input type="radio" name="scale" value="2"> 2x</label>
       </fieldset>
-      <fieldset>
-        <legend>Adding white noise</legend>
-        <label><input type="radio" name="white_noise" value="0" checked="checked">Off</label>
-        <label><input type="radio" name="white_noise" value="1">On</label>
-	<div class="help">
-	  To denoise without unnaturalness in an anime screencap.
+      <div class="experimental">
+	<div>
+	  <a href="#" class="button close">
+	    + Experimental
+	  </a>
 	</div>
-      </fieldset>
+	<div class="container hide">
+	  <fieldset>
+            <legend>Style</legend>
+	    <label><input type="radio" name="style" value="art" checked>Artwork</label>
+	    <label><input type="radio" name="style" value="photo">Photo</label>
+	  </fieldset>
+	  <fieldset>
+            <legend>Adding white noise</legend>
+            <label><input type="radio" name="white_noise" value="0" checked="checked">Off</label>
+            <label><input type="radio" name="white_noise" value="1">On</label>
+	    <div class="help">
+	      To denoise without unnaturalness in anime screencap or photo.
+	    </div>
+	  </fieldset>
+	</div>
+      </div>
       <input type="submit"/>
     </form>
     <div class="help">

assets/index.ja.html

@@ -32,11 +32,6 @@
           制限: サイズ: 2MB, ノイズ除去: 2560x2560px, 拡大: 1280x1280px
         </div>
       </fieldset>
-      <fieldset>
-        <legend>スタイル</legend>
-	<label><input type="radio" name="style" value="art" checked>イラスト</label>
-	<label><input type="radio" name="style" value="photo">写真</label>
-      </fieldset>
       <fieldset class="noise-field">
         <legend>ノイズ除去 (JPEGノイズを想定)</legend>
         <label><input type="radio" name="noise" value="0"> なし</label>
@@ -49,14 +44,28 @@
         <label><input type="radio" name="scale" value="1"> 1.6x</label>
         <label><input type="radio" name="scale" value="2"> 2x</label>
       </fieldset>
-      <fieldset>
-        <legend>ホワイトノイズ付加</legend>
-        <label><input type="radio" name="white_noise" value="0" checked="checked">Off</label>
-        <label><input type="radio" name="white_noise" value="1">On</label>
-	<div class="help">
-	  アニメのキャプチャ画像をノイズ除去したときの不自然さを低減します。
+      <div class="experimental">
+	<div>
+	  <a href="#" class="button close">
+	    + 実験的
+	  </a>
 	</div>
-      </fieldset>
+	<div class="container hide">
+	  <fieldset>
+            <legend>スタイル</legend>
+	    <label><input type="radio" name="style" value="art" checked>イラスト</label>
+	    <label><input type="radio" name="style" value="photo">写真</label>
+	  </fieldset>
+	  <fieldset>
+            <legend>ホワイトノイズ付加</legend>
+            <label><input type="radio" name="white_noise" value="0" checked="checked">なし</label>
+            <label><input type="radio" name="white_noise" value="1">あり</label>
+	    <div class="help">
+	      アニメキャプや写真をノイズ除去したときの不自然さを低減します。
+	    </div>
+	  </fieldset>
+	</div>
+      </div>
       <input type="submit" value="実行"/>
     </form>
     <div class="help">

assets/index.ru.html

@@ -33,11 +33,6 @@
           Макс. размер файла — 2MB, устранение шума — макс. 2560x2560px, апскейл — 1280x1280px
         </div>
       </fieldset>
-      <fieldset>
-        <legend>Стиль</legend>
-	<label><input type="radio" name="style" value="art" checked>Произведение искусства</label>
-	<label><input type="radio" name="style" value="photo">Фотография</label>
-      </fieldset>
       <fieldset class="noise-field">
 	<legend>Устранение шума (артефактов JPEG)</legend>
         <label><input type="radio" name="noise" value="0"> Нет</label>
@@ -51,14 +46,28 @@
         <label><input type="radio" name="scale" value="1"> 1.6x</label>
         <label><input type="radio" name="scale" value="2"> 2x</label>
       </fieldset>
-      <fieldset>
-        <legend>Adding white noise</legend>
-        <label><input type="radio" name="white_noise" value="0" checked="checked">Off</label>
-        <label><input type="radio" name="white_noise" value="1">On</label>
-	<div class="help">
-	  To denoise without unnaturalness in an anime screencap.
+      <div class="experimental">
+	<div>
+	  <a href="#" class="button close">
+	    + Экспериментальный
+	  </a>
 	</div>
-      </fieldset>
+	<div class="container hide">
+	  <fieldset>
+            <legend>Стиль</legend>
+	    <label><input type="radio" name="style" value="art" checked>Произведение искусства</label>
+	    <label><input type="radio" name="style" value="photo">Фотография</label>
+	  </fieldset>
+	  <fieldset>
+            <legend>Adding white noise</legend>
+            <label><input type="radio" name="white_noise" value="0" checked="checked">Off</label>
+            <label><input type="radio" name="white_noise" value="1">On</label>
+	    <div class="help">
+	      To denoise without unnaturalness in anime screencap or photo.
+	    </div>
+	  </fieldset>
+	</div>
+      </div>
       <input type="submit"/>
     </form>
     <div class="help">

assets/style.css

@@ -44,3 +44,9 @@ fieldset {
 .padding-left {
     padding-left: 15px;
 }
+.hide {
+    display: none;
+}
+.experimental {
+    margin-bottom: 1em;
+}

assets/ui.js

@@ -8,17 +8,73 @@ $(function (){
 	$("#url").val("")
     }
     function on_change_style(e) {
-	var style = $("input[name=style]:checked").val()
-	if (style == "photo") {
-	    $("input[name=noise]").prop("disabled", true);
-	    $(".noise-field").hide()
+	$("input[name=style]").parents("label").each(
+	    function (i, elm) {
+		$(elm).css("font-weight", "normal");
+	    });
+	var checked = $("input[name=style]:checked");
+	checked.parents("label").css("font-weight", "bold");
+	if (checked.val() == "art") {
+	    $("h1").text("waifu2x");
 	} else {
-	    $("input[name=noise]").prop("disabled", false);
-	    $(".noise-field").show();
+	    $("h1").text("wife2x");
 	}
     }
+    function on_change_noise_level(e)
+    {
+	$("input[name=noise]").parents("label").each(
+	    function (i, elm) {
+		$(elm).css("font-weight", "normal");
+	    });
+	var checked = $("input[name=noise]:checked");
+	if (checked.val() != 0) {
+	    checked.parents("label").css("font-weight", "bold");
+	}
+    }
+    function on_change_scale_factor(e)
+    {
+	$("input[name=scale]").parents("label").each(
+	    function (i, elm) {
+		$(elm).css("font-weight", "normal");
+	    });
+	var checked = $("input[name=scale]:checked");
+	if (checked.val() != 0) {
+	    checked.parents("label").css("font-weight", "bold");
+	}
+    }
+    function on_change_white_noise(e)
+    {
+	$("input[name=white_noise]").parents("label").each(
+	    function (i, elm) {
+		$(elm).css("font-weight", "normal");
+	    });
+	var checked = $("input[name=white_noise]:checked");
+	if (checked.val() != 0) {
+	    checked.parents("label").css("font-weight", "bold");
+	}
+    }
+    function on_click_experimental_button(e)
+    {
+	if ($(this).hasClass("close")) {
+	    $(".experimental .container").show();
+	    $(this).removeClass("close");
+	} else {
+	    $(".experimental .container").hide();
+	    $(this).addClass("close");
+	}
+	e.preventDefault();
+	e.stopPropagation();
+    }
     
     $("#url").change(clear_file);
     $("#file").change(clear_url);
     $("input[name=style]").change(on_change_style);
+    $("input[name=noise]").change(on_change_noise_level);
+    $("input[name=scale]").change(on_change_scale_factor);
+    $("input[name=white_noise]").change(on_change_white_noise);
+    $(".experimental .button").click(on_click_experimental_button)
+    
+    on_change_style();
+    on_change_scale_factor();
+    on_change_noise_level();
 })