即刻App年轻人的同好社区
下载
App内打开
好学之徒
255关注17被关注0夸夸
钻研源自于热爱👨🏻‍💻
学习使我快乐🎉
置顶
好学之徒
3年前
座右铭:永远相信,生活会给你最好的安排!
00
好学之徒
10月前
收藏

airb.ai: 【如何一天做一个AI小应用?】来,通过这个AI写海报给你讲明明白!(全文1245字,建议转发点赞收藏再看😁) 先把AI海报这个链接👉https://fiitai.surge.sh/dogfoodsc.html 整个制作过程: 在网上看到@哥飞 发的一个图片海报,排版很漂亮,文案也很好。我就在想让AI编程能不能把这个海报复刻出来,并做成文案可动态调整的。 说干就干! 1、把图片上传到Claude AI,然后提示词:照着这个海报图片帮我生成一个html代码格式的,注意保持背景颜色,每一行文字字数多少,字体大小,字体位置。 代码咔咔一会生成了,代码保存到电脑的一个html格式文件里。打开发现每一行字的字数,断句,背景颜色复刻出来了,但是: (1)字体不对 (2)有些字行位置不对 (3)背景的纸的质感没出来,和渐变色 逐个解决。 第一个问题,在即刻App问了下,这个海报字体是“京华老宋体”。于是在网上下载到这个字体的ttf文件,字体很漂亮,但是ttf体积很大啊,35M! 第二个问题,字块位置不对。看了下,Claude是css布局,每一行都是按照网页左上角为基准进行定位,通过top、left两个css属性,这个逐个逐行调整。费功夫,也搞定了! 第三个问题,网上找一了一张纸质背景图片,让让kimi chat帮忙写了背景的css,好满足要求:纸质效果+颜色渐变。这个两个效果同时满足的代码只有kimi搞定了,ChatGPT,Claude,Gemini都没搞定。 到这里,图二的海报基本复刻出来了。 但是海报里的问自己只能自己手动一行一行,很不city啊! AI时代,当然得用GPT帮忙改啊 说干就干! 找Claude说: 1、帮我写一个纯javascript前端调用OpenAI GPT-4的接口,接口作用是根据用户输入的主题,按照这个html里每一行文字都该写一下,伍迪艾伦风格的(画外音:我喜欢伍迪艾伦)。保持每一行字数一致。 2、接口返回之后,自动用javascript替换原海报里的每一行文字。 Claude,咔咔,一份写出来了。我找了个OpenAI API密钥,跑了一下代码。我靠,完全可以! 这个超出我的想象了,这就是一个AI应用了啊! 到这里基本上一个根据用户自定义主题,并复刻了原海报的小AI应用写好了。就很棒! 玩了几把,很爽!但感觉死板。 于是加上了,替换文字时候文字一个一个流式输出的效果。这个代码也是Claude写的,一把就写成可用了。最牛逼的是,文字左对齐的动画效果是从左到右,文字右对齐的是文字从右到左。太牛了。 这个地方Kimi Chat写得效果就不如Claude。 到这时候,基本AI海报写好了。 部署到surge.sh这个静态网页托管平台上,就是上面网址。 整个过程,还挺好玩的! 对AI编程感兴趣的,欢迎微信交流微信聊,微信号:botreboot https://fiitai.surge.sh/dogfoodsc.html 昨晚又给流式文本输出加了滴滴滴打字音......

00
好学之徒
10月前
好学之徒
12月前
wps在pdf文档中消除水印,直接编辑修改的功能还是不错的。😁
00