即时设计如何导入图片
如何设计一款有温度的AI产品？在这篇文章里，作者接着就技术实现部分做了梳理和分享，一起来看看本文的思路。
四、技术实现
1. APP端实现笔者调研了原生及跨端方案，加之控制成本的原因，选择了跨端Flutter的实现。
1）首页开发
笔者采用了慕客作为协作的UI标注平台，分析布局后，应采用的布局方式：
- Scaffold 页面
- Body使用整张图片铺满，以宽作为平铺依据
- 不规则位置头像采用 Stack 布局，预设最多30个位置，随机展示
- 底部BottomBar，采用定位方式，弧度背景为图片，添加按钮采用 ElevatedButton
具体代码细节如下（系列文章完结后，会把源码开源出来，留言评论的我提前发下）
2）收集智能体页面
还是先分析布局，半弹窗页面，底部能发送文字，整体为对话信息页面。
- 半弹窗采用 showModalBottomSheet 底部弹出给一定的透明度
- 对话部分采用Column + 滚动容器实现
- 语音模块采用端本身的原生TTS组件
关键代码细节如下：
3）实时交流页面
这块才是踩坑的开始，原来使用D-ID的时候，Demo是纯前端的方案，当时以为都是标准WebRTC，而且Flutter本身也有支持WebRTC的标准组件，就没太考虑端的兼容性问题。
实现后发现，不同的Android版本及IOS版本对原生WebRTC的支持都存在或多或少的兼容问题，最后决定更换对话为H5页面，采用端+H5方式解决兼容问题，关键代码如下：
其他零散页面，难度不大，就不着重说明了，下面是服务端的实现细节。
2. 服务端实现笔者对JAVA，Go，Rust相对熟悉，但由于需要对接不同的模型及第三方sdk都是python的，Python服务端语言成本较低，小规模下优点更多。
- 语音TTS模块，采用了ElevenLab，声音克隆能力对比讯飞、微软TTS、火山引擎语音包后，效果较佳
- 对话交流模块，采用了GPT4，多轮对话及角色扮演对比，GLM3/文心一言/通义千问，效果较佳
- 整体流程，首先APP端语音转文字，通过Websocket传到后台，用GPT4 Assistant回复，得到的文字，在通过ElevenLab 转为语音，最后调用D-ID用声音驱动图片的口型（已经预感到整理流程会很冗长）
关键代码逻辑如下（关注下，后续开源出来）：
至此，Demo版的开发完成了，下一步开始我们的内部吐槽环节。
五、Demo版内测
无比成就感的开发完APP端，H5端，服务端，开始和身边朋友进行内测：
假朋友A：男哥，说完话，咋1分钟才能响应
假朋友B：+1
假朋友C：+1
….
我：哎呀，我要先把语音转文字，文字给到GPT，GPT给我回复，我还要调接口生成语音，在通过语音驱动图片说话
假朋友D：啊，然后那，为什么这么慢呀
假朋友E：+1
假朋友F：+1
假朋友N：哎呦，辣鸡呀，这BUG太多了，男哥你不行呀，果然产品是不能参与研发的
我：。。。
于是开始了各种bug的修复，各种优化。
最后将每次的沟通响应缩短到30秒，汗！也是很慢，所以现在有俩条路，一是继续优化，或是自己训练模型，或是使用metahuman超写实模型，二是从产品角度改变思路。
六、产品改进调研
通过声音驱动口型的不同技术调研：
SadTalker：https://github.com/OpenTalker/SadTalker
西安交通大学、腾讯人工智能实验室、蚂蚁集团共同发布的一个模型，让头像能够说话，使用WebUI Colab白嫖后，发现还是比较慢的，如果图片质量不高，效果也会更差。
Wav2Lip：https://github.com/ajay-sainy/Wav2Lip-GFPGAN
Colab部署后，对视频文件支持较好，同时GFPGAN还可以修复不协调的口型，但是图片支持一般，需要自己改造，同时项目比较老实，也3080,4080需要自己升级改造，并行逻辑也需要增强（在B站看到有人改造后效果还可以，但是也不能完全达到实时，一个500*500，1分钟左右的视频，大概在20-30秒的延迟）。
VideoReTalking：https://github.com/OpenTalker/video-retalking
个人感觉，更像是SadTalker的升级版，对固定身位的图像视频支持比较好，但是图片说话，需要改造，同时对分辨率要求较高，最后还是延迟的问题，1分钟视频，4080最好成绩13秒。
最后，发现只要是和真人相关的图像效果都不是很好，因此改变了下调研思路，从有戏建模的角度来衡量是否能够完成我要求。
MetaHuman：是虚幻引擎发布的超写实的数字人类，整个身体和空间都可以进行驱动，咋一看找到了福音，不能重蹈D-ID的覆辙，一部iPhone 12（或更新型号）以及一台台式电脑就能化身为完整的面部捕捉和动画解决方案，我父亲去世的时候，也没留下太多的视频和声音，把面部的表情和身体特征从视频和声音中提取出来，还是比较麻烦的一件事，其他人要得重新来一遍，对于还在世的人比较友好，可以作为一个备选方案，如：将一个人的照片，3D补齐后，优化细节，导入MetaHuman的模型中。
NVIDIA Omniverse Audio2Face：https://www.nvidia.cn/omniverse/apps/audio2face/
官网很牛的介绍：使用生成式 AI 可以即时从一个音频来源创建面部表情动画。这不就是我心心念念的吗，看了看上手难度，有点打鼓呀，又联系了下企业本地版的价格，好的，我错了。
服务端的主流方案能够搜索的，还有国内外论坛求助的，主流大概这些，大概花了1周的时间，是时候改变下思路了。
文章系列完成后，会把相关的原先，设计，源码，数据库等一同开源出来。
未完待续。
本文由 @AI产品李伯男 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
","gnid":"97e28d4aaeb7661d7","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01fcbc381a2c95d86c.jpg","width":"900"},{"desc":"","height":"1282","title":"","url":"https://p0.ssl.img.360kuai.com/t01b9c0a04191350d8e.jpg","width":"742"},{"desc":"","height":"921","title":"","url":"https://p0.ssl.img.360kuai.com/t0177bd1862c6990c8f.jpg","width":"647"},{"desc":"","height":"933","title":"","url":"https://p0.ssl.img.360kuai.com/t019791ccd7ebc08ad8.jpg","width":"638"},{"desc":"","height":"699","title":"","url":"https://p0.ssl.img.360kuai.com/t0159d4e3fd579ad125.jpg","width":"687"},{"desc":"","height":"1280","title":"","url":"https://p0.ssl.img.360kuai.com/t01d55aa8ec7e77c4f9.jpg","width":"724"},{"desc":"","height":"878","title":"","url":"https://p0.ssl.img.360kuai.com/t012fea48cfbb949acb.jpg","width":"466"},{"desc":"","height":"803","title":"","url":"https://p0.ssl.img.360kuai.com/t0159c3cdcf68ab998e.jpg","width":"701"},{"desc":"","height":"848","title":"","url":"https://p0.ssl.img.360kuai.com/t01eb36dc251400bcb1.jpg","width":"589"},{"desc":"","height":"918","title":"","url":"https://p0.ssl.img.360kuai.com/t010cfa998669c879c1.jpg","width":"705"},{"desc":"","height":"991","title":"","url":"https://p0.ssl.img.360kuai.com/t014b6fbf15220a7013.jpg","width":"775"},{"desc":"","height":"1250","title":"","url":"https://p0.ssl.img.360kuai.com/t01cbd8e012cecc3176.jpg","width":"746"},{"desc":"","height":"882","title":"","url":"https://p0.ssl.img.360kuai.com/t013e11227689598be0.jpg","width":"711"},{"desc":"","height":"816","title":"","url":"https://p0.ssl.img.360kuai.com/t01a75ef1e14eccb2fb.jpg","width":"621"},{"desc":"","height":"817","title":"","url":"https://p0.ssl.img.360kuai.com/t018d486f91bf6d221e.jpg","width":"993"},{"desc":"","height":"750","title":"","url":"https://p0.ssl.img.360kuai.com/t01c252247ba5d8b8d5.jpg","width":"1175"},{"desc":"","height":"744","title":"","url":"https://p0.ssl.img.360kuai.com/t01c0d676d45003e358.jpg","width":"840"},{"desc":"","height":"770","title":"","url":"https://p0.ssl.img.360kuai.com/t011482caf9007ba1f5.jpg","width":"789"},{"desc":"","height":"829","title":"","url":"https://p0.ssl.img.360kuai.com/t01ddf66481edd8330c.jpg","width":"860"},{"desc":"","height":"649","title":"","url":"https://p0.ssl.img.360kuai.com/t012251c39609a72dd3.jpg","width":"554"},{"desc":"","height":"626","title":"","url":"https://p0.ssl.img.360kuai.com/t01ee9af3208ff2c2c4.jpg","width":"640"},{"desc":"","height":"596","title":"","url":"https://p0.ssl.img.360kuai.com/t01f72c3d6262061160.jpg","width":"760"},{"desc":"","height":"581","title":"","url":"https://p0.ssl.img.360kuai.com/t018d7f461193626f45.jpg","width":"542"},{"desc":"","height":"585","title":"","url":"https://p0.ssl.img.360kuai.com/t01a255a1bf89a17388.jpg","width":"650"},{"desc":"","height":"674","title":"","url":"https://p0.ssl.img.360kuai.com/t0122432934ef570628.jpg","width":"712"},{"desc":"","height":"472","title":"","url":"https://p0.ssl.img.360kuai.com/t01e2f690743a3ae0f4.jpg","width":"859"},{"desc":"","height":"612","title":"","url":"https://p0.ssl.img.360kuai.com/t01d32f49c91515515d.jpg","width":"687"},{"desc":"","height":"606","title":"","url":"https://p0.ssl.img.360kuai.com/t01de7bd7b3bf6170f5.jpg","width":"748"},{"desc":"","height":"620","title":"","url":"https://p0.ssl.img.360kuai.com/t01d9152c4d1d84b168.jpg","width":"352"},{"desc":"","height":"612","title":"","url":"https://p0.ssl.img.360kuai.com/t018a5505d9b61bd64c.jpg","width":"284"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"pika","pub_time":1706239560000,"pure":"","rawurl":"http://zm.news.so.com/57adc9f1b56d2ff7c9e49fa26bb6536c","redirect":0,"rptid":"65925af60657877c","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"如何设计一款有温度的AI产品？（二）
荆药峰4622coreldaw设计名片时可以导入图片吗?
柯冉博18740485316 ______ 你要导入的是JPG的话,直接在CORELDAW里面--选文件--导入---JPG格式,图片就可插入到你的名片中,再在名片上打字,把图片放在最低层就可以了, 如果不是JPG,那么先在PHOTOSHOP里处理一下图片就可以导入了 如果直接是PS的文件,那么COR里也可以导入.
荆药峰4622请问coreldraw展板制作中怎样导入图片 -
柯冉博18740485316 ______ 执行“文件”→“导入”命令,组合快捷键是(Ctrl+I),或单击属性栏中的“导入”按钮 .弹出“导入”对话框,若要选择多个图像,可按住Ctrl键的同时单击图像文件,,即可导入位图
荆药峰4622sbm专业绘图工具如何导入和导出图片?
柯冉博18740485316 ______ 1)安装并打开sbm专业绘图工具,点击左上角的【四个小正方形】.(如下图) 2)点击【导入】按钮,选择【图库】最后选择自己想要导入的图片即可.(如下图) 3)在图库中选择我们要导出的图片,点击【导出/分享】按钮,根据所需选择自己所需的图片格式,如【导出为JPEJ】,最后点击提示框中的确定即可.(如下图)
荆药峰4622怎么将素材导入coreldraw中当底纹 -
柯冉博18740485316 ______ 文件——导入,选择素材图片导入——确定 CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件;该软件是Corel公司出品的矢量图形制作工具软件,这个图形工具给设计师提供了矢量动画、页面设计、网站制作、位图编辑和网页动画...
荆药峰4622请问怎样把已完成的设计CAD图纸导入筑业软件
柯冉博18740485316 ______ 有四种方法:1右键直接插入图片从文件导入.2右键插入图片选择绘制AUTOCAD 图(不可为2007CAD),然后软件会自动打开CAD,在里面画完图之后,点击“文件”按钮上的“更新筑业资料”然后关闭CAD,在关闭小窗口即可.3右键插入图片选择绘制图片,选择后软件会打开一个画图版,可以在里面一些简单的图形,画完后点左上角“文件”下的“”更新到单元格就好了.4右键插入图片选择截图,选择后选要插入的图双击就可以插入了.
荆药峰4622proe造型中怎样插入Jpg图片?请教各位高手如何在造型时插入图
柯冉博18740485316 ______ 找proe右下角的造型命令;进入造型界面后,造型-跟踪草绘命令;选择你想要导入的视图,然后选择＂ ＂号,就可以选择你想要导入的图片;点击造型右边的＂V＂,确认完成.就图片导入到了proe中.
荆药峰4622如何向CAD图纸中插入图像 -
柯冉博18740485316 ______ 进入cad操作页面,点击插入--光栅图像 进入所要插入图片的路径,选择要zhidao插入图片 点击确定后,在操作页面选择“在屏幕上指定” 点击确定 cad操作页面点击插入点后,屏回幕左下角命令栏中会出现“指定缩放比例因子”,答可根据自己需要进行图片大小缩放 确定比例因子后,图片将插入在cad页面
荆药峰46223dMAX怎么导入自己喜欢的图片样式?初学者! -
柯冉博18740485316 ______ 视图-视口背景-视口背景-文件-找到该图片路径-添加-点匹配位图-勾选显示背景以及锁定缩放/平移(锁不锁定随你)-在左下角选择要导入的视口-确定,好了
荆药峰4622怎样制作自己想做的照片? -
柯冉博18740485316 ______ 最简单的一个是windows XP自带的windows movie maker,在开始菜单的所有程序里就可以找到.(＂开始＂—“所有程序”—“windows movie maker”) 1.打开后在界面左边选择“导入图片”,可以单张导入也可以批量导入.导入的照片将出...