明树Git Lab

Skip to content

D
deepseek_wechat_chat
Commit f421ec49 authored by yangyajing's avatar yangyajing
Browse files
Options

增加发送按钮

parent 5d7b9c51
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 116 deletions
public/publicAccount/css/index.css
View file @ f421ec49
...@@ -50,17 +50,27 @@ body, html{ ...@@ -50,17 +50,27 @@ body, html{
} }
.container .input-wrap{ .container .input-wrap{
margin-top: 0.625rem; margin-top: 0.625rem;
display: flex;
align-items: center;
} }
.container .input-wrap input{ .container .input-wrap input{
width: 100%; flex: 1;
width: 0;
border: 1px solid #aaa; border: 1px solid #aaa;
height: 1.875rem; height: 2.5rem;
line-height: 1.875rem; line-height: 2.5rem;
border-radius: 0.25rem; border-radius: 0.5rem;
padding: 0 0.75rem; padding: 0 0.75rem;
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
} }
.container .input-wrap .send-button{
padding: 5px 15px;
background-color: #1FC67E;
color: #fff;
border-radius: 6px;
margin-left: 15px;
}
.mask-container{ .mask-container{
position: fixed; position: fixed;
width: 100%; width: 100%;
......
public/publicAccount/index.html
View file @ f421ec49
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input type="text" id="question-input" placeholder="给deepseek发送消息"> <input type="text" id="question-input" placeholder="给deepseek发送消息">
<div class="send-button">发送</div>
</div> </div>
</div> </div>
<div class="mask-container"> <div class="mask-container">
......
public/publicAccount/js/index.js
View file @ f421ec49
...@@ -78,128 +78,125 @@ $(function () { ...@@ -78,128 +78,125 @@ $(function () {
}) })
} }
// 提交问答 // 提交问答
$("#question-input").keypress(function(event) { $(".send-button").on("click", function() {
if (event.key === "Enter" || event.keyCode === 13) { question = $("#question-input").val();
event.preventDefault(); if (question) {
question = $(this).val(); async function handleAsk () {
if (question) { try {
async function handleAsk () { const response = await fetch("https://dashscope.aliyuncs.com/api/v1/apps/6de1065c75074ee1a11238ab90c1aa34/completion", {
try { body: JSON.stringify({
const response = await fetch("https://dashscope.aliyuncs.com/api/v1/apps/6de1065c75074ee1a11238ab90c1aa34/completion", { input: {
body: JSON.stringify({ prompt: question,
input: { stream: true
prompt: question,
stream: true
},
parameters: {},
debug: {}
}),
method: "post",
headers: {
"Authorization": "Bearer sk-0ff2fc43671f4ed28dd7c80289da04e7",
"Content-Type": "application/json",
"X-DashScope-SSE": "enable"
}, },
credentials: "omit", parameters: {},
mode: "cors" debug: {}
}); }),
if (response.status == 200) { method: "post",
const reader = response.body.getReader(); headers: {
const decoder = new TextDecoder(); "Authorization": "Bearer sk-0ff2fc43671f4ed28dd7c80289da04e7",
$("#question-input").val("").attr("disabled", false); "Content-Type": "application/json",
while (true) { "X-DashScope-SSE": "enable"
const { value, done } = await reader.read(); },
function transformValue (val) { credentials: "omit",
const string = decoder.decode(val); mode: "cors"
const lines = string.split('\n'); });
const result = {}; if (response.status == 200) {
lines.forEach(line => { const reader = response.body.getReader();
const [k, v] = line.split(':'); const decoder = new TextDecoder();
if (k && v) { $("#question-input").val("").attr("disabled", false);
if (k === 'data') { while (true) {
result[k] = JSON.parse(line.slice(line.indexOf(":") + 1)); const { value, done } = await reader.read();
} else { function transformValue (val) {
result[k] = v; const string = decoder.decode(val);
} const lines = string.split('\n');
const result = {};
lines.forEach(line => {
const [k, v] = line.split(':');
if (k && v) {
if (k === 'data') {
result[k] = JSON.parse(line.slice(line.indexOf(":") + 1));
} else {
result[k] = v;
} }
}); }
return result; });
} return result;
const result = transformValue(value); }
if (done) { const result = transformValue(value);
$('.conversation-loading').hide(); if (done) {
saveConversation(); $('.conversation-loading').hide();
break; saveConversation();
} break;
answer = ""; }
if (result.data && result.data.output && result.data.output.text) { answer = "";
answer = result.data.output.text; if (result.data && result.data.output && result.data.output.text) {
} answer = result.data.output.text;
$(".conversation-item").eq($(".conversation-item").length - 1).find(".answer-data").html(answer);
scrollBottom();
} }
} else { $(".conversation-item").eq($(".conversation-item").length - 1).find(".answer-data").html(answer);
$(".conversation-item").eq($(".conversation-item").length - 1).find(".answer-data").html("网络连接失败"); scrollBottom();
$("#question-input").val("").attr("disabled", false);
$('.conversation-loading').hide();
} }
} catch (err) { } else {
$(".conversation-item").eq($(".conversation-item").length - 1).find(".answer-data").html("网络连接失败"); $(".conversation-item").eq($(".conversation-item").length - 1).find(".answer-data").html("网络连接失败");
$("#question-input").val("").attr("disabled", false); $("#question-input").val("").attr("disabled", false);
$('.conversation-loading').hide(); $('.conversation-loading').hide();
} }
} catch (err) {
$(".conversation-item").eq($(".conversation-item").length - 1).find(".answer-data").html("网络连接失败");
$("#question-input").val("").attr("disabled", false);
$('.conversation-loading').hide();
} }
// 创建对话框
let div = document.createElement("div");
div.className = "conversation-item";
div.innerHTML = `<div class="conversation-question">
<div class="question-data">${question}</div>
</div>
<div class="conversation-answer">
<div class="answer-data"></div>
</div>`;
$('.conversation-wrap')[0].insertBefore(div, $('.conversation-loading')[0]);
$('.conversation-loading').show();
$(this).attr("disabled", true);
handleAsk();
// $.ajax({
// url: "https://dashscope.aliyuncs.com/api/v1/apps/6de1065c75074ee1a11238ab90c1aa34/completion",
// type: "post",
// timeout: 1800000,
// headers: {
// "Authorization": "Bearer sk-0ff2fc43671f4ed28dd7c80289da04e7",
// "Content-Type": "application/json",
// "X-DashScope-SSE": "enable"
// },
// contentType: "application/json",
// data: JSON.stringify({
// input: {
// prompt: question,
// stream: true
// },
// parameters: {},
// debug: {}
// }),
// dataType: "json",
// success: (res) => {
// answer = res.output.text;
// let div = document.createElement("div");
// div.className = "conversation-item";
// div.innerHTML = `<div class="conversation-item">
// <div class="conversation-question">
// <div class="question-data">${question}</div>
// </div>
// <div class="conversation-answer">
// <div class="answer-data">${answer}</div>
// </div>`;
// $('.conversation-wrap')[0].insertBefore(div, $('.conversation-loading')[0]);
// $(this).val("");
// $('.conversation-loading').hide();
// scrollBottom();
// // saveConversation();
// }
// })
} }
// 创建对话框
let div = document.createElement("div");
div.className = "conversation-item";
div.innerHTML = `<div class="conversation-question">
<div class="question-data">${question}</div>
</div>
<div class="conversation-answer">
<div class="answer-data"></div>
</div>`;
$('.conversation-wrap')[0].insertBefore(div, $('.conversation-loading')[0]);
$('.conversation-loading').show();
$("#question-input").attr("disabled", true);
handleAsk();
// $.ajax({
// url: "https://dashscope.aliyuncs.com/api/v1/apps/6de1065c75074ee1a11238ab90c1aa34/completion",
// type: "post",
// timeout: 1800000,
// headers: {
// "Authorization": "Bearer sk-0ff2fc43671f4ed28dd7c80289da04e7",
// "Content-Type": "application/json",
// "X-DashScope-SSE": "enable"
// },
// contentType: "application/json",
// data: JSON.stringify({
// input: {
// prompt: question,
// stream: true
// },
// parameters: {},
// debug: {}
// }),
// dataType: "json",
// success: (res) => {
// answer = res.output.text;
// let div = document.createElement("div");
// div.className = "conversation-item";
// div.innerHTML = `<div class="conversation-item">
// <div class="conversation-question">
// <div class="question-data">${question}</div>
// </div>
// <div class="conversation-answer">
// <div class="answer-data">${answer}</div>
// </div>`;
// $('.conversation-wrap')[0].insertBefore(div, $('.conversation-loading')[0]);
// $(this).val("");
// $('.conversation-loading').hide();
// scrollBottom();
// // saveConversation();
// }
// })
} }
}); });
// 保存当前问答 // 保存当前问答
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment