前言

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

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

注册

关于大模型接口来说，我这边挑选的是国产的讯飞星火大模型。挑选它的原因绝对不是它现在能够收取免费的token，而是我觉得咱们需求支持国产软件自主化（手动狗头），假如你不喜欢用这个也能够运用其他，思路都是一样的。

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

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

收取到了之后就能够对着它的文档来运用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中

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

下面便是我用来生成春联的一个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生成龙年春联

下载了行书字体之后，咱们的春联的款式就愈加好看了～

最终

本文介绍了一种AIGC生成春联的方法，其实大模型的才能远不止这些，你能够调试好prompt让他帮你完成非常多的功能。假如你有其他主意，欢迎在谈论区进行沟通～看都看到这儿了，点点重视点点赞吧～

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