공문 검토·작성 시스템으로 전환

- app.py: 제목 업데이트 (Gongmun API → 한전 공문 검토·작성 API)
- static/index.html: 작성/검토 탭 UI 추가, 검토 시스템 프롬프트 3종 내장
- README.md: 설명 및 제목 업데이트

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -1,8 +1,29 @@
 ---
-title: Gongmun API
-emoji: 📄
+title: 한전 공문 검토·작성 시스템
+emoji: 📋
 colorFrom: blue
 colorTo: indigo
 sdk: docker
 pinned: false
 ---
+
+# 한전 공문 검토·작성 시스템
+
+한국전력공사(KEPCO) 공식 문서를 AI로 **작성**하고 **검토**하는 시스템입니다.
+
+## 기능
+
+- **작성**: 내용 요점 입력 → 공문 / 보고서 / 내부품의 자동 생성
+- **검토**: 기존 문서 붙여넣기 → 형식·문체 검토 의견 + 수정본 제공
+
+## 문서 양식
+
+| 양식 | 특징 |
+|------|------|
+| 공문 | 수신/제목/본문/붙임/끝. 구조, 정중체 |
+| 보고서 | 날짜/부서/섹션 구조, 명사형 종결 |
+| 내부품의 | 품의서/결문 구조, 본문 명사형 종결 |
+
+## 모델
+
+- **EXAONE-3.5-2.4B-Instruct** (ONNX Q4 양자화, CPU 추론)

app.py

@@ -1,12 +1,10 @@
-"""HuggingFace Space - 공문 생성 API (FastAPI + onnxruntime)
+"""한전 공문 검토·작성 API (FastAPI + onnxruntime)
 
 환경 변수:
   MODEL_REPO  — HF 모델 repo (기본: onnx-community/EXAONE-3.5-2.4B-Instruct)
