add images and app

README.md

@@ -1,46 +1,33 @@
 ---
-title: Sentence_Transformers_for_semantic_search
-emoji: 🐠
-colorFrom: gray
-colorTo: red
+title: Sentence Embeddings
+emoji: 🔥
+colorFrom: yellow
+colorTo: purple
 sdk: streamlit
 app_file: app.py
 pinned: false
-license: cc
 ---
 
 # Configuration
 
-`title`: _string_
+`title`: _string_  
 Display title for the Space
 
-`emoji`: _string_
+`emoji`: _string_  
 Space emoji (emoji-only character allowed)
 
-`colorFrom`: _string_
+`colorFrom`: _string_  
 Color for Thumbnail gradient (red, yellow, green, blue, indigo, purple, pink, gray)
 
-`colorTo`: _string_
+`colorTo`: _string_  
 Color for Thumbnail gradient (red, yellow, green, blue, indigo, purple, pink, gray)
 
-`sdk`: _string_
-Can be either `gradio`, `streamlit`, or `static`
+`sdk`: _string_  
+Can be either `gradio` or `streamlit`
 
-`sdk_version` : _string_
-Only applicable for `streamlit` SDK.  
-See [doc](https://hf.co/docs/hub/spaces) for more info on supported versions.
-
-`app_file`: _string_
-Path to your main application file (which contains either `gradio` or `streamlit` Python code, or `static` html code).
+`app_file`: _string_  
+Path to your main application file (which contains either `gradio` or `streamlit` Python code).  
 Path is relative to the root of the repository.
 
-`models`: _List[string]_
-HF model IDs (like "gpt2" or "deepset/roberta-base-squad2") used in the Space.
-Will be parsed automatically from your code if not specified here.
-
-`datasets`: _List[string]_
-HF dataset IDs (like "common_voice" or "oscar-corpus/OSCAR-2109") used in the Space.
-Will be parsed automatically from your code if not specified here.
-
-`pinned`: _boolean_
+`pinned`: _boolean_  
 Whether the Space stays on top of your list.

app.py

@@ -0,0 +1,122 @@
+import streamlit as st
+from PIL import Image
+from backend import inference
+
+st.title("Using Sentence Transformers for semantic search")
+
+logos_png = Image.open("images/logos.png")
+st.image(
+    logos_png,
+    caption="The cool kids on the block.",
+)
+
+
+st.subheader("Code Query Search: An Introduction to Semantic Search")
+
+st.markdown(
+    """
+Suppose you have a database of texts and you want to find which entries best match the meaning of a single text you have. Example, we want to see which query on Stack Overflow best matches a question you have about Python. However, just word-for-word matching will not work due to the complexity of the programming questions. We need to do a "smart" search: that's what semantic search is for.
+
+*"**Semantic search seeks to improve search accuracy by understanding the content of the search query. In contrast to traditional search engines which only find documents based on lexical matches, semantic search can also find synonyms.**" - [SBert Documentation](https://www.sbert.net/examples/applications/semantic-search/README.html)*.
+
+
+Let's make this interactive and use the power of **[Streamlit](https://docs.streamlit.io/) + [HF Spaces](https://huggingface.co/spaces) + the '[sentence-transformers/all-mpnet-base-v2](https://huggingface.co/sentence-transformers/all-mpnet-base-v2)' model  by creating the programming question search example right here**:
+"""
+)
+
+anchor = st.text_input(
+    "Please enter here your query about Python, we will look for similar ones",
+    value="How to sort a list",
+)
+
+n_texts = st.number_input(
+    f"""How many similar queries you want?""", value=2, min_value=1
+)
+if st.button("Find the most similar queries in the Stack Overflow query dataset."):
+
+    st.markdown(
+        """
+        **Amazing! These are the entries in our Stack Overflow dataset that better match the language of our specific query.** The 'Description' column shows the description of the entry in our dataset, and the 'Code' column shows the code of the proposed solution. Sorry for the format of the Code!
+        """
+    )
+
+    st.table(
+        inference.query_search(
+            anchor, n_texts, "sentence-transformers/all-mpnet-base-v2"
+        )
+    )
+
+
+st.subheader("What happens underneath? Obtaining embeddings")
+
+st.markdown(
+    f"""
+ First we embed our database of texts: we convert each of the Stack Overflow queries into a vector space. That is, convert query descriptions from words to numbers that provide an understanding of the language within each query. The understanding of each text will be reflected in a vector called embedding. 
+
+ The system would look like the following figure. We embed (1) our texts database (in this case, the Stack Overflow set of queries), and (2) our own query (in this case: '{anchor}') **with the same model**. Notice that our query could be a matrix of several elements.
+
+"""
+)
+
+
+sentenceEmbeddingsProcess_png = Image.open("images/sentenceEmbeddingsProcess.png")
+st.image(
+    sentenceEmbeddingsProcess_png,
+    caption="Embed the database and your query with the same Sentence Transformers model.",
+)
+
+
+st.subheader("Obtaining the closest observations in the vector space")
+
+st.markdown(
+    f"""
+We now have two numerical representations of texts (embeddings): one for our original text database and one for our own query. Our goal: get the texts in the database that have the closest meaning to our query.
+
+Queries that are most similar to each other will be closer together in the vector space, and queries that differ most will be farther apart.
+
+The following figure (obtained from the [Sentence Transformers documentation](https://www.sbert.net/examples/applications/semantic-search/README.html)) shows in blue how we would represent the Stack Overflow query database, and in orange your '**{anchor}**' query which is outside the original database. The blue dot with the annotation 'Relevant Document' would be the most similar Stack Overflow query to our search.
+
+"""
+)
+
+semanticSearchSBert_png = Image.open("images/semanticSearchSBert.png")
+st.image(
+    semanticSearchSBert_png,
+    caption="Representation of embeddings in a 2D vector space. Obtained from the Sentence Transformers documentation.",
+)
+
+st.markdown(
+    """
+
+We compare the embedding of our query with the embeddings of each of the texts in the database (there are easier ways to do it but in this case it won't be necessary) using the cosine similarity function, better explained in the [Pytorch documentation](https://pytorch.org/docs/stable/generated/torch.nn.functional.cosine_similarity.html). The results of the cosine similarity function will detect which of the texts in the database are closest to our query in vector space.
+
+This is what we did un the dynamic example above! 
+"""
+)
+
+
+st.subheader("Check this cool resources!")
+
+
+st.markdown(
+    """
+If you want to know more about the Sentence Transformers library:
+- **The [Hugging Face Organization](https://huggingface.co/sentence-transformers)** for all the new models and instructions on how to download models.
+- The **[Nils Reimers tweet](https://twitter.com/Nils_Reimers/status/1487014195568775173) comparing Sentence Transformer models with GPT-3 Embeddings**. Spoiler alert: the Sentence Transformers are awesome!
+- The **[Sentence Transformers documentation](https://www.sbert.net/)**,
+"""
+)
+
+separator = """
+---
+"""
+
+st.markdown(separator)
+
+st.markdown(
+    """
+Thanks for reading!
+
+- Omar Espejel ([@espejelomar](https://twitter.com/espejelomar))
+"""
+)

requirements.txt

@@ -0,0 +1,4 @@
+sentence_transformers
+pandas
+streamlit
+torch