DEV Community: Prince Wilson

React Router - Using Location State for Custom UI Navigation

Prince Wilson — Tue, 21 Jan 2020 00:31:10 +0000

Originally posted on my blog, https://prince.dev.

The Background

When we write our code, we have to think about designing it in a way such that it can handle the current requirements and create opportunity for other developers to come in to change the code whenever the requirements change. An example of this came up when I was dealing with code that handles navigational flow within our application.

We wanted to have a back button on some pages that would return users to the previous page they were looking at. Originally, we handled this through inserting a redirect path inside a query parameter.

// You'll notice at the end we have a query parameter (?redirect_url=)
// that says where we came from and so we would use that param
// to send us to the previous page
const currentUrl = 'http://somecoolwebsite.com/posts/12341?redirect_url=/posts'

// Parse out the redirect_url
// ...

// Send us to the previous page
history.push(redirectUrl) // i.e. "/posts"

This worked! Closed ticket, shut laptop and let's call it a day -- not quite.

At the last second, the requirements changed and now you gotta handle more cases. In our redirect url, we can't pass in any previous query parameters that were there, so all context would be removed from the page. In addition, conceptually "going back" shouldn't add more history (such as history.push() does). This was an excellent time to figure out how to tidy everything up.

Links to the rescue!

In React Router, the Link component is commonly used with a to prop as a string:

function BlogPostLink({ post }) {
  const { slug, title } = post

  return <Link to={`/post/${slug}`}>{title}</Link>
}

You can instead use an object for to! If we wanted to recreate the same
behavior, the code would look like this:

function BlogPostLink({ post }) {
  const { slug, title } = post

  // `pathname` value is equivalent to the string form `to`
  return <Link to={{ pathname: `/post/${slug}` }}>{title}</Link>
}

Now, you can pass in additional context through the key state.
This optional key allows you to pass in information that can be used for things such as location-based rendering. It should take the shape of an object. It is intentionally something we have to set for it to appear in the location object.

function BlogPostLink({ post }) {
  const { slug, title } = post
  return (
    <Link
      to={{
        pathname: `/post/${slug}`,
        state: {
          fromBlogRoll: true,
        },
      }}
    >
      {title}
    </Link>
  )
}

Location-based rendering

Now that we have this state being inserted into our location object, where does the actual magic happen? It all happens on the back button. Let's say we want to have special text when we are coming directly from the blog roll vs. any other page:

function BackButton(props) {
  // See documentation about React Router's Hook API
  // https://reacttraining.com/react-router/web/api/Hooks
  const history = useHistory()
  const location = useLocation()

  // Here we're checking to see if state exists for our location, it will
  // always have the key but we want to 1) verify it was set and 2) that
  // the state we received is something we've intentionally set
  const fromBlogRoll = location.state && location.state.fromBlogRoll

  return fromBlogRoll ? (
    <button onClick={() => history.goBack()}>Back to Blog Roll</button>
  ) : (
    <button onClick={() => history.push('/home')}>Home</button>
  )
}

Now we have a nice back button for our needs. This will take advantage of the history object, so if we want to go back (history.goBack()) and still have all our query parameters, they will be there as well as any other things we've stored in our app's state.

This handles for the case of what if a user directly shares the link to someone else and instead of seeing a back button, they should see a home button. So if we have unauthenticated users, they cannot navigate through the app like other users. It will fallback and present a home button.

An important note is we want to make sure to use the location object and not the history object for determining the current location state. The history object can be mutated and makes it not a good source of truth.

Last Thoughts

Every time a bug is raised into a codebase I work on, I think about how can I make something a bit better than when I found it. Of course this is super subjective. I like to try to reduce down complexities where I can and how to take advantage of tools that are closer within reach. With React Router, the tools were there for me and it is a bit easier to manage the complexities of the UI logic.

References and Additional Readings

Note-taking -- People still Do That?

Prince Wilson — Mon, 24 Jun 2019 15:27:34 +0000

