在当今时代，大模型无疑是推动各行各业创新发展的关键引擎。如果你也希望借助强大的技术力量赋能项目、实现业务增长，那么这篇博客将是你的绝佳指南。接下来，我会详细介绍如何利用火山引擎的豆包大模型服务达成这些目标，同时分享快速上手并完成大模型调用的实用方法。
做了一个简单的例子，添加了打字机效果和自动滚动的最下面功能，先看效果图：
一、进入官网火山引擎，注册一个自己的账号，并完成实名认证：
二、进入火山方舟管理控制台挑选自己中意的大模型：
开通大模型
点击查看详情，点击推理或模型推理都可以，然后会出现图三界面，按照步骤一步步来就可以，完成STEP 1 获取 API KEY和STEP 2 快速接入测试就可以了。生成的API KEY在图四位置查看。
创建推理接入
方案一-创建自定义推理接入点
先创建推理接入点，然后点击API调用就可以了，这里的model就是接入点的ID，已经自动填好了，$ARK_API_KEY在API Key 管理中找到，如下图，截止到目前为止，准备工作已经完成了，可以开始使用了。
三、项目实践
先看代码，后面会有说明。 项目代码如下：
import React, { useState, useRef, useEffect } from "react";
import axios from "axios";
import { Input, Button } from "antd";
import { SmileOutlined, CommentOutlined } from "@ant-design/icons";
import "./doubao.css";
const { TextArea } = Input;
let currentIndex = 0;
const App = () => {
const [sendValue, setSendValue] = useState("");
const [loading, setLoading] = useState(false);
const scrollE = useRef(null);
const scrollEPosition = useRef(null);
const [chatList, setShatList] = useState([
{
role: "assistant",
content: "您好,我是小小愿望.您有什么问题可以问我,我会尽力解答(*^_^*)",
},
]);
const onChangeFun = (e) => {
setSendValue(e.target.value);
};
useEffect(() => {
// 滚动的最下面
scrollE.current.scrollTo({
top: scrollEPosition.current.offsetTop, // 元素的顶部距离文档顶部的距离
left: 0, // 可选，如果要滚动到元素的左边位置
behavior: "smooth", // 可选，实现平滑滚动效果
});
}, [chatList]);
const sendMessagesFun = () => {
setLoading(true);
let ls = [
...chatList,
{
role: "user",
content: sendValue,
},
];
var data = {
model: "doubao-seed-1-6-thinking-250615",
messages: ls,
};
ls = ls.concat([
{
role: "assistant",
content: "信息接收中......",
},
]);
setShatList(ls);
setSendValue("");
axios({
method: "POST",
url: "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
data: data,
headers: {
"Content-Type": "application/json",
Authorization: "Bearer 你申请的key",
},
responseType: "text",
})
.then((res) => {
let dt = JSON.parse(res.data);
let resMessage = dt.choices[0].message;
ls[ls.length - 1] = {
role: "assistant",
content: "",
};
let content = resMessage.content;
// 添加打字机效果
const interval = setInterval(() => {
if (currentIndex < content.length) {
ls[ls.length - 1].content =
ls[ls.length - 1].content + content.charAt(currentIndex);
currentIndex = currentIndex + 1;
setShatList([...ls]);
} else {
currentIndex = 0;
clearInterval(interval);
}
}, 100);
setLoading(false);
})
.catch((error) => {
setLoading(false);
console.log(error);
});
};
return (
<div className="App">
<div className="chatWrapper" ref={scrollE}>
{chatList.map((item, idx) => {
if (item.role === "assistant") {
return (
<div key={idx} className="assistantWrapper">
<div className="avatarWrapper">
<SmileOutlined />
</div>
<div className="item">
<div className="usertitle">小小愿望</div>
<div className="contentWrapper">
<TextArea
className="contentInfo"
disabled
autoSize={{ minRows: 1, maxRows: 100 }}
value={item.content}
/>
</div>
</div>
</div>
);
} else if (item.role === "user") {
return (
<div key={idx} className="userWrapper">
<div className="avatarWrapper">
<CommentOutlined />
</div>
<div className="itemWrapper item">
<div className="usertitle">用户</div>
<div className="contentWrapperUser">
{
<TextArea
className="contentInfo"
disabled
autoSize={{ minRows: 1, maxRows: 100 }}
value={item.content}
/>
}
</div>
</div>
</div>
);
} else {
return null;
}
})}
<div ref={scrollEPosition}></div>
</div>
<TextArea
placeholder="给 豆包大模型 发消息"
autoSize={{ minRows: 2, maxRows: 2 }}
value={sendValue}
onChange={onChangeFun}
/>
<div className="sendBtn">
<Button type="primary" loading={loading} onClick={sendMessagesFun}>
发送
</Button>
</div>
</div>
);
};
export default App;
css 样式
.App {
padding: 20px;
}
.chatWrapper {
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
height: calc(100vh - 190px);
overflow: auto;
}
.sendBtn {
margin-top: 20px;
text-align: center;
}
.assistantWrapper {
display: flex;
padding-bottom: 10px;
}
.avatarWrapper {
padding: 0 10px;
}
.usertitle {
background: linear-gradient(to bottom right, #ff0000, #ffa500, #4b0082, #ffff00, #008000, #0000ff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.userWrapper {
display: flex;
flex-direction: row-reverse;
padding-bottom: 10px;
}
.itemWrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.item {
flex: 1;
}
.contentWrapper {
margin-top: 8px;
background: #ffd8bf;
padding: 8px;
border-radius: 8px;
}
.contentInfo {
background-color: transparent !important;
border: none !important;
color: #000 !important;
}
.contentWrapperUser {
margin-top: 8px;
background: #ffe7ba;
padding: 8px;
border-radius: 8px;
}
说明：
- Authorization：千万不要忘记
Bearer，正确格式是Bearer 你申请的key；- messages：
string / object[]参考对话(Chat) API；- 页面展示：我采用的是用
TextArea展示内容，这样就避免了格式的问题，如：换行；