-                나중에 본인 fine-tuned repo로 교체하면 됨
 """
 import json
 import os
-import queue
 import threading
 import time
 from pathlib import Path
@@ -20,8 +18,6 @@ from pydantic import BaseModel
 
 MODEL_REPO = os.getenv("MODEL_REPO", "onnx-community/EXAONE-3.5-2.4B-Instruct")
 
-# 무거운 패키지는 generator.load() 안에서 지연 import
-# (uvicorn이 먼저 뜨고 나서 백그라운드 스레드가 로딩)
 np = None
 ort = None
 
@@ -29,7 +25,7 @@ NUM_LAYERS = 30
 NUM_KV_HEADS = 8
 HEAD_DIM = 80
 
-app = FastAPI(title="Gongmun API", version="0.1")
+app = FastAPI(title="한전 공문 검토·작성 API", version="0.2")
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -78,12 +74,10 @@ class Generator:
             self.status = "creating ONNX session"
             so = ort.SessionOptions()
             so.graph_optimization_level = ort.GraphOptimizationLevel.ORT_ENABLE_ALL
-            # 컨테이너 실제 가용 CPU 감지 (cgroup 제한 존중)
             try:
                 actual_cpus = len(os.sched_getaffinity(0))
             except AttributeError:
                 actual_cpus = os.cpu_count() or 2
-            # 환경변수로 override 가능
             n_threads = int(os.getenv("OMP_NUM_THREADS", str(actual_cpus)))
             so.intra_op_num_threads = max(1, n_threads)
             so.inter_op_num_threads = 1
@@ -124,7 +118,6 @@ class Generator:
         return int(np.random.choice(len(probs), p=probs))
 
     def _format_exaone(self, messages):
-        """EXAONE 채팅 포맷 수동 조립 (apply_chat_template 실패 시 폴백)."""
         parts = []
         for m in messages:
             role = m["role"]
@@ -143,7 +136,6 @@ class Generator:
                 messages, return_tensors="np", add_generation_prompt=True
             ).astype(np.int64)
         except Exception as e:
-            # apply_chat_template 충돌 시 EXAONE 포맷 직접 만듦
             print(f"[WARN] apply_chat_template failed ({e}), using manual format")
             prompt_str = self._format_exaone(messages)
             ids = tok(prompt_str, return_tensors="np").input_ids.astype(np.int64)
@@ -237,8 +229,6 @@ if STATIC_DIR.exists():
 
 @app.get("/")
 def root():
-    # 정적 HTML이 있으면 그것을 반환 (브라우저 접근용),
-    # 없으면 JSON 상태 반환 (API 전용 모드)
     index = STATIC_DIR / "index.html"
     if index.exists():
         return FileResponse(str(index))
@@ -298,7 +288,6 @@ def generate(req: GenerateRequest):
         headers={
             "Cache-Control": "no-cache",
             "Connection": "keep-alive",
-            # nginx / HF Spaces 프록시 버퍼링 방지 (SSE 핵심)
             "X-Accel-Buffering": "no",
         },
     )
@@ -306,7 +295,7 @@ def generate(req: GenerateRequest):
 
 @app.post("/download/hwpx")
 def download_hwpx(req: HwpxRequest):
-    """텍스트를 .hwpx 파일로 다운로드 (UTF-8 텍스트, 확장자 .hwpx)."""
+    """텍스트를 .hwpx 파일로 다운로드."""
     import re
     from urllib.parse import quote
     from fastapi.responses import Response
@@ -316,7 +305,7 @@ def download_hwpx(req: HwpxRequest):
     safe = re.sub(r'[\\/:*?"<>|]', "_", title)[:50]
     encoded = quote(safe, safe="")
 
-    content = req.text.encode("utf-8-sig")  # UTF-8 with BOM
+    content = req.text.encode("utf-8-sig")
 
     return Response(
         content=content,

static/index.html

@@ -2,277 +2,320 @@
 <html lang="ko">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta http-equiv="Cache-Control" content="no-store">
-<title>공문 생성기</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>한전 공문 검토·작성 시스템</title>
 <style>
-  :root {
-    --bg: #f5f5f4;
-    --panel: #ffffff;
-    --border: #d6d3d1;
-    --text: #1c1917;
-    --muted: #78716c;
-    --accent: #0f172a;
-    --accent-hover: #334155;
-    --error: #b91c1c;
-  }
-  * { box-sizing: border-box; }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   body {
-    margin: 0;
-    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
-  }
-  .container {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 20px 16px 60px;
+    font-family: "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
+    font-size: 14px;
+    background: #f4f6f9;
+    color: #222;
+    min-height: 100vh;
   }
-  header h1 { margin: 0 0 4px; font-size: 22px; }
-  header p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 16px;
+  header {
+    background: #003087;
+    color: #fff;
+    padding: 14px 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
   }
-  @media (max-width: 800px) {
-    .grid { grid-template-columns: 1fr; }
+  header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
+  header .badge {
+    background: #ffd700;
+    color: #003087;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 10px;
   }
-  .panel {
-    background: var(--panel);
-    border: 1px solid var(--border);
+  .container { max-width: 960px; margin: 24px auto; padding: 0 16px 40px; }
+
+  /* 패널 카드 */
+  .card {
+    background: #fff;
     border-radius: 8px;
-    padding: 16px;
+    box-shadow: 0 1px 4px rgba(0,0,0,.10);
+    padding: 20px 24px;
+    margin-bottom: 16px;
+  }
+
+  /* 문서 양식 선택 */
+  .doc-type-row {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
   }
-  .panel h2 {
-    margin: 0 0 12px;
+  .doc-type-row .label { font-weight: 600; color: #555; min-width: 64px; }
+  .doc-type-row label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
     font-size: 13px;
-    color: var(--muted);
+  }
+  .doc-type-row input[type=radio] { accent-color: #003087; }
+
+  /* 탭 */
+  .tabs {
+    display: flex;
+    border-bottom: 2px solid #e0e4ea;
+    margin-bottom: 16px;
+    gap: 2px;
+  }
+  .tab-btn {
+    padding: 10px 28px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 14px;
     font-weight: 600;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
+    color: #777;
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px;
+    transition: color .15s, border-color .15s;
   }
-  label {
+  .tab-btn.active { color: #003087; border-bottom-color: #003087; }
+  .tab-btn:hover:not(.active) { color: #333; }
+
+  /* 패널 */
+  .panel { display: none; }
+  .panel.active { display: block; }
+  .panel label.field-label {
     display: block;
     font-size: 12px;
-    color: var(--muted);
-    margin: 8px 0 4px;
+    font-weight: 600;
+    color: #555;
+    margin-bottom: 6px;
   }
-  input[type=text], select, textarea {
+  textarea {
     width: 100%;
-    padding: 8px 10px;
-    border: 1px solid var(--border);
+    border: 1px solid #d0d5dd;
     border-radius: 6px;
+    padding: 10px 12px;
     font-family: inherit;
-    font-size: 14px;
-    background: #fff;
-  }
-  textarea { resize: vertical; min-height: 100px; }
-  .row { display: flex; gap: 8px; flex-wrap: wrap; }
-  .row > * { flex: 1; min-width: 0; }
-  button {
-    padding: 10px 14px;
-    background: var(--accent);
-    color: #fff;
-    border: 0;
-    border-radius: 6px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-  }
-  button:hover:not(:disabled) { background: var(--accent-hover); }
-  button:disabled { background: #a8a29e; cursor: not-allowed; }
-  button.secondary {
-    background: #fff;
-    color: var(--text);
-    border: 1px solid var(--border);
+    font-size: 13px;
+    resize: vertical;
+    line-height: 1.6;
+    outline: none;
+    transition: border-color .15s;
   }
-  button.secondary:hover:not(:disabled) { background: #f5f5f4; }
-  .btnrow {
+  textarea:focus { border-color: #003087; }
+  #write-input  { min-height: 140px; }
+  #review-input { min-height: 200px; }
+
+  /* 버튼 행 */
+  .btn-row {
     display: flex;
+    align-items: center;
     gap: 8px;
     flex-wrap: wrap;
-    margin-top: 12px;
   }
-  .btnrow > button:first-child { flex: 1; }
-  .status {
+  .btn {
+    padding: 8px 18px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    transition: background .15s, opacity .15s;
+  }
+  .btn-primary { background: #003087; color: #fff; }
+  .btn-primary:hover:not(:disabled) { background: #00246e; }
+  .btn-secondary { background: #e8edf5; color: #333; }
+  .btn-secondary:hover:not(:disabled) { background: #d5dce8; }
+  .btn:disabled { opacity: .4; cursor: default; }
+  #status-msg {
+    margin-left: auto;
     font-size: 12px;
-    color: var(--muted);
-    margin-top: 10px;
-    min-height: 18px;
+    color: #666;
   }
-  .status.error { color: var(--error); }
-  .output {
-    white-space: pre-wrap;
-    font-family: "D2Coding", "Consolas", "Malgun Gothic", monospace;
-    font-size: 14px;
-    background: #fafaf9;
-    border: 1px solid var(--border);
+
+  /* 결과 영역 */
+  .result-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .result-header span { font-weight: 600; color: #555; font-size: 13px; }
+  #output {
+    width: 100%;
+    min-height: 280px;
+    background: #f8f9fb;
+    border: 1px solid #e0e4ea;
     border-radius: 6px;
-    padding: 14px;
-    min-height: 360px;
+    padding: 14px 16px;
+    font-family: "D2Coding", "Consolas", "맑은 고딕", monospace;
+    font-size: 13px;
     line-height: 1.8;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  /* 검토/수정본 섹션 구분 강조 */
+  .sep-review { color: #003087; font-weight: 700; }
+  .sep-fixed  { color: #c00;    font-weight: 700; }
+
+  /* 하단 다운로드 버튼 */
+  .download-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+
+  /* 로딩 배너 */
+  #loading-banner {
+    background: #fffbe6;
+    border: 1px solid #ffe58f;
+    border-radius: 6px;
+    padding: 10px 16px;
+    font-size: 13px;
+    color: #7a5200;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  #loading-banner.hidden { display: none; }
+  .spinner {
+    width: 16px; height: 16px;
+    border: 2px solid #ffe58f;
+    border-top-color: #d48806;
+    border-radius: 50%;
+    animation: spin .8s linear infinite;
+    flex-shrink: 0;
   }
+  @keyframes spin { to { transform: rotate(360deg); } }
 </style>
 </head>
 <body>
+
+<header>
+  <h1>한전 공문 검토·작성 시스템</h1>
+  <span class="badge">KEPCO AI</span>
+</header>
+
 <div class="container">
-  <header>
-    <h1>공문 생성기</h1>
-  </header>
-
-  <div class="grid">
-    <section class="panel">
-      <h2>입력</h2>
-
-      <label>문서 양식</label>
-      <div class="row" style="gap:16px; margin-bottom:8px; flex-wrap:wrap;">
-        <label style="display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text); cursor:pointer;">
-          <input type="radio" name="doc-mode" value="공문" checked> 공문 (수신/제목/끝.)
-        </label>
-        <label style="display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text); cursor:pointer;">
-          <input type="radio" name="doc-mode" value="보고서"> 보고서 (작성일자/부서/섹션)
-        </label>
-        <label style="display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text); cursor:pointer;">
-          <input type="radio" name="doc-mode" value="내부품의"> 내부품의 (품의서/결문)
-        </label>
-      </div>
 
-      <label for="prompt">내용 요점</label>
-      <textarea id="prompt" rows="10" placeholder="예: 5.13(수) 부사장 회의 참석 요청, 9~10시, 본사 회의실. 전 부서장 참석 필요. 회의 자료 5.12까지 제출."></textarea>
+  <!-- 로딩 배너 -->
+  <div id="loading-banner">
+    <div class="spinner"></div>
+    <span id="loading-msg">모델 로딩 중... 잠시만 기다려주세요.</span>
+  </div>
 
-      <div class="btnrow">
-        <button id="generate" disabled>로딩 중...</button>
-        <button id="stop" class="secondary" disabled>중지</button>
-      </div>
-      <div class="status" id="status">서버 깨우는 중...</div>
-    </section>
-
-    <section class="panel">
-      <h2>생성 결과</h2>
-      <div class="output" id="output">여기에 결과가 표시됩니다.</div>
-      <div class="btnrow">
-        <button id="copy" class="secondary">복사</button>
-        <button id="download-hwpx" class="secondary">.hwpx 저장</button>
-      </div>
-    </section>
+  <!-- 문서 양식 선택 -->
+  <div class="card">
+    <div class="doc-type-row">
+      <span class="label">문서 양식</span>
+      <label><input type="radio" name="docType" value="공문" checked> 공문 (수신/제목/끝.)</label>
+      <label><input type="radio" name="docType" value="보고서"> 보고서 (작성일자/부서/섹션)</label>
+      <label><input type="radio" name="docType" value="내부품의"> 내부품의 (품의서/결문)</label>
+    </div>
   </div>
-</div>
 
-<script type="module">
-const $ = (id) => document.getElementById(id);
-const statusEl = $('status');
-const outputEl = $('output');
-const genBtn = $('generate');
-const stopBtn = $('stop');
+  <!-- 탭 -->
+  <div class="card">
+    <div class="tabs">
+      <button class="tab-btn active" data-tab="write">작성</button>
+      <button class="tab-btn" data-tab="review">검토</button>
+    </div>
+
+    <!-- 작성 패널 -->
+    <div id="panel-write" class="panel active">
+      <label class="field-label">내용 요점  (작성할 내용의 핵심 사항을 입력하세요)</label>
+      <textarea id="write-input" placeholder="예) 안전교육 실시 협조 요청. 일시: 2026.7.15(화) 14:00~16:00, 장소: 본사 대강당, 대상: 전 직원"></textarea>
+    </div>
+
+    <!-- 검토 패널 -->
+    <div id="panel-review" class="panel">
+      <label class="field-label">원문 입력  (검토할 공문·보고서·품의서 전문을 붙여넣으세요)</label>
+      <textarea id="review-input" placeholder="검토할 문서 전체 내용을 여기에 붙여넣으세요..."></textarea>
+    </div>
+
+    <!-- 버튼 행 -->
+    <div class="btn-row" style="margin-top:14px">
+      <button id="run-btn" class="btn btn-primary" disabled>생성</button>
+      <button id="stop-btn" class="btn btn-secondary" disabled>중지</button>
+      <span id="status-msg"></span>
+    </div>
+  </div>
 
-let abortCtrl = null;
+  <!-- 결과 -->
+  <div class="card">
+    <div class="result-header">
+      <span>결과</span>
+      <div style="display:flex;gap:8px">
+        <button id="copy-btn" class="btn btn-secondary">복사</button>
+        <button id="dl-hwpx-btn" class="btn btn-secondary">HWPX 저장</button>
+      </div>
+    </div>
+    <div id="output"></div>
+  </div>
 
-const setStatus = (msg, isError = false) => {
-  statusEl.textContent = msg;
-  statusEl.classList.toggle('error', isError);
-};
+</div><!-- /container -->
 
-const SYSTEM_PROMPT_LETTER = `당신은 한국전력공사(한전, KEPCO) 공문 작성 전문가입니다. 현재는 2026년입니다.
+<script>
+// ============================================================
+// 시스템 프롬프트
+// ============================================================
+const PROMPTS_WRITE = {
+  "공문": `당신은 한국전력공사(한전, KEPCO) 공문 작성 전문가입니다. 현재는 2026년입니다.
 사용자가 요청한 내용을 아래 양식에 정확히 맞춰 작성하세요.
 
 [조직 정보]
 - 회사: 한국전력공사 (본문에서 "우리 회사" 또는 "한전"으로 지칭)
 - 시점: 2026년 (날짜에 별도 연도 없으면 2026년 기준)
-- 부서명 예시: 전략경영부, ICT운영부, 협력사업기획부, 디지털진단부, 인사관리부, 영업본부 등
-- 직책: 처장 / 부장 / 차장 / 과장 등 한전 직제
+- 부서명 예시: 전략경영부, 경영지원부, 요금관리부, ICT운영부 등
 
 [양식]
 수신  (수신처)
 제목  (문서 제목)
 
-(본문 도입 — 한 단락으로 작성. 문서 목적·일정·요청사항을 2~3문장으로 압축. 따로 번호 안 매김.)
+(본문 도입 — 한 단락, 2~3문장으로 목적·일정·요청사항 압축)
 
    1. (세부 항목 1)
    2. (세부 항목 2)
-   3. (세부 항목 3)
+       가. (서브 항목)
+       나. (서브 항목)
 
-※ (추가 안내가 필요할 경우 ※ 마커로 시작)
+※ (추가 안내)
 
-붙임  1. (붙임 파일명 N부.)  끝.
+붙임  1. (붙임명 N부.)  끝.
 
 [규칙]
-- 본문 도입부는 "(주체)는 (목적/일정)을 (어떻게) 진행/실시/요청합니다. 협조하여 주시기 바랍니다." 형태
-- 세부 항목은 도입부 안의 "아래와 같이" 이후 1./2./3. 번호로 나열 (가./나./다. 사용 안 함)
-- 항목 들여쓰기: 3칸 공백 후 "1. 일시:" 식으로
-- 추가 안내는 본문 다음에 "※" 마커로 시작
-- "끝."은 붙임 줄 끝에 같이 표시
-- 발신명의 줄은 생략
-- "관련:" 같은 법령 인용은 쓰지 않음
-- 날짜: "YYYY. M. D.(요일)" 또는 "HH:00 ~ HH:00"
+- 발신명의 줄 생략
+- 날짜: "YYYY. M. D.(요일)"
 - 문체: "~합니다", "~바랍니다" 정중체
-- 마크다운 기호(**, *, #) 절대 사용 금지
-- 사용자가 준 내용만 사용, 추측·가공 금지
-
-[예시]
-수신  각 부서장
-제목  2026년 상반기 정기 안전교육 실시 협조 요청
+- 마크다운 기호(**, *, #) 절대 금지
+- 사용자가 준 내용만 사용, 추측·가공 금지`,
 
-우리 회사는 2026년 상반기 정기 안전교육을 5월 20일에 실시할 예정이며 아래와 같이 진행되오니 소속 직원이 모두 참석할 수 있도록 협조하여 주시기 바랍니다.
+  "보고서": `당신은 한국전력공사(한전, KEPCO) 내부 보고서 작성 전문가입니다. 현재는 2026년입니다.
+사용자가 요청한 내용을 표준 보고서 양식에 맞춰 작성하세요.
 
-   1. 일시: 2026. 5. 20.(수) 14:00 ~ 16:00
-   2. 장소: 본관 대강당
-   3. 대상: 전 직원
+[양식]
+YYYY. M.
 
-※ 부서별 미참석자는 별도 보강 교육 일정에 편성될 예정입니다.
+부서명 / 세부부서
 
-붙임  1. 안전교육 일정표 1부.  끝.`;
+1. (섹션명)
+   가. 항목
+   ��. 항목
 
-const SYSTEM_PROMPT_REPORT = `당신은 한국전력공사(한전, KEPCO) 내부 보고서 작성 전문가입니다. 현재는 2026년입니다.
-사용자가 요청한 내용을 표준 보고서 양식에 맞춰 작성하세요.
+2. (섹션명)
+   가. 항목
+     - 세부
 
-[조직 정보]
-- 회사: 한국전력공사
-- 시점: 2026년 (별도 연도 없으면 2026년 기준)
-- 부서명 예시: 에너지생태계조성처, 송변전운영처, 협력사업기획부, 디지털진단부, 인사관리부 등
-
-[작성 규칙]
-- 형식: 작성일자(YYYY. M.) / 작성부서 / 본문 섹션
-- 수신/발신/끝. 같은 공문 letter 양식 요소는 사용하지 않음
-- 본문 섹션: "1. 추진 배경 / 2. 개요·결과 / 3. 조치 계획 / 4. 향후 일정" 식으로 번호와 제목
-- 세부 항목은 "가. 나. 다.", 더 세부는 "-" 글머리(들여쓰기)
-- 날짜 표기: "'26. 5월 중", "26. 2월 4주 ~ 4월 3주(9주간)" 등 보고서 관용 표기 허용
-- 항목 안에 괄호로 보조 설명: 예) "(면담기간) ...", "(구 성) ..."
-- 마크다운 기호(**, *, #) 절대 사용 금지
-- 추측이나 가공 정보 추가 금지, 사용자가 준 내용만 정리
+[규칙]
+- 수신/발신/끝. 같은 공문 요소 사용 안 함
+- 마크다운 기호 절대 금지
+- 사용자가 준 내용만 정리, 추측 금지
 
 [★ 문체 — 가장 중요]
-- 한전 내부 보고서 표준은 명사형 종결 (정중체 절대 금지)
-- 권장 종결: "시행 예정", "참여 요청", "추진 계획", "검토 중", "수립", "협의 완료", "운영", "확보", "필요"
-- 금지 종결: "~합니다", "~입니다", "~예정입니다", "~하고자 합니다", "~바랍니다"
-- 예시:
-  ⭕ "신입사원 환영회 시행"   ❌ "신입사원 환영회를 시행합니다"
-  ⭕ "전 부서장 참석 요청"     ❌ "전 부서장 참석을 요청드립니다"
-  ⭕ "이행 계획 수립 필요"     ❌ "이행 계획을 수립할 필요가 있습니다"
-  ⭕ "예산 1,500만원 소요"     ❌ "예산은 1,500만원이 소요됩니다"
-
-[예시 본문 (문체 참고)]
-1. 추진 배경
-   가. 에너지신산업 분야 규제 개선을 통한 혁신생태계 조성
-   나. 1:1 방문 면담을 통해 실질적 규제 발굴·해소
-
-2. 추진 내용
-   가. 면담기간: '26. 2월 4주 ~ 4월 3주 (9주간)
-   나. 면담기업: 22개社
-   다. 면담내용: 규제·애로사항 청취 및 개선 건의 방법 안내
-
-3. 향후 계획
-   가. ('26.5월) 규제 설명회 개최
-   나. ('26.6월) 사내 위원회 운영계획 수립`;
-
-const SYSTEM_PROMPT_APPROVAL = `당신은 한국전력공사(한전, KEPCO) 내부품의서 작성 전문가입니다. 현재는 2026년입니다.
-사용자가 요청한 내용을 아래 양식에 정확히 맞춰 작성하세요.
+- 명사형 종결 (정중체 절대 금지)
+- 권장: "시행 예정", "추진 계획", "검토 중", "수립", "협의 완료"
+- 금지: "~합니다", "~입니다", "~예정입니다", "~바랍니다"`,
 
-[조직 정보]
-- 회사: 한국전력공사
-- 시점: 2026년 (날짜에 별도 연도 없으면 2026년 기준)
-- 부서명 예시: 전략경영부, 경영지원부, ICT운영부, 인사관리부 등
+  "내부품의": `당신은 한국전력공사(한전, KEPCO) 내부품의서 작성 전문가입니다. 현재는 2026년입니다.
+사용자가 요청한 내용을 아래 양식에 정확히 맞춰 작성하세요.
 
 [양식]
 품 의 서
@@ -281,18 +324,15 @@ const SYSTEM_PROMPT_APPROVAL = `당신은 한국전력공사(한전, KEPCO) 내
 
 제  목  (문서 제목)
 
-(사유·배경 — 1~2문장으로 간략히. 왜 이 품의가 필요한지.)
+(사유·배경 — 1~2문장)
 
-1. (섹션명 — 예: 사유, 목적, 추진 배경)
+1. (섹션명)
    가. 항목
    나. 항목
 
-2. (섹션명 — 예: 내용, 시행 내용, 추진 내용)
+2. (섹션명)
    가. 항목
       - 세부
-   나. 항목
-
-3. (섹션명 — 예: 소요 예산, 향후 일정) ← 해당 시만 작성
 
 붙임  1. (첨부파일명 N부.)
 
@@ -303,193 +343,303 @@ const SYSTEM_PROMPT_APPROVAL = `당신은 한국전력공사(한전, KEPCO) 내
 (기안부서장)
 
 [규칙]
-- 수신/발신/끝. 같은 공문 letter 양식 요소 사용 금지
-- 결재선(담당·과장·부장 등 결재자 목록) 작성 금지 — 기안부서장만 표기
-- 본문 섹션: "1. 2. 3." + 제목, 세부: "가. 나. 다.", 더 세부: "-" 글머리
-- 날짜: "YYYY. M. D."
-- 문체: 본문은 명사형 종결, 마지막 결문만 "위와 같이 품의합니다" 정중체
-- 마크다운 기호(**, *, #) 절대 금지
-- 사용자가 준 내용만 사용, 추측·가공 금지`;
+- 결재선 작성 금지
+- 본문: 명사형 종결, 결문만 정중체 허용
+- 마크다운 기호 절대 금지`
+};
 
-function getMode() {
-  return document.querySelector('input[name="doc-mode"]:checked')?.value || '공문';
-}
+const PROMPTS_REVIEW = {
+  "공문": `당신은 한국전력공사(한전, KEPCO) 공문 검토 전문가입니다.
+사용자가 제출한 공문을 아래 기준으로 검토한 뒤, 검토 의견과 수정본을 작성하세요.
 
-function getSystemPrompt() {
-  const mode = getMode();
-  if (mode === '보고서') return SYSTEM_PROMPT_REPORT;
-  if (mode === '내부품의') return SYSTEM_PROMPT_APPROVAL;
-  return SYSTEM_PROMPT_LETTER;
-}
+[검토 기준]
+1. 구조: 수신/제목/본문/붙임/끝. 순서와 완결성
+2. 문체: 정중체(~합니다, ~바랍니다) 유지 여부
+3. 날짜: "YYYY. M. D.(요일)" 형식 준수
+4. 항목 기호: "1. 2." → "가. 나." → "-" 계층 유지
+5. 금지 사항: 마크다운(*,#), 발신명의, "관련:" 법령 인용
 
-function buildUserPrompt() {
-  return $('prompt').value.trim();
-}
+[출력 형식] 마크다운 기호 없이 작성
 
-function stripMarkdown(text) {
-  return text
-    .replace(/\*\*(.+?)\*\*/gs, '$1')
-    .replace(/(?<!\*)\*(?!\s)(.+?)(?<!\s)\*(?!\*)/gs, '$1')
-    .replace(/^#{1,6}\s+/gm, '')
-    .replace(/^(\s*)[-*]\s+/gm, '$1');
-}
+===검토 의견===
 
-function ensureEndMark(text) {
-  if (!text) return text;
-  const stripped = text.replace(/\s+$/, '');
-  if (/끝\.?$/.test(stripped)) return text;
-  return stripped + '  끝.';
-}
+(발견된 문제점 또는 개선 사항. 문제 없으면 "양식 및 문체 이상 없음."으로 기재)
+1. ...
+
+===수정본===
+
+수신  ...
+제목  ...
+
+(수정된 공문 본문)
+
+붙임  ...  끝.`,
+
+  "보고서": `당신은 한국전력공사(한전, KEPCO) 내부 보고서 검토 전문가입니다.
+사용자가 제출한 보고서를 아래 기준으로 검토한 뒤, 검토 의견과 수정본을 작성하세요.
+
+[검토 기준]
+1. 구조: 날짜·부서·섹션 번호(1. 2. 3.) 체계 확인
+2. 문체: 명사형 종결 준수 여부 (정중체 금지)
+3. 항목 기호: "가. 나." / "-" 계층 유지
+4. 금지 사항: 마크다운, 수신/끝. 같은 공문 요소
+
+[★ 명사형 종결 위반 집중 확인]
+- 위반: "~합니다", "~입니다", "~예정입니다"
+- 올바름: "시행 예정", "추진 계획", "검토 중"
+
+[출력 형식] 마크다운 기호 없이 작성
+
+===검토 의견===
+
+1. ...
+
+===수정본===
+
+(수정된 보고서 전문)`,
+
+  "내부품의": `당신은 한국전력공사(한전, KEPCO) 내부품의서 검토 전문가입니다.
+사용자가 제출한 품의서를 아래 기준으로 검토한 뒤, 검토 의견과 수정본을 작성하세요.
+
+[검토 기준]
+1. 구조: 품의서/기안부서/제목/본문/결문/날짜/기안부서장 확인
+2. 본문 문체: 명사형 종결 (결문만 정중체 허용)
+3. 금지 사항: 마크다운, 결재선, 수신/끝. 같은 공문 요소
+4. 날짜: "YYYY. M. D." 형식
+
+[출력 형식] 마크다운 기호 없이 작성
+
+===검토 의견===
+
+1. ...
 
-async function checkHealth() {
-  for (let i = 0; i < 60; i++) {
+===수정본===
+
+품 의 서
+
+(기안부서)
+
+제  목  ...
+
+(수정된 본문)
+
+위와 같이 품의합니다.
+
+YYYY. M. D.
+
+(기안부서장)`
+};
+
+// ============================================================
+// 상태
+// ============================================================
+let currentTab = "write";
+let abortController = null;
+let isReady = false;
+
+// ============================================================
+// DOM 참조
+// ============================================================
+const runBtn       = document.getElementById("run-btn");
+const stopBtn      = document.getElementById("stop-btn");
+const copyBtn      = document.getElementById("copy-btn");
+const dlHwpxBtn    = document.getElementById("dl-hwpx-btn");
+const outputEl     = document.getElementById("output");
+const statusMsg    = document.getElementById("status-msg");
+const loadingBanner= document.getElementById("loading-banner");
+const loadingMsg   = document.getElementById("loading-msg");
+
+// ============================================================
+// 탭 전환
+// ============================================================
+document.querySelectorAll(".tab-btn").forEach(btn => {
+  btn.addEventListener("click", () => {
+    document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
+    document.querySelectorAll(".panel").forEach(p => p.classList.remove("active"));
+    btn.classList.add("active");
+    currentTab = btn.dataset.tab;
+    document.getElementById(`panel-${currentTab}`).classList.add("active");
+    runBtn.textContent = currentTab === "write" ? "생성" : "검토";
+  });
+});
+
+// ============================================================
+// 모델 로딩 폴링
+// ============================================================
+async function pollReady() {
+  while (true) {
     try {
-      const r = await fetch('/health');
-      if (r.ok) {
-        const j = await r.json();
-        if (j.ready) {
-          setStatus('준비 완료. 입력 후 [생성]을 누르세요.');
-          genBtn.disabled = false;
-          genBtn.textContent = '생성';
-          return;
-        }
-        setStatus(`로딩 중: ${j.status || '...'}`);
+      const r = await fetch("/health");
+      const d = await r.json();
+      if (d.ready) {
+        isReady = true;
+        loadingBanner.classList.add("hidden");
+        runBtn.disabled = false;
+        setStatus("준비 완료. 입력 후 버튼을 누르세요.");
+        return;
       }
+      loadingMsg.textContent = `모델 로딩 중... (${d.status})`;
     } catch (_) {
-      setStatus('서버 응답 대기 중...');
+      loadingMsg.textContent = "서버 연결 시도 중...";
     }
-    await new Promise(r => setTimeout(r, 3000));
+    await sleep(4000);
   }
-  setStatus('서버 준비 안 됨 (3분 타임아웃)', true);
 }
 
-async function generate() {
-  if (!$('prompt').value.trim()) {
-    setStatus('내용 요점을 입력하세요.', true);
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+// ============================================================
+// 생성 / 검토 실행
+// ============================================================
+runBtn.addEventListener("click", run);
+stopBtn.addEventListener("click", () => {
+  if (abortController) abortController.abort();
+  setStatus("중지됨.");
+  setBusy(false);
+});
+
+async function run() {
+  const docType = document.querySelector("input[name=docType]:checked").value;
+  const input = currentTab === "write"
+    ? document.getElementById("write-input").value.trim()
+    : document.getElementById("review-input").value.trim();
+
+  if (!input) {
+    setStatus(currentTab === "write" ? "내용 요점을 입력해 주세요." : "검토할 원문을 입력해 주세요.");
     return;
   }
-  outputEl.textContent = '';
-  genBtn.disabled = true;
-  stopBtn.disabled = false;
-  setStatus('생성 중...');
 
-  abortCtrl = new AbortController();
-  let buffer = '';
+  const sysPrompt = currentTab === "write"
+    ? PROMPTS_WRITE[docType]
+    : PROMPTS_REVIEW[docType];
+  const maxTokens = currentTab === "write" ? 600 : 900;
+
+  outputEl.textContent = "";
+  setBusy(true);
+  setStatus(currentTab === "write" ? "생성 중..." : "검토 중...");
+
+  abortController = new AbortController();
+  let buffer = "";
 
   try {
-    const r = await fetch('/generate', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+    const resp = await fetch("/generate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "Accept": "text/event-stream" },
       body: JSON.stringify({
         messages: [
-          { role: 'system', content: getSystemPrompt() },
-          { role: 'user', content: buildUserPrompt() },
+          { role: "system", content: sysPrompt },
+          { role: "user",   content: input }
         ],
-        max_new_tokens: 600,
+        max_new_tokens: maxTokens,
         temperature: 0.7,
         top_p: 0.8,
-        top_k: 20,
+        top_k: 20
       }),
-      signal: abortCtrl.signal,
+      signal: abortController.signal
     });
-    if (!r.ok) {
-      const t = await r.text();
-      throw new Error(`HTTP ${r.status}: ${t}`);
+
+    if (!resp.ok) {
+      const err = await resp.text();
+      throw new Error(`서버 오류 ${resp.status}: ${err}`);
     }
 
-    const reader = r.body.getReader();
+    const reader = resp.body.getReader();
     const decoder = new TextDecoder();
-    let leftover = '';
-    let chunkCount = 0;
-    let tokenCount = 0;
-    let doneSeen = false;
+    let partial = "";
+
     while (true) {
-      const { value, done } = await reader.read();
+      const { done, value } = await reader.read();
       if (done) break;
-      chunkCount++;
-      const decoded = decoder.decode(value, { stream: true });
-      console.log('[SSE chunk #' + chunkCount + ']', decoded.slice(0, 200));
-      const chunk = leftover + decoded;
-      const lines = chunk.split('\n');
-      leftover = lines.pop() || '';
+      partial += decoder.decode(value, { stream: true });
+      const lines = partial.split("\n");
+      partial = lines.pop();
+
       for (const line of lines) {
-        if (!line.startsWith('data:')) continue;
+        if (!line.startsWith("data:")) continue;
         try {
           const obj = JSON.parse(line.slice(5).trim());
-          if (obj.error) {
-            console.error('[SSE error]', obj.error);
-            throw new Error(obj.error);
-          }
+          if (obj.error) throw new Error(obj.error);
           if (obj.done) {
-            doneSeen = true;
-            console.log('[SSE done]', obj);
-            const stripped = stripMarkdown(buffer);
-            const final = getMode() === '공문' ? ensureEndMark(stripped) : stripped;
-            outputEl.textContent = final;
             setStatus(`완료 (${obj.tokens} 토큰, ${obj.elapsed}초)`);
-            return;
+            break;
           }
-          if (obj.token !== undefined) {
-            tokenCount++;
+          if (obj.token) {
             buffer += obj.token;
-            outputEl.textContent = stripMarkdown(buffer);
+            outputEl.textContent = stripMd(buffer);
             outputEl.scrollTop = outputEl.scrollHeight;
           }
         } catch (e) {
-          console.warn('[SSE parse fail]', line, e.message);
+          if (e.message.startsWith("완료") || e.message.includes("토큰")) {
+            // ignore parse of done line
+          } else {
+            throw e;
+          }
         }
       }
     }
-    console.log('[SSE stream ended]', { chunkCount, tokenCount, doneSeen, bufferLen: buffer.length });
-    if (!doneSeen) {
-      setStatus(`스트림 종료 (done 이벤트 없음, ${tokenCount} 토큰 수신, buffer=${buffer.length}자)`, true);
-    } else {
-      setStatus('완료.');
-    }
   } catch (e) {
-    if (e.name === 'AbortError') {
-      setStatus('중지됨.');
-    } else {
-      setStatus('오류: ' + e.message, true);
-    }
+    if (e.name !== "AbortError") setStatus("오류: " + e.message);
   } finally {
-    genBtn.disabled = false;
-    stopBtn.disabled = true;
-    abortCtrl = null;
+    setBusy(false);
   }
 }
 
-genBtn.addEventListener('click', generate);
-stopBtn.addEventListener('click', () => abortCtrl?.abort());
-$('copy').addEventListener('click', async () => {
-  await navigator.clipboard.writeText(outputEl.textContent);
-  setStatus('복사됨.');
-});
-$('download-hwpx').addEventListener('click', async () => {
+// ============================================================
+// 마크다운 기호 제거
+// ============================================================
+function stripMd(text) {
+  return text
+    .replace(/\*\*(.+?)\*\*/gs, "$1")
+    .replace(/(?<!\*)\*(?!\s)(.+?)(?<!\s)\*(?!\*)/gs, "$1")
+    .replace(/^#{1,6}\s+/gm, "");
+}
+
+// ============================================================
+// 복사 / HWPX 저장
+// ============================================================
+copyBtn.addEventListener("click", () => {
   const text = outputEl.textContent;
-  if (!text.trim()) { setStatus('저장할 내용 없음.', true); return; }
+  if (!text) return;
+  navigator.clipboard.writeText(text).then(() => setStatus("클립보드에 복사됨."));
+});
+
+dlHwpxBtn.addEventListener("click", async () => {
+  const text = outputEl.textContent.trim();
+  if (!text) return;
   try {
-    setStatus('.hwpx 생성 중...');
-    const r = await fetch('/download/hwpx', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text }),
+    const resp = await fetch("/download/hwpx", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text })
     });
-    if (!r.ok) throw new Error(`서버 오류 ${r.status}`);
-    const blob = await r.blob();
-    const m = text.match(/^제\s*목\s+(.+)$/m);
-    const title = (m ? m[1].trim() : getMode()).replace(/[\\/:*?"<>|]/g, '_').slice(0, 50);
+    if (!resp.ok) throw new Error(await resp.text());
+    const blob = await resp.blob();
+    const cd = resp.headers.get("Content-Disposition") || "";
+    const m = cd.match(/filename\*=UTF-8''(.+)/);
+    const filename = m ? decodeURIComponent(m[1]) : "문서.hwpx";
     const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url; a.download = title + '.hwpx'; a.click();
+    const a = document.createElement("a");
+    a.href = url; a.download = filename; a.click();
     URL.revokeObjectURL(url);
-    setStatus('저장됨: ' + title + '.hwpx');
+    setStatus("다운로드 완료.");
   } catch (e) {
-    setStatus('저장 실패: ' + e.message, true);
+    setStatus("다운로드 실패: " + e.message);
   }
 });
 
-checkHealth();
+// ============================================================
+// 유틸
+// ============================================================
+function setBusy(busy) {
+  runBtn.disabled  = busy || !isReady;
+  stopBtn.disabled = !busy;
+}
+function setStatus(msg) { statusMsg.textContent = msg; }
+
+// ============================================================
+// 시작
+// ============================================================
+pollReady();
 </script>
 </body>
 </html>