龙年大吉——AIGC生成龙年春联

?龙年大吉——AIGC生成龙年春联?

前言

公众号：【可乐前端】，期待关注交流，分享一些有意思的前端知识

时间过得好快，一眨眼2024年就来了。这两年对互联网冲击最大的想必就是大语言模型的AIGC能力了。从国外的GPT到国内的文心一言、混元、盘古等等，AIGC的出现大大的提升了我们的生产力，现在GPT逐渐也变成了我每天都会使用到的工具。

那趁着新年即将来临，我们今天就使用AIGC去生成春节必不可少的元素——春联。

注册

对于大模型接口来说，我这边选择的是国产的讯飞星火大模型。选择它的原因绝对不是它现在可以领取免费的token，而是我觉得我们需要支持国产软件自主化（手动狗头），如果你不喜欢用这个也可以使用别的，思路都是一样的。

首先打开它的官网 https://xinghuo.xfyun.cn/sparkapi 注册一个账号，然后点击领取token就好了

领取到了之后就可以对着它的文档来使用API了。

构造鉴权API

我们是通过websocket去使用星火的大模型api，在连接之前则需要构造一个鉴权参数。这个参数主要是为了安全以及用户身份的鉴权吧，这里主要还是要根据它的文档里面的规则去构造，实现代码如下：

const getWebsocketUrl = () => { var apiKey = APIKey; var apiSecret = APISecret; var url = "wss://spark-api.xf-yun.com/v3.1/chat"; var host = location.host; var date = new Date().toGMTString(); var algorithm = "hmac-sha256"; var headers = "host date request-line"; var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v3.1/chat HTTP/1.1`; var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret); var signature = CryptoJS.enc.Base64.stringify(signatureSha); var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`; var authorization = btoa(authorizationOrigin); url = `${url}?authorization=${authorization}&date=${date}&host=${host}`; return url; }; 

生成春联

在拿到上面的鉴权URL之后，我们就可以使用大模型的接口来生成春联了。

这段时间其实也用大模型接口去做了一些其他的事情，对于大模型来说，prompt可以算是比较核心的东西。一个精准的prompt可以让大模型更好的理解我们的意图，并给出更符合我们要求的答案。

我们先用antd来搭建一个简单的表单，对于主题或者上下联字数这种可以从表单中获取值然后动态拼接到prompt中

下面就是我用来生成春联的一个prompt，仅供参考：

const prompt = `你是一个编写春联的专家，下面我将会给你一些要求，你帮我编写一幅春联，需要有美好寓意，要求如下： 主题：${theme} 上下联字数：${count} 以json格式返回，返回示例如下： { "top":"知廉标五德", "bottom":"报午必三鸣", "banner":"新春", } `; 

对于星火的API来说，使用的时候需要注意以下几点：

拿到了连接的URL，又有了prompt，那么接下来的代码实现逻辑就很清晰了，具体代码如下：

 const resultStr = useRef(""); const [result, setResult] = useState({}); const [loading, setLoading] = useState(false); const send = async () => { setLoading(true); const url = getWebsocketUrl(); const instance = new WebSocket(url); instance.onopen = async () => { const { theme, count } = await form.validateFields(); resultStr.current = ""; const prompt = `你是一个编写春联的专家，下面我将会给你一些要求，你帮我编写一幅春联，需要有美好寓意，要求如下： 主题：${theme} 上下联字数：${count} 以json格式返回，返回示例如下： { "top":"知廉标五德", "bottom":"报午必三鸣", "banner":"新春", } `; const params = { header: { app_id: APPID, uid: "jayliang", }, parameter: { chat: { domain: "generalv3", temperature: 0.5, max_tokens: 1024, }, }, payload: { message: { text: [{ role: "user", content: prompt }], }, }, }; instance.send(JSON.stringify(params)); }; instance.onmessage = (msg) => { const data = JSON.parse(msg.data); const status = data.payload.choices.status; const content = data.payload.choices.text[0].content; resultStr.current += content; if (status === 2) { setResult(JSON.parse(resultStr.current)); setLoading(false); } }; }; 

最后拿到的结果就是一个json，拿到这个json我们就可以很方便的渲染了。渲染的时候可以注意一些细节对于春联来说，文字的排版应该是从上往下的，所以可以加上这一段css：

.contentItem { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; padding: 40px 0; } 

而且横批应该是从右到左读的，所以可以加上一个反转字符串：

result.banner.split("").reverse().join("") 

那现在就来看一下整体的效果吧：

优化字体

对于春联来说，一般会选择具有书法特色的字体，使整体春联更具艺术感和节庆氛围，比如行书、隶书、楷书、草书等等。那么我们就可以引入一些个性化的字体，让我们的春联更加的写实。

我是在这个字体网站下载了一个行书的字体，这里我只是用来个人使用演示，如有侵权，我会马上删除。

下载好之后在css中加入如下代码，就可以使用自定义字体：

@font-face { font-family: "xingshu"; src: url("../../assets/ziti.ttf") format("truetype"); } .container { font-family: "xingshu", sans-serif; } 

下载了行书字体之后，我们的春联的样式就更加好看了～

最后

本文介绍了一种AIGC生成春联的方式，其实大模型的能力远不止这些，你可以调试好prompt让他帮你实现非常多的功能。如果你有别的想法，欢迎在评论区进行交流～看都看到这里了，点点关注点点赞吧～

最后给大家拜个早年，祝大家龙年行大运，身体健康，合家幸福～