大家好,我是yma16,这篇文章给大家分享大模型+图片生成的功能,完全免费。由于前两天我参加了掘金coze的一个线下活动,获得了一个内部调用api的机会,于是我就接入了小程序。
小程序地址,点击图片跳转
提示词:宫崎骏风格的天空
提示词:画一只老虎
提示词:一个写代码的女孩
在coze编排一个作画的工作流
工作流配置
发布勾选api
封装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
}
bot 请求对话
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;
布局采用一对一的对话框模式
<view class="container-box">
<view class="chat-container" id="chat-container-id" style="width: 100%;">
<scroll-view scroll-y="true" class="scroll-answer" scroll-with-animation bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" wx:if="{{ chatObjConfig.option&&chatObjConfig.option.length>0 }}">
<view wx:for="{{ chatObjConfig.option }}" wx:for-index="index" wx:for-item="item" wx:key="index" id="chat-mode{{index}}">
<view class="create-time">
{{item.createTime}}
</view>
<view class="form-request">
<view wx:if="{{!item.isEdit}}" class='questioned'>
<view style="display: flex;text-align: right;flex-direction:row-reverse;">
<view class="questioned-box-container">
<view class='questioned-box' style="text-align: left;">
{{item.question}}
</view>
<view class='questioned-box-poly'>
</view>
<view style="text-align: right;line-height: 50px;display: flex;max-height: 50px;">
<view class='form-request-user'>
<!-- {{currentUserInfo.nickName}} -->
<image class="user-image" src="{{currentUserInfo.avatarUrl}}"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="form-response" wx:if="{{!item.isEdit}}">
<view style="display: flex;">
<view style="line-height: 50px;">
<view class='form-response-user'>
<image class="ai-image" src="{{aiConfig.avatarUrl}}"></image>
<!-- {{aiConfig.nickName}} -->
</view>
</view>
<view class="form-response-box-poly">
</view>
<view class='form-response-box' style="overflow: auto;">
<towxml wx:key="index" nodes="{{item.answerMarkdown}}" style="position: relative;background: transparent;user-select: text;" />
</view>
</view>
<view style="display: flex;width: 100%;box-sizing: border-box;" wx:if="{{layoutConfig.isShowCopyBtn}}">
<view style="width: 70%;">
</view>
<view style="width: 30%;text-align: center;">
<button class="copy-btn" size="mini" bindtap="copyBtn" data-response=" {{item.answer}}">{{layoutConfig.copyText}}</button>
</view>
</view>
</view>
</view>
<view class="form-submit" wx:if="{{mode==='openAiUse'}}" style="width: 100%;">
</view>
</scroll-view>
<view wx:else class="scroll-answer">
<view class="create-time">
{{currenTime}}
</view>
<view style="display: flex;">
<view style="line-height: 50px;">
<view class='form-response-user'>
<image class="ai-image" src="{{aiConfig.avatarUrl}}"></image>
<!-- {{aiConfig.nickName}} -->
</view>
</view>
<view class="form-response-box-poly">
</view>
<view class="form-response-box" style="padding: 0 10px;">
{{layoutConfig.emptyText}}
</view>
</view>
</view>
<view class="bottom-box">
<view class='submit-input'>
<textarea class='send-input' bindinput="bindKeyInput" placeholder="{{layoutConfig.searchText}}" bindconfirm="search" value="{{searchOpenAiText}}" disabled="{{isLoading||isTruth}}" />
</view>
<view class='send-btn' type="primary" bindtap="search" loading="{{isLoading}}">{{layoutConfig.sendText}}</view>
</view>
</view>
</view>
实现js逻辑关键在于请求之后把消息加入消息列表中,再定位到该位置
当时参与线下活动的场景,由于临时组队,我们队里都是三个开发:
一个后端的妹子和一个全栈的老哥和我一个前端,时间仓促做出来的bot效果不太理想,哈哈哈。
感受:参加线下活动开阔了自己的视野,同时也发现自己的一些不足点,在时间管理上不充分和思考问题的局限性很难有比较大的创新性点子,加入后续有活动的话有时间还是会去参与,运气好会遇到志同道合的朋友