2ec2c0a1ab
- 添加MDF文件导出功能 - 集成阿里云OCR大模型识别 - 添加百度智能云AI照片评分 - 集成DeepSeek大模型创意文案生成 - 完善文档和配置管理 - 使用uv进行现代化依赖管理 - 添加完整的.gitignore配置
416 lines
13 KiB
JavaScript
416 lines
13 KiB
JavaScript
// 全局变量
|
||
let currentFile = null;
|
||
|
||
// 标签页切换功能
|
||
function openTab(tabName) {
|
||
// 隐藏所有标签页内容
|
||
const tabContents = document.getElementsByClassName('tab-content');
|
||
for (let i = 0; i < tabContents.length; i++) {
|
||
tabContents[i].classList.remove('active');
|
||
}
|
||
|
||
// 移除所有标签按钮的激活状态
|
||
const tabButtons = document.getElementsByClassName('tab-button');
|
||
for (let i = 0; i < tabButtons.length; i++) {
|
||
tabButtons[i].classList.remove('active');
|
||
}
|
||
|
||
// 显示选中的标签页内容
|
||
document.getElementById(tabName).classList.add('active');
|
||
|
||
// 激活对应的标签按钮
|
||
event.currentTarget.classList.add('active');
|
||
|
||
// 清空当前文件
|
||
currentFile = null;
|
||
clearResults();
|
||
}
|
||
|
||
// 文件上传处理
|
||
function setupFileUpload(inputId, uploadAreaId) {
|
||
const fileInput = document.getElementById(inputId);
|
||
const uploadArea = document.getElementById(uploadAreaId);
|
||
|
||
fileInput.addEventListener('change', function(e) {
|
||
if (this.files.length > 0) {
|
||
handleFileUpload(this.files[0], uploadArea);
|
||
}
|
||
});
|
||
|
||
// 拖拽上传功能
|
||
uploadArea.addEventListener('dragover', function(e) {
|
||
e.preventDefault();
|
||
this.style.borderColor = '#2980b9';
|
||
this.style.background = '#e9ecef';
|
||
});
|
||
|
||
uploadArea.addEventListener('dragleave', function(e) {
|
||
e.preventDefault();
|
||
this.style.borderColor = '#3498db';
|
||
this.style.background = '#f8f9fa';
|
||
});
|
||
|
||
uploadArea.addEventListener('drop', function(e) {
|
||
e.preventDefault();
|
||
this.style.borderColor = '#3498db';
|
||
this.style.background = '#f8f9fa';
|
||
|
||
if (e.dataTransfer.files.length > 0) {
|
||
handleFileUpload(e.dataTransfer.files[0], uploadArea);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 处理文件上传
|
||
async function handleFileUpload(file, uploadArea) {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
showStatus('正在上传文件...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/upload', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
currentFile = result;
|
||
uploadArea.innerHTML = `
|
||
<div style="text-align: center;">
|
||
<p style="color: #27ae60; font-weight: bold;">✓ 文件上传成功</p>
|
||
<p>文件名: ${result.filename}</p>
|
||
<p>文件类型: ${result.file_type}</p>
|
||
<button onclick="clearFile('${uploadArea.id}')" class="btn" style="background: #e74c3c; color: white; margin-top: 10px;">重新选择</button>
|
||
</div>
|
||
`;
|
||
showStatus('文件上传成功！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('上传失败: ' + error.message, 'error');
|
||
uploadArea.innerHTML = `
|
||
<div class="upload-placeholder" onclick="document.getElementById('${fileInput.id}').click()">
|
||
<p>点击选择文件或拖拽文件到此处</p>
|
||
<p class="file-types">上传失败，请重试</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
// 清空文件选择
|
||
function clearFile(uploadAreaId) {
|
||
const uploadArea = document.getElementById(uploadAreaId);
|
||
const fileInputId = uploadAreaId.replace('-upload-area', '-file');
|
||
|
||
uploadArea.innerHTML = `
|
||
<input type="file" id="${fileInputId}" style="display: none;">
|
||
<div class="upload-placeholder" onclick="document.getElementById('${fileInputId}').click()">
|
||
<p>点击选择文件或拖拽文件到此处</p>
|
||
<p class="file-types">支持格式: 根据标签页不同</p>
|
||
</div>
|
||
`;
|
||
|
||
currentFile = null;
|
||
clearResults();
|
||
setupFileUpload(fileInputId, uploadAreaId);
|
||
}
|
||
|
||
// PDF处理功能
|
||
async function processPdf(action) {
|
||
if (!currentFile) {
|
||
showStatus('请先选择PDF文件', 'error');
|
||
return;
|
||
}
|
||
|
||
showStatus('正在处理PDF文件...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/process/pdf', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
filepath: currentFile.filepath,
|
||
action: action
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
if (action === 'extract') {
|
||
document.getElementById('pdf-result').innerHTML = `
|
||
<h4>提取的文本内容:</h4>
|
||
<div style="max-height: 300px; overflow-y: auto; background: white; padding: 15px; border-radius: 5px;">
|
||
${result.text || '未提取到文本内容'}
|
||
</div>
|
||
`;
|
||
} else if (action === 'to_excel') {
|
||
document.getElementById('pdf-result').innerHTML = `
|
||
<h4>转换成功!</h4>
|
||
<p>PDF文件已成功转换为Excel格式</p>
|
||
<a href="${result.download_url}" class="download-link" download>下载Excel文件</a>
|
||
`;
|
||
}
|
||
showStatus('PDF处理完成！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('处理失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 图片处理功能
|
||
async function processImage(action) {
|
||
if (!currentFile) {
|
||
showStatus('请先选择图片文件', 'error');
|
||
return;
|
||
}
|
||
|
||
showStatus('正在处理图片文件...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/process/image', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
filepath: currentFile.filepath,
|
||
action: action
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
if (action === 'extract') {
|
||
document.getElementById('image-result').innerHTML = `
|
||
<h4>识别的文字内容:</h4>
|
||
<div style="max-height: 300px; overflow-y: auto; background: white; padding: 15px; border-radius: 5px;">
|
||
${result.text || '未识别到文字内容'}
|
||
</div>
|
||
`;
|
||
} else {
|
||
const formatName = action === 'to_excel' ? 'Excel' : '文本';
|
||
document.getElementById('image-result').innerHTML = `
|
||
<h4>转换成功!</h4>
|
||
<p>图片文件已成功转换为${formatName}格式</p>
|
||
<a href="${result.download_url}" class="download-link" download>下载${formatName}文件</a>
|
||
`;
|
||
}
|
||
showStatus('图片处理完成！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('处理失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 格式转换功能
|
||
async function processFormat() {
|
||
if (!currentFile) {
|
||
showStatus('请先选择文件', 'error');
|
||
return;
|
||
}
|
||
|
||
const targetFormat = document.getElementById('target-format').value;
|
||
|
||
showStatus('正在转换文件格式...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/process/format', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
filepath: currentFile.filepath,
|
||
target_format: targetFormat
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
document.getElementById('format-result').innerHTML = `
|
||
<h4>转换成功!</h4>
|
||
<p>文件已成功转换为${targetFormat.toUpperCase()}格式</p>
|
||
<a href="${result.download_url}" class="download-link" download>下载文件</a>
|
||
`;
|
||
showStatus('格式转换完成！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('转换失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 网页抓取功能
|
||
async function processWeb() {
|
||
const url = document.getElementById('web-url').value;
|
||
const selector = document.getElementById('css-selector').value;
|
||
|
||
if (!url) {
|
||
showStatus('请输入网页URL', 'error');
|
||
return;
|
||
}
|
||
|
||
showStatus('正在抓取网页内容...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/process/web', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
url: url,
|
||
selector: selector
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
document.getElementById('web-result').innerHTML = `
|
||
<h4>抓取结果:</h4>
|
||
<div style="max-height: 300px; overflow-y: auto; background: white; padding: 15px; border-radius: 5px;">
|
||
${result.content || '未抓取到内容'}
|
||
</div>
|
||
`;
|
||
showStatus('网页抓取完成！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('抓取失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 网页抓取并导出为Excel
|
||
async function processWebToExcel() {
|
||
const url = document.getElementById('web-url').value;
|
||
const selector = document.getElementById('css-selector').value;
|
||
|
||
if (!url) {
|
||
showStatus('请输入网页URL', 'error');
|
||
return;
|
||
}
|
||
|
||
showStatus('正在抓取网页并导出为Excel...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/process/web', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
url: url,
|
||
selector: selector
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
document.getElementById('web-result').innerHTML = `
|
||
<h4>导出成功!</h4>
|
||
<p>网页内容已成功导出为Excel格式</p>
|
||
<a href="${result.download_url}" class="download-link" download>下载Excel文件</a>
|
||
`;
|
||
showStatus('网页导出完成！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('导出失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 数据库导出功能
|
||
async function processDatabase() {
|
||
if (!currentFile) {
|
||
showStatus('请先选择数据库文件', 'error');
|
||
return;
|
||
}
|
||
|
||
const targetFormat = document.getElementById('db-target-format').value;
|
||
const tableName = document.getElementById('table-name').value;
|
||
|
||
showStatus('正在导出数据库...', 'info');
|
||
|
||
try {
|
||
const response = await fetch('/process/database', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
filepath: currentFile.filepath,
|
||
target_format: targetFormat,
|
||
table_name: tableName
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
document.getElementById('database-result').innerHTML = `
|
||
<h4>导出成功!</h4>
|
||
<p>数据库已成功导出为${targetFormat.toUpperCase()}格式</p>
|
||
<a href="${result.download_url}" class="download-link" download>下载文件</a>
|
||
`;
|
||
showStatus('数据库导出完成！', 'success');
|
||
} else {
|
||
throw new Error(result.error);
|
||
}
|
||
} catch (error) {
|
||
showStatus('导出失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 显示状态消息
|
||
function showStatus(message, type) {
|
||
const statusEl = document.getElementById('status-message');
|
||
statusEl.textContent = message;
|
||
statusEl.className = `status-message status-${type}`;
|
||
statusEl.style.display = 'block';
|
||
|
||
setTimeout(() => {
|
||
statusEl.style.display = 'none';
|
||
}, 5000);
|
||
}
|
||
|
||
// 清空结果区域
|
||
function clearResults() {
|
||
const resultAreas = document.getElementsByClassName('result-area');
|
||
for (let i = 0; i < resultAreas.length; i++) {
|
||
resultAreas[i].innerHTML = '';
|
||
}
|
||
}
|
||
|
||
// 初始化页面
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 设置文件上传功能
|
||
setupFileUpload('pdf-file', 'pdf-upload-area');
|
||
setupFileUpload('image-file', 'image-upload-area');
|
||
setupFileUpload('format-file', 'format-upload-area');
|
||
setupFileUpload('db-file', 'db-upload-area');
|
||
|
||
// 设置输入框回车事件
|
||
document.getElementById('web-url').addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
processWeb();
|
||
}
|
||
});
|
||
}); |