Forem: Jeff

Text classification using Machine Learning - Tensorflow - AI

Jeff — Tue, 27 Jul 2021 01:23:03 +0000

Hey 👋

I want to share my experience participating in the #MeliDataChallenge 2019. (Mercadolibre.com challenge)

I'm not an expert. I like to participate in contests like this to learn about Machine Learning and AI with real world applications, soon I will publish my experience and my solution for the Despegar challenge (Images classification).

The challenge

The challenge was very interesting, classify e-commerce products using only its titles.

The prize

First and second place will receive tickets to KHIPU. From 3 to 5 place an Intel Movidius.

The result

I managed to be in the top 20 with a score of 0.8954/1, there were more of 150 participants, the competition was hard and exciting. Of course, I learned a lot of new things.

POSITION	NAME	SCORE	ENTRIES
20	jefferson1100001	0.895456136076574	7

Let's explain my approach

The first thing I did was to take a look of the data, Mercadolibre provided two files, train.csv and test.csv. This is how train.csv looks like:

TITLE	LABEL_QUALITY	LANGUAGE	CATEGORY
Hidrolavadora Lavor One 120 Bar 1700w Bomba A...	unreliable	spanish	ELECTRIC_PRESSURE_WASHERS
Placa De Sonido - Behringer Umc22	unreliable	spanish	SOUND_CARDS
Maquina De Lavar Electrolux 12 Kilos	unreliable	portuguese	WASHING_MACHINES

There are 12,644,401 valid rows, the dataset is unbalanced and some categories are present in just one language.

Data preprocessing

Here I will describe my preprocess routines without code.

Remove tildes
Spanish and Portuguese words have tildes, like teléfono. This step mutates the word to telefono.
Remove word separators
Some titles have dash, dots and other punctuation marks without a space between them, for example kit.ruedas.moto.

I'm replacing each one of this marks with a space.

+ , . ( ) : [ ] { } _ /
Remove other punctuation marks and numbers
I've removed any other punctuation mark and numbers, but the number must be surrounded by a word boundary.
Tokenize the title
I applied the WordPunctTokenizer provided by NLTK to split each title into words.
Remove stop words
On the resulting array of words I discarded stop words like: "un", "unas", "unos"...
Stem each token
I used the SnowballStemmer provided by NLTK. Stemming is the process of reducing inflected (or sometimes derived) words to their word stem. For example: Cámara is transformed to "cam".

Preprocessing result

Let's take a look of the titles titles before and after preprocessing:

BEFORE	AFTER PREPROCESSING
Placa De Sonido - Behringer Umc22	plac son behring umc22
Oportunidad! Notebook Dell I3 - 4gb Ddr4 - Hd 1tb - Win 10	oportun notebook dell i3 4gb ddr4 hd 1tb win
Cámara Instantánea Fujifilm Instax Mini 9 - Azul Cobalto	cam instantane fujifilm instax mini azul cobalt

I saved a copy of train.csv with all the titles preprocessed, a list with all the posible categories and a list with all labels.

The dictionary:

Iterating over all the preprocessed titles and with the help of a Counter I had created a dictionary containing words only if their frequency is >= 2. It means that the word must occur at least two times in some title.

The dictionary looks like this

{'kit': 785233, 'original': 469537, 'pret': 232647, 'led': 220194, ...}

There are 1,251,659 unique tokens, after filtering them the dictionary has 513,307 posible words.

Let's transform the preprocessed titles to numbers
In this step I used the dictionary to transform each title into an array of numbers. It's very simple, for each word in the title, replace it with the corresponding index of the word in the dictionary plus 1. (0 is reserved).

A preprocessed title like this:

['porton', 'chap', 'hoj', 'mtr', 'marc']
Becomes:

[120, 121, 122, 123, 124]

The max word sequence has len 27, if the transformed title has len less than 27, we pad it with zeros so each title has the same length.

[120, 121, 122, 123, 124, 0, 0, 0, 0, 0, 0, 0, ....]

Now it's time for Machine Learning

I've used Tensorflow + Keras, the model has the following architecture:

Key points you must know

Seed random numbers, so you can get reproducible results.
Use stratified samples when splitting test and train
It means that each set must have the same proportion of classes.
Take 1% for testing
The dataset is relative big, 1% seems to represent a good number of features of the dataset for being validated.
Use class_weights
Due to the imbalanced nature of the dataset, class_weights increased the BACC of the model.
Explore the data locally
And maybe preprocess locally but use multiprocessing
Use Colab or Kaggle
To take adventage of the GPU and train faster

Training:

After 18 epochs the model seems to achieve good results before start to overfitting. The balanced accuracy was: 0.86774697

Testing a new title:
If we feed the model with complete new data, for example:

"Buzo Harry Potter Lentes Cicatriz Hogwarts Hoodie"
It will predict:

SWEATSHIRTS_AND_HOODIES

The alternative attempt:

I also created a small model with just 1400 categories representing the reliable subset. The the goal was to feed that model with the unreliable subset in order to detect if the unreliable categories were in the wrong categories, but this adds complexity and I'd to optimize two models instead of just one.

Next steps:

You can use the label_quality somehow to increase model ACC.
Use confusion matrix or any performance measurement to detect where does our model perform worst.
Use a complex architecture or CNN

Github with all the code:

https://github.com/jeffersonlicet/ml-titles-classification

Hero animations in React with react-motion-layout

Jeff — Fri, 27 Mar 2020 00:52:23 +0000

Hello Devs.

A couple of days ago I published my first React package and I want to show you how to use it.

React-Motion-Layout

This library helps you animate components from two different React trees. In other words, to create Hero Animations. It's compatible with moderns browsers and uses the Element.animate() Web API.

Let's build one of my favorite examples, a photo gallery.

This is the final result

Click on any photo to see it in action.

Looks beautiful right? Let's take a look at how simple is to recreate this example.

1 - Create placeholder photos

Thanks to Unsplash for those amazing photos.

// PhotosDB.js
export default [
  {
    photo:
      "https://images.unsplash.com/photo-1474313438662-85ce389c174a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=50"
  },
  {
    photo:
      "https://images.unsplash.com/photo-1521170665346-3f21e2291d8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=50"
  },
  {
    photo:
      "https://images.unsplash.com/photo-1520512202623-51c5c53957df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=50"
  },
];

2 - Let's wrap our app with MotionLayoutProvider

Motion Layout Provider is responsible for providing the state management.

// App.js
...
export default function App() {
  return (
    <Router>
      <MotionLayoutProvider>
        <Switch>
          <Route path="/photo/:photoId">
            <Photo />
          </Route>
          <Route path="/">
            <Photos />
          </Route>
        </Switch>
      </MotionLayoutProvider>
    </Router>
  );
}

3 - Create The Photos Component

Since this is an individual screen, we'll wrap it using MotionScreen to clean registered elements when abandoning this screen.

import { MotionScreen } from 'react-motion-layout';
export default function Photos() {
  return (
    <MotionScreen>
      <div className="flex flex-wrap">
         {PhotosDB.map((item, id) => (
           <ItemComponent item={item} id={id} key={id} />
         ))}
      </div>
    </MotionScreen>
  );
}

4 - The single photo item

Each item will be wrapped with a MotionScene. A MotionScene is a component that contains SharedElements.

SharedElements are the components that we will animate. They must have an unique key called animationKey, we use that key to find a matching SharedElement when changing the views.

MotionScene accepts an onClick property, in this case we are using the withTransition hook, that will trigger the animation and then will change the route using the history hook provided by react-router-dom.

...
import { useMotion, MotionScene, SharedElement } from 'react-motion-layout';

// PhotoItem.js
export default function ItemComponent({ item, id }) {
  const history = useHistory();
  const withTransition = useMotion(`photo-${id}`);
  const callback = useCallback(() => history.push(`/photo/${id}`), [
    history,
    id
  ]);

  return (
    <MotionScene name={`photo-${id}`} onClick={withTransition(callback)}>
      <div className="p-4 cursor-pointer hover:bg-gray-100">
        <SharedElement.Image
          className="w-64"
          alt=""
          src={item.photo}
          animationKey="image"
        />
      </div>
    </MotionScene>
  );
}

5 - The individual photo view

The Story View is wrapped by a MotionScreen since it represents a single screen. And of course, it could contain more than a single Scene.

Since it's just one scene, we will wrap it with MotionScene as well, when navigating, those scenes will match and the Package with look for the declared SharedComponents and match them using its keys. then, it will perform the animation.

...
import { useParams } from "react-router-dom";
import PhotosDB from "./PhotosDB";

import { MotionScene, MotionScreen, SharedElement } from "react-motion-layout";

export default function Photo() {
  const { photoId } = useParams();
  const item = PhotosDB[photoId || 0];

  return (
    <MotionScreen>
      <MotionScene name={`photo-${photoId}`}>
        <div className="flex flex-col p-8">
          <SharedElement.Image
            className="w-64"
            alt=""
            src={item.photo}
            animationKey="image"
          />
        </div>
      </MotionScene>
    </MotionScreen>
  );
}

And that's it

Now when you click on any item of the gallery it should animate using the shared components we'd just defined.

Motion Layout Docs
Github
Example using Text