Being a software developer is an incredible thing! There are opportunities to learn new things and almost immediately begin to apply them. Yet, one thing I've noticed is that with so much to learn, it is hard to immediately recall that knowledge if we don't use it often. Many people believe that the best way of learning something is by building and creating -- and I truly believe in that. But there is a caveat to this rule, you should not ONLY be building. More experienced developers say building is how they learn best. That's because they've gotten good at locating working answers to problems they encounter in the process.

If we want to master a skill or technology, we need to build better habits to recalling information and one way we do that is by taking notes. Many people in school may have felt that they never reviewed their notes or just wrote down scribbles in class. Hell, I did the same thing. A problem is that we've never had to exercise the skill on good note-taking. It takes time and energy, but this skill can help us now and in the future.

Where to begin?

How can we build a better relationship with note-taking? We have to start with the root of the problem -- ourselves. We need to remember that the purpose of note-taking is to be able to reflect and review the things we're learning. It isn't just a cheat sheet for an exam. We want these to be high fidelity so we can reflect on all the tooling/techniques we've encountered. If we treat notes just like scratch paper to jot down what we're hearing, we won't actually be able to go back and apply anything. It would be hard to remember the context of why you wrote down a phrase.

So with the mindset that it will take time, let's begin with a few helpful strategies for note-taking.

Having a System

Before electronics were glued to us, we used to have to write everything with a pen and paper. Now with so many new pieces of technology, we can write notes practically anywhere. Some apps that I've used in the past for taking notes is just text files across my computer, Evernote, OneNote, and the one that is supposedly developer friendly, Boostnote. All of these have their advantages/drawbacks; find out what works best for you. What we want to do is come up with good strategies to ingest and digest the things we're learning. We need to write notes with the context of the whos, whats, whys, and hows.

As an example, I will showcase to you how I learned a new piece of technology called, React Hooks, and talk about my thought process as I take notes.

Chunking Notes into Topics

I took this class called, Intro to React by Brian Holt over on Frontend Masters. As a teacher, I always have to be growing too. For note-taking I use Notion. With my system, I enjoy making an outline of the information. The goal is to quickly "chunk" information together and make it easier to retrieve or find.

This makes it easy to identify what topic am I going over in that particular section. It is not likely I will find any insights in the Context section if the code I am writing only involves something like useEffect.

Organizing our notes into chunks may feel obvious. I know for myself I began putting everything in one HUGE text file but that makes it harder to figure out what the heck I am looking for or how to even go about finding anything beyond a CMD+F.

Breaking down a Topic

If we take a gander through one of my pages, you'll see my notes are
somewhat self-contained thoughts. They aren't only just sentences but also commented out code. Notes should contain anything you think might be helpful to your future self. You don't need to write every detail but snippets of code and context of why you wrote that can be insightful. Since our brain can't store everything we learn forever and easily recall it, this is a nice way to make something easy to reference.

I make sure to indicate to myself what things are important by some sort of emphasis, such as the order of which I put items into the second parameter of useEffect doesn't matter. I like to use bolds because it is easy for my eyes to immediately identify at a glance.

To make sure I am actively learning, I tend to write down questions I have as I am hearing explanations or curious about how something works. I indicate them with ??? in front. I write these questions down before having the answer just to give myself the opportunity to ingest and digest the information. Ingestion describes how I take information in versus digestion is how I break down that information.

Being able to pre-test yourself or come up with questions and find the answers on your own lets your brain build deeper neural connections. These can lead to more meaningful connections to the thing you're learning about. Resulting in you recalling them even better.

Takeaways for a System

Have some way of easily identifying what the contents of those notes contain. Similar to a filing system, we want to be able to easily retrieve it. And if you notice your system needs to expand, feel free to do so. This is meant to be living and growing.

When writing notes, we want to be sure to encapsulate the meaning behind what we're writing. We don't want to just quick two-word blurbs all over our page. We need to think of them as small bubbles of thoughts around the topic. They don't need to be concrete or connected but they need to be 1) relevant and 2) explainable.

