Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 7

Commit

a4f9303

verified ·

1 Parent(s): cbd837d

Update index.html

Browse files

Files changed (1) hide show

index.html +85 -84

index.html CHANGED Viewed

@@ -2,57 +2,62 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <title>Huiucl Precision Dictionary v4</title>
     <style>
         :root { --primary: #2c3e50; --accent: #e67e22; --bg: #f8f9fa; --card: #ffffff; }
-        body { font-family: 'Malgun Gothic', sans-serif; background: var(--bg); padding: 20px; color: var(--primary); }
         .container { max-width: 900px; margin: 0 auto; }
         /* 헤더 섹션 */
-        .header-panel { background: var(--primary); color: white; padding: 25px; border-radius: 15px; margin-bottom: 25px; text-align: center; }
         /* 검색창 */
         .search-container { position: sticky; top: 15px; z-index: 1000; margin-bottom: 30px; }
-        .search-input { width: 100%; padding: 18px 25px; font-size: 20px; border: 4px solid #ddd; border-radius: 50px; outline: none; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
-        .search-input:focus { border-color: var(--accent); }
         /* 결과 카드 */
-        .card { background: var(--card); border-radius: 12px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-left: 8px solid #bdc3c7; }
         .card.exact { border-left-color: var(--accent); }
-        .tag-row { margin-bottom: 10px; }
-        .badge { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: bold; text-transform: uppercase; }
-        .badge-cat { background: #ebf5fb; color: #2980b9; }
-        .badge-exact { background: var(--accent); color: white; margin-left: 5px; }
-        .word-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
-        .word-text { font-size: 28px; font-weight: 900; color: #2c3e50; }
-        .meaning-ko { font-size: 22px; color: #e74c3c; font-weight: bold; }
-        .meaning-en { color: #7f8c8d; font-size: 16px; }
-        /* 파생/변이 그리드 */
-        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin-top: 15px; }
-        .data-box { background: #fcfcfc; border: 1px solid #efefef; border-radius: 8px; padding: 12px; }
-        .box-title { font-size: 13px; font-weight: bold; color: #34495e; margin-bottom: 8px; border-bottom: 1px solid #3498db; }
-        .item-row { display: flex; font-size: 13px; margin-bottom: 3px; }
-        .item-key { font-weight: bold; width: 100px; color: #d35400; }
         /* 상세 정보 (검색 제외 구역) */
-        .extra { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #eee; font-size: 13px; color: #666; }
-        .ex-box { color: #2980b9; background: #f0f7ff; padding: 10px; border-radius: 5px; margin-top: 5px; border-left: 3px solid #3498db; }
-        .label { font-weight: bold; color: #95a5a6; margin-right: 5px; }
     </style>
 </head>
 <body>
 <div class="container">
     <div class="header-panel">
-        <h1 id="title">Huiucl Precision Dictionary</h1>
-        <p id="status">⚙️ 데이터를 불러오는 중...</p>
     </div>
     <div class="search-container">
-        <input type="text" id="query" class="search-input" placeholder="Huiucl.json을 같은 폴더에 두고 로드되길 기다리세요..." disabled onkeyup="search()">
     </div>
     <div id="results"></div>
@@ -61,123 +66,119 @@
 <script>
 let lexicon = {};
-// 1. 파일 자동 로드
 window.onload = async function() {
     try {
-        const res = await fetch('Huiucl.json');
-        if (!res.ok) throw new Error('파일을 찾을 수 없습니다.');
-        const data = await res.json();
         process(data);
-        document.getElementById('status').innerText = `✅ ${Object.keys(lexicon).length}개 단어 로드 완료`;
-        document.getElementById('query').disabled = false;
-        document.getElementById('query').placeholder = "단어 또는 뜻 검색 (su, a, muihi, 관찰...)";
     } catch (err) {
-        document.getElementById('status').innerText = `❌ 오류: ${err.message}`;
     }
 };
-// 2. 데이터 처리 (뜻 우선순위 및 검색 타겟 정밀화)
 function process(obj, parentKey = null, currentCat = null) {
     if (typeof obj !== 'object' || obj === null) return;
-    // 대명사 특수 계층
     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`,
                 _search_target: `${pk} ${pv}`.toLowerCase()
             };
         }
         return;
     }
-    // 단어 정보 판단
-    const keys = ['ko', 'meaning_ko', 'morpheme', 'en', 'meaning_en'];
-    const hasMeaning = keys.some(k => k in obj);
-    if (hasMeaning && parentKey) {
         let entry = { ...obj };
-        // 뜻 추출 우선순위: 한국어 대응어(ko) -> 실제 뜻(meaning_ko) -> 형태소 정보(morpheme)
-        const koVal = entry.ko || entry.meaning_ko || entry.morpheme || "";
-        const enVal = entry.en || entry.meaning_en || "";
-        // [핵심] 검색 타겟에서 상위 키(Nominative 등) 및 예문/용법 제외!
-        // 오직 단어 이름과 위에서 추출한 koVal, enVal만 검색 대상
-        entry._category = currentCat;
-        entry._display_ko = koVal;
-        entry._display_en = enVal;
-        entry._search_target = `${parentKey} ${koVal} ${enVal}`.toLowerCase();
         lexicon[parentKey] = entry;
     }
     for (const [k, v] of Object.entries(obj)) {
-        if (typeof v === 'object' && k !== 'Settings') {
-            process(v, k, parentKey === null ? k : currentCat);
         }
     }
 }
-// 3. 검색 및 렌더링
 function search() {
     const q = document.getElementById('query').value.trim().toLowerCase();
-    const area = document.getElementById('results');
-    area.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 subHtml = '';
-        const dr = info.derivations || info.derivation;
-        if (dr) {
-            subHtml += `<div class="data-box"><div class="box-title">📂 기록된 파생어</div>`;
-            for(const [k, v] of Object.entries(dr)) subHtml += `<div class="item-row"><span class="item-key">${k}</span><span>${v}</span></div>`;
-            subHtml += `</div>`;
         }
-        let vr = {};
-        ['tense_variants', 'aspect_voice', 'variants'].forEach(k => { if(info[k]) Object.assign(vr, info[k]); });
-        if (Object.keys(vr).length > 0) {
-            subHtml += `<div class="data-box"><div class="box-title">📂 시제 및 변이</div>`;
-            for(const [k, v] of Object.entries(vr)) subHtml += `<div class="item-row"><span class="item-key">${k}</span><span>${v.ko || v.meaning_ko || ''}</span></div>`;
-            subHtml += `</div>`;
         }
         card.innerHTML = `
-            <div class="tag-row">
-                <span class="badge badge-cat">${info._category}</span>
-                ${item.score === 2 ? '<span class="badge badge-exact">정확한 일치</span>' : ''}
-            </div>
             <div class="word-row">
                 <span class="word-text">${item.word}</span>
-                <span class="meaning-ko">${info._display_ko}</span>
-                <span class="meaning-en">${info._display_en}</span>
             </div>
-            <div class="grid">${subHtml}</div>
-            <div class="extra">
-                ${info.usage ? `<div><span class="label">📝 용법:</span> ${typeof info.usage === 'object' ? info.usage.ko : info.usage}</div>` : ''}
-                ${info.note ? `<div><span class="label">💡 참고:</span> ${info.note}</div>` : ''}
-                ${info.example ? `<div class="ex-box"><span class="label">📖 예문:</span> ${info.example}</div>` : ''}
             </div>
         `;
-        area.appendChild(card);
     });
 }
 </script>

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