Update index.html

index.html

@@ -92,7 +92,7 @@
     <a href="https://discord.gg/openfreeai" target="_blank">Community</a>
   </div>
 
-  <!-- 필터 버튼 영역 (미리 정의한 10가지 그룹 사용) -->
+  <!-- 필터 버튼 영역 (미리 정의한 10가지 그룹 사용: NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision) -->
   <div class="filter-group" id="filter-group">
     <!-- JavaScript로 동적으로 버튼 생성 -->
   </div>
@@ -241,18 +241,27 @@
       return url;
     }
 
-    // 3. 모든 항목의 카테고리를 강제로 "Image Gen"으로 지정하고, 이름을 "Image Gen/프로젝트명" 형태로 변경
+    // 3. 사용자 개별 지정용 객체 (원하는 경우 항목별 카테고리를 직접 지정할 수 있습니다)
+    // 키는 원래 프로젝트 키를 사용하고, 값은 원하는 카테고리로 지정하세요.
+    const customCategories = {
+      // 예: "fantos/x-mas": "Image Gen"
+      // 필요에 따라 여기에 항목별로 지정할 수 있습니다.
+    };
+
+    // 4. 각 항목의 카테고리를 customCategories에서 지정된 값이 있으면 사용하고, 없으면 기본값 "Image Gen"을 사용하여
+    //    프로젝트 이름을 "카테고리/프로젝트명" 형태로 변경합니다.
     const keys = Object.keys(projectList);
     const projects = keys.map((key) => {
+      const category = customCategories[key] || "Image Gen";
       const projectName = key.split("/").slice(1).join("/");
       return {
-        name: "Image Gen/" + projectName,
+        name: category + "/" + projectName,
         url: transformUrl(projectList[key]),
-        category: "Image Gen"
+        category: category
       };
     });
 
-    // 4. (현재 모든 항목이 "Image Gen"이지만) 카테고리별 그룹화
+    // 5. (모든 항목은 기본적으로 개별 지정되더라도 필터를 위해) 카테고리별 그룹화
     const grouped = {};
     projects.forEach(project => {
       const cat = project.category;
@@ -262,7 +271,7 @@
       grouped[cat].push(project);
     });
 
-    // 5. 필터 버튼은 미리 정의한 10가지 그룹으로 생성 (NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision)
+    // 6. 필터 버튼은 미리 정의한 10가지 그룹(NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision)과 All 버튼으로 생성
     const fixedGroups = ["NEW", "BEST", "Text", "Image Gen", "Image Edit", "Audio", "Video", "Productivity", "Utility", "Vision"];
     const filterGroupDiv = document.getElementById("filter-group");
     const allButton = document.createElement("button");
@@ -278,7 +287,7 @@
       filterGroupDiv.appendChild(btn);
     });
 
-    // 6. 사이드바 업데이트 함수: 선택한 필터의 항목 출력
+    // 7. 사이드바 업데이트 함수: 선택한 필터의 항목 출력
     function updateSidebar(filter) {
       const sidebar = document.getElementById("sidebar");
       sidebar.innerHTML = "";
@@ -300,7 +309,7 @@
       }
     }
 
-    // 7. 필터 버튼 클릭 이벤트 처리
+    // 8. 필터 버튼 클릭 이벤트 처리
     document.querySelectorAll(".toggle-button").forEach(button => {
       button.addEventListener("click", function() {
         document.querySelectorAll(".toggle-button").forEach(btn => btn.classList.remove("active"));
@@ -309,7 +318,7 @@
       });
     });
 
-    // 8. 페이지 로드 시 기본 "all" 필터 적용
+    // 9. 페이지 로드 시 기본 "all" 필터 적용
     updateSidebar("all");
   </script>
 </body>