Visuals Enhance Learning

One thing that I have learned as a teacher is that there are going to be different ways that help us process information. Not just writing it down in one form will ensure that one completely understand a topic. I have gotten in the habit of doing is also freehanding a lot of my notes and feeling okay with marking them up. You can actually see the notes on my reMarkable, an e-ink tablet
(not a pitch by any means).

Marking up the code and indicating what exactly is happening helps me retain the information more than just typing it out. The mental act of deconstructing the syntax of code helps to digest more of the information and recognize patterns in other places. On the bottom of my notes, I take some bullet notes just so I can identify anything that might be significant to remember or look up.

One of the podcasts I have listened to about pedagogy, The Cult of Pedagogy, taught me about using mind mapping as a tool to visualize our understanding. I am not good at it yet -- but we get better by practice. The goal is to have a "central" theme or idea in the center and then connect information
together to build an entire map that will help us explain that idea.

This may work well for you when you're trying to have a bigger picture understanding of a concept rather than everyday note-taking. I personally like doing it after I have sat with a topic for quite some time and use it as a test at recalling anything about the "central" theme.

One last visual technique is called sketchnoting. The core concept is to draw sketches as you take your notes. Your brain can wander and explore how it wants to relate information together with fun doodles. We saw that I am not that great at visuals but some people like to exercise their creative side.

Here's an example of someone's sketchnote on how to create a more accessible React app:

Image from @stephaniecodes

The thing to remember is that there is no one right way to sketchnote. There are no rules to it. Don't worry if the drawings aren't great. The goal should be to see how you can take your notes and explore meaning through visual and textual expression.

Where to Go From Here

My suggestion for you, friend, is to give note-taking another shot. Maybe
you only do it when you're taking a new course or reading about a framework. This time, try to break your thoughts down. Think about how you would want to have shaped the information and how you would share it to someone else.

After you've written your notes, guess what! You've gotten one step closer already to writing that blog post that you might want, the presentation topic you want to give to your colleagues, or creating a working knowledge base for your growing team.Once we change our relationship with note-taking, we end up allowing
ourselves to thrive in it. This leads to compound wins for everyone around you.

Try it out for a week or two and let me know how it goes.

What are you working on for Open Source?

Prince Wilson — Mon, 02 Oct 2017 12:53:44 +0000

Howdy there! Since yesterday started Hacktoberfest over at GitHub, I was wondering what everyone was going to get themselves involved with. Though this is an annual event hosted by one company, I'd love to hear how you make yourself involved in open source.

Share any tips or tricks for people at any level. Even share a project that could use some love for the month of October.

Getting Started with Search by Geo Location

Prince Wilson — Tue, 12 Sep 2017 18:47:57 +0000

Fact: Clarifai’s Search API allows you to search your images and video by visual similarity. Lesser known fact: it also lets you search your media by geo location data! Learn more about this feature and how to put it into action for your own developer application.

The Search API allows you to send images to Clarifai and have them indexed using concepts and their visual representation. After they are indexed, you can search over your inputs using concepts (e.g. dog) or images (e.g. visually similar dogs). Clarifai can extend this search by adding extra data points onto our inputs such as geo location data. A search by geo location acts as a filter of inputs so you get only results within a specified range.

We’ll look at attaching geo location data to your inputs and then querying that data with different measurements of distance to see the change in results. For this tutorial, we are going to use Node.js. Let’s get started by installing the official Clarifai JavaScript client with

npm install clarifai

Adding Inputs

You need to sign up for Clarifai and create an application before you can get started. Inputs are added using either a URL or bytes. Along with your input source we’ll add a geo object that will contain keys for GPS coordinates (longitude and latitude). Remember that the coordinate system is using the cardinal directions: North, South, East, and West. North and East will be positive numbers and South and West will be negative numbers.

Below we will add an image of the Statue of Liberty using a URL from Wikipedia:

const Clarifai = require('clarifai')
const app = new Clarifai.App({ apiKey: 'YOUR_API_KEY_HERE' })

app.inputs.create({
  url: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Statue_of_Liberty_7.jpg/1200px-Statue_of_Liberty_7.jpg",
  geo: {
    latitude: 40.689247,
    longitude: -74.044502
  }
})

and use a local image of the Golden Gate Bridge from HISTORY and a function for file-to-base64 conversion:

const Clarifai = require('clarifai')
const app = new Clarifai.App({ apiKey: 'YOUR_API_KEY_HERE' })

const convert_bytes = (img) => {
  const img_file = fs.readFileSync(img)
  return new Buffer(img_file).toString('base64')
}

app.inputs.create({
  base64: convert_bytes('./golden_gate.jpg')
  geo: {
    latitude: 37.807812,
    longitude: -122.475164
  }
})

Searching for Images

Once your images are uploaded, you will be able use them with search. When searching by geo location, you can refine your results using a single point and some radius given ‘withinMiles’, ‘withinKilometers’, ‘withinDegrees’, or ‘withinRadians’.

Let’s say we only want results of images within a mile of the Empire State Building in New York City (because it’s the best city in the world, naturally). Our search would look like this:

app.inputs.search({
  input: {
    geo: {
      latitude: 40.748817,
      longitude: -73.985428,
      type: 'withinMiles',
      value: 1.0
    }
  }
}).then((response) => { console.log(response.hits)})

// Response
[]

The above example returned no results due to how small the range is. If we were to increase this value we will get our hit.

app.inputs.search({
  input: {
    geo: {
      latitude: 40.748817,
      longitude: -73.985428,
      type: 'withinMiles',
      value: 7.0
    }
  }
}).then((response) => { console.log(response.hits)})

