← back to Handbag Authentication

handbag_data/github_datasets/Pursearch/src/templates/result.html

123 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>Handbag Identifier</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.css" rel="stylesheet">

  <!--<link rel="stylesheet" href="/static/style.css">-->

</head>

<!--<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <link rel="stylesheet" href="/static/style.css">

    <title>Image Prediction using PyTorch</title>
  </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="/#portfolio">Prediction</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="/#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  <section class="page-section bg-dark text-white">
    <form class="form-signin" method=post enctype=multipart/form-data>

        <!--<h1 class="h3 mb-3 font-weight-normal">Handbag Identifier</h1>-->
        <div class="container text-center">
          </style>
          <img src="{{url_for('uploaded_file', filename=filename)}}" style="border: 1px solid #000; max-width: 256px; max-height:256px;"> > <img src="{{url_for('uploaded_file', filename=crop_filename)}}" style="border: 1px solid #000; max-width:128px; max-height:128px;">
          <p></p>
          <!--<h5 class="mb-4"> Identification</h5>-->
          <p>  Name: {{ class_name }}  <br>  Brand: {{ class_brand }}  <br> <a class="mb-4" href="{{ class_web }}" >  Official Website  </a>
          <p></p>
          <!--<h5 class="mb-4"> Recommendation</h5>-->
          <figure>
            <img src="{{Top1_img}}" style="border: 1px solid #000; max-width: 200px; max-height:200px;" />
            <figcaption> {{ Top1_product }}  <br> Brand: {{ Top1_brand}}  <br> Price: {{ Top1_price}}  <br> Sim: {{ Top1_sim }} <br><a href="{{ Top1_page}}">  Buy It </a>
            </figcaption>
          </figure>

          <figure>
            <img src="{{Top2_img}}" style="border: 1px solid #000; max-width: 200px; max-height:200px;" />
            <figcaption> {{ Top2_product }}  <br> Brand: {{ Top2_brand}}  <br> Price: {{ Top2_price}}  <br> Sim: {{ Top2_sim }} <br><a href="{{ Top2_page}}">  Buy It </a>
            </figcaption>
          </figure>

          <figure>
            <img src="{{Top3_img}}" style="border: 1px solid #000; max-width: 200px; max-height:200px;" />
            <figcaption> {{ Top3_product }}  <br> Brand: {{ Top3_brand}}  <br> Price: {{ Top3_price}}  <br> Sim: {{ Top3_sim }} <br><a href="{{ Top3_page}}">  Buy It </a>
            </figcaption>
          </figure>

          <!--<a class="mb-4" href="{{ class_web }}" > Official Website</a>-->
        </div>
    </form>
    <script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </section>
    <footer class="bg-light py-5">
      <div class="container">
        <div class="small text-center text-muted">Copyright &copy; 2020 - Jianing Lu</div>
      </div>
    </footer>
  </body>
</html>