app files

app.py

@@ -0,0 +1,51 @@
+import pinecone
+from PIL import Image
+import streamlit as st
+from facenet import FacenetEmbedder
+from jinja2 import Environment, FileSystemLoader
+
+
+st.markdown("<h1 style='text-align: center;'>⚡️ Find Your Celebrity Match ⚡️</h1>", unsafe_allow_html=True)
+st.markdown("<p style='text-align: center;'>Take a picture to find your match, learn how it works <a href='https://www.pinecone.io/learn/gif-search/'>here</a>.</p>", unsafe_allow_html=True)
+
+def local_css(file_name):
+    st.markdown('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)
+    with open(file_name) as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
+@st.experimental_singleton
+def init_template():
+    local_css("style.css")
+    environment = Environment(loader=FileSystemLoader("templates/"))
+    template = environment.get_template("card.html")
+    return template
+
+PINECONE_KEY = st.secrets["PINECONE_KEY"]
+
+@st.experimental_singleton
+def init_pinecone():
+    pinecone.init(api_key=PINECONE_KEY, environment="us-west1-gcp")  # get a free api key from app.pinecone.io
+    return pinecone.GRPCIndex("tmdb-people-115k")
+
+
+@st.experimental_singleton
+def init_facenet():
+    facenet = FacenetEmbedder()
+    return facenet
+
+
+template = init_template() 
+index = init_pinecone()
+facenet = init_facenet()
+
+col1, col2, col3 = st.columns([0.2, 2, 0.2])
+
+with col2:
+    img_file_buffer = st.camera_input("")
+
+if img_file_buffer is not None:
+    img = Image.open(img_file_buffer)
+    emb = facenet.encode([img])
+    result = index.query(emb[0], top_k=3, include_metadata=True)
+    cards = template.render(results=result["matches"])
+    st.markdown(f"<div class='container-md' align='center'><div class='row'>{cards}</div></div>", unsafe_allow_html=True)

facenet.py

@@ -0,0 +1,23 @@
+import torch
+import numpy as np
+from facenet_pytorch import MTCNN, InceptionResnetV1
+
+class FacenetEmbedder:
+    def __init__(self):
+        self.device = torch.device('cuda:0' if torch.cuda.is_available() else 'cpu')
+        self.mtcnn = MTCNN(device=self.device)
+        self.resnet = InceptionResnetV1(pretrained='vggface2', device=self.device).eval()
+
+    def detect_face(self, batch):
+        faces = self.mtcnn.detect(batch)
+        return faces
+
+    def encode(self, batch):
+        face_batch = self.mtcnn(batch)
+        face_batch = [i for i in face_batch if i is not None]
+        aligned = torch.stack(face_batch)
+        if self.device.type == "cuda": 
+            aligned = aligned.to(self.device)
+
+        embeddings = self.resnet(aligned).detach().cpu()
+        return embeddings.tolist()

requirements.txt

@@ -0,0 +1,6 @@
+facenet-pytorch
+pinecone-client[grpc]
+torch
+datasets
+streamlit
+jinja2

style.css

@@ -0,0 +1,170 @@
+@import url("https://fonts.googleapis.com/css?family=Arimo:400,700");
+
+body {
+    height: 100%;
+    width: 100%;
+    background: #e9e9e9;
+    font-family: 'Arimo', Arial, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    color: #010b26;
+}
+
+* {
+    -webkit-transition: 300ms;
+    transition: 300ms;
+}
+
+.intro {
+    text-align: center;
+}
+
+ul {
+    list-style-type: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+    font-weight: 400;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+a:hover {
+    color: #6ABCEA;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    max-width: 100%;
+    margin-top: 10vh;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.movie-card {
+    background: #ffffff;
+    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 315px;
+    margin: 2em;
+    border-radius: 10px;
+    display: inline-block;
+}
+
+.movie-header {
+    padding: 0;
+    margin: 0;
+    height: 367px;
+    width: 100%;
+    display: block;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.header-icon-container {
+    position: relative;
+}
+
+.header-icon {
+    width: 100%;
+    height: 367px;
+    line-height: 367px;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0 auto;
+    color: #ffffff;
+    font-size: 54px;
+    text-shadow: 0px 0px 20px #6abcea, 0px 5px 20px #6ABCEA;
+    opacity: .85;
+}
+
+.header-icon:hover {
+    background: rgba(0, 0, 0, 0.15);
+    font-size: 74px;
+    text-shadow: 0px 0px 20px #6abcea, 0px 5px 30px #6ABCEA;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    opacity: 1;
+}
+
+.movie-card:hover {
+    -webkit-transform: scale(1.03);
+    transform: scale(1.03);
+    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
+}
+
+.movie-content {
+    padding: 18px 18px 24px 18px;
+    margin: 0;
+}
+
+.movie-content-header,
+.movie-info {
+    display: table;
+    width: 100%;
+}
+
+.movie-title {
+    font-size: 24px;
+    margin: 0;
+    display: table-cell;
+}
+
+.movie-info {
+    margin-top: 1em;
+}
+
+.info-section {
+    display: table-cell;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.info-section:first-of-type {
+    text-align: left;
+}
+
+.info-section:last-of-type {
+    text-align: right;
+}
+
+.info-section label {
+    display: block;
+    color: rgba(0, 0, 0, 0.5);
+    margin-bottom: .5em;
+    font-size: 9px;
+}
+
+.info-section span {
+    font-weight: 700;
+    font-size: 11px;
+}
+
+@media screen and (max-width: 500px) {
+    .movie-card {
+        width: 95%;
+        max-width: 95%;
+        margin: 1em;
+        display: block;
+    }
+
+    .container {
+        padding: 0;
+        margin: 0;
+    }
+}

templates/card.html

@@ -0,0 +1,45 @@
+{% for person in results %}
+<style>
+    .image{{loop.index}} {
+        background: url("https://image.tmdb.org/t/p/h632/{{person.metadata.profile_path}}");
+        background-size: cover;
+        }
+</style>
+<div class="col">
+    <a href="https://www.themoviedb.org/person/{{person.metadata.id}}" style="color: inherit;">
+        <div class="movie-card">
+            <div class="movie-header image{{loop.index}}">
+                <!-- <div class="header-icon-container">
+                    <a href="#">
+                        <i class="material-icons header-icon"></i>
+                    </a>
+                </div> -->
+            </div>
+            <!--movie-header-->
+            <div class="movie-content">
+                <div class="movie-content-header">
+                    <h3 class="movie-title">{{person.metadata.name}}</h3>
+                </div>
+                <div class="movie-info">
+                    <div class="info-section">
+                        <label style="font-size:8.0pt">Date of Birth</label>
+                        <span style="font-size:8.0pt">{{person.metadata.birthday}}</span>
+                    </div>
+                    <!--date,time-->
+                    <div class="info-section">
+                        <label style="font-size:8.0pt">Similarity</label>
+                        <span style="font-size:8.0pt">{{person.score|round(2)}}</span>
+                    </div>
+                    <!--screen-->
+                    <div class="info-section">
+                        <label style="font-size:8.0pt">Popularity</label>
+                        <span style="font-size:8.0pt">{{person.metadata.popularity|round(2)}}</span>
+                    </div>
+                    <!--seat-->
+                </div>
+            </div>
+            <!--movie-content-->
+        </div>
+    </a>
+</div>
+{% endfor %}