Spaces:

aiaiteam
/

document

Paused

App Files Files Community

taekepco commited on May 11

Commit

48529c8

verified ·

1 Parent(s): eb9df86

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +340 -0

static/index.html CHANGED Viewed

	@@ -0,0 +1,340 @@

+<!DOCTYPE html>
+<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>
+<style>
+  :root {
+    --bg: #f5f5f4;
+    --panel: #ffffff;
+    --border: #d6d3d1;
+    --text: #1c1917;
+    --muted: #78716c;
+    --accent: #0f172a;
+    --accent-hover: #334155;
+    --error: #b91c1c;
+  }
+  * { box-sizing: border-box; }
+  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;
+  }
+  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;
+  }
+  @media (max-width: 800px) {
+    .grid { grid-template-columns: 1fr; }
+  }
+  .panel {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px;
+  }
+  .panel h2 {
+    margin: 0 0 12px;
+    font-size: 13px;
+    color: var(--muted);
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+  label {
+    display: block;
+    font-size: 12px;
+    color: var(--muted);
+    margin: 8px 0 4px;
+  }
+  input[type=text], select, textarea {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    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);
+  }
+  button.secondary:hover:not(:disabled) { background: #f5f5f4; }
+  .btnrow {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-top: 12px;
+  }
+  .btnrow > button:first-child { flex: 1; }
+  .status {
+    font-size: 12px;
+    color: var(--muted);
+    margin-top: 10px;
+    min-height: 18px;
+  }
+  .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);
+    border-radius: 6px;
+    padding: 14px;
+    min-height: 360px;
+    line-height: 1.8;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <header>
+    <h1>공문 생성기</h1>
+    <p>EXAONE-3.5-2.4B-Instruct · Hugging Face Spaces (CPU)</p>
+  </header>
+  <div class="grid">
+    <section class="panel">
+      <h2>입력</h2>
+      <label for="doc-type">문서 유형</label>
+      <select id="doc-type">
+        <option value="협조요청">협조 요청</option>
+        <option value="공지/안내">공지/안내</option>
+        <option value="요청">요청</option>
+        <option value="회신">회신</option>
+        <option value="보고">보고</option>
+      </select>
+      <div class="row">
+        <div>
+          <label for="recipient">수신</label>
+          <input id="recipient" type="text" placeholder="예: 각 부서장">
+        </div>
+        <div>
+          <label for="sender">발신명의</label>
+          <input id="sender" type="text" placeholder="예: 총무팀장">
+        </div>
+      </div>
+      <label for="title">제목 (선택)</label>
+      <input id="title" type="text" placeholder="비워두면 내용으로부터 생성">
+      <label for="prompt">내용 요점</label>
+      <textarea id="prompt" placeholder="예: 5.13(수) 부사장 회의 참석 요청, 9~10시, 본사 회의실"></textarea>
+      <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-txt" class="secondary">.txt 저장</button>
+      </div>
+    </section>
+  </div>
+</div>
+<script type="module">
+const $ = (id) => document.getElementById(id);
+const statusEl = $('status');
+const outputEl = $('output');
+const genBtn = $('generate');
+const stopBtn = $('stop');
+let abortCtrl = null;
+const setStatus = (msg, isError = false) => {
+  statusEl.textContent = msg;
+  statusEl.classList.toggle('error', isError);
+};
+const SYSTEM_PROMPT = `당신은 한국 행정 공문 작성 전문가입니다. 사용자가 요청한 내용을 한국 표준 공문 양식에 맞춰 작성하세요.
+[작성 규칙]
+- 형식: 수신 / 제목 / 본문 / 붙임(있을 경우) / 발신명의
+- 본문 첫 단락은 문서 목적을 요약하는 2줄 이내의 도입부
+- "관련:" 같은 법령 인용 항목은 사용하지 않음
+- 본문 항목 번호: "1. 2. 3. ..." 사용, 세부는 "가. 나. 다. ..."
+- 문체: "~합니다", "~바랍니다" 공식체
+- 날짜: "YYYY. M. D.(요일)"
+- 본문 마지막 항목 뒤 "끝." 표시
+- 마크다운 기호(**, *, #, -) 절대 사용 금지
+- 군더더기 없이 핵심만, 추측 금지`;
+function buildUserPrompt() {
+  const parts = [`[문서 유형] ${$('doc-type').value}`];
+  if ($('recipient').value.trim()) parts.push(`[수신] ${$('recipient').value.trim()}`);
+  if ($('sender').value.trim()) parts.push(`[발신명의] ${$('sender').value.trim()}`);
+  if ($('title').value.trim()) parts.push(`[제목] ${$('title').value.trim()}`);
+  parts.push('[내용 요점]');
+  parts.push($('prompt').value.trim());
+  return parts.join('\n');
+}
+function stripMarkdown(text) {
+  return text
+    .replace(/\*\*(.+?)\*\*/gs, '$1')
+    .replace(/(?<!\*)\*(?!\s)(.+?)(?<!\s)\*(?!\*)/gs, '$1')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/^(\s*)[-*]\s+/gm, '$1');
+}
+async function checkHealth() {
+  for (let i = 0; i < 60; i++) {
+    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 || '...'}`);
+      }
+    } catch (_) {
+      setStatus('서버 응답 대기 중...');
+    }
+    await new Promise(r => setTimeout(r, 3000));
+  }
+  setStatus('서버 준비 안 됨 (3분 타임아웃)', true);
+}
+async function generate() {
+  if (!$('prompt').value.trim()) {
+    setStatus('내용 요점을 입력하세요.', true);
+    return;
+  }
+  outputEl.textContent = '';
+  genBtn.disabled = true;
+  stopBtn.disabled = false;
+  setStatus('생성 중...');
+  abortCtrl = new AbortController();
+  let buffer = '';
+  try {
+    const r = await fetch('/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        messages: [
+          { role: 'system', content: SYSTEM_PROMPT },
+          { role: 'user', content: buildUserPrompt() },
+        ],
+        max_new_tokens: 600,
+        temperature: 0.7,
+        top_p: 0.8,
+        top_k: 20,
+      }),
+      signal: abortCtrl.signal,
+    });
+    if (!r.ok) {
+      const t = await r.text();
+      throw new Error(`HTTP ${r.status}: ${t}`);
+    }
+    const reader = r.body.getReader();
+    const decoder = new TextDecoder();
+    let leftover = '';
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      const chunk = leftover + decoder.decode(value, { stream: true });
+      const lines = chunk.split('\n');
+      leftover = lines.pop() || '';
+      for (const line of lines) {
+        if (!line.startsWith('data:')) continue;
+        try {
+          const obj = JSON.parse(line.slice(5).trim());
+          if (obj.error) throw new Error(obj.error);
+          if (obj.done) {
+            setStatus(`완료 (${obj.tokens} 토큰, ${obj.elapsed}초)`);
+            return;
+          }
+          if (obj.token) {
+            buffer += obj.token;
+            outputEl.textContent = stripMarkdown(buffer);
+            outputEl.scrollTop = outputEl.scrollHeight;
+          }
+        } catch (e) { /* skip parse errors */ }
+      }
+    }
+    setStatus('완료.');
+  } catch (e) {
+    if (e.name === 'AbortError') {
+      setStatus('중지됨.');
+    } else {
+      setStatus('오류: ' + e.message, true);
+    }
+  } finally {
+    genBtn.disabled = false;
+    stopBtn.disabled = true;
+    abortCtrl = null;
+  }
+}
+genBtn.addEventListener('click', generate);
+stopBtn.addEventListener('click', () => abortCtrl?.abort());
+$('copy').addEventListener('click', async () => {
+  await navigator.clipboard.writeText(outputEl.textContent);
+  setStatus('복사됨.');
+});
+$('download-txt').addEventListener('click', () => {
+  const text = outputEl.textContent;
+  if (!text.trim()) { setStatus('저장할 내용 없음.', true); return; }
+  const title = $('title').value.trim() || '공문';
+  const safeTitle = title.replace(/[\\/:*?"<>|]/g, '_').slice(0, 50);
+  // UTF-8 BOM 추가 (메모장/한글에서 깨짐 방지)
+  const blob = new Blob(['' + text], { type: 'text/plain;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = safeTitle + '.txt';
+  a.click();
+  URL.revokeObjectURL(url);
+  setStatus('저장됨.');
+});
+checkHealth();
+</script>
+</body>
+</html>