| <!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", |
| "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", |
| "ginipick/Realtime-FLUX": "https://huggingface.co/spaces/ginipick/Realtime-FLUX", |
| "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" |
| }; |
| |
| |
| 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", |
| |
| |
| const newProjects = [ |
| "fantos/Panorama", |
| "ginigen/Multi-LoRAgen", |
| "ginipick/Fashion-Stylegen", |
| "ginipick/Time-Stream", |
| "ginipick/AccuVision-Diffusion", |
| "fantos/Magic-Drawings", |
| "ginigen/Lumina-Image-PLUS", |
| "fantaxy/fantasy-novel", |
| "VIDraft/mouse-webgen", |
| "immunobiotech/MUSIC-Jukebox" |
| ]; |
| |
| const bestProjects = [ |
| "ginigen/canvas-studio", |
| "ginipick/Time-Stream", |
| "ginipick/AccuVision-Diffusion", |
| "fantos/Magic-Drawings", |
| "ginigen/Lumina-Image-PLUS", |
| "fantaxy/fantasy-novel", |
| "VIDraft/mouse-webgen", |
| "immunobiotech/MUSIC-Jukebox", |
| "seawolf2357/Flowise-AI", |
| "ginigen/Flux-LayerDiffuse" |
| ]; |
| |
| |
| const keys = Object.keys(projectList); |
| const projects = keys.map(key => { |
| const primaryCategory = customCategories[key] || "Image Gen"; |
| let categories = [primaryCategory]; |
| |
| |
| 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 |
| }; |
| }); |
| |
| |
| |
| |
| 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 primaryCategory = customCategories[key] || "Image Gen"; |
| const url = projectList[key]; |
| |
| |
| 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: primaryCategory + "/" + projectName, |
| url: transformUrl(url), |
| categories |
| }; |
| }); |
| |
| |
| const grouped = {}; |
| projects.forEach(proj => { |
| proj.categories.forEach(cat => { |
| if (!grouped[cat]) grouped[cat] = []; |
| grouped[cat].push(proj); |
| }); |
| }); |
| |
| |
| 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(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").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 = ""; |
| } |
| } |
| |
| |
| document.querySelectorAll(".toggle-button").forEach(button => { |
| button.addEventListener("click", function() { |
| document.querySelectorAll(".toggle-button").forEach(b => b.classList.remove("active")); |
| this.classList.add("active"); |
| updateSidebar(this.getAttribute("data-filter")); |
| }); |
| }); |
| |
| |
| updateSidebar("all"); |
| </script> |
| </body> |
| </html> |
