Implements the Clarifai API to color website elements based on an image
-
Create an account at developer.clarifai.com.
-
Create an application and copy and paste your application CLIENT_ID and CLIENT_SECRET into a
keys.js
file as shown below. (Don't forget to include it in your.gitignore
file so that you don't share your credentials with everyone!)var CLIENT_ID = 'your ID here'; var CLIENT_SECRET = 'your secret here';
The
getCredentials()
will generate an access token so that you don't have to worry about it! -
Include clarifai.js in your project source.
-
In your index.html, create an array of the elements whose color you want dependent on image uploaded. Pass the image url and the element array to the
requestColor
function (it lives inclarifai.js
) and call it.
I created index.html
as a usage example if you want to check that out! Enter an image url in the input box, and click the Get colors
button. The colors of the divs and button above the input will change according to the colors most frequent in the input image. The hex values for the colors and their probabilities are printed underneath the input box.
This is the webpage before input
This is the input image (http://siliconangle.com/files/2016/03/Sunset-1080x675.jpg)
This is the webage after the colors have been replaced
I definitely stole the clarifai javascript started from Cassidy's clarifai javascript starter. Check it out, it's p cool.