Update index.html

index.html

@@ -92,7 +92,7 @@
     <a href="https://discord.gg/openfreeai" target="_blank">Community</a>
   </div>
 
-  <!-- 필터 버튼 영역 (카테고리별) -->
+  <!-- 필터 버튼 영역 (미리 정의한 10가지 그룹 사용) -->
   <div class="filter-group" id="filter-group">
     <!-- JavaScript로 동적으로 버튼 생성 -->
   </div>
@@ -109,10 +109,8 @@
   </div>
 
   <script>
-    // 1. 제공해주신 전체 프로젝트 리스트 (키: 프로젝트 이름, 값: URL)
+    // 1. 제공된 전체 프로젝트 리스트 (키: 프로젝트 이름, 값: URL)
     const projectList = {
-
-
       "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",
@@ -231,30 +229,30 @@
       "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"
-
     };
 
     // 2. 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)) {
-        const rest = url.substring(prefix.length); // 예: "fantos/VoiceClone"
-        // 단, key에 있는 "/"는 하이픈(-)으로 변경
+        const rest = url.substring(prefix.length);
         return "https://" + rest.replace("/", "-") + ".hf.space";
       }
       return url;
     }
 
-    // 3. 프로젝트 리스트 배열로 변환: 각 항목 { name, url, category }
-    const projects = Object.keys(projectList).map(key => {
+    // 3. 모든 항목의 카테고리를 강제로 "Image Gen"으로 지정하고, 이름을 "Image Gen/프로젝트명" 형태로 변경
+    const keys = Object.keys(projectList);
+    const projects = keys.map((key) => {
+      const projectName = key.split("/").slice(1).join("/");
       return {
-        name: key, // 예: "ginigen/Multi-LoRAgen"
+        name: "Image Gen/" + projectName,
         url: transformUrl(projectList[key]),
-        category: key.split("/")[0] // 카테고리는 "/" 앞부분, 예: "ginigen"
+        category: "Image Gen"
       };
     });
 
-    // 4. 카테고리별 그룹화 (예: { ginigen: [...], ginipick: [...], fantos: [...], fantaxy: [...], ... })
+    // 4. (현재 모든 항목이 "Image Gen"이지만) 카테고리별 그룹화
     const grouped = {};
     projects.forEach(project => {
       const cat = project.category;
@@ -264,16 +262,15 @@
       grouped[cat].push(project);
     });
 
-    // 5. 필터 버튼(카테고리) 동적 생성 (기본 "All" 포함)
+    // 5. 필터 버튼은 미리 정의한 10가지 그룹으로 생성 (NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision)
+    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);
-    // 그룹화된 각 카테고리별 버튼 생성 (정렬하여 표시)
-    Object.keys(grouped).sort().forEach(category => {
+    fixedGroups.forEach(category => {
       const btn = document.createElement("button");
       btn.className = "toggle-button";
       btn.setAttribute("data-filter", category);
@@ -281,16 +278,11 @@
       filterGroupDiv.appendChild(btn);
     });
 
-    // 6. 사이드바 업데이트 함수: 선택한 필터의 모든 항목 출력
+    // 6. 사이드바 업데이트 함수: 선택한 필터의 항목 출력
     function updateSidebar(filter) {
       const sidebar = document.getElementById("sidebar");
-      sidebar.innerHTML = ""; // 기존 항목 초기화
-      let items = [];
-      if (filter === "all") {
-        items = projects;
-      } else {
-        items = grouped[filter] || [];
-      }
+      sidebar.innerHTML = "";
+      let items = (filter === "all") ? projects : projects.filter(project => project.category === filter);
       const ul = document.createElement("ul");
       items.forEach(item => {
         const li = document.createElement("li");
@@ -301,7 +293,6 @@
         ul.appendChild(li);
       });
       sidebar.appendChild(ul);
-      // 기본으로 첫 번째 항목 로드 (있으면)
       if (items.length > 0) {
         document.getElementById("embed-frame").setAttribute("src", items[0].url);
       } else {
@@ -314,8 +305,7 @@
       button.addEventListener("click", function() {
         document.querySelectorAll(".toggle-button").forEach(btn => btn.classList.remove("active"));
         this.classList.add("active");
-        const filter = this.getAttribute("data-filter");
-        updateSidebar(filter);
+        updateSidebar(this.getAttribute("data-filter"));
       });
     });