DEV Community: Ganesh R

Integrate Hugging Face Spaces & Gradio with a React application

Ganesh R — Sat, 12 Oct 2024 09:24:09 +0000

This article will provide a quick introduction to create & deploy a Machine Learning Model and to integrate with a React application.
Here is an overview of technologies we will be using

Hugging Face is a platform where we can host Machine Learning Models and Create Spaces to use them with any of the models available.

Gradio is a platform which enables to build user interfaces for interacting with or demoing our Machine Learning models.

Create a Space in Hugging Face

Let's start by creating a space of hugging face here. Choose a name for the space and under Spaces SDK choose Gradio

You can leave the other options as default and proceed to create space. Clone the created spaces to your machine and create app.py with the following contents

import gradio as gr

def greet(name):
    return "Hello " + name + "!!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

Once these are are done, commit and push your changes to your space. Hugging face should build this automatically and shows the gradio interface of our app like this

Now we have built a gradio app with basic interface and hosted it in hugging face spaces. Let's look into extending the functionality our app in the next section.

Note: You need to create a write token here in order to push your changes to hugging face spaces

Create a Vision Classifier Model

We are going to use fast.ai to create a simple classification which predicts whether a given image is a cat or not.

First, let's get path of the training images dataset. fast.ai provides lot of datasets already, we'll use one from that. Here are the steps to train & export the model

# Read the dataset from fastai
 path = untar_data(URLs.PETS)/'images'
 dls = ImageDataLoaders.from_name_func(
        path,get_image_files(path), valid_pct=0.2, seed=42,
        label_func=is_cat, item_tfms=Resize(224))

# Train the model with vision_learner
 learn = vision_learner(dls, resnet34, metrics=error_rate)
 learn.fine_tune(1)

# Export the model
 learn.path = Path('.')
 learn.export(
 'cats_classifier.pkl')

After you have run this, there should be a model file generated in the same directory. You can then use this for predictions.

model = load_learner('cats_classifier.pkl')

def predict(image):
     img = PILImage.create(image)
     _,_,probs = model.predict(img)
     return {'Not a Cat':float("{:.2f}".format(probs[0].item())), 
            'Cat':float("{:.2f}".format(probs[1].item()))}

Then launch gradio using the predict method above

demo = gr.Interface(fn=predict, inputs=gr.Image(), outputs='label')
demo.launch()

To see your changes in action, push your changes to hugging face.

Note: Since the size of the generated model will be large, you need to use Git LFS to track the changes

Then you should able to upload any image and find if its a cat or not

Integrate with React application

One of the advantages of using gradio is that, it gives us an API to access our model. We will look into how to integrate it with React.

If you scroll to bottom in our deployed model in hugging face, you can see a button called use via Api where you will find the details to connect to the api. We will be using @gradio/client package to connect to api. Here is the sample code to connect to the model & get the results

import { Client } from "@gradio/client";

const response_0 = await fetch("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png");
const exampleImage = await response_0.blob();

const client = await Client.connect("ganesh1410/basic-classifier");
const result = await client.predict("/predict", { 
                image: exampleImage, 
});

// This should have the label and confidences
console.log(result.data);

You can see it in action for our model here

Here are the links for all the code & demo

Nullish coalescing and Optional chaining

Ganesh R — Thu, 11 Jun 2020 17:58:05 +0000

Canonical Url: https://ganes.dev/nullish-coalescing-and-optional-chaining/

In this post, I'll explain about two of the recent additions to the javascript. Nullish Coalescing and Optional Chaining.

Nullish Coalescing

When accessing a property of a object in javascript, we usually provide a fallback value incase the property is not present (undefined) or null.

For Example. Consider a object like this

const Blog = {
  showPost: false,
  blogTitle: 'A new Post',
  animationDuration: 0,
  blogSubTitle: '',
  nullVal: null,
};

A usual way for this handle fallback is by using the || operator

const undefinedValue = Blog.someValue || 'default value'; // result: default value
const nullValue = Blog.nullVal || 'some other default value'; // result: some other default value

// Other Cases
const showPost = Blog.showPost || true; // expected: false, result: true
const postAnimationDuration = Blog.animationDuration || 400; // expected: 0, result: 400
const blogSubtitle = Blog.blogSubTitle || 'Subtitle'; // expected: '', result: Subtitle

The first two examples work as we expected, but for other cases we get the result as right hand side value of || operator as shown in the above example.This is because the values on left hand side already evaluate to falsy in Javascript.

For this problem, we use the Nullish Coalescing operator

const showPost = Blog.showPost ?? true; // expected: false, result: false
const postAnimationDuration = Blog.animationDuration ?? 400; // expected: 0, result: 0
const blogSubtitle = Blog.blogSubTitle ?? 'Subtitle'; // expected: '', result: ''

Once we switch to nullish Coalescing, we get the expected results.

Optional Chaining

When accessing a nested property in the object, we usually have to check whether intermediate properties are present.

For Example, Consider a object with nested properties like this

const Person = {
  name:'Ganesh'
  address:{
    home:'Home Address',
    work:'Work Address'
  }
}

const homeAddress = Person.address.home

Since, we are accessing nested values, if address is undefined we get an error like Cannot read property home of undefined. In this case, we use Optional Chaining operator.

To use the optional chaining operator, we have to put a ? before accessing a property. So above example changes to this

const homeAddress = Person?.address?.home;

// We can also use this for functions
someObj?.func();

Combining both of them

