<|start_filename|>web_home/resources/try_on_data.js<|end_filename|>
window.tryOnData = [{
  modelImg:
      'static_files/resources/target/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed1332.png',
  outfits: [
    [
      'static_files/resources/reference/3unnK2pHgJik3RrKpEuduz_NKu8xa9DDZbiwGs5ThfxDF_seed6603.png',
      'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13323unnK2pHgJik3RrKpEuduz_NKu8xa9DDZbiwGs5ThfxDF_seed6603full_loss.png'
    ],
    [
      'static_files/resources/reference/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed7025.png',
      'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed133243bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed7025full_loss.png'
    ],
    [
      'static_files/resources/reference/4UQpqcAjsHiFirwQKBSAAu_54xdjdeF6ZkYdoYyd5wrzn_seed1538.png',
      'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13324UQpqcAjsHiFirwQKBSAAu_54xdjdeF6ZkYdoYyd5wrzn_seed1538full_loss.png'
    ],
    [
      'static_files/resources/reference/3Av9tJFg7NhpyTuaBpLfHP_355a3Xwt28BSF2jRuXEDSf_seed1573.png',
      'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13323Av9tJFg7NhpyTuaBpLfHP_355a3Xwt28BSF2jRuXEDSf_seed1573full_loss.png'
    ]
  ],
  pants: [
      [
        'static_files/resources/reference/2wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed1531.png', 'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13322wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed1531full_loss.png'
      ],
      [
        'static_files/resources/reference/2yKyxqvHjNgrNkfYwPDbLY_cixikSMXZ7kaTKavQMJxaD_seed5405.png', 'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13322yKyxqvHjNgrNkfYwPDbLY_cixikSMXZ7kaTKavQMJxaD_seed5405.png'
      ],
      ['static_files/resources/reference/2wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed8037.png',
'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13322wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed8037full_loss.png'
      ]
  ]
}];


<|start_filename|>web_home/index.html<|end_filename|>
<!DOCTYPE html>
<meta charset="utf-8">
<title>VOGUE: Try-On by StyleGAN Interpolation Optimization</title>
<link rel="stylesheet" href="resources/sakura.css">
<link rel="stylesheet" href="resources/try_on_style.css">
<div id="paper-heading">
  <h1>VOGUE: Try-On by StyleGAN Interpolation Optimization</h1>
  	<pre class="major">
  		<a href="https://katiemlewis.github.io/" target="_blank" class="authors"><NAME></a><sup>1,2</sup>		<a href="https://www.linkedin.com/in/srivatsan-varadharajan-9a570818" target="_blank" class="authors"><NAME></a><sup>1</sup>		<a href="https://sites.google.com/view/irakemelmacher/home" target="_blank" class="authors"><NAME></a><sup>1,3</sup>
  	<sup>1</sup>Google Research	<sup>2</sup>MIT CSAIL 	<sup>3</sup>University of Washington</pre>
  <div id="buttons">
                <a href="resources/VOGUE-virtual-try-on.pdf" target="_blank" class="button big wide smooth-scroll-middle"> Paper </a>
                <a href="http://arxiv.org/abs/2101.02285" target="_blank" class="button big wide smooth-scroll-middle">arXiv </a>
                <a href="https://youtu.be/AWd7x_3GaZk" target="_blank" class="button big wide smooth-scroll-middle"> Video </a>
                <a href="demo_rewrite.html" target="_blank" class="button big wide smooth-scroll-middle"> Interactive Example</a>
    </div>


    <div class="video">
        <iframe width="854" height="480" src="https://www.youtube.com/embed/AWd7x_3GaZk" frameborder="0" allow=" autoplay; encrypted-media;" allowfullscreen></iframe>  
    </div>

	<div class= "abstract">
		<h2>Abstract</h2>
		<p>Given an image of a target person and an image of another person wearing a garment, we automatically generate the target person in the given garment. At the core of our method is a pose-conditioned StyleGAN2 latent space interpolation, which seamlessly combines the areas of interest from each image, i.e., body shape, hair, and skin color are derived from the target person, while the garment with its folds, material properties, and shape comes from the garment image. By automatically optimizing for interpolation coefficients in the latent space and per layer, we can perform a seamless, yet true to source, merging of the garment and target person. Our algorithm allows for garments to deform according to the given body shape, while preserving pattern and material details. Experiments demonstrate state-of-the-art photo-realistic results at high resolution (512x512). </p>
	</div>

	<div class="abstract">
		<h2>VOGUE Method</h2>
		<p>We train a pose-conditioned StyleGAN2 network that outputs RGB images and segmentations.</p>
		<img src="resources/stylegan.png" alt="" />
		<p>After training our modified StyleGAN2 network, we run an optimization method to learn interpolation coefficients for each style block. These interpolation coefficients are used to combine style codes of two different images and semantically transfer a region of interest from one image to another. This method can be used for generated StyleGAN2 images or on real images by first projecting the real images into the latent space.  </p>
		<img src="resources/optimization.png" alt="">
	</div>	

	<div class="abstract">
		<h2>Generated Image Try-On</h2>
		<p>VOGUE can transfer garments between different poses and body shapes. It preserves garment details (shape, pattern, color, texture) and person identity (hair, skin color, pose). </p>
		<h4>Shirt Try-On</h4>
    <img class="gif" src="resources/demo-shirts-slow.gif">
    With VOGUE, the same person can try on shirts of different styles (above). The identity of the person is preserved. When transferring a shorter garment or a different neckline, VOGUE is able to synthesize skin that is realistic and consistent with identity (below). 
		<img src="resources/shirt-tryon.png" alt="">
    Different people can also try on the same shirt (below). The characteristics of the shirt are preserved across different poses and people.
    <img class="gif" src="resources/demo-shirts-different-people-slow.gif">
		<h4>Pants Try-On</h4>
    <img class="gif" src="resources/demo-pants-slow.gif">
		<img src="resources/pants_tryon.png" alt="">
    </div>

    <div class="abstract">
    	<h2>Projected Image Try-On</h2>
    	<p>Virtual try-on between two real images is possible by first projecting the two images into the StyleGAN Z+ latent space. Improving projection is an active area of research.
    	<h4>Shirt Try-On</h4>
    	<img src="resources/tryon_real.png" alt="">
    	<h4>Comparison with SOTA</h4>
    	<img src="resources/sota_comparison.png" alt="">
    	<p><small>
    		<NAME>, et al. "Toward characteristic-preserving image-based virtual try-on network." Proceedings of the European Conference on Computer Vision (ECCV). 2018. <br>
    		<NAME>, et al. "Controllable person image synthesis with attribute-decomposed gan." Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition. 2020.</small>
    	</p>
   	</div>

    <div class="abstract">
       <h2>Acknowledgements</h2>
    We thank <NAME>, <NAME>, <NAME>, <NAME>, and <NAME> for their support of this work.
      <h2>BibTex</h2>
      <pre class="bibtex">
      @article{lewis2020vogue,
        author = {<NAME> and <NAME> and <NAME>},
        title = {VOGUE: Try-On by StyleGAN Interpolation Optimization},
        journal = {arXiv preprint arXiv:2101.02285}
        year = {2021}
      }</pre>
      <h2>Contact</h2>
      <pre id="contact"><NAME> <EMAIL></pre>
    </div>


