Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 7

Commit

aff5f11

verified ·

1 Parent(s): 6536001

Update index.html

Browse files

Files changed (1) hide show

index.html +200 -151

index.html CHANGED Viewed

@@ -2,185 +2,234 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <title>Huiucl Auto-Load Dictionary</title>
     <style>
-        :root { --primary: #2c3e50; --accent: #e67e22; --bg: #f8f9fa; --card: #ffffff; }
-        body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; background: var(--bg); padding: 20px; color: var(--primary); }
-        .container { max-width: 900px; margin: 0 auto; }
-        /* 로딩 상태 표시 */
-        #loader { text-align: center; padding: 20px; font-weight: bold; color: #2980b9; }
-        /* 헤더 섹션 */
-        .header-panel { background: var(--primary); color: white; padding: 30px; border-radius: 15px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
-        .header-panel h1 { margin: 0; font-size: 32px; letter-spacing: 1px; }
-        /* 검색창 */
-        .search-container { position: sticky; top: 15px; z-index: 1000; margin-bottom: 30px; }
-        .search-input { width: 100%; padding: 20px 25px; font-size: 22px; border: 4px solid #ddd; border-radius: 50px; box-sizing: border-box; outline: none; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transition: all 0.3s ease; }
-        .search-input:focus { border-color: var(--accent); transform: translateY(-2px); }
-        /* 결과 카드 */
-        .card { background: var(--card); border-radius: 15px; padding: 30px; margin-bottom: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-left: 8px solid #dcdde1; transition: transform 0.2s; }
-        .card:hover { transform: scale(1.01); }
-        .card.exact { border-left-color: var(--accent); }
-        .badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
-        .badge-cat { background: #f1f2f6; color: #7f8c8d; }
-        .badge-exact { background: var(--accent); color: white; margin-left: 10px; }
-        .word-row { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
-        .word-text { font-size: 32px; font-weight: 900; color: #2980b9; text-transform: uppercase; }
-        .meaning-text { font-size: 20px; color: #2c3e50; font-weight: 600; }
-        .meaning-en { color: #95a5a6; font-size: 16px; font-style: italic; }
-        /* 데이터 그리드 (파생어, 변이형) */
-        .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 20px; }
-        .data-list { background: #fdfdfd; border: 1px solid #f1f1f1; border-radius: 10px; padding: 15px; }
-        .list-title { font-size: 14px; font-weight: bold; color: #34495e; border-bottom: 2px solid #3498db; padding-bottom: 5px; margin-bottom: 10px; }
-        .item-row { display: flex; font-size: 14px; margin-bottom: 4px; }
-        .item-key { font-weight: bold; width: 110px; color: #e67e22; }
-        /* 상세 정보 (검색 제외 구역) */
-        .details { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #eee; font-size: 14px; color: #555; }
-        .detail-item { margin-bottom: 5px; }
-        .label { font-weight: bold; color: #7f8c8d; margin-right: 5px; }
-        .example-box { color: #2980b9; background: #ebf5fb; padding: 10px; border-radius: 5px; margin-top: 5px; }
     </style>
 </head>
 <body>
-<div class="container">
-    <div class="header-panel">
-        <h1>Huiucl Engine <small style="font-size: 14px; opacity: 0.8;">v3.0 Auto-Load</small></h1>
-        <div id="loader">⚙️ 데이터를 불러오는 중...</div>
     </div>
-    <div class="search-container">
-        <input type="text" id="query" class="search-input" placeholder="검색어를 입력하세요 (su, a, mi, 제작하다...)" onkeyup="search()">
-    </div>
-    <div id="results"></div>
 </div>
 <script>
-let lexicon = {};
-// [자동 로드] 페이지 로드 시 Huiucl.json 파일을 즉시 읽어옴
-window.onload = async function() {
-    try {
-        const response = await fetch('Huiucl.json');
-        if (!response.ok) throw new Error('파일을 찾을 수 없습니다.');
-        const data = await response.json();
-        process(data);
-        document.getElementById('loader').innerText = `✅ ${Object.keys(lexicon).length}개 항목 로드 완료. 바로 검색 가능합니다.`;
-        setTimeout(() => document.getElementById('loader').style.display = 'none', 3000);
-    } catch (err) {
-        document.getElementById('loader').innerHTML = `❌ 오류: ${err.message}<br><small>Huiucl.json 파일이 같은 폴더에 있는지 확인하세요.</small>`;
     }
-};
-function process(obj, parentKey = null, currentCat = null) {
-    if (typeof obj !== 'object' || obj === null) return;
-    // 1. 대명사 섹션 (a, i, u 등 한 글자 대명사 완벽 로드)
-    const pSects = ["1st_Person", "2nd_Person", "3rd_Person", "Demonstratives"];
-    if (pSects.includes(parentKey)) {
-        for (const [pk, pv] of Object.entries(obj)) {
-            lexicon[pk] = {
-                meaning_ko: pv,
-                _category: `Pronoun (${parentKey})`,
-                _search_target: `${pk} ${pv}`.toLowerCase()
-            };
         }
-        return;
     }
-    // 2. 일반 단어 처리
-    const keys = ['meaning_ko', 'ko', 'definition', 'morpheme', 'meaning_en', 'en'];
-    const hasInfo = keys.some(k => k in obj);
-    if (hasInfo && parentKey) {
-        let entry = { ...obj };
-        if (entry.definition && typeof entry.definition === 'object') Object.assign(entry, entry.definition);
-        // [중요] 검색 타겟에서 usage, example은 제거 (오로지 단어명과 뜻만)
-        let targets = [parentKey];
-        keys.forEach(k => { if (entry[k]) targets.push(entry[k]); });
-        entry._category = currentCat;
-        entry._search_target = targets.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') process(v, k, nextCat);
         }
     }
-}
-function search() {
-    const q = document.getElementById('query').value.trim().toLowerCase();
-    const resDiv = document.getElementById('results');
-    resDiv.innerHTML = '';
-    if (!q) return;
-    let found = [];
-    // 정확한 독립 형태소 인지를 위한 정규식
-    const re = new RegExp(`(^|[^a-zA-Z가-힣])${q}($|[^a-zA-Z가-힣])`, 'i');
-    for (const [word, info] of Object.entries(lexicon)) {
-        const wordL = word.toLowerCase();
-        const target = info._search_target || "";
-        if (q === wordL) found.push({ word, info, score: 2 });
-        else if (re.test(target) || (q.length > 1 && target.includes(q))) found.push({ word, info, score: 1 });
     }
-    found.sort((a, b) => b.score - a.score).forEach(item => {
-        const info = item.info;
-        const card = document.createElement('div');
-        card.className = `card ${item.score === 2 ? 'exact' : ''}`;
-        // 파생어/변이형 그리드 생성
-        let gridHtml = '';
-        const derivs = info.derivations || info.derivation;
-        if (derivs) {
-            gridHtml += `<div class="data-list"><div class="list-title">📂 기록된 파생어</div>`;
-            for(const [dw, dm] of Object.entries(derivs)) gridHtml += `<div class="item-row"><span class="item-key">${dw}</span> <span>${dm}</span></div>`;
-            gridHtml += `</div>`;
         }
-        let vars = {};
-        ["tense_variants", "aspect_voice", "variants"].forEach(k => { if(info[k]) Object.assign(vars, info[k]); });
-        if (Object.keys(vars).length > 0) {
-            gridHtml += `<div class="data-list"><div class="list-title">📂 시제 및 변이</div>`;
-            for(const [vw, vi] of Object.entries(vars)) gridHtml += `<div class="item-row"><span class="item-key">${vw}</span> <span>${vi.meaning_ko || vi.ko || ''}</span></div>`;
-            gridHtml += `</div>`;
         }
-        card.innerHTML = `
-            <span class="badge badge-cat">${info._category}</span>
-            ${item.score === 2 ? '<span class="badge badge-exact">정확한 일치</span>' : ''}
-            <div class="word-row">
-                <span class="word-text">${item.word}</span>
-                <span class="meaning-text">${info.meaning_ko || info.ko || info.morpheme || ''}</span>
-                <span class="meaning-en">${info.meaning_en || info.en || ''}</span>
-            </div>
-            <div class="grid-container">${gridHtml}</div>
-            <div class="details">
-                ${info.usage ? `<div class="detail-item"><span class="label">📝 용법:</span> ${typeof info.usage === 'object' ? info.usage.ko : info.usage}</div>` : ''}
-                ${info.note ? `<div class="detail-item"><span class="label">💡 참고:</span> ${info.note}</div>` : ''}
-                ${info.example ? `<div class="example-box"><span class="label">📖 예문:</span> ${info.example}</div>` : ''}
-            </div>
-        `;
-        resDiv.appendChild(card);
-    });
-}
 </script>
 </body>
 </html>

 <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>