Although these both operators are good seperately, when combined they become very useful.
I can take the sample example and nullish coalescing operator at the end of it.

// The result defaults to Home if left side of nullish coalescing is null (or) undefined.
const homeAddress = Person?.address?.home ?? 'Home';

Stale State in React Hooks

Ganesh R — Sat, 07 Mar 2020 21:19:35 +0000

This post is originally published here
https://ganes.dev/stale-state-in-react-hooks

If you have been using React Hooks for some time or if you're new to using React hooks, one of the most common (or) confusing problems you face is that you sometimes the stale value of the state used in the application. Let us understand how to solve this problem.

Using values in useEffect with empty dependency array

Consider this code

function App() {
  const [title, setTitle] = useState('initial Title');

  useEffect(() => {
    document.title = title;
  }, []);

  return (
    <>
      <button
        onClick={() => {
          setTitle('New Title');
        }}>
        Change Title
      </button>
    </>
  );
}

Here the title of the document is Initial Title. And we expect the the document title to change when Change Title button is clicked.

But, that does not happen here. This is because the useEffect expects the dependencies used inside the effect to be passed as second argument. Since we use title inside useEffect we need to pass it as dependency. So, our above code changes to this.

// Rest of the part remains the same

useEffect(() => {
  document.title = title;
}, [title]);

Note: This will also work, if we pass no second argument in useEffect. But the that will run on every render. And passing all dependicies used inside useEffect is considered good
practice and also good for performance.

Using values inside callback passed to useEffect

This is a little subtle than the previous bug. Might be a little harder to debug.

function App() {
  const [cond, setCond] = useState(false)

  const someCallback = () => {
    if (cond) {
      alert('hello')
    }
  }

  useEffect(() => {
    someCallback()
  }, [])

  return (
    <>
      <button
        onClick={() => {
          setCond(c => !c)
        }}
      >
        Change State
      </button>
    </>
  )
}
}

In the above example, we are using the state value inside the callback passed to the useEffect. We expect the our component to alert hello everytime the condition becomes true.

But that does not happen here. This is because our initial value of cond is captured inside the callback passed to useEffect and does not get updated in subsequent renders.

Since, we are using this callback inside useEffect we need to tell React when the callback updates. In order to do that we need to wrap our callback in useCallback hook and pass the dependencies used inside the callback as second argument and then pass the callback to useEffect and list the callback as a dependency. So, our above code changes to this

// Rest of the part remains the same

const someCallback = useCallback(() => {
  if (cond) {
    alert('hello');
  }
}, [cond]);

useEffect(() => {
  someCallback();
}, [someCallback]);

To Avoid these kind of problems, I suggest to use the official eslint-plugin from the React team.

Using Javascript Sets with React useState

Ganesh R — Fri, 15 Nov 2019 10:09:44 +0000

Recently, I wanted to try something different. To use a Set object as a react state value.

Initially, I tried to find examples of this online but could not find anything useful or relatable. So, let me explain Sets with an example of my own.

First, we have a list of products and we are filtering the products based on the brand(s) selected by the user.

My initial idea for this is to use an array to store the filters (selected brand names) I need to apply and append it to query params in the url. But then I thought Set would be a more apt data structure to go for.

Let's say we have three brands - Nike, Adidas and Puma; and a list of products each belonging to one of the above three brands.

The initial state that holds the user selected brands is as below.

const [selectedBrands,setSelectedBrands] = useState(new Set());

So, whenever we click on a brand, we need to add the brand to the set object and if that brand is already present in the Set, we need to remove it. And based on the current state of the selected brands, we need to render the products list.

const brands = ["Nike", "Adidas", "Puma"];

function App() {

  function handleBrandSelection(brand) {
    if (selectedBrands.has(brand)) {
      selectedBrands.delete(brand);
      setSelectedBrands(selectedBrands);
    } else {
      selectedBrands.add(brand);
      setSelectedBrands(selectedBrands);
    }
  }

  return (
    <>
      {/* Brands Section */}
      <section className="filters">
        {brands.map(brand => (
          <div onClick={() => handleBrandSelection(brand)}>
            // brandName
            {brand}
            // Condition to show the checkmark whether it is selected
            {selectedBrands.has(brand) ? (
              <span
                role="img"
                aria-label="checked icon"
                className="checked-icon"
              >
                ✅
              </span>
            ) : null}
          </div>
        ))}
      </section>

      {/* Products Section */}
      <section className="products">
        {/* List of products rendered here */}
      </section>
    </>
  );
}

Clearly, the above code would NOT work.

This is because while updating, we are sending the same Set object that we used in State. Since it has the same reference in memory, React will not update it.

The solution for this is to create a new Set object whenever we change the Set object. So, in the above example, let's create a new Set object while deleting and adding values to the State.


function handleBrandSelection(brand) {

  /*
   * This creates a new Set object based on
   * previous Set object passed as an argument
   * In this case, it is the selected Brands
   */

  const newSet = new Set(selectedBrands);
  if (selectedBrands.has(brand)) {
    newSet.delete(brand);
    setSelectedBrands(newSet);
  } else {
    newSet.add(brand);
    setSelectedBrands(newSet);
  }
}

There is another way to do this if we do not create set object every time while updating the value. That is we can wrap our set in an array. Here is a example of that by David.K Piano

// Detect dark theme var iframe = document.getElementById('tweet-1134466450293436416-168'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1134466450293436416&theme=dark" }

Here is a modest codesandbox example

I hope this is useful to you! Feel free to leave your thoughts in the comments section.