// Response
[{ 
  score: 1,
  input: { 
    id: 'd7b80aac52f14399b98a9472fc201e64',
    data: [ 
      { 
        score: 1,
        input: { 
          id: 'd7b80aac52f14399b98a9472fc201e64',
          data: { 
            image: { 
              url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Statue_of_Liberty_7.jpg/1200px-Statue_of_Liberty_7.jpg' },
              concepts: [
                { 
                id: 'statue',
                  name: 'statue',
                  value: 1,
                  app_id: 'fb70b904750c4891aecddf82082181c2' 
                },
                { 
                  id: 'bridge',
                  name: 'bridge',
                  value: 0,
                  app_id: 'fb70b904750c4891aecddf82082181c2' 
                }
              ],
              metadata: {},
              geo: { 
                geo_point: { 
                  longitude: -74.0445, 
                  latitude: 40.689247 
                }
              }
          },
          created_at: '2017-09-05T17:52:38.616686Z',
          modified_at: '2017-09-05T17:52:39.029363Z',
          status: [Object] 
        } 
      } 
    ],
    created_at: '2017-09-05T17:52:38.616686Z',
    modified_at: '2017-09-05T17:52:39.029363Z',
    status: [Object] 
  } 
}]

The search result will give us an array of matches. Each object within the array is one of our inputs that matches the search criteria. This also includes a score that will indicate how much of a match this the result is to our query. Whenever you want to access any of the data related to a specific object you would need to access its input.data key. You can see what the custom concepts, geo location data, or custom metadata it has attached to it. You can also find the input’s original url or bytes in this object.

Conclusion

The Search API is a powerful tool and searching using geo location is just one of many useful features for developers. You can do much more with the Search API like:

Search using Public or Custom concepts
Search using your own custom metadata on inputs
Combine search options usingANDing

If you have any questions, concerns, or even friendly notes feel free to reach out to us over at hackers@clarifai.com or comment below!

Originally published on the Clarifai Blog

The Small Things We Do That Make Big Impact When Meeting People

Prince Wilson — Wed, 09 Aug 2017 22:36:55 +0000

Back last year I attended a wonderful conference for collegiate hackathon organizers called Hackcon out in Estes Park, Colorado. I used this event to step outside of my comfort zone and meet new people. Not a few, not some, but all: I attempted to meet AND remember everyone at the conference. This was upwards of about 400 people at the event.

My challenge here was to meet more people in 2.5 days than I would in a month's time. I don't expect everyone to be like me and try to meet a huge number of people. Besides, we should always remember it is the quality of the relationships we make and not the quantity that matters. However, my intentionality in making friends at HackCon actually provided a lot of great lessons about being very effective at meeting and remembering people. Here are some tips that you can use whenever you meet someone.

1. Smile

"Actions speak louder than words."

You can do so much with as little as a smile. You and the person receiving the smile will feel great from it. This doesn't mean go out of your way to make a very EXTREME smile to every person. Let it be organic. Let it be the result of the positivity you get from them or how they can make you feel. When you smile with someone, it is contagious.

A lot of people will say they can't "just" smile. It isn't easy; smiling uses muscles in your face and just like any muscle you have to exercise it. A technique that has helped me is just thinking about things that I really enjoy and just passively smile without having to direct it at someone. How do you think Kimmy Schmidt does it?!

2. Ask them their name and say it back

"Remember that a person’s name is to that person the sweetest and most important sound in any language."

Dale Carnegie

There is power in a name. When you say someone’s name, it shows to the person that you actually remember who they are. When we study new material we have to consistently go over it to remember it, and the same is true with names. It is easy to remember the place you met someone, but a name is pretty challenging when we don't use it often.

There are a few tricks to help yourself keep track of names. Some people find it helpful to repeat the person's name in their head several times to make the association. I try to listen to what they are passionate about and make something clever out of it to associate it back with their name. Try the funny icebreaker exercise that people do where you have to say a word describing you that has to start with the first letter of your name. It works practically every time for me. Just think, "Personable Prince. What would be yours?

Think of this like going to your favorite coffee shop or restaurant where the server remembers your name & order. You feel great that someone recognizes you out of the crowd of people they come across in a day. However, a lot of us on the other end never ask the server's name. Isn't that odd? We tend to be really happy when our world is centered around us and people notice us but we have to reciprocate. A good piece related to this is David Foster Wallace's graduation speech "This is Water". Show you actually care and want to acknowledge this person.

Next time you meet anyone, ask them their name and say it when you leave. Remember they are a human who wants to be recognized just like you. You can literally make someone's day by just simply saying their name. In the memorable words of Walter White

3. Listen

"Most people do not listen with the intent to understand; they listen with the intent to reply."

Steven R. Covey

Out of all three tips, this one is the hardest to do for people. We have two types of listening: "passive" and "active." The difference is how engaged you are.

Passive listening is when we hear what someone says. Imagine being in class and your teacher is leading an exam review. With passive listening you don't do anything but take in information. Active listening is where instead of just taking in ideas from your teacher you actually internalize what is being said. You engage the teacher with questions that reiterate points they brought up and try to get a deeper meaning. When you come to the exam, you will see that you remember the conversation you had more with active listening and can easily associate things with your experience.

The importance of active listening holds true with conversations with people as well. You need to take what someone says and understand it in their frame of reference. Listen to what they are passionate about and ask more questions about it and get them to share more. You also have to show your genuine interest in it. They aren't just going to talk to someone who doesn't care to hear what they have to say. You never know when this person's insights may come in handy, and discovering those insights starts with simply listening. When you actively listen you learn more about someone and you learn what you share in common. You never have to worry about forgetting who someone is because you know so much of them.

Some tips that I have may sound a bit odd but I assure you they can help. When I meet someone new I tend to ask them their name and then ask them to tell me what they are passionate about. With that, I tend to remember that someone is passionate about X and so their name is so-and-so. Some people even write these people's names down and their passion to help them remember. Another tip that helps is the nonverbal portion of your communication that helps you listen. Two things that work really well is slightly lean in and make eye contact with them. Your body will actually be in a mode of listening and engaging them. When your body feels engaged, your mind will also. This happens almost involuntarily when we have positive attitudes towards someone and research shows that we tend to talk more when this happens too.

When these three small acts are put into place, you will achieve big wins into meeting & remembering people. I have found these to be acts that really make all parties remember each other. I challenge you now to go and implement these small acts in the people you deal with already and see how much different your experience is. Being conscious and intentional about these will help you grow. I hope you use these well, my padawan! If you want to learn any more amazing things about making friends, check out extremely useful books such as "How to Win Friends & Influence People" by Dale Carnegie.

Enjoy what you read? Be sure to spread the love by liking and sharing this piece. Want to share thoughts, ask questions, or have any other recommendations? Feel free to reach out to me on Twitter or in the comments below! Thanks for reading!

How to demo your localhost app using ngrok

Prince Wilson — Tue, 08 Aug 2017 21:17:52 +0000

Ngrok is a reverse proxy that allows you to expose your locally running web service to other developers. It’s a timesaver for developers when it comes down to showcasing a project. Follow along and learn how you can put this into your toolbelt of applications!

Howdy everyone! Have you ever wanted to showcase an amazing project that you built at a hackathon; or show a client the progress of the app you’re building without deploying it to some server? A reverse proxy tool like ngrok can solve this. Let’s see how it works.

The Sample App

We’ll need to start with a server running locally. If you don’t have a web app to test you can use a quick Sinatra “Hello, World”:

# app.rb
require 'sinatra'

get '/' do
  'Hello World!'
end

We need to make sure to have the Sinatra gem. Install the gem through Terminal using:

$ gem install sinatra

To run our app, go into Terminal and write:

$ ruby app.rb

And BOOOM!! 3-line Hello World app.

Ngrok

Ngrok is a tool made by Alan Shreve, who built it to be as accessible as possible by breaking it down into 3 painless steps:

Download ngrok for your OS
Unzip it
Launch it!

Ta-dah! You’re a natural!

Here we will launch ngrok through both macOS/Linux and Windows. Let’s move the executable from my Downloads to our Home folder (marked as the tilde or ~) for our macOS/Linux friends. Open up a new terminal and write:

$ mv /your/path/to/ngrok ~

For Windows we are moving the ngrok.exe to my particular User directory. Mine is called Administrator but yours could be your name (i.e. “Prince Wilson”).

$ move \your\path\to\ngrok \Users\<PC_Name>

We are going to execute ngrok straight from our current directory. In macOS you prepend a script with a â€˜./’ to make it execute and in Windows you would use â€˜.\’. Otherwise your Terminal will look for ngrok in your PATH. ngrok requires at least two fields: 1) the protocol (i.e. HTTP) and 2) the port we want to expose. If you are running your own app pop in the port it’s using otherwise Sinatra defaults to port 4567.

$ ./ngrok http 4567

$ .\ngrok http 4567

It fires up with a bunch of outputs but we only care about the forwarding url right now. Mine is “http://da0dcb04.ngrok.io” or “http://f4fcf6f0.ngrok.io”. Notice that it points to where our sample server is, meaning anyone who hits our link will be forwarded to our sample app!

Conclusion

And with that, you have learned the basics of ngrok. But, there is so much more to learn! Try these to improve your experience:

To inspect the traffic coming through and replay requests check out http://localhost:4040. Learn more about that in the ngrok documentation.
Sign up for an ngrok account if you want to use your own Basic Authentication. What’s there to lose?
There are a ton of neato burrito things you can also get out of supporting the project so pony up if you have the funds to help the software grow.

If you have any questions or want to share your experience with ngrok feel free to send me a note over at hackers@clarifai.com; I’d love to hear from you!

Train a Custom Visual Recognition Model Using Clarifai's Python Client

Prince Wilson — Mon, 13 Mar 2017 21:57:09 +0000

In December, our v2 API graduated from developer preview to general availability. Don't they grow up so fast?! As such, here is a useful tutorial on how to use one of Clarifai v2 API's most popular features - Custom Training. Custom Training gives you the ability to teach new concepts for our technology to recognize using only a handful of examples and a couple lines of code!

