SkySense-O/project.html at main · zqcrafts/SkySense-O · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SkySense Family Introduction</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            neutral: '#F5F7FA',
            dark: '#1D2129',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }
      .card-hover {
        @apply transition-all duration-500 hover:shadow-2xl hover:-translate-y-3;
      }
      .conference-logo {
        @apply h-6 w-auto opacity-80 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300 ml-4;
      }
      .card-image {
        @apply w-full h-56 object-cover rounded-lg mb-6 transition-transform duration-700 hover:scale-110;
      }
      /* 第一张图片的特效类 */
      .featured-image {
        animation: pulse 3s infinite ease-in-out;
        box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1);
      }
      @keyframes pulse {
        0%, 100% {
          transform: scale(1);
          box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1);
        }
        50% {
          transform: scale(1.03);
          box-shadow: 0 15px 30px -8px rgba(22, 93, 255, 0.2);
        }
      }
      .title-line {
        display: block;
      }
      .section-divider {
        @apply h-1 w-20 bg-primary/30 my-8 mx-auto rounded-full relative overflow-hidden;
      }
      .section-divider::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.5), transparent);
        animation: shimmer 2s infinite;
      }
      .card-glow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
      }
      @keyframes shimmer {
        to {
          left: 100%;
        }
      }
    }
  </style>
</head>

