如何前端对接豆包api并在抖音直播间实现互动(1/3):注册豆包apikey

如何前端对接豆包api并在抖音直播间实现互动(1/3):注册豆包apikey

       前段时间,我女朋友公司正忙着抖音直播买红酒的业务,头疼的是,直播间的在线人数一直少得可怜,每次开播都是寥寥无几的观众,愁得唉声叹气。正好那段时间我手头没什么急事,闲着也是闲着,突然蹦出一个想法,能不能做个插件帮她盘活直播间的氛围。

        核心思路就是用前端技术打通几个关键环节:一方面对接豆包的智能对话接口,另一方面嵌入计时器功能,再加上网页元素捕捉的模块。

        我去市面上搜了一圈,发现好像还真没有类似的工具。其实这个插件的技术难度不算高,无非是把前端的页面交互、接口调用和网页抓取这些基础技能整合到一起,但感觉特别有意思,看到插件在直播间里正常运转,那种成就感真的很难得。更重要的是,这个小玩意儿能帮到她,让她不用再为直播间没说话而发愁,这就足够了。

首先我们要先去豆包api的官网,进行相关注册和申请权限。

1.访问官网进行相关注册

火山引擎-你的AI云https://www.volcengine.com/

2.注册完成后点击上面产品找到豆包大模型

3.进入控制台后点击进入apikey管理并创建apikey

此时我们已经完成apikey的创建,但是这时候还不能使用这个秘钥直接调用api接口,调用会说你没权限,因为我们还没有开通豆包接口权限,意味着我们只有钥匙,还没有权限。

4.进入开通管理,我们可以看到这里面有很多豆包的接口服务,还有deepseek的接口(我感觉是代理的)        

5.我们点击第一个Doubao-Seed-1.8,选择后面的开通服务

6.记得选择安心模式,否则后面如果你要是免费额度使用完了会自动扣费。(默认就是安心模式)选择后开启实名认证(这玩意不实名也不可能)

之后会让选择微信或抖音扫脸,这个看个人喜好,都一样的(涉及隐私,这里就不过多展示了)

7.扫脸完成后刷新页面,即可看见开通服务变成了关闭服务,这样就开通完成了。

8.验证调用是否成功

(1)打开postman(postman都有吧,没有去下载一个,地址如下)

Download Postman | Get Started for Freehttps://www.postman.com/downloads/(2)导入以下代码,我都给整理好了别乱改,里面Bearer后面有个空格,空格后面写你刚才申请的apikey,空格后面写你刚才申请的apikey,空格后面写你刚才申请的apikey,重要事情说三遍,别直接复制过去不改调用失败哈。

        (注意:豆包给的示例代码里的model跟你实际申请的不一样,调用会报错,所以用我这个就行,注意的是如果你申请的model不是1.8,那需要去修改成对应的model才可以调用,否则会提示报错。)

curl --location --request POST 'https://ark.cn-beijing.volces.com/api/v3/chat/completions' \ --header 'Content-Type: application/json' \ --header 'Authorization: Bearer 这里写你的apikey' \ --data-raw '{ "model": "doubao-seed-1-8-251228", "messages": [ { "role": "user", "content": "你好" } ] }'

        2.1导入方式:选择左上角的import

        2.2按图中操作步骤进行导入

(3)导入完成后点击body,检查是否导入成功,如果如图所示有东西那就是成功了,然后点击send进行报文发送测试。

注意:postman有时候会出现导入curl后无法修改body内容,可以点击右上方保存报文,然后重启软件就可以了

(4)返回对应的回答就是成功了哈

注意:豆包思考过程稍微有点久,就像网页你问问题之后他思考之后才会回复你,所以会感觉点击send之后像没有收到相应一样,是正常现象,等待10秒左右就会回复,另外问题越难,回复的也越慢。

(5)对于想了解其他功能的开发,也可以在火山引擎api文档查看其他调用模式,这里就不过多介绍了,具体文档地址:对话(Chat) API--火山方舟大模型服务平台-火山引擎https://www.volcengine.com/docs/82379/1494384?lang=zh

9.本章节后记:如何让豆包回答的问题像真人,且不要加那么多修饰语呢?

提问话术:随机生成一个适合直播间互动的问题,表现的像一个正常人首次进入直播间,20字以内,不要说其他的。

注意:提问的话术不要太长,因为豆包的api不是按照次数去扣减的,而是token量,就是你问的越长,他扣减的越多,所以如果是个人开发者,自己不想花钱,就尽量缩短提问,精简回答。

OK,本章到此就结束了,本来想小写一下的,结果操作步骤还是挺多的,下一章我介绍一下如何将豆包写入网页插件,并实现直播间自动提问。

Read more

宇树 G1 机器人开发入门:有线 & 无线连接完整指南

宇树 G1 机器人开发入门:有线 & 无线连接完整指南

