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;
@@ -92,28 +91,20 @@
     <a href="https://discord.gg/openfreeai" target="_blank">Community</a>
   </div>
 
-  <!-- 필터 버튼 영역 (카테고리별) -->
-  <div class="filter-group" id="filter-group">
-    <!-- JavaScript로 동적으로 버튼 생성 -->
-  </div>
+  <!-- 필터 버튼 영역 (미리 정의한 10가지 그룹: NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision) -->
+  <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",
@@ -158,7 +149,6 @@
       "ginigen/text3d-R1": "https://huggingface.co/spaces/ginigen/text3d-R1",
       "openfree/MagicFace-V3": "https://huggingface.co/spaces/openfree/MagicFace-V3",
       "ginipick/DeepSeekR1-LIVE": "https://huggingface.co/spaces/ginipick/DeepSeekR1-LIVE",
-      "ginipick/like-history": "https://huggingface.co/spaces/ginipick/like-history",
       "ginigen/ColPali-multi": "https://huggingface.co/spaces/ginigen/ColPali-multi",
       "ginigen/Janus-Pro-7B": "https://huggingface.co/spaces/ginigen/Janus-Pro-7B",
       "ginigen/Animagine": "https://huggingface.co/spaces/ginigen/Animagine",
@@ -219,9 +209,7 @@
       "fantaxy/Sound-AI-SFX": "https://huggingface.co/spaces/fantaxy/Sound-AI-SFX",
       "fantos/flx8lora": "https://huggingface.co/spaces/fantos/flx8lora",
       "openfree/trending-board": "https://huggingface.co/spaces/openfree/trending-board",
-      "aiqtech/Particle-Accelerator-Simulation": "https://huggingface.co/spaces/aiqtech/Particle-Accelerator-Simulation",
       "ginipick/Realtime-FLUX": "https://huggingface.co/spaces/ginipick/Realtime-FLUX",
-      "VIDraft/prime-number": "https://huggingface.co/spaces/VIDraft/prime-number",
       "aiqtech/kofaceid": "https://huggingface.co/spaces/aiqtech/kofaceid",
       "fantaxy/fastvideogena": "https://huggingface.co/spaces/fantaxy/fastvideogen",
       "fantos/cogvidx": "https://huggingface.co/spaces/fantos/cogvidx",
@@ -231,49 +219,195 @@
       "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. 별도 객체: 프로젝트의 개별 카테고리 지정 (없으면 기본값 "Image Gen" 사용)
