Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 7

Commit

829fc79

verified ·

1 Parent(s): a1fd74d

Update index.html

Browse files

Files changed (1) hide show

index.html +162 -198

index.html CHANGED Viewed

@@ -2,234 +2,198 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <title>HUIUCL CORE ARCHIVE v5.0</title>
     <style>
-        :root {
-            --bg: #f5f3f0;
-            --card: #ffffff;
-            --accent: #a68b6a;
-            --primary: #2c2c2c;
-            --secondary: #767676;
-            --border: #e0ddd5;
-        }
-        body { font-family: 'Pretendard', -apple-system, sans-serif; background: var(--bg); color: var(--primary); margin: 0; line-height: 1.6; }
-        /* Navigation */
-        nav { background: var(--primary); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
-        .nav-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; gap: 40px; }
-        nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 2px; cursor: pointer; opacity: 0.7; transition: 0.3s; }
-        nav a:hover, nav a.active { opacity: 1; color: var(--accent); }
-        /* Header */
-        header { background: #fff; padding: 60px 20px; text-align: center; border-bottom: 1px solid var(--border); }
-        h1 { margin: 0; letter-spacing: 12px; font-weight: 200; color: var(--primary); font-size: 2.5rem; }
-        .sub-header { color: var(--secondary); font-size: 0.8rem; margin-top: 15px; letter-spacing: 3px; text-transform: uppercase; }
-        .container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
-        /* Dictionary Styling */
-        .search-box { width: 100%; padding: 20px 30px; border: 1px solid var(--border); border-radius: 40px; font-size: 1.1rem; box-sizing: border-box; outline: none; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: 0.3s; margin-bottom: 30px; }
-        .search-box:focus { border-color: var(--accent); box-shadow: 0 5px 25px rgba(166, 139, 106, 0.15); }
-        .table-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.04); border: 1px solid var(--border); }
-        table { width: 100%; border-collapse: collapse; table-layout: fixed; }
-        th { background: #faf9f7; padding: 20px; text-align: left; font-size: 0.75rem; color: #999; letter-spacing: 1px; border-bottom: 2px solid var(--border); }
-        td { padding: 20px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-all; }
-        .word-cell { width: 25%; font-size: 1.2rem; font-weight: 700; color: var(--primary); }
-        .meaning-cell { width: 55%; }
-        .path-cell { width: 20%; text-align: right; font-size: 0.7rem; color: #bbb; text-transform: uppercase; }
-        .ko-text { font-size: 1.1rem; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
-        .en-text { font-size: 0.95rem; color: var(--secondary); }
-        .usage-box { margin-top: 12px; padding: 12px; background: #fdfcfb; border: 1px solid #f0eee9; border-left: 4px solid var(--accent); font-size: 0.85rem; color: #555; }
-        /* Grammar Section Styling */
-        .grammar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 20px; }
-        .grammar-card { background: #fff; padding: 30px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
-        .grammar-card h2 { margin-top: 0; font-size: 1.3rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 20px; font-weight: 400; }
-        .rule-item { margin-bottom: 15px; }
-        .rule-name { font-weight: 700; color: var(--primary); display: block; margin-bottom: 3px; font-size: 0.95rem; }
-        .rule-desc { font-size: 0.9rem; color: var(--secondary); display: block; }
-        section { display: none; }
-        section.active { display: block; animation: fadeIn 0.4s ease-out; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
 <body>
-<nav>
-    <div class="nav-container">
-        <a id="btn-dict" class="active" onclick="showTab('dictionary')">DICTIONARY</a>
-        <a id="btn-gram" onclick="showTab('grammar')">GRAMMAR</a>
     </div>
-</nav>
-<header>
-    <h1>HUIUCL</h1>
-    <div class="sub-header">Systemized Linguistic Archive v5.0</div>
-</header>
-<div class="container">
-    <section id="dictionary" class="active">
-        <input type="text" id="searchInput" class="search-box" placeholder="Search words, meanings, or categories..." oninput="render()">
-        <div class="table-card">
-            <table>
-                <thead>
-                    <tr>
-                        <th>WORD</th>
-                        <th>MEANING & USAGE</th>
-                        <th style="text-align:right">CATEGORY</th>
-                    </tr>
-                </thead>
-                <tbody id="dictBody"></tbody>
-            </table>
-        </div>
-    </section>
-    <section id="grammar">
-        <div id="grammarContent" class="grammar-grid">
-            </div>
-    </section>
 </div>
 <script>
-    let db = {};
-    function showTab(id) {
-        document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
-        document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
-        document.getElementById(id).classList.add('active');
-        document.getElementById('btn-' + (id === 'dictionary' ? 'dict' : 'gram')).classList.add('active');
-    }
-    window.onload = () => {
-        fetch('Huiucl.json')
-            .then(res => res.json())
-            .then(data => {
-                db = data;
-                render();
-                renderGrammar();
-            })
-            .catch(err => console.error("JSON 로드 실패:", err));
     };
-    function render() {
-        const query = document.getElementById('searchInput').value.toLowerCase();
-        const body = document.getElementById('dictBody');
-        body.innerHTML = '';
-        for (const cat in db) {
-            if (cat === "Settings") continue;
-            processCategory(db[cat], cat, query);
         }
     }
-    function processCategory(obj, path, query) {
-        if (path.includes("Grammar_Rules")) return;
-        for (const key in obj) {
-            const val = obj[key];
-            if (!val) continue;
-            const info = getInfo(key, val);
-            if (info.isWord) {
-                if ((info.word + info.ko + info.en + path).toLowerCase().includes(query)) {
-                    appendRow(info, path);
-                }
-                // 파생어 처리
-                if (val.derivations) {
-                    for (const dk in val.derivations) {
-                        appendRow({ word: dk, ko: val.derivations[dk], en: "", usage: "" }, path, true);
-                    }
-                }
-                // 시제 변형 등 내부 재귀
-                if (typeof val === 'object' && val.tense_variants) {
-                    processCategory(val.tense_variants, path + " > " + key, query);
-                }
-            } else if (typeof val === 'object') {
-                processCategory(val, path + " > " + key, query);
-            }
         }
     }
-    function getInfo(key, val) {
-        let res = { isWord: false, word: key, ko: "", en: "", usage: "" };
-        if (typeof val === 'string') {
-            res.isWord = true;
-            res.ko = val;
-        } else if (typeof val === 'object') {
-            // morpheme 키가 있으면 그것을 단어로 취급
-            if (val.morpheme) res.word = val.morpheme;
-            res.ko = val.meaning_ko || val.ko || val.뜻 || val.definition || "";
-            res.en = val.meaning_en || val.en || "";
-            res.usage = val.usage || val.note || "";
-            // 객체 안의 객체 에러 방지 (강제 문자열화)
-            const clean = (v) => (typeof v === 'object' ? (v.ko || v.meaning_ko || v.en || JSON.stringify(v)) : v);
-            res.ko = clean(res.ko);
-            res.en = clean(res.en);
-            res.usage = clean(res.usage);
-            if (res.ko || res.en) res.isWord = true;
         }
-        return res;
     }
-    function appendRow(info, path, isSub) {
-        const body = document.getElementById('dictBody');
-        const row = body.insertRow();
-        if (isSub) row.style.background = "#fcfcfc";
-        let meaningHtml = `<div class="ko-text">${info.ko}</div>`;
-        if (info.en) meaningHtml += `<div class="en-text">${info.en}</div>`;
-        if (info.usage) meaningHtml += `<div class="usage-box"><strong>NOTE:</strong> ${info.usage}</div>`;
-        row.innerHTML = `
-            <td class="word-cell" style="${isSub ? 'padding-left:40px; font-size:1rem; opacity:0.7;' : ''}">
-                ${isSub ? '↳ ' : ''}${info.word}
-            </td>
-            <td class="meaning-cell">${meaningHtml}</td>
-            <td class="path-cell">${path}</td>
-        `;
-    }
-    function renderGrammar() {
-        const container = document.getElementById('grammarContent');
-        let html = "";
-        // 1. Settings 데이터 처리
-        if (db.Settings) {
-            html += `<div class="grammar-card">
-                <h2>General System</h2>
-                <div class="rule-item"><span class="rule-name">Word Order</span><span class="rule-desc">${db.Settings.Syntax.Word_Order.join(', ')}</span></div>
-                <div class="rule-item"><span class="rule-name">Imperative</span><span class="rule-desc">${db.Settings.Syntax.Imperative["2"]}</span></div>
-                <div class="rule-item"><span class="rule-name">Phonology</span><span class="rule-desc">Vowels: ${Object.keys(db.Settings.Phonology.Vowels).join(', ')} / Consonants: ${Object.keys(db.Settings.Phonology.Consonants).join(', ')}</span></div>
-            </div>`;
         }
-        // 2. 트리 전체를 뒤져서 Grammar_Rules 수집
-        function collect(obj, path) {
-            for (const key in obj) {
-                if (key === "Grammar_Rules") {
-                    html += `<div class="grammar-card"><h2>${path} Rules</h2>`;
-                    for (const r in obj[key]) {
-                        html += `<div class="rule-item"><span class="rule-name">${r}</span><span class="rule-desc">${obj[key][r]}</span></div>`;
-                    }
-                    html += `</div>`;
-                } else if (typeof obj[key] === 'object' && key !== "Settings") {
-                    collect(obj[key], path ? path + " > " + key : key);
-                }
-            }
         }
-        collect(db, "");
-        container.innerHTML = html || "<p style='grid-column: 1/-1; text-align:center; padding:50px;'>No grammar rules found.</p>";
-    }
 </script>
 </body>
 </html>

 <html lang="ko">
 <head>
     <meta charset="UTF-8">
+    <title>Huiucl Precision Dictionary v2</title>
     <style>
+        :root { --primary: #2c3e50; --accent: #e67e22; --bg: #f0f2f5; --card: #ffffff; }
+        body { font-family: 'Malgun Gothic', sans-serif; background: var(--bg); padding: 30px; color: var(--primary); line-height: 1.6; }
+        .container { max-width: 1000px; margin: 0 auto; }
+        /* 헤더 및 파일 로더 */
+        .header { background: var(--primary); color: white; padding: 20px; border-radius: 12px; margin-bottom: 20px; text-align: center; }
+        .file-upload { background: #fff; padding: 15px; border-radius: 8px; border: 2px dashed #bdc3c7; margin-bottom: 20px; text-align: center; }
+        /* 검색창 */
+        .search-area { position: sticky; top: 10px; z-index: 100; background: var(--bg); padding-bottom: 10px; }
+        .search-box { width: 100%; padding: 18px; font-size: 20px; border: 3px solid #ddd; border-radius: 10px; box-sizing: border-box; outline: none; transition: border-color 0.3s; }
+        .search-box:focus { border-color: var(--accent); }
+        .search-box:disabled { background: #eee; cursor: not-allowed; }
+        /* 결과 아이템 */
+        .result-item { background: var(--card); border-radius: 12px; padding: 30px; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); position: relative; }
+        .exact-match { border: 3px solid var(--accent); }
+        .exact-badge { position: absolute; top: -15px; right: 20px; background: var(--accent); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 13px; }
+        .word-title { font-size: 28px; font-weight: 800; color: #2980b9; margin: 0 0 10px 0; border-bottom: 2px solid #eee; padding-bottom: 5px; }
+        .category { font-size: 13px; color: #7f8c8d; background: #ecf0f1; padding: 3px 10px; border-radius: 5px; margin-left: 10px; }
+        .meaning-section { font-size: 19px; margin: 15px 0; font-weight: 500; }
+        .data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
+        .data-box { background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #e9ecef; }
+        .box-title { font-weight: bold; font-size: 14px; color: #34495e; margin-bottom: 10px; border-left: 4px solid #3498db; padding-left: 8px; }
+        .info-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
+        .info-list li { margin-bottom: 5px; }
+        .key-text { font-weight: bold; color: #2c3e50; width: 100px; display: inline-block; }
+        .desc-section { margin-top: 15px; font-size: 14px; color: #555; border-top: 1px solid #eee; padding-top: 15px; }
+        .hidden-search-tag { display: none; } /* 검색엔 안걸리지만 보여주기만 함 */
     </style>
 </head>
 <body>
+<div class="container">
+    <div class="header">
+        <h1>Huiucl Precision Search Engine</h1>
+        <p>조사, 대명사, 파생어를 예문 간섭 없이 정밀하게 찾아줍니다.</p>
+    </div>
+    <div class="file-upload">
+        <strong>1. JSON 파일 로드:</strong>
+        <input type="file" id="fileInput" accept=".json">
     </div>
+    <div class="search-area">
+        <input type="text" id="searchInput" class="search-box" placeholder="파일을 먼저 로드해주세요..." disabled onkeyup="doSearch()">
+    </div>
+    <div id="status" style="margin-bottom: 15px; font-weight: bold; color: #2980b9;"></div>
+    <div id="results"></div>
 </div>
 <script>
+let lexicon = {};
+// [로드 기능] 파일 읽기
+document.getElementById('fileInput').addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        try {
+            const jsonData = JSON.parse(e.target.result);
+            processData(jsonData);
+            document.getElementById('searchInput').disabled = false;
+            document.getElementById('searchInput').placeholder = "단어 또는 뜻을 입력하세요 (예: su, a, 관찰)...";
+            document.getElementById('status').innerText = `✅ 로드 완료: ${Object.keys(lexicon).length}개의 항목을 인덱싱했습니다.`;
+        } catch (err) {
+            alert("JSON 파싱 중 오류가 발생했습니다: " + err.message);
+        }
     };
+    reader.readAsText(file);
+});
+// [데이터 가공] 정밀 인덱싱
+function processData(obj, parentKey = null, currentCat = null) {
+    if (typeof obj !== 'object' || obj === null) return;
+    // 대명사 섹션 특수 처리
+    const pronounSects = ["1st_Person", "2nd_Person", "3rd_Person", "Demonstratives"];
+    if (pronounSects.includes(parentKey)) {
+        for (const [pKey, pVal] of Object.entries(obj)) {
+            lexicon[pKey] = {
+                meaning_ko: pVal,
+                _category: `Pronouns (${parentKey})`,
+                _search_target: `${pKey} ${pVal}`.toLowerCase() // 단어와 뜻만 검색
+            };
+        }
+        return;
+    }
+    const meaningKeys = ['meaning_ko', 'ko', 'definition', 'morpheme', 'meaning_en', 'en'];
+    const hasMeaning = meaningKeys.some(k => k in obj);
+    if (hasMeaning && parentKey) {
+        let entry = { ...obj };
+        if (entry.definition && typeof entry.definition === 'object') {
+            Object.assign(entry, entry.definition);
         }
+        // [정밀 검색 설정] 단어명과 뜻만 검색 대상에 포함 (usage, example 제외)
+        let searchParts = [parentKey];
+        meaningKeys.forEach(k => { if (entry[k]) searchParts.push(entry[k]); });
+        entry._category = currentCat;
+        entry._search_target = searchParts.join(" ").toLowerCase();
+        lexicon[parentKey] = entry;
     }
+    for (const [k, v] of Object.entries(obj)) {
+        if (typeof v === 'object') {
+            const nextCat = (parentKey === null) ? k : currentCat;
+            if (k !== 'Settings') processData(v, k, nextCat);
         }
     }
+}
+// [검색 기능] 정밀 매칭
+function doSearch() {
+    const query = document.getElementById('searchInput').value.trim().toLowerCase();
+    const resultsArea = document.getElementById('results');
+    resultsArea.innerHTML = '';
+    if (!query) return;
+    let results = [];
+    // 한 글자 검색 시에도 정확도를 유지하기 위한 독립 단어 경계 체크용
+    const regex = new RegExp(`(^|[^a-zA-Z가-힣])${query}($|[^a-zA-Z가-힣])`, 'i');
+    for (const [word, info] of Object.entries(lexicon)) {
+        const wordLower = word.toLowerCase();
+        const searchTarget = info._search_target || "";
+        if (query === wordLower) {
+            results.push({ word, info, score: 2 }); // 완전 일치
+        } else if (regex.test(searchTarget) || (query.length > 1 && searchTarget.includes(query))) {
+            results.push({ word, info, score: 1 }); // 스마트 일치
         }
     }
+    results.sort((a, b) => b.score - a.score);
+    render(results);
+}
+function render(items) {
+    const area = document.getElementById('results');
+    items.forEach(item => {
+        const info = item.info;
+        const div = document.createElement('div');
+        div.className = `result-item ${item.score === 2 ? 'exact-match' : ''}`;
+        let subHtml = "";
+        // 파생어
+        const derivs = info.derivations || info.derivation;
+        if (derivs) {
+            subHtml += `<div class="data-box"><div class="box-title">📂 기록된 파생어</div><ul class="info-list">`;
+            for(const [dw, dm] of Object.entries(derivs)) subHtml += `<li><span class="deriv-word">${dw}</span> : ${dm}</li>`;
+            subHtml += `</ul></div>`;
         }
+        // 변이형
+        let vars = {};
+        ["tense_variants", "aspect_voice", "variants"].forEach(k => { if(info[k]) Object.assign(vars, info[k]); });
+        if (Object.keys(vars).length > 0) {
+            subHtml += `<div class="data-box"><div class="box-title">📂 시제 및 변이</div><ul class="info-list">`;
+            for(const [vw, vi] of Object.entries(vars)) subHtml += `<li><span class="deriv-word">${vw}</span> : ${vi.meaning_ko || vi.ko || ''}</li>`;
+            subHtml += `</ul></div>`;
         }
+        div.innerHTML = `
+            ${item.score === 2 ? '<div class="exact-badge">정확한 일치</div>' : ''}
+            <h2 class="word-title">${item.word.toUpperCase()} <span class="category">${info._category}</span></h2>
+            <div class="meaning-section">${info.meaning_ko || info.ko || info.morpheme || ''} | <span style="color:#7f8c8d">${info.meaning_en || info.en || ''}</span></div>
+            <div class="data-grid">${subHtml}</div>
+            <div class="desc-section">
+                ${info.usage ? `<div><span class="detail-label">📝 용법:</span> ${typeof info.usage === 'object' ? info.usage.ko : info.usage}</div>` : ''}
+                ${info.note ? `<div><span class="detail-label">💡 참고:</span> ${info.note}</div>` : ''}
+                ${info.example ? `<div style="margin-top:8px; color:#2980b9;"><span class="detail-label">📖 예문:</span> ${info.example}</div>` : ''}
+            </div>
+        `;
+        area.appendChild(div);
+    });
+}
 </script>
 </body>
 </html>