<body class="text-dark min-h-screen">
  <!-- 背景图片 - 透明度调浅 -->
  <div class="fixed inset-0 z-0">
    <img src="https://picsum.photos/id/1015/1920/1080" alt="Earth from space" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-dark/10"></div> <!-- 从30%调整为15%透明度 -->
  </div>

  <div class="container mx-auto px-4 py-8 md:py-16 max-w-6xl relative z-10">
    <!-- 标题部分 -->
    <header class="mb-10 md:mb-20 text-center">
      <!-- 调大地球图标：将容器从p-2改为p-4，图标从text-2xl改为text-4xl -->
      <div class="inline-block mb-6 p-4 bg-white rounded-full shadow-lg transform transition-transform duration-500 hover:scale-110">
        <i class="fa fa-globe text-primary text-4xl"></i>
      </div>
      <h1 class="text-[clamp(1.75rem,5vw,2.75rem)] font-bold text-white leading-tight tracking-tight text-shadow">
        <span class="title-line">SkySense Family: A Series of Works on</span>
        <span class="title-line text-white">Remote Sensing Foundation Model for Earth Observation</span>
      </h1>
    </header>

    <!-- Overview部分 - 纯白卡片 -->
    <section class="mb-16 bg-white rounded-xl shadow-md p-6 md:p-8 border border-gray-100 mx-auto max-w-5xl transform transition-all duration-500 hover:shadow-xl card-glow">
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold mb-6 text-primary text-center relative inline-block mx-auto">
        Overview
        <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-1/2 h-1 bg-primary/30 rounded-full"></span>
      </h2>
      <p class="text-gray-600 mb-4 text-sm">
      Welcome to SkySense family project, a series of <strong class="text-primary">remote sensing (RS) foundation models</strong> for earth observation. We start exploring RS foundation models from <strong class="text-primary">Prompt Encoder</strong> (SkySense++ and SkySense-O), <strong class="text-primary">RS Encoder</strong> (SkySense and SkySense-V2), and <strong class="text-primary">RS Decoder</strong> (SkySenseGPT), turning satellite data into actionable insights for disaster management, environmental monitoring, and more.
      </p>
      <!-- 修改后的图片容器及图片代码 -->
      <div class="flex justify-center mb-4">
        <div class="w-full max-w-3xl">
          <!-- 第一张图添加特效 -->
          <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/overview.png"
               alt="SkySense Overview Visualization"
               class="w-full h-auto rounded-lg opacity-0 transform translate-y-4 transition-all duration-1000 ease-out hover:scale-105"
               onload="this.classList.remove('opacity-0', 'translate-y-4')">
        </div>
      </div>

      <div class="flex flex-col md:flex-row gap-8 items-center">
        <div class="md:w-1/1 overflow-hidden rounded-lg shadow-sm">
          <!-- 第二张图保持原有样式 -->
          <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/application.png"
               alt="SkySense Application Scenarios"
               class="w-full h-auto rounded-lg">
        </div>
      </div>
    </section>

    <div class="section-divider"></div>

    <!-- 项目介绍部分 - 纯白卡片 -->
    <section class="mb-12 mx-auto max-w-5xl">
      <!-- 标题 "Our Works" -->
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold mb-8 text-white text-center text-shadow">
        Our Works
      </h2>

      <!-- 项目卡片容器 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- 项目 1 - 带有特效的第一张图 -->
        <div class="bg-white rounded-xl shadow-md p-8 card-hover border border-gray-100 overflow-hidden card-glow">
          <div class="flex items-center mb-5">
            <span class="bg-primary/10 text-primary font-bold w-10 h-10 rounded-full flex items-center justify-center mr-3 text-lg">1</span>
            <h3 class="font-semibold text-xl flex items-center">
              SkySense (CVPR 2024)
            </h3>
          </div>

          <!-- 详情图片 - 添加了featured-image类以应用特效 -->
          <div class="overflow-hidden rounded-lg mb-6">
            <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/skysense.png" alt="SkySense Model Visualization" class="card-image featured-image">
          </div>

          <p class="text-gray-600 mb-6 text-base">
            A Multi-Modal Remote Sensing Foundation Model Towards Universal Interpretation for Earth Observation Imagery
          </p>

          <!-- 查看选项 -->
          <div class="flex gap-4">
            <a href="https://arxiv.org/pdf/2312.10115" class="inline-flex items-center text-primary hover:text-dark/80 text-base font-medium transition-colors duration-300">
              <i class="fa fa-file-pdf-o mr-2"></i> View Paper
            </a>
            <a href="https://github.com/Jack-bo1220/SkySense" class="inline-flex items-center text-gray-700 hover:text-dark text-base font-medium transition-colors duration-300">
              <i class="fa fa-github mr-2"></i> View Project
            </a>
          </div>
        </div>

        <!-- 项目 2 -->
        <div class="bg-white rounded-xl shadow-md p-8 card-hover border border-gray-100 overflow-hidden card-glow">
          <div class="flex items-center mb-5">
            <span class="bg-primary/10 text-primary font-bold w-10 h-10 rounded-full flex items-center justify-center mr-3 text-lg">2</span>
            <h3 class="font-semibold text-xl flex items-center">
              SkySense-O (CVPR 2025)
            </h3>
          </div>

          <!-- 详情图片 -->
          <div class="overflow-hidden rounded-lg mb-6">
            <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/skysenseo.png" alt="SkySense-O Model Visualization" class="card-image">
          </div>

          <p class="text-gray-600 mb-6 text-base">
            Towards Open-World Remote Sensing Interpretation with Vision-Centric Visual-Language Modeling
          </p>

          <!-- 查看选项 -->
          <div class="flex gap-4">
            <a href="https://openaccess.thecvf.com/content/CVPR2025/papers/Zhu_SkySense-O_Towards_Open-World_Remote_Sensing_Interpretation_with_Vision-Centric_Visual-Language_Modeling_CVPR_2025_paper.pdf" class="inline-flex items-center text-primary hover:text-primary/80 text-base font-medium transition-colors duration-300">
              <i class="fa fa-file-pdf-o mr-2"></i> View Paper
            </a>
            <a href="https://github.com/zqcrafts/SkySense-O" class="inline-flex items-center text-gray-700 hover:text-dark text-base font-medium transition-colors duration-300">
              <i class="fa fa-github mr-2"></i> View Project
            </a>
          </div>
        </div>

        <!-- 项目 3 -->
        <div class="bg-white rounded-xl shadow-md p-8 card-hover border border-gray-100 overflow-hidden card-glow">
          <div class="flex items-center mb-5">
            <span class="bg-primary/10 text-primary font-bold w-10 h-10 rounded-full flex items-center justify-center mr-3 text-lg">3</span>
            <h3 class="font-semibold text-xl flex items-center">
              SkySense-V2 (ICCV 2025)
            </h3>
          </div>

          <!-- 详情图片 -->
          <div class="overflow-hidden rounded-lg mb-6">
            <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/skysensev2.png" alt="SkySense-V2 Model Visualization" class="card-image">
          </div>

          <p class="text-gray-600 mb-6 text-base">
            A Unified Foundation Model for Multi-modal Remote Sensing
          </p>

          <!-- 查看选项 -->
          <div class="flex gap-4">
            <a href="https://arxiv.org/pdf/2507.13812" class="inline-flex items-center text-primary hover:text-primary/80 text-base font-medium transition-colors duration-300">
              <i class="fa fa-file-pdf-o mr-2"></i> View Paper
            </a>
            <a href="https://arxiv.org/abs/2507.13812" class="inline-flex items-center text-gray-700 hover:text-dark text-base font-medium transition-colors duration-300">
              <i class="fa fa-github mr-2"></i> View Project
            </a>
          </div>
        </div>

        <!-- 项目 4 -->
        <div class="bg-white rounded-xl shadow-md p-8 card-hover border border-gray-100 overflow-hidden card-glow">
          <div class="flex items-center mb-5">
            <span class="bg-primary/10 text-primary font-bold w-10 h-10 rounded-full flex items-center justify-center mr-3 text-lg">4</span>
            <h3 class="font-semibold text-xl flex items-center">
              SkySense++ (NMI 2025)
            </h3>
          </div>

          <!-- 详情图片 -->
          <div class="overflow-hidden rounded-lg mb-6">
            <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/skysense++.png" alt="SkySense++ Model Visualization" class="card-image">
          </div>

          <p class="text-gray-600 mb-6 text-base">
            A Semantic-Enhanced Multi-Modal Remote Sensing Foundation Model for Earth Observation
          </p>

          <!-- 查看选项 -->
          <div class="flex gap-4">
            <a href="https://www.nature.com/articles/s42256-025-01078-8" class="inline-flex items-center text-primary hover:text-primary/80 text-base font-medium transition-colors duration-300">
              <i class="fa fa-file-pdf-o mr-2"></i> View Paper
            </a>
            <a href="https://github.com/kang-wu/SkySensePlusPlus" class="inline-flex items-center text-gray-700 hover:text-dark text-base font-medium transition-colors duration-300">
              <i class="fa fa-github mr-2"></i> View Project
            </a>
          </div>
        </div>

        <!-- 项目 5 -->
        <div class="bg-white rounded-xl shadow-md p-8 card-hover border border-gray-100 overflow-hidden md:col-span-2 card-glow">
          <div class="flex items-center mb-5">
            <span class="bg-primary/10 text-primary font-bold w-10 h-10 rounded-full flex items-center justify-center mr-3 text-lg">5</span>
            <h3 class="font-semibold text-xl flex items-center">
              SkySenseGPT (ArXiv 2024)
            </h3>
          </div>

          <!-- 详情图片 -->
          <div class="overflow-hidden rounded-lg mb-8">
            <img src="https://github.com/zqcrafts/SkySense-O/raw/main/docs/skysenseGPT.png" alt="SkySenseGPT Model Visualization" class="w-full h-70 object-cover rounded-lg transition-transform duration-700 hover:scale-110">
          </div>

          <p class="text-gray-600 mb-6 text-base">
            A Fine-Grained Instruction Tuning Dataset and Model for Remote Sensing Vision-Language Understanding
          </p>

          <!-- 查看选项 -->
          <div class="flex gap-4">
            <a href="https://arxiv.org/pdf/2406.10100" class="inline-flex items-center text-primary hover:text-primary/80 text-base font-medium transition-colors duration-300">
              <i class="fa fa-file-pdf-o mr-2"></i> View Paper
            </a>
            <a href="https://github.com/Luo-Z13/SkySenseGPT" class="inline-flex items-center text-gray-700 hover:text-dark text-base font-medium transition-colors duration-300">
              <i class="fa fa-github mr-2"></i> View Project
            </a>
          </div>
        </div>
      </div>
    </section>

    <div class="section-divider"></div>

    <!-- 页脚 -->
    <footer class="mt-16 text-center text-white text-sm pb-8 text-shadow">
      <div class="inline-flex items-center justify-center space-x-4 mb-4">
        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-110">
          <i class="fa fa-github"></i>
        </a>
        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-110">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-110">
          <i class="fa fa-envelope"></i>
        </a>
      </div>
      <p>© 2025 SkySense Project. All rights reserved.</p>
    </footer>
  </div>

  <!-- 交互效果脚本 -->
  <script>
    // 平滑滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href'))?.scrollIntoView({
          behavior: 'smooth'
        });
      });
    });

    // 页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有卡片添加淡入效果
      const cards = document.querySelectorAll('.card-hover');
      cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

        setTimeout(() => {
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }, 100 + index * 100);
      });
    });

    // 图片加载错误处理
    document.querySelectorAll('img').forEach(img => {
      img.addEventListener('error', function() {
        // 对于背景图片的错误处理
        if(this.closest('.fixed.inset-0')) {
          this.src = 'https://picsum.photos/id/1018/1920/1080';
          this.alt = 'Earth from space (fallback)';
        }
        // 对于会议logo的错误处理
        else if(this.classList.contains('conference-logo')) {
          this.src = `https://picsum.photos/id/${Math.floor(Math.random() * 10) + 30}/60/30`;
        }
        // 对于卡片详情图片的错误处理
        else if(this.classList.contains('card-image')) {
          this.src = `https://picsum.photos/id/${Math.floor(Math.random() * 10) + 40}/${this.closest('.md:col-span-2') ? '800/200' : '400/200'}`;
        }
        // 对于Overview图片的错误处理
        else if(this.closest('section h2').textContent === 'Overview') {
          this.src = 'https://picsum.photos/id/35/600/400';
          this.alt = 'SkySense Overview Visualization (placeholder)';
        }
      }
    });
  </script>
</body>

</html>