feat(index): 更新网页内容并添加模型性能雷达图

- 在标题中添加论文链接 - 更新作者信息和机构 - 修改结果部分的图表 - 移除不必要的图片 - 在页面中添加模型性能雷达图
XavierJiezou · Nov 20, 2024 · d84e31f · d84e31f
1 parent 49820aa
commit d84e31f
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -104,6 +104,7 @@
   <link rel="icon" href="./static/images/favicon.svg">
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
   <script defer src="./static/js/fontawesome.all.min.js"></script>
   <script src="./static/js/bulma-carousel.min.js"></script>
   <script src="./static/js/bulma-slider.min.js"></script>
@@ -118,17 +119,18 @@
       <div class="container is-max-desktop">
         <div class="columns is-centered">
           <div class="column has-text-centered">
-            <h1 class="title is-1 publication-title">Adapting Vision Foundation Models for Robust </br>Cloud Segmentation in Remote Sensing Images</h1>
+            <h1 class="title is-1 publication-title"><a href="https://ieeexplore.ieee.org/document/10436560">Adapting
+                Vision Foundation Models for Robust Cloud Segmentation in Remote Sensing Images</a></h1>
             <div class="is-size-5 publication-authors">
               <!-- Paper authors -->
               <span class="author-block">
                 <a href="https://scholar.google.com/citations?user=po1KXtwAAAAJ&hl=en" target="_blank">Xuechao
                   Zou</a><sup>1,*</sup>,</span>
               <span class="author-block">
                 <a href="https://github.com/caixiaoshun/caixiaoshun" target="_blank">Shun
-                  Zhang</a><sup>2,*</sup>,</span>
+                  Zhang</a><sup>1,*</sup>,</span>
               <span class="author-block">
-                <a href="https://cslikai.cn/" target="_blank">Kai Li</a><sup>3</sup>,</span>
+                <a href="https://cslikai.cn/" target="_blank">Kai Li</a><sup>2,*</sup>,</span>
               <span class="author-block">
                 <a href="https://cs.qhu.edu.cn/jxgz/jxysz/szgk/50127.htm" target="_blank">Shiying
                   Wang</a><sup>1</sup>,</span>
@@ -140,17 +142,17 @@ <h1 class="title is-1 publication-title">Adapting Vision Foundation Models for R
                 <a href="https://teacher.bupt.edu.cn/jinlei1/zh_CN/index/260463/list/" target="_blank">Lei
                   Jin</a><sup>3</sup>,</span>
               <span class="author-block">
-                <a href="https://faculty.bjtu.edu.cn/7968/" target="_blank">Congyan Lang</a><sup>1,†</sup>
+                <a href="https://faculty.bjtu.edu.cn/7968/" target="_blank">Congyan Lang</a><sup>1,2,†</sup>
               </span>
               <span class="author-block">
-                <a href="https://www.cs.tsinghua.edu.cn/info/1117/3542.htm" target="_blank">Pin Tao</a><sup>2,3,†</sup>
+                <a href="https://www.cs.tsinghua.edu.cn/info/1117/3542.htm" target="_blank">Pin Tao</a><sup>1,2,†</sup>
               </span>
             </div>
 
             <div class="is-size-5 publication-authors">
               <span class="author-block"><sup>1</sup>Beijing Jiaotong University, <sup>2</sup>Qinghai University,
-                <br><sup>3</sup>Tsinghua University,<sup>4</sup>Beijing University of Posts and Telecommunications
-                <!-- <br>arXiv 2024 -->
+                <br><sup>3</sup>Tsinghua University,<sup>2</sup>Beijing University of Posts and Telecommunications
+                <!-- <br>ECAI 2023 -->
               </span>
             </div>
 
@@ -283,19 +285,25 @@ <h2 class="title is-3">Method Overview</h2>
         <div class="columns is-centered has-text-centered">
           <div class="column is-four-fifths">
             <h2 class="title is-3">Results</h2>
-            <h3 class="title is-4">Visualization on the dataset</h3>
+            <h3 class="title is-4">Visualization on the datasets</h3>
             <div id="results-carousel" class="carousel results-carousel">
               <div class="item ">
-                <img src="static/images/hrc_whu_gf1_gf2.png" alt="MY ALT TEXT" />
+                <img src="static/images/hrc_whu.svg" alt="MY ALT TEXT" />
+              </div>
+              <div class="item ">
+                <img src="static/images/gf1.svg" alt="MY ALT TEXT" />
+              </div>
+              <div class="item ">
+                <img src="static/images/gf2.svg" alt="MY ALT TEXT" />
               </div>
               <div class="item">
-                <img src="static/images/l1c.png" alt="MY ALT TEXT" />
+                <img src="static/images/l1c.svg" alt="MY ALT TEXT" />
               </div>
               <div class="item">
-                <img src="static/images/l2a.png" alt="MY ALT TEXT" />
+                <img src="static/images/l2a.svg" alt="MY ALT TEXT" />
               </div>
               <div class="item">
-                <img src="static/images/l8.png" alt="MY ALT TEXT" />
+                <img src="static/images/l8.svg" alt="MY ALT TEXT" />
               </div>
             </div>
           </div>
