|
<!DOCTYPE html> |
|
<html lang="ko"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<title>프로젝트 뷰어 (자동 분류 및 URL 변환)</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
background-color: #f4f4f9; |
|
color: #333; |
|
} |
|
.github-link { |
|
text-align: center; |
|
padding: 8px; |
|
background-color: #24292e; |
|
color: #fff; |
|
font-size: 14px; |
|
} |
|
.github-link a { |
|
color: #fff; |
|
text-decoration: none; |
|
} |
|
.filter-group { |
|
padding: 10px; |
|
background-color: #fff; |
|
border-bottom: 1px solid #eee; |
|
text-align: center; |
|
overflow-x: auto; |
|
white-space: nowrap; |
|
} |
|
.filter-group .toggle-button { |
|
padding: 6px 12px; |
|
margin: 5px; |
|
border: 1px solid #ddd; |
|
border-radius: 15px; |
|
background-color: #fff; |
|
font-size: 13px; |
|
cursor: pointer; |
|
display: inline-block; |
|
} |
|
.filter-group .toggle-button.active { |
|
background-color: #2196f3; |
|
border-color: #2196f3; |
|
color: #fff; |
|
} |
|
.main-container { |
|
display: flex; |
|
height: calc(100vh - 100px); |
|
} |
|
#sidebar { |
|
width: 25%; |
|
border-right: 1px solid #ccc; |
|
overflow-y: auto; |
|
padding: 10px; |
|
} |
|
#sidebar ul { |
|
list-style: none; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
#sidebar li { |
|
margin: 5px 0; |
|
padding: 8px; |
|
background-color: #fff; |
|
border: 1px solid #ddd; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
} |
|
#sidebar li:hover { |
|
background-color: #f0f0f0; |
|
} |
|
|
|
#embed-container { |
|
flex: 1; |
|
padding: 0; |
|
margin: 0; |
|
background-color: #fff; |
|
} |
|
#embed-container iframe { |
|
width: 100%; |
|
height: 100%; |
|
border: none; |
|
display: block; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="github-link"> |
|
<a href="https://discord.gg/openfreeai" target="_blank">Community</a> |
|
</div> |
|
|
|
|
|
<div class="filter-group" id="filter-group"> |
|
|
|
</div> |
|
|
|
<div class="main-container"> |
|
|
|
<div id="sidebar"> |
|
|
|
</div> |
|
|
|
<div id="embed-container"> |
|
<iframe id="embed-frame" src=""></iframe> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const projectList = { |
|
"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", |
|
"ginipick/Time-Stream": "https://huggingface.co/spaces/ginipick/Time-Stream", |
|
"ginipick/AccuVision-Diffusion": "https://huggingface.co/spaces/ginipick/AccuVision-Diffusion", |
|
"fantos/Magic-Drawings": "https://huggingface.co/spaces/fantos/Magic-Drawings", |
|
"ginigen/Lumina-Image-PLUS": "https://huggingface.co/spaces/ginigen/Lumina-Image-PLUS", |
|
"fantaxy/fantasy-novel": "https://huggingface.co/spaces/fantaxy/fantasy-novel", |
|
"fantaxy/eros": "https://huggingface.co/spaces/fantaxy/eros", |
|
"fantaxy/adult-novel": "https://huggingface.co/spaces/fantaxy/adult-novel", |
|
"fantaxy/kungfu-novel": "https://huggingface.co/spaces/fantaxy/kungfu-novel", |
|
"fantaxy/love-novel": "https://huggingface.co/spaces/fantaxy/love-novel", |
|
"VIDraft/mouse-webgen": "https://huggingface.co/spaces/VIDraft/mouse-webgen", |
|
"immunobiotech/MUSIC-Jukebox": "https://huggingface.co/spaces/immunobiotech/MUSIC-Jukebox", |
|
"seawolf2357/Flowise-AI": "https://huggingface.co/spaces/seawolf2357/Flowise-AI", |
|
"ginigen/Flux-LayerDiffuse": "https://huggingface.co/spaces/ginigen/Flux-LayerDiffuse", |
|
"VIDraft/Portrait-Animation": "https://huggingface.co/spaces/VIDraft/Portrait-Animation", |
|
"VIDraft/Deepseek-Multimodal": "https://huggingface.co/spaces/VIDraft/Deepseek-Multimodal", |
|
"VIDraft/BLIP2": "https://huggingface.co/spaces/VIDraft/BLIP2", |
|
"ginigen/text3d-r1": "https://huggingface.co/spaces/ginigen/text3d-r1", |
|
"immunobiotech/drug-discovery": "https://huggingface.co/spaces/immunobiotech/drug-discovery", |
|
"openfree/VisionOCR-Chat": "https://huggingface.co/spaces/openfree/VisionOCR-Chat", |
|
"immunobiotech/MICHELIN": "https://huggingface.co/spaces/immunobiotech/MICHELIN", |
|
"immunobiotech/MICHELIN-korea": "https://huggingface.co/spaces/immunobiotech/MICHELIN-korea", |
|
"immunobiotech/MICHELIN-japan": "https://huggingface.co/spaces/immunobiotech/MICHELIN-japan", |
|
"immunobiotech/MICHELIN-china": "https://huggingface.co/spaces/immunobiotech/MICHELIN-china", |
|
"VIDraft/money-radar-korea": "https://huggingface.co/spaces/VIDraft/money-radar-korea", |
|
"VIDraft/money-radar": "https://huggingface.co/spaces/VIDraft/money-radar", |
|
"ginipick/PharmAI-Korea": "https://huggingface.co/spaces/ginipick/PharmAI-Korea", |
|
"ginigen/MagicFace-V3": "https://huggingface.co/spaces/ginigen/MagicFace-V3", |
|
"aiqcamp/MindMap": "https://huggingface.co/spaces/aiqcamp/MindMap", |
|
"ginigen/3D-LLAMA": "https://huggingface.co/spaces/ginigen/3D-LLAMA", |
|
"openfree/VectorFlow": "https://huggingface.co/spaces/openfree/VectorFlow", |
|
"openfree/webtoon-gen": "https://huggingface.co/spaces/openfree/webtoon-gen", |
|
"VIDraft/topic-prediction": "https://huggingface.co/spaces/VIDraft/topic-prediction", |
|
"VIDraft/PapersImpact": "https://huggingface.co/spaces/VIDraft/PapersImpact", |
|
"VIDraft/EveryRAG": "https://huggingface.co/spaces/VIDraft/EveryRAG", |
|
"VIDraft/korea-president-DJ": "https://huggingface.co/spaces/VIDraft/korea-president-DJ", |
|
"VIDraft/korea-president-PARK": "https://huggingface.co/spaces/VIDraft/korea-president-PARK", |
|
"openfree/image-to-vector": "https://huggingface.co/spaces/openfree/image-to-vector", |
|
"ginipick/QR-Canvas-plus": "https://huggingface.co/spaces/ginipick/QR-Canvas-plus", |
|
"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", |
|
"openfree/PDF-RAG": "https://huggingface.co/spaces/openfree/PDF-RAG", |
|
"fantos/Ranking-Tracker": "https://huggingface.co/spaces/fantos/Ranking-Tracker", |
|
"aiqcamp/Multilingual-Images": "https://huggingface.co/spaces/aiqcamp/Multilingual-Images", |
|
"aiqcamp/Gemini2-Flash-Thinking": "https://huggingface.co/spaces/aiqcamp/Gemini2-Flash-Thinking", |
|
"openfree/pepe": "https://huggingface.co/spaces/openfree/pepe", |
|
"openfree/korea-president-yoon": "https://huggingface.co/spaces/openfree/korea-president-yoon", |
|
"openfree/CryptoVision": "https://huggingface.co/spaces/openfree/CryptoVision", |
|
"fantos/VoiceClone": "https://huggingface.co/spaces/fantos/VoiceClone", |
|
"seawolf2357/ocrlatex": "https://huggingface.co/spaces/seawolf2357/ocrlatex", |
|
"seawolf2357/img2vid": "https://huggingface.co/spaces/seawolf2357/img2vid", |
|
"seawolf2357/sd-prompt-gen": "https://huggingface.co/spaces/seawolf2357/sd-prompt-gen", |
|
"openfree/tarotcard": "https://huggingface.co/spaces/openfree/tarotcard", |
|
"aiqcamp/Polaroid": "https://huggingface.co/spaces/aiqcamp/Polaroid", |
|
"ginigen/cartoon": "https://huggingface.co/spaces/ginigen/cartoon", |
|
"ginigen/Book-Cover": "https://huggingface.co/spaces/ginigen/Book-Cover", |
|
"aiqcamp/fash": "https://huggingface.co/spaces/aiqcamp/fash", |
|
"gunship999/Korea-Daily-News": "https://huggingface.co/spaces/gunship999/Korea-Daily-News", |
|
"immunobiotech/ChicagoGallery": "https://huggingface.co/spaces/immunobiotech/ChicagoGallery", |
|
"immunobiotech/MetropolitanMuseum": "https://huggingface.co/spaces/immunobiotech/MetropolitanMuseum", |
|
"immunobiotech/opensky": "https://huggingface.co/spaces/immunobiotech/opensky", |
|
"VIDraft/eum": "https://huggingface.co/spaces/VIDraft/eum", |
|
"aiqtech/FLUX-military": "https://huggingface.co/spaces/aiqtech/FLUX-military", |
|
"fantaxy/Rolls-Royce": "https://huggingface.co/spaces/fantaxy/Rolls-Royce", |
|
"seawolf2357/flux-korea-hanbok-lora": "https://huggingface.co/spaces/seawolf2357/flux-korea-hanbok-lora", |
|
"seawolf2357/flux-korea-palace-lora": "https://huggingface.co/spaces/seawolf2357/flux-korea-palace-lora", |
|
"aiqcamp/flux-cat-lora": "https://huggingface.co/spaces/aiqcamp/flux-cat-lora", |
|
"gunship999/SexyImages": "https://huggingface.co/spaces/gunship999/SexyImages", |
|
"aiqtech/flux-claude-monet-lora": "https://huggingface.co/spaces/aiqtech/flux-claude-monet-lora", |
|
"seawolf2357/3D-Avatar-Generator": "https://huggingface.co/spaces/seawolf2357/3D-Avatar-Generator", |
|
"fantaxy/playground25": "https://huggingface.co/spaces/fantaxy/playground25", |
|
"openfree/ultpixgen": "https://huggingface.co/spaces/openfree/ultpixgen", |
|
"seawolf2357/REALVISXL-V5": "https://huggingface.co/spaces/seawolf2357/REALVISXL-V5", |
|
"fantos/flxcontrol": "https://huggingface.co/spaces/fantos/flxcontrol", |
|
"fantos/textcutobject": "https://huggingface.co/spaces/fantos/textcutobject", |
|
"ginipick/FLUX-Prompt-Generator": "https://huggingface.co/spaces/ginipick/FLUX-Prompt-Generator", |
|
"fantaxy/flxloraexp": "https://huggingface.co/spaces/fantaxy/flxloraexp", |
|
"fantos/flxloraexp": "https://huggingface.co/spaces/fantos/flxloraexp", |
|
"seawolf2357/flxloraexp": "https://huggingface.co/spaces/seawolf2357/flxloraexp", |
|
"ginipick/flxloraexp": "https://huggingface.co/spaces/ginipick/flxloraexp", |
|
"aiqcamp/imagemagic": "https://huggingface.co/spaces/aiqcamp/imagemagic", |
|
"openfree/ColorRevive": "https://huggingface.co/spaces/openfree/ColorRevive", |
|
"VIDraft/RAGOndevice": "https://huggingface.co/spaces/VIDraft/RAGOndevice", |
|
"aiqcamp/AudioLlama": "https://huggingface.co/spaces/aiqcamp/AudioLlama", |
|
"ginigen/FLUXllama-Multilingual": "https://huggingface.co/spaces/ginigen/FLUXllama-Multilingual", |
|
"ginipick/FitGen": "https://huggingface.co/spaces/ginipick/FitGen", |
|
"fantaxy/FLUX-Animations": "https://huggingface.co/spaces/fantaxy/FLUX-Animations", |
|
"fantaxy/Remove-Video-Background": "https://huggingface.co/spaces/fantaxy/Remove-Video-Background", |
|
"fantaxy/ofai-flx-logo": "https://huggingface.co/spaces/fantaxy/ofai-flx-logo", |
|
"fantaxy/flx-pulid": "https://huggingface.co/spaces/fantaxy/flx-pulid", |
|
"fantaxy/flx-upscale": "https://huggingface.co/spaces/fantaxy/flx-upscale", |
|
"aiqcamp/Fashion-FLUX": "https://huggingface.co/spaces/aiqcamp/Fashion-FLUX", |
|
"fantos/x-mas": "https://huggingface.co/spaces/fantos/x-mas", |
|
"openfree/Korean-Leaderboard": "https://huggingface.co/spaces/openfree/Korean-Leaderboard", |
|
"ginipick/FLUXllama": "https://huggingface.co/spaces/ginipick/FLUXllama", |
|
"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", |
|
"fantos/flxfashmodel": "https://huggingface.co/spaces/fantos/flxfashmodel", |
|
"fantos/kolcontrl": "https://huggingface.co/spaces/fantos/kolcontrl", |
|
"aiqtech/cinevid": "https://huggingface.co/spaces/aiqtech/cinevid", |
|
"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" |
|
}; |
|
|
|
|
|
function transformUrl(url) { |
|
const prefix = "https://huggingface.co/spaces/"; |
|
if (url.startsWith(prefix)) { |
|
const rest = url.substring(prefix.length); |
|
return "https://" + rest.replace("/", "-") + ".hf.space"; |
|
} |
|
return url; |
|
} |
|
|
|
|
|
|
|
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", |
|
"ginipick/like-history": "Utility", |
|
"ginigen/ColPali-multi": "Text", |
|
"ginigen/Janus-Pro-7B": "Vision", |
|
"ginigen/Animagine": "Image Gen", |
|
"openfree/PDF-RAG": "Productivity", |
|
|
|
"fantos/Ranking-Tracker": "Image Gen", |
|
"aiqcamp/Multilingual-Images": "Image Gen", |
|
"aiqcamp/Gemini2-Flash-Thinking": "Image Gen", |
|
"openfree/pepe": "Image Gen", |
|
"openfree/korea-president-yoon": "Image Gen", |
|
"openfree/CryptoVision": "Image Gen", |
|
"fantos/VoiceClone": "Image Gen", |
|
"seawolf2357/ocrlatex": "Image Gen", |
|
"seawolf2357/img2vid": "Image Gen", |
|
"seawolf2357/sd-prompt-gen": "Image Gen", |
|
"openfree/tarotcard": "Image Gen", |
|
"aiqcamp/Polaroid": "Image Gen", |
|
"ginigen/cartoon": "Image Gen", |
|
"ginigen/Book-Cover": "Image Gen", |
|
"aiqcamp/fash": "Image Gen", |
|
"gunship999/Korea-Daily-News": "Image Gen", |
|
"immunobiotech/ChicagoGallery": "Image Gen", |
|
"immunobiotech/MetropolitanMuseum": "Image Gen", |
|
"immunobiotech/opensky": "Image Gen", |
|
"VIDraft/eum": "Image Gen", |
|
"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": "Image Gen", |
|
"fantaxy/playground25": "Image Gen", |
|
"openfree/ultpixgen": "Image Gen", |
|
"seawolf2357/REALVISXL-V5": "Image Gen", |
|
"fantos/flxcontrol": "Image Gen", |
|
"fantos/textcutobject": "Image Gen", |
|
"ginipick/FLUX-Prompt-Generator": "Image Gen", |
|
"fantaxy/flxloraexp": "Image Gen", |
|
"fantos/flxloraexp": "Image Gen", |
|
"seawolf2357/flxloraexp": "Image Gen", |
|
"ginipick/flxloraexp": "Image Gen", |
|
"aiqcamp/imagemagic": "Image Gen", |
|
"openfree/ColorRevive": "Image Gen", |
|
"VIDraft/RAGOndevice": "Image Gen", |
|
"aiqcamp/AudioLlama": "Image Gen", |
|
"ginigen/FLUXllama-Multilingual": "Image Gen", |
|
"ginipick/FitGen": "Image Gen", |
|
"fantaxy/FLUX-Animations": "Image Gen", |
|
"fantaxy/Remove-Video-Background": "Image Gen", |
|
"fantaxy/ofai-flx-logo": "Image Gen", |
|
"fantaxy/flx-pulid": "Image Gen", |
|
"fantaxy/flx-upscale": "Image Gen", |
|
"aiqcamp/Fashion-FLUX": "Image Gen", |
|
"fantos/x-mas": "Image Gen", |
|
"openfree/Korean-Leaderboard": "Image Gen", |
|
"ginipick/FLUXllama": "Image Gen", |
|
"fantaxy/Sound-AI-SFX": "Image Gen", |
|
"fantos/flx8lora": "Image Gen", |
|
"openfree/trending-board": "Image Gen", |
|
"aiqtech/Particle-Accelerator-Simulation": "Image Gen", |
|
"ginipick/Realtime-FLUX": "Image Gen", |
|
"VIDraft/prime-number": "Image Gen", |
|
"aiqtech/kofaceid": "Image Gen", |
|
"fantaxy/fastvideogena": "Image Gen", |
|
"fantos/cogvidx": "Image Gen", |
|
"fantos/flxfashmodel": "Image Gen", |
|
"fantos/kolcontrl": "Image Gen", |
|
"aiqtech/cinevid": "Image Gen", |
|
"aiqtech/FLUX-Ghibli-Studio-LoRA": "Image Gen", |
|
"aiqtech/flxgif": "Image Gen", |
|
"aiqtech/imaginpaint": "Image Gen" |
|
}; |
|
|
|
|
|
function transformUrl(url) { |
|
const prefix = "https://huggingface.co/spaces/"; |
|
if (url.startsWith(prefix)) { |
|
const rest = url.substring(prefix.length); |
|
return "https://" + rest.replace("/", "-") + ".hf.space"; |
|
} |
|
return url; |
|
} |
|
|
|
|
|
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: category + "/" + projectName, |
|
url: transformUrl(projectList[key]), |
|
category: category |
|
}; |
|
}); |
|
|
|
|
|
const grouped = {}; |
|
projects.forEach(project => { |
|
const cat = project.category; |
|
if (!grouped[cat]) { |
|
grouped[cat] = []; |
|
} |
|
grouped[cat].push(project); |
|
}); |
|
|
|
|
|
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"; |
|
btn.setAttribute("data-filter", category); |
|
btn.textContent = category; |
|
filterGroupDiv.appendChild(btn); |
|
}); |
|
|
|
|
|
function updateSidebar(filter) { |
|
const sidebar = document.getElementById("sidebar"); |
|
sidebar.innerHTML = ""; |
|
let items = (filter === "all") ? projects : projects.filter(project => project.category === filter); |
|
const ul = document.createElement("ul"); |
|
items.forEach(item => { |
|
const li = document.createElement("li"); |
|
li.textContent = item.name; |
|
li.addEventListener("click", function() { |
|
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 { |
|
document.getElementById("embed-frame").setAttribute("src", ""); |
|
} |
|
} |
|
|
|
|
|
document.querySelectorAll(".toggle-button").forEach(button => { |
|
button.addEventListener("click", function() { |
|
document.querySelectorAll(".toggle-button").forEach(btn => btn.classList.remove("active")); |
|
this.classList.add("active"); |
|
updateSidebar(this.getAttribute("data-filter")); |
|
}); |
|
}); |
|
|
|
|
|
updateSidebar("all"); |
|
</script> |
|
</body> |
|
</html> |
|
|
