使用Clarifai从任何图像创建颜色方案:JavaScript教程

时间:2019-03-17 08:33:51 阅读:75次

  审美设计可能很难。毕竟,人们得到报酬是专业的。但是就像许多事情一样,识别好的设计要比自己创造整个布料容易得多,特别是在选择好的颜色时。那么,如果你可以使用现有的图像和一点点编码来生成调色板呢?嗯,现在你可以了,感谢Clarifai的计算机视觉魔力!

<! - more - >

  我们有各种各样的产品可用于通过机器学习的力量从您的图像中收集信息。您可能不知道的是“颜色”模型,它可以识别任何图像中的主色。您可以使用此信息以编程方式设置应用程序的样式,格式化文档或您可以想象的任何其他内容。在本教程中,我们将向您展示如何从简短而甜蜜的Web应用程序中的任意图像中提取W3C兼容的配色方案。我们跳进来吧!

  (如果您只想要完整的源代码,可以下载此GitHub Repo。)

获取您的Clarifai钥匙

  在开始之前,您的第一步应该是注册免费的Clarifai帐户。

  在您创建帐户后,您需要通过开发人员界面向Clarifai注册应用程序:

  选择您的应用程序并单击“API密钥”。此十六进制字符串将使您的应用程序可以访问Clarifai,因此请将其复制以供日后使用。

  

HTML - The Skeleton

  接下来,我们将使用HTML设置网页的结构。这很简单:使用&lt; head&gt;创建一个新的HTML文件index.html部分和&lt; body&gt;部分。在&lt; head&gt;中部分,复制在以下代码中:

   https://gist.github.com/RedRussianBear/787ab46d2af1c9c9c1d3b5c8fc8585f4

  &lt;! - 包括JS! - &gt;&lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”&gt;&lt; ; / script&gt;&lt; script src =“https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js”&gt;&lt; / script&gt;&lt; script src =“https ://sdk.clarifai.com/js/clarifai-latest.js“&gt;&lt; / script&gt;&lt; script src =”colors.js“&gt;&lt; / script&gt;&lt;! - 包括样式! - - &gt;&lt; link rel =“stylesheet”href =“style.css”&gt;

  前两个脚本标记包含jQuery和tinycolor库,我们将使用它们来保持代码清洁和简洁。如果您以前从未使用过它,那么jQuery是一个广泛使用的JavaScript库,它使得按ID,类获取元素,并且更容易和更清晰地修改它们的属性。第三个脚本标记包含Clarifai JavaScript Web SDK,它实际上允许我们访问模型并发送图像进行分析。最终的脚本标记链接在我们的colors.js文件中,我们将放置代码。最后一行的链接连接到我们的CSS文件styles.css,这将使一切都很漂亮。

  现在,在&lt; body&gt;中部分,键入以下代码:

   https://gist.github.com/RedRussianBear/360629518e9fc521fd531d44f7feafbf

  &lt; div id =“work_box”&gt;
&lt; h1&gt;使用Clarifai创建配色方案!&lt; / h1&gt;
&lt; input type =“file”id =“upload”/&gt ;
&lt; div id =“colors”&gt;&lt; / div&gt;
&lt; / div&gt;

  我们所拥有的只是&lt; div&gt;用&lt; h1&gt;来包含我们所有的工作标题告诉用户发生了什么,文件&lt; input&gt;接受图像处理,嵌套&lt; div&gt;保持Clarifai在图像中识别它们后返回的颜色列表。您会注意到一些标签具有id名称,这使我们可以在使用jQuery时直接访问它们。

CSS - 皮肤

  接下来,我们安排和设计HTML元素。创建一个名为styles.css的新文件,其中包含CSS代码:

   https://gist.github.com/RedRussianBear/e0ad07f21069897d78dfa08ed40745e0

  此CSS文件是一组用于更改HTML显示的参数。在设置字体并确保我们为身体扩展以覆盖它的任何背景后,我们为'work_box'设置尺寸,边框和半透明背景颜色,并通过设置margin:auto使其居中。接下来,我们增加大小并确保文件上传输入的居中。最后,我们在 #colors下对每个div 进行空格和样式设置,添加一个边框,并使用display:flex。强制将任何跨度均匀地分隔出来。

