前言
公众号:【可乐前端】,期待关注交换,分享一些有意思的前端常识
工夫过得好快,一眨眼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
来说,应用的时候须要留神以下几点:
- 回复是分段的,咱们须要把后果拼起来
status
为2
时示意最初一段- 回复完之后会断开连接
拿到了连贯的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
让他帮你实现十分多的性能。如果你有别的想法,欢送在评论区进行交换~看都看到这里了,点点关注点点赞吧~
最初给大家拜个早年,祝大家龙年行大运,身体健康,合家幸福~