+    const customCategories = {
+      "fantos/Panorama": "Image Gen",
+      "ginigen/Multi-LoRAgen": "Image Gen",
+      "ginigen/canvas-studio": "Image Edit",
+      "ginipick/Fashion-Stylegen": "Productivity",
+      "ginipick/Time-Stream": "Video",
+      "ginipick/AccuVision-Diffusion": "Image Gen",
+      "fantos/Magic-Drawings": "Image Edit",
+      "ginigen/Lumina-Image-PLUS": "Image Gen",
+      "fantaxy/fantasy-novel": "Text",
+      "fantaxy/eros": "Text",
+      "fantaxy/adult-novel": "Text",
+      "fantaxy/kungfu-novel": "Text",
+      "fantaxy/love-novel": "Text",
+      "VIDraft/mouse-webgen": "Productivity",
+      "immunobiotech/MUSIC-Jukebox": "Audio",
+      "seawolf2357/Flowise-AI": "Productivity",
+      "ginigen/Flux-LayerDiffuse": "Image Gen",
+      "VIDraft/Portrait-Animation": "Video",
+      "VIDraft/Deepseek-Multimodal": "Vision",
+      "VIDraft/BLIP2": "Image Gen",
+      "ginigen/text3d-r1": "Image Gen",
+      "immunobiotech/drug-discovery": "Productivity",
+      "openfree/VisionOCR-Chat": "Vision",
+      "immunobiotech/MICHELIN": "Productivity",
+      "immunobiotech/MICHELIN-korea": "Productivity",
+      "immunobiotech/MICHELIN-japan": "Productivity",
+      "immunobiotech/MICHELIN-china": "Productivity",
+      "VIDraft/money-radar-korea": "Productivity",
+      "VIDraft/money-radar": "Productivity",
+      "ginipick/PharmAI-Korea": "Productivity",
+      "ginigen/MagicFace-V3": "Image Gen",
+      "aiqcamp/MindMap": "Image Gen",
+      "ginigen/3D-LLAMA": "Productivity",
+      "openfree/VectorFlow": "Image Edit",
+      "openfree/webtoon-gen": "Image Gen",
+      "VIDraft/topic-prediction": "Text",
+      "VIDraft/PapersImpact": "Productivity",
+      "VIDraft/EveryRAG": "Text",
+      "VIDraft/korea-president-DJ": "Image Gen",
+      "VIDraft/korea-president-PARK": "Image Gen",
+      "openfree/image-to-vector": "Image Edit",
+      "ginipick/QR-Canvas-plus": "Productivity",
+      "ginigen/text3d-R1": "Image Gen",
+      "openfree/MagicFace-V3": "Image Edit",
+      "ginipick/DeepSeekR1-LIVE": "Text",
+      "ginigen/ColPali-multi": "Text",
+      "ginigen/Janus-Pro-7B": "Vision",
+      "ginigen/Animagine": "Image Gen",
+      "openfree/PDF-RAG": "Productivity",
+      "fantos/Ranking-Tracker": "Utility",
+      "aiqcamp/Multilingual-Images": "Image Gen",
+      "aiqcamp/Gemini2-Flash-Thinking": "Text",
+      "openfree/pepe": "Image Gen",
+      "openfree/korea-president-yoon": "Image Gen",
+      "openfree/CryptoVision": "Utility",
+      "fantos/VoiceClone": "Audio",
+      "seawolf2357/ocrlatex": "Utility",
+      "seawolf2357/img2vid": "Video",
+      "seawolf2357/sd-prompt-gen": "Text",
+      "openfree/tarotcard": "Utility",
+      "aiqcamp/Polaroid": "Image Gen",
+      "ginigen/cartoon": "Image Gen",
+      "ginigen/Book-Cover": "Image Gen",
+      "aiqcamp/fash": "Productivity",
+      "gunship999/Korea-Daily-News": "Utility",
+      "immunobiotech/ChicagoGallery": "Utility",
+      "immunobiotech/MetropolitanMuseum": "Utility",
+      "immunobiotech/opensky": "Utility",
+      "VIDraft/eum": "Text",
+      "aiqtech/FLUX-military": "Image Gen",
+      "fantaxy/Rolls-Royce": "Image Gen",
+      "seawolf2357/flux-korea-hanbok-lora": "Image Gen",
+      "seawolf2357/flux-korea-palace-lora": "Image Gen",
+      "aiqcamp/flux-cat-lora": "Image Gen",
+      "gunship999/SexyImages": "Image Gen",
+      "aiqtech/flux-claude-monet-lora": "Image Gen",
+      "seawolf2357/3D-Avatar-Generator": "Utility",
+      "fantaxy/playground25": "Image Gen",
+      "openfree/ultpixgen": "Image Gen",
+      "seawolf2357/REALVISXL-V5": "Image Gen",
+      "fantos/flxcontrol": "Image Edit",
+      "fantos/textcutobject": "Image Edit",
+      "ginipick/FLUX-Prompt-Generator": "Text",
+      "fantaxy/flxloraexp": "Image Gen",
+      "fantos/flxloraexp": "Image Gen",
+      "seawolf2357/flxloraexp": "Image Gen",
+      "ginipick/flxloraexp": "Image Gen",
+      "aiqcamp/imagemagic": "Image Edit",
+      "openfree/ColorRevive": "Image Edit",
+      "VIDraft/RAGOndevice": "Productivity",
+      "aiqcamp/AudioLlama": "Audio",
+      "ginigen/FLUXllama-Multilingual": "Image Gen",
+      "ginipick/FitGen": "Image Gen",
+      "fantaxy/FLUX-Animations": "Image Gen",
+      "fantaxy/Remove-Video-Background": "Image Edit",
+      "fantaxy/ofai-flx-logo": "Image Gen",
+      "fantaxy/flx-pulid": "Image Gen",
+      "fantaxy/flx-upscale": "Image Edit",
+      "aiqcamp/Fashion-FLUX": "Image Gen",
+      "fantos/x-mas": "Image Gen",
+      "openfree/Korean-Leaderboard": "Utility",
+      "ginipick/FLUXllama": "Image Gen",
+      "fantaxy/Sound-AI-SFX": "Audio",
+      "fantos/flx8lora": "Image Gen",
+      "openfree/trending-board": "Utility",
+      "ginipick/Realtime-FLUX": "Image Gen",
+      "aiqtech/kofaceid": "Image Gen",
+      "fantaxy/fastvideogena": "Video",
+      "fantos/cogvidx": "Video",
+      "fantos/flxfashmodel": "Image Gen",
+      "fantos/kolcontrl": "Image Edit",
+      "aiqtech/cinevid": "Video",
+      "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"
     };
 
-    // 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)) {
-        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 => {
+    // 4. 프로젝트 객체 생성
+    // projectList의 모든 key에 대해 customCategories에서 카테고리를 읽고, 없으면 기본 "Image Gen"
+    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)
+      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("/");
+      }
+
       return {
-        name: key, // 예: "ginigen/Multi-LoRAgen"
-        url: transformUrl(projectList[key]),
-        category: key.split("/")[0] // 카테고리는 "/" 앞부분, 예: "ginigen"
+        name: primaryCategory + "/" + projectName,
+        url: transformUrl(url),
+        categories: categories
       };
     });
 
-    // 4. 카테고리별 그룹화 (예: { ginigen: [...], ginipick: [...], fantos: [...], fantaxy: [...], ... })
+    // 5. 카테고리별 그룹화
     const grouped = {};
     projects.forEach(project => {
-      const cat = project.category;
-      if (!grouped[cat]) {
-        grouped[cat] = [];
-      }
-      grouped[cat].push(project);
+      project.categories.forEach(cat => {
+        if (!grouped[cat]) {
+          grouped[cat] = [];
+        }
+        grouped[cat].push(project);
+      });
     });
 
-    // 5. 필터 버튼(카테고리) 동적 생성 (기본 "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" 버튼 생성
+
+    // 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 => {
+
+    // 나머지 10개 카테고리 버튼
+    fixedGroups.forEach(category => {
       const btn = document.createElement("button");
       btn.className = "toggle-button";
       btn.setAttribute("data-filter", category);
@@ -281,27 +415,26 @@
       filterGroupDiv.appendChild(btn);
     });
 
-    // 6. 사이드바 업데이트 함수: 선택한 필터의 모든 항목 출력
+    // 7. 사이드바 갱신 함수
     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.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 {
@@ -309,17 +442,16 @@
       }
     }
 
-    // 7. 필터 버튼 클릭 이벤트 처리
+    // 8. 버튼 클릭 시 필터 적용
     document.querySelectorAll(".toggle-button").forEach(button => {
       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"));
       });
     });
 
-    // 8. 페이지 로드 시 기본 "all" 필터 적용
+    // 9. 초기 로딩: All 필터 적용
     updateSidebar("all");
   </script>
 </body>