|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
<meta name="description" content="Fastllm Web Interface" /> |
|
|
|
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<title>Fastllm Web Interface</title> |
|
|
<style> |
|
|
* { |
|
|
box-sizing: border-box; |
|
|
font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto, Helvetica,Arial, sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #edeff2; |
|
|
} |
|
|
|
|
|
.chat_window { |
|
|
position: absolute; |
|
|
width: calc(100% - 6px); |
|
|
max-width: 1100px; |
|
|
height: calc(100% - 6px); |
|
|
max-height: 888px; |
|
|
border-radius: 8px; |
|
|
background-color: #fff; |
|
|
left: 50%; |
|
|
top: 50%; |
|
|
overflow: hidden; |
|
|
transform: translate(-50%, -50%); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.top_menu { |
|
|
background-color: #f6f6f6; |
|
|
width: 100%; |
|
|
height: 50px; |
|
|
padding: 12px 0; |
|
|
} |
|
|
|
|
|
.top_menu .buttons { |
|
|
margin: 5px 0 0 20px; |
|
|
position: absolute; |
|
|
font-size: 0; |
|
|
} |
|
|
|
|
|
.top_menu .buttons .button { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin-right: 10px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.top_menu .buttons .button.close { |
|
|
background-color: #e15b64; |
|
|
} |
|
|
|
|
|
.top_menu .buttons .button.minimize { |
|
|
background-color: #f8b26a; |
|
|
} |
|
|
|
|
|
.top_menu .buttons .button.maximize { |
|
|
background-color: #99c959; |
|
|
} |
|
|
|
|
|
.top_menu .title { |
|
|
text-align: center; |
|
|
color: #909090; |
|
|
font-size: 20px; |
|
|
line-height: 26px; |
|
|
} |
|
|
|
|
|
.messages { |
|
|
position: relative; |
|
|
height: calc(100% - 117px); |
|
|
overflow-x: hidden; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.messages::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
} |
|
|
|
|
|
.messages::-webkit-scrollbar-track { |
|
|
background-clip: padding-box; |
|
|
background: transparent; |
|
|
border: solid transparent; |
|
|
border-width: 1px; |
|
|
} |
|
|
|
|
|
.messages::-webkit-scrollbar-corner { |
|
|
background-color: transparent; |
|
|
} |
|
|
|
|
|
.messages::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(0, 0, 0, 0.1); |
|
|
background-clip: padding-box; |
|
|
border: solid transparent; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.messages::-webkit-scrollbar-thumb:hover { |
|
|
background-color: rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
.messages .message { |
|
|
clear: both; |
|
|
overflow: hidden; |
|
|
margin-bottom: 20px; |
|
|
transition: all 0.5s linear; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.messages .message.left .avatar { |
|
|
background-color: #f5886e; |
|
|
float: left; |
|
|
} |
|
|
|
|
|
.messages .message.left .text { |
|
|
color: #c48843; |
|
|
} |
|
|
|
|
|
.messages .message.right .avatar { |
|
|
background-color: #fdbf68; |
|
|
float: right; |
|
|
} |
|
|
|
|
|
.messages .message.right .text { |
|
|
color: #45829b; |
|
|
} |
|
|
|
|
|
.messages .message.appeared { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.messages .message .avatar { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.messages { |
|
|
font-size: 16px; |
|
|
color: #343541; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
#chatlog { |
|
|
word-wrap: break-word; |
|
|
text-align: start; |
|
|
} |
|
|
|
|
|
#chatlog>div { |
|
|
padding: 18px 25px; |
|
|
} |
|
|
|
|
|
#chatlog .request { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
#chatlog .response { |
|
|
background: #f7f7f8; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.response .markdown-body { |
|
|
background: #f7f7f8 !important; |
|
|
} |
|
|
|
|
|
#chatlog .markdown-body>pre { |
|
|
overflow-x: auto; |
|
|
padding: 10px; |
|
|
position: relative; |
|
|
background: rgba(180, 180, 180, 0.1); |
|
|
} |
|
|
|
|
|
#chatlog .markdown-body>pre::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
} |
|
|
|
|
|
#chatlog .response>pre::-webkit-scrollbar-track { |
|
|
background-clip: padding-box; |
|
|
background: transparent; |
|
|
border: solid transparent; |
|
|
border-width: 1px; |
|
|
} |
|
|
|
|
|
#chatlog .response>pre::-webkit-scrollbar-corner { |
|
|
background-color: transparent; |
|
|
} |
|
|
|
|
|
#chatlog .response>pre::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(0, 0, 0, 0.1); |
|
|
background-clip: padding-box; |
|
|
border: solid transparent; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
#chatlog .response>pre::-webkit-scrollbar-thumb:hover { |
|
|
background-color: rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
.m-mdic-copy-wrapper { |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
right: 16px; |
|
|
} |
|
|
|
|
|
.m-mdic-copy-wrapper span.u-mdic-copy-code_lang { |
|
|
position: absolute; |
|
|
top: 3px; |
|
|
right: calc(100% + 4px); |
|
|
font-family: system-ui; |
|
|
font-size: 12px; |
|
|
line-height: 18px; |
|
|
color: #555; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.m-mdic-copy-wrapper div.u-mdic-copy-notify { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
padding: 3px 6px; |
|
|
border: 0; |
|
|
border-radius: 3px; |
|
|
background: none; |
|
|
font-family: system-ui; |
|
|
font-size: 12px; |
|
|
line-height: 18px; |
|
|
color: #555; |
|
|
opacity: 0.3; |
|
|
outline: none; |
|
|
opacity: 1; |
|
|
right: 100%; |
|
|
padding-right: 4px; |
|
|
} |
|
|
|
|
|
.m-mdic-copy-wrapper button.u-mdic-copy-btn { |
|
|
position: relative; |
|
|
top: 0; |
|
|
right: 0; |
|
|
padding: 3px 6px; |
|
|
border: 0; |
|
|
border-radius: 3px; |
|
|
background: none; |
|
|
font-family: system-ui; |
|
|
font-size: 12px; |
|
|
line-height: 18px; |
|
|
color: #555; |
|
|
opacity: 0.3; |
|
|
outline: none; |
|
|
cursor: pointer; |
|
|
transition: opacity 0.2s; |
|
|
} |
|
|
|
|
|
.m-mdic-copy-wrapper button.u-mdic-copy-btn:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
#stopChat { |
|
|
display: none; |
|
|
margin: 0 auto; |
|
|
margin-top: 3px; |
|
|
width: 80px; |
|
|
height: 32px; |
|
|
text-align: center; |
|
|
line-height: 32px; |
|
|
color: white; |
|
|
background: #f8b26a; |
|
|
cursor: pointer; |
|
|
border-radius: 3px; |
|
|
position: sticky; |
|
|
bottom: 2px; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
#stopChat>svg { |
|
|
margin-right: 8px; |
|
|
} |
|
|
|
|
|
#stopChat:hover { |
|
|
background: #f0aa60; |
|
|
} |
|
|
|
|
|
.bottom_wrapper { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
padding: 10px 10px; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
} |
|
|
|
|
|
.bottom_wrapper .message_input_wrapper { |
|
|
border: none; |
|
|
width: calc(100% - 143px); |
|
|
position: relative; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.bottom_wrapper .message_input_wrapper .message_input_text { |
|
|
border-radius: 4px; |
|
|
border: none; |
|
|
outline: none; |
|
|
resize: none; |
|
|
background: #eff1f1; |
|
|
color: #24292f; |
|
|
height: 47px; |
|
|
font-size: 16px; |
|
|
max-height: 200px; |
|
|
padding: 13px 0 13px 16px; |
|
|
width: 100%; |
|
|
display: block; |
|
|
transition: background 0.3s; |
|
|
} |
|
|
|
|
|
.bottom_wrapper .message_input_wrapper .message_input_text:focus { |
|
|
background: #e7e9eb; |
|
|
} |
|
|
|
|
|
.bottom_wrapper .message_input_wrapper .message_input_text::-webkit-scrollbar { |
|
|
display: none; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
#sendbutton { |
|
|
width: 80px; |
|
|
height: 47px; |
|
|
font-size: 18px; |
|
|
font-weight: bold; |
|
|
border-radius: 3px; |
|
|
background-color: #b8da8b; |
|
|
border: none; |
|
|
padding: 0; |
|
|
color: #fff; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s linear; |
|
|
text-align: center; |
|
|
float: right; |
|
|
position: absolute; |
|
|
right: 65px; |
|
|
bottom: 10px; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.activeSendBtn { |
|
|
background-color: #99c959 !important; |
|
|
cursor: pointer !important; |
|
|
} |
|
|
|
|
|
.activeSendBtn:hover { |
|
|
background-color: #90c050 !important; |
|
|
} |
|
|
|
|
|
#clearConv { |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
bottom: 10px; |
|
|
width: 47px; |
|
|
height: 47px; |
|
|
font-size: 16px; |
|
|
display: inline-block; |
|
|
border-radius: 3px; |
|
|
background-color: #909090; |
|
|
border: 2px solid #909090; |
|
|
color: #fff; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s linear; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
#clearConv:hover { |
|
|
background-color: gray; |
|
|
border: 2px solid gray; |
|
|
} |
|
|
|
|
|
.loaded>span { |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.loaded>svg { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
background: #e7e7e8 !important; |
|
|
} |
|
|
|
|
|
.loading>span { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.loading>svg { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.switch-slide { |
|
|
display: inline-block; |
|
|
vertical-align: middle; |
|
|
} |
|
|
|
|
|
.switch-slide-label { |
|
|
display: block; |
|
|
width: 38px; |
|
|
height: 18px; |
|
|
background: #909090; |
|
|
border-radius: 30px; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
-webkit-transition: 0.3s ease; |
|
|
transition: 0.3s ease; |
|
|
} |
|
|
|
|
|
.switch-slide-label:after { |
|
|
content: ""; |
|
|
display: block; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 100%; |
|
|
background: #fff; |
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .1); |
|
|
position: absolute; |
|
|
left: 1px; |
|
|
top: 1px; |
|
|
-webkit-transform: translateZ(0); |
|
|
transform: translateZ(0); |
|
|
-webkit-transition: 0.3s ease; |
|
|
transition: 0.3s ease; |
|
|
} |
|
|
|
|
|
.switch-slide input:checked+label { |
|
|
background: #99c959; |
|
|
transition: 0.3s ease; |
|
|
} |
|
|
|
|
|
.switch-slide input:checked+label:after { |
|
|
left: 21px; |
|
|
} |
|
|
|
|
|
#setting { |
|
|
position: absolute; |
|
|
right: 15px; |
|
|
top: 5px; |
|
|
cursor: pointer; |
|
|
padding: 5px; |
|
|
border: none; |
|
|
background-color: transparent; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
#setting:hover { |
|
|
background: #e7e7e8; |
|
|
} |
|
|
|
|
|
.showSetting { |
|
|
background: #b0b0b0 !important; |
|
|
} |
|
|
|
|
|
#setDialog { |
|
|
color: #303030; |
|
|
position: absolute; |
|
|
z-index: 2; |
|
|
background: #f4f4f4; |
|
|
width: 320px; |
|
|
right: 6px; |
|
|
top: 46px; |
|
|
-webkit-user-select: none; |
|
|
user-select: none; |
|
|
border-radius: 5px; |
|
|
padding: 8px 12px 8px 12px; |
|
|
} |
|
|
|
|
|
#setDialog>div { |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
#setDialog input { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
#setDialog .inlineTitle { |
|
|
display: inline-block; |
|
|
line-height: 16px; |
|
|
vertical-align: middle; |
|
|
} |
|
|
|
|
|
#speechOption { |
|
|
margin-top: 6px; |
|
|
} |
|
|
|
|
|
#speechOption>div { |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.inputTextClass { |
|
|
outline: none; |
|
|
border-radius: 2px; |
|
|
margin-top: 2px; |
|
|
height: 32px; |
|
|
font-size: 15px; |
|
|
padding-left: 6px; |
|
|
background: white; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.areaTextClass { |
|
|
width: 100%; |
|
|
height: 80px; |
|
|
display: block; |
|
|
resize: none; |
|
|
padding: 6px; |
|
|
} |
|
|
|
|
|
input[type="range"] { |
|
|
-webkit-appearance: none; |
|
|
display: block; |
|
|
margin: 6px 0 3px 0; |
|
|
height: 8px; |
|
|
background: #909090; |
|
|
border-radius: 5px; |
|
|
background-image: linear-gradient(#99c959, #99c959); |
|
|
background-size: 100% 100%; |
|
|
background-repeat: no-repeat; |
|
|
} |
|
|
|
|
|
input[type="range"]::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
height: 15px; |
|
|
width: 15px; |
|
|
border-radius: 50%; |
|
|
background: #99c959; |
|
|
cursor: ew-resize; |
|
|
box-shadow: 0 0 2px 0 #555; |
|
|
} |
|
|
|
|
|
input[type=range]::-webkit-slider-runnable-track { |
|
|
-webkit-appearance: none; |
|
|
box-shadow: none; |
|
|
border: none; |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.justSetLine { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.presetSelect>div { |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.presetSelect select { |
|
|
outline: none; |
|
|
border-radius: 3px; |
|
|
width: 100px; |
|
|
border-color: rgba(0, 0, 0, .3); |
|
|
} |
|
|
|
|
|
.selectDef { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
font-size: 13px; |
|
|
color: #707070; |
|
|
} |
|
|
|
|
|
#preSetSpeech { |
|
|
width: 100%; |
|
|
outline: none; |
|
|
margin-top: 5px; |
|
|
border-radius: 3px; |
|
|
border-color: rgba(0, 0, 0, .3); |
|
|
} |
|
|
|
|
|
.mdOption { |
|
|
position: absolute; |
|
|
right: 5px; |
|
|
bottom: 0px; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.mdOption>div { |
|
|
margin-top: 4px; |
|
|
pointer-events: auto; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.mdOption>div>svg { |
|
|
color: #e3e3e3; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.mdOption svg:hover { |
|
|
color: #989898; |
|
|
} |
|
|
|
|
|
.mdOption svg * { |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.refreshReq svg:not(:first-child) { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.halfRefReq svg:not(:nth-child(2)) { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.moreOption { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.optionItems { |
|
|
position: absolute; |
|
|
top: -8px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
visibility: hidden; |
|
|
z-index: 1; |
|
|
color: #808080; |
|
|
} |
|
|
|
|
|
.moreOptionHidden>div { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
.optionItems:hover { |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.optionItems:hover .optionItem { |
|
|
transform: scale(1); |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.optionTrigger:hover+.optionItems .optionItem:nth-of-type(3) { |
|
|
transform: scale(1); |
|
|
visibility: visible; |
|
|
transition-delay: 50ms; |
|
|
transition-duration: 60ms; |
|
|
} |
|
|
|
|
|
.optionTrigger:hover+.optionItems .optionItem:nth-of-type(2) { |
|
|
visibility: visible; |
|
|
transition-delay: 80ms; |
|
|
transform: scale(1); |
|
|
transition-duration: 60ms; |
|
|
} |
|
|
|
|
|
.optionTrigger:hover+.optionItems .optionItem:nth-of-type(1) { |
|
|
visibility: visible; |
|
|
transition-delay: 110ms; |
|
|
transform: scale(1); |
|
|
transition-duration: 60ms; |
|
|
} |
|
|
|
|
|
.optionItem { |
|
|
border-radius: 3px; |
|
|
height: 30px; |
|
|
width: 30px; |
|
|
background-color: #f7f7f8; |
|
|
visibility: hidden; |
|
|
transform: scale(0); |
|
|
display: flex !important; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.optionItem * { |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.optionItem:hover { |
|
|
background: #e0e0e0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div> |
|
|
<div class="chat_window"> |
|
|
<div class="top_menu"> |
|
|
<div class="buttons"> |
|
|
<div class="button close"></div> |
|
|
<div class="button minimize"></div> |
|
|
<div class="button maximize"></div> |
|
|
</div> |
|
|
<div class="title">Fastllm</div> |
|
|
</div> |
|
|
<div class="messages"> |
|
|
<div id="chatlog"></div> |
|
|
<div id="stopChat"><svg width="24" height="24"> |
|
|
<use xlink:href="#stopResIcon" /> |
|
|
</svg>停止</div> |
|
|
</div> |
|
|
<div class="bottom_wrapper clearfix"> |
|
|
<div class="message_input_wrapper"> |
|
|
<textarea class="message_input_text" spellcheck="false" placeholder="来问点什么吧" |
|
|
id="chatinput"></textarea> |
|
|
</div> |
|
|
<button class="loaded" id="sendbutton"> |
|
|
<span>发送</span> |
|
|
<svg style="margin:0 auto;height:40px;" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid"> |
|
|
<g transform="translate(50 50)"> |
|
|
<circle cx="0" cy="0" r="15" fill="#e15b64"> |
|
|
<animateTransform attributeName="transform" type="scale" begin="-0.3333333333333333s" |
|
|
calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" |
|
|
keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform> |
|
|
</circle> |
|
|
</g> |
|
|
<g transform="translate(100 50)"> |
|
|
<circle cx="0" cy="0" r="15" fill="#f8b26a"> |
|
|
<animateTransform attributeName="transform" type="scale" begin="-0.16666666666666666s" |
|
|
calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" |
|
|
keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform> |
|
|
</circle> |
|
|
</g> |
|
|
<g transform="translate(150 50)"> |
|
|
<circle cx="0" cy="0" r="15" fill="#99c959"> |
|
|
<animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" |
|
|
keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" |
|
|
repeatCount="indefinite"></animateTransform> |
|
|
</circle> |
|
|
</g> |
|
|
</svg> |
|
|
</button> |
|
|
<button id="clearConv"><svg style="margin:0 auto;display:block" role="img" width="20px" height="20px" |
|
|
viewBox="0 0 24 24"> |
|
|
<title>失忆</title> |
|
|
<path fill="currentColor" |
|
|
d="M8 20v-5h2v5h9v-7H5v7h3zm-4-9h16V8h-6V4h-4v4H4v3zM3 21v-8H2V7a1 1 0 0 1 1-1h5V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3h5a1 1 0 0 1 1 1v6h-1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"> |
|
|
</path> |
|
|
</svg></button> |
|
|
</div> |
|
|
</div> |
|
|
<div style="display: none"> |
|
|
<svg> |
|
|
<symbol viewBox="0 0 24 24" id="optionIcon"> |
|
|
<path fill="currentColor" |
|
|
d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"> |
|
|
</path> |
|
|
</symbol> |
|
|
<symbol viewBox="0 0 24 24" id="refreshIcon"> |
|
|
<path fill="currentColor" |
|
|
d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"> |
|
|
</path> |
|
|
</symbol> |
|
|
<symbol viewBox="0 0 24 24" id="halfRefIcon"> |
|
|
<path fill="currentColor" |
|
|
d="M 4.009 12.163 C 4.012 12.206 2.02 12.329 2 12.098 C 2 6.575 6.477 2 12 2 C 17.523 2 22 6.477 22 12 C 22 14.136 21.33 16.116 20.19 17.74 L 17 12 L 20 12 C 19.999 5.842 13.333 1.993 7.999 5.073 C 3.211 8.343 4.374 12.389 4.009 12.163 Z" /> |
|
|
</symbol> |
|
|
<symbol viewBox="-2 -2 20 20" id="copyIcon"> |
|
|
<path fill="currentColor" |
|
|
d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"> |
|
|
</path> |
|
|
<path fill="currentColor" |
|
|
d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"> |
|
|
</path> |
|
|
</symbol> |
|
|
<symbol viewBox="0 0 24 24" id="delIcon"> |
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" |
|
|
stroke-width="2" |
|
|
d="M9 7v0a3 3 0 0 1 3-3v0a3 3 0 0 1 3 3v0M9 7h6M9 7H6m9 0h3m2 0h-2M4 7h2m0 0v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7"> |
|
|
</path> |
|
|
</symbol> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
const messagsEle = document.getElementsByClassName("messages")[0]; |
|
|
const chatlog = document.getElementById("chatlog"); |
|
|
const stopEle = document.getElementById("stopChat"); |
|
|
const sendBtnEle = document.getElementById("sendbutton"); |
|
|
const textarea = document.getElementById("chatinput"); |
|
|
const dialogEle = document.getElementById("setDialog"); |
|
|
const speechOptionEle = document.getElementById("speechOption"); |
|
|
textarea.focus(); |
|
|
textarea.oninput = (e) => { |
|
|
if (textarea.value.trim().length) { |
|
|
sendBtnEle.classList.add("activeSendBtn"); |
|
|
} else { |
|
|
sendBtnEle.classList.remove("activeSendBtn"); |
|
|
} |
|
|
textarea.style.height = "47px"; |
|
|
textarea.style.height = textarea.scrollHeight + "px"; |
|
|
}; |
|
|
</script> |
|
|
<script src="js/markdown-it.min.js"></script> |
|
|
<script src="js/highlight.min.js"></script> |
|
|
<script src="js/katex.min.js"></script> |
|
|
<script src="js/texmath.js"></script> |
|
|
<script src="js/markdown-it-link-attributes.min.js"></script> |
|
|
<script> |
|
|
const API_URL = "chat"; |
|
|
let data = []; |
|
|
let input_str; |
|
|
let uuid = ""; |
|
|
let loading = false; |
|
|
const scrollToBottom = () => { |
|
|
if (messagsEle.scrollHeight - messagsEle.scrollTop - messagsEle.clientHeight < 128) { |
|
|
messagsEle.scrollTo(0, messagsEle.scrollHeight) |
|
|
} |
|
|
} |
|
|
const scrollToBottomLoad = (ele) => { |
|
|
if (messagsEle.scrollHeight - messagsEle.scrollTop - messagsEle.clientHeight < ele.clientHeight + 128) { |
|
|
messagsEle.scrollTo(0, messagsEle.scrollHeight) |
|
|
} |
|
|
} |
|
|
const closeEvent = (ev) => { |
|
|
if (!dialogEle.contains(ev.target)) { |
|
|
dialogEle.style.display = "none"; |
|
|
document.removeEventListener("mousedown", closeEvent, true); |
|
|
} |
|
|
} |
|
|
const md = markdownit({ |
|
|
linkify: true, |
|
|
highlight: function (str, lang) { |
|
|
try { |
|
|
return hljs.highlightAuto(str).value; |
|
|
} catch (e) { } |
|
|
return ""; |
|
|
} |
|
|
}); |
|
|
md.use(texmath, {engine: katex, delimiters: "dollars", katexOptions: {macros: {"\\RR": "\\mathbb{R}"}}}) |
|
|
.use(markdownitLinkAttributes, {attrs: {target: "_blank", rel: "noopener"}}); |
|
|
const x = { |
|
|
getCodeLang(str = "") { |
|
|
const res = str.match(/ class="language-(.*?)"/); |
|
|
return (res && res[1]) || ""; |
|
|
}, |
|
|
getFragment(str = "") { |
|
|
return str ? `<span class="u-mdic-copy-code_lang">${str}</span>` : ""; |
|
|
}, |
|
|
}; |
|
|
const strEncode = (str = "") => { |
|
|
if (!str || str.length === 0) return ""; |
|
|
return str |
|
|
.replace(/</g, '<') |
|
|
.replace(/>/g, '>') |
|
|
.replace(/'/g, '\'') |
|
|
.replace(/"/g, '"'); |
|
|
}; |
|
|
const getCodeLangFragment = (oriStr = "") => { |
|
|
return x.getFragment(x.getCodeLang(oriStr)); |
|
|
}; |
|
|
const copyClickCode = (ele) => { |
|
|
const input = document.createElement("textarea"); |
|
|
input.value = ele.dataset.mdicContent; |
|
|
const nDom = ele.previousElementSibling; |
|
|
const nDelay = ele.dataset.mdicNotifyDelay; |
|
|
const cDom = nDom.previousElementSibling; |
|
|
document.body.appendChild(input); |
|
|
input.select(); |
|
|
input.setSelectionRange(0, 9999); |
|
|
document.execCommand("copy"); |
|
|
document.body.removeChild(input); |
|
|
if (nDom.style.display === "none") { |
|
|
nDom.style.display = "block"; |
|
|
cDom && (cDom.style.display = "none"); |
|
|
setTimeout(() => { |
|
|
nDom.style.display = "none"; |
|
|
cDom && (cDom.style.display = "block"); |
|
|
}, nDelay); |
|
|
} |
|
|
}; |
|
|
const copyClickMd = (idx) => { |
|
|
const input = document.createElement("textarea"); |
|
|
input.value = data[idx].content; |
|
|
document.body.appendChild(input); |
|
|
input.select(); |
|
|
input.setSelectionRange(0, 9999); |
|
|
document.execCommand("copy"); |
|
|
document.body.removeChild(input); |
|
|
} |
|
|
const enhanceCode = (render, options = {}) => (...args) => { |
|
|
|
|
|
const { |
|
|
btnText = "复制代码", |
|
|
successText = "复制成功", |
|
|
successTextDelay = 2000, |
|
|
showCodeLanguage = true, |
|
|
} = options; |
|
|
const [tokens = {}, idx = 0] = args; |
|
|
const cont = strEncode(tokens[idx].content || ""); |
|
|
const originResult = render.apply(this, args); |
|
|
const langFrag = showCodeLanguage ? getCodeLangFragment(originResult) : ""; |
|
|
const tpls = [ |
|
|
'<div class="m-mdic-copy-wrapper">', |
|
|
`${langFrag}`, |
|
|
`<div class="u-mdic-copy-notify" style="display:none;">${successText}</div>`, |
|
|
'<button ', |
|
|
'class="u-mdic-copy-btn j-mdic-copy-btn" ', |
|
|
`data-mdic-content="${cont}" `, |
|
|
`data-mdic-notify-delay="${successTextDelay}" `, |
|
|
`onclick="copyClickCode(this)">${btnText}</button>`, |
|
|
'</div>', |
|
|
]; |
|
|
const LAST_TAG = "</pre>"; |
|
|
const newResult = originResult.replace(LAST_TAG, `${tpls.join("")}${LAST_TAG}`); |
|
|
return newResult; |
|
|
}; |
|
|
const codeBlockRender = md.renderer.rules.code_block; |
|
|
const fenceRender = md.renderer.rules.fence; |
|
|
md.renderer.rules.code_block = enhanceCode(codeBlockRender); |
|
|
md.renderer.rules.fence = enhanceCode(fenceRender); |
|
|
md.renderer.rules.image = function (tokens, idx, options, env, slf) { |
|
|
var token = tokens[idx]; |
|
|
token.attrs[token.attrIndex("alt")][1] = slf.renderInlineAsText(token.children, options, env); |
|
|
token.attrSet("onload", "scrollToBottomLoad(this);this.removeAttribute('onload')"); |
|
|
return slf.renderToken(tokens, idx, options) |
|
|
} |
|
|
let delayId; |
|
|
const delay = () => { |
|
|
return new Promise((resolve) => delayId = setTimeout(resolve, 100)); |
|
|
} |
|
|
const confirmAction = (prompt) => { |
|
|
if (window.confirm(prompt)) { |
|
|
return true; |
|
|
} |
|
|
else { |
|
|
return false; |
|
|
} |
|
|
} |
|
|
const mdOptionEvent = (ev) => { |
|
|
let id = ev.target.dataset.id; |
|
|
if (id) { |
|
|
let parent = ev.target.parentElement; |
|
|
let idxEle = parent.parentElement; |
|
|
let idx = Array.prototype.indexOf.call(chatlog.children, (id === "refreshMd") ? idxEle.parentElement : idxEle.parentElement.parentElement); |
|
|
if (id === "refreshMd") { |
|
|
if (!loading && chatlog.children[idx].dataset.loading !== "true") { |
|
|
let className = parent.className; |
|
|
if (className == "refreshReq") { |
|
|
chatlog.children[idx].children[0].innerHTML = "<br />"; |
|
|
chatlog.children[idx].dataset.loading = true; |
|
|
data[idx].content = ""; |
|
|
if (idx === currentVoiceIdx) {endSpeak()}; |
|
|
loadAction(true); |
|
|
refreshIdx = idx; |
|
|
streamGen(); |
|
|
} else { |
|
|
chatlog.children[idx].dataset.loading = true; |
|
|
progressData = data[idx].content; |
|
|
loadAction(true); |
|
|
refreshIdx = idx; |
|
|
streamGen(); |
|
|
} |
|
|
} |
|
|
} else if (id === "copyMd") { |
|
|
idxEle.classList.add("moreOptionHidden"); |
|
|
copyClickMd(idx); |
|
|
} else if (id === "delMd") { |
|
|
idxEle.classList.add("moreOptionHidden"); |
|
|
if (!loading) { |
|
|
if (confirmAction("是否删除此消息?")) { |
|
|
if (currentVoiceIdx) { |
|
|
if (currentVoiceIdx === idx) {endSpeak()} |
|
|
else if (currentVoiceIdx > idx) {currentVoiceIdx -= 1} |
|
|
} |
|
|
chatlog.removeChild(chatlog.children[idx]); |
|
|
data.splice(idx, 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
const moreOption = (ele) => { |
|
|
ele.classList.remove("moreOptionHidden"); |
|
|
} |
|
|
const formatMdEle = (ele) => { |
|
|
let realMd = document.createElement("div"); |
|
|
realMd.className = "markdown-body"; |
|
|
ele.appendChild(realMd); |
|
|
let mdOption = document.createElement("div"); |
|
|
mdOption.className = "mdOption"; |
|
|
ele.appendChild(mdOption); |
|
|
if (ele.className !== "request") { |
|
|
mdOption.innerHTML = `<div class="refreshReq"> |
|
|
<svg data-id="refreshMd" width="16" height="16" role="img"><title>刷新</title><use xlink:href="#refreshIcon" /></svg> |
|
|
<svg data-id="refreshMd" width="16" height="16" role="img"><title>继续</title><use xlink:href="#halfRefIcon" /></svg> |
|
|
</div>` |
|
|
} |
|
|
mdOption.innerHTML += `<div class="moreOption" onmouseenter="moreOption(this)"> |
|
|
<svg class="optionTrigger" width="16" height="16" role="img"><title>选项</title><use xlink:href="#optionIcon" /></svg> |
|
|
<div class="optionItems" style="width:63px;left:-63px">` + `<div data-id="delMd" class="optionItem" title="删除"> |
|
|
<svg width="20" height="20"><use xlink:href="#delIcon" /></svg> |
|
|
</div> |
|
|
<div data-id="copyMd" class="optionItem" title="复制"> |
|
|
<svg width="20" height="20"><use xlink:href="#copyIcon" /></svg> |
|
|
</div></div></div>`; |
|
|
mdOption.onclick = mdOptionEvent; |
|
|
} |
|
|
let controller; |
|
|
let controllerId; |
|
|
let refreshIdx; |
|
|
let currentResEle; |
|
|
let progressData = ""; |
|
|
let resStr = ""; |
|
|
const reqWord = async (refresh) => { |
|
|
if (uuid == "") { |
|
|
uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { |
|
|
var r = Math.random() * 16 | 0, |
|
|
v = c == 'x' ? r : (r & 0x3 | 0x8); |
|
|
return v.toString(16); |
|
|
}); |
|
|
} |
|
|
|
|
|
let headers = {"Content-Type": "application/json", "uuid" : uuid}; |
|
|
let idx = refresh ? refreshIdx : data.length; |
|
|
let dataSlice = [data[idx - 1]]; |
|
|
const res = await fetch(API_URL, { |
|
|
method: "POST", |
|
|
headers, |
|
|
body: input_str, |
|
|
signal: controller.signal |
|
|
}); |
|
|
clearTimeout(controllerId); |
|
|
controllerId = void 0; |
|
|
if (res.status !== 200) { |
|
|
alert("请先启动服务！"); |
|
|
stopLoading(); |
|
|
return; |
|
|
} |
|
|
const decoder = new TextDecoder(); |
|
|
const reader = res.body.getReader(); |
|
|
const readChunk = async () => { |
|
|
return reader.read().then(async ({value, done}) => { |
|
|
if (!done) { |
|
|
resStr = decoder.decode(value); |
|
|
let end = resStr.indexOf("<eop>"); |
|
|
value = resStr; |
|
|
if (end > -1) { |
|
|
value = resStr.substr(0, end) |
|
|
} |
|
|
currentResEle.children[0].innerHTML = md.render(value); |
|
|
scrollToBottom(); |
|
|
return; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
await readChunk(); |
|
|
}; |
|
|
const streamGen = async () => { |
|
|
controller = new AbortController(); |
|
|
controllerId = setTimeout(() => { |
|
|
alert("请求超时，请稍后重试！"); |
|
|
stopLoading(); |
|
|
}, 30000); |
|
|
let isRefresh = refreshIdx !== void 0; |
|
|
if (isRefresh) { |
|
|
currentResEle = chatlog.children[refreshIdx]; |
|
|
} else if (!currentResEle) { |
|
|
currentResEle = document.createElement("div"); |
|
|
currentResEle.className = "response"; |
|
|
chatlog.appendChild(currentResEle); |
|
|
formatMdEle(currentResEle); |
|
|
currentResEle.children[0].innerHTML = "<br />"; |
|
|
currentResEle.dataset.loading = true; |
|
|
scrollToBottom(); |
|
|
} |
|
|
resStr = ""; |
|
|
while(true) { |
|
|
await reqWord(isRefresh) |
|
|
await sleep(0) |
|
|
if (resStr.indexOf("<eop>") > -1) { |
|
|
break; |
|
|
} |
|
|
} |
|
|
stopLoading(false); |
|
|
}; |
|
|
const loadAction = (bool) => { |
|
|
loading = bool; |
|
|
sendBtnEle.disabled = bool; |
|
|
sendBtnEle.className = bool ? " loading" : "loaded"; |
|
|
stopEle.style.display = bool ? "flex" : "none"; |
|
|
} |
|
|
const stopLoading = (abort = true) => { |
|
|
stopEle.style.display = "none"; |
|
|
if (abort) { |
|
|
controller.abort(); |
|
|
if (controllerId) clearTimeout(controllerId); |
|
|
if (delayId) clearTimeout(delayId); |
|
|
if (refreshIdx !== void 0) {data[refreshIdx].content = progressData} |
|
|
else if (data[data.length - 1].role === "assistant") {data[data.length - 1].content = progressData} |
|
|
else {data.push({role: "assistant", content: progressData})} |
|
|
} |
|
|
controllerId = delayId = refreshIdx = void 0; |
|
|
currentResEle.dataset.loading = false; |
|
|
currentResEle = null; |
|
|
progressData = ""; |
|
|
loadAction(false); |
|
|
} |
|
|
function sleep(time) { |
|
|
return new Promise(resolve => { |
|
|
setTimeout(() => { |
|
|
resolve(); |
|
|
}, time); |
|
|
}); |
|
|
} |
|
|
const generateText = async (message) => { |
|
|
loadAction(true); |
|
|
let request = document.createElement("div"); |
|
|
request.className = "request"; |
|
|
chatlog.appendChild(request); |
|
|
formatMdEle(request); |
|
|
request.children[0].innerHTML = md.render(message); |
|
|
data.push({role: "user", content: message}); |
|
|
input_str = message; |
|
|
scrollToBottom(); |
|
|
await streamGen(); |
|
|
}; |
|
|
textarea.onkeydown = (e) => { |
|
|
if (e.keyCode === 13) { |
|
|
if (!e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
genFunc(); |
|
|
} |
|
|
} |
|
|
}; |
|
|
const genFunc = function () { |
|
|
let message = textarea.value.trim(); |
|
|
if (message.length !== 0) { |
|
|
if (loading === true) return; |
|
|
textarea.value = ""; |
|
|
textarea.style.height = "47px"; |
|
|
generateText(message); |
|
|
} |
|
|
}; |
|
|
sendBtnEle.onclick = genFunc; |
|
|
stopEle.onclick = stopLoading; |
|
|
document.getElementById("clearConv").onclick = () => { |
|
|
if (!loading) { |
|
|
input_str = "reset"; |
|
|
streamGen(); |
|
|
chatlog.innerHTML = "<div></div>" |
|
|
scrollToBottom(); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link href="css/github-markdown-light.min.css" rel="stylesheet"> |
|
|
<link href="css/github.min.css" rel="stylesheet"> |
|
|
<link href="css/katex.min.css" rel="stylesheet"> |
|
|
<link href="css/texmath.css" rel="stylesheet"> |
|
|
</body> |
|
|
</html> |
|
|
|
