前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >大模型+图片生成+小程序

大模型+图片生成+小程序

作者头像
yma16
发布2024-04-10 15:24:56
1321
发布2024-04-10 15:24:56
举报
文章被收录于专栏:前端javascript前端javascript

背景

大家好,我是yma16,这篇文章给大家分享大模型+图片生成的功能,完全免费。由于前两天我参加了掘金coze的一个线下活动,获得了一个内部调用api的机会,于是我就接入了小程序

💖 实现的效果

小程序地址,点击图片跳转

提示词:宫崎骏风格的天空

提示词:画一只老虎

提示词:一个写代码的女孩

💖 实现的逻辑

在coze编排一个作画的工作流

工作流配置

发布勾选api

💖 node_koa 接入api

封装axios

代码语言:javascript
复制
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 请求对话

代码语言:javascript
复制
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;

💖 小程序对话实现

布局采用一对一的对话框模式

代码语言:javascript
复制
<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效果不太理想,哈哈哈。

感受:参加线下活动开阔了自己的视野,同时也发现自己的一些不足点,在时间管理上不充分和思考问题的局限性很难有比较大的创新性点子,加入后续有活动的话有时间还是会去参与,运气好会遇到志同道合的朋友

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2024-04-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 数据结构框架学习 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ⭐ 背景
    • 💖 实现的效果
      • 💖 实现的逻辑
        • 💖 node_koa 接入api
          • 💖 小程序对话实现
          • ⭐ 参加线下活动的心得
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档