00:06
大家平时会使用O表情丰富聊天内容吗？可以十分直观的表达我们的喜怒哀乐，甚至你可以通过表情关注你喜欢的up主，点赞和收藏up主的作品，有成千上万的以emerge表情任君挑选，但是他们是否能相互碰撞融合呢？当然可以，我们可以融合两个emerge表情为新表情，甚至融合出别有味道的新产物。Google的emerge kitchen就做到了这点，实现了emerge大融合，可能不常用，但足够有趣丰富我们的内容表达，我们一起来浅浅探秘一下。正如前文所说，Mix最初只能在GB上使用，但是随着kitchen的有趣，现在微博端也可以体验和畅玩首。
01:06
首先是官方途径，我们可以在Google上搜索kitchen，等待片刻后即可在搜索导航下看到，这个时候我们就可以点击开始进行emerge表情融合，合成后的emerge表情你可以进行复制，复制后无法在文本框里粘贴，但是可以在聊天框进行粘贴，或者第三方软件选择剪贴板导入。当然你也可以直接右键保存图像。另外，观察默认的文件名，你会发现有2个部分组成，其实分别代表由哪2个语默句组成。代表对应的unicode编码。
02:02
这个我们留在后期解析复刻原理的时候再说。此外，你可以在这里点击随机，可以让OG的合成更多变，当然官方的方法对于中国大陆地区用户可能不是很友好，而且kitchen集成于搜索模块明显也不够直观，有没有第三方的实现呢？其实有非常多优秀的第三方实现，比如。也有如image supply这样上下布局选择的emerge局，当然也有我复刻的左右选择布局的版本，这里我就介绍一下我们这个复刻版本，稍后也满足一些观众的好奇心，介绍一下算法的实现，方便小伙伴们开发出更好的版本。我们先看看实现的效果，在正式版本上，左右两侧上展示所有支持的摸表情悬浮其上，还有类似于Mac OS启动台的神奇效果。我们可以点击左边的模具表情进行选中，选中的一模具会出现锁定框，系统会进行搜索，填充中间结果。
03:39
和刷写右侧emerge状态右侧可以进行组合的emerge表情会变得高亮，意味着这时候进行点击可以对结果进行筛选，比如这里点击糖果、礼物等等表情，点击单个结果将弹出下载框，方便进行图片下载。在我目前还在开发的测试版本上又有些许惊喜项目据NEX3和VIEW3框架，这里启动一下。
04:13
首先是增加了搜索框，方便使用英文关键字检索。毕竟600多个表情有点太迷人。因为左右两侧组件存在复用，所以结果筛选处也可以进行搜索，搜索的关键字最少需要三字符，比如egg，当搜索失败，自动返回原始一模具列表，与此同时，按下随机按钮的骰子，随机在MO9列表中选一个，给运气一个机会。最后，细心的你肯定也发现列表增加了线行动画，过度设计一下，提升用户体验。现在我们看看如何实现这些功能。首先我们可以打开F12分析mix的构成，如果你查看网络源码，会发现渲染后的元素中原有的image是SVG格式，图片合成后的image是PG格式，点击一个imageg触发请求，可以进一步看出它俩的关系。
05:28
实际上就是使用的unicode作为请求。返回emerge的网络地址由版本、日期和的unode编码组成，那么就很简单了，Pru启动，但是突然发现有人排好了，就是我们明谢的项目。其实我的项目风格都是复刻这个项目的。项目使用react实现了kitchen，同时包含一个image Jason列表。我们找到这个Jason列表并下载下来，使用文本编辑器打开拖动一下，发现这个是所有image的组合。Jason内标记了什么unode编码可以组合为mix。我们可以使用Python对这个文件进行二次处理，再使用view进行渲染。因为我不准备引入数据库，想直接解析文件返回数据。这个50NB的文件就有点大了，对服务器的IO占用过大，观察这个Jason文件，我们可以对其瘦身。
06:24
我们可以解析为字典并存储为新的Jason文件，字典的key为左侧第一次选择的emerge，字典的value为数组，包含合成一模g mix的版本和利一模G元素。既然拍中都启动了，顺手也用正则解析了网站上600多个SBG表情，后续作为左右两侧一摸G选中列表数据来源其实也是刚刚的一模g mix项目，使用正则提取直链并使用request库下载，如果使用error to多线程下载会更好。如果你对这简单的脚本感兴趣，可以在我的gihab仓库内找到。回到官方的image kitchen,我们再回顾一下全列的句文件名，其实都是unicode编码，只是有的可能是两个unode编码组成两个表情，合成后的新表情文件由SPG变为了PG，请求地址由组成的emerge编号和日期版本组成，所以我们上文获得的新Jason也是可以拼出合成。
07:24
后的图片地址的，当然有几个的SVG地址比较特殊，需要特别处理一下，所以我在nextx three框架的view代码才会这样写，在模具表情代码长度不足4位时进行补灵操作。我们再一起结合页面前端来看看两侧的列表，渲染出我们爬去的SVG文件。SVG文件的索引由我们爬去的Jason文件内部的key提供，View内将key进行转移和补零，方便定位到SVG文件地址emerge列表的上方，实际就是对emerge列表的二次过滤。可以看到算法是非常简单的。那么请求的API是如何实现呢？前文已经说过，项目基于nextx three框架，Nextx three的优势之一就是服务端渲染，我们可以写一个服务器端API接受前台请求，根据请求内容读取之前Python解析的Jason，之后根据传入的编号做。
08:24
为key进行简录。回到next three和view three里面，我们看看代码的实现。next three内serve文件夹会自动填窗为服务请求，类似于spring BOO的controller。在其中我们建立一个请求实现next even handle的方法构建一个API请求。请求内我们接受get的参数，判断参数是否合法。之后读取Python爬取的文件，填充为Jason文件，在文件IO读取后，如果以默参数存在，那么进行筛选，否则直接返回读取的Jason字符串。是不是有小伙伴好奇这样文件存放地址在哪里？其实指向的是文件项目的根目录，也就是这里文件内我并没有进行格式化，方便进一步节约空间。这里大家还可以看到文件只有8NB，相比最初的近60NB已经小了非常多了，有点用性能换IO和存储空间的感觉。回到前台，核心的设计就完成了。
09:37
这样的神奇效果其实依靠CSS，准确点其实是t win CSS,一款非常不错的原子化CSSUI组件。至于项目的部署，其实node JS项目的部署方法很多。目前是使用PM two运行项目，在使用docker和私有docker仓库部署项目，不仅部署方便，而且日期查看也方便，更重要的是可以很好隔离环境，更加安全。到此，基本算法思路就分享完成啦。
10:12
欢迎小伙伴体验和复刻，还有记得关注我们哦。
我来说两句