适用读者:机器人二次开发者、科研人员 开发环境:Ubuntu 20.04(推荐) 机器人型号:Unitree G1 EDU+ 前言 宇树 G1 是一款面向科研与商业应用的高性能人形机器人,支持丰富的二次开发接口。在正式进行算法调试与功能开发之前,首要任务是建立稳定的开发连接。本文将详细介绍两种主流连接方式:有线(网线直连) 与 无线(WiFi + SSH),并附上完整的配置流程,帮助开发者快速上手。 一、有线连接(推荐新手优先使用) 有线连接通过网线直接将开发电脑与 G1 机器人相连,具有延迟低、稳定性高、不依赖外部网络的优势,是新手入门和底层调试的首选方式。 1.1 前置条件 所需物品说明开发电脑推荐安装 Ubuntu 20.04,或在 Windows 上使用虚拟机宇树 G1 机器人确保已开机且处于正常状态网线(

AI对话应用接口开发全解析:同步接口+SSE流式+智能体+前端对接

AI对话应用接口开发全解析:同步接口+SSE流式+智能体+前端对接

AI对话应用接口开发 我们平时开发的大多数都是同步接口,也就是扥后端处理完再返回。但是对于AI应用,特别是响应时间较长的应用,可能会让用户失去耐心等待,因此推荐使用SSE技术实现实时流式输出,类似打字机效果,大幅度提升用户体验 开发AI对话同步接口 接下来我们先开发AI同步接口,对比学习。首先我们编写一个与"科泰旅游大师"对话的接口,使用常规同步的方式获得对话结果。 在controller包中新建ChatWithAIController,如下图所示: 编写同步接口: @RestController @RequestMapping("/ai") public class ChatWithAIController { // 注入TravelApp实例 @Resource private TravelApp travelApp; /* * 前端可以通过此方法获得一个ID * */ @GetMapping("/chat/new") public String newChat(){ return UUID.randomUUID().toString(); } // 与AI聊天(同

手机检测WebUI截图保存功能:前端JS实现检测结果一键下载PNG方案

手机检测WebUI截图保存功能:前端JS实现检测结果一键下载PNG方案 1. 项目背景与需求 在实际的手机检测应用场景中,用户经常需要将检测结果保存下来用于后续分析、报告或证据保存。基于DAMO-YOLO和TinyNAS技术的实时手机检测系统虽然提供了准确的检测功能,但缺少将检测结果一键保存为图片的便捷功能。 传统的截图方式存在几个痛点: * 需要手动截屏然后裁剪,操作繁琐 * 截图质量可能受损,特别是检测框和文字标签 * 无法保留原始的检测置信度等元数据信息 * 批量处理时效率低下 本文将介绍如何在前端JavaScript中实现检测结果的一键下载功能,让用户可以轻松将带有手机检测框的图片保存为PNG格式。 2. 技术实现方案 2.1 整体架构设计 我们采用纯前端方案实现截图保存功能,主要基于以下技术栈: * HTML5 Canvas:用于将检测结果渲染到画布上 * FileSaver.js:处理文件保存操作 * 原生JavaScript:实现核心逻辑和用户交互 这种方案的优点在于: * 完全在浏览器端完成,不增加服务器负担 * 响应速度快,

【Linux篇章】穿越网络迷雾:揭开 HTTP 应用层协议的终极奥秘!从请求响应到实战编程,从静态网页到动态交互,一文带你全面吃透并征服 HTTP 协议,打造属于你的 Web 通信利刃!

【Linux篇章】穿越网络迷雾:揭开 HTTP 应用层协议的终极奥秘!从请求响应到实战编程,从静态网页到动态交互,一文带你全面吃透并征服 HTTP 协议,打造属于你的 Web 通信利刃!

本篇摘要 本篇将介绍何为HTTP协议,以及它的请求与答复信息的格式(请求行,请求包头,正文等),对一些比较重要的部分来展开讲解,其他不常用的即一概而过,从静态网页到动态网页的过渡,最后底层基于TCP实现简单的HTTP服务器的代码编写构建一个简单的网页(包含对应的跳转,重定向,动态交互等功能),采取边讲解http结构边用代码形成效果展示的形式进行讲解,望有助! 欢迎拜访:点击进入博主主页 本篇主题:探秘HTTP应用层那些事儿! 制作日期:2025.07.21 隶属专栏:点击进入所属Linux专栏 本文将要介绍的内容的大致流程图如下: 一· 认识HTTP * 在互联网世界中, HTTP(HyperText Transfer Protocol, 超文本传输协议) 是一个至关重要的协议。 它定义了客户端(如浏览器) 与服务器之间如何通信, 以交换或传输超文本(如 HTML 文档) 。 * HTTP 协议是客户端与服务器之间通信的基础。 * 客户端通过 HTTP 协议向服务器发送请求, 服务器收到请求后处理并返回响应。 HTTP 协议是一个无连接、