用豆包MarsCode 和CozeAPI接口全自动做一个文生图组件

以下是「 豆包 MarsCode 体验官」优秀文章,作者 July_lly。

前言

在字节跳动的积极推动下,Coze平台的API接口现已对外开放,这一举措与豆包MarsCode 的高效支持相结合,极大地降低了开发门槛,使得单个开发者也能独立承担起大型项目的设计与实施。只要你具备一定的编程基础,就能轻松利用这些工具来实现个人的AI项目构想,极大赋能了个体创新与项目快速迭代的能力。

这里我使用图片来做一个头像生成插件:

先看看输出图:

coze设计

coze的设计其实根据你自己需求来,我们的API接口收到的是它的返回值,因此如果你需要复杂的功能,你完全可以设计复杂来Bot来输出你想要的数据。这里我为了教学随便设计了一个bot,prompt的设计如下:

插件调试一些数据的采集,让Bot只收集文字信息来生成图片。

因为这里我们只需要图片,限制输出就只需要图片url的地址即可,接受添加过多的数据在采集数据时反而更加麻烦。

测试没问题我们直接发布即可,但是一定需要选择Bot as API发布,不然你将调用不到这个接口了。

豆包MarsCode 设计代码结构

为了贯彻我们摸鱼精神,不论多简单的代码我们能不敲就不敲,那么豆包MarsCode就是我们最好的伙伴,它让我们在处理诸如构建HTML结构、发起Axios请求等常规任务时,能够减少手动编码的负担,通过智能化的操作大大提升了开发效率。这样一来,我们能将更多精力集中于创新和解决核心问题上,让编程工作变得更加流畅与高效。

html结构设计

axios请求设计

这里我们需要注意,它给的axios请求报文中的url,还有请求头,请求体需要我们自己来按照文档的要求来配置,豆包MarsCode 本身并不具有文档阅读功能。

javascript 复制代码
// 构建请求体
const body = {
  bot_id: "7391404153693945907",
  user: "123456789",//随便配置这个位置
  query: name.value||'天气宝宝',
  stream: false,//使用非流式
};

// 配置axios请求
const config = {
  method: 'post',
  url: url,
  headers: {
    'Authorization': `Bearer ${ApiKey}`,
    'Content-Type': 'application/json',
    'Connection': 'keep-alive',
    'Accept': '*/*'
  },
  data: body
};

function generate () {
  axios(config)
      .then(res => {
        img.value=JSON.parse(res.data.messages[1].content).data.image_url
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
}

让豆包MarsCode 结合

全部代码

XML 复制代码
<template>
  <div>
    <h1>头像生成</h1>
    <input type="text" v-model="name" placeholder="请输入名称">
    <button @click="generate">生成头像</button>
    <div v-if="img">
  <img :src="img"></img>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from 'axios'

let name = ref('')
const img = ref('')

const ApiKey='Your APIKey'
const url='https://api.coze.cn/open_api/v2/chat'

// 构建请求体
const body = {
  bot_id: "7391404153693945907",
  user: "123456789",
  query: name.value||'天气宝宝',//给一个默认值为天气宝宝
  stream: false,
};

// 配置axios请求
const config = {
  method: 'post',
  url: url,
  headers: {
    'Authorization': `Bearer ${ApiKey}`,
    'Content-Type': 'application/json',
    'Connection': 'keep-alive',
    'Accept': '*/*'
  },
  data: body
};

function generate () {
  axios(config)
      .then(res => {
        img.value=JSON.parse(res.data.messages[1].content).data.image_url
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
}
</script>

<style lang="css" scoped>

</style>

总结

豆包MarsCode会根据你当前的文件代码来生成代码,有时你只需要写好注释,豆包MarsCode会自动将下面的代码完成只需要tab键按下,你的模块就完成这种体验不要太舒服,个人认为与GitHub Copilot Chat可以比较一下,而且它可以在写代码旁边为你实时提示就很舒服了。但是它不能阅读文档,而我们在工作配置接口时需要阅读文档的,所以这里还是可以继续改进一点。

欢迎点赞评论交流。

相关推荐
Lxinccode几秒前
python(42) : 监听本地文件夹上传到服务器指定目录
服务器·开发语言·python·文件上传服务器·监听文件上传服务器
ObjectX前端实验室3 分钟前
从零到一:系统化掌握大模型应用开发【目录】
前端·llm·agent
guoyp212610 分钟前
前端实验(二)模板语法
前端·vue.js
葡萄城技术团队16 分钟前
Excel 转在线协作难题破解:SpreadJS 纯前端表格控件的技术方案与实践
前端·excel
我的xiaodoujiao16 分钟前
Windows系统Web UI自动化测试学习系列3--浏览器驱动下载使用
前端·windows·测试工具·ui
一只小风华~18 分钟前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
泻水置平地19 分钟前
若依前后端分离版实现前端国际化步骤
前端
木头左19 分钟前
Python实现ETF网格自动化交易集成动量阈值判断
开发语言·自动化
Villiam_AY21 分钟前
从后端到react框架
前端·react.js·前端框架
CodeCraft Studio24 分钟前
全球知名的Java Web开发平台Vaadin上线慧都网
java·开发语言·前端·vaadin·java开发框架·java全栈开发·java ui 框架