目录
前言
现在是2024年1月24日农历癸卯年腊月十四,距离甲辰龙年春节还有17天,年关愈近、年味愈浓,今年让我们使用AI
+GoLang
+Vue
来实现春联的生成。
无论2023年经历了什么、发生了什么,往事成风,向前看,别回头。
技术栈
- Go:接口的编写以Go作为后端开发语言,GoLang相对于Java来说,它提供了高效的并发模型和简洁的语法,适合作为Java开发者的第二语言。
- Vue.js: 一个流行的JavaScript框架,用于构建用户所看到的界面。
- HTTP :使用Go的内置
net/http
包来处理HTTP请求和构建HTTP服务器,简化了与前端的通信。 - JSON: 通过Go内置的
encoding/json
包实现JSON数据的序列化和反序列化,便于与前端进行数据交互。 - 编码工具: Visual Studio Code
实现思路
近年来,随着自然语言处理(NLP)领域的迅速发展,越来越多基于NLP的产品应运而生。这些产品为用户和开发者提供了低成本、高效快速的体验,展示了人工智能的卓越魅力,为生活带来了极大的便利。本文以调用百度智能云的语言大模型生成春联为例,通过将生成的春联以JSON的形式返回给前端,使前端能够灵活展示横批、上联和下联的内容。这个过程为读者提供了一个深入了解如何利用NLP技术为应用开发增加趣味和智能化的窗口,更重要的是给伏案编码的大家带来一些年味,感受中国传统节日的魅力。
百度智能云申请
本案例使用的大模型为:
0.0012元/千tokes,亲测,每个回答约使用50tokens。
接口文档:
在线调用:
ERNIE-Bot模型使用:
后端实现
以下是基于Go语言调用千帆大模型的代码案例:
go
package main
import (
"encoding/json"
"fmt"
"io"
"io/ioutil"
"net/http"
"strings"
"time"
)
// BaiduAIChatClient 实现了 AIChatClient 接口,与百度 AI 对话服务交互
type BaiduAIChatClient struct {
AccessToken string
}
// ChatCompletionResponse 定义 Chat Completion 的返回体结构
type ChatCompletionResponse struct {
ID string `json:"id"`
Object string `json:"object"`
Created int64 `json:"created"`
Result string `json:"result"`
IsTruncated bool `json:"is_truncated"`
NeedClearHistory bool `json:"need_clear_history"`
FinishReason string `json:"finish_reason"`
Usage struct {
PromptTokens int `json:"prompt_tokens"`
CompletionTokens int `json:"completion_tokens"`
TotalTokens int `json:"total_tokens"`
} `json:"usage"`
}
// NewBaiduAIChatClient 创建一个 BaiduAIChatClient 实例
func NewBaiduAIChatClient(accessToken string) *BaiduAIChatClient {
return &BaiduAIChatClient{
AccessToken: accessToken,
}
}
// GetChatCompletion 实现了 AIChatClient 接口的方法,获取 AI 对话完成结果
func (c *BaiduAIChatClient) GetChatCompletion(prompt string) (string, error) {
url := fmt.Sprintf("https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=%s", c.AccessToken)
payload := strings.NewReader(fmt.Sprintf(`{"messages":[{"role":"user","content":"%s"}],"disable_search":false,"enable_citation":false}`, prompt))
client := &http.Client{}
req, err := http.NewRequest("POST", url, payload)
if err != nil {
return "", err
}
req.Header.Add("Content-Type", "application/json")
res, err := client.Do(req)
if err != nil {
return "", err
}
defer func(Body io.ReadCloser) {
err := Body.Close()
if err != nil {
}
}(res.Body)
body, err := ioutil.ReadAll(res.Body)
if err != nil {
return "", err
}
// 解析 JSON 数据到 ChatCompletionResponse 结构体
var response ChatCompletionResponse
if err := json.Unmarshal(body, &response); err != nil {
return "", err
}
// 返回解析后的结果
return response.Result, nil
}
// handleRequest 处理前端请求的处理器函数
func handleRequest(w http.ResponseWriter, _ *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
// 创建 BaiduAIChatClient 实例
baiduClient := NewBaiduAIChatClient("your_token")
// 调用 GetChatCompletion 方法获取对话完成结果
prompt := "生成新年对联"
result, err := baiduClient.GetChatCompletion(prompt)
if err != nil {
http.Error(w, "Error fetching result", http.StatusInternalServerError)
return
}
// 创建一个 JSON 结构体
response := struct {
Message string `json:"message"`
Result string `json:"result"`
RequestTime time.Time `json:"requestTime"`
Status int `json:"status"`
}{
Message: "Hello from the server!",
Result: result,
RequestTime: time.Now(),
Status: http.StatusOK,
}
// 将数据编码为 JSON 格式
responseJSON, err := json.Marshal(response)
if err != nil {
http.Error(w, "Error encoding JSON", http.StatusInternalServerError)
return
}
// 设置响应头
w.Header().Set("Content-Type", "application/json")
// 发送JSON响应给前端
w.Write(responseJSON)
}
func main() {
// 注册处理器函数
http.HandleFunc("/api", handleRequest)
// 启动HTTP服务器,监听端口8081
err := http.ListenAndServe(":8081", nil)
if err != nil {
fmt.Println("Error starting the server:", err)
}
}
前端实现
前端使用Vue渲染页面。
本人一直从事Java后端接口开发工作,对前端并不了解,因此使用网络案例实现对联展示。
前端素材案例:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新年祝福</title>
<style>
* {
margin: 0px auto;
padding: 0px;
font-family: '隶书';
font-size: 2rem;
border-radius: 12px;
}
.info {
width: 100%;
}
.top {
width: 20%;
background-color: red;
text-align: center;
background-size: 95px 100%;
background-repeat: repeat-x;
}
span {
margin-left: 15px;
margin-right: 15px;
}
.content {
width: 35%;
}
.left {
text-align: center;
float: left;
}
.right {
text-align: center;
float: right;
}
.left,
.right {
width: 15%;
height: 70%;
background-color: red;
background-size: 100%;
background-repeat: repeat-y;
line-height: 100px;
}
.inText {
text-align: center;
width: 100%;
}
input {
width: 32%;
}
</style>
</head>
<body>
<div id="app">
<div class="info">
<div class="top">
<span>{{topText}}</span>
</div>
<div class="content">
<div class="left">{{leftText}}</div>
<div class="right">{{rightText}}</div>
</div>
</div>
<div style="clear: both;"></div>
<hr />
<div class="inText">
<p>
<input type="text" v-model="leftText" placeholder="请输入上联七个字" />
<input type="text" v-model="rightText" placeholder="请输入下联七个字" id="right" />
</p>
<button @click="generateCouplet">生成新春联</button>
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
leftText: "",
rightText: "",
topText: "恭 喜 发 财"
},
methods: {
// 生成新的春联
generateCouplet() {
// 请将下面的URL替换为实际的后端接口URL
const apiUrl = "http://localhost:8081/api"; // 请根据实际情况修改接口地址
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// 解析后端返回的数据
const result = data.result;
const lines = result.split('\n');
// 更新数据
this.topText = lines[2].split(':')[1].trim(); // 获取上联信息
this.leftText = lines[0].split(':')[1].trim(); // 获取下联信息
this.rightText = lines[1].split(':')[1].trim(); // 获取横批信息
})
.catch(error => console.error("Error fetching data:", error));
}
},
mounted() {
// 页面加载时默认获取一次春联数据
this.generateCouplet();
}
});
</script>
</body>
</html>
如何运行
后端接口
编写好go语言文件代码后,在控制台执行命令:
go run xxxx.go
如:
此时后端接口已启动,使用API测试:
前端页面
使用chrome浏览器打开即可。