메일 분석시스템 보완
This commit is contained in:
275
mailTest.html
275
mailTest.html
@@ -5,9 +5,118 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project Mail Manager</title>
|
||||
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
||||
<link rel="stylesheet" href="/style/style.css">
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<style>
|
||||
/* 모달 스타일 */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-content {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.select-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.select-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-sub);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.modal-select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-confirm {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* AI 추천 스타일 (Smart Mode) */
|
||||
.ai-recommend.smart-mode {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
|
||||
color: #4a69bd;
|
||||
border: 1px solid #d1d9ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 수동 선택 스타일 (Manual Mode) */
|
||||
.ai-recommend.manual-mode {
|
||||
display: inline-block;
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-sub);
|
||||
border: 1px dashed var(--border-color);
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.path-display {
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.path-display:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 경로 선택 모달 -->
|
||||
<div id="pathModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 style="margin:0; font-size:16px;">파일 보관 경로 선택</h3>
|
||||
<span style="cursor:pointer; font-size:20px;" onclick="closeModal()">×</span>
|
||||
</div>
|
||||
<div class="select-group">
|
||||
<label>1단계: 탭 (Tab)</label>
|
||||
<select id="tabSelect" class="modal-select" onchange="updateCategories()"></select>
|
||||
</div>
|
||||
<div class="select-group">
|
||||
<label>2단계: 카테고리 (Category)</label>
|
||||
<select id="categorySelect" class="modal-select" onchange="updateSubs()"></select>
|
||||
</div>
|
||||
<div class="select-group">
|
||||
<label>3단계: 서브카테고리 (Sub-Category)</label>
|
||||
<select id="subSelect" class="modal-select"></select>
|
||||
</div>
|
||||
<button class="btn-confirm" onclick="applyPathSelection()">경로 확정하기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="topbar">
|
||||
<div class="topbar-header">
|
||||
<a href="/"><h2>Project Master Test</h2></a>
|
||||
@@ -71,7 +180,7 @@
|
||||
<div class="ai-toggle-wrap">
|
||||
<span class="ai-label">AI 판단</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="aiToggle" checked onchange="renderFiles()">
|
||||
<input type="checkbox" id="aiToggle" onchange="renderFiles()">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -83,6 +192,57 @@
|
||||
|
||||
<script>
|
||||
let currentFiles = [];
|
||||
let editingIndex = -1;
|
||||
|
||||
const HIERARCHY = {
|
||||
"행정": {
|
||||
"계약": ["계약관리", "기성관리", "업무지시서", "인원관리"],
|
||||
"업무관리": ["업무일지(2025)", "업무일지(2025년 이전)", "발주처 정기보고", "본사업무보고", "공사감독일지", "양식서류"]
|
||||
},
|
||||
"설계성과품": {
|
||||
"시방서": ["공사시방서", "장비 반입허가 검토서"],
|
||||
"설계도면": ["공통", "토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"],
|
||||
"수량산출서": ["토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"],
|
||||
"내역서": ["단가산출서"],
|
||||
"보고서": ["실시설계보고서", "지반조사보고서", "구조계산서", "수리 및 전기계산서", "기타보고서", "기술자문 및 심의"],
|
||||
"측량계산부": ["측량계산부"],
|
||||
"설계단계 수행협의": ["회의·협의"]
|
||||
},
|
||||
"시공성과품": {
|
||||
"설계도면": ["공통", "토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"]
|
||||
},
|
||||
"시공검측": {
|
||||
"토공": ["검측 (깨기)", "검측 (연약지반)", "검측 (발파)", "검측 (노체)", "검측 (노상)", "검측 (토취장)"],
|
||||
"배수공": ["검측 (V형측구)", "검측 (산마루측구)", "검측 (U형측구)", "검측 (U형측구)(안)", "검측 (L형측구, J형측구)", "검측 (도수로)", "검측 (도수로)(안)", "검측 (횡배수관)", "검측 (종배수관)", "검측 (맹암거)", "검측 (통로암거)", "검측 (수로암거)", "검측 (호안공)", "검측 (옹벽공)", "검측 (용수개거)"],
|
||||
"구조물공": ["검측 (평목교-거더, 부대공)", "검측 (평목교)(안)", "검측 (개착터널, 생태통로)"],
|
||||
"포장공": ["검측 (기층, 보조기층)"],
|
||||
"부대공": ["검측 (환경)", "검측 (지장가옥,건물 철거)", "검측 (방음벽 등)"],
|
||||
"비탈면안전공": ["검측 (식생보호공)", "검측 (구조물보호공)"],
|
||||
"교통안전시설공": ["검측 (낙석방지책)"],
|
||||
"검측 양식서류": ["검측 양식서류"]
|
||||
},
|
||||
"설계변경": {
|
||||
"실정보고(어천~공주)": ["토공", "배수공", "교량공(평목교)", "구조물공", "포장공", "교통안전공", "부대공", "전기공사", "미확정공", "안전관리", "환경관리", "품질관리", "자재관리", "지장물", "기타"],
|
||||
"실정보고(대술~정안)": ["토공", "배수공", "비탈면안전공", "포장공", "부대공", "안전관리", "환경관리", "자재관리", "기타"],
|
||||
"기술지원 검토": ["토공", "배수공", "교량공(평목교)", "구조물&부대공", "기타"],
|
||||
"시공계획(어천~공주)": ["토공", "배수공", "교량공(평목교)", "구조물&부대&포장&교통안전공", "환경 및 품질관리"]
|
||||
},
|
||||
"공사관리": {
|
||||
"공정·일정": ["공정표", "월간 공정보고", "작업일보"],
|
||||
"품질 관리": ["품질시험계획서", "품질시험 실적보고", "콘크리트 타설현황[어천~공주(4차)]", "품질관리비 사용내역", "균열관리", "품질관리 양식서류"],
|
||||
"안전 관리": ["안전관리계획서", "안전관리 실적보고", "위험성 평가", "사전작업허가서", "안전관리비 사용내역", "안전관리수준평가", "안전관리 양식서류"],
|
||||
"환경 관리": ["환경영향평가", "사전재해영향성검토", "유지관리 및 보수점검", "환경보전비 사용내역", "건설폐기물 관리"],
|
||||
"자재 관리 (관급)": ["자재구매요청 (레미콘, 철근)", "자재구매요청 (그 외)", "납품기한", "계약 변경", "자재 반입·수불 관리", "자재관리 양식서류"],
|
||||
"자재 관리 (사급)": ["자재공급원 승인", "자재 반입·수불 관리", "자재 검수·확인"],
|
||||
"점검 (정리중)": ["내부점검", "외부점검"],
|
||||
"공문": ["접수(수신)", "발송(발신)", "하도급", "인력", "방침"]
|
||||
},
|
||||
"민원관리": {
|
||||
"민원(어천~공주)": ["처리대장", "보상", "공사일반", "환경분쟁"],
|
||||
"실정보고(어천~공주)": ["민원"],
|
||||
"실정보고(대술~정안)": ["민원"]
|
||||
}
|
||||
};
|
||||
|
||||
async function loadAttachments() {
|
||||
try {
|
||||
@@ -104,7 +264,17 @@
|
||||
item.className = 'attachment-item-wrap';
|
||||
item.style.marginBottom = "8px";
|
||||
|
||||
const btnAiClass = isAiActive ? 'btn-ai' : 'btn-normal';
|
||||
let pathText = "경로를 선택해주세요";
|
||||
let modeClass = "manual-mode";
|
||||
|
||||
if (file.analysis) {
|
||||
const prefix = file.analysis.isManual ? "선택 경로: " : "추천: ";
|
||||
pathText = `${prefix}${file.analysis.suggested_path}`;
|
||||
modeClass = file.analysis.isManual ? "manual-mode" : "smart-mode";
|
||||
} else if (isAiActive) {
|
||||
pathText = "AI 분석 대기 중...";
|
||||
modeClass = "smart-mode";
|
||||
}
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="attachment-item">
|
||||
@@ -114,10 +284,10 @@
|
||||
<div style="font-size:12px; font-weight:700;">${file.name}</div>
|
||||
<div style="font-size:10px; color:var(--text-sub);">${file.size}</div>
|
||||
</div>
|
||||
<span id="recommend-${index}" class="ai-recommend" style="display:none;">추천 위치 탐색 중...</span>
|
||||
<span id="recommend-${index}" class="ai-recommend path-display ${modeClass}" onclick="openPathModal(${index})">${pathText}</span>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn-upload ${btnAiClass}" onclick="startAnalysis(${index})">AI 분석</button>
|
||||
${isAiActive ? `<button class="btn-upload btn-ai" onclick="startAnalysis(${index})">AI 분석</button>` : ''}
|
||||
<button class="btn-upload btn-normal" onclick="confirmUpload(${index})">파일 업로드</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,6 +299,51 @@
|
||||
});
|
||||
}
|
||||
|
||||
function openPathModal(index) {
|
||||
editingIndex = index;
|
||||
const modal = document.getElementById('pathModal');
|
||||
const tabSelect = document.getElementById('tabSelect');
|
||||
tabSelect.innerHTML = Object.keys(HIERARCHY).map(tab => `<option value="${tab}">${tab}</option>`).join('');
|
||||
updateCategories();
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function updateCategories() {
|
||||
const tab = document.getElementById('tabSelect').value;
|
||||
const catSelect = document.getElementById('categorySelect');
|
||||
const cats = Object.keys(HIERARCHY[tab]);
|
||||
catSelect.innerHTML = cats.map(cat => `<option value="${cat}">${cat}</option>`).join('');
|
||||
updateSubs();
|
||||
}
|
||||
|
||||
function updateSubs() {
|
||||
const tab = document.getElementById('tabSelect').value;
|
||||
const cat = document.getElementById('categorySelect').value;
|
||||
const subSelect = document.getElementById('subSelect');
|
||||
const subs = HIERARCHY[tab][cat];
|
||||
subSelect.innerHTML = subs.map(sub => `<option value="${sub}">${sub}</option>`).join('');
|
||||
}
|
||||
|
||||
function applyPathSelection() {
|
||||
const tab = document.getElementById('tabSelect').value;
|
||||
const cat = document.getElementById('categorySelect').value;
|
||||
const sub = document.getElementById('subSelect').value;
|
||||
const fullPath = `${tab} > ${cat} > ${sub}`;
|
||||
|
||||
if (!currentFiles[editingIndex].analysis) {
|
||||
currentFiles[editingIndex].analysis = {};
|
||||
}
|
||||
currentFiles[editingIndex].analysis.suggested_path = fullPath;
|
||||
currentFiles[editingIndex].analysis.isManual = true;
|
||||
|
||||
renderFiles();
|
||||
closeModal();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('pathModal').style.display = 'none';
|
||||
}
|
||||
|
||||
async function startAnalysis(index) {
|
||||
const file = currentFiles[index];
|
||||
const logArea = document.getElementById(`log-area-${index}`);
|
||||
@@ -137,14 +352,21 @@
|
||||
|
||||
logArea.classList.add('active');
|
||||
logContent.innerHTML = '<div class="log-line log-info">>>> 3중 레이어 AI 분석 엔진 가동...</div>';
|
||||
recLabel.style.display = 'inline-block';
|
||||
recLabel.innerText = '분석 중...';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/analyze-file?filename=${encodeURIComponent(file.name)}`);
|
||||
const analysis = await res.json();
|
||||
if (analysis.error) throw new Error(analysis.error);
|
||||
|
||||
analysis.log_steps.forEach(step => {
|
||||
const result = analysis.final_result;
|
||||
const steps = [
|
||||
`1. 파일 포맷 분석: ${file.name.split('.').pop().toUpperCase()} 감지`,
|
||||
`2. 페이지 스캔: 총 ${analysis.total_pages}페이지 분석 완료`,
|
||||
`3. 문맥 추론: ${result.reason}`
|
||||
];
|
||||
|
||||
steps.forEach(step => {
|
||||
const line = document.createElement('div');
|
||||
line.className = 'log-line';
|
||||
line.innerText = " " + step;
|
||||
@@ -154,43 +376,32 @@
|
||||
const resultLine = document.createElement('div');
|
||||
resultLine.className = 'log-line log-success';
|
||||
resultLine.style.marginTop = "8px";
|
||||
resultLine.innerHTML = `[결과] ${analysis.suggested_path}<br>└ ${analysis.reason}`;
|
||||
resultLine.innerHTML = `[최종 결과] ${result.suggested_path}<br>└ 신뢰도: 100%`;
|
||||
logContent.appendChild(resultLine);
|
||||
|
||||
// 원본 보기 추가
|
||||
const details = document.createElement('details');
|
||||
details.style.marginTop = "5px";
|
||||
details.innerHTML = `
|
||||
<summary style="color:#da8cf1; cursor:pointer; font-size:10px;">[추출 원본 데이터 확인]</summary>
|
||||
<div style="color:#a0aec0; padding:8px; background:#2d3748; margin-top:5px; white-space:pre-wrap; max-height:150px; overflow-y:auto; border-radius:4px;">${analysis.raw_text}</div>
|
||||
`;
|
||||
logContent.appendChild(details);
|
||||
const snippetArea = document.createElement('div');
|
||||
snippetArea.style.cssText = "margin-top:10px; padding:10px; background:#1a202c; color:#a0aec0; font-size:11px; border-radius:4px; border-left:3px solid #63b3ed; max-height:100px; overflow-y:auto;";
|
||||
snippetArea.innerHTML = `<strong>[AI가 읽은 핵심 내용]</strong><br>${result.snippet || "텍스트 추출 불가"}`;
|
||||
logContent.appendChild(snippetArea);
|
||||
|
||||
recLabel.innerText = `추천: ${analysis.suggested_path}`;
|
||||
if(analysis.suggested_path === "분석실패") {
|
||||
recLabel.style.color = "#f21d0d";
|
||||
recLabel.style.background = "#fee9e7";
|
||||
}
|
||||
|
||||
currentFiles[index].analysis = analysis; // 결과 저장
|
||||
currentFiles[index].analysis = {
|
||||
suggested_path: result.suggested_path,
|
||||
isManual: false
|
||||
};
|
||||
renderFiles();
|
||||
|
||||
} catch (e) {
|
||||
logContent.innerHTML += '<div class="log-line" style="color:red;">ERR: 분석 오류</div>';
|
||||
logContent.innerHTML += `<div class="log-line" style="color:red;">ERR: ${e.message}</div>`;
|
||||
recLabel.innerText = '분석 실패';
|
||||
}
|
||||
}
|
||||
|
||||
function confirmUpload(index) {
|
||||
const file = currentFiles[index];
|
||||
const path = file.analysis ? file.analysis.suggested_path : "선택한 탭";
|
||||
|
||||
let message = `[${file.name}] 파일을 업로드하시겠습니까?`;
|
||||
if(file.analysis && file.analysis.suggested_path !== "분석실패") {
|
||||
message = `AI가 추천한 위치로 업로드하시겠습니까?\n\n위치: ${path}`;
|
||||
}
|
||||
|
||||
if (confirm(message)) {
|
||||
alert("업로드가 완료되었습니다.");
|
||||
}
|
||||
if(file.analysis) message = `정해진 위치로 업로드하시겠습니까?\n\n위치: ${path}`;
|
||||
if (confirm(message)) alert("업로드가 완료되었습니다.");
|
||||
}
|
||||
|
||||
loadAttachments();
|
||||
|
||||
Reference in New Issue
Block a user