前言

公众号:【可乐前端】,期待关注交换,分享一些有意思的前端常识

工夫过得好快,一眨眼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来说,应用的时候须要留神以下几点:

  • 回复是分段的,咱们须要把后果拼起来
  • status2时示意最初一段
  • 回复完之后会断开连接

拿到了连贯的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让他帮你实现十分多的性能。如果你有别的想法,欢送在评论区进行交换~看都看到这里了,点点关注点点赞吧~

最初给大家拜个早年,祝大家龙年行大运,身体健康,合家幸福~