文章目录

⭐前言⭐ 后端接口封装 使用axios调用api 暴露koa接口

⭐ 前端的交互设计 布局设计 页面逻辑

⭐ 效果⭐结束

⭐前言

大家好，我是yma16，本文分享微信小程序——实现对话模式（调用大模型图片生成）。

aigc图片生成 AIGC (Artificial Intelligence Generated Content) 可以生成各种类型的图片，包括风景、动物、人物、抽象等等。生成图片的过程通常是使用预训练的神经网络模型，该模型可以根据输入的文本或图像生成新的图片。

⭐ 后端接口封装

 使用axios调用api

koa封装axios请求

const axios = require('axios')

const axiosInstance = (baseURL, headers) => {

const instance = axios.create({

baseURL: baseURL,

timeout: 20000,

headers: {...headers }

});

return instance

}

const postAction = (baseURL, path, headers, data) => {

const http = axiosInstance(baseURL, headers)

return http.post(path, data)

}

module.exports = {

postAction

}

 暴露koa接口

这里我调用的时掘金的bot-api

const Router = require('koa-router');

const router = new Router();

const { postAction } = require('../../utils/request/index');

const API_KEY = '你的apikey'

const bot_id = '你的bot_id'

// 和bot聊天

router.post('/chat/bot', async(ctx) => {

try {

const bodyParams = ctx.request.body

const { user, query } = bodyParams

console.log('bodyParams', bodyParams)

const headers = {

"Authorization": `Bearer ${API_KEY}`,

"Content-Type": "application/json",

"Host": 'api.coze.cn',

"Connection": "keep-alive"

}

const data = {

"bot_id": bot_id,

"user": user,

"query": query,

}

const baseUrl = "https://api.coze.cn"

const path = '/open_api/v2/chat'

const res = await postAction(baseUrl, path, headers, data)

ctx.body = {

code: res.status,

data: res.data,

msg: res.statusText

};

} catch (r) {

ctx.body = {

code: 0,

msg: r

}

}

});

module.exports = router;

⭐ 前端的交互设计

 布局设计

界面布局设计（一对一的对话模式）

{{item.createTime}}

{{item.question}}

{{currenTime}}

{{layoutConfig.emptyText}}