428 lines
20 KiB
HTML
428 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>글벗 Light - 상시 업무용 보고서 생성기</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Noto Sans KR', sans-serif; }
|
|
.gradient-bg { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); }
|
|
.card-shadow { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(26, 54, 93, 0.4);
|
|
}
|
|
.preview-frame {
|
|
background: #f0f0f0;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.loading-spinner {
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #1a365d;
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.tab-active {
|
|
border-bottom: 3px solid #1a365d;
|
|
color: #1a365d;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- 헤더 -->
|
|
<header class="gradient-bg text-white py-6 shadow-lg">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">글벗 Light</h1>
|
|
<p class="text-blue-200 text-sm mt-1">상시 업무용 보고서 자동 생성기 v2.0</p>
|
|
</div>
|
|
<div class="text-right text-sm text-blue-200">
|
|
<p>각인된 양식 기반</p>
|
|
<p>A4 인쇄 최적화</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- 입력 패널 -->
|
|
<div class="bg-white rounded-xl card-shadow p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
|
|
<span class="w-8 h-8 bg-blue-900 text-white rounded flex items-center justify-center mr-3 text-sm">1</span>
|
|
문서 입력
|
|
</h2>
|
|
|
|
<!-- 입력 방식 탭 -->
|
|
<div class="flex border-b mb-4">
|
|
<button id="tab-file" class="px-4 py-2 tab-active" onclick="switchTab('file')">파일 업로드</button>
|
|
<button id="tab-text" class="px-4 py-2 text-gray-500" onclick="switchTab('text')">직접 입력</button>
|
|
</div>
|
|
|
|
<form id="generateForm">
|
|
<!-- 파일 업로드 -->
|
|
<div id="input-file" class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">HTML 파일 업로드</label>
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-500 transition-colors">
|
|
<input type="file" id="fileInput" name="file" accept=".html,.htm,.txt" class="hidden" onchange="handleFileSelect(this)">
|
|
<label for="fileInput" class="cursor-pointer">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<p class="mt-2 text-sm text-gray-600">클릭하여 파일 선택</p>
|
|
<p class="text-xs text-gray-400">HTML, TXT 지원</p>
|
|
</label>
|
|
<p id="fileName" class="mt-2 text-sm text-blue-600 font-medium hidden"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 직접 입력 -->
|
|
<div id="input-text" class="mb-4 hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">내용 직접 입력</label>
|
|
<textarea name="content" id="contentInput" rows="10"
|
|
class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="변환할 문서 내용을 입력하세요..."></textarea>
|
|
</div>
|
|
|
|
<!-- 옵션 설정 -->
|
|
<div class="border-t pt-4 mt-4">
|
|
<h3 class="font-medium text-gray-800 mb-3">옵션 설정</h3>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4">
|
|
<!-- 페이지 옵션 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">페이지 구성</label>
|
|
<select name="page_option" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500">
|
|
<option value="1">1페이지 (핵심 요약)</option>
|
|
<option value="2">2페이지 (본문 + 첨부)</option>
|
|
<option value="n">N페이지 (본문 + 다중 첨부)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 부서명 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">부서명</label>
|
|
<input type="text" name="department" value="총괄기획실"
|
|
class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 추가 요청사항 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">추가 요청사항 (선택)</label>
|
|
<textarea name="additional_prompt" rows="2"
|
|
class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500"
|
|
placeholder="예: 표를 더 상세하게 만들어주세요, 핵심 결론을 강조해주세요..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 생성 버튼 -->
|
|
<button type="submit" id="generateBtn" class="w-full btn-primary text-white py-3 rounded-lg font-medium flex items-center justify-center">
|
|
<span id="btnText">보고서 생성</span>
|
|
<div id="btnSpinner" class="loading-spinner ml-2 hidden"></div>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 미리보기 패널 -->
|
|
<div class="bg-white rounded-xl card-shadow p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center">
|
|
<span class="w-8 h-8 bg-blue-900 text-white rounded flex items-center justify-center mr-3 text-sm">2</span>
|
|
미리보기 & 다운로드
|
|
</h2>
|
|
|
|
<!-- 다운로드 버튼 그룹 -->
|
|
<div id="downloadBtns" class="flex gap-2 hidden">
|
|
<button onclick="downloadHTML()" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition-colors">
|
|
📄 HTML
|
|
</button>
|
|
<button onclick="downloadPDF()" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition-colors">
|
|
📑 PDF
|
|
</button>
|
|
<button onclick="printPreview()" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition-colors">
|
|
🖨️ 인쇄
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 미리보기 영역 -->
|
|
<div id="previewArea" class="preview-frame rounded-lg overflow-hidden" style="height: 600px;">
|
|
<div id="emptyState" class="h-full flex items-center justify-center text-gray-400">
|
|
<div class="text-center">
|
|
<svg class="mx-auto h-16 w-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
<p>문서를 입력하고 생성 버튼을 누르세요</p>
|
|
</div>
|
|
</div>
|
|
<iframe id="previewFrame" class="w-full h-full hidden"></iframe>
|
|
</div>
|
|
|
|
<!-- 에러 메시지 -->
|
|
<div id="errorMessage" class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 hidden"></div>
|
|
|
|
<!-- 피드백 채팅 UI -->
|
|
<div id="refineSection" class="mt-6 hidden">
|
|
<h3 class="font-bold text-gray-800 mb-3 flex items-center">
|
|
<span class="w-6 h-6 bg-green-600 text-white rounded flex items-center justify-center mr-2 text-xs">✎</span>
|
|
수정 요청
|
|
</h3>
|
|
<div class="flex gap-2">
|
|
<input type="text" id="feedbackInput"
|
|
class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
|
placeholder="수정할 내용을 입력하세요 (예: 테이블 4열로 맞춰줘, 결론 한 줄로 줄여줘)">
|
|
<button onclick="submitFeedback()" id="refineBtn"
|
|
class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2">
|
|
<span id="refineBtnText">수정</span>
|
|
<div id="refineBtnSpinner" class="loading-spinner hidden"></div>
|
|
</button>
|
|
</div>
|
|
<div id="refineHistory" class="mt-3 space-y-2 max-h-32 overflow-y-auto text-sm"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HWP 변환 안내 -->
|
|
<div class="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
|
|
<h3 class="font-bold text-blue-900 mb-2">💡 HWP 파일이 필요하신가요?</h3>
|
|
<p class="text-blue-800 text-sm mb-3">
|
|
HWP 변환은 Windows + 한글 프로그램이 필요합니다. HTML 다운로드 후 제공되는 Python 스크립트로 로컬에서 변환할 수 있습니다.
|
|
</p>
|
|
<a href="/hwp-script" class="inline-block px-4 py-2 bg-blue-900 text-white rounded-lg text-sm hover:bg-blue-800 transition-colors">
|
|
HWP 변환 스크립트 받기 →
|
|
</a>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 푸터 -->
|
|
<footer class="bg-gray-100 py-6 mt-12">
|
|
<div class="container mx-auto px-4 text-center text-gray-500 text-sm">
|
|
<p>글벗 Light v2.0 | 2단계 변환 + 대화형 피드백 시스템</p>
|
|
<p class="mt-1">Powered by Claude API</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 생성된 HTML 저장용 -->
|
|
<script>
|
|
let generatedHTML = '';
|
|
|
|
function switchTab(tab) {
|
|
const fileTab = document.getElementById('tab-file');
|
|
const textTab = document.getElementById('tab-text');
|
|
const fileInput = document.getElementById('input-file');
|
|
const textInput = document.getElementById('input-text');
|
|
|
|
if (tab === 'file') {
|
|
fileTab.classList.add('tab-active');
|
|
textTab.classList.remove('tab-active');
|
|
textTab.classList.add('text-gray-500');
|
|
fileInput.classList.remove('hidden');
|
|
textInput.classList.add('hidden');
|
|
} else {
|
|
textTab.classList.add('tab-active');
|
|
fileTab.classList.remove('tab-active');
|
|
fileTab.classList.add('text-gray-500');
|
|
textInput.classList.remove('hidden');
|
|
fileInput.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function handleFileSelect(input) {
|
|
const fileName = document.getElementById('fileName');
|
|
if (input.files && input.files[0]) {
|
|
fileName.textContent = '📎 ' + input.files[0].name;
|
|
fileName.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
document.getElementById('generateForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const btn = document.getElementById('generateBtn');
|
|
const btnText = document.getElementById('btnText');
|
|
const btnSpinner = document.getElementById('btnSpinner');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
|
|
// 로딩 상태
|
|
btn.disabled = true;
|
|
btnText.textContent = '생성 중...';
|
|
btnSpinner.classList.remove('hidden');
|
|
errorMessage.classList.add('hidden');
|
|
|
|
try {
|
|
const formData = new FormData(this);
|
|
|
|
// 파일 또는 텍스트 내용 확인
|
|
const file = document.getElementById('fileInput').files[0];
|
|
const content = document.getElementById('contentInput').value;
|
|
|
|
if (!file && !content.trim()) {
|
|
throw new Error('파일을 업로드하거나 내용을 입력해주세요.');
|
|
}
|
|
|
|
const response = await fetch('/generate', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
|
|
if (data.success && data.html) {
|
|
generatedHTML = data.html;
|
|
|
|
// 미리보기 표시
|
|
const emptyState = document.getElementById('emptyState');
|
|
const previewFrame = document.getElementById('previewFrame');
|
|
const downloadBtns = document.getElementById('downloadBtns');
|
|
const refineSection = document.getElementById('refineSection');
|
|
|
|
emptyState.classList.add('hidden');
|
|
previewFrame.classList.remove('hidden');
|
|
downloadBtns.classList.remove('hidden');
|
|
refineSection.classList.remove('hidden');
|
|
|
|
// iframe에 HTML 로드
|
|
previewFrame.srcdoc = generatedHTML;
|
|
}
|
|
|
|
} catch (error) {
|
|
errorMessage.textContent = error.message;
|
|
errorMessage.classList.remove('hidden');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btnText.textContent = '보고서 생성';
|
|
btnSpinner.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
function downloadHTML() {
|
|
if (!generatedHTML) return;
|
|
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = '/download/html';
|
|
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'html';
|
|
input.value = generatedHTML;
|
|
|
|
form.appendChild(input);
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
}
|
|
|
|
function downloadPDF() {
|
|
const printWindow = window.open('', '_blank');
|
|
printWindow.document.write(generatedHTML);
|
|
printWindow.document.close();
|
|
printWindow.onload = function() {
|
|
printWindow.print();
|
|
};
|
|
}
|
|
|
|
function printPreview() {
|
|
const previewFrame = document.getElementById('previewFrame');
|
|
if (previewFrame.contentWindow) {
|
|
previewFrame.contentWindow.print();
|
|
}
|
|
}
|
|
|
|
async function submitFeedback() {
|
|
const feedbackInput = document.getElementById('feedbackInput');
|
|
const feedback = feedbackInput.value.trim();
|
|
|
|
if (!feedback) {
|
|
alert('수정 내용을 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
if (!generatedHTML) {
|
|
alert('먼저 보고서를 생성해주세요.');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('refineBtn');
|
|
const btnText = document.getElementById('refineBtnText');
|
|
const btnSpinner = document.getElementById('refineBtnSpinner');
|
|
const history = document.getElementById('refineHistory');
|
|
|
|
// 로딩 상태
|
|
btn.disabled = true;
|
|
btnText.textContent = '수정 중...';
|
|
btnSpinner.classList.remove('hidden');
|
|
|
|
try {
|
|
const response = await fetch('/refine', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
feedback: feedback,
|
|
current_html: generatedHTML
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
|
|
if (data.success && data.html) {
|
|
generatedHTML = data.html;
|
|
|
|
// 미리보기 업데이트
|
|
const previewFrame = document.getElementById('previewFrame');
|
|
previewFrame.srcdoc = generatedHTML;
|
|
|
|
// 히스토리에 추가
|
|
const historyItem = document.createElement('div');
|
|
historyItem.className = 'p-2 bg-green-50 border border-green-200 rounded text-green-800';
|
|
historyItem.textContent = '✓ ' + feedback;
|
|
history.appendChild(historyItem);
|
|
|
|
// 입력창 초기화
|
|
feedbackInput.value = '';
|
|
}
|
|
|
|
} catch (error) {
|
|
alert('수정 오류: ' + error.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
btnText.textContent = '수정';
|
|
btnSpinner.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Enter 키로 피드백 제출
|
|
document.getElementById('feedbackInput')?.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
submitFeedback();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|