Update index.html

index.html

@@ -118,13 +118,12 @@
   <script>
     // 1. 프로젝트 URL 목록: 프로젝트 이름 -> URL
     const projectList = {
-      
+      "ginigen/Workflow-Canvas": "https://huggingface.co/spaces/ginigen/Workflow-Canvas",  
       "ginigen/Design": "https://huggingface.co/spaces/ginigen/Design",
       "ginigen/Diagram": "https://huggingface.co/spaces/ginigen/Diagram",
       "ginigen/Mockup": "https://huggingface.co/spaces/ginigen/Mockup",
       "ginigen/Infographic": "https://huggingface.co/spaces/ginigen/Infographic",
       "ginigen/Flowchart": "https://huggingface.co/spaces/ginigen/Flowchart",
-
       "aiqcamp/FLUX-Vision": "https://huggingface.co/spaces/aiqcamp/FLUX-Vision",    
       "ginigen/VoiceClone-TTS": "https://huggingface.co/spaces/ginigen/VoiceClone-TTS",  
       "fantos/Panorama": "https://huggingface.co/spaces/fantos/Panorama",
@@ -241,9 +240,9 @@
       "aiqtech/flxgif": "https://huggingface.co/spaces/aiqtech/flxgif",
       "aiqtech/imaginpaint": "https://huggingface.co/spaces/aiqtech/imaginpaint"
     };
-
     // 2. 별도 객체: 프로젝트의 개별 카테고리 지정 (없으면 기본값 "Image Gen" 사용)
     const customCategories = {
+      "ginigen/Workflow-Canvas": "Productivity",      
       "ginigen/Design": "Productivity",    
       "ginigen/Diagram": "Productivity",    
       "ginigen/Mockup": "Productivity",    
@@ -368,9 +367,7 @@
       "aiqtech/flxgif": "Image Gen",
       "aiqtech/imaginpaint": "Image Edit"
       
-
     };
-
 const newProjects = [
   "ginigen/Design",    
   "ginigen/Diagram",    
@@ -441,8 +438,8 @@ const newProjects = [
   "ginigen/cartoon",
   "ginigen/Book-Cover"
 ];
-
 const bestProjects = [
+  "ginigen/Workflow-Canvas",      
   "ginigen/VoiceClone-TTS",        
   "openfree/VisionOCR-Chat",
   "ginigen/3D-LLAMA",
@@ -477,8 +474,6 @@ const bestProjects = [
   "ginigen/FLUXllama-Multilingual",
   "ginipick/FitGen"
 ];
-
-
     // 4. URL 변환 함수
     function transformUrl(url) {
       const prefix = "https://huggingface.co/spaces/";
@@ -488,7 +483,6 @@ const bestProjects = [
       }
       return url;
     }
-
     // 5. 프로젝트 배열 생성
     const keys = Object.keys(projectList);
     const projects = keys.map(key => {
@@ -497,14 +491,12 @@ const bestProjects = [
       
       if (newProjects.includes(key)) categories.push("NEW");
       if (bestProjects.includes(key)) categories.push("BEST");
-
       return {
         name: primaryCategory + "/" + key.split("/")[1],
         url: transformUrl(projectList[key]),
         categories: categories
       };
     });
-
     // 6. 카테고리별 그룹화
     const grouped = {};
     projects.forEach(proj => {
@@ -513,17 +505,14 @@ const bestProjects = [
         grouped[cat].push(proj);
       });
     });
-
     // 7. 필터 버튼 생성
     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");
     allButton.className = "toggle-button active";
     allButton.setAttribute("data-filter", "all");
     allButton.textContent = "All";
     filterGroupDiv.appendChild(allButton);
-
     fixedGroups.forEach(category => {
       const btn = document.createElement("button");
       btn.className = "toggle-button";
@@ -531,7 +520,6 @@ const bestProjects = [
       btn.textContent = category;
       filterGroupDiv.appendChild(btn);
     });
-
     // 8. 사이드바 갱신 함수
     function updateSidebar(filter) {
       const sidebar = document.getElementById("sidebar");
@@ -539,16 +527,13 @@ const bestProjects = [
       let items = (filter === "all")
         ? projects
         : projects.filter(p => p.categories.includes(filter));
-
       const ul = document.createElement("ul");
       items.forEach(item => {
         const li = document.createElement("li");
-
         // 이름 표시
         const nameSpan = document.createElement("span");
         nameSpan.textContent = item.name;
         li.appendChild(nameSpan);
-
         // "링크 클릭" 버튼
         const linkButton = document.createElement("button");
         linkButton.textContent = "링크 클릭";
@@ -557,23 +542,19 @@ const bestProjects = [
           window.open(item.url, "_blank"); // 새 탭(창) 열기
         });
         li.appendChild(linkButton);
-
         // li 자체 클릭하면 iframe 변경
         li.addEventListener("click", () => {
           document.getElementById("embed-frame").src = item.url;
         });
-
         ul.appendChild(li);
       });
       sidebar.appendChild(ul);
-
       if (items.length > 0) {
         document.getElementById("embed-frame").src = items[0].url;
       } else {
         document.getElementById("embed-frame").src = "";
       }
     }
-
     // 9. 버튼 클릭 이벤트
     document.querySelectorAll(".toggle-button").forEach(button => {
       button.addEventListener("click", function() {
@@ -582,7 +563,6 @@ const bestProjects = [
         updateSidebar(this.getAttribute("data-filter"));
       });
     });
-
     // 10. 페이지 로드 시 All 필터
     updateSidebar("all");
   </script>