Spaces:

soiz1
/

genshin-models

Running

App Files Files Community

GPTfree api commited on Dec 25, 2024

Commit

4fbb53d

verified ·

1 Parent(s): 9d4076c

Update index.html

Browse files

Files changed (1) hide show

index.html +112 -1

index.html CHANGED Viewed

	@@ -1 +1,112 @@
1	- <!DOCTYPE html><html lang=ja><head><meta charset=UTF-8><title>モデル一覧</title><style>.tile-container{display:flex;flex-wrap:wrap;gap:10px}.tile{cursor:pointer;border:1px solid #ccc;border-radius:8px;overflow:hidden;width:200px;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.1)}.tile img{width:100%;height:auto}.tile .info{padding:10px}.tile .info .version{font-weight:700}</style></head><body><h1>モデル一覧</h1><div class=tile-container></div><script>const jsonUrl="https://huggingface.co/spaces/GPT-free-api/genshin-models/raw/main/model.json";async function fetchAndDisplayModels(){try{const e=await fetch(jsonUrl),t=await e.json(),n=document.querySelector(".tile-container");t.model_data.forEach((e=>{const[t,a,c,o]=e,d=document.createElement("div");d.className="tile",d.addEventListener("click",(e=>{navigator.clipboard.writeText(c).then((()=>{alert(URLがクリップボードにコピーされました: ${c})})).catch((e=>{console.error("URLのコピーに失敗しました:",e)}))}));const s=document.createElement("img");s.src=o,s.alt=a;const l=document.createElement("div");l.className="info";const r=document.createElement("div");r.className="version",r.textContent=バージョン: ${t};const i=document.createElement("div");i.className="name",i.textContent=名前: ${a},l.appendChild(r),l.appendChild(i),d.appendChild(s),d.appendChild(l),n.appendChild(d)}))}catch(e){console.error("JSONデータの取得または処理中にエラーが発生しました:",e)}}document.addEventListener("DOMContentLoaded",fetchAndDisplayModels)</script></body></html>

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>モデル一覧</title>
+  <style>
+    .tile-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      justify-content: center;
+    }
+    .tile {
+      cursor: pointer;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      overflow: hidden;
+      width: 200px;
+      text-align: center;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
+      transition: transform 0.2s;
+    }
+    .tile:hover {
+      transform: scale(1.05);
+    }
+    .tile img {
+      width: 100%;
+      height: auto;
+    }
+    .tile .info {
+      padding: 10px;
+    }
+    .tile .info .version {
+      font-weight: 700;
+    }
+  </style>
+</head>
+<body>
+  <h1>モデル一覧</h1>
+  <div class="tile-container"></div>
+  <script>
+    const jsonUrl = "/model.json";
+    async function fetchAndDisplayModels() {
+      try {
+        // JSONデータの取得
+        const response = await fetch(jsonUrl);
+        if (!response.ok) {
+          throw new Error(`HTTPエラー: ${response.status}`);
+        }
+        const data = await response.json();
+        const container = document.querySelector(".tile-container");
+        // モデルデータの描画
+        data.model_data.forEach((model) => {
+          const version = model[0]; // インデックス0: バージョン
+          const name = model[1];    // インデックス1: 名前
+          const url = model[2];     // インデックス2: URL
+          const image = model[3];   // インデックス3: 画像URL
+          const tile = document.createElement("div");
+          tile.className = "tile";
+          // タイルクリック時のURLコピー機能
+          tile.addEventListener("click", () => {
+            navigator.clipboard.writeText(url)
+              .then(() => {
+                alert(`URLがクリップボードにコピーされました: ${url}`);
+              })
+              .catch((error) => {
+                console.error("URLのコピーに失敗しました:", error);
+              });
+          });
+          // 画像要素
+          const img = document.createElement("img");
+          img.src = image;
+          img.alt = name;
+          // 情報セクション
+          const info = document.createElement("div");
+          info.className = "info";
+          const versionDiv = document.createElement("div");
+          versionDiv.className = "version";
+          versionDiv.textContent = `バージョン: ${version}`;
+          const nameDiv = document.createElement("div");
+          nameDiv.className = "name";
+          nameDiv.textContent = `名前: ${name}`;
+          info.appendChild(versionDiv);
+          info.appendChild(nameDiv);
+          tile.appendChild(img);
+          tile.appendChild(info);
+          container.appendChild(tile);
+        });
+      } catch (error) {
+        console.error("JSONデータの取得または処理中にエラーが発生しました:");
+        console.error(`エラーメッセージ: ${error.message}`);
+        console.error(`エラー名: ${error.name}`);
+        console.error(`スタックトレース: ${error.stack}`);
+        alert("データの取得中に問題が発生しました。詳細はコンソールをご確認ください。");
+      }
+    }
+    document.addEventListener("DOMContentLoaded", fetchAndDisplayModels);
+  </script>
+</body>
+</html>