Update index.html

index.html

@@ -48,7 +48,7 @@
     }
     .main-container {
       display: flex;
-      height: calc(100vh - 100px);
+      height: calc(100vh - 100px); /* 상단 영역 제외 전체 높이 */
     }
     #sidebar {
       width: 25%;
@@ -91,8 +91,10 @@
     <a href="https://discord.gg/openfreeai" target="_blank">Community</a>
   </div>
 
-  <!-- 필터 버튼 영역 (미리 정의한 10가지 그룹: NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision) -->
-  <div class="filter-group" id="filter-group"></div>
+  <!-- 필터 버튼 영역 -->
+  <div class="filter-group" id="filter-group">
+    <!-- JavaScript로 동적으로 버튼 생성 -->
+  </div>
 
   <div class="main-container">
     <div id="sidebar"></div>
@@ -338,13 +340,36 @@
       "aiqtech/FLUX-Ghibli-Studio-LoRA": "Image Gen",
       "aiqtech/flxgif": "Image Gen",
       "aiqtech/imaginpaint": "Image Edit",
-
-      // 예시로 NEW/BEST 항목 따로 지정 (키 뒤에 _NEW, _BEST 붙임)
-      "fantos/Panorama_NEW": "NEW",
-      "ginigen/Multi-LoRAgen_BEST": "BEST"
     };
 
-    // 3. URL 변환 함수: "https://huggingface.co/spaces/{namespace}/{project}" → "https://{namespace}-{project}.hf.space"
+const newProjects = [
+    "fantos/Panorama",
+    "ginigen/Multi-LoRAgen",
+    "ginipick/Fashion-Stylegen",
+    "ginipick/Time-Stream",
+    "ginipick/AccuVision-Diffusion",
+    "fantos/Magic-Drawings",
+    "ginigen/Lumina-Image-PLUS",
+    "fantaxy/fantasy-novel",
+    "VIDraft/mouse-webgen",
+    "immunobiotech/MUSIC-Jukebox"
+];
+
+const bestProjects = [
+    "ginigen/canvas-studio",
+    "ginipick/Time-Stream",
+    "ginipick/AccuVision-Diffusion",
+    "fantos/Magic-Drawings",
+    "ginigen/Lumina-Image-PLUS",
+    "fantaxy/fantasy-novel",
+    "VIDraft/mouse-webgen",
+    "immunobiotech/MUSIC-Jukebox",
+    "seawolf2357/Flowise-AI",
+    "ginigen/Flux-LayerDiffuse"
+];
+
+
+    // 4. URL 변환 함수
     function transformUrl(url) {
       const prefix = "https://huggingface.co/spaces/";
       if (url.startsWith(prefix)) {
@@ -354,59 +379,41 @@
       return url;
     }
 
-    // 4. 프로젝트 객체 생성
-    // projectList의 모든 key에 대해 customCategories에서 카테고리를 읽고, 없으면 기본 "Image Gen"
+    // 5. 프로젝트 배열 생성
     const keys = Object.keys(projectList);
     const projects = keys.map(key => {
-      const url = projectList[key];
-      // primaryCategory가 없으면 "Image Gen"
-      let primaryCategory = customCategories[key] || "Image Gen";
-
-      // 중복 카테고리 가능 (NEW, BEST)
+      const primaryCategory = customCategories[key] || "Image Gen";
       let categories = [primaryCategory];
-      if (key.endsWith("_NEW")) {
-        categories.push("NEW");
-      }
-      if (key.endsWith("_BEST")) {
-        categories.push("BEST");
-      }
-
-      // 실제 프로젝트명: "/" 뒤의 부분
-      let projectName = key;
-      if (!key.endsWith("_NEW") && !key.endsWith("_BEST")) {
-        projectName = key.split("/").slice(1).join("/");
-      }
+      
+      if (newProjects.includes(key)) categories.push("NEW");
+      if (bestProjects.includes(key)) categories.push("BEST");
 
       return {
-        name: primaryCategory + "/" + projectName,
-        url: transformUrl(url),
+        name: primaryCategory + "/" + key.split("/")[1],
+        url: transformUrl(projectList[key]),
         categories: categories
       };
     });
 
-    // 5. 카테고리별 그룹화
+    // 6. 카테고리별 그룹화
     const grouped = {};
-    projects.forEach(project => {
-      project.categories.forEach(cat => {
-        if (!grouped[cat]) {
-          grouped[cat] = [];
-        }
-        grouped[cat].push(project);
+    projects.forEach(proj => {
+      proj.categories.forEach(cat => {
+        if (!grouped[cat]) grouped[cat] = [];
+        grouped[cat].push(proj);
       });
     });
 
-    // 6. 필터 버튼 생성 (10가지 + All)
+    // 7. 필터 버튼 생성
     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";
@@ -415,44 +422,43 @@
       filterGroupDiv.appendChild(btn);
     });
 
-    // 7. 사이드바 갱신 함수
+    // 8. 사이드바 갱신 함수
     function updateSidebar(filter) {
       const sidebar = document.getElementById("sidebar");
       sidebar.innerHTML = "";
       let items = (filter === "all")
         ? projects
-        : projects.filter(project => project.categories.includes(filter));
+        : projects.filter(p => p.categories.includes(filter));
 
       const ul = document.createElement("ul");
       items.forEach(item => {
         const li = document.createElement("li");
         li.textContent = item.name;
         li.addEventListener("click", () => {
-          document.getElementById("embed-frame").setAttribute("src", item.url);
+          document.getElementById("embed-frame").src = item.url;
         });
         ul.appendChild(li);
       });
       sidebar.appendChild(ul);
 
-      // 첫 번째 항목 자동 표시
       if (items.length > 0) {
-        document.getElementById("embed-frame").setAttribute("src", items[0].url);
+        document.getElementById("embed-frame").src = items[0].url;
       } else {
-        document.getElementById("embed-frame").setAttribute("src", "");
+        document.getElementById("embed-frame").src = "";
       }
     }
 
-    // 8. 버튼 클릭 시 필터 적용
+    // 9. 버튼 클릭 이벤트
     document.querySelectorAll(".toggle-button").forEach(button => {
       button.addEventListener("click", function() {
-        document.querySelectorAll(".toggle-button").forEach(btn => btn.classList.remove("active"));
+        document.querySelectorAll(".toggle-button").forEach(b => b.classList.remove("active"));
         this.classList.add("active");
         updateSidebar(this.getAttribute("data-filter"));
       });
     });
 
-    // 9. 초기 로딩: All 필터 적용
+    // 10. 페이지 로드 시 All 필터
     updateSidebar("all");
   </script>
 </body>
-</html>
+</html>