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>
@@ -344,7 +346,7 @@
       "ginigen/Multi-LoRAgen_BEST": "BEST"
     };
 
-    // 3. URL 변환 함수: "https://huggingface.co/spaces/{namespace}/{project}" → "https://{namespace}-{project}.hf.space"
+    // 3. URL 변환
     function transformUrl(url) {
       const prefix = "https://huggingface.co/spaces/";
       if (url.startsWith(prefix)) {
@@ -354,15 +356,13 @@
       return url;
     }
 
-    // 4. 프로젝트 객체 생성
-    // projectList의 모든 key에 대해 customCategories에서 카테고리를 읽고, 없으면 기본 "Image Gen"
+    // 4. 프로젝트 배열 생성
     const keys = Object.keys(projectList);
     const projects = keys.map(key => {
+      const primaryCategory = customCategories[key] || "Image Gen";
       const url = projectList[key];
-      // primaryCategory가 없으면 "Image Gen"
-      let primaryCategory = customCategories[key] || "Image Gen";
 
-      // 중복 카테고리 가능 (NEW, BEST)
+      // categories 배열
       let categories = [primaryCategory];
       if (key.endsWith("_NEW")) {
         categories.push("NEW");
@@ -371,7 +371,6 @@
         categories.push("BEST");
       }
 
-      // 실제 프로젝트명: "/" 뒤의 부분
       let projectName = key;
       if (!key.endsWith("_NEW") && !key.endsWith("_BEST")) {
         projectName = key.split("/").slice(1).join("/");
@@ -380,33 +379,29 @@
       return {
         name: primaryCategory + "/" + projectName,
         url: transformUrl(url),
-        categories: categories
+        categories
       };
     });
 
     // 5. 카테고리별 그룹화
     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)
+    // 6. 필터 버튼 (ALL + 10개)
     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";
@@ -421,38 +416,38 @@
       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. 버튼 클릭 시 필터 적용
+    // 8. 버튼 클릭 이벤트
     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 필터 적용
+    // 9. 페이지 로드 시 All 필터
     updateSidebar("all");
   </script>
 </body>
-</html>
+</html>