Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 7

Commit

b070fc7

verified ·

1 Parent(s): 829fc79

Update index.html

Browse files

Files changed (1) hide show

index.html +115 -128

index.html CHANGED Viewed

@@ -2,196 +2,183 @@
 <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>

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