</div>
<script type="text/javascript" src="resources/try_on_data.js"></script>



<|start_filename|>web_home/resources/try_on_data_pants.js<|end_filename|>
window.tryOnData = [
  {
    modelImg:
        'static_files/resources/target/demo/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13323unnK2pHgJik3RrKpEuduz_NKu8xa9DDZbiwGs5ThfxDF_seed6603full_loss.png',
    outfits: [
      [
        'static_files/resources/reference/2wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed1531.png', 'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13322wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed1531full_loss.png'
      ],
      [
        'static_files/resources/reference/2yKyxqvHjNgrNkfYwPDbLY_cixikSMXZ7kaTKavQMJxaD_seed5405.png', 'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13322yKyxqvHjNgrNkfYwPDbLY_cixikSMXZ7kaTKavQMJxaD_seed5405.png'
      ],
      ['static_files/resources/reference/2wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed8037.png',
'static_files/resources/interpolated/43bX93WjTb8Z4w2aHVTujo_o4XzSw3Sqkr9hvNGt8tTfb_seed13322wwXujx9s3XSaGFHWFR7fb_TJxfmXyLz9qWnHxdyC5nMD_seed8037full_loss.png'
      ]
    ]
  }
];


<|start_filename|>web_home/resources/try_on_style.css<|end_filename|>
.hidden-radio {
  width: 0;
  height: 0;
}

[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

#buttons{
  width:"20%";
}

a.authors{
  text-decoration: none;
  color:#1d7484;
}

img.gif{
  display:block;
  margin-left: auto;
  margin-right: auto;
  width:35%; 
}

.title {
  margin: 0 auto;
  width: 100%;
  padding: 0px;
}

.video{
  width:100%;
  margin:0 auto;
  padding-top:3%;

}

.interpolatedResult{
  height:150px;
  width:150px;
}

.outputTitle{
  width: 100%;
  padding: 0px;
  margin-top: 265px;
}

#contact{
  text-align:center;
}

.abstract{
  text-align: justify;
  text-justify: inter-word;
  width:50%;
  margin:0 auto;
}

.output {
  display: inline-block;
}
#output {
 position: relative;
 width: 250px;
 height:250px;
 display: inline-block;
}
.hidden {
  opacity: 0;
  transition: opacity .1s;
}

img{
  margin-bottom: 0px;
}

#pants{
  margin-top: 165px;
}

#imageResult .selected {
  display: block;
}
#modelResult:hover {
  opacity: 1;
  transition: opacity 0.1s;
  text-align: right;
}

.major{
  background-color: transparent;
}

.choice {
  display: inline-block;
  width: 200px;
  vertical-align:top;
}

.relResult {
  position: absolute;
  left: 0px;
}

.main {
  width: 100%;
  position: absolute;
  top: 20%;
}


<|start_filename|>web_home/resources/try_on.js<|end_filename|>
function display(src_name){
	output = document.getElementById("interpolatedResult")
	model_image = document.getElementById("modelBigImage")
	output.src = src_name

	if(src_name == "model0"){
		output.classList.add("hidden")
		model_image.classList.remove("hidden")
	}
	else{
		model_image.classList.add("hidden")
		output.classList.remove("hidden")
	}

}

function hover(id_name){
	output = document.getElementById("interpolatedResult")
	model_image = document.getElementById("modelBigImage")
	if(id_name == "interpolatedResult"){
		output.classList.remove("hidden")
		model_image.classList.add("hidden")
	}
	else{
		model_image.classList.remove("hidden")
		output.classList.add("hidden")
	}
}

function noHover(id_name){
	output = document.getElementById("interpolatedResult")
	model_image = document.getElementById("modelBigImage")
	if(id_name == "interpolatedResult"){
		output.classList.add("hidden")
		model_image.classList.remove("hidden")
	}
	else{
		model_image.classList.add("hidden")
		output.classList.remove("hidden")
	}
}