Update index.html
Browse files- index.html +42 -13
index.html
CHANGED
@@ -108,6 +108,7 @@
|
|
108 |
</div>
|
109 |
</div>
|
110 |
|
|
|
111 |
<script>
|
112 |
// 1. 제공된 전체 프로젝트 리스트 (키: 프로젝트 이름, 값: URL)
|
113 |
const projectList = {
|
@@ -358,6 +359,15 @@
|
|
358 |
"aiqtech/FLUX-Ghibli-Studio-LoRA": "Image Gen",
|
359 |
"aiqtech/flxgif": "Image Gen",
|
360 |
"aiqtech/imaginpaint": "Image Edit"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
361 |
};
|
362 |
|
363 |
// 2. URL 변환 함수: "https://huggingface.co/spaces/{namespace}/{project}" → "https://{namespace}-{project}.hf.space"
|
@@ -371,25 +381,44 @@
|
|
371 |
}
|
372 |
|
373 |
// 4. 각 항목의 카테고리를 customCategories에서 지정된 값이 있으면 사용하고, 없으면 기본값 "Image Gen" 사용
|
|
|
374 |
const keys = Object.keys(projectList);
|
375 |
const projects = keys.map((key) => {
|
376 |
-
|
377 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
378 |
return {
|
379 |
-
name:
|
380 |
url: transformUrl(projectList[key]),
|
381 |
-
|
382 |
};
|
383 |
});
|
384 |
|
385 |
-
// 5. 카테고리별 그룹화
|
386 |
const grouped = {};
|
387 |
projects.forEach(project => {
|
388 |
-
|
389 |
-
|
390 |
-
|
391 |
-
|
392 |
-
|
|
|
393 |
});
|
394 |
|
395 |
// 6. 필터 버튼은 미리 정의한 10가지 그룹(NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision)과 All 버튼으로 생성
|
@@ -408,11 +437,11 @@
|
|
408 |
filterGroupDiv.appendChild(btn);
|
409 |
});
|
410 |
|
411 |
-
// 7. 사이드바 업데이트 함수: 선택한 필터의
|
412 |
function updateSidebar(filter) {
|
413 |
const sidebar = document.getElementById("sidebar");
|
414 |
sidebar.innerHTML = "";
|
415 |
-
let items = (filter === "all") ? projects : projects.filter(project => project.
|
416 |
const ul = document.createElement("ul");
|
417 |
items.forEach(item => {
|
418 |
const li = document.createElement("li");
|
@@ -443,4 +472,4 @@
|
|
443 |
updateSidebar("all");
|
444 |
</script>
|
445 |
</body>
|
446 |
-
</html>
|
|
|
108 |
</div>
|
109 |
</div>
|
110 |
|
111 |
+
|
112 |
<script>
|
113 |
// 1. 제공된 전체 프로젝트 리스트 (키: 프로젝트 이름, 값: URL)
|
114 |
const projectList = {
|
|
|
359 |
"aiqtech/FLUX-Ghibli-Studio-LoRA": "Image Gen",
|
360 |
"aiqtech/flxgif": "Image Gen",
|
361 |
"aiqtech/imaginpaint": "Image Edit"
|
362 |
+
|
363 |
+
|
364 |
+
// NEW와 BEST 카테고리 추가 예시 (기본 카테고리와 중복되어도 됩니다)
|
365 |
+
// 예를 들어, "fantos/Panorama"를 NEW 카테고리에도 포함하고,
|
366 |
+
// "ginigen/Multi-LoRAgen"을 BEST 카테고리에도 포함하도록 추가합니다.
|
367 |
+
|
368 |
+
|
369 |
+
"fantos/Panorama_NEW": "NEW", // 이 키는 별도의 예시용 키입니다.
|
370 |
+
"ginigen/Multi-LoRAgen_BEST": "BEST"
|
371 |
};
|
372 |
|
373 |
// 2. URL 변환 함수: "https://huggingface.co/spaces/{namespace}/{project}" → "https://{namespace}-{project}.hf.space"
|
|
|
381 |
}
|
382 |
|
383 |
// 4. 각 항목의 카테고리를 customCategories에서 지정된 값이 있으면 사용하고, 없으면 기본값 "Image Gen" 사용
|
384 |
+
// 프로젝트 이름은 "기본카테고리/프로젝트명" 형태로 표시합니다.
|
385 |
const keys = Object.keys(projectList);
|
386 |
const projects = keys.map((key) => {
|
387 |
+
// 기본 카테고리 (customCategories에 지정된 값이 있으면 사용, 없으면 "Image Gen")
|
388 |
+
let primaryCategory = customCategories[key] || "Image Gen";
|
389 |
+
|
390 |
+
// NEW와 BEST 카테고리는 별도로 추가할 수 있도록 합니다.
|
391 |
+
// 예시: 만약 원래 key와 별도로 "_NEW"나 "_BEST"가 붙은 키가 있다면 이를 NEW 또는 BEST로 처리합니다.
|
392 |
+
let categories = [primaryCategory];
|
393 |
+
if (key.endsWith("_NEW")) {
|
394 |
+
categories.push("NEW");
|
395 |
+
}
|
396 |
+
if (key.endsWith("_BEST")) {
|
397 |
+
categories.push("BEST");
|
398 |
+
}
|
399 |
+
|
400 |
+
// 원래 프로젝트명은 key에서 "/" 이후 부분을 사용 (단, NEW/BEST 예시는 그대로 사용)
|
401 |
+
let projectName = key;
|
402 |
+
if (!key.endsWith("_NEW") && !key.endsWith("_BEST")) {
|
403 |
+
projectName = key.split("/").slice(1).join("/");
|
404 |
+
}
|
405 |
+
|
406 |
return {
|
407 |
+
name: primaryCategory + "/" + projectName,
|
408 |
url: transformUrl(projectList[key]),
|
409 |
+
categories: categories
|
410 |
};
|
411 |
});
|
412 |
|
413 |
+
// 5. 카테고리별 그룹화 (필터링용)
|
414 |
const grouped = {};
|
415 |
projects.forEach(project => {
|
416 |
+
project.categories.forEach(cat => {
|
417 |
+
if (!grouped[cat]) {
|
418 |
+
grouped[cat] = [];
|
419 |
+
}
|
420 |
+
grouped[cat].push(project);
|
421 |
+
});
|
422 |
});
|
423 |
|
424 |
// 6. 필터 버튼은 미리 정의한 10가지 그룹(NEW, BEST, Text, Image Gen, Image Edit, Audio, Video, Productivity, Utility, Vision)과 All 버튼으로 생성
|
|
|
437 |
filterGroupDiv.appendChild(btn);
|
438 |
});
|
439 |
|
440 |
+
// 7. 사이드바 업데이트 함수: 선택한 필터의 항목을 출력 (해당 항목의 categories 배열에 선택한 필터가 포함되어 있으면 표시)
|
441 |
function updateSidebar(filter) {
|
442 |
const sidebar = document.getElementById("sidebar");
|
443 |
sidebar.innerHTML = "";
|
444 |
+
let items = (filter === "all") ? projects : projects.filter(project => project.categories.includes(filter));
|
445 |
const ul = document.createElement("ul");
|
446 |
items.forEach(item => {
|
447 |
const li = document.createElement("li");
|
|
|
472 |
updateSidebar("all");
|
473 |
</script>
|
474 |
</body>
|
475 |
+
</html>
|