DEV Community: Philip

Create a simple and fast search bar using cosine similarity in React ⚛️🔍

Philip — Mon, 07 Oct 2024 08:37:51 +0000

Introduction 📜

In this article, we are going to explore cosine similarity and how to use it to implement a very simple yet effective search bar. Although the topic includes a bit of math, the implementation will be as simplistic as possible, yet we are still going to cover exactly how things work under the hood.

The problem 🤔

If you are here, you are probably wondering, "How do I search for things in the first place?". The answer to this question lies in a field of computer science known as Data Retrieval. We are going to use one of the most fundamental methods used in data retrieval which, while not perfect, is surprisingly easy to implement and yields satisfying results.

Cosine Similarity 🧮

Cosine similarity is a measure used to calculate how similar two vectors are. In simple terms, it is the cosine of the angle formed by the two vectors in space. Consider the following vectors:

In this example, the cosine similarity between vectors A and B is the cosine of angle α, which is cos(26.57°) = 0.8943
This means that the vectors are quite similar.

We can also use this method to calculate the similarity of words.
Imagine we had words that could only have the letters A and B.

Word 1: "aaab"

Word 2: "abb"

Users input word: "aab"

The x-Axis will represent the amount of As and y-Axis the amount of Bs in each word.

At first glance, we can already see that our input "aab" is much closer to "aaab" than to "abb". Let's go ahead and calculate the cosine of each angle:
cos(8.13°) = 0.98

cos(36.86°) = 0.80

This is how we can represent words in a 2D space. But this by itself is not useful. In our world, we use more than just "a" and "b" characters. The English alphabet alone has 26 base characters. Imagine we wanted to support special characters as well, or even multiple languages.
Here we will need to use the general formula for cosine similarity:

Here, vectors A and B are n-dimensional. Note that they should have the same dimensions.

We will compare the following words using this formula:

Word 1 : "banana"

Word 2 : "apple"

User input: "bana"

For each word, we will create a 26-dimensional vector. Each slot represents the frequency of the n-th letter of the alphabet in a given word.

"banana": [3,1,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0]

"apple": [1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,2,0,0,0,0,0,0,0,0,0,0]

"bana": [2,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0]

cos(bana,banana) = 0.982

cos(bana,apple) = 0.309

Therefore, the word "bana" is more closely related to "banana" than to "apple".

Enough math yapping, time to code 💻

We are going to create a cosine similarity search bar in React.
Let's start:

Create a new React app

npx create-react-app search-bar-app

Create a new SearchBar.tsx file

This is our main component.
Add the SearchBar component inside App.js.

import logo from './logo.svg';
import './App.css';
import { SearchBar } from './SearchBar.tsx';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div>
          <SearchBar/>
        </div>
      </header>
    </div>
  );
}

export default App;

From your terminal, install the compute-cosine-similarity package

npm i compute-cosine-similarity

Let's start building our component.

We need 3 variables: one for the query given by the user, one for the results to be displayed back to them, and finally the list of searchable items.

const [query, setquery] = useState<string>("");
const [results, setResults] = useState<string[]>([]);
const items = [
        'Apples',
        'Bananas',
        'Carrots',
        'Dairy Milk',
        'Eggs',
        'Flour',
        'Grapes',
        'Honey',
        'Ice Cream',
        'Juice',
        'Kale',
        'Lettuce',
        'Milk',
        'Nuts',
        'Oranges',
        'Pasta',
        'Quinoa',
        'Rice',
        'Spinach',
        'Tomatoes',
        'Udon Noodles',
        'Vanilla Extract',
        'Watermelon',
        'Yogurt',
        'Zucchini'
    ];

Time for our component's logic.

When a user provides new input, we have to calculate the cosine similarity between the input and every word in our list. Then we return the list of items ordered by cosine similarity in decreasing order.

To calculate the similarity, for each word we construct an array of size 26. Each position in the array represents a letter of the English alphabet. For each character of a word, if the character is an English character, we increase the value of the character's position by 1.

function isEnglishAlphabet(character: string): boolean {
            return /^[a-zA-Z]$/.test(character);
}

function calculateCosineSimilarity(firstWord:string, secondWord:string):number {
            const firstWordMatrix = new Array(26).fill(0);
            const secondWordMatrix = new Array(26).fill(0);

            for (let character of firstWord) {
                if (isEnglishAlphabet(character)) {
                    const index = character.toLowerCase().charCodeAt(0) - 97;
                    firstWordMatrix[index]++;
                }
            }

            for (let character of secondWord) {
                if (isEnglishAlphabet(character)) {
                    const index = character.toLowerCase().charCodeAt(0) - 97;
                    secondWordMatrix[index]++;
                }
            }

            console.log(cosineSimilarity(firstWordMatrix, secondWordMatrix))
            return cosineSimilarity(firstWordMatrix, secondWordMatrix) || 0;
        }

