DEV Community: Severin Ibarluzea

Make Bounding Boxes for Artificial Intelligence with UDT

Severin Ibarluzea — Mon, 24 Feb 2020 18:20:11 +0000

Label Bounding Boxes with the Universal Data Tool

Labeling your data with bounding boxes is an essential first step before training a machine learning algorithm. The Universal Data Tool is a free, open-source application that makes this process simple.

Before you start, you should have either...

A directory of images
A file where each line is an image url (this is what I'll use)

Configure the Job

To begin navigate to universaldatatool.com or download the latest release from github. I'll use the web version for now.

Click "Create from Template" and select Computer Vision, then configure it to only do bounding boxes. If you also want to label each bounding box with a classification, you can also configure that here.

Import the Data

Navigate to "Samples", then to the "Import" page. Click "Paste Image URLs", paste the image urls and click "Add Samples".

Label the Data

You can now begin labeling. Click the "Label" button at the top, then click on any sample to begin. Samples will turn blue as they're labeled.

Wrapping Up

When you're done, navigate to the "Settings" tab and click Download JSON. The resulting file can be loaded into the Universal Data Tool again, or parsed for usage with a machine learning algorithm.

That's it! You now have everything you need to add bounding boxes to a image dataset.

useCallback hook isn't a drop-in replacement for class methods, how to avoid rerenders and access state/props within useCallback

Severin Ibarluzea — Sat, 05 Jan 2019 03:09:46 +0000

React hooks are really cool. I'm was converting some libraries over to hooks when I ran into a major performance snag.

At first glance, the following components might look like they do the same thing...


// Class Style

class ClassStyleComponent extends React.Component {

    state = { val: 0 }

    onAdd = () => {
        const { val } = this.state
        this.setState({ val: val + 1 })
    }

    onSubtract = () => {
        const { val } = this.state
        this.setState({ val: val - 1 })
    }

    render() {
        const { val } = this.state
        return (
            <div>
                <div>val: {val}</div>        
                <button onClick={this.onAdd}>
                    Increment
                </button>
                <button onClick={this.onSubtract}>
                    Multiply by 2
                </button>
            </div>
        )
    }
}

// Hooks Style

const NaiveHooksComponent = () => {
    const [val, changeVal] = useState(0)
    const onAdd = useCallback(() => changeVal(val + 1), [val])
    const onSubtract = useCallback(() => changeVal(val - 1), [val])

    return (
        <div>
            <div>val: {val}</div>        
            <button onClick={onAdd}>
               Increment
            </button>
            <button onClick={onSubtract}>
               Multiply by 2
            </button>
        </div>
    )
}

Sure enough, these components functionally do the same thing, but there's a critical performance difference.

The buttons are rerendered every time `val` changes on the hooks-style component, but in the class-style component, the buttons are only rendered once!

The reason for this is useCallback must recreate the callback function every time the state changes. The class component callbacks access state without creating a new function.

Here's the easy fix: Leverage useReducer and use the state passed to the reducer.

Here's the hooks component rewritten such that the buttons only render once:

const ReducerHooksComponent = () => {
    const [val, incVal] = useReducer((val, delta) => val + delta, 0)
    const onAdd = useCallback(() => incVal(1), [])
    const onSubtract = useCallback(() => incVal(-1), [])

    return (
        <div>
            <div>val: {val}</div>        
                <button onClick={onAdd}>
                    Increment
                </button>
                <button onClick={onSubtract}>
                    Multiply by 2
                </button>
            </div>
        </div>
    )
}

All fixed! The buttons only render once now because onAdd and onSubtract don't change every time val changes. You can adapt this to more complex use cases by passing more detailed actions.

There's a slightly more complex technique by sophiebits that works great for event callbacks. To use it, we'll have to define a custom hook called useEventCallback.


function useEventCallback(fn) {
  let ref = useRef()
  useLayoutEffect(() => {
    ref.current = fn
  })
  return useCallback((...args) => (0, ref.current)(...args), [])
}

// This looks a lot like our intuitive NaiveHooksComponent!
const HooksComponentWithEventCallbacks = () => {
    const [val, changeVal] = useState(0)

    // Swap useCallback for useEventCallback
    const onAdd = useEventCallback(() => changeVal(val + 1))
    const onSubtract = useEventCallback(() => changeVal(val - 1))

    return (
        <div>
            <div>val: {val}</div>        
            <button onClick={onAdd}>
               Increment
            </button>
            <button onClick={onSubtract}>
               Multiply by 2
            </button>
        </div>
    )
}

This example is trivial (buttons don't have a huge rendering cost), but bad memoization can have massive performance implications when refactoring a large application.

Cheers and best of luck adopting hooks!

AWS Lambda, but with GPUs?

Severin Ibarluzea — Wed, 28 Mar 2018 18:35:09 +0000

Many advanced machine learning/deep learning tasks require the use of a GPU. You can rent out these GPUs on services like AWS but even the cheapest GPUs will cost over $600/mo. Elastic GPUs help, but only give a limited amount of memory. I don't know about you, but most of the time I'm doing research, I want quick results and have a ton of idle time otherwise.

Some providers seem to be nullifying the need to think about a GPU with cloud machine learning services (e.g. GCP's Cloud ML Engine). This is nice for production, but for training it seems to be a bit of a hassle, I don't want to have to package my "trainer application".

What I'd really like to see is the context from my local machine (vars and data) moved onto a machine with a powerful GPU, quickly run, then the output put back in my environment.

So what do you think? Are we going to start seeing GPU functions as a service for research?