Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Genshin Model Viewer</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 16px; | |
| padding: 16px; | |
| } | |
| .card { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| text-align: center; | |
| padding: 10px; | |
| } | |
| .card img { | |
| width: 100%; | |
| height: auto; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Genshin Model Viewer</h1> | |
| <div class="grid" id="modelGrid"></div> | |
| <script> | |
| async function fetchData() { | |
| const response = await fetch("https://huggingface.co/datasets/public-soiz1/genshin-applio-rvc-data/raw/main/data.json"); | |
| const data = await response.json(); | |
| const container = document.getElementById("modelGrid"); | |
| data.model_data.forEach(model => { | |
| const version = model[0]; | |
| const name = model[1]; | |
| const zipUrl = model[2]; | |
| const imageUrl = model[3]; | |
| // URLデコード処理 | |
| const decodedUrl = decodeURIComponent(zipUrl); | |
| const fileName = decodedUrl.substring(decodedUrl.lastIndexOf("/") + 1, decodedUrl.lastIndexOf(".zip")); | |
| const card = document.createElement("div"); | |
| card.className = "card"; | |
| card.innerHTML = ` | |
| <img src="${imageUrl}" alt="${name}"> | |
| <h3>${name}</h3> | |
| <p><strong>File:</strong> ${fileName}</p> | |
| <p><a href="${zipUrl}" target="_blank">Download</a></p> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| } | |
| fetchData(); | |
| </script> | |
| </body> | |
| </html> | |