← back to Handbag Authentication
handbag_data/github_datasets/Pursearch/src/templates/home.html
260 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Pursearch</title>
<!-- Font Awesome Icons -->
<link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="/static/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="/static/css/creative.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Data Insight</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#approach">Approach</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#test">Prediction</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold">Pursearch</h1>
<hr class="divider my-4">
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 font-weight-light mb-5"> Upload image, find your dream handbag immediately.</p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Try it now</a>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section class="page-section bg-primary" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Find your dream handbag!</h2>
<hr class="divider light my-4">
<!--<p class="text-white-50 mb-4">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>-->
<a class="btn btn-light btn-xl js-scroll-trigger" href="#portfolio">Get Started!</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="page-section" id="approach">
<div class="container">
<h2 class="text-center mt-0">Approaches</h2>
<hr class="divider my-4">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<!--<i class="fas fa-4x fa-gem text-primary mb-4"></i>-->
<h3 class="h4 mb-2">Data Scraping</h3>
<p class="text-muted mb-0">Scraped more than 5k branded handbag images from Google searching results and collected more than 3k handbag information from Saks Fifth Avenue and Shein </p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<!--<i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>-->
<h3 class="h4 mb-2">Detection</h3>
<p class="text-muted mb-0">Detected handbag from image using objected detection model (faster rcnn) built by Tensorflow. </p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<!--<i class="fas fa-4x fa-globe text-primary mb-4"></i>-->
<h3 class="h4 mb-2">Identification</h3>
<p class="text-muted mb-0">Identified handbag brand and type using transfer learning based on pretrained convolutional neural network (Resnet50) by PyTorch.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<!--<i class="fas fa-4x fa-heart text-primary mb-4"></i>-->
<h3 class="h4 mb-2">Recommendation</h3>
<p class="text-muted mb-0">Recommended handbags with different prices using handbag vector similarity. </p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="/static/img/portfolio/fullsize/l_logo.jpg">
<img class="img-fluid" src="/static/img/portfolio/thumbnails/l_logo.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-name">
Louis Vuitton
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="/static/img/portfolio/fullsize/chanel_logo.jpg">
<img class="img-fluid" src="/static/img/portfolio/thumbnails/chanel_logo.jpg" alt="">
<div class="portfolio-box-caption">
<!--<div class="project-category text-white-50">
Chanel
</div>-->
<div class="project-name">
Chanel
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="/static/img/portfolio/fullsize/gucci_logo.jpg">
<img class="img-fluid" src="/static/img/portfolio/thumbnails/g_l.jpg" alt="">
<div class="portfolio-box-caption">
<!--<div class="project-category text-white-50">
Category
</div>-->
<div class="project-name">
Gucci
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="/static/img/portfolio/fullsize/coach_logo.jpg">
<img class="img-fluid" src="/static/img/portfolio/thumbnails/coach_logo.jpg" alt="">
<div class="portfolio-box-caption">
<!--<div class="project-category text-white-50">
Category
</div>-->
<div class="project-name">
Coach
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="/static/img/portfolio/fullsize/mk_logo.jpg">
<img class="img-fluid" src="/static/img/portfolio/thumbnails/mk_logo.jpg" alt="">
<div class="portfolio-box-caption">
<!--<div class="project-category text-white-50">
Category
</div>-->
<div class="project-name">
Michael Kors
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="/static/img/portfolio/fullsize/longchamp_logo.jpg">
<img class="img-fluid" src="/static/img/portfolio/thumbnails/longchamp_logo.jpg" alt="">
<div class="portfolio-box-caption p-3">
<!--<div class="project-category text-white-50">
Category
</div>-->
<div class="project-name">
Longchamp
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Call to Action Section -->
<section id="test" class="page-section bg-dark text-white">
<div class="container text-center">
<h2 class="mb-4">Find Your Dream Handbag!</h2>
<a class="btn btn-light btn-xl" href="/predict">Test Now!</a>
</div>
</section>
<!-- Contact Section -->
<section class="page-section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2>
<hr class="divider my-4">
<p class="text-muted mb-5">Keep in touch!</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<i class="fas fa-phone fa-3x mb-3 text-muted"></i>
<div>+1 (917) 593-3713</div>
</div>
<div class="col-lg-4 mr-auto text-center">
<i class="fas fa-envelope fa-3x mb-3 text-muted"></i>
<!-- Make sure to change the email address in anchor text AND the link below! -->
<a class="d-block" href="mailto:jianinglu928@gmail.com">jianinglu928@gmail.com</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-light py-5">
<div class="container">
<div class="small text-center text-muted">Copyright © 2020 - Jianing Lu</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="/static/js/creative.min.js"></script>
</body>
</html>