886 lines
28 KiB
Vue
886 lines
28 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
title="Markdown 文件与TTS编辑"
|
|||
|
|
v-model="dialogVisible"
|
|||
|
|
width="85%"
|
|||
|
|
align-center
|
|||
|
|
:before-close="handleDialogClose"
|
|||
|
|
>
|
|||
|
|
<div class="input-section">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="24" style="border: 1px solid lightgray; padding: 10px;">
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
|
|||
|
|
<span style="font-weight: bold;">展品ID: {{formData.id}} - {{formData.label}}</span>
|
|||
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|||
|
|
<span>Markdown文件地址:</span>
|
|||
|
|
<a v-if="formData.md_file_url" :href="formData.md_file_url" target="_blank" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;">
|
|||
|
|
{{formData.md_file_url}}
|
|||
|
|
</a>
|
|||
|
|
<span v-else style="color: #999;">未上传</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Markdown 文件上传区域 -->
|
|||
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px; background: #f5f7fa; border-radius: 4px;">
|
|||
|
|
<el-upload
|
|||
|
|
ref="uploadMdRef"
|
|||
|
|
action=""
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:limit="1"
|
|||
|
|
:on-change="handleMdFileChange"
|
|||
|
|
:on-exceed="handleMdFileExceed"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
accept=".md,.markdown,.txt">
|
|||
|
|
<template #trigger>
|
|||
|
|
<el-button type="primary" size="small">选择Markdown文件</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
<span v-if="mdFile" style="color: #67C23A;">{{mdFile.name}}</span>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
type="success"
|
|||
|
|
:disabled="!mdFile"
|
|||
|
|
@click="submitMdFileUpload">
|
|||
|
|
上传并更新
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
type="danger"
|
|||
|
|
:disabled="!formData.md_file_url"
|
|||
|
|
@click="removeMdFileUrl">
|
|||
|
|
删除Markdown地址
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
type="info"
|
|||
|
|
:disabled="!formData.md_file_url"
|
|||
|
|
@click="loadMdContent">
|
|||
|
|
读取Markdown内容
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
type="warning"
|
|||
|
|
:disabled="!formData.md_file_url || !mdContent || mdContent.length === 0"
|
|||
|
|
@click="saveMdContent">
|
|||
|
|
保存修改到MinIO
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Markdown 内容编辑区域 -->
|
|||
|
|
<div style="margin-bottom: 20px;">
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
|
|||
|
|
<span style="font-weight: bold;">Markdown 内容编辑:</span>
|
|||
|
|
<span style="color: #909399; font-size: 12px;">字符数: {{mdContent.length}}</span>
|
|||
|
|
</div>
|
|||
|
|
<textarea
|
|||
|
|
v-model="mdContent"
|
|||
|
|
rows="15"
|
|||
|
|
placeholder="请先上传Markdown文件或读取现有内容..."
|
|||
|
|
style="width: 100%; font-family: monospace; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px;">
|
|||
|
|
</textarea>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- TTS 音频生成与上传区域 -->
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between; color: blue; margin: 10px 0;">
|
|||
|
|
<div>Markdown TTS 音频</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-row v-loading="isTTSGenerating" element-loading-text="音频生成中...">
|
|||
|
|
<el-col :span="24" style="border: 1px solid gray; padding: 15px;">
|
|||
|
|
<div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 15px;">
|
|||
|
|
<span style="margin-right: 20px; display: inline-block; width: 200px;">TTS音频地址:</span>
|
|||
|
|
<span style="display: inline-block; flex: 1;">
|
|||
|
|
<a v-if="formData.md_tts_url" :href="formData.md_tts_url" target="_blank">{{formData.md_tts_url}}</a>
|
|||
|
|
<span v-else style="color: #999;">未生成</span>
|
|||
|
|
</span>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
size="default"
|
|||
|
|
:disabled="!formData.md_tts_url"
|
|||
|
|
@click="removeMdTtsUrl">
|
|||
|
|
删除音频地址
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
|
|||
|
|
<div style="display: flex; justify-content: flex-start; align-items: center;">
|
|||
|
|
<label>音色选择：</label>
|
|||
|
|
<el-select
|
|||
|
|
v-model="voiceSelected_md"
|
|||
|
|
clearable
|
|||
|
|
placeholder="请选择音色"
|
|||
|
|
@change="voiceSelectedChangeMd"
|
|||
|
|
allow-create
|
|||
|
|
default-first-option
|
|||
|
|
style="width: 140px;">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in voiceOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:disabled="!mdContent || mdContent.length === 0"
|
|||
|
|
@click="generateMdTTS">
|
|||
|
|
生成语音
|
|||
|
|
</el-button>
|
|||
|
|
<audio class="audio-player" ref="audioPlayerMd" :src="preview.audioSrc_md" controls></audio>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:disabled="!preview.downReady_md"
|
|||
|
|
@click="downloadMdTTS">
|
|||
|
|
下载语音
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
|
|||
|
|
<div style="width: 90%; display: flex; justify-content: flex-start; align-items: center;">
|
|||
|
|
<span>下载文件名</span>
|
|||
|
|
<el-input v-model="downloadFilename_md"/>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: flex-start; align-items: center;">
|
|||
|
|
<span style="display: inline-block; width: 100px;">{{downloadPromptMd}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 上传区域 -->
|
|||
|
|
<div class="upload-section">
|
|||
|
|
<el-row v-show="preview.visible_md" align="middle" style="height: 5vh">
|
|||
|
|
<el-col :span="14">
|
|||
|
|
<div style="margin-left: 10px; width: 100%; height: 5vh; display: flex; align-items: center;">
|
|||
|
|
<el-upload
|
|||
|
|
action=""
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:on-change="handleUploadChangeMd"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
style="display: flex; align-items: center">
|
|||
|
|
<template #trigger>
|
|||
|
|
<el-button type="primary">选取文件</el-button>
|
|||
|
|
</template>
|
|||
|
|
<div style="display: inline-block; width: 200px;">{{uploadFileName_md}}</div>
|
|||
|
|
</el-upload>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-button
|
|||
|
|
:disabled="!uploadFile_md"
|
|||
|
|
style="width: 90%;"
|
|||
|
|
size="default"
|
|||
|
|
type="success"
|
|||
|
|
@click="submitMdTTSUpload">
|
|||
|
|
上传并修改音频地址
|
|||
|
|
</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 结果展示 -->
|
|||
|
|
<div class="result-section">
|
|||
|
|
<div v-if="result.error" class="error-message">
|
|||
|
|
错误：{{ result.error }}
|
|||
|
|
</div>
|
|||
|
|
<div v-if="result.success" class="success-message">
|
|||
|
|
<p>操作成功！</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
BASE_API_URL,
|
|||
|
|
WEIXIN_WS_URL,
|
|||
|
|
chatId,
|
|||
|
|
exhibit_tts_bucket_name,
|
|||
|
|
exhibit_md_bucket_name,
|
|||
|
|
exhibit_photo_bucket_name
|
|||
|
|
} from "@/API/api";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "MarkdownEditor",
|
|||
|
|
props: {
|
|||
|
|
'mesumSelectedId': {default: -1},
|
|||
|
|
'mesumSelected': {},
|
|||
|
|
'initData': {},
|
|||
|
|
'visible': {default: false},
|
|||
|
|
'photo_prefix': {default: 'temp'}
|
|||
|
|
},
|
|||
|
|
inject: {
|
|||
|
|
'root': {default: null},
|
|||
|
|
'getProject': {default: null},
|
|||
|
|
'getSchedule': {default: null}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formData: {
|
|||
|
|
mesum_id: 1,
|
|||
|
|
id: "",
|
|||
|
|
label: "",
|
|||
|
|
md_file_url: "",
|
|||
|
|
md_tts_url: ""
|
|||
|
|
},
|
|||
|
|
mdFile: null,
|
|||
|
|
mdContent: "",
|
|||
|
|
preview: {
|
|||
|
|
visible_md: false,
|
|||
|
|
downReady_md: false,
|
|||
|
|
audioSrc_md: '',
|
|||
|
|
tempBlob_md: null
|
|||
|
|
},
|
|||
|
|
uploadFile_md: null,
|
|||
|
|
result: {
|
|||
|
|
error: null,
|
|||
|
|
success: false,
|
|||
|
|
minioUrl: ''
|
|||
|
|
},
|
|||
|
|
isTTSGenerating: false,
|
|||
|
|
voiceSelected_md: "sambert-zhichu-v1@Tongyi-Qianwen",
|
|||
|
|
downloadFilename_md: "md_tts.mp3",
|
|||
|
|
voiceOptions: [
|
|||
|
|
{"value": "cosyvoice-v1/longyuan@Tongyi-Qianwen", "label": "亲切女生"},
|
|||
|
|
{"value": "sambert-zhiru-v1@Tongyi-Qianwen", "label": "新闻女生"},
|
|||
|
|
{"value": "cosyvoice-v1/longhua@Tongyi-Qianwen", "label": "活泼女童"},
|
|||
|
|
{"value": "cosyvoice-v1/longxiang@Tongyi-Qianwen", "label": "解说男声"},
|
|||
|
|
{"value": "cosyvoice-v1/longyue@Tongyi-Qianwen", "label": "longyue"},
|
|||
|
|
{"value": "cosyvoice-v1/longwan@Tongyi-Qianwen", "label": "longwan"},
|
|||
|
|
{"value": "sambert-zhichu-v1@Tongyi-Qianwen", "label": "舌尖男声"},
|
|||
|
|
{"value": "sambert-zhiying-v1@Tongyi-Qianwen", "label": "软萌童声"},
|
|||
|
|
],
|
|||
|
|
dialogVisible: false,
|
|||
|
|
downloadStateMd: 'idle',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// Markdown 文件选择
|
|||
|
|
handleMdFileChange(file) {
|
|||
|
|
this.mdFile = file.raw;
|
|||
|
|
console.log("选择的Markdown文件:", file.name);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleMdFileExceed(files) {
|
|||
|
|
this.$refs.uploadMdRef.clearFiles();
|
|||
|
|
const newFile = files[0];
|
|||
|
|
this.$refs.uploadMdRef.handleStart(newFile);
|
|||
|
|
this.handleMdFileChange({raw: newFile, name: newFile.name});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上传 Markdown 文件到 MinIO
|
|||
|
|
async submitMdFileUpload() {
|
|||
|
|
if (!this.mdFile) {
|
|||
|
|
this.$message.warning('请先选择Markdown文件');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 如果已有MD文件，先删除旧的MinIO对象
|
|||
|
|
await this.removeMdFileFromMinio(this.formData.md_file_url);
|
|||
|
|
|
|||
|
|
// 上传新文件
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', this.mdFile);
|
|||
|
|
// 使用原始文件名，不重命名
|
|||
|
|
const fileName = this.mdFile.name;
|
|||
|
|
formData.append('bucket', exhibit_md_bucket_name); // 使用专门的bucket存放markdown
|
|||
|
|
formData.append('file_name', `${this.photo_prefix}/category/${fileName}`);
|
|||
|
|
|
|||
|
|
const response = await fetch(`${BASE_API_URL}/minio/put`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData,
|
|||
|
|
headers: {
|
|||
|
|
"Authorization": "Bearer ragflow-NhZTY5Y2M4YWQ1MzExZWY4Zjc3MDI0Mm"
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('上传失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const res = await response.json();
|
|||
|
|
const {data} = res;
|
|||
|
|
if (data?.put) {
|
|||
|
|
// 更新数据库
|
|||
|
|
await this.updateAntiqueMdFile(data?.url);
|
|||
|
|
this.$message.success('Markdown文件上传成功');
|
|||
|
|
this.mdFile = null;
|
|||
|
|
if (this.$refs.uploadMdRef) {
|
|||
|
|
this.$refs.uploadMdRef.clearFiles();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('上传Markdown文件失败:', error);
|
|||
|
|
this.$message.error('上传Markdown文件失败');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 读取 Markdown 文件内容
|
|||
|
|
async loadMdContent() {
|
|||
|
|
if (!this.formData.md_file_url) {
|
|||
|
|
this.$message.warning('没有Markdown文件URL');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 添加时间戳参数避免浏览器缓存
|
|||
|
|
const url = this.formData.md_file_url + '?t=' + Date.now();
|
|||
|
|
const response = await fetch(url);
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('读取文件失败');
|
|||
|
|
}
|
|||
|
|
const content = await response.text();
|
|||
|
|
this.mdContent = content;
|
|||
|
|
this.$message.success('Markdown内容加载成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('读取Markdown内容失败:', error);
|
|||
|
|
this.$message.error('读取Markdown内容失败');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 保存 Markdown 内容修改到 MinIO
|
|||
|
|
async saveMdContent() {
|
|||
|
|
if (!this.formData.md_file_url) {
|
|||
|
|
this.$message.warning('没有Markdown文件URL');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.mdContent || this.mdContent.length === 0) {
|
|||
|
|
this.$message.warning('Markdown内容为空');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const loading = this.$loading({
|
|||
|
|
lock: true,
|
|||
|
|
text: '正在保存Markdown内容到MinIO...',
|
|||
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 从URL中解析出bucket和文件名
|
|||
|
|
let bucket = exhibit_md_bucket_name;
|
|||
|
|
let fileName = '';
|
|||
|
|
|
|||
|
|
const urlParts = this.formData.md_file_url.split(`${exhibit_md_bucket_name}/`);
|
|||
|
|
if (urlParts.length > 1) {
|
|||
|
|
fileName = urlParts[1];
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧的photo bucket格式
|
|||
|
|
const photoUrlParts = this.formData.md_file_url.split(`${exhibit_photo_bucket_name}/`);
|
|||
|
|
if (photoUrlParts.length > 1) {
|
|||
|
|
bucket = exhibit_photo_bucket_name;
|
|||
|
|
fileName = photoUrlParts[1];
|
|||
|
|
} else {
|
|||
|
|
throw new Error('无法解析文件路径');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将Markdown内容转换为Blob
|
|||
|
|
const blob = new Blob([this.mdContent], { type: 'text/markdown' });
|
|||
|
|
const file = new File([blob], fileName.split('/').pop() || 'content.md', { type: 'text/markdown' });
|
|||
|
|
|
|||
|
|
// 先删除旧文件（根据经验记忆，某些MinIO版本需要先删除再上传）
|
|||
|
|
await this.removeMinioObject(bucket, fileName);
|
|||
|
|
|
|||
|
|
// 上传新内容
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', file);
|
|||
|
|
formData.append('bucket', bucket);
|
|||
|
|
formData.append('file_name', fileName);
|
|||
|
|
|
|||
|
|
const response = await fetch(`${BASE_API_URL}/minio/put`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData,
|
|||
|
|
headers: {
|
|||
|
|
"Authorization": "Bearer ragflow-NhZTY5Y2M4YWQ1MzExZWY4Zjc3MDI0Mm"
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('上传失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const res = await response.json();
|
|||
|
|
const {data} = res;
|
|||
|
|
|
|||
|
|
if (data?.put) {
|
|||
|
|
// 验证上传是否成功：下载文件并检查内容
|
|||
|
|
const verifyResponse = await fetch(this.formData.md_file_url + '?t=' + Date.now());
|
|||
|
|
if (verifyResponse.ok) {
|
|||
|
|
const verifyContent = await verifyResponse.text();
|
|||
|
|
if (verifyContent === this.mdContent) {
|
|||
|
|
loading.close();
|
|||
|
|
this.$message.success('Markdown内容已成功保存到MinIO并验证通过');
|
|||
|
|
} else {
|
|||
|
|
loading.close();
|
|||
|
|
this.$message.warning('Markdown内容已上传，但验证发现内容可能未完全更新，请刷新后重试');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
loading.close();
|
|||
|
|
this.$message.success('Markdown内容已保存到MinIO');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
loading.close();
|
|||
|
|
this.$message.error('保存失败：服务器返回失败状态');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('保存Markdown内容到MinIO失败:', error);
|
|||
|
|
this.$message.error('保存Markdown内容失败: ' + error.message);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 从MD文件URL中删除MinIO对象（独立函数）
|
|||
|
|
async removeMdFileFromMinio(md_file_url) {
|
|||
|
|
if (!md_file_url || md_file_url === '') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const urlParts = md_file_url.split(`${exhibit_md_bucket_name}/`);
|
|||
|
|
if (urlParts.length > 1) {
|
|||
|
|
const fileName = urlParts[1];
|
|||
|
|
if (fileName && fileName !== "") {
|
|||
|
|
await this.removeMinioObject(exhibit_md_bucket_name, fileName);
|
|||
|
|
console.log('已删除Markdown文件:', fileName);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧的URL格式或其他bucket
|
|||
|
|
const photoUrlParts = md_file_url.split(`${exhibit_photo_bucket_name}/`);
|
|||
|
|
if (photoUrlParts.length > 1) {
|
|||
|
|
const fileName = photoUrlParts[1];
|
|||
|
|
if (fileName && fileName !== "") {
|
|||
|
|
await this.removeMinioObject(exhibit_photo_bucket_name, fileName);
|
|||
|
|
console.log('已删除Markdown文件(photo bucket):', fileName);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除 Markdown 文件URL
|
|||
|
|
async removeMdFileUrl() {
|
|||
|
|
this.$confirm('确认删除Markdown文件地址？')
|
|||
|
|
.then(async () => {
|
|||
|
|
// 调用独立的删除函数
|
|||
|
|
await this.removeMdFileFromMinio(this.formData.md_file_url);
|
|||
|
|
|
|||
|
|
await this.updateAntiqueMdFile("");
|
|||
|
|
this.mdContent = "";
|
|||
|
|
this.$message.success('删除Markdown文件地址成功');
|
|||
|
|
}).catch(() => {});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新数据库中的 md_file_url
|
|||
|
|
async updateAntiqueMdFile(md_file_url) {
|
|||
|
|
let antique_data = {
|
|||
|
|
mesum_id: this.mesumSelectedId,
|
|||
|
|
md_file_url: md_file_url
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const response = await fetch(`${BASE_API_URL}/mesum/antique/update/${this.formData.mesum_id}/${this.formData.id}`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Authorization': 'Bearer ragflow-NhZTY5Y2M4YWQ1MzExZWY4Zjc3MDI0Mm'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(antique_data)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
const {data} = result;
|
|||
|
|
if (data && data.update) {
|
|||
|
|
this.formData.md_file_url = md_file_url;
|
|||
|
|
this.triggerRefreshAntiques();
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 生成 Markdown TTS
|
|||
|
|
async generateMdTTS() {
|
|||
|
|
if (!this.mdContent || this.mdContent.length === 0) {
|
|||
|
|
this.$message.warning('Markdown内容为空，无法生成语音');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.downloadFilename_md = 'md_tts_' + window.pinyin.getFullChars(this.formData.label) + '.mp3';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
this.isTTSGenerating = true;
|
|||
|
|
this.preview.audioSrc_md = null;
|
|||
|
|
this.preview.downReady_md = false;
|
|||
|
|
|
|||
|
|
const wsUrl = `${WEIXIN_WS_URL}/tts/chats/${chatId}/tts/x-tts-type-is-TextToTts`;
|
|||
|
|
const ws = new WebSocket(wsUrl);
|
|||
|
|
|
|||
|
|
let audioChunks = [];
|
|||
|
|
|
|||
|
|
ws.onopen = () => {
|
|||
|
|
ws.send(JSON.stringify({
|
|||
|
|
service_type: "TextToTts",
|
|||
|
|
text: this.mdContent,
|
|||
|
|
params: {
|
|||
|
|
tts_stream_format: 'mp3',
|
|||
|
|
tts_sample_rate: 22050,
|
|||
|
|
model_name: this.voiceSelected_md,
|
|||
|
|
delay_gen_audio: true
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onmessage = async (event) => {
|
|||
|
|
if (typeof event.data === 'string') {
|
|||
|
|
try {
|
|||
|
|
const message = JSON.parse(event.data);
|
|||
|
|
if (message.error) {
|
|||
|
|
this.showError(message.error);
|
|||
|
|
} else if (message.status === "completed") {
|
|||
|
|
ws.close();
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log("Non-JSON message:", event.data);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
audioChunks.push(event.data);
|
|||
|
|
console.log("收到音频数据", event.data.size);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onclose = () => {
|
|||
|
|
this.isTTSGenerating = false;
|
|||
|
|
|
|||
|
|
if (audioChunks.length > 0) {
|
|||
|
|
const blob = new Blob(audioChunks, {type: 'audio/mpeg'});
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
|
|||
|
|
if (this.preview.audioSrc_md) {
|
|||
|
|
URL.revokeObjectURL(this.preview.audioSrc_md);
|
|||
|
|
}
|
|||
|
|
this.preview.audioSrc_md = url;
|
|||
|
|
this.preview.tempBlob_md = blob;
|
|||
|
|
this.preview.downReady_md = true;
|
|||
|
|
this.preview.visible_md = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onerror = (error) => {
|
|||
|
|
this.isTTSGenerating = false;
|
|||
|
|
this.showError("WebSocket连接错误: " + error.message);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
this.isTTSGenerating = false;
|
|||
|
|
this.showError(error.message);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 下载 Markdown TTS
|
|||
|
|
downloadMdTTS() {
|
|||
|
|
this.downloadFile(this.preview.audioSrc_md, this.downloadFilename_md);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
downloadFile(content, filename) {
|
|||
|
|
let blob = this.preview.tempBlob_md;
|
|||
|
|
this.downloadStateMd = "download";
|
|||
|
|
|
|||
|
|
if (!blob) {
|
|||
|
|
this.showError("没有可下载的音频");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = filename;
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
document.body.removeChild(a);
|
|||
|
|
|
|||
|
|
this.preview.visible_md = true;
|
|||
|
|
this.downloadStateMd = "finished";
|
|||
|
|
this.resetDownloadState();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 音色选择变化
|
|||
|
|
// eslint-disable-next-line no-unused-vars
|
|||
|
|
voiceSelectedChangeMd(value) {
|
|||
|
|
this.preview.visible_md = false;
|
|||
|
|
this.preview.audioSrc_md = "";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理上传文件变化
|
|||
|
|
handleUploadChangeMd(file) {
|
|||
|
|
console.log(file);
|
|||
|
|
this.uploadFile_md = file.raw;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提交 TTS 上传
|
|||
|
|
submitMdTTSUpload() {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', this.uploadFile_md);
|
|||
|
|
formData.append('bucket', exhibit_tts_bucket_name);
|
|||
|
|
formData.append('file_name', `${this.photo_prefix}/${this.uploadFileName_md}`);
|
|||
|
|
|
|||
|
|
fetch(`${BASE_API_URL}/minio/put`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData,
|
|||
|
|
headers: {
|
|||
|
|
"Authorization": "Bearer ragflow-NhZTY5Y2M4YWQ1MzExZWY4Zjc3MDI0Mm"
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(response => {
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('Network response was not ok');
|
|||
|
|
}
|
|||
|
|
return response.json();
|
|||
|
|
})
|
|||
|
|
.then(res => {
|
|||
|
|
const {data} = res;
|
|||
|
|
if (data?.put) {
|
|||
|
|
this.updateAntiqueMdTts(data?.url);
|
|||
|
|
this.$message.success('上传成功');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('上传失败:', error);
|
|||
|
|
this.$message.error('上传失败');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除 Markdown TTS URL
|
|||
|
|
async removeMdTtsUrl() {
|
|||
|
|
this.$confirm('确认删除Markdown TTS音频地址？')
|
|||
|
|
.then(async () => {
|
|||
|
|
if (this.formData.md_tts_url && this.formData.md_tts_url !== '') {
|
|||
|
|
const urlParts = this.formData.md_tts_url.split(`${exhibit_tts_bucket_name}/`);
|
|||
|
|
if (urlParts.length > 1) {
|
|||
|
|
const fileName = urlParts[1];
|
|||
|
|
if (fileName && fileName !== "") {
|
|||
|
|
await this.removeMinioObject(exhibit_tts_bucket_name, fileName);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (await this.updateAntiqueMdTts("")) {
|
|||
|
|
this.$message('删除音频地址成功');
|
|||
|
|
} else {
|
|||
|
|
this.$message('删除音频地址失败');
|
|||
|
|
}
|
|||
|
|
}).catch(() => {
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新数据库中的 md_tts_url
|
|||
|
|
async updateAntiqueMdTts(tts_url) {
|
|||
|
|
let antique_data = {
|
|||
|
|
mesum_id: this.mesumSelectedId,
|
|||
|
|
md_tts_url: tts_url
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const response = await fetch(`${BASE_API_URL}/mesum/antique/update/${this.formData.mesum_id}/${this.formData.id}`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Authorization': 'Bearer ragflow-NhZTY5Y2M4YWQ1MzExZWY4Zjc3MDI0Mm'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(antique_data)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
const {data} = result;
|
|||
|
|
if (data && data.update) {
|
|||
|
|
this.formData.md_tts_url = tts_url;
|
|||
|
|
this.triggerRefreshAntiques();
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除 MinIO 对象
|
|||
|
|
async removeMinioObject(bucket, fileName) {
|
|||
|
|
fetch(`${BASE_API_URL}/minio/rm`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
bucket: bucket,
|
|||
|
|
file_name: fileName
|
|||
|
|
}),
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
"Authorization": "Bearer ragflow-NhZTY5Y2M4YWQ1MzExZWY4Zjc3MDI0Mm"
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(response => {
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('Network response was not ok');
|
|||
|
|
}
|
|||
|
|
return response.json();
|
|||
|
|
})
|
|||
|
|
.then(res => {
|
|||
|
|
const {data} = res;
|
|||
|
|
if (data?.rm) {
|
|||
|
|
console.log('删除MinIO对象成功');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('删除minio object 失败:', error);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
resetDownloadState() {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.downloadStateMd = 'idle';
|
|||
|
|
}, 3000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
showError(message) {
|
|||
|
|
this.result.error = message;
|
|||
|
|
this.result.success = false;
|
|||
|
|
setTimeout(() => this.result.error = null, 5000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleDialogClose(done) {
|
|||
|
|
const audioMd = this.$refs.audioPlayerMd;
|
|||
|
|
if (audioMd) {
|
|||
|
|
audioMd.pause();
|
|||
|
|
}
|
|||
|
|
done();
|
|||
|
|
this.closeDialog();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
closeDialog() {
|
|||
|
|
this.dialogVisible = false;
|
|||
|
|
this.$emit("update:close", true);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
triggerRefreshAntiques() {
|
|||
|
|
this.$emit("update:refresh", this.formData.id);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
visible: {
|
|||
|
|
handler(newVal) {
|
|||
|
|
this.dialogVisible = newVal;
|
|||
|
|
if (newVal) {
|
|||
|
|
this.formData = {...this.formData, ...this.initData};
|
|||
|
|
this.mdContent = "";
|
|||
|
|
this.mdFile = null;
|
|||
|
|
this.downloadStateMd = 'idle';
|
|||
|
|
this.downloadFilename_md = 'md_tts_' + window.pinyin.getFullChars(this.formData.label || 'default') + '.mp3';
|
|||
|
|
}
|
|||
|
|
console.log("watch visible", newVal, this.initData);
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
},
|
|||
|
|
mesumSelectedId: {
|
|||
|
|
handler(newVal) {
|
|||
|
|
console.log("watch mesumSelectedId", newVal);
|
|||
|
|
if (newVal == 2) {
|
|||
|
|
this.voiceSelected_md = "sambert-zhichu-v1@Tongyi-Qianwen";
|
|||
|
|
} else if (newVal == 1) {
|
|||
|
|
this.voiceSelected_md = "cosyvoice-v1/longyuan@Tongyi-Qianwen";
|
|||
|
|
} else {
|
|||
|
|
this.voiceSelected_md = "sambert-zhichu-v1@Tongyi-Qianwen";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
uploadFileName_md() {
|
|||
|
|
if (this.uploadFile_md && this.uploadFile_md.name)
|
|||
|
|
return this.uploadFile_md.name;
|
|||
|
|
else
|
|||
|
|
return "";
|
|||
|
|
},
|
|||
|
|
downloadPromptMd() {
|
|||
|
|
if (this.downloadStateMd === 'idle') return "";
|
|||
|
|
if (this.downloadStateMd === 'download') return "下载中...";
|
|||
|
|
if (this.downloadStateMd === 'save') return "存储中...";
|
|||
|
|
if (this.downloadStateMd === 'finished') return "完成";
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.dialog-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__header {
|
|||
|
|
background: #f0f9eb !important;
|
|||
|
|
padding: 2px 2px !important;
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__title {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
color: #67C23A !important;
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__headerbtn {
|
|||
|
|
margin-top: 3px !important;
|
|||
|
|
top: 2px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group {
|
|||
|
|
padding: 5px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
border-bottom: 2px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input, select, textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
margin: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-player {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
height: 40px
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-message {
|
|||
|
|
color: red;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-message {
|
|||
|
|
color: green;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-section {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
border-top: 2px solid #eee;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
height: 10vh
|
|||
|
|
}
|
|||
|
|
</style>
|