If you've seen our new v2 API documentation, you've probably noticed that things are a bit different than they were in v1 - new SDKs, a cool new visual tool, and new projects waiting for you to build them using Custom Training! In one of our previous blog posts, we talk about how to use the Preview UI for Custom Training. While that was awesome (like really awesome), we're gonna crank it up a gear and show you how to do some of the same things using PROGRAMMING.

It isn't as flashy as pulling up our sleek, chic UI, but it is just as rad. You can go to your friends and show them your mad teaching-a-computer-how-to-see skills!

An API Client

First thing's first, we are gonna need to find a way to interface with the API with our code. We have written a few different clients for you to use in several different languages. For this tutorial, we are gonna stick with the Python client. Who doesn't like programming languages that came out of Monty Python?

NOTE: Be sure to have installed a Python that is at least 2.7 or higher. If you aren't sure what which one you might have, go into your terminal and check out what python --version gets out for you. For instance this is what happens on my system:

$ python --version
Python 2.7.10
# Or if you are using Python3
# Python 3.5.1

Also to install the Clarifai API Client, we are gonna make sure we have pip, the Python Package manager:

$ pip --version
pip 9.0.1 from /path/to/Python/2.7/site-packages (python 2.7)
# or if you are using Python3
# pip 9.0.1 from /path/to/python3.5/site-packages (python 3.5)

With those two out of the way, we can now finally get to installing the Python Client!

$ pip install clarifai
# NOTE: If this doesn't work, consider having a sudo in front of the command 
# to tell your computer who is boss.

If that went off without a hitch, we need to do one more thing before we can write our Custom Training. We are going to add our Client ID and Client Secret into our app. Every time you want to hit Clarifai, you want to be sure to have these two at least! No matter what language you are using, this will be the only way you can get access. So head over to the Developer website, and create yourself a new application:

Once that is done, head back to terminal and type in:

$ clarifai config

When you hit enter, it will prompt you to put in your Client ID and Client Secret, respectively. That way, when we make calls, this doesn't have to be saved in your project but on your file system so long as you are using that particular Application:

CLARIFAI_APP_ID: []: ************************************YQEd
CLARIFAI_APP_SECRET: []: ************************************gCqT

Congratulations! If you made it this far, you have successfully added the Clarifai Python client to your system. Go you! Now, with that out of the way, we are gonna write some code!

Add Images with Concepts

With Custom Training, you can teach Clarifai to recognize whatever you want in an image! So for me, I am gonna teach Clarifai about corgis (because corgis are the best). For this part, you can find 10-20 images that you want to train your model with. This will be known as the “training set”, a set of images you use to train with that will have positive and negative examples of whatever concept you are trying to get Clarifai to recognize.

So, I gathered 15 images of corgis shot from different angles (including the all-important "corgi butt" pose) with various background objects to make sure Clarifai can recognize what I want it to. Though all my images are JPGs, Clarifai supports JPG, PNG, BMP, and TIFF files! Depending on what you want to train for, it can be better to have a more realistic photo of what you want Clarifai to be looking for and sometimes it is okay to want just the object itself in front of a solid background.

In my project folder, I made a folder to house all of the images I collect for a concept. So all my images in my corgi/ directory will house images that will have â€˜corgi' as a concept.

To add an image object with the concept of corgi, we are gonna write:

from clarifai.rest import ClarifaiApp
from clarifai.rest import Image as ClImage

# Our app
app = ClarifaiApp()

# Adding our image onto our app
app.inputs.create_image_from_filename('./corgi/corgi-1.jpg', concepts=['corgi'])

When we run this (python.py), we can see our input is added onto our app on the Preview UI:

To utilize the power of programming, we are gonna automate the process. Let's make a function that will import all of our images inside a directory with the same concept. In this case, we will have all of the photos under corgi/ with our â€˜corgi' concept!

# Packages for reading local files
import os
from glob import glob

def create_image_set(img_path, concepts):
    images = []
    for file_path in glob(os.path.join(img_path, '*.jpg')):
        print(file_path)
        img = ClImage(filename=file_path, concepts=concepts)
        images.append(img)

    return images

This will allow us to easily take in any sort of images, no matter where, and also allow for us to set some images to have concepts! This is just some of my code and you are more than welcome to improve it to fit your needs.

NOTE: For this function, we are making the assumption that our number of images per batch is relatively small. If you are sending large sets of images at one time, with numbers around 100,000+ images per function call, you might want to consider abstracting this function to asynchronously handle sending out the request.

So now our code will look more like this:

from clarifai.rest import ClarifaiApp
from clarifai.rest import Image as ClImage
from glob import glob
import os

def main():
    app = ClarifaiApp()
    image_set = create_image_set('corgi/', ['corgi'])
    app.inputs.bulk_create_images(image_set)

def create_image_set(img_path, concepts):
    images = []
    for file_path in glob(os.path.join(img_path, '*.jpg')):
        img = ClImage(filename=file_path, concepts=concepts)
        images.append(img)

    return images

if __name__ == '__main__':
    main()

Notice we call our create_image_set in the main method and set our image_set equal to the returned results. Then we send this into app.inputs.bulk_create_images. Now you should be seeing all of the images you have added when you run the script!

Now we have added some images with our corgi concept! Let's try to add this onto a model and train!

Create a Model and Train!

Since we have already added our inputs, all we need to do now is create a model and train it! To avoid adding duplicate inputs, we are going to comment out the image stuff and change our main function to only:

def main():
    app = ClarifaiApp()
    # image_set = create_image_set('corgi/', ['corgi'])
    # app.inputs.bulk_create_images(image_set)

    model = app.models.create(model_id="puppy", concepts=['corgi'])
    model.train()

Here we created our model, with a model_id of “puppy” and concepts that are on the model align with concepts that we have on our model. From there, we make sure to call train. Voila! We have trained our model to recognize the concept of corgis!

Now let's say we wanted to use our model and see whether or not it works, we can change our main to be:

def main():
    app = ClarifaiApp()
    # image_set = create_image_set('corgi/', ['corgi'])
    # app.inputs.bulk_create_images(image_set)
    # model = app.models.create(model_id="puppy", concepts=['corgi'])
    # model.train()
    model = app.models.get('puppy')

    url = raw_input("URL of image: ")
    # if on Python3, change the above line to
    # url = input("URL of image: ")

    print model.predict_by_url(url)['outputs'][0]['data']['concepts']
    # if on Python3, change the above line to
    # print(model.predict_by_url(url)['outputs'][0]['data']['concepts'])

We will ask our user to give us a URL and then we will print against our puppy model! This will give us the output of all of our concepts on our model:

$ python app.py
URL of image: https://s-media-cache-ak0.pinimg.com/236x/37/5d/48/375d488c51f51c72a01e0e88420becca.jpg
[{u'app_id': u'b066d570bcae40b3b0d5d50176d09cef', u'id': u'corgi', u'value': 0.9865137, u'name': u'corgi'}]

That's it for this tutorial! There are a number more functions and ways of doing things in Custom Training. If you ever need any help, be sure to reach out to us at support@clarifai.com. We are more than happy to help!

Before I send you on your way, here are some simple tips and tricks to remember about Custom Training:

Be sure to have your inputs (images) on your application, and tell them what concepts (or not-concepts) they are associated with!
Make sure you have a model (a place to put a group of concepts) and concepts! Just having images on your application isn't enough.
If you are unsure how to access the API using any of the clients, be sure to check out the repo's documentation. For Python, you can see all the available functions here.

Go out my compatriots of the world. Teach computers how to see the world from your perspective!

Hi, I'm Prince Wilson

Prince Wilson — Fri, 24 Feb 2017 18:28:05 +0000

Howdy there! I am Prince, pleasure to meet you! I have been coding for quite some time now and I professionally teach people how to program at a coding bootcamp called Flatiron School. We teach people how to learn web development using tools such Ruby on Rails and React.js