AI 嘴替,社交平台反杠机器人:第 3 篇-页面优化&总结

大家好,我是欧达克。

前面大致实现了 AI 嘴替 应用聊天的功能,今天主要是针对 AI 工具生成的代码进行优化。


问题丢给 DeepSeek:

我想利用 AI 工具生成图片,根据我输入的文字描述,生成对应的图片,有什么 AI 网站可以满足我的要求吗?

DeepSeek 回答:

最终亲测了几款之后,发现 Midjourney 和即梦 AI 效果比较好,这里不得不吐槽下文心一格,AI 工具收费无可厚非,但是其他的工具多多少少能免费体验下,文心一格直接引导到充值页,这波吃相未免太难看。

对比了 Midjourney 和即梦 AI 后,最后选择了 Midjourney 生成的 Logo,效果如何千人千面。

Midjourney:

即梦 AI:

UI 优化

上一篇实现了基本的前后端交互,现在针对前端做些 UI 优化,依然是用 Cursor 和 Trae。

这里就不单独对比 Cursor 和 Trae 了,实际体验下来效果差不多,都是基于最新的 Claude-3.7 模型。

Trae

现在index.vue生成的首页太简单了,我不需要顶部的蓝色框,我需要添加一些动态的背景,具有科技感,同时开始对话的按钮和 logo 图片不要显得那么突兀。

去掉顶部导航栏

帮我再优化在首页,要求图片居中,开始对话置于中下位置,同时背景动态效果更丰富一些,最好能和图片有些联动。

然后就是服务失败,检查网络。。。

最后在经过 1 小时多的调试之后,对比下优化前后效果。

引导页:

旧:

新:

对话页:

旧:

新:

下面是使用 qwen-plus的对话效果:

前后端的代码都已提交到 GitHub,有兴趣的朋友可以翻翻往期文章。

总结

本章主要使用 Trae 对 UI 做了一些优化,让页面看起来更酷炫一点。

产品主体功能就这样了,但是很难说服自己做的东西不是个垃圾,但这并不是 AI 的问题。实际体验下来,你只要给它一个明确的功能需求,它能够做得很好,甚至很多页面动态效果,对于一个不太了解前端的同学,可能需要花很长的时间去实现,但是 AI 在 30 秒内完成。这里因为我给 AI 的描述很宽泛,并没有明确动态效果应该是什么样,所以 AI 就自由发挥。

总体感觉当前市面上的 AI 确实是很好的编程辅助工具,特别是对于有一定编程基础的人,在工作中能大大提效。不管是像 Cursor、Trae 这种自带编辑器的 AI 工具,还是像通义灵码、cline 这种插件,实际体验下来都不错。很多人会说 AI 早晚会替代程序员,也许是对的,但是 not today!what do we say to the God of Death? -Not today! )。普通人能做的,就是多接触 AI 工具,用好 AI 工具,但就算完全不懂 AI,又有什么关系呢,每次的技术革新都是少数人推动的,普通人处在时代的洪流下,能过好自己的生活就很好了,致敬每一位为了生活负重前行的我们。

我是欧达克,祝你幸福。

相关推荐
GalenWu5 小时前
对象转换为 JSON 字符串(或反向解析)
前端·javascript·微信小程序·json
ᥬ 小月亮7 小时前
Uniapp编写微信小程序,使用canvas进行绘图
微信小程序·uni-app·c#
BXCQ_xuan10 小时前
uniapp小程序轮播图高度自适应优化详解
微信小程序·小程序·uni-app
艾路菲尔13 小时前
微信小程序地图缩放scale隐性bug
微信小程序
前端开发小吴17 小时前
微信小程序预览文件 兼容性苹果
微信小程序·小程序
Good Lucky17 小时前
setData执行后操作方法-微信小程序
微信小程序·小程序·setdata
爱分享的程序员21 小时前
微信小程序执行C语言库的详细方案
c语言·微信小程序·小程序
Mark.102421 小时前
uniapp项目打包的微信小程序,设置uni-popup type=“bottom“时,底部有空隙
微信小程序·uni-app·notepad++
发呆小天才yy1 天前
uniapp 微信小程序使用图表
前端·微信小程序·uni-app·echarts
Muxiyale1 天前
微信小程序备案的一些记录
微信小程序·小程序