Notice how we access the position of the letter in the matrix. If it is an English character, we get its ASCII value and subtract 97, which is the ASCII value of the letter "a".

We can now use this method on every item to return the results to the user. For each item, we create a pair of its name and cosine similarity with the user input. Then we filter out the items that are less than 0.5 similar and finally order by similarity.

function search():void {
            let newResults = items.map(item =>({
                name: item,
                similarity: calculateCosineSimilarity(query,item)
            }))
            .filter(item => item.similarity > 0.5)
            .sort((a, b) => b.similarity - a.similarity)
            .map(item => item.name);

            setResults(newResults);
        }

We can gather all the methods above in a single useEffect that runs whenever the user input changes.

useEffect(() => {

        function isEnglishAlphabet(character: string): boolean {
            return /^[a-zA-Z]$/.test(character);
        }

        function calculateCosineSimilarity(firstWord:string, secondWord:string):number {
            const firstWordMatrix = new Array(26).fill(0);
            const secondWordMatrix = new Array(26).fill(0);

            for (let character of firstWord) {
                if (isEnglishAlphabet(character)) {
                    const index = character.toLowerCase().charCodeAt(0) - 97;
                    firstWordMatrix[index]++;
                }
            }

            for (let character of secondWord) {
                if (isEnglishAlphabet(character)) {
                    const index = character.toLowerCase().charCodeAt(0) - 97;
                    secondWordMatrix[index]++;
                }
            }

            console.log(cosineSimilarity(firstWordMatrix, secondWordMatrix))
            return cosineSimilarity(firstWordMatrix, secondWordMatrix) || 0;
        }

        function search():void {
            let newResults = items.map(item =>({
                name: item,
                similarity: calculateCosineSimilarity(query,item)
            }))
            .filter(item => item.similarity > 0.5)
            .sort((a, b) => b.similarity - a.similarity)
            .map(item => item.name);

            setResults(newResults);
        }

        search();
    }, [query])

For the final step, we need to create the view of our component. We'll use a simple input that holds the value of "query" and whenever the value inside changes, the query will be updated. This will trigger the useEffect we created. We will map the results in a list just below the search bar.

return (
        <div>
            <input 
                type="text" 
                placeholder="Search..." 
                value={query} 
                onChange={(e) => setquery(e.target.value)} 
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );

Final result ✨🔍

Go ahead and type something into the search bar. The top results should be very relevant to what you are looking for!

Full search bar component code:

import React, { useEffect, useState } from 'react';
import cosineSimilarity from 'compute-cosine-similarity';


