refactor(fun): 重构 AI剧本生成功能,屏蔽视频下载功能,调整支付引入

This commit is contained in:
fhysy 2025-03-21 11:52:33 +08:00
parent c45996fdd8
commit 9de2ef3734
4 changed files with 197 additions and 327 deletions

View File

@ -1 +1,5 @@
{}
{
"dependencies": {
"jweixin-module": "^1.6.0"
}
}

View File

@ -23,9 +23,9 @@
</view>
<!-- 在每条AI消息后显示确认按钮除了系统消息 -->
<view v-if="message.role === 'assistant' && message.endStatus" class="accept-button-container">
<u-button
type="success"
size="mini"
<u-button
type="success"
size="mini"
@click="acceptScript(message.content)"
:custom-style="{marginTop: '10px'}"
>
@ -34,7 +34,7 @@
</u-button>
</view>
</block>
<!-- 用户消息 -->
<block v-else-if="message.role === 'user'">
<view class="message-container user-message-container">
@ -45,16 +45,16 @@
</view>
</block>
</view>
<!-- 加载中提示 -->
<view v-if="loading" class="loading-container">
<u-loading mode="circle" size="24"></u-loading>
<text class="loading-text">正在生成剧本...</text>
</view>
<!-- 用于滚动到底部的空白元素 -->
<view id="scroll-bottom-anchor" style="height: 1px;"></view>
<!-- 底部占位确保内容不被输入框遮挡 -->
<view class="bottom-placeholder"></view>
</view>
@ -67,7 +67,7 @@
v-model="inputMessage"
placeholder="请输入剧本相关描述AI将为您生成专业剧本..."
:disabled="loading"
type='textarea'
type='textarea'
:auto-height="true"
:custom-style="{flex: 1, minHeight: '80rpx', maxHeight: '200rpx'}"
@confirm="sendMessage"
@ -244,236 +244,151 @@ export default {
// 使fetch APIH5
async fetchStreamResponse(apiMessages) {
try {
// AI
this.currentAiMessageIndex = this.messages.length;
this.messages.push({
role: 'assistant',
content: '',
renderedContent: '',
time: this.formatTime(new Date()),
endStatus: false
});
const response = await fetch(`${config.baseUrl}/ai/generateStream`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.token}`,
'clientid': config.clientId,
'Content-Type': 'application/json'
},
redirect: 'follow',
body: JSON.stringify(apiMessages)
});
if (!response.ok) {
throw new Error(`API请求失败: ${response.status}`);
}
if (!response.body) {
throw new Error('响应体为空');
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let result = '';
let buffer = ''; //
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
buffer += chunk; // chunkbuffer
console.log("buffer",buffer)
// ,buffer
const lines = buffer.split('\n');
buffer = lines.pop() || ''; // buffer,
console.log("lines",lines)
for (const line of lines.filter(l => l.trim())) {
// debugger
console.log('处理行:', line);
let data = line;
if (line.startsWith('data:')) {
data = line.substring(5).trim();
}
console.log("data",data)
if (data === '[DONE]') {
//
if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
this.messages[this.currentAiMessageIndex].endStatus = true;
//
this.throttledScrollToBottom();
}
continue;
}
// debugger
try {
result += data;
console.log("result",result)
if (this.messages && this.currentAiMessageIndex < this.messages.length) {
this.messages[this.currentAiMessageIndex].content = result;
this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
console.log("messages1",this.messages)
//
this.throttledScrollToBottom();
} else {
console.warn('无法更新消息,索引无效:', aiMessageIndex);
}
} catch (e) {
console.error('解析流数据失败:', e, line);
}
}
// buffer
if (buffer) {
try {
let data = buffer;
if (buffer.startsWith('data:')) {
data = buffer.substring(5).trim();
}
if (data && data !== '[DONE]') {
result += data;
this.messages[this.currentAiMessageIndex].content = result;
this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
this.throttledScrollToBottom();
}
} catch (e) {
console.error('处理剩余数据失败:', e, buffer);
}
}
}
return result;
} catch (error) {
console.error('调用DeepSeek流式API失败:', error);
// AI
if (this.messages.length > 0 && this.messages[this.messages.length - 1].content === '') {
this.messages.pop();
this.currentAiMessageIndex = -1;
}
throw error;
}
// try {
// // AI
// this.currentAiMessageIndex = this.messages.length;
// this.messages.push({
// role: 'assistant',
// content: '',
// renderedContent: '',
// time: this.formatTime(new Date()),
// endStatus: false
// });
try {
// AI
this.currentAiMessageIndex = this.messages.length;
this.messages.push({
role: 'assistant',
content: '',
renderedContent: '',
time: this.formatTime(new Date()),
endStatus: false
});
// const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', {
// method: 'POST',
// headers: {
// 'Authorization': `Bearer ${this.apiKey}`,
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-7B',
// messages: apiMessages,
// stream: true,
// max_tokens: 8192,
// stop: '',
// temperature: 0.6,
// top_p: 0.7,
// top_k: 50,
// frequency_penalty: 0
// })
// });
// if (!response.ok) {
// throw new Error(`API: ${response.status}`);
// }
// if (!response.body) {
// throw new Error('');
// }
// const reader = response.body.getReader();
// const decoder = new TextDecoder();
// let result = '';
// while (true) {
// const { done, value } = await reader.read();
// if (done) break;
const response = await fetch(`${config.baseUrl}/ai/generateStream`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.token}`,
'clientid': config.clientId,
'Content-Type': 'application/json'
},
redirect: 'follow',
body: JSON.stringify(apiMessages)
});
if (!response.ok) {
throw new Error(`API请求失败: ${response.status}`);
}
if (!response.body) {
throw new Error('响应体为空');
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let result = '';
let buffer = ''; //
while (true) {
const { done, value } = await reader.read();
if (done) break;
// const chunk = decoder.decode(value);
// const lines = chunk.split('\n').filter(line => line.trim() !== '');
const chunk = decoder.decode(value, { stream: true }); // Use streaming mode
buffer += chunk;
// for (const line of lines) {
// if (line.startsWith('data: ')) {
// const data = line.substring(6).trim();
// if (data === '[DONE]') {
// //
// if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
// this.messages[this.currentAiMessageIndex].endStatus = true;
// //
// this.throttledScrollToBottom();
// }
// continue;
// }
// chunkbuffer
const lines = buffer.split('\n');
// ,buffer
buffer = lines.pop() || '';
for (const line of lines) {
if (!line.trim()) continue; // Skip empty lines
let data = line;
if (line.startsWith('data:')) {
data = line.substring(5).trim();
}
if (data === '[DONE]') {
//
if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
this.messages[this.currentAiMessageIndex].endStatus = true;
this.throttledScrollToBottom();
}
continue;
}
try {
// For JSON data (if your API returns JSON)
if (data.startsWith('{') && data.endsWith('}')) {
const parsed = JSON.parse(data);
const content = parsed.choices?.[0]?.delta?.content || '';
if (content) {
result += content;
}
} else {
// For plain text data
result += data;
}
// try {
// const parsed = JSON.parse(data);
// // parsedchoices
// if (!parsed || !parsed.choices || !Array.isArray(parsed.choices) || parsed.choices.length === 0) {
// console.warn(':', data);
// continue;
// }
// // 访delta
// const delta = parsed.choices[0].delta || {};
// //
// const content = delta.content;
// // reasoning_contentcontent
// const reasoningContent = delta.reasoning_content || '';
// // contentnullreasoningContent
// const textToAdd = (content !== null && content !== undefined) ? content : reasoningContent;
// if (textToAdd) {
// result += textToAdd;
// // messages[currentAiMessageIndex]
// if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
// this.messages[this.currentAiMessageIndex].content = result;
// this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
// //
// this.throttledScrollToBottom();
// }
// }
// } catch (e) {
// console.error(':', e, line);
// }
// }
// }
// }
// Update message content
if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
this.messages[this.currentAiMessageIndex].content = result;
this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
this.throttledScrollToBottom();
}
} catch (e) {
console.error('解析流数据失败:', e, line);
}
}
}
// return result;
// } catch (error) {
// console.error('DeepSeekAPI:', error);
// // AI
// if (this.messages.length > 0 && this.messages[this.messages.length - 1].content === '') {
// this.messages.pop();
// this.currentAiMessageIndex = -1;
// }
// throw error;
// }
// Process any remaining data in buffer
if (buffer.trim()) {
try {
let data = buffer;
if (buffer.startsWith('data:')) {
data = buffer.substring(5).trim();
}
if (data && data !== '[DONE]') {
// For JSON data
if (data.startsWith('{') && data.endsWith('}')) {
try {
const parsed = JSON.parse(data);
const content = parsed.choices?.[0]?.delta?.content || '';
if (content) {
result += content;
}
} catch (e) {
// If not valid JSON, treat as plain text
result += data;
}
} else {
// For plain text data
result += data;
}
this.messages[this.currentAiMessageIndex].content = result;
this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
this.throttledScrollToBottom();
}
} catch (e) {
console.error('处理剩余数据失败:', e, buffer);
}
}
// Ensure message is marked as complete
if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
this.messages[this.currentAiMessageIndex].endStatus = true;
}
return result;
} catch (error) {
console.error('调用流式API失败:', error);
// If error occurs, ensure empty AI message is removed
if (this.messages.length > 0 && this.messages[this.messages.length - 1].content === '') {
this.messages.pop();
this.currentAiMessageIndex = -1;
}
throw error;
}
},
// 使H5
// Use normal request (non-H5 environment)
async fetchNormalResponse(apiMessages) {
try {
// AI
// Add an empty AI reply
this.currentAiMessageIndex = this.messages.length;
this.messages.push({
role: 'assistant',
@ -484,46 +399,37 @@ export default {
});
const response = await uni.request({
url: 'https://api.siliconflow.cn/v1/chat/completions',
url: `${config.baseUrl}/ai/generate`,
method: 'POST',
header: {
'Authorization': `Bearer ${this.apiKey}`,
'Authorization': `Bearer ${this.token}`,
'clientid': config.clientId,
'Content-Type': 'application/json'
},
data: {
model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-7B',
messages: apiMessages,
stream: false,
max_tokens: 8192,
stop: '',
temperature: 0.6,
top_p: 0.7,
top_k: 50,
frequency_penalty: 0
},
data: apiMessages,
dataType: 'json'
});
//
// Check response status
if (response.statusCode !== 200) {
throw new Error(`API请求失败: ${response.statusCode}`);
}
//
const result = response.data.choices[0].message.content;
// Get response content
const result = response.data.content || '';
//
// Update message content
this.messages[this.currentAiMessageIndex].content = result;
this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
this.messages[this.currentAiMessageIndex].endStatus = true;
//
// Scroll to bottom
this.throttledScrollToBottom();
return result;
} catch (error) {
console.error('调用DeepSeek API失败:', error);
// AI
console.error('调用API失败:', error);
// If error occurs, ensure empty AI message is removed
if (this.messages.length > 0 && this.messages[this.messages.length - 1].content === '') {
this.messages.pop();
this.currentAiMessageIndex = -1;
@ -532,72 +438,42 @@ export default {
}
},
//
// Accept script
acceptScript(scriptContent) {
// // 使
// getApp().globalData.selectedScript = {
// orderId: this.orderId,
// content: scriptContent
// };
// const pages = getCurrentPages();
// // pageA
// const prevPage = pages[pages.length - 2];
// console.log("prevPage",prevPage)
uni.showToast({
title: '已确认使用此剧本',
icon: 'success'
});
//
// setTimeout(() => {
// uni.navigateBack();
// }, 1500);
// pageB
uni.navigateBack({
delta: 1, // 1
success: function() {
//
const pages = getCurrentPages();
// pageA
const prevPage = pages[pages.length - 2];
console.log("prevPage",prevPage)
//
prevPage.getAiDramaTxt(scriptContent);
}
});
// Return to previous page
uni.navigateBack({
delta: 1, // Number of pages to go back, 1 means return to previous page
success: function() {
// Get page stack
const pages = getCurrentPages();
// Previous page instance
const prevPage = pages[pages.length - 1];
// Call method on previous page
if (prevPage && typeof prevPage.getAiDramaTxt === 'function') {
prevPage.getAiDramaTxt(scriptContent);
}
}
});
},
//
// Throttled scroll to bottom function to avoid frequent scrolling
throttledScrollToBottom() {
// if (this.scrollTimer) return;
// this.scrollTimer = setTimeout(() => {
// this.scrollToBottom();
// this.scrollTimer = null;
// }, 1000); // 300ms
this.$u.throttle(this.scrollToBottom, 300)
this.$u.throttle(this.scrollToBottom, 300);
},
//
// Scroll to bottom
scrollToBottom() {
this.$nextTick(() => {
// 1: 使scrollTop
// const query = uni.createSelectorQuery().in(this);
// query.select('.chat-content').boundingClientRect(data => {
// if (data) {
// //
// this.scrollTop = 999999;
// }
// }).exec();
// 2: 使
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#scroll-bottom-anchor').boundingClientRect(data => {
if (data) {
//
// Scroll to anchor element position
uni.pageScrollTo({
selector: '#scroll-bottom-anchor',
duration: 100
@ -608,13 +484,13 @@ export default {
});
},
//
// Load more messages (pull-up loading)
loadMoreMessages() {
//
//
this.needScrollToBottom = false; //
// Logic for loading history messages can be implemented here
// Currently not needed, keeping the interface
this.needScrollToBottom = false; // Disable auto-scrolling when pulling up
//
// Restore auto-scrolling after loading
setTimeout(() => {
this.needScrollToBottom = true;
}, 1000);
@ -633,14 +509,11 @@ export default {
.chat-content {
flex: 1;
background-color: #f5f7fa;
// padding: 20rpx;
// padding-bottom: 180rpx; /* */
background-color: #f5f7fa;
}
.message-wrapper-box{
padding: 20rpx;
// padding-bottom: 180rpx; /* */
padding: 20rpx;
}
.message-wrapper {
@ -683,7 +556,7 @@ export default {
word-break: break-word;
}
/* Markdown样式 */
/* Markdown styles */
.markdown-body {
color: #333;
}
@ -699,21 +572,16 @@ export default {
color: #909399;
}
/* 固定在底部的输入区域 */
/* Input area fixed at the bottom */
.chat-input-container {
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
background-color: #fff;
border-top: 1px solid #ebeef5;
padding: 20rpx 30rpx;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
z-index: 100;
// min-height: 170rpx;
margin-top: auto;
position: sticky;
bottom: 0;
margin-top: auto;
position: sticky;
bottom: 0;
}
.chat-input {
@ -722,13 +590,10 @@ export default {
}
.bottom-placeholder {
height: 40rpx; /* 确保内容不被输入框遮挡 */
height: 40rpx; /* Ensure content is not hidden by input box */
}
.accept-button-container {
// display: flex;
// justify-content: flex-start;
// margin-top: 20rpx;
margin-bottom: 40rpx;
}
@ -748,4 +613,5 @@ export default {
.button-icon {
margin-right: 8rpx;
}
</style>
</style>

View File

@ -27,13 +27,13 @@
</view>
<!-- 底部按钮区域 -->
<view class="btn-box one" v-else-if="routeParams.name === '查看交付视频'">
<!-- <view class="btn-box one" v-else-if="routeParams.name === '查看交付视频'">
<u-button
class="confirm-btn"
type="primary"
@click="downloadVideo"
>下载交付视频</u-button>
</view>
</view> -->
<!-- 调整建议弹窗 -->
<u-popup

View File

@ -86,7 +86,7 @@
</template>
<script>
// import WeixinJSBridge from '../../utils/jweixin-1.6.0.js';
// import jweixin from '../../utils/jweixin-1.6.0.js';
var jweixin = require('jweixin-module');
export default {
data() {