Update index.html

index.html

@@ -48,7 +48,7 @@
     }
     .main-container {
       display: flex;
-      height: calc(100vh - 100px); /* 상단 영역 제외 전체 높이 */
+      height: calc(100vh - 100px);
     }
     #sidebar {
       width: 25%;
@@ -72,7 +72,6 @@
     #sidebar li:hover {
       background-color: #f0f0f0;
     }
-    /* 우측 임베드 영역: 남은 공간을 모두 차지 */
     #embed-container {
       flex: 1;
       padding: 0;
@@ -93,26 +92,19 @@
   </div>
 
   <!-- 필터 버튼 영역 (미리 정의한 10가지 그룹: NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision) -->
-  <div class="filter-group" id="filter-group">
-    <!-- JavaScript로 동적으로 버튼 생성 -->
-  </div>
+  <div class="filter-group" id="filter-group"></div>
 
   <div class="main-container">
-    <!-- 좌측 사이드바: 선택한 카테고리의 항목 전체 목록 -->
-    <div id="sidebar">
-      <!-- JavaScript로 동적으로 생성 -->
-    </div>
-    <!-- 우측 임베드 영역 -->
+    <div id="sidebar"></div>
     <div id="embed-container">
       <iframe id="embed-frame" src=""></iframe>
     </div>
   </div>
 
-
   <script>
-    // 1. 제공된 전체 프로젝트 리스트 (키: 프로젝트 이름, 값: URL)
+    // 1. 프로젝트 URL 목록: 프로젝트 이름 -> URL
     const projectList = {
-      "fantos/Panorama": "https://huggingface.co/spaces/fantos/Panorama",  
+      "fantos/Panorama": "https://huggingface.co/spaces/fantos/Panorama",
       "ginigen/Multi-LoRAgen": "https://huggingface.co/spaces/ginigen/Multi-LoRAgen",
       "ginigen/canvas-studio": "https://huggingface.co/spaces/ginigen/canvas-studio",
       "ginipick/Fashion-Stylegen": "https://huggingface.co/spaces/ginipick/Fashion-Style",
@@ -227,10 +219,10 @@
       "aiqtech/FLUX-Ghibli-Studio-LoRA": "https://huggingface.co/spaces/aiqtech/FLUX-Ghibli-Studio-LoRA",
       "aiqtech/flxgif": "https://huggingface.co/spaces/aiqtech/flxgif",
       "aiqtech/imaginpaint": "https://huggingface.co/spaces/aiqtech/imaginpaint"
+    };
 
-
-      "fantos/Panorama": "Image Gen",
-      "ginigen/Multi-LoRAgen": "Image Gen",
+    // 2. 별도 객체: 프로젝트의 개별 카테고리 지정 (없으면 기본값 "Image Gen" 사용)
+    const customCategories = {
       "fantos/Panorama": "Image Gen",
       "ginigen/Multi-LoRAgen": "Image Gen",
       "ginigen/canvas-studio": "Image Edit",
@@ -244,9 +236,9 @@
       "fantaxy/adult-novel": "Text",
       "fantaxy/kungfu-novel": "Text",
       "fantaxy/love-novel": "Text",
-      "VIDraft/mouse-webgen": " Productivity",
+      "VIDraft/mouse-webgen": "Productivity",
       "immunobiotech/MUSIC-Jukebox": "Audio",
-      "seawolf2357/Flowise-AI": " Productivity",
+      "seawolf2357/Flowise-AI": "Productivity",
       "ginigen/Flux-LayerDiffuse": "Image Gen",
       "VIDraft/Portrait-Animation": "Video",
       "VIDraft/Deepseek-Multimodal": "Vision",
@@ -274,7 +266,7 @@
       "openfree/image-to-vector": "Image Edit",
       "ginipick/QR-Canvas-plus": "Productivity",
       "ginigen/text3d-R1": "Image Gen",
-      "openfree/MagicFace-V3": "Image Edit",  //중복
+      "openfree/MagicFace-V3": "Image Edit",
       "ginipick/DeepSeekR1-LIVE": "Text",
       "ginigen/ColPali-multi": "Text",
       "ginigen/Janus-Pro-7B": "Vision",
@@ -335,7 +327,7 @@
       "ginipick/FLUXllama": "Image Gen",
       "fantaxy/Sound-AI-SFX": "Audio",
       "fantos/flx8lora": "Image Gen",
-      "openfree/trending-board": " Utility",
+      "openfree/trending-board": "Utility",
       "ginipick/Realtime-FLUX": "Image Gen",
       "aiqtech/kofaceid": "Image Gen",
       "fantaxy/fastvideogena": "Video",
@@ -345,19 +337,14 @@
       "aiqtech/cinevid": "Video",
       "aiqtech/FLUX-Ghibli-Studio-LoRA": "Image Gen",
       "aiqtech/flxgif": "Image Gen",
-      "aiqtech/imaginpaint": "Image Edit"
-
-        
-      // NEW와 BEST 카테고리 추가 예시 (기본 카테고리와 중복되어도 됩니다)
-      // 예를 들어, "fantos/Panorama"를 NEW 카테고리에도 포함하고,
-      // "ginigen/Multi-LoRAgen"을 BEST 카테고리에도 포함하도록 추가합니다.
+      "aiqtech/imaginpaint": "Image Edit",
 
-        
-      "fantos/Panorama_NEW": "NEW",   // 이 키는 별도의 예시용 키입니다.
+      // 예시로 NEW/BEST 항목 따로 지정 (키 뒤에 _NEW, _BEST 붙임)
+      "fantos/Panorama_NEW": "NEW",
       "ginigen/Multi-LoRAgen_BEST": "BEST"
     };
 
