还在头破血流抢红包封面?不如自己用 AI 一键免费生成

回首2023年,要问什么技术/领域最火,AI 必须可以占据一席之地

先上效果图

体验地址:ai.hxkj.vip/cover

可以根据自己的口味自由生成红包封面

想看实现步骤和原理的可以接着往下看,只想过把瘾的话,直接进入上述体验地址把玩即可

契机

年底了,大家除了在期盼自己的车票候补订单尽快兑现,同样也沉浸在抢各大品牌发放的红包皮了

刚好近期看到有个小伙伴分享了一个红包封面生成器,觉得挺有意思的,想进去玩玩。

结果点进去傻眼了,好家伙,10 块钱只能生成 3 张图,穷鬼劝退!

作为一个技术小伙,怎么能被这点困难击倒,既然用不了别人的,那就自己实现一个呗

于是我就去 openai 官网瞄了一眼成本价, 8 美分一张,也就是大概5毛6的样子,嗯,那还可以

所以,我提供的那个体验地址,首次生成免费,之后的话,只收个成本价,5 毛钱一张,四舍五入,也是约等于做公益了,大家手下留情,轻点薅。我这边主要是提供实现思路及流程。

准备工作

其实,也没啥特别的要求,只需要一个 GPT4 KEY 即可,如果有 ChatGPT 账号的话,自己用美金卡充值即可,之前还得看脸,充值了也不一定会给 GPT4 的接口权限,现在的话,只要你充值了,立马给 GPT4 接口权限。如果还没有账号的话,推荐看我这篇文章自行注册一个。传送门:《注册GPT账号流程》

OpenAI 接口联调

1、安装依赖

sh 复制代码
npm install openai@^4.0.0

2、用 API KEY 创建实例

js 复制代码
import OpenAI from "openai";

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
});

3、简单调用

js 复制代码
async function main() {
  const image = await openai.images.generate({ 
      model: "dall-e-3", 
      prompt: "帮我生成一张龙年封面图,喜庆一点的" 
  });

  console.log(image.data);
}
main();

这个时候已经可以成功的生成一张图片了,但是呢,还不是很完美,接着继续下一步

4、参数调整

由于默认的尺寸是 1024*1024 的,但是红包封面是竖直矩形的,所以,我们得调整一下宽高。顺带把清晰度也往上提一提,让他生成高清(HD)的封面图

js 复制代码
async function main() {
  const image = await openai.images.generate({ 
      model: "dall-e-3", 
      quality: "hd",
      size: "1024x1792",
      prompt: "帮我生成一张龙年封面图,喜庆一点的" 
  });

  console.log(image.data);
}
main();

生成之后大概会是这样一张图

好了,现在封面底图是准备好了,那怎么把封面盖子放上去呢,咱们继续下一步操作

合成红包盖子

这里的实现方式有很多种,例如:1、直接使用 canvas 合成一个整体;2、使用绝对定位,将盖子直接放在底部即可,这边我们就采用第二种简单的方案吧

html 复制代码
<div
    style={{
      position: "relative",
      width: 280,
      height: 490,
      marginBottom: 30,
      cursor: "pointer",
    }}
    key={item.id}
  >
  // 这个是封面原图
    <Image
      src={item.img}
      alt="cover"
      width={280}
      style={{ borderRadius: 10 }}
    />
  // 这个是封面盖子
    <Image
      src="/images/cover_bottom.png"
      width={280}
      alt="cover_bottom"
      style={{ position: "absolute", left: 0, bottom: 0 }}
    />
  </div>

于是,成品就做好了,长这样

怎么样,效果还可以吧~

后续优化计划

  1. 点击开启按钮,可以启动红包开启动画
  2. 支持一整套封面下载,包含聊天记录中的小封面
  3. 支持详情里查看生成描述

PS.给大家提供一个免费使用 3.5 的镜像地址: ai.hxkj.vip

相关推荐
爱分享的程序员12 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘17 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出19 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的19 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解22 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵25 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im26 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man26 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下41 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
asyxchenchong8881 小时前
ChatGPT、DeepSeek等大语言模型助力高效办公、论文与项目撰写、数据分析、机器学习与深度学习建模
机器学习·语言模型·chatgpt