docs: customize InSAI Lab static space frontend

index.html

@@ -1,19 +1,217 @@
 <!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 lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>InSAI Lab @ Hunan University</title>
+  <style>
+    :root {
+      --primary: #2563eb;
+      --primary-hover: #1d4ed8;
+      --bg: #f8fafc;
+      --card-bg: #ffffff;
+      --text: #0f172a;
+      --text-muted: #64748b;
+      --border: #e2e8f0;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      padding: 2rem 1rem;
+    }
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .hero {
+      text-align: center;
+      background: var(--card-bg);
+      padding: 2.5rem 2rem;
+      border-radius: 1rem;
+      border: 1px solid var(--border);
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
+      margin-bottom: 2rem;
+    }
+    .logo {
+      width: 100px;
+      height: 100px;
+      border-radius: 1rem;
+      margin-bottom: 1rem;
+      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+    }
+    h1 {
+      font-size: 1.85rem;
+      font-weight: 700;
+      color: var(--text);
+      margin-bottom: 0.25rem;
+    }
+    .subtitle {
+      font-size: 1.1rem;
+      color: var(--primary);
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+    .mission {
+      font-style: italic;
+      color: var(--text-muted);
+      max-width: 700px;
+      margin: 0 auto 1.5rem auto;
+      font-size: 0.95rem;
+    }
+    .badges {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.6rem;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.4rem 0.9rem;
+      font-size: 0.85rem;
+      font-weight: 600;
+      text-decoration: none;
+      border-radius: 0.5rem;
+      transition: all 0.2s;
+    }
+    .badge-primary { background: #2563eb; color: #fff; }
+    .badge-dark { background: #0f172a; color: #fff; }
+    .badge-hf { background: #f59e0b; color: #000; }
+    .badge-mail { background: #dc2626; color: #fff; }
+    .badge:hover { opacity: 0.9; transform: translateY(-1px); }
+
+    .section-title {
+      font-size: 1.35rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+      gap: 1.25rem;
+      margin-bottom: 2rem;
+    }
+    .card {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+    }
+    .card h3 {
+      font-size: 1.2rem;
+      margin-bottom: 0.5rem;
+    }
+    .card p {
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      margin-bottom: 1rem;
+    }
+    .card-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+    .btn {
+      display: inline-block;
+      padding: 0.35rem 0.75rem;
+      font-size: 0.8rem;
+      font-weight: 600;
+      border-radius: 0.375rem;
+      text-decoration: none;
+      background: #f1f5f9;
+      color: #334155;
+      border: 1px solid #cbd5e1;
+      transition: all 0.15s;
+    }
+    .btn:hover {
+      background: var(--primary);
+      color: #fff;
+      border-color: var(--primary);
+    }
+    .directions {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .directions ul {
+      list-style-type: disc;
+      padding-left: 1.5rem;
+      font-size: 0.95rem;
+    }
+    .directions li {
+      margin-bottom: 0.5rem;
+    }
+    footer {
+      text-align: center;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      padding-top: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="hero">
+      <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/69d4baff8e85a8e1ae8370a5/qqeGpW3kQ8GVDcazES1nW.png" alt="InSAI Lab Logo" class="logo" />
+      <h1>Integrated Sensing and Assistive Intelligence (InSAI) Lab</h1>
+      <div class="subtitle">School of AI and Robotics, Hunan University (HNU)</div>
+      <p class="mission">
+        "Building a utopia where integrated sensing systems empower and enhance human capabilities, especially benefiting people with disabilities."
+      </p>
+      <div class="badges">
+        <a href="https://insailab.org" target="_blank" class="badge badge-primary">🌐 Official Website</a>
+        <a href="https://github.com/InSAI-Lab" target="_blank" class="badge badge-dark">💻 GitHub Organization</a>
+        <a href="https://huggingface.co/InSAI-Lab" target="_blank" class="badge badge-hf">🤗 Hugging Face Hub</a>
+        <a href="mailto:jiamingzhang@hnu.edu.cn" class="badge badge-mail">✉️ jiamingzhang@hnu.edu.cn</a>
+      </div>
+    </div>
+
+    <div class="section-title">🌟 Featured Open-Source Benchmarks & Models</div>
+    <div class="grid">
+      <div class="card">
+        <h3>🚗 DeLiVER & CMNeXt (CVPR 2023)</h3>
+        <p>Arbitrary-modal semantic segmentation covering Depth, LiDAR, Events, Multiple Views, and RGB under 4 severe weather conditions and 5 sensor failure corner cases.</p>
+        <div class="card-links">
+          <a href="https://huggingface.co/datasets/InSAI-Lab/DELIVER" target="_blank" class="btn">📦 Dataset (12.2 GB)</a>
+          <a href="https://huggingface.co/InSAI-Lab/CMNeXt" target="_blank" class="btn">🤖 Checkpoints (37 models)</a>
+          <a href="https://arxiv.org/abs/2303.01480" target="_blank" class="btn">📄 CVPR 2023 Paper</a>
+        </div>
+      </div>
+
+      <div class="card">
+        <h3>🌐 SynPASS & Trans4PASS / Trans4PASS+ (CVPR 2022)</h3>
+        <p>Distortion-aware Vision Transformers tailored for 360° panoramic cameras and omnidirectional scene understanding, featuring the 9,080-frame SynPASS benchmark.</p>
+        <div class="card-links">
+          <a href="https://huggingface.co/datasets/InSAI-Lab/SynPASS" target="_blank" class="btn">📦 Dataset (4.8 GB)</a>
+          <a href="https://huggingface.co/InSAI-Lab/Trans4PASS" target="_blank" class="btn">🤖 Checkpoints (40 models)</a>
+          <a href="https://arxiv.org/abs/2203.01452" target="_blank" class="btn">📄 CVPR 2022 Paper</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-title">🎯 Core Research Directions</div>
+    <div class="directions">
+      <ul>
+        <li><strong>Multimodal Perception & Scene Understanding:</strong> Vision-Language Modeling, 2D/3D Vision, and sensor fusion in complex, adverse real-world environments.</li>
+        <li><strong>Autonomous Systems & Panoramic Vision:</strong> Semantic Mapping, Panoramic Sensing, Distortion-aware Transformers, and Bird’s-Eye-View (BEV) perception.</li>
+        <li><strong>Embodied Intelligence:</strong> Perception, navigation, and decision-making linking foundation models with robotic action, including Sim2Real adaptation.</li>
+        <li><strong>Assistive Technologies:</strong> Wearable assistive systems, navigation aids, and accessible interfaces designed around human capabilities.</li>
+        <li><strong>Brain-Computer Interface & Document Understanding:</strong> Cognitive state sensing, assistive BCI, and intelligent layout/reading assistance.</li>
+      </ul>
+    </div>
+
+    <footer>
+      © InSAI Lab, Hunan University. Visit <a href="https://insailab.org" target="_blank" style="color:var(--primary);text-decoration:none;">insailab.org</a> for more news and publications.
+    </footer>
+  </div>
+</body>
 </html>