-    // 2. URL 변환 함수: "https://huggingface.co/spaces/{namespace}/{project}" → "https://{namespace}-{project}.hf.space"
+    // 3. URL 변환 함수: "https://huggingface.co/spaces/{namespace}/{project}" → "https://{namespace}-{project}.hf.space"
     function transformUrl(url) {
       const prefix = "https://huggingface.co/spaces/";
       if (url.startsWith(prefix)) {
@@ -367,10 +354,15 @@
       return url;
     }
 
-    // 4. 각 항목의 카테고리를 customCategories에서 지정된 값이 있으면 사용하고, 없으면 기본값 "Image Gen" 사용
+    // 4. 프로젝트 객체 생성
+    // projectList의 모든 key에 대해 customCategories에서 카테고리를 읽고, 없으면 기본 "Image Gen"
     const keys = Object.keys(projectList);
-    const projects = keys.map((key) => {
+    const projects = keys.map(key => {
+      const url = projectList[key];
+      // primaryCategory가 없으면 "Image Gen"
       let primaryCategory = customCategories[key] || "Image Gen";
+
+      // 중복 카테고리 가능 (NEW, BEST)
       let categories = [primaryCategory];
       if (key.endsWith("_NEW")) {
         categories.push("NEW");
@@ -378,18 +370,21 @@
       if (key.endsWith("_BEST")) {
         categories.push("BEST");
       }
+
+      // 실제 프로젝트명: "/" 뒤의 부분
       let projectName = key;
       if (!key.endsWith("_NEW") && !key.endsWith("_BEST")) {
         projectName = key.split("/").slice(1).join("/");
       }
+
       return {
         name: primaryCategory + "/" + projectName,
-        url: transformUrl(projectList[key]),
+        url: transformUrl(url),
         categories: categories
       };
     });
 
-    // 5. 카테고리별 그룹화 (필터링용)
+    // 5. 카테고리별 그룹화
     const grouped = {};
     projects.forEach(project => {
       project.categories.forEach(cat => {
@@ -400,14 +395,18 @@
       });
     });
 
-    // 6. 필터 버튼 생성 (미리 정의한 10가지 그룹 및 All)
+    // 6. 필터 버튼 생성 (10가지 + All)
     const fixedGroups = ["NEW", "BEST", "Text", "Image Gen", "Image Edit", "Audio", "Video", "Productivity", "Utility", "Vision"];
     const filterGroupDiv = document.getElementById("filter-group");
+
+    // All 버튼
     const allButton = document.createElement("button");
     allButton.className = "toggle-button active";
     allButton.setAttribute("data-filter", "all");
     allButton.textContent = "All";
     filterGroupDiv.appendChild(allButton);
+
+    // 나머지 10개 카테고리 버튼
     fixedGroups.forEach(category => {
       const btn = document.createElement("button");
       btn.className = "toggle-button";
@@ -416,21 +415,26 @@
       filterGroupDiv.appendChild(btn);
     });
 
-    // 7. 사이드바 업데이트 함수: 선택한 필터의 항목 출력 (해당 항목의 categories 배열에 선택한 필터가 포함되어 있으면 표시)
+    // 7. 사이드바 갱신 함수
     function updateSidebar(filter) {
       const sidebar = document.getElementById("sidebar");
       sidebar.innerHTML = "";
-      let items = (filter === "all") ? projects : projects.filter(project => project.categories.includes(filter));
+      let items = (filter === "all")
+        ? projects
+        : projects.filter(project => project.categories.includes(filter));
+
       const ul = document.createElement("ul");
       items.forEach(item => {
         const li = document.createElement("li");
         li.textContent = item.name;
-        li.addEventListener("click", function() {
+        li.addEventListener("click", () => {
           document.getElementById("embed-frame").setAttribute("src", item.url);
         });
         ul.appendChild(li);
       });
       sidebar.appendChild(ul);
+
+      // 첫 번째 항목 자동 표시
       if (items.length > 0) {
         document.getElementById("embed-frame").setAttribute("src", items[0].url);
       } else {
@@ -438,7 +442,7 @@
       }
     }
 
-    // 8. 필터 버튼 클릭 이벤트 처리
+    // 8. 버튼 클릭 시 필터 적용
     document.querySelectorAll(".toggle-button").forEach(button => {
       button.addEventListener("click", function() {
         document.querySelectorAll(".toggle-button").forEach(btn => btn.classList.remove("active"));
@@ -447,8 +451,8 @@
       });
     });
 
-    // 9. 페이지 로드 시 기본 "all" 필터 적용
+    // 9. 초기 로딩: All 필터 적용
     updateSidebar("all");
   </script>
 </body>
-</html>
+</html>