vue编写本地ollama支持插件工具调用、多智能体、语音通话功能的ai聊天助手代码
代码语言：html
所属分类：其他
代码描述：vue编写本地ollama支持插件工具调用、多智能体、语音通话功能的ai聊天助手代码，支持代码高亮和流式输出打字动画、支持代码复制、支持语音朗读、支持语音识别、支持语音唤醒通话、支持选择本地模型和参数设置，支持工具插件本地调用，支持pdf、word、excel、ppt等文件拖拽加入问答对话。
代码标签： vue 编写 本地 ollama 支持 插件 工具 调用 智能体 语音 通话 功能 ai 聊天 助手
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet"
href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chinese_lunar_calendar.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highlight.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.9.9.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.umd.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/localforage.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xlsx.full.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pdf.2.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mammoth.browser.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jszip.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pptxgen.bundle.js"></script>
<style>
body {
padding: 0;
margin: 0;
transition: background-color 0.3s ease;
}
.filebox img {
height: 60px;
width: auto;
}
.filebox p {
margin: 0 !important;
padding: 0 !important;
}
.filebox .fname {
font-size: 12px;
color: grey;
}
.cont {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.historylist {
flex: 1;
overflow-y: scroll;
}
.historylist img {
max-width: 100px;
}
.mesay,
.aisay {
padding: 10px;
margin: 10px;
border-radius: 5px;
line-height: 30px;
}
.mesay {
background-color: #d0e7ff;
text-align: right;
}
.aisay {
background-color: aliceblue;
text-align: left;
}
.inputpannel {
display: flex;
margin: 10px;
background: white;
align-items: flex-end;
border: 2px solid grey;
border-radius: 14px;
}
.footer {
position: relative;
}
.inputpannel:focus-within {
border-color: blue;
}
.inputtext {
margin-top: 4px;
width: 100%;
background: white;
line-height: 20px;
box-sizing: border-box;
padding: 8px;
font-family: inherit;
font-size: 16px;
resize: none;
overflow: hidden;
border: none;
outline: none;
height: 40px;
min-height: 40px;
overflow-y: auto;
max-height: calc(24px * 5);
}
.inputtext:focus {
border: none;
outline: none;
}
textarea::placeholder {}
.historylist pre {
white-space: pre-wrap;
color: #ececec;
background: black;
border-radius: 4px;
padding: 10px;
margin: 0;
}
.historylist p {
margin: 0;
padding: 2px;
}
.typing-text {
font-size: 24px;
white-space: pre-wrap;
border-right: 2px solid black;
animation: blink 0.7s steps(2, start) infinite;
}
@keyframes blink {
to {
border-color: transparent;
}
}
.code-header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
color: #cdcdcd;
height: 24px;
background: #6767;
}
.language-label {
position: absolute;
top: -4px;
left: 0;
padding: 0 10px;
font-size: 0.8em;
}
.copy-button {
position: absolute;
top: 0;
right: 0px;
padding: 0.3em 0.6em;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.8em;
}
.code-content {
line-height: 20px;
display: block;
text-wrap: nowrap;
margin-top: -40px;
margin-bottom: -63px;
overflow-x: scroll;
}
.historylist pre {
position: relative;
background: black;
color: white;
border-radius: 6px;
padding: 1em;
margin: 1em 0;
}
.file-upload {
position: relative;
width: 30px;
height: 30px;
margin: 6px -1px 3px 10px;
overflow: hidden;
}
.sendbtn {
margin: 13px;
}
.file-upload input[type=file] {
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
ol {
list-style: none;
padding: 0;
margin: 10px;
}
i {
cursor: pointer;
}
.recomminput li {
background: aliceblue;
border: 1px solid aliceblue;
margin: 2px 0 4px 0;
padding: 5px;
width: 64%;
font-size: 12px;
cursor: pointer;
border-radius: 5px;
}
.copybtn,
.regenbtn {
cursor: pointer;
margin-right: 20px;
}
.scrollbar {
position: absolute;
top: -20px;
width: 100%;
right: 0;
left: 0;
}
.scrollbar i {
width: 30px;
height: 30px;
border-radius: 15px;
background: white;
line-height: 30px;
}
.attachpannel {
position: absolute;
border-radius: 20px;
display: flex;
width: 100%;
height: 100px;
left: 0;
top: -80px;
}
/* 隐藏默认滚动条 */
textarea::-webkit-scrollbar {
display: none;
}
/* 添加自定义滚动条 */
textarea {
scrollbar-width: thin;
/* 调整滚动条宽度 */
scrollbar-color: #ccc transparent;
/* 调整滚动条颜色 */
overflow-y: auto;
/* 确保溢出时出现滚动条 */
}
/* Firefox 上的滚动条样式 */
textarea {
scrollbar-width: thin;
}
/* WebKit 上的滚动条样式 */
textarea::-webkit-scrollbar {
width: 8px;
/* 调整滚动条宽度 */
}
textarea::-webkit-scrollbar-track {
background-color: transparent;
/* 滚动条背景颜色 */
}
textarea::-webkit-scrollbar-thumb {
background-color: #ccc;
/* 滚动条颜色 */
border-radius: 4px;
/* 滚动条圆角 */
}
textarea::-webkit-scrollbar-thumb:hover {
background-color: #999;
/* 鼠标悬停时的滚动条颜色 */
}
/* 隐藏默认滚动条 */
.historylist::-webkit-scrollbar {
display: none;
}
/* 添加自定义滚动条 */
.historylist {
scrollbar-width: thin;
/* 调整滚动条宽度 */
scrollbar-color: #ccc transparent;
/* 调整滚动条颜色 */
overflow-y: auto;
/* 确保溢出时出现滚动条 */
}
/* Firefox 上的滚动条样式 */
.historylist {
scrollbar-width: thin;
}
/* WebKit 上的滚动条样式 */
.historylist::-webkit-scrollbar {
width: 8px;
/* 调整滚动条宽度 */
}
.historylist::-webkit-scrollbar-track {
background-color: transparent;
/* 滚动条背景颜色 */
}
.historylist::-webkit-scrollbar-thumb {
background-color: #ccc;
/* 滚动条颜色 */
border-radius: 4px;
/* 滚动条圆角 */
}
.historylist::-webkit-scrollbar-thumb:hover {
background-color: #999;
/* 鼠标悬停时的滚动条颜色 */
}
/* 隐藏默认滚动条 */
.code-content::-webkit-scrollbar {
display: none;
}
/* 添加自定义滚动条 */
.code-content {
scrollbar-width: thin;
/* 调整滚动条宽度 */
scrollbar-color: #ccc transparent;
/* 调整滚动条颜色 */
overflow-y: auto;
/* 确保溢出时出现滚动条 */
}
/* Firefox 上的滚动条样式 */
.code-content {
scrollbar-width: thin;
}
/* WebKit 上的滚动条样式 */
.code-content::-webkit-scrollbar {
width: 8px;
/* 调整滚动条宽度 */
}
.code-content::-webkit-scrollbar-track {
background-color: transparent;
/* 滚动条背景颜色 */
}
.code-content::-webkit-scrollbar-thumb {
background-color: #ccc;
/* 滚动条颜色 */
border-radius: 4px;
/* 滚动条圆角 */
}
.code-content::-webkit-scrollbar-thumb:hover {
background-color: #999;
/* 鼠标悬停时的滚动条颜色 */
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
justify-content: center;
align-items: center;
}
#overlay img {
max-width: 100%;
max-height: 100%;
}
#closeBtn {
position: absolute;
top: 10px;
right: 10px;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 16px;
}
.feedbackpanel {
font-size: 12px;
}
#chatlist {
width: 200px;
padding: 10px;
height: 90vh;
overflow-y: scroll;
background: aliceblue;
}
#setting {
width: 300px;
height: 90vh;
background: white;
padding: 4px;
overflow-y: scroll;
}
.bodycont {
display: flex;
flex-direction: row;
}
#bodychat {
flex: 1;
}
#voicechat {
flex: 1;
text-align: center;
vertical-align: middle;
margin-top: 100px;
}
.del {
display: none;
margin-top: 5px;
margin-right: 7px;
}
.agentname {
font-weight: bold;
font-size: 14px;
margin-right: 4px;
}
.hischatitem .messagetext {
width: 84px;
flex: 1;
}
.hischatitem {
overflow: hidden;
margin: 5px;
display: flex;
border-radius: 5px;
cursor: pointer;
height: 26px;
font-size: 12px;
display: flex;
padding: 2px 4px;
line-height: 26px;
color: grey;
}
.hischatitem:hover .del {
display: block;
}
.nowchatitem {
background: #d0e7ff;
}
.hischatitem:hover {
background: #d0e7ff;
}
/* Range styling */
input[type="range"] {
-webkit-appearance: none;
/* 移除默认样式 */
width: 100%;
height: 10px;
background: #ddd;
outline.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0