export const SearchBar = () => {
    const [query, setquery] = useState<string>("");
    const [results, setResults] = useState<string[]>([]);
    const items = [
        'Apples',
        'Bananas',
        'Carrots',
        'Dairy Milk',
        'Eggs',
        'Flour',
        'Grapes',
        'Honey',
        'Ice Cream',
        'Juice',
        'Kale',
        'Lettuce',
        'Milk',
        'Nuts',
        'Oranges',
        'Pasta',
        'Quinoa',
        'Rice',
        'Spinach',
        'Tomatoes',
        'Udon Noodles',
        'Vanilla Extract',
        'Watermelon',
        'Yogurt',
        'Zucchini'
    ];

    useEffect(() => {

        function isEnglishAlphabet(character: string): boolean {
            return /^[a-zA-Z]$/.test(character);
        }

        function calculateCosineSimilarity(firstWord:string, secondWord:string):number {
            const firstWordMatrix = new Array(26).fill(0);
            const secondWordMatrix = new Array(26).fill(0);

            for (let character of firstWord) {
                if (isEnglishAlphabet(character)) {
                    const index = character.toLowerCase().charCodeAt(0) - 97;
                    firstWordMatrix[index]++;
                }
            }

            for (let character of secondWord) {
                if (isEnglishAlphabet(character)) {
                    const index = character.toLowerCase().charCodeAt(0) - 97;
                    secondWordMatrix[index]++;
                }
            }

            console.log(cosineSimilarity(firstWordMatrix, secondWordMatrix))
            return cosineSimilarity(firstWordMatrix, secondWordMatrix) || 0;
        }

        function search():void {
            let newResults = items.map(item =>({
                name: item,
                similarity: calculateCosineSimilarity(query,item)
            }))
            .filter(item => item.similarity > 0.5)
            .sort((a, b) => b.similarity - a.similarity)
            .map(item => item.name);

            setResults(newResults);
        }

        search();
    }, [query])

    return (
        <div>
            <input 
                type="text" 
                placeholder="Search..." 
                value={query} 
                onChange={(e) => setquery(e.target.value)}
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

Guide to Free Hosting for Your Full-Stack Spring Boot Application

Philip — Sun, 14 Jul 2024 12:59:45 +0000

Introduction 📜

Ever wanted to host your applications for free?
In this article we will learn how to containerize your Spring Boot app with Docker and host both the service and the database on Render.

The project 📚

For this example, we will try to host a full stack web application called Book Eater. This is a website where you can search and request refurbished books, as well as offer your own old ones you've been telling yourself you were going to finish for years now. We are not going to analyse the domain structure, although we will inspect the overall architecture of the project.

The application consists of:

A frontend with HTML, Bootstrap CSS and JS
A Spring Boot API 🍃
A PostgreSQL database 🐘

Step 1 : Dockerfile

What is a container? 📦

Containers are virtual environments that package an application and its dependencies, making it easy to run consistently across different computing environments. Imagine them as a virtual machine, but with only the essential software your application needs to run. In our case, the container will have our project files and an installed version of Java.

What is Docker? 🐳

Docker is a platform that uses containers to package applications and their dependencies, ensuring they run consistently across different environments. Imagine we work in a team where some developers use Windows and others use Linux. A common problem that occurs is: "But it works on my machine." A simple solution would be for everyone to use the same machine. That's exactly what Docker does with containers. It simulates the exact same machine for developers to run their code, while still on their main machine.

Lets containerize our project! 📥

In the source folder of your Spring Boot project (not to be confused with the src folder), create a file called Dockerfile. In this file, we are going to instruct Docker on how to run our application.

First, we need to install Java to run our Spring Boot app. We can do this by installing a Java image.Images are read-only templates used by containers. They can be anything from simple commands to language versions, database drivers, etc. We install an image in our container with the FROM command. This is also referred to as pulling an image. Images can be found on DockerHub.

Let's pull a Java 17 image..

FROM openjdk:17-jdk-alpine

Next, we need to provide the container with the file we want to run. In our case, this is the project's jar file🫙. A jar file is like a ZIP file that contains compiled Java code (*.class) or source code (.java). We can generate the jar file for our project with Maven by executing the mvn package command. This will create the target folder, which contains our .jar file.

To copy the jar file into our container, we use the COPY command. We tell Docker that our jar file is located inside the target folder. *jar tells Docker to copy all files with the .jar extension. This is very handy because we can reuse it with any Java project since we only have one jar file in the target folder and can ignore its name. Finally, we give the file a good name, like app.jar.

COPY target/*.jar app.jar

To run a jarfile we use the ENTRYPOINT command. To run a jarfile with java we add the -jar flag.

ENTRYPOINT ["java","-jar","/app.jar"]

Finally, because we run a Spring Boot app, we need to open port 8080 for the Tomcat webserver to be hosted. This is done using the EXPOSE command.

EXPOSE 8080

All in one Dockerfile

FROM openjdk:17-jdk-alpine
COPY target/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
EXPOSE 8080

If you are using IntelliJ, you can run the Docker file directly. Docker will install the Java image from DockerHub and run the Spring Boot app.

Installation of images:

Our Spring Boot project successfully runs in a Docker container 🥳🥳🥳.

Step 2 : Hosting our Database 🗃️

For the hosting of our database we are going to use Render.com. Render is a fully-managed cloud platform where you can host static sites, databases, background workers and more.

Hosted Database on Render

Once you've signed up, select New > PostgreSQL.

Fill in the form with your desired database name, username, and region. Make sure to select the region closest to you.

Once you are done, go to the connections tab of your database. You will see your hostname, username, and internal and external database URLs. To connect your database with your Spring Boot app, you need to update the datasource parameters in the application.properties file.

spring.jpa.properties.hibernate.transaction.jta.platform=org.hibernate.engine.transaction.jta.platform.internal.AtomikosJtaPlatform
spring.datasource.url=jdbc:postgresql://your_url
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=create

In the your_url section, you need to copy and paste the External Database URL from the "@" symbol onward (do not include the "@" symbol).

Try running your Spring Boot app now. You'll notice it takes a bit more time to connect to the database. If everything works as expected, change your ddl-auto property to update instead of create. This is because when we redeploy our app, we don't want the database to be recreated, which would cause our current data to be lost! 🚨

Step 3 : Hosting our Spring Boot app ⚙️🛜

Render offers a free tier for Web Service Hosting. It also provides a link for your web application so that you and others can access it.

Click New > Web Service. Select Build and deploy from a Git repository, which allows us to directly add and update our project from GitHub.

Once you connect your repository, select Docker as the running environment. In the Root Directory field, enter the name of the project's folder.

We are now ready to deploy our application. Click the Deploy button if the deployment hasn't already started. This will take some time since we are using the free tier and the bandwidth is limited. You will be notified when the deployment is done.

Each time you push new changes to the repository, Render will automatically re-deploy your latest version.

Congrats 🎉🎉🎉

You have successfully containerized and hosted your application and its database for free. Now you can easily share your projects and impress your friends! You have also learned quite a few things about containers, Docker, and images.