384 lines
13 KiB
HTML
384 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>图片上传与识别</title>
|
||
<style>
|
||
body {margin: 0;font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;background: #fafafa;}
|
||
/* 导航栏样式 */
|
||
.sidebar {position: fixed;top: 0;left: 0;width: 180px;height: 100vh;background: #1e1e2e;color: white;padding: 20px;box-shadow: 2px 0 5px rgba(0,0,0,0.1);z-index: 1000;display: flex;
|
||
flex-direction: column;align-items: center;}
|
||
.user-id {text-align: center;margin-bottom: 0px;}
|
||
.sidebar h3 {margin-top: 0;font-size: 18px;color: #add8e6;text-align: center; margin-bottom: 20px;}
|
||
.navigation-links {width: 100%;margin-top: 60px;}
|
||
.sidebar a,
|
||
.sidebar button {display: block;color: #8be9fd;text-decoration: none;margin: 10px 0;font-size: 16px;padding: 15px;border-radius: 4px;background: transparent;
|
||
border: none;cursor: pointer; width: calc(100% - 40px);text-align: left;transition: all 0.2s ease;}
|
||
.sidebar a:hover,
|
||
.sidebar button:hover {color: #ff79c6;background-color: rgba(139, 233, 253, 0.2);}
|
||
/* 主内容区 - 改进后的样式 */
|
||
.main-content {margin-left: 200px;padding: 20px;color: #333;}
|
||
.container { max-width: 1200px;margin: 0 auto;background: #fff;border-radius: 14px;box-shadow: 0 10px 24px rgba(31,35,40,0.08);
|
||
padding: 24px;}
|
||
.header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 12px;}
|
||
.header h2 {margin: 0; color: #1e293b;}
|
||
.header p {margin: 5px 0 0 0;color: #64748b;font-size: 14px;}
|
||
.upload-section { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px;padding: 32px; text-align: center;transition: all 0.3s ease;
|
||
margin-bottom: 24px;}
|
||
.upload-section:hover {border-color: #4f46e5; background: #f1f5f9; }
|
||
.upload-section.drag-over {border-color: #4f46e5; background: #e0e7ff; }
|
||
.upload-section input[type="file"] {margin: 15px 0;}
|
||
.btn {padding: 10px 16px;border: none;border-radius: 8px;cursor: pointer;margin: 0 4px;font-size: 14px;transition: all 0.2s ease; }
|
||
.btn-primary { background: #4f46e5; color: #fff; }
|
||
.btn-primary:hover { background: #4338ca;}
|
||
.btn-secondary {background: #e2e8f0;color: #334155; }
|
||
.btn-secondary:hover { background: #cbd5e1;}
|
||
.btn-danger { background: #ef4444;color: #fff;}
|
||
.btn-danger:hover { background: #dc2626;}
|
||
.preview-container {display: flex; gap: 24px; margin: 24px 0;}
|
||
@media (max-width: 768px) {
|
||
.preview-container {flex-direction: column;}
|
||
}
|
||
.preview-box {flex: 1; text-align: center; }
|
||
.preview-box h3 {margin-top: 0;color: #334155; }
|
||
.preview-box img { max-width: 100%;max-height: 300px;border: 1px solid #e2e8f0;border-radius: 8px;object-fit: contain;}
|
||
.result-box {flex: 1;}
|
||
.result-box h3 { margin-top: 0; color: #334155;}
|
||
.form-controls { display: flex;gap: 8px;margin-bottom: 12px;flex-wrap: wrap;}
|
||
#kvForm {border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; max-height: 300px; overflow: auto;margin-bottom: 12px;background: white;}
|
||
.form-row {display: grid;grid-template-columns: 1fr 1fr auto;gap: 8px; margin-bottom: 6px; }
|
||
.form-row input {padding: 8px;border: 1px solid #cbd5e1;border-radius: 4px;}
|
||
#resultBox { width: 100%;min-height: 200px;font-family: ui-monospace, SFMono-Regular, Menlo, monospace;font-size: 14px; padding: 12px; border: 1px solid #e2e8f0;
|
||
border-radius: 8px; resize: vertical;box-sizing: border-box; }
|
||
.status-message { padding: 10px; margin: 10px 0; border-radius: 6px; display: none; }
|
||
.status-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
||
.status-message.error { background-color: #f8d7da;color: #721c24; border: 1px solid #f5c6cb; }
|
||
.action-buttons { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 左侧固定栏目 -->
|
||
<div class="sidebar">
|
||
<div class="user-id">
|
||
<h3>你好，{{ username|default:"访客" }}</h3>
|
||
</div>
|
||
<div class="navigation-links">
|
||
<a href="{% url 'main:home' %}">返回主页</a>
|
||
<a id="logoutBtn">退出登录</a>
|
||
<div id="logoutMsg"></div>
|
||
{% csrf_token %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区域 -->
|
||
<div class="main-content">
|
||
<div class="container">
|
||
<div class="header">
|
||
<div>
|
||
<h2>图片上传与识别</h2>
|
||
<p>选择图片后上传，服务端调用大模型解析为可编辑的 JSON，再确认入库。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="upload-section" id="dropArea">
|
||
<h3>上传图片</h3>
|
||
<p>点击下方按钮选择图片，或拖拽图片到此区域</p>
|
||
<form id="uploadForm" enctype="multipart/form-data">
|
||
{% csrf_token %}
|
||
<input type="file" id="fileInput" name="file" accept="image/*" required />
|
||
<br>
|
||
<button type="submit" class="btn btn-primary">上传并识别</button>
|
||
</form>
|
||
<div class="status-message" id="uploadMsg"></div>
|
||
</div>
|
||
|
||
<div class="preview-container">
|
||
<div class="preview-box">
|
||
<h3>图片预览</h3>
|
||
<img id="preview" alt="预览" />
|
||
</div>
|
||
|
||
<div class="result-box">
|
||
<h3>识别结果（可编辑）</h3>
|
||
<div class="form-controls">
|
||
<button id="addFieldBtn" class="btn btn-secondary" type="button">添加字段</button>
|
||
<button id="syncFromTextBtn" class="btn btn-secondary" type="button">从文本区刷新表单</button>
|
||
</div>
|
||
<div id="kvForm"></div>
|
||
<textarea id="resultBox" placeholder="识别结果JSON将显示在这里"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<button id="confirmBtn" class="btn btn-primary" disabled>确认并入库</button>
|
||
<button id="clearBtn" class="btn btn-secondary" type="button">清空</button>
|
||
<span id="confirmMsg" class="muted"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function getCookie(name) {
|
||
const value = `; ${document.cookie}`;
|
||
const parts = value.split(`; ${name}=`);
|
||
if (parts.length === 2) return parts.pop().split(';').shift();
|
||
}
|
||
|
||
const uploadForm = document.getElementById('uploadForm');
|
||
const fileInput = document.getElementById('fileInput');
|
||
const preview = document.getElementById('preview');
|
||
const resultBox = document.getElementById('resultBox');
|
||
const uploadMsg = document.getElementById('uploadMsg');
|
||
const confirmBtn = document.getElementById('confirmBtn');
|
||
const clearBtn = document.getElementById('clearBtn');
|
||
const confirmMsg = document.getElementById('confirmMsg');
|
||
const kvForm = document.getElementById('kvForm');
|
||
const addFieldBtn = document.getElementById('addFieldBtn');
|
||
const syncFromTextBtn = document.getElementById('syncFromTextBtn');
|
||
const dropArea = document.getElementById('dropArea');
|
||
|
||
let currentImageRel = '';
|
||
|
||
// 拖拽上传功能
|
||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||
});
|
||
|
||
function preventDefaults(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
['dragenter', 'dragover'].forEach(eventName => {
|
||
dropArea.addEventListener(eventName, highlight, false);
|
||
});
|
||
|
||
['dragleave', 'drop'].forEach(eventName => {
|
||
dropArea.addEventListener(eventName, unhighlight, false);
|
||
});
|
||
|
||
function highlight() {
|
||
dropArea.classList.add('drag-over');
|
||
}
|
||
|
||
function unhighlight() {
|
||
dropArea.classList.remove('drag-over');
|
||
}
|
||
|
||
dropArea.addEventListener('drop', handleDrop, false);
|
||
|
||
function handleDrop(e) {
|
||
const dt = e.dataTransfer;
|
||
const files = dt.files;
|
||
if (files.length) {
|
||
fileInput.files = files;
|
||
const event = new Event('change', { bubbles: true });
|
||
fileInput.dispatchEvent(event);
|
||
}
|
||
}
|
||
|
||
// 文件选择后预览
|
||
fileInput.addEventListener('change', function(e) {
|
||
const file = e.target.files[0];
|
||
if (file && file.type.startsWith('image/')) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
preview.src = e.target.result;
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
});
|
||
|
||
function createRow(k = '', v = '') {
|
||
const row = document.createElement('div');
|
||
row.className = 'form-row';
|
||
const keyInput = document.createElement('input');
|
||
keyInput.type = 'text';
|
||
keyInput.placeholder = '字段名';
|
||
keyInput.value = k;
|
||
const valInput = document.createElement('input');
|
||
valInput.type = 'text';
|
||
valInput.placeholder = '字段值';
|
||
valInput.value = typeof v === 'object' ? JSON.stringify(v) : (v ?? '');
|
||
const delBtn = document.createElement('button');
|
||
delBtn.type = 'button';
|
||
delBtn.className = 'btn btn-danger';
|
||
delBtn.textContent = '删除';
|
||
delBtn.onclick = () => {
|
||
if (kvForm.children.length > 1) {
|
||
kvForm.removeChild(row);
|
||
} else {
|
||
keyInput.value = '';
|
||
valInput.value = '';
|
||
}
|
||
syncTextarea();
|
||
};
|
||
keyInput.oninput = syncTextarea;
|
||
valInput.oninput = syncTextarea;
|
||
row.appendChild(keyInput);
|
||
row.appendChild(valInput);
|
||
row.appendChild(delBtn);
|
||
return row;
|
||
}
|
||
|
||
function renderFormFromObject(obj) {
|
||
kvForm.innerHTML = '';
|
||
Object.keys(obj || {}).forEach(k => {
|
||
kvForm.appendChild(createRow(k, obj[k]));
|
||
});
|
||
if (!kvForm.children.length) kvForm.appendChild(createRow());
|
||
syncTextarea();
|
||
}
|
||
|
||
function objectFromForm() {
|
||
const obj = {};
|
||
Array.from(kvForm.children).forEach(row => {
|
||
const [kInput, vInput] = row.querySelectorAll('input');
|
||
const k = (kInput.value || '').trim();
|
||
if (!k) return;
|
||
const raw = vInput.value;
|
||
try {
|
||
obj[k] = JSON.parse(raw);
|
||
} catch (_) {
|
||
obj[k] = raw;
|
||
}
|
||
});
|
||
return obj;
|
||
}
|
||
|
||
function syncTextarea() {
|
||
const obj = objectFromForm();
|
||
resultBox.value = JSON.stringify(obj, null, 2);
|
||
}
|
||
|
||
addFieldBtn.addEventListener('click', () => {
|
||
kvForm.appendChild(createRow());
|
||
syncTextarea();
|
||
});
|
||
|
||
syncFromTextBtn.addEventListener('click', () => {
|
||
try {
|
||
const obj = JSON.parse(resultBox.value || '{}');
|
||
renderFormFromObject(obj);
|
||
uploadMsg.textContent = '已从文本区刷新表单';
|
||
uploadMsg.className = 'status-message success';
|
||
uploadMsg.style.display = 'block';
|
||
setTimeout(() => {
|
||
uploadMsg.style.display = 'none';
|
||
}, 2000);
|
||
} catch (e) {
|
||
uploadMsg.textContent = '文本区不是有效JSON';
|
||
uploadMsg.className = 'status-message error';
|
||
uploadMsg.style.display = 'block';
|
||
}
|
||
});
|
||
|
||
uploadForm.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
uploadMsg.textContent = '';
|
||
confirmMsg.textContent = '';
|
||
confirmBtn.disabled = true;
|
||
resultBox.value = '';
|
||
currentImageRel = '';
|
||
|
||
const file = fileInput.files[0];
|
||
if (!file) {
|
||
uploadMsg.textContent = '请选择图片文件';
|
||
uploadMsg.className = 'status-message error';
|
||
uploadMsg.style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
try {
|
||
const resp = await fetch('/elastic/upload/', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: { 'X-CSRFToken': getCookie('csrftoken') || '' },
|
||
body: formData,
|
||
});
|
||
const data = await resp.json();
|
||
if (!resp.ok || data.status !== 'success') {
|
||
throw new Error(data.message || '上传识别失败');
|
||
}
|
||
uploadMsg.textContent = data.message || '识别成功';
|
||
uploadMsg.className = 'status-message success';
|
||
uploadMsg.style.display = 'block';
|
||
preview.src = data.image_url;
|
||
renderFormFromObject(data.data || {});
|
||
currentImageRel = data.image;
|
||
confirmBtn.disabled = false;
|
||
} catch (e) {
|
||
uploadMsg.textContent = e.message || '发生错误';
|
||
uploadMsg.className = 'status-message error';
|
||
uploadMsg.style.display = 'block';
|
||
}
|
||
});
|
||
|
||
confirmBtn.addEventListener('click', async () => {
|
||
confirmMsg.textContent = '';
|
||
try {
|
||
const edited = objectFromForm();
|
||
const resp = await fetch('/elastic/confirm/', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRFToken': getCookie('csrftoken') || ''
|
||
},
|
||
body: JSON.stringify({ data: edited, image: currentImageRel })
|
||
});
|
||
const data = await resp.json();
|
||
if (!resp.ok || data.status !== 'success') {
|
||
throw new Error(data.message || '录入失败');
|
||
}
|
||
confirmMsg.textContent = data.message || '录入成功';
|
||
confirmMsg.style.color = '#179957';
|
||
} catch (e) {
|
||
confirmMsg.textContent = e.message || '发生错误';
|
||
confirmMsg.style.color = '#d14343';
|
||
}
|
||
});
|
||
|
||
clearBtn.addEventListener('click', () => {
|
||
fileInput.value = '';
|
||
preview.src = '';
|
||
resultBox.value = '';
|
||
kvForm.innerHTML = '';
|
||
kvForm.appendChild(createRow()); // 保留一个空行
|
||
uploadMsg.textContent = '';
|
||
confirmMsg.textContent = '';
|
||
confirmBtn.disabled = true;
|
||
});
|
||
|
||
// 退出登录处理
|
||
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
||
const msg = document.getElementById('logoutMsg');
|
||
msg.textContent = '';
|
||
const csrftoken = getCookie('csrftoken');
|
||
try {
|
||
const resp = await fetch('/accounts/logout/', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRFToken': csrftoken || ''
|
||
},
|
||
body: JSON.stringify({})
|
||
});
|
||
const data = await resp.json();
|
||
if (!resp.ok || !data.ok) {
|
||
throw new Error('登出失败');
|
||
}
|
||
document.cookie = 'sessionid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
|
||
document.cookie = 'csrftoken=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
|
||
window.location.href = data.redirect_url;
|
||
} catch (e) {
|
||
msg.textContent = e.message || '发生错误';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |