projects.html

---
layout: page
---

{% include header.html %}
<div class="container">
  <section class="jumbotron text-center bg-transparent">
  <div class="container">
    <h1>Projects</h1>
  </div>
  </section>
  
  <div class="album">
  <div class="card project-card">
    <img src="files/latte_screenshot.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">LATTE: A 3D LiDAR Annotation Tool</h5>
      <p class="card-text">
        This was a year-long project while I was an undergraduate researcher at Adept Lab, under the supervision of Bichen Wu and Kurt Keutzer. 
        I designed a human-in-the-loop pipeline for labelling 3D LiDAR (light detection and ranging) data for training autonomous driving systems. 
        As far as I know, this is the first of its kind to be open-sourced on Github. 
      </p>
      <p class="card-text">
        The 3D graphics are rendered using Three.js, with Flask as the back-end for exposing an API that leverages machine learning algorithms to automate the data labelling process. 
        By integrating sensor fusion, one-click annotation, and object tracking, I was able prove through experiments that our method is efficient than manual labelling. 
      </p>
      <p class="card-text">
        With LATTE, we are able to accelerate LiDAR point cloud annotation by 6.2x and significantly improve label quality with 23.6% and 2.2% higher instance-level precision and recall, and 2.0% higher bounding box IoU. 
        These results led to a paper submission that was accepted to IEEE International Conference on Intelligent Transportation 2019. 
      </p>
    </div>
    <ul class="list-group list-group-flush">
      <!--<li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>-->
    </ul>
    <div class="card-body">
      <a href="https://github.com/bernwang/latte" target="_blank" class="card-link">Github repo</a>
      <a href="https://www.youtube.com/watch?v=QWjWpqvYA_c" target="_blank" class="card-link">Youtube demo</a>
      <a href="https://arxiv.org/abs/1904.09085" target="_blank" class="card-link">Arxiv paper</a>
    </div>
  </div>
  
  <div class="card project-card"> 
    <img src="files/seam_carving_screenshot.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Seam Carving</h5>
      <p class="card-text"> 
        In this project, we implement seam carving, a content-aware image resizing technique. 
        A seam is a connected path from one side of the image to the other that chooses exactly one pixel from each column (or row).
        We remove seams until we end up with an image of our desired size.
        The resulting image should be a cropped image where we remove "unimportant" details.
      </p>
      <p class="card-text">
        I also implemented object removal using seam carving and seam insertion.
        I first make a mask for the object I want to delete.
        I set the values in the mask such that the masking region for the object is negative and the rest of the mask to be zero.
        Then for seam carving I multiply the mask with the energy map, keeping the rest of the algorithm the same.
        Then I inserted vertical seams to resize the image back to the original size.
      </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/projFinalAssigned/cs194-26-afg/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>

  <div class="card project-card">
    <div>
    <img src="files/santorini.jpg" class="card-img-top float-left" alt="..." style="width: 50%;">
    <img src="files/santorini_miniaturized_color_adjusted.jpg" class="card-img-top float-right" alt="..." style="width: 50%;">
  </div>
    <div class="card-body">
      <h5 class="card-title">Fake Miniatures</h5>
      <p class="card-text"> 
        In this project, we create fake miniatures by simulating tilt-shift photography that is normally achieved using selective focus cameras.
        We are effectively narrowing the perceived depth of field in a scene and creates the illusion that it was taken with a lens was really close to the subject. 
        To achieve this effect, we first create a mask around our desired subject.
        We then use the mask to blur the background such that regions that are farther from the subject are increasingly blurred. 
      </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/projFinalAssigned/cs194-26-afg/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>

  <div class="card project-card">
    <img src="files/image_stitching_screenshot.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">[Auto]Stitching Photo Mosaics</h5>
      <p class="card-text"> 
        I explored the concepts of projective warping and applying those by composing panoramas. 
        Photo stitching can be automated by extracting a feature descriptor for each Harris corner in an image and matching them between two images. </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/proj6B/cs194-26-afg/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>

  <div class="card project-card">
    <img src="files/lightfield_screenshot.gif" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Lightfield Camera</h5>
      <p class="card-text"> 
        In this project, I explore the concepts of depth refocusing and aperture adjustment using light field data.
        The goal is to digitally change the focus and aperture of an image after it has been taken by using multiple images taken over a regularly spaced grid. 
      </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/proj5/cs194-26-afg/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>

  <div class="card project-card">
    <div class="text-center">
      <img src="files/face_morph_screenshot.gif" class="card-img-top" alt="..." style="width: 30%;">
    </div>
    <div class="card-body">
      <h5 class="card-title">Face Morph</h5>
      <p class="card-text"> 
        In this project, we explore the concepts of image warping and data-driven methods on faces. 
        The goal is to compute a "mid-way" image of two faces, create a gif of one face morphing into another face, demonstrate data-driven methods using a dataset of faces to extrapolate from the mean.
      </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/proj4/cs194-26-afg/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>
  
  <div class="card project-card">
    <img src="files/image_blend_screenshot.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Image Blending</h5>
      <p class="card-text"> 
        I explored image blending using computing a Gaussian and Laplacian stack for two images and blending each layer of both stacks.
        The final blended image is computed by adding all the layers of the stacks. 
      </p>
      <p>
        I also explored gradient domain fusion that uses linear least squares regression to solve for the optimal boundary for blending a masked source image into a target image.
      </p> 
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/proj3/cs194-26-afg/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>
  
  <div class="card project-card">
    <img src="files/pinhole_screenshot.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Pinhole Camera</h5>
      <p class="card-text"> 
        A basic camera can be made with a small hole. 
        The light enters the pinhole, then projects onto a screen. 
        Light that reflects off an object enters the hole and collects on the screen.
        If we take a long exposure of all light that hits this screen, it is possible to see the object that light is reflecting off of.
      </p>
      <p class="card-text">
        We made a DIY pinhole camera using a shoebox. We covered the inside with black paper except for the side opposite to the pinhole.
        We then made sure that the only way that light can enter the box is through the pinhole. 
        Therefore, we duct taped all sides of the box to eliminate any holes. We then cut two holes in the box–one for the pinhole, and one for the DSLR.
      </p> 
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/proj2/cs194-26-acv/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>

  <div class="card project-card">
    <img src="files/color_alignment_screenshot.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Automatic Color Channel Alignment</h5>
      <p class="card-text"> 
        As early as 1907, Sergei Mikhailovich Prokudin-Gorskii was given permission to capture scenes using red, green, and blue filters that can form color images when aligned. 
      This project aims at automatically aligning, cropping, and adjusting the color of three 3 separate grayscale images that are supposed to represent the red, green, and blue color channels. 
    </div>
    <ul class="list-group list-group-flush">
    </ul>
    <div class="card-body">
      <a href="https://inst.eecs.berkeley.edu/~cs194-26/fa18/upload/files/proj1/cs194-26-afg/bernie_wang_proj1/" target="_blank" class="card-link">Final report</a>
    </div>
  </div>
  </div>

</div>