Spaces:

daydreamer-json
/

test-static-space

Running

App Files Files Community

daydreamer-json commited on Dec 20, 2023

Commit

4d94b1f

verified ·

1 Parent(s): ddabc6c

test

Browse files

Files changed (2) hide show

index.html +212 -17
style.css +0 -28

index.html CHANGED Viewed

@@ -1,19 +1,214 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8">
+    <title>My static Space</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+      /* :root { font-family: 'Inter', sans-serif; }
+      @supports (font-variation-settings: normal) {
+        :root { font-family: 'Inter var', sans-serif; }
+      } */
+      body {
+        margin: 0;
+        background-color: #ffffff;
+        width: 100%;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #0d1117;
+        }
+      }
+      body, .markdown-body, button {
+        font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
+      }
+      .markdown-body {
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 960px;
+        margin-right: auto;
+        margin-left: auto;
+        padding: 1rem;
+      }
+      .markdown-body table {
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="markdown-body">
+      <h1>MiHoMo API Test</h1>
+      <div class="parsedAPI_input">
+        <p><span>Input UID: </span><input type="text" id="uidInputBox" name="uid" required minlength="9" maxlength="9" size="9" value="802415000"/> <button type="button" name="runBtn1" id="runBtn1" onclick="runBtn1Click()">Run</button></p>
+        <p class="connectingLabelRoot" id="connectingLabelRoot" style="display: none;"><span class="connectingLabelChild" id="connectingLabelNowProgress" style="display: none;">Connecting... </span><span class="connectingLabelChild" id="connectingLabelOk" style="display: none;"></span></p>
+      </div>
+      <div id="responseDataPlaceholder">
+        <h2>player (truncated)</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>key</th>
+              <th>value</th>
+            </tr>
+          </thead>
+          <tbody id="responseDataPlaceholderPlayer">
+          </tbody>
+        </table>
+        <h2>characters (truncated)</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>key</th>
+              <th>value</th>
+            </tr>
+          </thead>
+          <tbody id="responseDataPlaceholderCharacters">
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <script>
+      const StarRailResBaseUrl = 'https://raw.githubusercontent.com/Mar-7th/StarRailRes/master/';
+      const apiConnectTimeout = 15000;
+      const apiConnectUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
+      const apiConnectDefaultHeader = {
+        'Cache-Control': apiConnectUserAgent,
+        'Access-Control-Allow-Origin': '*',
+      };
+      window.addEventListener('load', async function(){
+        // some process
+      });
+      async function runBtn1Click () {
+        const uidInputValue = document.querySelector('#uidInputBox').value;
+        document.querySelector('#connectingLabelRoot').style.display = 'block';
+        document.querySelector('#connectingLabelNowProgress').style.display = 'inline';
+        document.querySelector('#connectingLabelOk').style.display = 'inline';
+        const apiResponseData = await apiConnect({
+          'method': 'get',
+          'url': `https://corsproxy.io/?${encodeURIComponent(`https://api.mihomo.me/sr_info_parsed/${uidInputValue}?lang=jp&version=v2`)}`,
+          'headers': apiConnectDefaultHeader,
+          'timeout': apiConnectTimeout
+        });
+        console.log(apiResponseData);
+        if (apiResponseData) {
+          document.querySelector('#connectingLabelOk').innerHTML = `OK (Time: ${Math.ceil(apiResponseData.apiConnectionTime)} ms)`;
+          htmlBuildFromApiData(apiResponseData);
+        } else {
+          document.querySelector('#connectingLabelOk').innerHTML = `Failed`;
+        }
+      }
+      async function apiConnect (axiosObj) {
+        let connectionTimerStart = performance.now();
+        try {
+          const response = await axios(axiosObj);
+          let connectionTimerEnd = performance.now();
+          return {
+            'apiConnectionTime': connectionTimerEnd - connectionTimerStart,
+            'response': response.data
+          };
+        } catch (error) {
+          let connectionTimerEnd = performance.now();
+          console.error(`API request failed: ${error.code}`);
+          alert(`API request failed: ${error.code}`);
+          // console.error(error);
+          throw error;
+          return null;
+        }
+      }
+      function htmlBuildFromApiData (apiResponseData) {
+        const fakeClone01 = document.querySelector('#responseDataPlaceholderPlayer').cloneNode(false);
+        const fakeClone02 = document.querySelector('#responseDataPlaceholderCharacters').cloneNode(false);
+        document.querySelector('#responseDataPlaceholderPlayer').parentNode.replaceChild(fakeClone01, document.querySelector('#responseDataPlaceholderPlayer'));
+        document.querySelector('#responseDataPlaceholderCharacters').parentNode.replaceChild(fakeClone02, document.querySelector('#responseDataPlaceholderCharacters'));
+        let inputDataKeyList = [
+          'player.uid',
+          'player.nickname',
+          'player.signature',
+          'player.level',
+          'player.world_level',
+          'player.friend_count',
+          'player.avatar.icon',
+          'player.is_display',
+          'player.space_info.memory_data.level',
+          'player.space_info.memory_data.chaos_level',
+          'player.space_info.universe_level',
+          'player.space_info.challenge_data.maze_group_index',
+          'player.space_info.challenge_data.pre_maze_group_index',
+          'player.space_info.pass_area_progress',
+          'player.space_info.light_cone_count',
+          'player.space_info.avatar_count',
+          'player.space_info.achievement_count',
+        ];
+        for (let i = 0; i < inputDataKeyList.length; i++) {
+          document.querySelector('#responseDataPlaceholderPlayer').appendChild(trElAddReturn(apiResponseData.response, inputDataKeyList[i]));
+        }
+        for (let i = 0; i < apiResponseData.response.characters.length; i++) {
+          let inputDataKeyList2 = [
+            `characters.${i}.name`,
+            `characters.${i}.rarity`,
+            `characters.${i}.rank`,
+            `characters.${i}.level`,
+            `characters.${i}.promotion`,
+            `characters.${i}.icon`,
+            `characters.${i}.preview`,
+            `characters.${i}.portrait`,
+            `characters.${i}.path.name`,
+            `characters.${i}.path.icon`,
+            `characters.${i}.element.name`,
+            `characters.${i}.element.icon`,
+            `characters.${i}.light_cone.name`,
+            `characters.${i}.light_cone.rarity`,
+            `characters.${i}.light_cone.rank`,
+            `characters.${i}.light_cone.level`,
+            `characters.${i}.light_cone.promotion`,
+            `characters.${i}.light_cone.icon`,
+            `characters.${i}.light_cone.preview`,
+            `characters.${i}.light_cone.portrait`,
+            `characters.${i}.light_cone.path.name`,
+            `characters.${i}.light_cone.path.icon`,
+          ];
+          for (let j = 0; j < inputDataKeyList2.length; j++) {
+            document.querySelector('#responseDataPlaceholderCharacters').appendChild(trElAddReturn(apiResponseData.response, inputDataKeyList2[j]));
+          }
+        }
+      }
+      function trElAddReturn (inputData, objKey) {
+        const imageDetectRegex = /\.(png|jpg|jpeg|webp|gif|bmp)$/i;
+        const tr = document.createElement('tr');
+        const tdKey = document.createElement('td');
+        const tdValue = document.createElement('td');
+        tdKey.innerHTML = objKey;
+        // objKeyを分割して各部分を使用してオブジェクトのプロパティにアクセスします。
+        let keyParts = objKey.split('.');
+        let value = inputData;
+        for (let i = 0; i < keyParts.length; i++) {
+            // 配列のインデックスを表す文字列を数値に変換します。
+            if (!isNaN(keyParts[i])) {
+                keyParts[i] = parseInt(keyParts[i], 10);
+            }
+            value = value[keyParts[i]];
+        }
+        if (imageDetectRegex.test(value)) {
+          const imageEl = document.createElement('img');
+          imageEl.src = StarRailResBaseUrl + value;
+          tdValue.appendChild(imageEl);
+        } else {
+          tdValue.innerHTML = value;
+        }
+        tr.appendChild(tdKey);
+        tr.appendChild(tdValue);
+        return tr;
+      }
+    </script>
+  </body>
+</html>

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}