ð我建造的(以及它的作用)
RIFFR可帮助您制作出色的蒙太奇!
好的,这是一个过分的简化。让我澄清一下。
- 您可以选择多达120张图像(好,对吗?),在它们上运行面部检测模型 然后,将检测到的面孔的照片围绕特定的面孔进行配置,放大/输出级别和帧速率,即设置图像的速度。
- 完成后,该工具会编译这些缓存的图像及其配置,并将其全部包装在整洁的Little
webm
或gif
媒体文件中。
以此gif
为例。 (in-app link)
它使用26张图像,以每秒9帧的速度循环,并围绕特定的脸(在这种情况下为Elon)。
ð± - ð类别提交:
选择自己的冒险
ð±−应用链接
ð背景:一些上下文
(是什么让您决定构建这个特定的应用程序?是什么启发了您?)
沿着记忆小道的旅行时间。
还记得2017年 wayyy 回来的此ð½视频?
长期以来,我真的被敬业的YouTuber Hugo Cornellier 如何吸引,他每天在相机前拍照9年,最终制作了超过2500张照片的及时收藏,放置在自己周围。该视频对我说话,就像对您一样。它显示了一个人的旅程 - 成长,小时候,经历阶段,最后找到爱情。
然而,事实证明,将其捕捉到一个艰苦的缓慢而困难的过程。沿特定的脸对齐,调整图像大小并编译这些图像以制作有意义的视频。雨果花了50多个小时才能做到这一点!
受到他的痛苦的启发,我决定伸出手并放出一个可以自动化所有这些配置,检测和循环在面之间的工具,并与所有这些一起生成视频!
psst ... 使用此应用程序,用户甚至不必在同一地点或同一位置重复单击照片 - ML模型将各种照片调整为ρ
听起来很容易实施,对吗?
剧透警报:根本不容易。
ð我如何建造它
(您是如何利用Mongodb Atlas的?您一路上学到了一些新的东西吗?拿起一项新技能?)
自从我的第一个实施(靠近Atlas Hackathon的开头)以来,我一直致力于保留用户隐私,因此我购买了一个预先训练的ML模型,该模型已加载到浏览器中,并使用本机MediaRecorder
Web API编译。此外,我学习了如何使用Web Workers
在浏览器中缓存图像,并用ImageBitmap
对象将它们涂在画布上。
注释 - 有关更多详细信息,请查看我对我在DevPost(here)上发布的该较早实现的文章,并提交给另一个黑客马拉松。
尽管如此,限制却陷入了困境,尽管各种错误修复确保了质量良好(使用VP8
媒体编解码器)和速度,但在移动设备上,有时太多了,由于大量的内存和计算,它们只是冻结了要求并开始燃烧!
过了一会儿,我决定通过在自定义Node.js后端中使用Tensorflow-Node
的功率来克服这一点,我可以完全管理,并让用户共享,上传和检测,而不会担心他们的电话。但是,该汇编仍在前端完成,因为在gif
&webm
格式中,它更容易。即使这似乎是一个绩效的权衡取舍,我还是以MongoDB的方式构建了该应用程序,因此很容易维护隐私。
plus,现在就像在浏览器和服务器上ML检测之间切换一个按钮一样容易!
最后,Vueuse库使解决内存堆分配调试,QR码生成,颜色拾取,网络工人等变得更加容易。
ð使用mongodb地图集
我学习了与Atlas集成的Mongoose ODM,并将其用作后端数据库(具有未来搜索功能)来创建2个集合,即Montages
和Users
。
服务器生成独特的,秘密的URL,它们固有地公开,但使用nanoid
模块与uuid
一样安全和私有,并在数据库和存储解决方案中公开storea。这样,获取更容易,可以在一个地方汇总数据或相应地分发数据,并且也可以生成用于搜索目的的索引!
ð屏幕截图和详细信息
注册/标志和入职过程
带注册/标志的着陆页 | 入职介绍 |
入职头像和电子邮件验证 | 入职详细信息 |
选择,编辑和编译
用户聚合仪表板 | 添加图片,选择输出和模型 |
选择正确的面,帧速率,变焦,背景 | 编译,瞧!您的蒙太奇准备就绪 |
查看器页面(带有公开访问的链接)
ð�ð»技术堆栈
基本上是MEVN堆栈Web应用程序。但是,还使用了大量的API。
- 前端-Quasar Framework建立在Vue 3的顶部。
- Back End - Node.js, Express.js & MongoDB Atlas
- 重要的API-ml5用于浏览器检测,face-api使用
tensorflow-node
加速在服务器上检测。 VueUse用于一堆有用的组件工具,例如QR Code
Generator。 Yahoo的Gifshot用于创建kude1文件in-browser等。 - 存储供应商-Google Cloud Storage
- 托管 -
Express
服务器的Azure虚拟机和Vercel forQuasar
build. - 交易 - Mailgun发送验证电子邮件
ð链接到源代码
holy-script / riffr
RIFFR是通过一堆图像“即兴”“即兴”的绝佳工具
Riffr - Montage Time! (riffr)
Riffr helps you literally 'riff' through images - centered around a face and creating a photo montage.
A bit more detail about Riffr
You're allowed to choose up to 120 images(nice, right?), run the detection on them, and then you edit photos with faces detected and size them up accordingly. Also, you choose a frame rate, that is, how fast the images go by, and you can play and pause the editor to check out a preview with those settings. When you're done, the tool compiles these cached images and their configs and wraps it all up together in a neat little video.
最终产品将是类似的
您想在本地旋转并经验吗?
ð允许许可证
MIT License
ðÖ«其他资源/信息
RIFFR的原始提交页面(在Devpost上),在MLH周末黑客马拉松中赢得了第一名。