JS - The Meat

  现在,是时候让它全部运转了。创建一个名为colors.js的新文件以包含我们的JavaScript。我们将在web文档的ready()函数中完成所有工作,以确保在加载其他必要组件之前我们的代码不会运行。

   https://gist.github.com/RedRussianBear/40a52270ffd623bfb28df94a6c5e35bb

   $(document).ready(function(){

//确保正确调整体大小

('body')。css('height',$(window).height() );
$(window).resize(function(){$('body')。css('height',$(window).height());});

//连接到Clarifai
const app = new Clarifai.App({
apiKey:'YOUR_API_KEY'
});



}

  这是我们脚本的开始,我们设置两个重要的事情:我们确保身体对象适当地调整窗口大小,以便我们的图像填满屏幕,我们连接到Clarifai,制作一个新的应用程序。记得换掉'YOUR_API_KEY '使用您自己的Clarifai帐户中的十六进制密钥!

重要说明:此JavaScript文件是客户端的,将提供给所有用户。如果您在生产中使用它,请记住使用Clarifai API密钥管理器限制密钥的范围。这将确保有人不能在代码中找到您的密钥,然后使用它来训练您的角钱定制模型。

  现在,仍然在$(文档).ready()内,我们将定义getColors()函数,该函数将获取图像文件,将其发送到Clarifai,并将识别的颜色打印到屏幕上。

   https://gist.github.com/RedRussianBear/b7c0868885612209b0697de03d858782

  该函数包含对app.models.predict()的调用,并选择了Colors模型。 Clarifai JavaScript SDK可以采用以下两种形式之一接受图像:URL或base64字节字符串。由于我们希望我们的用户能够直接发送他们自己的图像,我们将把他们发送到base64的Clarifai。这样我们的项目就完全在客户端运行,不需要我们的后端代码,数据库或服务器,我们可以将它作为一个简单的静态站点托管在任何地方。

  预测函数以异步方式运行,因此我们需要定义两个匿名函数:一个是出错,一个是处理响应。错误功能只会将错误记录到控制台。

  同时,在响应函数中,我们将Clarifai识别出的颜色拉出来,并在每个颜色上循环,创建一个新的&lt; div&gt;它保存了图像中颜色的十六进制代码,W3C名称和普遍性,同时将&lt; div&gt;的背景设置为该颜色。我们使用tinycolor来检查任何给定的颜色对于白色文本是否太亮,如果是这样,请将文本颜色设置为黑色。

  现在我们需要做的就是将getColors()连接到我们的文件输入。为此,我们挂钩输入的change()方法,只要用户选择带有输入的不同文件,就会触发该方法。

   https://gist.github.com/RedRussianBear/9be3a48fe91260be987dbd783e85192e

  获取新文件后,我们实例化FileReader以将文件内容解析为base64字符串。我们将背景图像设置为此文件,以便用户可以在我们发送颜色方案时将Clarifai的结果与源自身进行比较。当然,我们将其发送给Clarifai进行处理(在切掉前十几个包含未使用的标题信息的字符之后)。

没有设计度的色彩计划

  我们的应用已经完成!您可以在任何浏览器中打开index.html来运行此应用。您现在应该能够从任意图像制作符合W3C的配色方案。如果你围绕某些照片设计文档,这很好,但如果你正在编写一个你希望根据背景或用户输入改变外观的网络应用程序,那就特别强大!

  感谢Mikhail Khrenov,@ RedRussianBear,这个MLH特色黑客!

开始使用计算机视觉构建您自己的应用程序!

  

使用Clarifai从任何图像创建颜色方案:JavaScript教程所属专题:JavaScript Clarifai 《使用Clarifai从任何图像创建颜色方案:JavaScript教程》链接:http://www.zhouchuanxiong.net/1310