@@ -305,19 +313,10 @@ <h3 class="title is-4">Visualization on the dataset</h3>
     </div>
   </section>
 
-  <section class="hero is-light is-small">
-    <div class="hero-body">
-      <div class="container is-max-desktop">
-        <div class="columns is-centered has-text-centered">
-          <div class="column is-four-fifths">
-            <img src="static/images/radar.png" alt="MY ALT TEXT" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    </div>
-  </section>
+  <div style="height: 500px;">
+    <div id="radar" style="height: 100%"></div>
+  </div>
+
 
   <section class="hero is-light is-small">
     <div class="hero-body">
@@ -326,7 +325,7 @@ <h3 class="title is-4">Visualization on the dataset</h3>
           <table class="tg">
             <thead>
               <tr>
-                <th class="tg-c3ow"></th>
+                <th class="tg-7btt">Methods</th>
                 <th class="tg-7btt">HRC_WHU</th>
                 <th class="tg-7btt">GF12MS_WHU_GF1</th>
                 <th class="tg-7btt">GF12MS_WHU_GF2</th>
@@ -582,6 +581,110 @@ <h2 class="title">Acknowledgements</h2>
 
   <!-- End of Statcounter Code -->
 
+  <script type="text/javascript">
+    var dom = document.getElementById('radar');
+    var myChart = echarts.init(dom, null, {
+      renderer: 'canvas',
+      useDirtyRect: false
+    });
+    var app = {};
+
+    var option;
+
+    option = {
+      // title: {
+      //   text: '模型性能雷达图',
+      //   left: 'center'
+      // },
+      legend: {
+        bottom: 10, // 将图例放在下方
+        data: [
+          'Cloud-Adapter',
+          'SCNN',
+          'CDNetv1',
+          'CDNetv2',
+          'MCDNet',
+          'UNetMobv2',
+          'DBNet',
+          'HRCloudNet',
+          'KappaMask'
+        ]
+      },
+      radar: {
+        indicator: [
+          { name: '{b|HRC}', max: 100 },
+          { name: '{b|GF1}', max: 100 },
+          { name: '{b|GF2}', max: 100 },
+          { name: '{b|L1C}', max: 100 },
+          { name: '{b|L2A}', max: 100 },
+          { name: '{b|L8B}', max: 100 }
+        ],
+        name: {
+          rich: {
+            b: {
+              fontWeight: 'bold',
+              fontSize: 14,
+              color: 'black'
+            }
+          }
+        }
+      },
+      series: [
+        {
+          name: '模型性能对比',
+          type: 'radar',
+          data: [
+            {
+              value: [89.05, 92.55, 83.02, 74.18, 73.75, 57.53],
+              name: 'Cloud-Adapter'
+            },
+            {
+              value: [57.22, 81.68, 76.99, 22.75, 28.76, 32.38],
+              name: 'SCNN'
+            },
+            {
+              value: [77.79, 81.82, 78.2, 60.35, 62.39, 34.58],
+              name: 'CDNetv1'
+            },
+            {
+              value: [76.75, 84.93, 78.84, 65.6, 66.05, 43.63],
+              name: 'CDNetv2'
+            },
+            {
+              value: [53.5, 85.16, 78.36, 44.8, 40.18, 33.85],
+              name: 'MCDNet'
+            },
+            {
+              value: [79.91, 91.71, 80.44, 71.65, 70.36, 47.76],
+              name: 'UNetMobv2'
+            },
+            {
+              value: [77.78, 91.36, 78.68, 65.52, 65.65, 51.41],
+              name: 'DBNet'
+            },
+            {
+              value: [83.44, 91.86, 75.57, 68.26, 68.35, 43.51],
+              name: 'HRCloudNet'
+            },
+            {
+              value: [67.48, 92.42, 72.0, 41.27, 45.28, 42.12],
+              name: 'KappaMask'
+            }
+          ]
+        }
+      ]
+    };
+
+
+    if (option && typeof option === 'object') {
+      myChart.setOption(option);
+    }
+
+    window.addEventListener('resize', myChart.resize);
+
+  </script>
+
+
 </body>
 
-</html>
+</html>
diff --git a/static/css/bulma.min.css b/static/css/bulma.min.css
diff --git a/static/images/gf1.svg b/static/images/gf1.svg
diff --git a/static/images/gf2.svg b/static/images/gf2.svg
diff --git a/static/images/hrc_whu.svg b/static/images/hrc_whu.svg
diff --git a/static/images/hrc_whu_gf1_gf2.png b/static/images/hrc_whu_gf1_gf2.png
diff --git a/static/images/l1c.png b/static/images/l1c.png
diff --git a/static/images/l1c.svg b/static/images/l1c.svg
diff --git a/static/images/l2a.png b/static/images/l2a.png
diff --git a/static/images/l2a.svg b/static/images/l2a.svg
diff --git a/static/images/l8.png b/static/images/l8.png
diff --git a/static/images/l8.svg b/static/images/l8.svg
diff --git a/static/images/radar.png b/static/images/radar.png