app.py

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/docs/facial-similarity-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("celebrity-match")


@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])
    if emb:
        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)
    else:
        with col2: st.error('Oops! No face was detected, try again.', icon="🚨")