@open330/kiwimu 0.3.2 → 0.4.0

package/src/build/templates.ts

@@ -422,6 +422,8 @@ export function renderAdmin(opts: {
   sources: Array<{ id: number; uri: string; type: string; title: string; fetched_at: string }>;
   usage: { totalCalls: number; promptTokens: number; completionTokens: number; totalTokens: number; totalCost: number };
   llmConfig: { provider: string; model: string; api_key: string; endpoint: string };
+  personas: Array<{ name: string; description: string; system_prompt: string; content_style: string }>;
+  activePersona: string;
 }): string {
   const maskedKey = opts.llmConfig.api_key ? "••••" + opts.llmConfig.api_key.slice(-4) : "(미설정)";
   const sourceRows = opts.sources
@@ -530,6 +532,62 @@ export function renderAdmin(opts: {
             </div>
         </div>
 
+        <div class="admin-section">
+            <h2>🎭 페르소나 설정</h2>
+            <div class="config-card" style="margin-bottom:12px">
+                <div class="config-row">
+                    <span class="config-key">활성 페르소나</span>
+                    <select id="active-persona" class="config-input" onchange="activatePersona(this.value)">
+                        ${opts.personas.map(p => `<option value="${escapeHtml(p.name)}"${p.name === opts.activePersona ? " selected" : ""}>${escapeHtml(p.name)}</option>`).join("")}
+                        <option value=""${!opts.activePersona ? " selected" : ""}>(없음 - 기본 스타일)</option>
+                    </select>
+                    <span id="persona-activate-status" style="font-size:13px;margin-left:8px;"></span>
+                </div>
+            </div>
+            <div id="persona-list">
+                ${opts.personas.map(p => `
+                <div class="config-card persona-card" style="margin-bottom:8px;" data-name="${escapeHtml(p.name)}">
+                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+                        <strong style="font-size:15px;">${escapeHtml(p.name)} ${p.name === opts.activePersona ? '<span style="color:#2e7d32;font-size:12px;">✅ 활성</span>' : ''}</strong>
+                        <div style="display:flex;gap:6px;">
+                            <button class="save-btn" style="font-size:12px;padding:4px 10px;" onclick="editPersona('${escapeHtml(p.name)}')">✏️ 편집</button>
+                            <button class="save-btn" style="font-size:12px;padding:4px 10px;background:#e53935;" onclick="deletePersona('${escapeHtml(p.name)}')">🗑️ 삭제</button>
+                        </div>
+                    </div>
+                    <div style="font-size:13px;color:var(--text-muted);">${escapeHtml(p.description)}</div>
+                </div>`).join("")}
+            </div>
+            <button class="save-btn" style="margin-top:8px;" onclick="showPersonaModal()">➕ 새 페르소나 추가</button>
+        </div>
+
+        <!-- Persona Modal -->
+        <div id="persona-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center;">
+            <div style="background:white;border-radius:8px;padding:24px;max-width:700px;width:90%;max-height:85vh;overflow-y:auto;">
+                <h3 id="persona-modal-title" style="margin-bottom:16px;">새 페르소나 추가</h3>
+                <input type="hidden" id="persona-original-name" value="">
+                <div style="margin-bottom:12px;">
+                    <label style="font-weight:600;font-size:13px;display:block;margin-bottom:4px;">이름</label>
+                    <input id="persona-name" class="config-input" style="width:100%;" placeholder="예: 나무위키, 교과서, 유머러스">
+                </div>
+                <div style="margin-bottom:12px;">
+                    <label style="font-weight:600;font-size:13px;display:block;margin-bottom:4px;">설명</label>
+                    <input id="persona-desc" class="config-input" style="width:100%;" placeholder="이 페르소나의 간단한 설명">
+                </div>
+                <div style="margin-bottom:12px;">
+                    <label style="font-weight:600;font-size:13px;display:block;margin-bottom:4px;">시스템 프롬프트</label>
+                    <textarea id="persona-system" class="config-input" style="width:100%;height:180px;resize:vertical;font-size:13px;" placeholder="LLM에게 전달할 시스템 프롬프트. 문체, 톤, 규칙 등을 지정하세요."></textarea>
+                </div>
+                <div style="margin-bottom:16px;">
+                    <label style="font-weight:600;font-size:13px;display:block;margin-bottom:4px;">콘텐츠 스타일 지시</label>
+                    <textarea id="persona-style" class="config-input" style="width:100%;height:120px;resize:vertical;font-size:13px;" placeholder="콘텐츠 생성시 적용할 스타일 가이드"></textarea>
+                </div>
+                <div style="display:flex;gap:8px;justify-content:flex-end;">
+                    <button class="save-btn" style="background:var(--text-muted);" onclick="closePersonaModal()">취소</button>
+                    <button class="save-btn" onclick="savePersona()">💾 저장</button>
+                </div>
+            </div>
+        </div>
+
         <div class="admin-section">
             <h2>📚 등록된 소스 (${opts.sources.length})</h2>
             <table class="admin-table">
@@ -610,6 +668,71 @@ export function renderAdmin(opts: {
             else { status.textContent = '❌ 실패'; status.style.color = '#c62828'; }
         } catch { status.textContent = '❌ 연결 실패'; status.style.color = '#c62828'; }
     });
+
+    // ── Persona management ──
+    let personaData = ${JSON.stringify(opts.personas)};
+
+    async function activatePersona(name) {
+        const status = document.getElementById('persona-activate-status');
+        try {
+            const r = await fetch('/api/personas', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ action: 'activate', name }) });
+            if (r.ok) { status.textContent = '✅'; status.style.color = '#2e7d32'; setTimeout(() => location.reload(), 800); }
+            else { status.textContent = '❌'; status.style.color = '#c62828'; }
+        } catch { status.textContent = '❌'; status.style.color = '#c62828'; }
+    }
+
+    function showPersonaModal(existing) {
+        document.getElementById('persona-modal').style.display = 'flex';
+        if (existing) {
+            const p = personaData.find(x => x.name === existing);
+            if (!p) return;
+            document.getElementById('persona-modal-title').textContent = '페르소나 편집';
+            document.getElementById('persona-original-name').value = existing;
+            document.getElementById('persona-name').value = p.name;
+            document.getElementById('persona-desc').value = p.description;
+            document.getElementById('persona-system').value = p.system_prompt;
+            document.getElementById('persona-style').value = p.content_style;
+        } else {
+            document.getElementById('persona-modal-title').textContent = '새 페르소나 추가';
+            document.getElementById('persona-original-name').value = '';
+            document.getElementById('persona-name').value = '';
+            document.getElementById('persona-desc').value = '';
+            document.getElementById('persona-system').value = '';
+            document.getElementById('persona-style').value = '';
+        }
+    }
+
+    function editPersona(name) { showPersonaModal(name); }
+
+    function closePersonaModal() { document.getElementById('persona-modal').style.display = 'none'; }
+
+    async function savePersona() {
+        const originalName = document.getElementById('persona-original-name').value;
+        const persona = {
+            name: document.getElementById('persona-name').value.trim(),
+            description: document.getElementById('persona-desc').value.trim(),
+            system_prompt: document.getElementById('persona-system').value,
+            content_style: document.getElementById('persona-style').value,
+        };
+        if (!persona.name) { alert('이름을 입력해주세요'); return; }
+        const body = originalName
+            ? { action: 'update', original_name: originalName, persona }
+            : { action: 'add', persona };
+        try {
+            const r = await fetch('/api/personas', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) });
+            if (r.ok) { closePersonaModal(); location.reload(); }
+            else { const d = await r.json(); alert(d.error || '실패'); }
+        } catch { alert('연결 실패'); }
+    }
+
+    async function deletePersona(name) {
+        if (!confirm(name + ' 페르소나를 삭제하시겠습니까?')) return;
+        try {
+            const r = await fetch('/api/personas', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ action: 'delete', name }) });
+            if (r.ok) location.reload();
+            else { const d = await r.json(); alert(d.error || '실패'); }
+        } catch { alert('연결 실패'); }
+    }
     </script>
 </body>
 </html>`;

package/src/config.ts

@@ -13,22 +13,62 @@ export interface LLMConfig {
   endpoint: string; // for Azure OpenAI
 }
 
+export interface Persona {
+  name: string;
+  description: string;
+  system_prompt: string;
+  content_style: string; // injected into content generation prompts
+}
+
 export interface KiwiConfig {
   project: { name: string; created: string };
   build: { output_dir: string };
   llm: LLMConfig;
   deploy: { target: string };
+  personas?: Persona[];
+  active_persona?: string; // name of the active persona
 }
 
+export const NAMUWIKI_PERSONA: Persona = {
+  name: "나무위키",
+  description: "나무위키 특유의 문체와 스타일로 문서를 작성합니다",
+  system_prompt: `당신은 나무위키 스타일의 위키 편집자입니다. 다음 특징을 반드시 지켜주세요:
+
+1. **문체**: 해요체(~입니다/~합니다)를 기본으로 하되, 가끔 반말(~이다/~한다)을 섞어 사용
+2. **유머**: 적절한 곳에 ~~취소선 드립~~, (괄호 안의 부연설명), [1] 각주 스타일의 코멘트를 삽입
+3. **강조**: 중요한 키워드는 **굵게** 처리하고, 핵심 개념은 반복 강조
+4. **서술 톤**: 백과사전적이면서도 친근한 톤. "~라고 한다", "~라고 카더라" 등의 표현 활용
+5. **구조**: 목차가 잘 정리된 체계적 구조. 소제목을 적극 활용
+6. **부가 정보**: "여담으로~", "참고로~", "사실~" 등의 표현으로 부가 정보 추가
+7. **링크**: 관련 개념에 적극적으로 [[위키 링크]]를 사용
+
+절대 딱딱한 교과서 문체로 쓰지 마세요. 읽는 사람이 재미있게 학습할 수 있도록 작성해주세요.`,
+  content_style: `Write in Korean 나무위키 style:
+- Use 해요체 with occasional 반말 mix
+- Add ~~strikethrough humor~~ and (parenthetical asides)
+- Bold **key terms** generously
+- Use phrases like "~라고 한다", "여담으로~", "참고로~"
+- Be encyclopedic yet friendly and entertaining
+- Structure with clear subsections
+- Use [[wiki links]] actively for related concepts`,
+};
+
 export function defaultConfig(name: string): KiwiConfig {
   return {
     project: { name, created: new Date().toISOString().slice(0, 10) },
     build: { output_dir: SITE_DIR },
     llm: { provider: "gemini", model: "gemini-2.0-flash-lite", api_key: "", endpoint: "" },
     deploy: { target: "gh-pages" },
+    personas: [NAMUWIKI_PERSONA],
+    active_persona: "나무위키",
   };
 }
 
+export function getActivePersona(config: KiwiConfig): Persona | null {
+  if (!config.active_persona || !config.personas?.length) return null;
+  return config.personas.find(p => p.name === config.active_persona) ?? null;
+}
+
 export function saveConfig(root: string, config: KiwiConfig): void {
   Bun.write(join(root, CONFIG_FILE), stringify(config));
 }
@@ -40,6 +80,14 @@ export function loadConfig(root: string): KiwiConfig {
   if (!raw.llm) {
     raw.llm = { provider: "gemini", model: "gemini-2.0-flash-lite", api_key: "", endpoint: "" };
   }
+  // Migrate: add default persona if missing
+  if (!raw.personas || !raw.personas.length) {
+    raw.personas = [NAMUWIKI_PERSONA];
+    raw.active_persona = "나무위키";
+  }
+  if (!raw.active_persona) {
+    raw.active_persona = raw.personas[0]?.name || "나무위키";
+  }
   return raw as KiwiConfig;
 }
 

package/src/expand/llm.ts

@@ -1,8 +1,14 @@
 import type { Page } from "../store";
+import type { Persona } from "../config";
 
-const EXPAND_PROMPT = `You are a wiki editor for a learning platform. Given a wiki page about a topic,
+function buildPrompt(page: Page, context: Page[], persona: Persona | null = null): string {
+  const styleInstruction = persona
+    ? `\n\nIMPORTANT STYLE GUIDE:\n${persona.system_prompt}\n\n${persona.content_style}`
+    : "";
+
+  const prompt = `You are a wiki editor for a learning platform. Given a wiki page about a topic,
 expand it with more detail, examples, and related concepts. Keep the markdown format.
-Add subsections where appropriate. Be accurate and educational.
+Add subsections where appropriate. Be accurate and educational.${styleInstruction}
 
 Current page title: {title}
 Current content:
@@ -13,8 +19,7 @@ Related pages for context:
 
 Write an expanded version of this page in markdown:`;
 
-function buildPrompt(page: Page, context: Page[]): string {
-  return EXPAND_PROMPT.replace("{title}", page.title)
+  return prompt.replace("{title}", page.title)
     .replace("{content}", page.content)
     .replace("{context}", context.slice(0, 10).map((p) => `- ${p.title}`).join("\n"));
 }

package/src/index.ts

@@ -2,7 +2,7 @@
 
 import { Command } from "commander";
 import { join } from "path";
-import { CONFIG_FILE, DB_FILE, defaultConfig, findProjectRoot, loadConfig, saveConfig } from "./config";
+import { CONFIG_FILE, DB_FILE, defaultConfig, findProjectRoot, getActivePersona, loadConfig, saveConfig } from "./config";
 import { Store } from "./store";
 
 const program = new Command()
@@ -125,6 +125,8 @@ async function addUrl(store: Store, url: string) {
 
   const root = findProjectRoot();
   await initLLM(root);
+  const config = loadConfig(root);
+  const persona = getActivePersona(config);
 
   console.log(`\x1b[34m📥 URL 가져오는 중: ${url}\x1b[0m`);
   const { title, html } = await fetchPage(url);
@@ -134,7 +136,7 @@ async function addUrl(store: Store, url: string) {
   const rawText = htmlToRawText(html);
 
   console.log("\x1b[34m📄 LLM 기반 문서 분석 중...\x1b[0m");
-  const { sourceCount, conceptCount } = await llmChunkDocument(rawText, title, source.id, store);
+  const { sourceCount, conceptCount } = await llmChunkDocument(rawText, title, source.id, store, 0, persona);
   console.log(`\x1b[32m✅ 📖 ${sourceCount}개 원본 + 📝 ${conceptCount}개 개념 문서 생성\x1b[0m`);
 
   const { getUsageStats, getEstimatedCost, printUsageSummary } = await import("./llm-client");
@@ -157,6 +159,8 @@ async function addPdf(store: Store, pdfPath: string) {
 
   const root = findProjectRoot();
   await initLLM(root);
+  const config = loadConfig(root);
+  const persona = getActivePersona(config);
 
   console.log(`\x1b[34m📥 PDF 처리 중: ${pdfPath}\x1b[0m`);
   const { title, text } = await extractTextFromPdf(absPath);
@@ -166,7 +170,7 @@ async function addPdf(store: Store, pdfPath: string) {
   const source = store.addSource(absPath, "pdf", title, "(PDF)");
 
   console.log("\x1b[34m📄 LLM 기반 문서 분석 중...\x1b[0m");
-  const { sourceCount, conceptCount } = await llmChunkDocument(text, title, source.id, store);
+  const { sourceCount, conceptCount } = await llmChunkDocument(text, title, source.id, store, 0, persona);
   console.log(`\x1b[32m✅ 📖 ${sourceCount}개 원본 + 📝 ${conceptCount}개 개념 문서 생성\x1b[0m`);
 
   const { getUsageStats, getEstimatedCost, printUsageSummary } = await import("./llm-client");
@@ -388,7 +392,8 @@ program
               store.deletePagesBySource(src.id);
 
               processingStatus = "LLM 분석 중...";
-              await llmChunkDocument(text, title, src.id, store);
+              const currentPersona = getActivePersona(loadConfig(root));
+              await llmChunkDocument(text, title, src.id, store, 0, currentPersona);
 
               const u = getUsageStats();
               store.addUsageLog(src.id, u.totalCalls, u.promptTokens, u.completionTokens, u.totalTokens, getEstimatedCost());
@@ -440,7 +445,8 @@ program
               const rawText = htmlToRawText(html);
 
               processingStatus = "LLM 분석 중...";
-              await llmChunkDocument(rawText, title, src.id, store);
+              const currentPersona = getActivePersona(loadConfig(root));
+              await llmChunkDocument(rawText, title, src.id, store, 0, currentPersona);
 
               const u = getUsageStats();
               store.addUsageLog(src.id, u.totalCalls, u.promptTokens, u.completionTokens, u.totalTokens, getEstimatedCost());
@@ -497,6 +503,51 @@ program
           return Response.json(masked);
         }
 
+        // Persona API
+        if (url.pathname === "/api/personas" && req.method === "GET") {
+          const currentConfig = loadConfig(root);
+          return Response.json({
+            personas: currentConfig.personas || [],
+            active: currentConfig.active_persona || "",
+          });
+        }
+
+        if (url.pathname === "/api/personas" && req.method === "POST") {
+          const body = await req.json() as any;
+          const currentConfig = loadConfig(root);
+          if (!currentConfig.personas) currentConfig.personas = [];
+
+          if (body.action === "add") {
+            const { name, description, system_prompt, content_style } = body.persona;
+            if (!name) return Response.json({ error: "이름이 필요합니다" }, { status: 400 });
+            if (currentConfig.personas.find(p => p.name === name)) {
+              return Response.json({ error: "이미 존재하는 페르소나입니다" }, { status: 409 });
+            }
+            currentConfig.personas.push({ name, description: description || "", system_prompt: system_prompt || "", content_style: content_style || "" });
+          } else if (body.action === "update") {
+            const idx = currentConfig.personas.findIndex(p => p.name === body.original_name);
+            if (idx === -1) return Response.json({ error: "페르소나를 찾을 수 없습니다" }, { status: 404 });
+            currentConfig.personas[idx] = body.persona;
+            if (currentConfig.active_persona === body.original_name && body.persona.name !== body.original_name) {
+              currentConfig.active_persona = body.persona.name;
+            }
+          } else if (body.action === "delete") {
+            currentConfig.personas = currentConfig.personas.filter(p => p.name !== body.name);
+            if (currentConfig.active_persona === body.name) {
+              currentConfig.active_persona = currentConfig.personas[0]?.name || "";
+            }
+          } else if (body.action === "activate") {
+            if (!currentConfig.personas.find(p => p.name === body.name)) {
+              return Response.json({ error: "페르소나를 찾을 수 없습니다" }, { status: 404 });
+            }
+            currentConfig.active_persona = body.name;
+          }
+
+          saveConfig(root, currentConfig);
+          Object.assign(config, currentConfig);
+          return Response.json({ ok: true, personas: currentConfig.personas, active: currentConfig.active_persona });
+        }
+
         // Build API
         if (url.pathname === "/api/build" && req.method === "POST") {
           if (isProcessing) {
@@ -535,6 +586,8 @@ program
             sources,
             usage,
             llmConfig: configData.llm,
+            personas: configData.personas || [],
+            activePersona: configData.active_persona || "",
           }), { headers: { "Content-Type": "text/html" } });
         }
 

package/src/pipeline/llm-chunker.ts

@@ -1,6 +1,7 @@
 import { chatComplete } from "../llm-client";
 import type { Store } from "../store";
 import { slugify } from "./chunker";
+import type { Persona } from "../config";
 
 // ── Phase 1: Extract original document structure ──
 
@@ -27,7 +28,8 @@ Return at most 8 sections per response to keep output manageable.`;
 
 // ── Phase 2: Extract concepts for separate pages ──
 
-const CONCEPT_SYSTEM = `You are a study wiki editor. Given source material pages, identify important concepts, terms, and definitions that deserve their own dedicated wiki pages.
+function getConceptSystem(persona: Persona | null): string {
+  const base = `You are a study wiki editor. Given source material pages, identify important concepts, terms, and definitions that deserve their own dedicated wiki pages.
 
 Rules:
 - Pick terms that appear across multiple sections OR are fundamental domain concepts
@@ -38,19 +40,42 @@ Rules:
 
 Return valid JSON only. No markdown fences.`;
 
-const CONCEPT_PROMPT = `Based on these source pages, create concept/glossary wiki pages for important terms.
+  if (persona) {
+    return `${persona.system_prompt}\n\n${base}\n\nIMPORTANT: ${persona.content_style}`;
+  }
+  return base;
+}
+
+function getConceptPrompt(persona: Persona | null): string {
+  const styleNote = persona
+    ? `\n\nWrite content in the following style:\n${persona.content_style}`
+    : "";
+
+  return `Based on these source pages, create concept/glossary wiki pages for important terms.
 
 Source pages already created:
 {sourcePages}
 
 Create 3-6 concept pages for the most important terms, definitions, laws, and equations found in these pages.
 Do NOT duplicate the source pages — instead, create focused concept pages that the source pages can link to.
-Keep each page concise (2-3 paragraphs).
+Keep each page concise (2-3 paragraphs).${styleNote}
 
 Return a JSON array where each element has:
 - "title": string — Short concept name, 1-3 words (e.g., "Synchrotron Radiation", "Flux Density", "Angular Resolution"). Keep titles short so they match naturally in text.
 - "content": string — Educational markdown content with [[wiki links]] to other concepts and source pages
 - "suggested_links": Array<{text: string, url: string}> — Wikipedia/external reference links`;
+}
+
+function getStructureSystem(persona: Persona | null): string {
+  const base = `You are a document analyzer. Extract the chapter/section structure from this textbook content, preserving the original order and hierarchy.
+
+Return valid JSON only. No markdown fences.`;
+
+  if (persona) {
+    return `${persona.system_prompt}\n\n${base}\n\nWhen converting content to markdown, apply this writing style:\n${persona.content_style}`;
+  }
+  return base;
+}
 
 interface StructurePage {
   title: string;
@@ -173,13 +198,17 @@ export async function llmChunkDocument(
   sourceTitle: string,
   sourceId: number,
   store: Store,
-  maxChunks: number = 0 // 0 = unlimited
+  maxChunks: number = 0, // 0 = unlimited
+  persona: Persona | null = null
 ): Promise<{ sourceCount: number; conceptCount: number }> {
   let chunks = splitByChapters(rawText);
   if (maxChunks > 0 && chunks.length > maxChunks) {
     console.log(`\x1b[33m⚠ ${chunks.length}개 청크 중 ${maxChunks}개만 처리합니다\x1b[0m`);
     chunks = chunks.slice(0, maxChunks);
   }
+  if (persona) {
+    console.log(`\x1b[35m🎭 페르소나: ${persona.name}\x1b[0m`);
+  }
   console.log(`\x1b[34m🧠 Phase 1: 원본 구조 추출 (${chunks.length}개 청크)...\x1b[0m`);
 
   // ── Phase 1: Extract source pages ──
@@ -194,11 +223,12 @@ export async function llmChunkDocument(
       .replace("{sourceTitle}", sourceTitle)
       .replace("{text}", chunk.text.slice(0, 80000));
 
+    const structureSystem = getStructureSystem(persona);
     try {
-      const raw = await chatComplete(STRUCTURE_SYSTEM, prompt, 16384);
+      const raw = await chatComplete(structureSystem, prompt, 16384);
       if (!raw || raw.trim().length < 10) {
         console.log(`    \x1b[33m⚠ 빈 응답, 재시도...\x1b[0m`);
-        const retry = await chatComplete(STRUCTURE_SYSTEM, prompt, 16384);
+        const retry = await chatComplete(structureSystem, prompt, 16384);
         if (!retry || retry.trim().length < 10) {
           console.log(`    \x1b[31m✗ 재시도도 빈 응답\x1b[0m`);
           continue;
@@ -257,10 +287,12 @@ export async function llmChunkDocument(
     const existingConcepts = conceptCount > 0
       ? `\n\nAlready created concept pages (do not duplicate): ${store.listConceptPages().map(p => p.title).join(", ")}`
       : "";
-    const prompt = CONCEPT_PROMPT.replace("{sourcePages}", batch.join("\n")) + existingConcepts;
+    const conceptPrompt = getConceptPrompt(persona);
+    const prompt = conceptPrompt.replace("{sourcePages}", batch.join("\n")) + existingConcepts;
+    const conceptSystem = getConceptSystem(persona);
 
     try {
-      const raw = await chatComplete(CONCEPT_SYSTEM, prompt, 16384);
+      const raw = await chatComplete(conceptSystem, prompt, 16384);
       const concepts = parseJSON<ConceptPage[]>(raw).filter(c => c.title && c.content && c.content.length > 50);
 
       for (const concept of concepts) {