chore: import upstream snapshot with attribution

2026-07-13 13:36:15 +08:00
commit e64161ec32
892 changed files with 116950 additions and 0 deletions
@@ -0,0 +1,55 @@
+<template>
+  <div id="app">
+    <Header />
+    <router-view v-slot="{ Component }" class="component">
+      <keep-alive>
+        <component
+          :is="Component"
+          :key="$route.name"
+          v-if="$route.meta.keepAlive"
+        />
+      </keep-alive>
+      <component
+        :is="Component"
+        :key="$route.name"
+        v-if="!$route.meta.keepAlive"
+      />
+    </router-view>
+    <Footer :color="color" />
+  </div>
+</template>
+<script setup>
+import { provide, nextTick, ref, watch } from "vue";
+import Header from "./components/navBar.vue";
+import Footer from "./components/footer.vue";
+import { useRoute } from "vue-router";
+const isRouterActive = ref(true);
+const route = useRoute();
+const color = ref("#F6FAFF");
+watch(
+  () => route.path,
+  (newValue, oldValue) => {
+    color.value = route.meta.footerBg;
+  }
+);
+provide("reload", () => {
+  isRouterActive.value = false;
+  nextTick(() => {
+    isRouterActive.value = true;
+  });
+});
+</script>
+
+<style scoped>
+#app {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+</style>
@@ -0,0 +1,5 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="healthicons:chart-line">
+<path id="Vector" d="M10.7844 20.0026L5.83333 26.2742V29.667H30.625V31.1253H5.10417C4.91078 31.1253 4.72531 31.0485 4.58857 30.9118C4.45182 30.775 4.375 30.5895 4.375 30.3962V5.60449H5.83333V23.9212L9.71979 18.9986C9.56983 18.7056 9.48792 18.3825 9.48016 18.0535C9.4724 17.7244 9.53899 17.3978 9.67498 17.0981C9.81097 16.7984 10.0128 16.5332 10.2656 16.3223C10.5183 16.1114 10.8153 15.9603 11.1346 15.8802C11.4538 15.8001 11.787 15.793 12.1094 15.8596C12.4317 15.9261 12.7349 16.0646 12.9963 16.2646C13.2577 16.4646 13.4706 16.721 13.6191 17.0147C13.7677 17.3084 13.848 17.6319 13.8542 17.9609L18.6907 19.5724C18.9759 19.2052 19.3708 18.9386 19.8181 18.8113C20.2653 18.6841 20.7414 18.703 21.1772 18.8651L25.8278 13.2848C25.5641 12.8412 25.4658 12.3187 25.5501 11.8096C25.6344 11.3005 25.896 10.8376 26.2886 10.5027C26.6812 10.1678 27.1796 9.98253 27.6956 9.97958C28.2117 9.97662 28.7121 10.1562 29.1086 10.4866C29.505 10.8169 29.7719 11.2768 29.862 11.7849C29.9522 12.293 29.8598 12.8166 29.6012 13.2632C29.3426 13.7098 28.9345 14.0506 28.4489 14.2253C27.9634 14.4 27.4317 14.3975 26.9478 14.2181L22.2972 19.7992C22.4682 20.0872 22.5708 20.4106 22.5971 20.7446C22.6233 21.0785 22.5725 21.414 22.4486 21.7252C22.3247 22.0364 22.131 22.315 21.8824 22.5395C21.6338 22.764 21.337 22.9284 21.0148 23.0201C20.6926 23.1117 20.3537 23.1282 20.0242 23.0681C19.6946 23.0081 19.3833 22.8731 19.1141 22.6737C18.845 22.4744 18.6252 22.2158 18.4718 21.918C18.3183 21.6203 18.2353 21.2913 18.2292 20.9564L13.3926 19.3449C13.0936 19.7299 12.6744 20.0038 12.2018 20.123C11.7291 20.2422 11.2302 20.1998 10.7844 20.0026Z" fill="black"/>
+</g>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-park-outline:finance">
+<g id="Group">
+<path id="Vector" d="M17.4998 32.5834C25.5542 32.5834 32.0832 26.0544 32.0832 18C32.0832 9.94565 25.5542 3.41669 17.4998 3.41669C9.44546 3.41669 2.9165 9.94565 2.9165 18C2.9165 26.0544 9.44546 32.5834 17.4998 32.5834Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
+<path id="Vector_2" d="M13.125 16.5417H21.875M13.125 20.9167H21.875M17.5058 16.5417V25.2917M21.875 11.4375L17.5 15.8125L13.125 11.4375" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fluent-mdl2:medical" clip-path="url(#clip0_2237_3552)">
+<path id="Vector" d="M29.5312 11.4375C30.2832 11.4375 30.9896 11.5799 31.6504 11.8647C32.3112 12.1496 32.8866 12.5426 33.3765 13.0439C33.8664 13.5452 34.2594 14.1263 34.5557 14.7871C34.8519 15.4479 35 16.1543 35 16.9062C35 17.5557 34.8918 18.1766 34.6753 18.769C34.4588 19.3615 34.1569 19.8913 33.7695 20.3584C33.3822 20.8255 32.9207 21.23 32.3853 21.5718C31.8498 21.9136 31.263 22.1471 30.625 22.2725V24.0156C30.625 25.0296 30.4997 26.0151 30.249 26.9722C29.9984 27.9292 29.6452 28.8407 29.1895 29.7065C28.7337 30.5724 28.1755 31.3529 27.5146 32.0479C26.8538 32.7428 26.119 33.3524 25.3101 33.8765C24.5011 34.4006 23.6182 34.7993 22.6611 35.0728C21.7041 35.3462 20.7129 35.4886 19.6875 35.5C18.6507 35.5 17.6595 35.3576 16.7139 35.0728C15.7682 34.7879 14.891 34.3892 14.082 33.8765C13.2731 33.3638 12.5382 32.7542 11.8774 32.0479C11.2166 31.3415 10.6584 30.561 10.2026 29.7065C9.74691 28.8521 9.38802 27.9463 9.12598 26.9893C8.86393 26.0322 8.73861 25.041 8.75 24.0156V20.1021C7.34863 19.9767 6.10677 19.6406 5.02441 19.0938C3.94206 18.5469 3.0249 17.8291 2.27295 16.9404C1.521 16.0518 0.957031 15.0207 0.581055 13.8472C0.205078 12.6737 0.0113932 11.4033 0 10.0361V0.5H5.46875C5.76497 0.5 6.02132 0.608236 6.23779 0.824707C6.45426 1.04118 6.5625 1.29753 6.5625 1.59375C6.5625 1.88997 6.45426 2.14632 6.23779 2.36279C6.02132 2.57926 5.76497 2.6875 5.46875 2.6875H2.1875V10.0361C2.1875 11.2438 2.3527 12.3376 2.68311 13.3174C3.01351 14.2972 3.50911 15.1346 4.16992 15.8296C4.83073 16.5246 5.62826 17.0601 6.5625 17.436C7.49674 17.812 8.5905 18 9.84375 18C10.9945 18 12.0426 17.8234 12.9883 17.4702C13.9339 17.117 14.7371 16.61 15.3979 15.9492C16.0588 15.2884 16.5771 14.4909 16.9531 13.5566C17.3291 12.6224 17.5114 11.5685 17.5 10.395V2.6875H14.2188C13.9225 2.6875 13.6662 2.57926 13.4497 2.36279C13.2332 2.14632 13.125 1.88997 13.125 1.59375C13.125 1.29753 13.2332 1.04118 13.4497 0.824707C13.6662 0.608236 13.9225 0.5 14.2188 0.5H19.6875V10.0361C19.6875 11.4033 19.4938 12.6737 19.1064 13.8472C18.7191 15.0207 18.1551 16.0518 17.4146 16.9404C16.674 17.8291 15.7625 18.5469 14.6802 19.0938C13.5978 19.6406 12.3503 19.9767 10.9375 20.1021V24.0156C10.9375 25.2347 11.154 26.4025 11.5869 27.519C12.0199 28.6356 12.6294 29.6268 13.4155 30.4927C14.2017 31.3586 15.1245 32.0422 16.1841 32.5435C17.2437 33.0448 18.4115 33.3011 19.6875 33.3125C20.9521 33.3125 22.1143 33.0562 23.1738 32.5435C24.2334 32.0308 25.1562 31.3472 25.9424 30.4927C26.7285 29.6382 27.3381 28.6527 27.771 27.5361C28.2039 26.4196 28.4261 25.2461 28.4375 24.0156V22.2725C27.7995 22.1357 27.2127 21.9022 26.6772 21.5718C26.1418 21.2414 25.6803 20.8426 25.293 20.3755C24.9056 19.9084 24.6037 19.3729 24.3872 18.769C24.1707 18.1652 24.0625 17.5443 24.0625 16.9062C24.0625 16.1543 24.2049 15.4479 24.4897 14.7871C24.7746 14.1263 25.1619 13.5509 25.6519 13.061C26.1418 12.5711 26.7228 12.1781 27.395 11.8818C28.0672 11.5856 28.7793 11.4375 29.5312 11.4375ZM29.5312 20.1875C29.987 20.1875 30.4142 20.1021 30.813 19.9312C31.2118 19.7603 31.5592 19.5267 31.8555 19.2305C32.1517 18.9342 32.3853 18.5868 32.5562 18.188C32.7271 17.7892 32.8125 17.362 32.8125 16.9062C32.8125 16.4505 32.7271 16.0233 32.5562 15.6245C32.3853 15.2257 32.1517 14.8783 31.8555 14.582C31.5592 14.2858 31.2118 14.0522 30.813 13.8813C30.4142 13.7104 29.987 13.625 29.5312 13.625C29.0755 13.625 28.6483 13.7104 28.2495 13.8813C27.8507 14.0522 27.5033 14.2858 27.207 14.582C26.9108 14.8783 26.6772 15.2257 26.5063 15.6245C26.3354 16.0233 26.25 16.4505 26.25 16.9062C26.25 17.362 26.3354 17.7892 26.5063 18.188C26.6772 18.5868 26.9108 18.9342 27.207 19.2305C27.5033 19.5267 27.8507 19.7603 28.2495 19.9312C28.6483 20.1021 29.0755 20.1875 29.5312 20.1875Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_2237_3552">
+<rect width="35" height="35" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arcticons:google-earth">
+<path id="Vector" d="M17.4998 33.677C26.1581 33.677 33.1769 26.6582 33.1769 18C33.1769 9.34175 26.1581 2.32288 17.4998 2.32288C8.84162 2.32288 1.82275 9.34175 1.82275 18C1.82275 26.6582 8.84162 33.677 17.4998 33.677Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M3.25082 24.5355C2.70541 22.1059 4.13165 19.3409 6.8303 19.3409C13.3673 19.3409 14.8395 30.032 23.5282 30.032C27.8208 30.032 30.6544 26.5356 30.6544 26.5356" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M1.82604 18.0021C1.80826 17.1155 1.96848 16.2343 2.29722 15.4106C2.62596 14.587 3.11654 13.8376 3.73995 13.2068C4.36335 12.5761 5.10692 12.0768 5.92667 11.7384C6.74641 11.4001 7.62569 11.2295 8.5125 11.2369C17.4353 11.2369 17.9362 24.7622 27.1974 24.7622C30.4407 24.7622 32.1134 22.7971 32.968 20.5659" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M5.38428 8.05053C6.19433 7.18629 7.16845 6.49209 8.24976 6.00846C9.33106 5.52484 10.4979 5.26148 11.6821 5.23376C20.9542 5.23376 23.0476 18.8502 29.9368 18.8502C30.5506 18.8351 31.1546 18.6923 31.7101 18.4308C32.2656 18.1692 32.7606 17.7948 33.1633 17.3314" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M32.5938 13.7475C32.1438 13.8854 31.6755 13.9545 31.2048 13.9524C26.0729 13.9524 25.9912 2.79395 15.6269 2.79395C14.476 2.80831 13.3308 2.95685 12.2144 3.23655" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="9" height="19" viewBox="0 0 9 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M0.77445 1.24971L1.31897 0.754717L0.77445 1.24971Z" fill="currentColor" stroke="currentColor" stroke-width="6"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M25.6741 9.21699C25.8828 9.42475 26 9.70637 26 10C26 10.2936 25.8828 10.5753 25.6741 10.783L16.7595 19.6473C16.6575 19.7562 16.5344 19.8435 16.3978 19.9041C16.2611 19.9646 16.1135 19.9972 15.9639 19.9998C15.8143 20.0025 15.6656 19.9751 15.5269 19.9194C15.3881 19.8636 15.2621 19.7807 15.1563 19.6755C15.0505 19.5702 14.9671 19.4449 14.911 19.3069C14.855 19.169 14.8274 19.0212 14.8301 18.8724C14.8327 18.7236 14.8655 18.5769 14.9264 18.441C14.9873 18.3051 15.0751 18.1827 15.1846 18.0813L22.1974 11.108L1.11433 11.108C0.818788 11.108 0.535354 10.9913 0.326377 10.7835C0.117401 10.5757 -4.49959e-07 10.2939 -4.37114e-07 10C-4.24269e-07 9.70613 0.117401 9.4243 0.326377 9.2165C0.535354 9.0087 0.818788 8.89196 1.11433 8.89196L22.1974 8.89196L15.1846 1.91869C15.0751 1.81725 14.9873 1.69493 14.9264 1.55901C14.8655 1.42309 14.8327 1.27636 14.8301 1.12759C14.8274 0.97881 14.855 0.831028 14.911 0.693057C14.9671 0.555087 15.0505 0.429754 15.1563 0.324537C15.2621 0.219319 15.3881 0.136372 15.5269 0.0806432C15.6657 0.0249147 15.8143 -0.002453 15.9639 0.000172006C16.1135 0.00279701 16.2611 0.0353609 16.3978 0.0959219C16.5345 0.156483 16.6575 0.2438 16.7595 0.352664L25.6741 9.21699Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="22" height="28" viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20.9622 8.65022L13.6451 0.984647C13.4591 0.789622 13.2069 0.67993 12.9438 0.679688H9.67554C8.71049 0.679688 7.78497 1.08131 7.10258 1.79619C6.42019 2.51108 6.03682 3.48068 6.03682 4.49168V6.2244H4.38286C3.41781 6.2244 2.49229 6.62602 1.8099 7.34091C1.1275 8.0558 0.744141 9.02539 0.744141 10.0364V23.8982C0.744141 24.9092 1.1275 25.8788 1.8099 26.5937C2.49229 27.3086 3.41781 27.7102 4.38286 27.7102H13.6451C14.6101 27.7102 15.5356 27.3086 16.218 26.5937C16.9004 25.8788 17.2838 24.9092 17.2838 23.8982V22.1655H17.6146C18.5796 22.1655 19.5051 21.7638 20.1875 21.049C20.8699 20.3341 21.2533 19.3645 21.2533 18.3535V9.34331C21.2429 9.08215 21.1389 8.8347 20.9622 8.65022ZM13.9758 4.22831L17.866 8.30367H13.9758V4.22831ZM15.299 23.8982C15.299 24.3577 15.1248 24.7985 14.8146 25.1234C14.5044 25.4484 14.0837 25.6309 13.6451 25.6309H4.38286C3.9442 25.6309 3.52351 25.4484 3.21333 25.1234C2.90315 24.7985 2.7289 24.3577 2.7289 23.8982V10.0364C2.7289 9.57685 2.90315 9.13612 3.21333 8.81117C3.52351 8.48623 3.9442 8.30367 4.38286 8.30367H6.03682V18.3535C6.03682 19.3645 6.42019 20.3341 7.10258 21.049C7.78497 21.7638 8.71049 22.1655 9.67554 22.1655H15.299V23.8982ZM17.6146 20.0862H9.67554C9.23688 20.0862 8.81619 19.9036 8.50601 19.5787C8.19584 19.2537 8.02158 18.813 8.02158 18.3535V4.49168C8.02158 4.03213 8.19584 3.59141 8.50601 3.26646C8.81619 2.94151 9.23688 2.75896 9.67554 2.75896H11.9911V9.34331C11.9945 9.61792 12.1002 9.88027 12.2855 10.0745C12.4709 10.2687 12.7213 10.3793 12.9835 10.3829H19.2685V18.3535C19.2685 18.813 19.0943 19.2537 18.7841 19.5787C18.4739 19.9036 18.0532 20.0862 17.6146 20.0862Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 175">
+<circle id="Ellipse 7" cx="18.4742" cy="17.5259" r="17.5259" fill="#A9A9A9" fill-opacity="0.13"/>
+<g id="Group 174">
+<path id="Line 7" d="M11.7334 10.2777L25.556 24.1003" stroke="#A9A9A9" stroke-width="1.34815" stroke-linecap="round"/>
+<path id="Line 8" d="M25.5557 10.2775L11.733 24.1001" stroke="#A9A9A9" stroke-width="1.34815" stroke-linecap="round"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="system-uicons:write">
+<path id="Vector" d="M15.8334 29.1667H29.1667M25.8334 10.8333L27.5 12.5M28.3334 6.66667C28.6619 6.99482 28.9226 7.38453 29.1004 7.8135C29.2783 8.24247 29.3698 8.70229 29.3698 9.16667C29.3698 9.63104 29.2783 10.0909 29.1004 10.5198C28.9226 10.9488 28.6619 11.3385 28.3334 11.6667L12.5 27.5L5.83337 29.1667L7.50004 22.5933L23.34 6.67333C23.9644 6.04595 24.8018 5.67627 25.6861 5.63768C26.5703 5.59908 27.4368 5.8944 28.1134 6.465L28.3334 6.66667Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M25.7398 1.41794V8.36704C25.7389 9.25861 24.7733 9.81494 24.0016 9.36843C23.6441 9.16159 23.4238 8.78005 23.4234 8.36704V4.21351L17.2937 10.3446C16.6629 10.9754 15.5859 10.6868 15.355 9.82515C15.2478 9.42525 15.3622 8.99856 15.6549 8.70581L21.786 2.57613H17.6325C16.7409 2.57529 16.1846 1.60962 16.6311 0.83792C16.8379 0.480441 17.2195 0.260152 17.6325 0.259766H24.5816C25.2212 0.259796 25.7398 0.778324 25.7398 1.41794ZM8.70581 15.6549L2.57613 21.786V17.6325C2.57529 16.7409 1.60962 16.1846 0.83792 16.6311C0.480441 16.8379 0.260152 17.2195 0.259766 17.6325V24.5816C0.259766 25.2213 0.778283 25.7398 1.41794 25.7398H8.36704C9.25861 25.7389 9.81494 24.7733 9.36843 24.0016C9.16159 23.6441 8.78005 23.4238 8.36704 23.4234H4.21351L10.3446 17.2937C10.9754 16.6629 10.6868 15.5859 9.82515 15.355C9.42525 15.2478 8.99856 15.3622 8.70581 15.6549ZM24.5816 16.4743C23.9419 16.4743 23.4234 16.9928 23.4234 17.6325V21.786L17.2937 15.6549C16.6629 15.0241 15.5859 15.3127 15.355 16.1744C15.2478 16.5743 15.3622 17.001 15.6549 17.2937L21.786 23.4234H17.6325C16.7409 23.4242 16.1846 24.3899 16.6311 25.1616C16.8379 25.5191 17.2195 25.7394 17.6325 25.7398H24.5816C25.2212 25.7397 25.7398 25.2212 25.7398 24.5816V17.6325C25.7398 16.9929 25.2212 16.4743 24.5816 16.4743ZM4.21351 2.57613H8.36704C9.25861 2.57529 9.81494 1.60962 9.36843 0.83792C9.16159 0.480441 8.78005 0.260152 8.36704 0.259766H1.41794C0.778283 0.259735 0.259766 0.778283 0.259766 1.41794V8.36704C0.260598 9.25861 1.22628 9.81494 1.99798 9.36843C2.35546 9.16159 2.57575 8.78005 2.57613 8.36704V4.21351L8.70581 10.3446C9.33659 10.9754 10.4137 10.6868 10.6446 9.82515C10.7517 9.42525 10.6374 8.99856 10.3446 8.70581L4.21351 2.57613Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="34" height="18" viewBox="0 0 34 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M0.333008 8.90987C0.333008 4.32154 4.12634 0.666535 8.72467 0.666535C10.0648 0.663633 11.3863 0.979502 12.5803 1.58807C13.7742 2.19663 14.8063 3.08044 15.5913 4.16654L16.9997 6.1382L18.4097 4.16987C19.1932 3.0824 20.2247 2.19735 21.4186 1.58809C22.6124 0.978836 23.9343 0.66292 25.2747 0.666535C29.8747 0.666535 33.6663 4.32154 33.6663 8.90987V9.08987C33.6663 13.6782 29.873 17.3332 25.2747 17.3332C23.9343 17.3375 22.6123 17.0222 21.4181 16.4135C20.224 15.8048 19.1921 14.9203 18.408 13.8332L16.9997 11.8615L15.5897 13.8299C14.8061 14.9173 13.7747 15.8024 12.5808 16.4116C11.3869 17.0209 10.065 17.3368 8.72467 17.3332C4.12467 17.3332 0.333008 13.6782 0.333008 9.08987V8.90987ZM14.9497 8.99987L12.8797 6.1082C12.4044 5.45198 11.7796 4.91845 11.057 4.55181C10.3344 4.18517 9.53493 3.99596 8.72467 3.99987C5.89634 3.99987 3.66634 6.2332 3.66634 8.90987V9.08987C3.66634 11.7665 5.89634 13.9999 8.72467 13.9999C10.3913 13.9999 11.9413 13.2049 12.8797 11.8915L14.9497 8.99987ZM19.0497 8.99987L21.1197 11.8915C21.595 12.5478 22.2198 13.0813 22.9423 13.4479C23.6649 13.8146 24.4644 14.0038 25.2747 13.9999C28.103 13.9999 30.333 11.7665 30.333 9.08987V8.90987C30.333 6.2332 28.103 3.99987 25.2747 3.99987C23.608 3.99987 22.058 4.79487 21.1197 6.1082L19.0497 8.99987Z" fill="#2B2B2B"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 177">
+<circle id="Ellipse 6" cx="17.5259" cy="17.5259" r="17.5259" fill="#A9A9A9" fill-opacity="0.13"/>
+<g id="Group 176">
+<path id="Line 5" d="M12.8076 7.41479L12.8076 26.9629" stroke="#A9A9A9" stroke-width="1.34815" stroke-linecap="round"/>
+<path id="Line 6" d="M21.5703 7.41504L21.5703 26.9632" stroke="#A9A9A9" stroke-width="1.34815" stroke-linecap="round"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Union">
+<path d="M18.6096 0H8.19863C7.98301 0 7.80822 0.174793 7.80822 0.390411C7.80822 1.10913 8.39086 1.69176 9.10957 1.69176H16.0068C16.7256 1.69176 17.3082 2.27441 17.3082 2.99313V9.8904C17.3082 10.6091 17.8909 11.1918 18.6096 11.1918C18.8252 11.1918 19 11.017 19 10.8014V0.390411C19 0.174793 18.8252 0 18.6096 0Z" fill="currentColor"/>
+<path d="M14.7055 5.59587V12.4931C14.7055 13.2119 15.2881 13.7945 16.0068 13.7945C16.2225 13.7945 16.3973 13.6197 16.3973 13.4041V2.99315C16.3973 2.94396 16.3882 2.8969 16.3716 2.85356C16.3336 2.75438 16.2563 2.67465 16.1588 2.6334C16.1121 2.61365 16.0607 2.60272 16.0068 2.60272L5.59589 2.60274C5.38027 2.60274 5.20548 2.77753 5.20548 2.99315C5.20548 3.71187 5.78812 4.2945 6.50683 4.2945H13.4041C14.1228 4.2945 14.7055 4.87715 14.7055 5.59587Z" fill="currentColor"/>
+<path d="M13.7882 5.52585C13.7831 5.49734 13.7748 5.4699 13.7638 5.44391C13.7217 5.34436 13.6395 5.26591 13.5374 5.22882C13.496 5.21382 13.4507 5.20546 13.4041 5.20546L2.99315 5.20548C2.77753 5.20548 2.60274 5.38027 2.60274 5.59589C2.60274 6.31461 3.18538 6.89724 3.90409 6.89724H10.8014C11.5201 6.89724 12.1027 7.47989 12.1027 8.19862V15.0959C12.1027 15.8146 12.6854 16.3973 13.4041 16.3973C13.6197 16.3973 13.7945 16.2225 13.7945 16.0068V5.59589C13.7945 5.57198 13.7924 5.54857 13.7882 5.52585Z" fill="currentColor"/>
+<path d="M10.9395 7.83333C10.8965 7.81709 10.85 7.8082 10.8014 7.8082L0.390411 7.80822C0.174793 7.80822 0 7.98301 0 8.19863V18.6096C0 18.8252 0.174793 19 0.390411 19H10.8014C11.017 19 11.1918 18.8252 11.1918 18.6096V8.19863C11.1918 8.14472 11.1808 8.09336 11.1611 8.04665C11.1196 7.94865 11.0393 7.8711 10.9395 7.83333Z" fill="currentColor"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M4.29467 0C3.60844 0 2.94321 0.0627942 2.31922 0.132426C1.17029 0.260638 0.248466 1.18194 0.12516 2.33579C0.058702 2.95768 0 3.61839 0 4.29961C0 4.98085 0.0587021 5.64156 0.12516 6.26345C0.248466 7.4173 1.17029 8.3386 2.31922 8.46681C2.94321 8.53644 3.60844 8.59923 4.29467 8.59923C4.61581 8.59923 4.93235 8.58548 5.24221 8.56372C5.56376 7.84694 6.00624 7.18253 6.58892 6.59919C7.17274 6.01468 7.83786 5.57109 8.55544 5.24902C8.57625 4.93842 8.58934 4.6213 8.58934 4.29961C8.58934 3.61839 8.53063 2.95768 8.46418 2.33579C8.34088 1.18194 7.41904 0.26064 6.27012 0.132426C5.64613 0.0627942 4.9809 0 4.29467 0ZM4.29467 10.3946C4.42637 10.3946 4.5573 10.3969 4.68733 10.4012C4.59138 10.9474 4.54667 11.5078 4.54667 12.0726C4.54667 14.1054 5.12584 16.0811 6.58892 17.5459C6.88661 17.844 7.20544 18.1054 7.54158 18.3327C7.18399 18.6187 6.74658 18.8083 6.27012 18.8614C5.64613 18.9311 4.9809 18.9939 4.29467 18.9939C3.60844 18.9939 2.94321 18.9311 2.31922 18.8614C1.17029 18.7332 0.248466 17.8119 0.12516 16.6581C0.0587021 16.0362 0 15.3755 0 14.6943C0 14.013 0.058702 13.3523 0.12516 12.7304C0.248466 11.5766 1.17029 10.6553 2.31922 10.5271C2.94321 10.4574 3.60844 10.3946 4.29467 10.3946ZM18.8748 6.26345C18.8221 6.75727 18.623 7.20849 18.3225 7.57318C18.0923 7.22921 17.8268 6.90319 17.5231 6.59919C16.06 5.13442 14.0864 4.55458 12.056 4.55458C11.5023 4.55458 10.9528 4.59769 10.4168 4.69012C10.4128 4.5608 10.4107 4.43059 10.4107 4.29961C10.4107 3.61839 10.4694 2.95768 10.5358 2.33579C10.6591 1.18194 11.581 0.260638 12.7299 0.132426C13.3539 0.0627942 14.0191 0 14.7053 0C15.3916 0 16.0567 0.0627942 16.6808 0.132426C17.8298 0.260638 18.7515 1.18194 18.8748 2.33579C18.9413 2.95768 19 3.61839 19 4.29961C19 4.98085 18.9413 5.64156 18.8748 6.26345ZM9.24387 9.25719C8.67523 9.82648 8.30134 10.7303 8.30134 12.0726C8.30134 13.4148 8.67523 14.3186 9.24387 14.888C9.8125 15.4573 10.7153 15.8315 12.056 15.8315C13.3967 15.8315 14.2996 15.4573 14.8681 14.888C15.4368 14.3186 15.8107 13.4148 15.8107 12.0726C15.8107 10.7303 15.4368 9.82648 14.8681 9.25719C14.2996 8.6879 13.3967 8.31358 12.056 8.31358C10.7153 8.31358 9.8125 8.6879 9.24387 9.25719ZM7.79571 7.80737C8.85183 6.75004 10.3383 6.26322 12.056 6.26322C13.7736 6.26322 15.2602 6.75004 16.3163 7.80737C17.3724 8.8647 17.8587 10.3529 17.8587 12.0726C17.8587 13.3943 17.5715 14.5793 16.959 15.537L18.67 17.25C19.0699 17.6503 19.0699 18.2994 18.67 18.6997C18.2701 19.1001 17.6217 19.1001 17.2218 18.6997L15.5097 16.9856C14.5542 17.5957 13.373 17.8819 12.056 17.8819C10.3383 17.8819 8.85183 17.3951 7.79571 16.3377C6.7396 15.2804 6.25334 13.7923 6.25334 12.0726C6.25334 10.3529 6.7396 8.8647 7.79571 7.80737Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="prime:upload">
+<path id="Vector" d="M26.5708 30.2604H8.42915C7.92342 30.2398 7.42672 30.1196 6.96747 29.9068C6.50822 29.694 6.09544 29.3928 5.75275 29.0203C5.41006 28.6478 5.14418 28.2114 4.97032 27.736C4.79647 27.2607 4.71805 26.7557 4.73956 26.25V21.875C4.73956 21.5849 4.8548 21.3067 5.05991 21.1016C5.26503 20.8965 5.54323 20.7812 5.83331 20.7812C6.12339 20.7812 6.40159 20.8965 6.60671 21.1016C6.81183 21.3067 6.92706 21.5849 6.92706 21.875V26.25C6.88941 26.683 7.01987 27.1139 7.2914 27.4533C7.56292 27.7927 7.95467 28.0146 8.3854 28.0729H26.5708C27.0015 28.0146 27.3933 27.7927 27.6648 27.4533C27.9363 27.1139 28.0668 26.683 28.0291 26.25V21.875C28.0291 21.5849 28.1444 21.3067 28.3495 21.1016C28.5546 20.8965 28.8328 20.7812 29.1229 20.7812C29.413 20.7812 29.6912 20.8965 29.8963 21.1016C30.1014 21.3067 30.2166 21.5849 30.2166 21.875V26.25C30.2603 27.2641 29.9018 28.2544 29.219 29.0054C28.5362 29.7565 27.5845 30.2075 26.5708 30.2604ZM23.3333 12.7604C23.1896 12.7611 23.0472 12.7331 22.9145 12.678C22.7818 12.6229 22.6614 12.5418 22.5604 12.4396L17.5 7.37916L12.4396 12.4396C12.2322 12.6328 11.958 12.738 11.6746 12.733C11.3913 12.728 11.1209 12.6132 10.9205 12.4128C10.7201 12.2124 10.6053 11.942 10.6003 11.6587C10.5953 11.3753 10.7005 11.1011 10.8937 10.8937L16.7271 5.06041C16.9321 4.85559 17.2101 4.74054 17.5 4.74054C17.7898 4.74054 18.0678 4.85559 18.2729 5.06041L24.1062 10.8937C24.3111 11.0988 24.4261 11.3768 24.4261 11.6667C24.4261 11.9565 24.3111 12.2345 24.1062 12.4396C24.0052 12.5418 23.8849 12.6229 23.7521 12.678C23.6194 12.7331 23.477 12.7611 23.3333 12.7604Z" fill="currentColor"/>
+<path id="Vector_2" d="M17.5 22.9687C17.2111 22.965 16.9351 22.8485 16.7308 22.6442C16.5265 22.4399 16.41 22.1639 16.4062 21.875V5.83333C16.4062 5.54325 16.5215 5.26505 16.7266 5.05993C16.9317 4.85481 17.2099 4.73958 17.5 4.73958C17.7901 4.73958 18.0683 4.85481 18.2734 5.05993C18.4785 5.26505 18.5938 5.54325 18.5938 5.83333V21.875C18.59 22.1639 18.4735 22.4399 18.2692 22.6442C18.0649 22.8485 17.7889 22.965 17.5 22.9687Z" fill="currentColor"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="11" height="18" viewBox="0 0 11 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M10.2638 9.5296L1.77781 17.298C1.63622 17.4277 1.4481 17.5 1.25248 17.5C1.05686 17.5 0.868743 17.4277 0.72715 17.298L0.718013 17.2892C0.649133 17.2263 0.594286 17.1507 0.556807 17.0668C0.519327 16.9829 0.5 16.8926 0.5 16.8013C0.5 16.71 0.519327 16.6197 0.556807 16.5358C0.594286 16.4519 0.649133 16.3763 0.718013 16.3134L8.70915 8.99854L0.718012 1.68661C0.649132 1.62374 0.594285 1.54807 0.556806 1.46419C0.519326 1.38031 0.499999 1.28999 0.499999 1.19871C0.499999 1.10743 0.519326 1.01711 0.556806 0.933228C0.594285 0.849352 0.649132 0.773678 0.718012 0.710808L0.727149 0.702031C0.868742 0.572346 1.05686 0.5 1.25248 0.5C1.4481 0.5 1.63622 0.572346 1.77781 0.702031L10.2638 8.4704C10.3385 8.53872 10.3979 8.62089 10.4385 8.71192C10.4791 8.80296 10.5 8.90096 10.5 9C10.5 9.09904 10.4791 9.19705 10.4385 9.28808C10.3979 9.37911 10.3385 9.46128 10.2638 9.5296Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1730451372035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1445" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M153 294.6l351.5 351.5c1.9 1.9 4.5 3.1 7.5 3.1s5.6-1.2 7.6-3.2L871 294.6c13.9-13.9 36.7-13.9 50.6 0 13.9 13.9 13.9 36.7 0 50.6L537.3 729.4c-13.9 13.9-36.7 13.9-50.6 0-0.1-0.1-0.1-0.1-0.1-0.2L102.4 345.1c-13.9-13.9-13.9-36.7 0-50.6 13.9-13.8 36.7-13.8 50.6 0.1z" p-id="1446"></path><path d="M501.8 641.2c0-0.2-0.1-0.3-0.1-0.5 0 0.2 0 0.3 0.1 0.5zM502.4 642.9c0-0.1-0.1-0.1-0.1-0.2 0 0.1 0 0.1 0.1 0.2zM501.4 638.6v0z" p-id="1447"></path></svg>
@@ -0,0 +1,10 @@
+<svg width="61" height="73" viewBox="0 0 61 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M58.73 14.793L45.77 1.77757C45.2118 1.21366 44.548 0.766276 43.8169 0.461195C43.0858 0.156114 42.3017 -0.000628148 41.51 1.89184e-06H6.5C4.9087 1.89184e-06 3.38258 0.634845 2.25736 1.76487C1.13214 2.8949 0.5 4.42754 0.5 6.02564V66.2821C0.5 67.8802 1.13214 69.4128 2.25736 70.5428C3.38258 71.6729 4.9087 72.3077 6.5 72.3077H54.5C56.0913 72.3077 57.6174 71.6729 58.7426 70.5428C59.8679 69.4128 60.5 67.8802 60.5 66.2821V19.0712C60.5006 18.276 60.3446 17.4887 60.0408 16.7544C59.737 16.0201 59.2915 15.3535 58.73 14.793ZM27.08 57.2436C26.6543 57.6595 26.0839 57.8922 25.49 57.8922C24.8961 57.8922 24.3257 57.6595 23.9 57.2436L13.85 46.3071C13.4747 45.8959 13.2666 45.3584 13.2666 44.8006C13.2666 44.2429 13.4747 43.7054 13.85 43.2942L23.87 32.5083C24.2914 32.1999 24.8064 32.048 25.327 32.0786C25.8476 32.1092 26.3414 32.3205 26.724 32.6763C27.1066 33.0321 27.3543 33.5104 27.4247 34.0293C27.4951 34.5482 27.3839 35.0755 27.11 35.5212L19.07 44.2583C18.9414 44.3976 18.8699 44.5806 18.8699 44.7705C18.8699 44.9605 18.9414 45.1434 19.07 45.2827L27.14 53.9897C27.3578 54.2024 27.5299 54.4576 27.6455 54.7397C27.7611 55.0218 27.8179 55.3247 27.8123 55.6297C27.8067 55.9347 27.7388 56.2353 27.6128 56.5129C27.4869 56.7905 27.3055 57.0392 27.08 57.2436ZM47.15 46.4276L37.13 57.1833C36.7118 57.542 36.1799 57.739 35.63 57.739C35.0801 57.739 34.5482 57.542 34.13 57.1833C33.7086 56.7597 33.472 56.1853 33.472 55.5865C33.472 54.9877 33.7086 54.4134 34.13 53.9897L41.93 45.1923C42.0586 45.053 42.1301 44.8701 42.1301 44.6801C42.1301 44.4902 42.0586 44.3072 41.93 44.168L33.86 35.5513C33.4386 35.1276 33.202 34.5533 33.202 33.9545C33.202 33.3557 33.4386 32.7814 33.86 32.3577C34.2819 31.9345 34.8537 31.6969 35.45 31.6969C36.0462 31.6969 36.6181 31.9345 37.04 32.3577L47.03 43.1436C47.2458 43.3427 47.4201 43.5828 47.543 43.85C47.666 44.1172 47.735 44.4061 47.7461 44.7002C47.7573 44.9943 47.7104 45.2877 47.608 45.5635C47.5057 45.8393 47.35 46.092 47.15 46.3071V46.4276Z" fill="url(#paint0_linear_1044_4756)" fill-opacity="0.6"/>
+<defs>
+<linearGradient id="paint0_linear_1044_4756" x1="30.5" y1="0" x2="30.5" y2="72.3077" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3563FF"/>
+<stop offset="0.51" stop-color="#6B52FF"/>
+<stop offset="1" stop-color="#9146FF"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="60" height="73" viewBox="0 0 60 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M58.23 15.293L45.27 2.27757C44.7118 1.71366 44.048 1.26628 43.3169 0.961195C42.5858 0.656114 41.8017 0.499372 41.01 0.500002H6C4.4087 0.500002 2.88258 1.13484 1.75736 2.26487C0.632141 3.3949 0 4.92754 0 6.52564V66.7821C0 68.3802 0.632141 69.9128 1.75736 71.0428C2.88258 72.1729 4.4087 72.8077 6 72.8077H54C55.5913 72.8077 57.1174 72.1729 58.2426 71.0428C59.3679 69.9128 60 68.3802 60 66.7821V19.5712C60.0006 18.776 59.8446 17.9887 59.5408 17.2544C59.237 16.5201 58.7915 15.8535 58.23 15.293ZM26.58 57.7436C26.1543 58.1595 25.5839 58.3922 24.99 58.3922C24.3961 58.3922 23.8257 58.1595 23.4 57.7436L13.35 46.8071C12.9747 46.3959 12.7666 45.8584 12.7666 45.3006C12.7666 44.7429 12.9747 44.2054 13.35 43.7942L23.37 33.0083C23.7914 32.6999 24.3064 32.548 24.827 32.5786C25.3476 32.6092 25.8414 32.8205 26.224 33.1763C26.6066 33.5321 26.8543 34.0104 26.9247 34.5293C26.9951 35.0482 26.8839 35.5755 26.61 36.0212L18.57 44.7583C18.4414 44.8976 18.3699 45.0806 18.3699 45.2705C18.3699 45.4605 18.4414 45.6434 18.57 45.7827L26.64 54.4897C26.8578 54.7024 27.0299 54.9576 27.1455 55.2397C27.2611 55.5218 27.3179 55.8247 27.3123 56.1297C27.3067 56.4347 27.2388 56.7353 27.1128 57.0129C26.9869 57.2905 26.8055 57.5392 26.58 57.7436ZM46.65 46.9276L36.63 57.6833C36.2118 58.042 35.6799 58.239 35.13 58.239C34.5801 58.239 34.0482 58.042 33.63 57.6833C33.2086 57.2597 32.972 56.6853 32.972 56.0865C32.972 55.4877 33.2086 54.9134 33.63 54.4897L41.43 45.6923C41.5586 45.553 41.6301 45.3701 41.6301 45.1801C41.6301 44.9902 41.5586 44.8072 41.43 44.668L33.36 36.0513C32.9386 35.6276 32.702 35.0533 32.702 34.4545C32.702 33.8557 32.9386 33.2814 33.36 32.8577C33.7819 32.4345 34.3537 32.1969 34.95 32.1969C35.5462 32.1969 36.1181 32.4345 36.54 32.8577L46.53 43.6436C46.7458 43.8427 46.9201 44.0828 47.043 44.35C47.166 44.6172 47.235 44.9061 47.2461 45.2002C47.2573 45.4943 47.2104 45.7877 47.108 46.0635C47.0057 46.3393 46.85 46.592 46.65 46.8071V46.9276Z" fill="url(#paint0_linear_1111_511)"/>
+<defs>
+<linearGradient id="paint0_linear_1111_511" x1="30" y1="0.5" x2="30" y2="72.8077" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3563FF"/>
+<stop offset="0.51" stop-color="#6B52FF"/>
+<stop offset="1" stop-color="#9146FF"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg width="54" height="67" viewBox="0 0 54 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Description-Fill--Streamline-Sharp-Fill-Material-Symbols.svg" clip-path="url(#clip0_1171_4407)">
+<path id="Vector" d="M15.9569 52.7402H38.0783C39.4873 52.7402 40.6145 51.6218 40.6145 50.2238C40.6145 48.8258 39.4873 47.7074 38.0783 47.7074H15.9569C14.5479 47.7074 13.4207 48.8258 13.4207 50.2238C13.4207 51.6218 14.5479 52.7402 15.9569 52.7402ZM15.9569 38.5154H38.0783C39.4873 38.5154 40.6145 37.397 40.6145 35.999C40.6145 34.6009 39.4873 33.4825 38.0783 33.4825H15.9569C14.5479 33.4825 13.4207 34.6009 13.4207 35.999C13.4207 37.397 14.5479 38.5154 15.9569 38.5154ZM0 64.4836V2.51643C0 1.11841 1.1272 0 2.5362 0H34.4853C35.1546 0 35.7887 0.279604 36.2818 0.733959L53.2955 17.615C53.7534 18.0694 54.0352 18.7334 54.0352 19.3975V64.4836C54.0352 65.8816 52.908 67 51.499 67H2.5362C1.1272 67 0 65.8816 0 64.4836ZM35.5421 20.5858H42.7632C45.0176 20.5858 46.1448 17.8597 44.5245 16.2869L37.3033 9.22692C35.7182 7.65415 33.0059 8.77256 33.0059 11.0094V18.0694C33.0059 19.4674 34.1331 20.5858 35.5421 20.5858Z" fill="url(#paint0_linear_1171_4407)" fill-opacity="0.6"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1171_4407" x1="27.0176" y1="0" x2="27.0176" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3563FF"/>
+<stop offset="0.5" stop-color="#6B52FF"/>
+<stop offset="1" stop-color="#9146FF"/>
+</linearGradient>
+<clipPath id="clip0_1171_4407">
+<rect width="54" height="67" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg width="54" height="67" viewBox="0 0 54 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Description-Fill--Streamline-Sharp-Fill-Material-Symbols.svg" clip-path="url(#clip0_1171_4422)">
+<path id="Vector" d="M15.9569 52.7402H38.0783C39.4873 52.7402 40.6145 51.6218 40.6145 50.2238C40.6145 48.8258 39.4873 47.7074 38.0783 47.7074H15.9569C14.5479 47.7074 13.4207 48.8258 13.4207 50.2238C13.4207 51.6218 14.5479 52.7402 15.9569 52.7402ZM15.9569 38.5154H38.0783C39.4873 38.5154 40.6145 37.397 40.6145 35.999C40.6145 34.6009 39.4873 33.4825 38.0783 33.4825H15.9569C14.5479 33.4825 13.4207 34.6009 13.4207 35.999C13.4207 37.397 14.5479 38.5154 15.9569 38.5154ZM0 64.4836V2.51643C0 1.11841 1.1272 0 2.5362 0H34.4853C35.1546 0 35.7887 0.279604 36.2818 0.733959L53.2955 17.615C53.7534 18.0694 54.0352 18.7334 54.0352 19.3975V64.4836C54.0352 65.8816 52.908 67 51.499 67H2.5362C1.1272 67 0 65.8816 0 64.4836ZM35.5421 20.5858H42.7632C45.0176 20.5858 46.1448 17.8597 44.5245 16.2869L37.3033 9.22692C35.7182 7.65415 33.0059 8.77256 33.0059 11.0094V18.0694C33.0059 19.4674 34.1331 20.5858 35.5421 20.5858Z" fill="url(#paint0_linear_1171_4422)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1171_4422" x1="27.0176" y1="0" x2="27.0176" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3563FF"/>
+<stop offset="0.5" stop-color="#6B52FF"/>
+<stop offset="1" stop-color="#9146FF"/>
+</linearGradient>
+<clipPath id="clip0_1171_4422">
+<rect width="54" height="67" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 23.0002H22.5V25.0002H14.5V23.0002ZM10.5 23.0002H12.5V25.0002H10.5V23.0002ZM14.5 18.0002H22.5V20.0002H14.5V18.0002ZM10.5 18.0002H12.5V20.0002H10.5V18.0002ZM14.5 13.0002H22.5V15.0002H14.5V13.0002ZM10.5 13.0002H12.5V15.0002H10.5V13.0002Z" fill="black"/>
+<path d="M25.5 5.00024H22.5V4.00024C22.5 3.46981 22.2893 2.9611 21.9142 2.58603C21.5391 2.21096 21.0304 2.00024 20.5 2.00024H12.5C11.9696 2.00024 11.4609 2.21096 11.0858 2.58603C10.7107 2.9611 10.5 3.46981 10.5 4.00024V5.00024H7.5C6.96957 5.00024 6.46086 5.21096 6.08579 5.58603C5.71071 5.9611 5.5 6.46981 5.5 7.00024V28.0002C5.5 28.5307 5.71071 29.0394 6.08579 29.4145C6.46086 29.7895 6.96957 30.0002 7.5 30.0002H25.5C26.0304 30.0002 26.5391 29.7895 26.9142 29.4145C27.2893 29.0394 27.5 28.5307 27.5 28.0002V7.00024C27.5 6.46981 27.2893 5.9611 26.9142 5.58603C26.5391 5.21096 26.0304 5.00024 25.5 5.00024ZM12.5 4.00024H20.5V8.00024H12.5V4.00024ZM25.5 28.0002H7.5V7.00024H10.5V10.0002H22.5V7.00024H25.5V28.0002Z" fill="black"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ci:bulb">
+<path id="Vector" d="M11.2501 26.25H18.7501M15.0001 3.75C13.6473 3.74968 12.3196 4.11525 11.1576 4.80799C9.99569 5.50074 9.04273 6.49486 8.39971 7.68506C7.7567 8.87526 7.44757 10.2172 7.50507 11.5688C7.56257 12.9204 7.98456 14.2312 8.72634 15.3625C9.91884 17.1775 10.5138 18.085 10.5926 18.22C11.2801 19.4263 11.1538 19.0012 11.2401 20.3875C11.2501 20.5425 11.2501 20.7787 11.2501 21.25C11.2501 21.5815 11.3818 21.8995 11.6162 22.1339C11.8506 22.3683 12.1686 22.5 12.5001 22.5H17.5001C17.8316 22.5 18.1496 22.3683 18.384 22.1339C18.6184 21.8995 18.7501 21.5815 18.7501 21.25C18.7501 20.7787 18.7501 20.5425 18.7601 20.3875C18.8476 19 18.7188 19.4263 19.4076 18.22C19.4851 18.085 20.0826 17.1775 21.2738 15.3612C22.0153 14.23 22.437 12.9193 22.4943 11.5679C22.5517 10.2165 22.2425 8.87476 21.5995 7.68477C20.9565 6.49477 20.0037 5.5008 18.8419 4.80812C17.6802 4.11543 16.3527 3.74982 15.0001 3.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="majesticons:eye-line">
+<g id="Group">
+<path id="Vector" d="M12.5 5C6.193 5 3.133 10.683 2.59 11.808C2.56098 11.8678 2.5459 11.9335 2.5459 12C2.5459 12.0665 2.56098 12.1322 2.59 12.192C3.132 13.317 6.192 19 12.5 19C18.808 19 21.867 13.317 22.41 12.192C22.439 12.1322 22.4541 12.0665 22.4541 12C22.4541 11.9335 22.439 11.8678 22.41 11.808C21.868 10.683 18.808 5 12.5 5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12.5 15C14.1569 15 15.5 13.6569 15.5 12C15.5 10.3431 14.1569 9 12.5 9C10.8431 9 9.5 10.3431 9.5 12C9.5 13.6569 10.8431 15 12.5 15Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fluent:search-24-regular">
+<path id="Vector" d="M3.37238 9.74055C3.37238 7.91908 4.09598 6.17221 5.384 4.88424C6.67201 3.59626 8.41894 2.87269 10.2405 2.87269C12.062 2.87269 13.8089 3.59626 15.0969 4.88424C16.385 6.17221 17.1086 7.91908 17.1086 9.74055C17.1086 11.562 16.385 13.3089 15.0969 14.5969C13.8089 15.8848 12.062 16.6084 10.2405 16.6084C8.41894 16.6084 6.67201 15.8848 5.384 14.5969C4.09598 13.3089 3.37238 11.562 3.37238 9.74055ZM10.2405 0.999634C8.84271 0.999752 7.46536 1.33505 6.22396 1.9774C4.98256 2.61976 3.91331 3.55043 3.10589 4.69136C2.29848 5.83229 1.77645 7.15021 1.5836 8.53455C1.39075 9.91889 1.5327 11.3293 1.99754 12.6475C2.46238 13.9656 3.23656 15.1531 4.25513 16.1102C5.27371 17.0674 6.50698 17.7664 7.85148 18.1485C9.19599 18.5306 10.6125 18.5847 11.9823 18.3063C13.352 18.0279 14.635 17.4251 15.7237 16.5485L22.3782 23.2016C22.464 23.2936 22.5674 23.3674 22.6823 23.4186C22.7972 23.4697 22.9212 23.4973 23.0469 23.4995C23.1727 23.5017 23.2976 23.4786 23.4142 23.4315C23.5308 23.3844 23.6368 23.3143 23.7257 23.2253C23.8146 23.1364 23.8847 23.0305 23.9318 22.9139C23.9789 22.7972 24.0021 22.6723 23.9999 22.5466C23.9976 22.4208 23.9701 22.2968 23.9189 22.1819C23.8677 22.0671 23.7939 21.9637 23.7019 21.8779L17.0486 15.2236C18.083 13.9394 18.7331 12.3887 18.9237 10.7508C19.1143 9.11279 18.8376 7.45433 18.1257 5.96691C17.4137 4.47948 16.2956 3.22378 14.9003 2.34483C13.505 1.46587 11.8895 0.999522 10.2405 0.999634Z" fill="black"/>
+</g>
+</svg>
@@ -0,0 +1,13 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6875 17.0625V29.7812H13.3125V17.0625H0.5625V13.6562H13.3125V0.90625H16.6875V13.6562H29.4375V17.0625H16.6875Z" fill="black"/>
+<path d="M16.6875 17.0625V29.7812H13.3125V17.0625H0.5625V13.6562H13.3125V0.90625H16.6875V13.6562H29.4375V17.0625H16.6875Z" fill="url(#paint0_linear_1994_1982)"/>
+<defs>
+<linearGradient id="paint0_linear_1994_1982" x1="-159.646" y1="55.0003" x2="177.383" y2="55.0003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4CA9FF" stop-opacity="0"/>
+<stop offset="0.108674" stop-color="#4CA9FF"/>
+<stop offset="0.549673" stop-color="#2648FF"/>
+<stop offset="0.859503" stop-color="#BE05FF"/>
+<stop offset="1" stop-color="#BE05FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M14.2609 17.7183L3.93839 28.0408C3.55217 28.427 3.06063 28.6201 2.46375 28.6201C1.86687 28.6201 1.37533 28.427 0.989111 28.0408C0.602897 27.6546 0.40979 27.163 0.40979 26.5661C0.40979 25.9693 0.602897 25.4777 0.989111 25.0915L11.3116 14.769L0.989111 4.44657C0.602897 4.06035 0.40979 3.56881 0.40979 2.97193C0.40979 2.37505 0.602897 1.8835 0.989111 1.49729C1.37533 1.11108 1.86687 0.917969 2.46375 0.917969C3.06063 0.917969 3.55217 1.11108 3.93839 1.49729L14.2609 11.8198L24.5833 1.49729C24.9695 1.11108 25.4611 0.917969 26.058 0.917969C26.6548 0.917969 27.1464 1.11108 27.5326 1.49729C27.9188 1.8835 28.1119 2.37505 28.1119 2.97193C28.1119 3.56881 27.9188 4.06035 27.5326 4.44657L17.2101 14.769L27.5326 25.0915C27.9188 25.4777 28.1119 25.9693 28.1119 26.5661C28.1119 27.163 27.9188 27.6546 27.5326 28.0408C27.1464 28.427 26.6548 28.6201 26.058 28.6201C25.4611 28.6201 24.9695 28.427 24.5833 28.0408L14.2609 17.7183Z" fill="black"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 7.92893 -1.70299e-07 4.39339 2.1967 2.1967C4.39339 -1.70299e-07 7.92893 0 15 0C22.071 0 25.6066 -1.70299e-07 27.8032 2.1967C30 4.39339 30 7.92893 30 15C30 22.071 30 25.6066 27.8032 27.8032C25.6066 30 22.071 30 15 30C7.92893 30 4.39339 30 2.1967 27.8032C-1.70299e-07 25.6066 0 22.071 0 15ZM15 6.375C15.6213 6.375 16.125 6.87868 16.125 7.5V15.2839L18.7046 12.7045C19.1439 12.2652 19.8561 12.2652 20.2954 12.7045C20.7348 13.1439 20.7348 13.8561 20.2954 14.2955L15.7955 18.7954C15.5846 19.0065 15.2984 19.125 15 19.125C14.7017 19.125 14.4155 19.0065 14.2045 18.7954L9.7045 14.2955C9.26517 13.8561 9.26517 13.1439 9.7045 12.7045C10.1438 12.2652 10.8562 12.2652 11.2955 12.7045L13.875 15.2839V7.5C13.875 6.87868 14.3787 6.375 15 6.375ZM9 21.375C8.37868 21.375 7.875 21.8787 7.875 22.5C7.875 23.1213 8.37868 23.625 9 23.625H21C21.6213 23.625 22.125 23.1213 22.125 22.5C22.125 21.8787 21.6213 21.375 21 21.375H9Z" fill="url(#paint0_linear_1654_11267)"/>
+<defs>
+<linearGradient id="paint0_linear_1654_11267" x1="15" y1="0" x2="15" y2="30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3C61FF"/>
+<stop offset="1" stop-color="#8749FF"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 12.5V4.5H12.5M20.5 4.5H28.5V12.5M4.5 20.5V28.5H12.5M28.5 20.5V28.5H20.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Sucess" clip-path="url(#clip0_1654_11326)">
+<path id="Vector" d="M15 28.8466C22.647 28.8466 28.8461 22.6475 28.8461 15.0005C28.8461 7.35343 22.647 1.1543 15 1.1543C7.35294 1.1543 1.15381 7.35343 1.15381 15.0005C1.15381 22.6475 7.35294 28.8466 15 28.8466Z" fill="white" stroke="#16A427" stroke-width="2" stroke-linecap="round"/>
+<path id="Vector_2" d="M21.2305 11.5391L13.5354 19.5391L9.23047 15.0715" stroke="#16A427" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1654_11326">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Sucess" clip-path="url(#clip0_1654_10424)">
+<path id="Vector" d="M15.0005 28.8461C22.6475 28.8461 28.8466 22.647 28.8466 15C28.8466 7.35294 22.6475 1.15381 15.0005 1.15381C7.35343 1.15381 1.1543 7.35294 1.1543 15C1.1543 22.647 7.35343 28.8461 15.0005 28.8461Z" fill="white" stroke="#C5D2E6" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1654_10424">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Property 1=Default" clip-path="url(#clip0_1206_1827)">
+<path id="Vector" d="M15 28.8464C22.647 28.8464 28.8461 22.6473 28.8461 15.0002C28.8461 7.35322 22.647 1.15409 15 1.15409C7.35294 1.15409 1.15381 7.35322 1.15381 15.0002C1.15381 22.6473 7.35294 28.8464 15 28.8464Z" fill="white" stroke="#E4452C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M11 11L19.5 19.5M19.5 11L11 19.5" stroke="#E4452C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1206_1827">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,20 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Property 1=Default">
+<g id="Vector">
+<path d="M15.7311 29.4852C23.327 29.4852 29.4847 23.3275 29.4847 15.7316C29.4847 8.13572 23.327 1.97803 15.7311 1.97803C8.13523 1.97803 1.97754 8.13572 1.97754 15.7316C1.97754 23.3275 8.13523 29.4852 15.7311 29.4852Z" fill="white"/>
+<path d="M15.7311 29.4852C23.327 29.4852 29.4847 23.3275 29.4847 15.7316C29.4847 8.13572 23.327 1.97803 15.7311 1.97803C8.13523 1.97803 1.97754 8.13572 1.97754 15.7316C1.97754 23.3275 8.13523 29.4852 15.7311 29.4852Z" stroke="#C5D2E6" stroke-width="2" stroke-linecap="round"/>
+<path d="M15.7311 29.4852C23.327 29.4852 29.4847 23.3275 29.4847 15.7316C29.4847 8.13572 23.327 1.97803 15.7311 1.97803C8.13523 1.97803 1.97754 8.13572 1.97754 15.7316C1.97754 23.3275 8.13523 29.4852 15.7311 29.4852Z" stroke="url(#paint0_linear_1654_12180)" stroke-width="2" stroke-linecap="round"/>
+</g>
+<path id="Ellipse 52" d="M0.997471 15.465C1.14461 7.3279 7.86033 0.850721 15.9975 0.997856C24.1346 1.14499 30.6118 7.86072 30.4647 15.9979C30.3175 24.135 23.6018 30.6122 15.4647 30.465C7.32751 30.3179 0.850337 23.6022 0.997471 15.465ZM28.424 15.961C28.5507 8.95085 22.9707 3.16528 15.9606 3.03853C8.95047 2.91177 3.1649 8.49183 3.03814 15.5019C2.91139 22.512 8.49144 28.2976 15.5016 28.4244C22.5117 28.5511 28.2972 22.9711 28.424 15.961Z" fill="url(#paint1_linear_1654_12180)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1654_12180" x1="4.43354" y1="4.43403" x2="27.5199" y2="27.0292" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2667FF"/>
+<stop offset="1" stop-color="#9D41FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1654_12180" x1="30.4913" y1="14.5245" x2="7.09515" y2="4.27585" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="liquidity_factors" clip-path="url(#clip0_2393_6607)">
+<path id="Vector" d="M10.0003 19.2311C15.0983 19.2311 19.2311 15.0983 19.2311 10.0003C19.2311 4.90229 15.0983 0.769531 10.0003 0.769531C4.90229 0.769531 0.769531 4.90229 0.769531 10.0003C0.769531 15.0983 4.90229 19.2311 10.0003 19.2311Z" fill="#16A427" stroke="#16A427" stroke-width="1.33333" stroke-linecap="round"/>
+<path id="Vector_2" d="M14.1543 7.69238L9.02424 13.0257L6.1543 10.0473" stroke="#EEEFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2393_6607">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="industry_high_correlation_factor" clip-path="url(#clip0_1946_1108)">
+<path id="Vector" d="M10.0003 19.2311C15.0983 19.2311 19.2311 15.0983 19.2311 10.0003C19.2311 4.90229 15.0983 0.769531 10.0003 0.769531C4.90229 0.769531 0.769531 4.90229 0.769531 10.0003C0.769531 15.0983 4.90229 19.2311 10.0003 19.2311Z" fill="#E4452C" stroke="#EEEFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M7.33301 7.33398L12.9997 13.0007M12.9997 7.33398L7.33301 13.0007" stroke="#EEEFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1946_1108">
+<rect width="20" height="20" fill="#E4452C"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="industry_high_correlation_factor" clip-path="url(#clip0_1946_1108)">
+<path id="Vector" d="M10.0003 19.2311C15.0983 19.2311 19.2311 15.0983 19.2311 10.0003C19.2311 4.90229 15.0983 0.769531 10.0003 0.769531C4.90229 0.769531 0.769531 4.90229 0.769531 10.0003C0.769531 15.0983 4.90229 19.2311 10.0003 19.2311Z" fill="white" stroke="#E4452C" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M7.33301 7.33398L12.9997 13.0007M12.9997 7.33398L7.33301 13.0007" stroke="#E4452C" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1946_1108">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="liquidity_factors" clip-path="url(#clip0_1946_1096)">
+<path id="Vector" d="M10.0003 19.2311C15.0983 19.2311 19.2311 15.0983 19.2311 10.0003C19.2311 4.90229 15.0983 0.769531 10.0003 0.769531C4.90229 0.769531 0.769531 4.90229 0.769531 10.0003C0.769531 15.0983 4.90229 19.2311 10.0003 19.2311Z" fill="white" stroke="#16A427" stroke-width="1.33333" stroke-linecap="round"/>
+<path id="Vector_2" d="M14.1543 7.69238L9.02424 13.0257L6.1543 10.0473" stroke="#16A427" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1946_1096">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,12 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-park:full-screen-two">
+<g id="Group">
+<path id="Vector" d="M12.9224 2.73438H17.7676V7.57961" stroke="#2b2b2b" stroke-width="1.61508" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.07717 2.73438H3.23193V7.57961" stroke="#2b2b2b" stroke-width="1.61508" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12.9224 17.27H17.7676V12.4248" stroke="#2b2b2b" stroke-width="1.61508" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M8.07717 17.27H3.23193V12.4248" stroke="#2b2b2b" stroke-width="1.61508" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M17.7676 2.73438L12.5186 7.98338" stroke="#2b2b2b" stroke-width="1.61508" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M8.48094 12.0215L3.23193 17.2705" stroke="#2b2b2b" stroke-width="1.61508" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
@@ -0,0 +1,163 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: black;
+    background: none;
+    text-shadow: 0 1px white;
+    font-family: "Source Code Pro", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+}
+
+@media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+        text-shadow: none;
+    }
+}
+
+
+/* Code blocks */
+
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+    background: #f5f2f0;
+}
+
+
+/* Inline code */
+
+:not(pre)>code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal;
+}
+
+.token {
+    /* background: transparent;
+    border: 0px;
+    color: inherit;
+    display: inline;
+    font-size: 1em;
+    line-height: inherit;
+    margin: 0px;
+    overflow-x: auto;
+    padding: 0px;
+    white-space: pre;
+    word-break: normal;
+    overflow-wrap: normal; */
+    font-family: "consolas", monospace;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: rgb(128, 132, 149);
+    font-style: italic;
+}
+
+.token.punctuation {
+    color: #999;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: rgb(9, 171, 59);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: rgb(237, 111, 19);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: rgb(28, 131, 225);
+}
+
+.token.function,
+.token.class-name {
+    color: rgb(28, 131, 225);
+    font-weight: 700;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+    color: #e90;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
@@ -0,0 +1,137 @@
+/** 
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #333;
+    /* 更改为深灰色，便于白色背景下的阅读 */
+    background: none;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    font-weight: 500;
+}
+
+
+/* Code blocks */
+
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+    background: #ffffff;
+    /* 修改背景为白色 */
+}
+
+
+/* Inline code */
+
+:not(pre)>code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #6a737d;
+    /* 调整注释为更深的灰色，增加可读性 */
+}
+
+.token.punctuation {
+    color: #555;
+    /* 调整标点符号为更深的灰色 */
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+    color: #e2777a;
+    /* 仍保留删除标签的红色 */
+}
+
+.token.function-name {
+    color: #3d5a80;
+    /* 修改函数名为蓝色系 */
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+    color: #f08d49;
+    /* 保持橙色用于布尔值和数字 */
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+    color: #f8c555;
+    /* 修改为金黄色系，以便突出 */
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+    color: #6fa3f2;
+    /* 将关键词、选择器等修改为浅蓝色 */
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+    color: #7ec699;
+    /* 修改字符串为绿色 */
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+    color: #67cdcc;
+    /* 将运算符和URL改为青绿色 */
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+.token.inserted {
+    color: #28a745;
+    /* 插入内容为绿色 */
+}
@@ -0,0 +1,197 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+textarea,
+input {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+
+/* HTML5 display-role reset for older browsers */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+
+/* custom */
+
+a {
+    color: #7e8c8d;
+    text-decoration: none;
+    backface-visibility: hidden;
+}
+
+li {
+    list-style: none;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    /* background-color: rgba(211, 208, 255, 0); */
+    opacity: 0;
+}
+
+:hover::-webkit-scrollbar {
+    opacity: 1;
+}
+
+::-webkit-scrollbar-track {
+    background-color: rgba(211, 208, 255, 0);
+    /* 滚动条轨道颜色 */
+}
+
+::-webkit-scrollbar-track-piece {
+    /* 滚动条背景色 */
+    background-color: rgba(211, 208, 255, 0);
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    height: 5px;
+    /* 滚动条颜色 */
+    background-color: #E4E7FF;
+    /* background: linear-gradient( to bottom, #8D9AFF, #9D42FF); */
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    width: 5px;
+    background-color: #E4E7FF;
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-corner {
+    /* background-color: rgba(211, 208, 255, 0); */
+    /* color: rgba(211, 208, 255, 0); */
+}
+
+::-webkit-scrollbar-button {
+    /* background-color: rgba(211, 208, 255, 0); */
+    /* color: rgba(211, 208, 255, 0); */
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    /* -webkit-user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none; */
+}
+
+* {
+    -webkit-text-size-adjust: none;
+}
@@ -0,0 +1,153 @@
+<template>
+  <div class="chart-box">
+    <div
+      class="chart-item"
+      v-for="(item, index) in keyList"
+      :key="item"
+      :style="{ width: 100 / keyList.length + '%' }"
+    >
+      <div
+        class="zoom"
+        @click="zoom(colors[index], metricData[item], item)"
+      ></div>
+      <lineChart
+        :color="colors[index]"
+        :data="metricData[item]"
+        :chartName="item"
+        :smallSize="true"
+      ></lineChart>
+    </div>
+    <div class="dialog-box" v-if="showDialog">
+      <div class="dialog-content gradient-border">
+        <div class="close" @click="close"></div>
+        <lineChart
+          :color="dialogColor"
+          :data="dialogData"
+          :chartName="dialogName"
+          :smallSize="false"
+        ></lineChart>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, defineProps, watch, ref } from "vue";
+import lineChart from "../components/lineChartOne.vue";
+
+const props = defineProps({
+  metricData: Object,
+});
+const metricData = ref(props.metricData);
+const colors = ["red", "blue", "orange", "green"];
+const keyList = ref([]);
+const showDialog = ref(false);
+const updateData = () => {
+  keyList.value = Object.keys(metricData.value);
+};
+const dialogColor = ref("");
+const dialogData = ref(null);
+const dialogName = ref("");
+const zoom = (color, data, name) => {
+  dialogColor.value = color;
+  dialogData.value = data;
+  showDialog.value = true;
+  dialogName.value = name;
+};
+const close = () => {
+  showDialog.value = false;
+  dialogColor.value = "";
+  dialogData.value = null;
+  dialogName.value = "";
+};
+
+watch(
+  () => props.metricData,
+  (newValue, oldValue) => {
+    metricData.value = newValue;
+    updateData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+onMounted(() => {
+  updateData();
+});
+</script>
+
+<style scoped lang="scss">
+.chart-box {
+  display: flex;
+  gap: 1.8em;
+  margin-bottom: 1.8em;
+  .chart-item {
+    background-color: var(--bg-white);
+    max-width: 500px;
+    min-width: 0;
+    border-radius: 35.5px;
+    position: relative;
+    box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.3) inset,
+      -1px -1px 2px 0px rgba(221, 221, 221, 0.5) inset,
+      -10px 10px 20px 0px rgba(221, 221, 221, 0.2),
+      10px -10px 20px 0px rgba(221, 221, 221, 0.2),
+      -10px -10px 20px 0px rgba(255, 255, 255, 0.9),
+      10px 10px 25px 0px rgba(221, 221, 221, 0.9);
+    .zoom {
+      position: absolute;
+      right: 1.125em;
+      top: 0.8em;
+      width: 1.125em;
+      height: 1.125em;
+      background: url(@/assets/playground-images/zoom.svg) no-repeat;
+      background-size: contain;
+      cursor: pointer;
+      z-index: 1;
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+  .dialog-box {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: rgba(255, 255, 255, 0.29);
+    backdrop-filter: blur(4.599999904632568px);
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .dialog-content {
+      width: 60%;
+      height: 498px;
+      background-color: #fff;
+      border-radius: 18px;
+      --border-radius: 20px;
+      --border-width: 2px;
+      // padding: 3em 4em;
+      padding-bottom: 2em;
+      margin-top: -4em;
+      position: relative;
+      .close {
+        position: absolute;
+        right: 1.35em;
+        top: 0.9em;
+        width: 1.125em;
+        height: 1.125em;
+        background: url(@/assets/playground-images/close.svg) no-repeat;
+        background-size: contain;
+        cursor: pointer;
+        z-index: 1;
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,183 @@
+<template>
+  <div class="code">
+    <div class="code-content">
+      <SvgIcon
+        @click="fullScreen"
+        class="expand-icon"
+        color="#2b2b2b"
+        name="fullscreen"
+      ></SvgIcon>
+      <SvgIcon
+        @click="copy"
+        class="copy-icon"
+        color="#2b2b2b"
+        name="copy"
+      ></SvgIcon>
+      <div
+        class="md-code"
+        :class="{
+          'full-dev': fullScreenFlag && developer,
+          'full-no-dev': fullScreenFlag && !developer,
+          'no-full-dev': !fullScreenFlag && developer,
+          'no-full-no-dev': !fullScreenFlag && !developer,
+        }"
+      >
+        <pre
+          class="code-display language-python"
+        ><code v-html="highlightedCode"></code>
+        </pre>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits, nextTick } from "vue";
+// main.js 或 Vue 组件内部
+import "prismjs";
+import "prismjs/components/prism-python.min.js"; // 导入Python的语言支持
+
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  markdown: String,
+  developer: Boolean,
+  fullscreen: Boolean,
+});
+
+const emit = defineEmits(["fullScreen"]);
+const markdown = ref(props.markdown);
+const developer = ref(props.developer);
+const highlightedCode = ref("");
+const fullScreenFlag = ref(props.fullscreen);
+watch(
+  () => [props.markdown, props.developer, props.fullscreen],
+  (newValue, oldValue) => {
+    markdown.value = newValue[0];
+    developer.value = newValue[1];
+    fullScreenFlag.value = newValue[2];
+    highlightCode();
+  }
+);
+
+const highlightCode = () => {
+  // 使用 PrismJS 对 Python 代码进行高亮
+  highlightedCode.value = Prism.highlight(
+    markdown.value,
+    Prism.languages.python,
+    "python"
+  );
+};
+
+const copy = () => {
+  navigator.clipboard.writeText(markdown.value);
+  ElMessage({
+    message: "Copy Success.",
+    type: "success",
+    plain: true,
+  });
+};
+
+const fullScreen = () => {
+  fullScreenFlag.value = !fullScreenFlag.value;
+  emit("fullScreen", fullScreenFlag.value);
+};
+
+onMounted(() => {
+  // const codeBlock = document.querySelector("pre code");
+  // hljs.highlightElement(codeBlock);
+  highlightCode();
+});
+</script>
+
+<style lang="scss">
+.code {
+  width: 100%;
+  .code-content {
+    border-radius: 11px;
+    background: var(--bg-white);
+    padding: 1.35em 0 0 0.9em;
+    box-sizing: border-box;
+    overflow-y: hidden;
+    position: relative;
+
+    .expand-icon {
+      position: absolute;
+      right: 3.6em;
+      top: 0.45em;
+      cursor: pointer;
+      opacity: 0.5;
+      width: 1.24em;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .copy-icon {
+      position: absolute;
+      right: 1.35em;
+      top: 0.45em;
+      cursor: pointer;
+      opacity: 0.5;
+      width: 1.24em;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+    .md-code {
+      height: calc(100vh - 28.35em);
+      max-width: 100%;
+      font-size: 0.9em;
+      line-height: 140%;
+      overflow: auto;
+      // &:hover {
+      //   overflow: auto;
+      // }
+      &::-webkit-scrollbar-thumb {
+        background-color: #fff;
+      }
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: #e4e7ff;
+        }
+      }
+
+      &.full-dev {
+        height: calc(100vh - 26.13em);
+      }
+      &.full-no-dev {
+        height: calc(100vh - 19.98em);
+      }
+      &.no-full-dev {
+        height: calc(100vh - 32.8em);
+      }
+      &.no-full-no-dev {
+        height: calc(100vh - 26.1em);
+      }
+      pre {
+        background: transparent;
+        border: 0px;
+        display: inline;
+        font-size: 0.9em;
+        margin: 0px;
+        overflow: auto;
+        padding: 0px;
+        white-space: pre;
+        word-break: normal;
+        overflow-wrap: normal;
+        font-family: "consolas", monospace;
+        &::-webkit-scrollbar-thumb {
+          background-color: #fff;
+        }
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: #e4e7ff;
+          }
+        }
+      }
+      code {
+        font-family: "consolas", monospace;
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,529 @@
+<template>
+  <div class="research-component" v-if="evolvingCodes.length != 0">
+    <div
+      class="content-box sm-7-size"
+      :style="{ width: fullScreenFlag ? '100%' : 'calc(70% - 1.89em)' }"
+    >
+      <div v-show="!fullScreenFlag">
+        <h2>
+          Evolving process
+          <img
+            v-if="allData && allData.length == 0 && !updateEnd"
+            src="@/assets/playground-images/loading-tab.gif"
+            alt="loading"
+          />
+        </h2>
+        <div class="process">
+          <span
+            class="down-arrow"
+            :class="{ rotate: showProcessFlag }"
+            @click="showAllProcess"
+          ></span>
+          <div class="process-content">
+            <ul ref="panel">
+              <li
+                v-for="(item, index) in allData"
+                :key="'p_' + index"
+                :class="{ active: currentLoop == index }"
+                @click="updateLoop(index, 0)"
+              >
+                <span style="margin-right: 1.5em"
+                  >Round
+                  {{ String(allData.length - index).padStart(2, "0") }}</span
+                >
+                <span
+                  v-for="(child, n) in item"
+                  :key="'c_' + n"
+                  class="span"
+                  :class="{
+                    active: currentLoop == index && scenarioCheckedIndex == n,
+                  }"
+                  @click.stop="updateLoop(index, n)"
+                >
+                  <el-tooltip
+                    effect="dark"
+                    popper-class="process-popper"
+                    :content="child.name"
+                    placement="bottom"
+                  >
+                    <span
+                      :class="{
+                        success: child.decision,
+                        fail: !child.decision,
+                        checked:
+                          currentLoop == index && scenarioCheckedIndex == n,
+                      }"
+                    ></span>
+                  </el-tooltip>
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div v-if="scenarioChecked" style="width: 100%">
+        <h2 style="margin: 1em 0 0; font-size: 1.125em">Implementation</h2>
+        <div>
+          <el-tabs
+            v-model="activeName"
+            class="demo-tabs"
+            @tab-click="handleClick"
+          >
+            <el-tab-pane
+              v-for="item in codeNavList"
+              :key="item"
+              :label="item"
+              :name="item"
+            >
+              <codeComponent
+                :markdown="scenarioChecked.workspace[activeName]"
+                :developer="developer"
+                :fullscreen="fullScreenFlag"
+                @fullScreen="fullScreen"
+              ></codeComponent>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+    <div class="content-box sm-3-size" v-show="!fullScreenFlag">
+      <h2 style="font-size: 1.25em; margin-bottom: 0.8em">Tasks</h2>
+      <el-tooltip
+        effect="dark"
+        raw-content
+        :content="
+          `<div style='width: 500px;font-size: 14px;padding: 0.5em 0.5em 0.7em;line-height:160%; '>` +
+          modelTaskDesc +
+          '</div>'
+        "
+        placement="left"
+      >
+        <selectComponent
+          :scenarioList="currentLoopData"
+          :scenarioIndex="scenarioCheckedIndex"
+          :showStatus="true"
+          @scenarioCheckedItem="scenarioCheckedItem"
+        ></selectComponent>
+      </el-tooltip>
+      <h2 style="margin: 1.2em 0 0; font-size: 1.125em">Feedback</h2>
+      <div
+        class="code-nav"
+        :style="{
+          width: developer
+            ? 'calc(calc(100vw - 19.35em) * 0.3)'
+            : 'calc(calc(100vw - 5.49em) * 0.3)',
+        }"
+      >
+        <el-tabs
+          v-model="feedbackName"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane
+            v-for="item in feedbackList"
+            :key="item.abridgeName"
+            :label="item.abridgeName"
+            :name="item.abridgeName"
+          >
+            <div class="deduction" v-if="item.content">
+              <div
+                class="deduction-content"
+                :style="{
+                  height: developer
+                    ? 'calc(100vh - 28.58em)'
+                    : 'calc(100vh - 27.5em)',
+                }"
+              >
+                <p>
+                  {{ item.content }}
+                </p>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+  <div class="research-component" v-else-if="updateEnd">
+    <p>No code generated due to some errors happened in previous steps.</p>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted, computed, defineProps, nextTick } from "vue";
+import selectComponent from "../components/sm-select-component.vue";
+import codeComponent from "../components/code.vue";
+import { marked } from "marked"; // 用于解析Markdown
+import hljs from "highlight.js"; // 用于代码高亮
+import "highlight.js/styles/1c-light.css"; // 引入你想要的代码高亮样式
+
+const props = defineProps({
+  evolvingCodes: Array,
+  evolvingFeedbacks: Array,
+  updateEnd: Boolean,
+  developer: Boolean,
+  currentData: Object,
+});
+
+const fullScreenFlag = ref(false);
+const evolvingCodes = ref(props.evolvingCodes);
+const evolvingFeedbacks = ref(props.evolvingFeedbacks);
+const updateEnd = ref(props.updateEnd);
+const developer = ref(props.developer);
+const currentData = ref(props.currentData);
+const allData = ref(null);
+const currentLoop = ref(0);
+const currentLoopData = ref([]);
+const modelTaskDescObj = ref(null);
+const modelTaskDesc = ref("");
+const modelTask = ref(null);
+const scenarioChecked = ref(null);
+const scenarioCheckedIndex = ref(0);
+const feedbackList = ref(null);
+const codeNavList = ref(["ad_data.py"]);
+const activeName = ref("ad_data.py");
+
+const feedbackName = ref("");
+
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+
+const getLoopdata = (codes, feedbacks) => {
+  const data = [];
+  const tempObj = {};
+  for (let i = 0; i < codes.length; i++) {
+    for (let j = 0; j < codes[i].content.length; j++) {
+      if (tempObj[codes[i].content[j].evo_id]) {
+        tempObj[codes[i].content[j].evo_id].push({
+          name: codes[i].content[j].target_task_name,
+          workspace: codes[i].content[j].workspace,
+          decision: feedbacks[i].content[j].final_decision,
+          feedback: [
+            {
+              name: "Execution Feedback🖥️",
+              abridgeName: "Execution",
+              content: feedbacks[i].content[j].execution,
+            },
+            {
+              name: "Code Feedback📄",
+              abridgeName: "Code",
+              content: feedbacks[i].content[j].code,
+            },
+            {
+              name: "Return Checking",
+              abridgeName: "Return Checking",
+              content: feedbacks[i].content[j].return_checking,
+            },
+          ],
+        });
+      } else {
+        tempObj[codes[i].content[j].evo_id] = [
+          {
+            name: codes[i].content[j].target_task_name,
+            workspace: codes[i].content[j].workspace,
+            decision: feedbacks[i].content[j].final_decision,
+            feedback: [
+              {
+                name: "Execution Feedback🖥️",
+                abridgeName: "Execution",
+                content: feedbacks[i].content[j].execution,
+              },
+              {
+                name: "Code Feedback📄",
+                abridgeName: "Code",
+                content: feedbacks[i].content[j].code,
+              },
+              {
+                name: "Return Checking",
+                abridgeName: "Return Checking",
+                content: feedbacks[i].content[j].return_checking,
+              },
+            ],
+          },
+        ];
+      }
+    }
+  }
+  let sortedKeys = Object.keys(tempObj).sort((a, b) => b - a);
+
+  // 根据倒序的键名获取值
+  let result = sortedKeys.map((key) => tempObj[key]);
+  return result;
+};
+
+const updatData = () => {
+  if (evolvingCodes.value.length > 0 && evolvingFeedbacks.value.length > 0) {
+    allData.value = getLoopdata(evolvingCodes.value, evolvingFeedbacks.value);
+    modelTaskDescObj.value = currentData.value.researcTasks.reduce(
+      (acc, currentValue, index) => {
+        acc[currentValue.name] = currentValue.description;
+        return acc;
+      },
+      {}
+    );
+    currentLoop.value = 0;
+    currentLoopData.value = allData.value[currentLoop.value];
+    scenarioCheckedIndex.value = 0;
+    scenarioChecked.value = currentLoopData.value[scenarioCheckedIndex.value];
+    modelTaskDesc.value = modelTaskDescObj.value[scenarioChecked.value.name];
+    codeNavList.value = Object.keys(scenarioChecked.value.workspace);
+    activeName.value = codeNavList.value[0];
+    feedbackList.value = scenarioChecked.value.feedback.filter((item) => {
+      return item.content;
+    });
+    feedbackName.value = feedbackList.value[0].abridgeName;
+  }
+};
+
+const updateLoop = (index, n) => {
+  currentLoop.value = index;
+  currentLoopData.value = allData.value[currentLoop.value];
+  scenarioCheckedIndex.value = n;
+  scenarioChecked.value = currentLoopData.value[scenarioCheckedIndex.value];
+  codeNavList.value = Object.keys(scenarioChecked.value.workspace);
+  activeName.value = codeNavList.value[0];
+  feedbackList.value = scenarioChecked.value.feedback.filter((item) => {
+    return item.content;
+  });
+  feedbackName.value = feedbackList.value[0].abridgeName;
+};
+
+const scenarioCheckedItem = (data) => {
+  scenarioCheckedIndex.value = data.scenarioCheckedIndex;
+  scenarioChecked.value = data.scenarioChecked;
+  codeNavList.value = Object.keys(scenarioChecked.value.workspace);
+  activeName.value = codeNavList.value[0];
+  modelTaskDesc.value = modelTaskDescObj.value[scenarioChecked.value.name];
+  feedbackList.value = scenarioChecked.value.feedback.filter((item) => {
+    return item.content;
+  });
+  feedbackName.value = feedbackList.value[0].abridgeName;
+};
+
+watch(
+  () => [props.currentData, props.updateEnd, props.developer],
+  (newValue, oldValue) => {
+    currentData.value = newValue[0];
+    evolvingCodes.value = currentData.value.evolvingCodes;
+    evolvingFeedbacks.value = currentData.value.evolvingFeedbacks;
+    updateEnd.value = newValue[1];
+    developer.value = newValue[2];
+
+    updatData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+const panel = ref(null);
+const showProcessFlag = ref(false);
+const showAllProcess = () => {
+  showProcessFlag.value = !showProcessFlag.value;
+  if (!showProcessFlag.value) {
+    panel.value.style.maxHeight = "2.925em";
+  } else {
+    panel.value.style.maxHeight = panel.value.scrollHeight + "px";
+  }
+};
+
+const fullScreen = (flag) => {
+  fullScreenFlag.value = flag;
+};
+
+onMounted(() => {
+  updatData();
+});
+</script>
+
+<style scoped lang="scss">
+.research-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 1.89em;
+  .content-box {
+    // width: 50%;
+    height: 100%;
+    color: var(--text-color);
+
+    &.sm-7-size {
+      width: calc(70% - 1.89em);
+    }
+    &.sm-3-size {
+      width: 30%;
+    }
+    h2 {
+      font-size: 1.26em;
+      font-weight: 700;
+      line-height: 200%;
+      margin-bottom: 0.45em;
+      // display: flex;
+      // align-items: center;
+      // justify-content: flex-start;
+      padding-right: 0.18em;
+      position: relative;
+      img {
+        width: 2.25em;
+        height: 2.25em;
+        margin-left: 0.45em;
+        position: absolute;
+        top: -0.18em;
+      }
+    }
+
+    .process {
+      background: var(--bg-white);
+      border-radius: 11px;
+      position: relative;
+      .down-arrow {
+        width: 0.9em;
+        height: 0.9em;
+        background: url(@/assets/images/down-arrow.svg) no-repeat;
+        background-size: contain;
+        cursor: pointer;
+        transition: transform 0.3s ease-out;
+        position: absolute;
+        right: 0.9em;
+        top: 1.035em;
+
+        &.rotate {
+          transform: rotate(-180deg);
+          transition: transform 0.3s ease-out;
+        }
+      }
+      .process-content {
+        ul {
+          overflow: hidden;
+          max-height: 2.925em;
+          transition: max-height 0.3s ease-out;
+          li {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0.72em 1.9125em;
+            height: 2.925em;
+            box-sizing: border-box;
+            margin-bottom: 0.1em;
+            gap: 1.08em;
+
+            &:last-child {
+              margin: 0;
+            }
+
+            &:hover,
+            &.active {
+              border-radius: 11px;
+              background: var(--card-bg-hover-color);
+            }
+            span {
+              display: inline-block;
+            }
+            .span {
+              padding: 0.18em 0.225em;
+              border-radius: 4px;
+              &:hover,
+              &.active {
+                background: rgba(178, 159, 255, 0.4);
+              }
+            }
+            .success {
+              width: 1.125em;
+              height: 1.125em;
+              background: url(@/assets/playground-images/process-success.svg)
+                no-repeat;
+              background-size: contain;
+              vertical-align: middle;
+
+              &.checked {
+                width: 1.125em;
+                height: 1.125em;
+                background: url(@/assets/playground-images/process-checked.svg)
+                  no-repeat;
+                background-size: contain;
+                vertical-align: middle;
+              }
+            }
+            .fail {
+              width: 1.125em;
+              height: 1.125em;
+              background: url(@/assets/playground-images/process-fail.svg)
+                no-repeat;
+              background-size: contain;
+              vertical-align: middle;
+
+              &.checked {
+                width: 1.125em;
+                height: 1.125em;
+                background: url(@/assets/playground-images/process-fail-checked.svg)
+                  no-repeat;
+                background-size: contain;
+                vertical-align: middle;
+              }
+            }
+          }
+        }
+      }
+    }
+    .deduction {
+      border-radius: 11px;
+      background: var(--bg-white);
+      box-sizing: border-box;
+      overflow-y: hidden;
+      .deduction-content {
+        height: calc(100vh - 26.955em);
+        padding: 1.35em 1.6875em 0.9em;
+        box-sizing: border-box;
+        overflow-y: auto;
+        &::-webkit-scrollbar-thumb {
+          background-color: #fff;
+        }
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: #e4e7ff;
+          }
+        }
+        h3 {
+          font-size: 1.1475em;
+          font-weight: 700;
+          line-height: 200%;
+          margin-bottom: 0.45em;
+          margin-top: 0.9em;
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+        p {
+          font-family: "Microsoft YaHei";
+          font-size: 0.9em;
+          line-height: 180%;
+        }
+      }
+    }
+  }
+}
+:deep(.el-tabs__item.is-active),
+:deep(.el-tabs__item:hover) {
+  background: linear-gradient(90deg, #2667ff 0%, #9d41ff 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  // font-weight: 700;
+}
+:deep(.el-tabs__active-bar) {
+  background: linear-gradient(to right, #2667ff, #9d41ff);
+}
+:deep(.el-tabs__item) {
+  padding: 0 12px;
+  color: #ababab;
+}
+:deep(.code-nav .el-tabs__nav) {
+  width: 100%;
+}
+:deep(.code-nav .el-tabs__item) {
+  min-width: calc(100% / 5);
+  max-width: calc(100% / 3);
+  width: calc(100% / 3);
+}
+</style>
@@ -0,0 +1,145 @@
+<template>
+  <div class="dialog-box" v-if="uniShowDialog">
+    <div class="dialog-content gradient-border">
+      <h1>Increase Loop Count</h1>
+      <p>
+        You can increase the number of loops. Please enter the desired number
+        below.
+      </p>
+      <el-radio-group v-model="radio1">
+        <el-radio value="5">5 Loops</el-radio>
+        <el-radio value="10">10 Loops</el-radio>
+        <el-radio value="20">20 Loops</el-radio>
+        <el-radio value="num"
+          ><el-input-number
+            class="number-input"
+            v-model="num"
+            :controls="false"
+            :min="1"
+            :max="100"
+            @change="handleChange"
+          />
+          Loops</el-radio
+        >
+      </el-radio-group>
+      <div class="btn-box">
+        <button class="gradient-border back" @click="close">BACK</button>
+        <button class="add-loops active">Add Loops</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits, nextTick } from "vue";
+const props = defineProps({
+  showDialog: Number,
+});
+const uniShowDialog = ref(false);
+const radio1 = ref("");
+const num = ref();
+const emit = defineEmits(["addLoop"]);
+
+watch(
+  () => props.showDialog,
+  (newValue, oldValue) => {
+    uniShowDialog.value = newValue > 0 ? true : false;
+  }
+);
+
+const handleChange = (value) => {
+  console.log(value);
+};
+const close = () => {
+  uniShowDialog.value = false;
+};
+onMounted(() => {});
+</script>
+
+<style scoped lang="scss">
+.dialog-box {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: rgba(255, 255, 255, 0.29);
+  backdrop-filter: blur(4.599999904632568px);
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .dialog-content {
+    background-color: #fff;
+    border-radius: 18px;
+    --border-radius: 20px;
+    --border-width: 2px;
+    padding: 3em 4em;
+    margin-top: -4em;
+    h1 {
+      color: var(--text-color);
+      text-shadow: 8px 11px 30px #edf0ff;
+      font-size: 1.5em;
+      font-weight: 700;
+      line-height: 200%;
+    }
+    p {
+      color: var(--text-color);
+      font-size: 1.2em;
+      line-height: 150%;
+      margin: 1.25em 0;
+    }
+    .number-input {
+      width: 80px;
+      height: 40px;
+      border-radius: 4px;
+      border: 2px solid #c5d2e6;
+      margin-right: 0.5em;
+    }
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 0.25em;
+      position: relative;
+      z-index: 1;
+      margin-top: 4em;
+      button {
+        width: 12em;
+        height: 3.78em;
+        color: var(--text-color);
+        font-size: 1em;
+        font-weight: 700;
+        line-height: 150%;
+        text-transform: uppercase;
+        border: none;
+        cursor: pointer;
+        --border-radius: 999px;
+        --border-width: 2px;
+        &.disable {
+          border-radius: 37.5px;
+          background: #c4c4c4;
+          box-shadow: 8px 11px 30px 0px var(--wg-shadow-color);
+          color: var(--bg-white);
+        }
+        &.active {
+          border-radius: 37.5px;
+          background: linear-gradient(90deg, #2667ff 0%, #9d41ff 100%), #979797;
+          box-shadow: 8px 11px 30px 0px var(--wg-shadow-color);
+          color: #fff;
+        }
+        &.back:hover {
+          background-color: var(--card-bg-hover-color);
+        }
+      }
+    }
+  }
+}
+:deep(.el-radio) {
+  --el-radio-text-color: var(--text-color);
+}
+:deep(.el-radio__label) {
+  font-size: 16px;
+}
+:deep(.el-radio__inner) {
+  border-color: var(--text-color);
+}
+</style>
@@ -0,0 +1,330 @@
+<template>
+  <div class="research-component">
+    <div class="content-box hypothesis-box">
+      <h2>For Hypothesis</h2>
+      <div class="deduction">
+        <div class="deduction-content" v-if="feedbackHypothesis">
+          <div v-if="feedbackHypothesis.observations">
+            <h3>Observations</h3>
+            <p>
+              {{ feedbackHypothesis.observations }}
+            </p>
+          </div>
+          <div v-if="feedbackHypothesis.hypothesis_evaluation">
+            <h3>Hypothesis Evaluation</h3>
+            <p>
+              {{ feedbackHypothesis.hypothesis_evaluation }}
+            </p>
+          </div>
+          <div v-if="feedbackHypothesis.new_hypothesis">
+            <h3>New Hypothesis</h3>
+            <p>
+              {{ feedbackHypothesis.new_hypothesis }}
+            </p>
+          </div>
+          <div v-if="feedbackHypothesis.exception">
+            <h3>Exception</h3>
+            <p>{{ feedbackHypothesis.exception }}</p>
+          </div>
+          <div>
+            <h3>Decision</h3>
+            <p>
+              {{ feedbackHypothesis.decision }}
+            </p>
+          </div>
+          <div v-if="feedbackHypothesis.reason">
+            <h3>Reason</h3>
+            <p>
+              {{ feedbackHypothesis.reason }}
+            </p>
+          </div>
+        </div>
+        <div class="deduction-content" v-else>
+          <p>
+            No feedback generated due to some errors happened in previous steps.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="content-box returns-box">
+      <h2>For Returns</h2>
+      <div class="deduction" style="margin-top: 0.5em">
+        <div class="deduction-chart" v-if="feedbackCharts">
+          <div class="chart-toolbar">
+            <button class="chart-enlarge-btn" @click="openChartModal">
+              Enlarge
+            </button>
+          </div>
+          <div v-if="!chartModalVisible" v-html="feedbackCharts.chart_html"></div>
+        </div>
+        <div class="deduction-chart" v-else>
+          <p style="padding-left: 1.875em">
+            No feedback generated due to some errors happened in previous steps.
+          </p>
+        </div>
+      </div>
+      <div class="config-section">
+        <h2 style="margin-top: 1em">Configuration</h2>
+        <div v-if="feedbackConfig && feedbackConfig.config">
+          <markdownToHtml :markdown="feedbackConfig.config"></markdownToHtml>
+        </div>
+        <div v-else>
+          <p style="padding-left: 1.875em">
+            No feedback generated due to some errors happened in previous steps.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="chart-modal" v-if="chartModalVisible">
+      <div class="chart-modal-content gradient-border">
+        <div class="chart-modal-header">
+          <h3>Returns Chart</h3>
+          <button class="chart-modal-close" @click="closeChartModal">
+            Close
+          </button>
+        </div>
+        <div class="chart-modal-body" v-if="feedbackCharts">
+          <div v-html="feedbackCharts.chart_html"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted, defineProps, nextTick } from "vue";
+import markdownToHtml from "../components/markdownToHtml.vue";
+const props = defineProps({
+  currentData: Object,
+  updateEnd: Boolean,
+});
+const currentData = ref(props.currentData);
+const updateEnd = ref(props.updateEnd);
+const feedbackCharts = ref(currentData.value.feedbackCharts);
+const feedbackConfig = ref(currentData.value.feedbackConfig);
+const feedbackHypothesis = ref(currentData.value.feedbackHypothesis);
+const chartModalVisible = ref(false);
+
+const openChartModal = () => {
+  chartModalVisible.value = true;
+};
+
+const closeChartModal = () => {
+  chartModalVisible.value = false;
+};
+
+const executeScripts = () => {
+  // 获取 HTML 中所有的 <script> 标签
+  const scripts = document.querySelectorAll("script");
+  scripts.forEach((script) => {
+    const newScript = document.createElement("script");
+    if (script.src) {
+      newScript.src = script.src; // 如果有 src 属性，加载外部脚本
+    } else {
+      newScript.innerHTML = script.innerHTML; // 否则执行内联脚本
+    }
+    document.body.appendChild(newScript); // 将新脚本标签插入到 body 中
+    document.body.removeChild(newScript); // 执行完毕后移除它
+  });
+};
+
+watch(
+  () => [props.currentData, props.updateEnd],
+  (newValue, oldValue) => {
+    currentData.value = newValue[0];
+    updateEnd.value = newValue[1];
+    feedbackCharts.value = currentData.value.feedbackCharts;
+    feedbackConfig.value = currentData.value.feedbackConfig;
+    feedbackHypothesis.value = currentData.value.feedbackHypothesis;
+    if (feedbackCharts.value) {
+      nextTick(() => {
+        executeScripts();
+      });
+    }
+  }
+);
+
+watch(
+  () => chartModalVisible.value,
+  () => {
+    if (feedbackCharts.value) {
+      nextTick(() => {
+        executeScripts();
+      });
+    }
+  }
+);
+
+onMounted(() => {
+  // 执行嵌入的 JavaScript
+  if (feedbackCharts.value) {
+    nextTick(() => {
+      executeScripts();
+    });
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.research-component {
+  height: 100%;
+  display: flex;
+  gap: 1.89em;
+  .content-box {
+    width: 54%;
+    height: 100%;
+    color: var(--text-color);
+    overflow: auto;
+    h2 {
+      font-size: 1.26em;
+      font-weight: 700;
+      line-height: 200%;
+      margin-bottom: 0.45em;
+    }
+    .deduction {
+      border-radius: 11px;
+      background: var(--bg-white);
+      padding: 0.9em 0;
+      box-sizing: border-box;
+      overflow-y: hidden;
+      .deduction-content {
+        height: calc(100vh - 21.2em);
+        padding: 0.9em 1.6875em 0;
+        overflow: auto;
+        &::-webkit-scrollbar-thumb {
+          background-color: #fff;
+        }
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: #e4e7ff;
+          }
+        }
+        h3 {
+          font-size: 1.1475em;
+          font-weight: 700;
+          line-height: 200%;
+          margin-bottom: 0.45em;
+          margin-top: 0.9em;
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+        p {
+          font-family: "Microsoft YaHei";
+          font-size: 0.9em;
+          line-height: 180%;
+          margin-bottom: 0.9em;
+        }
+      }
+      .deduction-chart {
+        max-height: none;
+        overflow: auto;
+        position: relative;
+        .chart-toolbar {
+          display: flex;
+          justify-content: flex-end;
+          padding: 0 1.2em 0.6em;
+        }
+        .chart-enlarge-btn {
+          border: none;
+          cursor: pointer;
+          font-size: 0.95em;
+          font-weight: 600;
+          color: #fff;
+          padding: 0.5em 1em;
+          border-radius: 999px;
+          background: linear-gradient(90deg, #2667ff 0%, #9d41ff 100%);
+          box-shadow: 0 6px 16px rgba(38, 103, 255, 0.2);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #fff;
+        }
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: #e4e7ff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.hypothesis-box {
+  width: 46%;
+}
+
+.returns-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.returns-box .deduction {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.returns-box .deduction-chart {
+  flex: 1;
+}
+
+.returns-box .config-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.returns-box .config-section :deep(.markdown-body) {
+  flex: 1;
+  max-height: none;
+}
+
+.chart-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(6px);
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-modal-content {
+  width: min(92vw, 1200px);
+  height: min(85vh, 900px);
+  background: #fff;
+  border-radius: 18px;
+  padding: 1.6em 2em 2em;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1em;
+  h3 {
+    font-size: 1.2em;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+}
+
+.chart-modal-close {
+  border: none;
+  cursor: pointer;
+  font-size: 0.95em;
+  font-weight: 600;
+  color: #fff;
+  padding: 0.5em 1.1em;
+  border-radius: 999px;
+  background: #b0b7c3;
+}
+
+.chart-modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 0 0.4em 0.4em;
+}
+</style>
@@ -0,0 +1,94 @@
+<template>
+  <footer>
+    <div class="footer" :style="{ background: color }">
+      <p>
+        <a target="_blank" aria-label="Contact us" href="#">Contact us</a>
+        <span class="line">|</span>
+        <a
+          target="_blank"
+          aria-label="Privacy & Cookies"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
+          >Privacy &amp; Cookies</a
+        >
+        <span class="line">|</span>
+        <a
+          target="_blank"
+          aria-label="Terms of Use"
+          href="https://go.microsoft.com/fwlink/?LinkID=206977"
+          >Terms of Use</a
+        >
+        <span class="line">|</span>
+        <a
+          target="_blank"
+          aria-label="Trademarks"
+          href="https://www.microsoft.com/trademarks"
+          >Trademarks</a
+        >
+        <span class="line">|</span>
+        <span style="">© Microsoft 2024</span>
+        <span class="line">|</span>
+        <span
+          >This content is AI-generated and may not be fully accurate or
+          up-to-date; please verify with a professional for critical
+          matters.</span
+        >
+      </p>
+    </div>
+  </footer>
+</template>
+<script>
+export default {
+  components: {},
+  props: {
+    color: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {},
+};
+</script>
+<style scoped lang="scss">
+.footer {
+  padding: 1.75em 4.375em;
+  box-sizing: border-box;
+  text-align: center;
+  width: 100%;
+  color: var(--footer-text-color);
+  // background: var(--bg-grey);
+  // background: var(--bg-white);
+  font-size: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  a {
+    color: var(--footer-text-color);
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 21px;
+    text-decoration: none;
+    display: inline-block;
+  }
+  .line {
+    margin: 0 16px;
+    display: inline-block;
+    vertical-align: top;
+  }
+  p {
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    &:nth-child(2) a {
+      display: inline-block;
+      img {
+        height: 1.375em;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,36 @@
+<template>
+  <div class="math-box" ref="katexContainer"></div>
+</template>
+<script setup>
+import { ref, watch, onMounted, defineProps } from "vue";
+import "katex/dist/katex.min.css";
+import katex from "katex";
+
+const props = defineProps({
+  formula: String,
+});
+const katexContainer = ref(null);
+watch(
+  () => props.formula,
+  (newValue, oldValue) => {
+    katex.render(newValue, katexContainer.value, {
+      throwOnError: false, // 避免在公式错误时抛出异常
+    });
+  }
+);
+
+onMounted(() => {
+  if (katexContainer.value) {
+    katex.render(props.formula, katexContainer.value, {
+      throwOnError: false, // 避免在公式错误时抛出异常
+    });
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.math-box {
+  display: flex;
+  justify-content: center;
+}
+</style>
@@ -0,0 +1,130 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 600px"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+
+const chart = ref(null);
+
+onMounted(() => {
+  let base = +new Date(1968, 9, 3);
+  let oneDay = 24 * 3600 * 1000;
+  let dateList = [];
+  for (let i = 1; i < 20000; i++) {
+    var now = new Date((base += oneDay));
+    dateList.push(
+      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
+    );
+  }
+  function getData() {
+    let data = [Math.random() * 300];
+    for (let i = 1; i < 20000; i++) {
+      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+    }
+    return data;
+  }
+
+  const option = {
+    tooltip: {
+      trigger: "axis",
+    },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: "none",
+        },
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    xAxis: [
+      {
+        data: dateList,
+        show: false,
+      },
+      {
+        data: dateList,
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        data: dateList,
+        gridIndex: 2,
+        show: false,
+      },
+      {
+        data: dateList,
+        gridIndex: 3,
+      },
+    ],
+    yAxis: [
+      {},
+      {
+        gridIndex: 1,
+      },
+      {
+        gridIndex: 2,
+      },
+      {
+        gridIndex: 3,
+      },
+    ],
+    grid: [
+      {
+        bottom: "75%",
+        top: "5%",
+      },
+      {
+        top: "25%",
+        bottom: "50%",
+      },
+      {
+        bottom: "25%",
+        top: "50%",
+      },
+      {
+        top: "75%",
+      },
+    ],
+    series: [
+      {
+        type: "line",
+        showSymbol: false,
+        data: getData(),
+      },
+      {
+        type: "line",
+        showSymbol: false,
+        data: getData(),
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+      },
+
+      {
+        type: "line",
+        showSymbol: false,
+        data: getData(),
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+      },
+
+      {
+        type: "line",
+        showSymbol: false,
+        data: getData(),
+        xAxisIndex: 3,
+        yAxisIndex: 3,
+      },
+    ],
+  };
+
+  const chartInstance = echarts.init(chart.value);
+  chartInstance.setOption(option);
+});
+</script>
+
+<style>
+/* 样式内容 */
+</style>
@@ -0,0 +1,338 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, defineProps, watch, ref, nextTick } from "vue";
+import * as echarts from "echarts";
+
+const props = defineProps({
+  color: String,
+  data: Object,
+  chartName: String,
+  smallSize: Boolean,
+});
+const color = ref(props.color);
+const data = ref(props.data);
+const chartName = ref(props.chartName);
+const smallSize = ref(props.smallSize);
+const chart = ref(null);
+
+let chartInstance = null;
+let resizeObserver = null;
+let textMeasureCanvas = null;
+
+const getTextMeasureContext = () => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  if (!textMeasureCanvas) {
+    textMeasureCanvas = document.createElement("canvas");
+  }
+  return textMeasureCanvas.getContext("2d");
+};
+
+const getAxisLabelLayout = (xLabels = []) => {
+  const labels = Array.isArray(xLabels) ? xLabels : [];
+  const width = chart.value?.clientWidth || 0;
+  const count = labels.length;
+  if (!width || count <= 1) {
+    return {
+      rotate: 0,
+      bottom: smallSize.value ? "20%" : "18%",
+    };
+  }
+
+  const fontSize = smallSize.value ? 11 : 12;
+  const fontFamily =
+    chart.value && typeof window !== "undefined"
+      ? window.getComputedStyle(chart.value).fontFamily || "sans-serif"
+      : "sans-serif";
+  const measureContext = getTextMeasureContext();
+  if (measureContext) {
+    measureContext.font = `${fontSize}px ${fontFamily}`;
+  }
+
+  const maxLabelWidth = labels.reduce((max, label) => {
+    const text = String(label == null ? "" : label);
+    const measured = measureContext
+      ? measureContext.measureText(text).width
+      : text.length * fontSize * 0.62;
+    return Math.max(max, measured);
+  }, 0);
+
+  // Keep this aligned with grid left/right (10% + 5%).
+  const plotWidth = width * 0.85;
+  const slotWidth = plotWidth / count;
+  const minGap = 8;
+  const useVertical = maxLabelWidth + minGap > slotWidth;
+
+  return {
+    rotate: useVertical ? -90 : 0,
+    bottom: useVertical ? (smallSize.value ? "32%" : "30%") : smallSize.value ? "20%" : "18%",
+  };
+};
+
+const updateContainerSize = () => {
+  if (!chart.value) return;
+  const width = chart.value.offsetWidth;
+  // When mounted under v-show/display:none, width can be 0.
+  if (!width) return;
+  chart.value.style.height = width / 2 + "px";
+};
+
+const canInitChart = () => {
+  if (!chart.value) return false;
+  // Prefer client sizes (what ECharts checks internally)
+  const w = chart.value.clientWidth;
+  const h = chart.value.clientHeight;
+  return w > 0 && h > 0;
+};
+
+const ensureChartInitialized = () => {
+  if (!chart.value) return;
+  if (chartInstance) return;
+
+  updateContainerSize();
+  if (!canInitChart()) {
+    // Still hidden / size not ready; defer.
+    return;
+  }
+
+  // Avoid double-init if something else already initialized it.
+  chartInstance = echarts.getInstanceByDom(chart.value) || echarts.init(chart.value);
+};
+
+const updatData = () => {
+  const tooltip = {};
+
+  const ydatas = {};
+  let minValue = Infinity;
+  let maxValue = -Infinity;
+  const series = [];
+  const legend = [];
+  let flag = false;
+  (data.value || []).forEach((item) => {
+    if (!item || item.name == null) return;
+    tooltip[item.name] = item;
+
+    const itemValue = item.value;
+    // Single-series numeric chart: value can be number OR null/undefined.
+    if (typeof itemValue === "number" || itemValue == null) {
+      flag = true;
+      const yKey = chartName.value;
+      ydatas[yKey] = ydatas[yKey] || [];
+      ydatas[yKey].push([item.name, itemValue ?? null]);
+      if (Number.isFinite(itemValue)) {
+        maxValue = Math.max(maxValue, itemValue);
+        minValue = Math.min(minValue, itemValue);
+      }
+      return;
+    }
+
+    // Multi-series chart: value should be an object; each key can still be null.
+    if (typeof itemValue === "object") {
+      Object.keys(itemValue).forEach((yKey) => {
+        const yVal = itemValue[yKey];
+        if (!ydatas[yKey]) {
+          ydatas[yKey] = [[item.name, yVal ?? null]];
+        } else {
+          ydatas[yKey].push([item.name, yVal ?? null]);
+        }
+        if (Number.isFinite(yVal)) {
+          maxValue = Math.max(maxValue, yVal);
+          minValue = Math.min(minValue, yVal);
+        }
+      });
+    }
+  });
+  const keys = Object.keys(ydatas);
+  let index = keys.indexOf("ensemble");
+  if (index !== -1) {
+    // 移除找到的元素
+    keys.splice(index, 1);
+    // 将元素添加到数组的第二个位置
+    keys.unshift("ensemble");
+  }
+  keys.forEach((item) => {
+    if (!flag) {
+      legend.push(item);
+    }
+    series.push({
+      name: item,
+      data: ydatas[item],
+      type: "line",
+      symbol: "circle",
+      symbolSize: smallSize.value ? 6 : 10,
+    });
+  });
+
+  const xLabels = (data.value || [])
+    .map((item) => item?.name)
+    .filter((name) => name != null);
+  const axisLayout = getAxisLabelLayout(xLabels);
+
+  const option = {
+    color: [
+      "#5470c6",
+      "#73c0de",
+      "#ee6666",
+      "#91cc75",
+      "#fac858",
+      "#3ba272",
+      "#fc8452",
+      "#9a60b4",
+      "#ea7ccc",
+    ],
+    title: {
+      text: chartName.value,
+      textStyle: {
+        fontSize: smallSize.value ? 12 : 18,
+      },
+      padding: [10, 20],
+      top: smallSize.value ? "2%" : "5%",
+      left: smallSize.value ? "1%" : "6%",
+    },
+    grid: {
+      top: "20%",
+      bottom: axisLayout.bottom,
+      left: "10%",
+      right: "5%",
+    },
+    legend: {
+      show: !smallSize.value,
+      data: legend,
+      right: "8%",
+      top: "5%",
+    },
+    tooltip: {
+      trigger: "axis", // 可选项：'item'，'axis'，'none'
+      appendToBody: true,
+      position: function (point, params, dom, rect, size) {
+        // point：鼠标位置，[x, y]
+        // params：tooltip 的数据
+        // dom：tooltip 的 DOM 元素
+        // rect：坐标轴的位置等信息
+        // size：图表的尺寸信息
+
+        return [point[0], point[1]];
+      },
+      // confine: true,
+      formatter: function (params) {
+        if (!params || params.length === 0) return "";
+
+        const axisValue = params[0]?.axisValue;
+        let tooltipContent = `<div><div><strong>${axisValue} Value: <br>`;
+        params.forEach((item) => {
+          const v = Array.isArray(item.value) ? item.value[1] : item.value;
+          tooltipContent += `<span style="color: blue">${
+            item.seriesName + ": " + (v ?? "null")
+          }</span><br>
+       `;
+        });
+
+        const desc = tooltip?.[axisValue]?.desc ?? "";
+        tooltipContent += ` </strong></div>`;
+        if (desc) {
+          tooltipContent += `<p style="margin-top: 10px;">${desc}</p>`;
+        }
+        tooltipContent += `</div>`;
+        return tooltipContent;
+      },
+      extraCssText:
+        "max-width: 400px; white-space: normal; word-wrap: break-word;",
+    },
+    xAxis: {
+      type: "category",
+      axisLabel: {
+        show: true,
+        rotate: axisLayout.rotate,
+        interval: 0,
+        margin: 10,
+      },
+    },
+    yAxis: (() => {
+      const yAxis = {
+        type: "value",
+        axisLabel: {
+          formatter: function (value, index) {
+            if (value % 1 === 0) {
+              return value.toFixed(0); // 没有小数部分时，显示整数
+            } else if ((value * 10) % 1 === 0) {
+              return value.toFixed(1); // 如果小数部分只有一位，则保留一位小数
+            } else {
+              return value.toFixed(2); // 其他情况保留两位小数
+            }
+          },
+        },
+      };
+
+      // Only set explicit bounds when there is at least one finite value.
+      if (Number.isFinite(minValue) && Number.isFinite(maxValue)) {
+        yAxis.min = Math.floor(minValue * 1000) / 1000;
+        yAxis.max = Math.ceil(maxValue * 1000) / 1000;
+      }
+      return yAxis;
+    })(),
+    series: series,
+  };
+
+  if (chartInstance) {
+    chartInstance.setOption(option);
+  }
+};
+
+watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    data.value = newValue;
+    ensureChartInitialized();
+    if (chartInstance) {
+      updatData();
+      chartInstance.resize();
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    ensureChartInitialized();
+    if (chartInstance) {
+      updatData();
+      chartInstance.resize();
+    }
+
+    // Ensure charts render when the container becomes visible / resizes.
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        updateContainerSize();
+        ensureChartInitialized();
+        if (chartInstance) {
+          updatData();
+          chartInstance.resize();
+        }
+      });
+      resizeObserver.observe(chart.value);
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver && chart.value) {
+    resizeObserver.unobserve(chart.value);
+  }
+  resizeObserver = null;
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+</script>
+
+<style>
+/* 样式内容 */
+</style>
@@ -0,0 +1,23 @@
+<template>
+  <span class="spinner"></span>
+</template>
+
+<style scoped lang="scss">
+.spinner {
+  display: inline-block;
+  height: 35px;
+  width: 35px;
+  margin-top: 3px;
+  //   background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  border-top: 2px solid #fff;
+  border-right: 2px solid transparent;
+  animation: spinner6 700ms linear infinite;
+}
+
+@keyframes spinner6 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
@@ -0,0 +1,35 @@
+<template>
+  <div class="loading">
+    <svg class="loading-svg" width="205" height="120">
+      <path
+        class="loading-path"
+        d="M 100.16623,51.415329 C 106.74946,45.082085 113.08279,39.707091 119.16623,35.290329 C 125.24945,30.790433 130.37444,27.790436 134.54123,26.290329 C 138.70777,24.790439 143.24943,24.04044 148.16623,24.040329 C 158.49941,24.04044 166.83274,27.498769 173.16623,34.415329 C 179.58273,41.248756 182.79106,49.540414 182.79123,59.290329 C 182.79106,65.957064 181.37439,72.123725 178.54123,77.790329 C 175.70773,83.457047 171.66607,87.748709 166.41623,90.665329 C 161.24941,93.582037 155.29108,95.040369 148.54123,95.040329 C 139.7911,95.040369 132.12444,93.16537 125.54123,89.415329 C 119.04112,85.665378 110.58279,78.582052 100.16623,68.165329 C 89.332815,78.915385 80.707824,86.082044 74.291229,89.665329 C 67.874504,93.248704 60.416178,95.040369 51.916229,95.040329 C 41.082864,95.040369 32.624539,91.665372 26.541229,84.915329 C 20.541218,78.165385 17.541221,69.623727 17.541229,59.290329 C 17.541221,49.623747 20.707884,41.332089 27.041229,34.415329 C 33.457871,27.498769 41.832863,24.04044 52.166229,24.040329 C 57.166181,24.04044 61.74951,24.790439 65.916229,26.290329 C 70.082835,27.790436 75.166163,30.790433 81.166229,35.290329 C 87.249484,39.707091 93.582811,45.082085 100.16623,51.415329 M 108.29123,59.165329 C 117.12445,67.915396 124.37445,73.873723 130.04123,77.040329 C 135.7911,80.123717 141.49943,81.665382 147.16623,81.665329 C 154.24942,81.665382 159.79108,79.582051 163.79123,75.415329 C 167.79107,71.165392 169.79107,66.040398 169.79123,60.040329 C 169.79107,53.457077 167.79107,48.040416 163.79123,43.790329 C 159.87441,39.457091 154.66608,37.290426 148.16623,37.290329 C 144.49943,37.290426 140.95776,37.957092 137.54123,39.290329 C 134.12444,40.540423 130.04111,42.790421 125.29123,46.040329 C 120.54112,49.207081 114.87446,53.582077 108.29123,59.165329 M 92.041229,59.165329 C 86.041152,54.082076 80.666157,49.915414 75.916229,46.665329 C 71.166167,43.332087 66.999504,40.957089 63.416229,39.540329 C 59.832845,38.123759 55.916182,37.415426 51.666229,37.415329 C 45.582859,37.415426 40.541198,39.540424 36.541229,43.790329 C 32.541206,48.040416 30.541208,53.457077 30.541229,60.040329 C 30.541208,64.623732 31.582873,68.498728 33.666229,71.665329 C 35.749536,74.832055 38.2912,77.290386 41.291229,79.040329 C 44.374527,80.790383 48.207857,81.665382 52.791229,81.665329 C 58.791179,81.665382 64.624507,80.08205 70.291229,76.915329 C 75.957829,73.748723 83.207822,67.832062 92.041229,59.165329"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.loading {
+}
+.loading-svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.loading-path {
+  stroke: #fff;
+  stroke-width: 6;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  stroke-dasharray: 193.904983521;
+  fill: none;
+  animation: load 4s linear infinite;
+}
+
+@keyframes load {
+  from {
+    stroke-dashoffset: 775.6199340820312;
+  }
+}
+</style>
@@ -0,0 +1,499 @@
+<template>
+  <div class="loop-box">
+    <div class="loop-box-header">
+      <div
+        class="trace-name-text"
+        v-if="traceName"
+        :title="`Trace name: ${traceName}`"
+      >
+        <span class="trace-name-value">{{ traceName }}</span>
+      </div>
+      <span class="loop-title">Loops</span>
+    </div>
+    <div class="loop-box-list" ref="loops">
+      <div class="loop-length">
+        <div class="loop-item" v-for="index in loopNumber" :key="index">
+          <div
+            class="loop-item-content"
+            @click="clickLoop(index, true)"
+            v-if="!isCompleted(index) && loadingIndex == index"
+          >
+            <div class="loop-item-icon">
+              <img
+                src="@/assets/playground-images/loop-loading.gif"
+                alt="loading"
+              />
+            </div>
+            <div
+              class="loop-item-label"
+              :class="{ active: currentIndex == index }"
+            >
+              <span>{{ index < 10 ? "0" + index : index }}</span> Loop
+            </div>
+          </div>
+          <div
+            class="loop-item-content"
+            @click="clickLoop(index, false)"
+            v-if="isCompleted(index)"
+          >
+            <div class="loop-item-icon">
+              <img
+                v-if="statusList[index - 1]"
+                src="@/assets/playground-images/loop-Sucess.svg"
+                alt="loading"
+              />
+              <img
+                v-else
+                src="@/assets/playground-images/loop-error.svg"
+                alt="loading"
+              />
+            </div>
+            <div
+              class="loop-item-label"
+              :class="{ active: currentIndex == index }"
+            >
+              <span>{{ index < 10 ? "0" + index : index }}</span> Loop
+            </div>
+          </div>
+          <div
+            class="loop-item-content"
+            v-if="!isCompleted(index) && loadingIndex !== index"
+          >
+            <div class="loop-item-icon">
+              <img
+                src="@/assets/playground-images/loop-default.svg"
+                alt="loading"
+              />
+            </div>
+            <div
+              class="loop-item-label"
+              :class="{ active: currentIndex == index }"
+            >
+              <span>{{ index < 10 ? "0" + index : index }}</span> Loop
+            </div>
+          </div>
+        </div>
+        <div class="default-line"></div>
+        <div class="line" :style="{ height: height + '%' }"></div>
+      </div>
+    </div>
+    <div class="loop-box-btn">
+      <button
+        :class="{
+          active: !isDone,
+          disable: isDone,
+        }"
+        :disabled="stopFlag || isDone"
+        @click="stopClick"
+      >
+        Stop
+      </button>
+      <div class="auto-skip-toggle" v-if="editLoop">
+        <label class="toggle-label">
+          <span class="toggle-text">Auto Skip Interaction</span>
+          <span class="toggle-switch">
+            <input type="checkbox" v-model="autoSkip" @change="emitAutoSkip" />
+            <span class="toggle-slider"></span>
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits, nextTick } from "vue";
+const props = defineProps({
+  loadingIndex: Number,
+  loopNumber: Number,
+  editLoop: Boolean,
+  currentData: Array,
+  updateEnd: Boolean,
+  traceName: String,
+});
+const loadingIndex = ref(props.loadingIndex);
+const loopNumber = ref(props.loopNumber);
+const editLoop = ref(props.editLoop);
+const currentData = ref(props.currentData);
+const traceName = ref(props.traceName);
+const statusList = ref([]);
+const emit = defineEmits(["addLoop", "clickIndex", "clickStop", "toggleAutoSkip"]);
+const loops = ref(null);
+const stopFlag = ref(false);
+const isDone = ref(props.updateEnd);
+const autoSkip = ref(false);
+
+const currentIndex = ref(loadingIndex.value);
+
+const isCompleted = (index) => {
+  // return loadingIndex.value > index;
+  return currentData.value.length >= index;
+};
+
+const scrollTo = () => {
+  const el = loops.value;
+  if (el) {
+    if (loopNumber.value - loadingIndex.value < 3) {
+      el.scrollTo({
+        top: 4.66 * 16 * (loadingIndex.value + 6),
+        behavior: "smooth",
+      });
+    } else {
+      el.scrollTo({
+        top: 4.66 * 16 * (loadingIndex.value - 6),
+        behavior: "smooth",
+      });
+    }
+  }
+};
+const height = ref(0);
+const getHeight = () => {
+  if (loadingIndex.value >= loopNumber.value) {
+    height.value = 100;
+  } else {
+    height.value =
+      ((2.975 + 4.075 * (loadingIndex.value - 1)) /
+        (4.075 * loopNumber.value)) *
+      100;
+  }
+};
+const updateData = () => {
+  statusList.value = currentData.value.map((item) => {
+    return item.feedbackHypothesis ? item.feedbackHypothesis.decision : false;
+  });
+};
+
+watch(
+  () => [
+    props.loadingIndex,
+    props.loopNumber,
+    props.currentData,
+    props.updateEnd,
+    props.traceName,
+  ],
+  (newValue, oldValue) => {
+    loadingIndex.value = newValue[0];
+    loopNumber.value = newValue[1];
+    currentData.value = newValue[2];
+    isDone.value = newValue[3];
+    traceName.value = newValue[4];
+    if (!isDone.value) {
+      stopFlag.value = false;
+    }
+    updateData();
+    currentIndex.value = loadingIndex.value;
+    nextTick(() => {
+      getHeight();
+      scrollTo();
+    });
+  }
+);
+
+const addLoop = () => {
+  emit("addLoop", true);
+};
+const stopClick = () => {
+  if (isDone.value && !stopFlag.value) {
+    return;
+  }
+  stopFlag.value = true;
+  emit("clickStop", stopFlag.value);
+};
+
+const emitAutoSkip = () => {
+  emit("toggleAutoSkip", autoSkip.value);
+};
+
+const clickLoop = (index, flag) => {
+  currentIndex.value = index;
+  emit("clickIndex", {
+    index: index,
+    loading: flag,
+  });
+};
+
+onMounted(() => {
+  getHeight();
+});
+</script>
+
+<style scoped lang="scss">
+.loop-box {
+  width: 17.5em;
+  width: 15.75em;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-top: 0.5em;
+  .loop-box-header {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1em;
+    padding: 0 0.9em;
+    box-sizing: border-box;
+
+    .loop-title {
+      color: var(--text-color);
+      font-size: 1.4em;
+      font-size: 1.26em;
+      font-weight: 700;
+      line-height: 1.5;
+      letter-spacing: 0.01em;
+      text-align: center;
+    }
+  }
+
+  .trace-name-text {
+    width: fit-content;
+    max-width: calc(100% - 1.8em);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+
+    .trace-name-value {
+      font-size: 1.06875em;
+      font-weight: 700;
+      line-height: 200%;
+      text-shadow: 8px 11px 30px var(--wg-shadow-color);
+      background: linear-gradient(90deg, #2667ff 0%, #9d41ff 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      word-break: break-word;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      text-align: center;
+    }
+  }
+
+  .loop-box-list {
+    flex: 1;
+    min-height: 0;
+    height: auto;
+    padding: 0 3em 0 4.3em;
+    padding: 0 2.7em 0 3.87em;
+    margin-top: 0.9em;
+    overflow: auto;
+    &::-webkit-scrollbar-thumb {
+      background-color: #fff;
+    }
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: #e4e7ff;
+      }
+    }
+    &.no-btn {
+      height: calc(100vh - 17em);
+      height: calc(100vh - 15.3em);
+    }
+    .loop-length {
+      position: relative;
+      .line {
+        position: absolute;
+        height: 0;
+        width: 3px;
+        background: linear-gradient(to bottom, #2667ff 0%, #9d41ff 100%);
+        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
+        opacity: 0.3;
+        opacity: 1;
+        top: 0;
+        left: 0.8125em;
+        left: 0.73125em;
+        transition: 0.75s ease;
+      }
+      .default-line {
+        position: absolute;
+        height: 100%;
+        width: 3px;
+        background-color: #c5d2e6;
+        bottom: 0;
+        left: 0.8125em;
+        left: 0.73125em;
+      }
+    }
+    .loop-item {
+      padding: 1.1em 0;
+      padding: 0.99em 0;
+      position: relative;
+      z-index: 1;
+      .loop-item-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .loop-item-icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          // .line {
+          //   height: 2.625em;
+          //   width: 4px;
+          //   background-color: #c5d2e6;
+          //   &.active {
+          //     background: linear-gradient(to bottom, #2667ff 0%, #9d41ff 100%),
+          //       #fefefe;
+          //   }
+          // }
+          img {
+            width: 1.875em;
+            height: 1.875em;
+            width: 1.6875em;
+            height: 1.6875em;
+          }
+        }
+        .loop-item-label {
+          width: 4.5em;
+          color: var(--text-color);
+          font-size: 1.125em;
+          font-size: 1.0125em;
+          font-weight: 700;
+          line-height: 160%;
+          margin-left: 1.08em;
+          padding: 0.3em 0.4em 0.3em 0.6em;
+          padding: 0.27em 0.36em 0.27em 0.54em;
+          cursor: pointer;
+
+          &:hover,
+          &.active {
+            border-radius: 999px;
+            background: var(--card-bg-hover-color);
+          }
+          span {
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+  }
+  .loop-box-btn {
+    // padding-left: 2.5em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 2;
+    padding: 0.9em 0 0.2em;
+    background: #fff;
+    button {
+      width: 9.1em;
+      height: 3em;
+      padding: 0.56em 1.1em;
+      padding: 0.504em 0.99em;
+      border-radius: 24px;
+      background: var(---bg-white);
+      // box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
+      margin-top: 1.1em;
+      margin-top: 0.99em;
+      border: none;
+      color: var(--text-color);
+      text-align: center;
+      font-family: "Microsoft YaHei";
+      font-size: 1.125em;
+      font-size: 1.0125em;
+      text-transform: capitalize;
+      cursor: pointer;
+
+      &.disable {
+        background: #d9d9d9;
+        color: var(--text-white-color);
+        pointer-events: none;
+      }
+      &.active-black {
+        background: var(--text-color);
+        // box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
+        color: var(--text-white-color);
+        &:hover {
+          box-shadow: 0px 0px 10px 0px rgba(142, 62, 255, 0.74);
+        }
+      }
+      &.active {
+        border-radius: 999px;
+        background: linear-gradient(90deg, #2667ff 0%, #9d41ff 100%), #fefefe;
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
+        color: var(--text-white-color);
+        &:hover {
+          background: linear-gradient(
+              0deg,
+              rgba(255, 255, 255, 0.1) 0%,
+              rgba(255, 255, 255, 0.1) 100%
+            ),
+            linear-gradient(90deg, #2667ff 0%, #9d41ff 100%);
+          box-shadow: 0px 0px 10px 0px rgba(142, 62, 255, 0.68);
+        }
+      }
+    }
+  }
+  .loop-box-btn {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+  }
+  .auto-skip-toggle {
+    display: flex;
+    justify-content: center;
+    padding: 0 1.2em;
+  }
+  .toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 0.8em;
+    font-size: 1em;
+    color: var(--text-color);
+    cursor: pointer;
+    user-select: none;
+  }
+  .toggle-text {
+    font-weight: 600;
+  }
+  .toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 2.8em;
+    height: 1.6em;
+  }
+  .toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #d6dbe7;
+    transition: 0.2s ease;
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 2px #c5d2e6;
+  }
+  .toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 1.2em;
+    width: 1.2em;
+    left: 0.2em;
+    top: 0.2em;
+    background-color: #fff;
+    transition: 0.2s ease;
+    border-radius: 50%;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  }
+  .toggle-switch input:checked + .toggle-slider {
+    background: linear-gradient(90deg, #2667ff 0%, #9d41ff 100%);
+    box-shadow: none;
+  }
+  .toggle-switch input:checked + .toggle-slider:before {
+    transform: translateX(1.2em);
+  }
+}
+</style>
@@ -0,0 +1,240 @@
+<template>
+  <div class="markdown-body" v-html="renderedHtml"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import "katex/dist/katex.min.css";
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const renderedHtml = ref("");
+let md = null;
+let katexEngine = null;
+
+const normalizeMathBlockInnerContent = (content) => {
+  if (!content || typeof content !== "string") {
+    return content;
+  }
+
+  return content
+    .replace(/\r\n?/g, "\n")
+    .replace(/\\text\{([\s\S]*?)\}/g, (match, inner) => {
+      return `\\text{${inner.replace(/\s*\n\s*/g, " ").trim()}}`;
+    })
+    .replace(/\s*\n+\s*/g, " ")
+    .trim();
+};
+
+const wrapBareLatexBlocks = (content) => {
+  if (!content || !content.includes("\\begin{")) {
+    return content;
+  }
+
+  return content.replace(
+    /(^|\n)(\s*)(\\begin\{([a-zA-Z*]+)\}[\s\S]*?\\end\{\4\})(?=\s*(?:\n|$))/g,
+    (match, lineStart, indent, block) => {
+      const trimmedBlock = block.trim();
+
+      if (
+        trimmedBlock.startsWith("$$") ||
+        trimmedBlock.startsWith("\\[") ||
+        trimmedBlock.startsWith("\\(")
+      ) {
+        return match;
+      }
+
+      return `${lineStart}${indent}$$\n${trimmedBlock}\n$$`;
+    }
+  );
+};
+
+const normalizeMathDelimiters = (content) => {
+  if (!content || typeof content !== "string") {
+    return content;
+  }
+
+  return content
+    .replace(/\$\$([\s\S]+?)\$\$/g, (match, inner) => {
+      return `$$\n${normalizeMathBlockInnerContent(inner)}\n$$`;
+    })
+    .replace(/\\\[([\s\S]+?)\\\]/g, (match, inner) => {
+      return `\\[${normalizeMathBlockInnerContent(inner)}\\]`;
+    });
+};
+
+const preprocessMathContent = (content) => {
+  return normalizeMathDelimiters(wrapBareLatexBlocks(content));
+};
+
+const extractStandaloneMath = (content) => {
+  if (!content || typeof content !== "string") {
+    return null;
+  }
+
+  const trimmedContent = preprocessMathContent(content).trim();
+  const dollarBlockMatch = trimmedContent.match(/^\$\$([\s\S]+)\$\$$/);
+
+  if (dollarBlockMatch) {
+    return {
+      displayMode: true,
+      formula: normalizeMathBlockInnerContent(dollarBlockMatch[1]),
+    };
+  }
+
+  const bracketBlockMatch = trimmedContent.match(/^\\\[([\s\S]+)\\\]$/);
+
+  if (bracketBlockMatch) {
+    return {
+      displayMode: true,
+      formula: normalizeMathBlockInnerContent(bracketBlockMatch[1]),
+    };
+  }
+
+  const inlineMatch = trimmedContent.match(/^\\\(([\s\S]+)\\\)$/);
+
+  if (inlineMatch) {
+    return {
+      displayMode: false,
+      formula: normalizeMathBlockInnerContent(inlineMatch[1]),
+    };
+  }
+
+  if (/^\\begin\{([a-zA-Z*]+)\}[\s\S]*\\end\{\1\}$/.test(trimmedContent)) {
+    return {
+      displayMode: true,
+      formula: normalizeMathBlockInnerContent(trimmedContent),
+    };
+  }
+
+  return null;
+};
+
+const renderStandaloneMath = (content) => {
+  if (!katexEngine) {
+    return null;
+  }
+
+  const standaloneMath = extractStandaloneMath(content);
+
+  if (!standaloneMath || !standaloneMath.formula) {
+    return null;
+  }
+
+  try {
+    return katexEngine.renderToString(standaloneMath.formula, {
+      displayMode: standaloneMath.displayMode,
+      throwOnError: false,
+      strict: "ignore",
+      macros: {
+        "\\RR": "\\mathbb{R}",
+      },
+    });
+  } catch (_) {
+    return null;
+  }
+};
+
+const renderContent = (content) => {
+  if (!md) {
+    return "";
+  }
+
+  const standaloneMathHtml = renderStandaloneMath(content);
+
+  if (standaloneMathHtml) {
+    return standaloneMathHtml;
+  }
+
+  return md.render(preprocessMathContent(content));
+};
+
+onMounted(async () => {
+  try {
+    const [{ default: markdownit }, hljsModule, katex, texmathModule] =
+      await Promise.all([
+        import("markdown-it"),
+        import("highlight.js"),
+        import("katex"),
+        import("markdown-it-texmath"),
+      ]);
+
+    const hljs = hljsModule.default || hljsModule;
+    const texmath = texmathModule.default || texmathModule;
+    katexEngine = katex.default || katex;
+
+    md = markdownit({
+      highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            const highlighted = hljs.highlight(str, { language: lang }).value;
+            return `<pre><code class="hljs language-${lang}">${highlighted}</code></pre>`;
+          } catch (_) {}
+        }
+        return `<pre><code class="hljs">${md.utils.escapeHtml(
+          str
+        )}</code></pre>`;
+      },
+    });
+
+    // 修复列表和段落渲染逻辑
+    md.renderer.rules.list_item_open = () => "<li>";
+    md.renderer.rules.list_item_close = () => "</li>";
+    md.renderer.rules.paragraph_open = (tokens, idx) => {
+      const parentToken = tokens[idx - 1];
+      return parentToken && parentToken.type === "list_item_open" ? "" : "<p>";
+    };
+    md.renderer.rules.paragraph_close = (tokens, idx) => {
+      const parentToken = tokens[idx - 1];
+      return parentToken && parentToken.type === "list_item_close"
+        ? ""
+        : "</p>";
+    };
+
+    md.use(texmath, {
+      engine: katexEngine,
+      delimiters: ["dollars", "brackets"],
+      katexOptions: {
+        throwOnError: false,
+        strict: "ignore",
+        macros: {
+          "\\RR": "\\mathbb{R}",
+        },
+      },
+    });
+
+    renderedHtml.value = renderContent(props.content);
+  } catch (e) {
+    console.error("MarkdownPreview 初始化失败:", e);
+  }
+});
+
+watch(
+  () => props.content,
+  (newVal) => {
+    if (md) {
+      renderedHtml.value = renderContent(newVal);
+    }
+  }
+);
+</script>
+
+<style scoped>
+.markdown-body {
+  font-family: "Microsoft YaHei";
+  font-size: 1em;
+  line-height: 180%;
+  background-color: #fff;
+  max-height: unset;
+  padding: 0;
+}
+
+.markdown-body li {
+  list-style: unset;
+}
+</style>
@@ -0,0 +1,51 @@
+<template>
+  <div class="markdown-body" v-html="renderedHtml"></div>
+</template>
+<script setup>
+import { ref, watch, computed, onMounted, defineProps } from "vue";
+import { marked } from "marked";
+import "github-markdown-css/github-markdown.css";
+
+const props = defineProps({
+  markdown: String,
+});
+const markdown = ref(props.markdown);
+watch(
+  () => props.markdown,
+  (newValue, oldValue) => {
+    markdown.value = newValue;
+  }
+);
+
+// 通过 computed 属性来动态计算渲染后的 HTML 内容
+const renderedHtml = computed(() => {
+  return marked(markdown.value); // 使用 marked 转换为 HTML
+});
+</script>
+
+<style lang="scss">
+.markdown-body {
+  padding: 0 1.35em;
+  background-color: var(--bg-white-blue-color);
+  border-radius: 8px;
+  font-family: "Segoe UI";
+  max-height: 8.505em;
+  overflow: auto;
+  &::-webkit-scrollbar-thumb {
+    background-color: #fff;
+  }
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background-color: #e4e7ff;
+    }
+  }
+  table {
+    // margin: 0 auto;
+    width: 100%;
+    display: inline-table;
+    tr {
+      background-color: var(--bg-white-blue-color);
+    }
+  }
+}
+</style>
@@ -0,0 +1,73 @@
+<template>
+  <div class="header-component">
+    <div class="nav">
+      <router-link to="/">
+        <div class="logo-container">
+          <img src="@/assets/images/RDAgent-logo.png" alt="R&D-Agent logo" />
+        </div>
+      </router-link>
+      <ul>
+        <li>
+          <router-link to="/">Homepage</router-link>
+        </li>
+        <li>
+          <router-link to="/Playground">Playground</router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  components: {},
+  setup() {},
+};
+</script>
+<style scoped lang="scss">
+.header-component {
+  padding: 1.75em 4.375em 0;
+  // height: 6.125em;
+  height: 5.15em;
+  box-sizing: border-box;
+  & > .nav {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    .logo-container {
+      margin-right: 4.375em;
+      img {
+        display: inline-block;
+        height: 2.25em;
+      }
+    }
+    ul {
+      display: flex;
+      flex-direction: row;
+      li {
+        margin-right: 2.25em;
+        text-align: center;
+        cursor: pointer;
+        a {
+          display: inline-block;
+          color: var(--nav-default-color);
+          font-size: 1.25em;
+          font-weight: 700;
+          line-height: 200%;
+          &:hover {
+            color: var(--nav-hover-color);
+          }
+        }
+        .router-link-exact-active {
+          color: var(--text-color);
+
+          &:hover {
+            color: var(--text-color);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,648 @@
+<template>
+  <div class="research-component">
+    <div class="content-box">
+      <h2>
+        Hypothesis
+        <img
+          v-if="isWaitingForHypothesis"
+          src="@/assets/playground-images/loading-tab.gif"
+          alt="loading"
+        />
+      </h2>
+      <div class="deduction">
+        <div
+          class="deduction-content"
+          :class="{ 'deduction-content--pdf-only': isPdfOnlyHypothesis }"
+          :style="{
+            height: developer ? 'calc(100vh - 20.3em)' : 'calc(100vh - 17.9em)',
+          }"
+        >
+          <div
+            class="pdf-content"
+            :class="{ 'pdf-content--full': isPdfOnlyHypothesis }"
+            v-if="researchPdfImage"
+          >
+            <img
+              :src="researchPdfImage"
+              alt="pdf image"
+              :class="{ 'pdf-image--full': isPdfOnlyHypothesis }"
+            />
+            <div class="pdf-full" @click="zoom">
+              <span class="fullscreen"></span> Full Screen
+            </div>
+          </div>
+          <div v-if="researchHypothesis">
+            <h3>Hypothesis</h3>
+            <div>
+              <p v-if="researchHypothesis.hypothesis">
+                {{ researchHypothesis.hypothesis }}
+              </p>
+              <p v-else>
+                {{ researchHypothesis.name_map["no_hypothesis"] }}
+              </p>
+            </div>
+            <h3>Component</h3>
+            <p>{{ researchHypothesis.component }}</p>
+            <h3>Reason</h3>
+            <div>
+              <p v-if="researchHypothesis.reason">
+                {{ researchHypothesis.reason }}
+              </p>
+            </div>
+          </div>
+          <div v-if="!isWaitingForHypothesis && !researchHypothesis && !researchPdfImage">
+            <p style="padding-left: 1em">
+              No hypothesis generated due to some errors happened in previous
+              steps.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content-box">
+      <h2>
+        Tasks<img
+          v-if="!researcTasks && !updateEnd"
+          src="@/assets/playground-images/loading-tab.gif"
+          alt="loading"
+        />
+      </h2>
+      <div v-if="researcTasks">
+        <selectComponent
+          :scenarioList="researcTasks"
+          :scenarioIndex="scenarioCheckedIndex"
+          :showStatus="false"
+          @scenarioCheckedItem="scenarioCheckedItem"
+        ></selectComponent>
+        <div class="deduction" style="margin-top: 1em">
+          <div
+            class="deduction-content modelTask"
+            v-if="scenarioChecked"
+            :style="{
+              height: developer ? 'calc(100vh - 24em)' : 'calc(100vh - 21.5em)',
+            }"
+          >
+            <div
+              v-for="field in taskFields"
+              :key="field.key"
+              class="task-field"
+            >
+              <h3>{{ field.label }}</h3>
+              <div v-if="field.key === 'description' || field.key === 'formulation'">
+                <markdown :content="toTaskFieldMarkdownContent(field)"></markdown>
+              </div>
+              <div v-else-if="field.key === 'variables'" class="task-table-wrap">
+                <table class="task-table">
+                  <thead>
+                    <tr>
+                      <th>Variable</th>
+                      <th>Value</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="row in toVariablesRows(field.value)"
+                      :key="`${field.key}-${row.name}`"
+                    >
+                      <td><markdown :content="toVariableNameCellContent(row.name)"></markdown></td>
+                      <td><markdown :content="toVariableValueCellContent(row.value)"></markdown></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p v-else class="task-field-text">
+                {{ toDisplayText(field.value) }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="dialog-box" v-if="showDialog">
+      <div class="dialog-content gradient-border">
+        <div class="close" @click="close"></div>
+        <div class="dialog-pdf-box">
+          <img :src="researchPdfImage" alt="pdf image" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, onMounted, computed, defineProps } from "vue";
+import selectComponent from "../components/sm-select-component.vue";
+import markdown from "../components/markdown.vue";
+const props = defineProps({
+  currentData: Object,
+  updateEnd: Boolean,
+  developer: Boolean,
+});
+const currentData = ref(props.currentData);
+const updateEnd = ref(props.updateEnd);
+const developer = ref(props.developer);
+const researchHypothesis = ref(null);
+const researcTasks = ref(null);
+const researchPdfImage = ref("");
+const scenarioChecked = ref(null);
+const scenarioCheckedIndex = ref(0);
+const showDialog = ref(false);
+
+const isPdfOnlyHypothesis = computed(() => {
+  return !developer.value && Boolean(researchPdfImage.value) && !researchHypothesis.value;
+});
+
+const isWaitingForHypothesis = computed(() => {
+  return !updateEnd.value && !researchHypothesis.value && !researchPdfImage.value;
+});
+
+const isEmptyTaskField = (value) => {
+  if (value == null) {
+    return true;
+  }
+
+  if (typeof value === "string") {
+    return value.trim() === "";
+  }
+
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+
+  if (typeof value === "object") {
+    return Object.keys(value).length === 0;
+  }
+
+  return false;
+};
+
+const toFieldLabel = (key) => {
+  return key
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+};
+
+const toMarkdownContent = (value) => {
+  if (Array.isArray(value)) {
+    return value.join("\n\n");
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return JSON.stringify(value, null, 2);
+};
+
+const hasLatexDelimiters = (content) => {
+  if (!content || typeof content !== "string") {
+    return false;
+  }
+
+  const trimmedContent = content.trim();
+
+  return (
+    trimmedContent.includes("$$") ||
+    trimmedContent.includes("\\(") ||
+    trimmedContent.includes("\\[") ||
+    trimmedContent.includes("\\begin{")
+  );
+};
+
+const looksLikeLatexFormula = (content, { includeOperators = true } = {}) => {
+  if (!content || typeof content !== "string") {
+    return false;
+  }
+
+  const trimmedContent = content.trim();
+
+  if (trimmedContent === "") {
+    return false;
+  }
+
+  const hasLatexCommand = /\\[a-zA-Z]+/.test(trimmedContent);
+  const hasSubOrSuperscript = /[A-Za-z][A-Za-z0-9]*(?:[_^](?:\{[^{}]+\}|[A-Za-z0-9]+))/.test(
+    trimmedContent
+  );
+  const hasLatexGrouping = /[_^{}]/.test(trimmedContent);
+  const hasMathOperators = /[=<>+\-*/]/.test(trimmedContent);
+
+  return (
+    hasLatexCommand ||
+    hasSubOrSuperscript ||
+    hasLatexGrouping ||
+    (includeOperators && hasMathOperators)
+  );
+};
+
+const wrapStandaloneLatexContent = (
+  value,
+  { displayMode = false, allowSentencePunctuation = true, includeOperators = true } = {}
+) => {
+  const content = toMarkdownContent(value);
+
+  if (typeof content !== "string") {
+    return content;
+  }
+
+  const trimmedContent = content.trim();
+
+  if (
+    !trimmedContent ||
+    hasLatexDelimiters(trimmedContent) ||
+    !looksLikeLatexFormula(trimmedContent, { includeOperators })
+  ) {
+    return content;
+  }
+
+  const hasPlainSentencePunctuation = /[.!?]|:\s+[A-Za-z]/.test(trimmedContent);
+
+  if (!allowSentencePunctuation && hasPlainSentencePunctuation) {
+    return content;
+  }
+
+  if (displayMode) {
+    return `$$\n${trimmedContent}\n$$`;
+  }
+
+  return `$${trimmedContent}$`;
+};
+
+const formatFormulationContent = (value) => {
+  return wrapStandaloneLatexContent(value, {
+    displayMode: true,
+    allowSentencePunctuation: true,
+    includeOperators: true,
+  });
+};
+
+const toTaskFieldMarkdownContent = (field) => {
+  if (field.key === "formulation") {
+    return formatFormulationContent(field.value);
+  }
+
+  return toMarkdownContent(field.value);
+};
+
+const toDisplayText = (value) => {
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+
+  if (typeof value === "object" && value !== null) {
+    return JSON.stringify(value, null, 2);
+  }
+
+  return String(value);
+};
+
+const wrapBareInlineLatex = (content) => {
+  if (!content || typeof content !== "string") {
+    return content;
+  }
+
+  const protectedSegments = [];
+  const protectedContent = content.replace(
+    /(\$\$[\s\S]+?\$\$|\$[^$\n]+\$|\\\([\s\S]+?\\\)|\\\[[\s\S]+?\\\])/g,
+    (match) => {
+      const marker = `@@LATEX_${protectedSegments.length}@@`;
+      protectedSegments.push(match);
+      return marker;
+    }
+  );
+
+  const withCommandLatex = protectedContent.replace(
+    /\\[a-zA-Z]+(?:\s*\[[^\]]*\]|\s*\{[^{}]*\}|[_^](?:\{[^{}]*\}|[A-Za-z0-9]))*/g,
+    (match) => `$${match}$`
+  );
+
+  const withInlineLatex = withCommandLatex.replace(
+    /\b[A-Za-z][A-Za-z0-9]*(?:[_^](?:\{[^{}]+\}|[A-Za-z0-9]+))+/g,
+    (match) => `$${match}$`
+  );
+
+  return withInlineLatex.replace(/@@LATEX_(\d+)@@/g, (_, index) => {
+    return protectedSegments[Number(index)];
+  });
+};
+
+const toVariableCellContent = (value) => {
+  return wrapStandaloneLatexContent(value, {
+    displayMode: false,
+    allowSentencePunctuation: false,
+    includeOperators: false,
+  });
+};
+
+const toVariableNameCellContent = (value) => {
+  return toVariableCellContent(value);
+};
+
+const toVariableValueCellContent = (value) => {
+  return wrapBareInlineLatex(toVariableCellContent(value));
+};
+
+const toVariablesRows = (variables) => {
+  if (Array.isArray(variables)) {
+    return variables.map((item, index) => {
+      if (item && typeof item === "object" && !Array.isArray(item)) {
+        return {
+          name: item.name || item.key || `item_${index + 1}`,
+          value: toMarkdownContent(item.value ?? item.expression ?? item),
+        };
+      }
+
+      return {
+        name: `item_${index + 1}`,
+        value: toMarkdownContent(item),
+      };
+    });
+  }
+
+  if (variables && typeof variables === "object") {
+    return Object.entries(variables).map(([name, value]) => ({
+      name,
+      value: toMarkdownContent(value),
+    }));
+  }
+
+  return [];
+};
+
+const taskFields = computed(() => {
+  if (!scenarioChecked.value) {
+    return [];
+  }
+
+  return Object.entries(scenarioChecked.value)
+    .filter(([key, value]) => key !== "name" && !isEmptyTaskField(value))
+    .map(([key, value]) => ({
+      key,
+      label: toFieldLabel(key),
+      value,
+    }))
+    .sort((left, right) => {
+      if (left.key === "model_type") {
+        return -1;
+      }
+      if (right.key === "model_type") {
+        return 1;
+      }
+
+      return 0;
+    });
+});
+
+const setScenarioChecked = (task) => {
+  scenarioChecked.value = task;
+};
+
+const updateData = () => {
+  if (currentData.value) {
+    researchHypothesis.value = currentData.value.researchHypothesis;
+    researcTasks.value = currentData.value.researcTasks;
+    researchPdfImage.value = currentData.value.researchPdfImage;
+    scenarioCheckedIndex.value = 0;
+    if (researcTasks.value) {
+      setScenarioChecked(researcTasks.value[scenarioCheckedIndex.value]);
+    }
+  }
+};
+
+const zoom = (color, data, name) => {
+  showDialog.value = true;
+};
+const close = () => {
+  showDialog.value = false;
+};
+
+watch(
+  () => [props.currentData, props.updateEnd, props.developer],
+  (newValue, oldValue) => {
+    currentData.value = newValue[0];
+    updateEnd.value = newValue[1];
+    developer.value = newValue[2];
+    updateData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+const scenarioCheckedItem = (data) => {
+  scenarioCheckedIndex.value = data.scenarioCheckedIndex;
+  setScenarioChecked(data.scenarioChecked);
+};
+onMounted(() => {
+  if (currentData.value) {
+    updateData();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.research-component {
+  height: 100%;
+  display: flex;
+  gap: 1.89em;
+  .content-box {
+    width: 50%;
+    height: 100%;
+    color: var(--text-color);
+    h2 {
+      font-size: 1.26em;
+      font-weight: 700;
+      line-height: 200%;
+      margin-bottom: 0.45em;
+      position: relative;
+
+      img {
+        width: 2.25em;
+        height: 2.25em;
+        margin-left: 0.405em;
+        position: absolute;
+        top: -0.18em;
+      }
+    }
+    .deduction {
+      border-radius: 11px;
+      background: var(--bg-white);
+      padding: 0.9em 0;
+      box-sizing: border-box;
+      overflow-y: hidden;
+      .deduction-content {
+        height: calc(100vh - 19.8em);
+        padding: 0 1.6875em;
+        overflow: auto;
+        &::-webkit-scrollbar-thumb {
+          background-color: #fff;
+        }
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: #e4e7ff;
+          }
+        }
+
+        .pdf-content {
+          text-align: center;
+          &.pdf-content--full {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+          img {
+            height: 18em;
+            &.pdf-image--full {
+              width: 100%;
+              height: calc(100% - 2.4em);
+              object-fit: contain;
+              object-position: center top;
+            }
+          }
+          .pdf-full {
+            font-weight: 700;
+            font-size: 0.9em;
+            line-height: 1.8em;
+            color: var(--text-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            max-width: 7.5em;
+            margin: 0 auto;
+
+            .fullscreen {
+              display: inline-block;
+              width: 1.125em;
+              height: 1.125em;
+              background: url(@/assets/playground-images/fullscreen.svg)
+                no-repeat;
+              background-size: contain;
+              margin-right: 0.45em;
+            }
+          }
+        }
+        h3 {
+          font-size: 1.1475em;
+          font-weight: 700;
+          line-height: 200%;
+          margin-bottom: 0.45em;
+          margin-top: 0.9em;
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+        p {
+          font-family: "Microsoft YaHei";
+          font-size: 0.9em;
+          line-height: 180%;
+        }
+        &.deduction-content--pdf-only {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+      .modelTask {
+        height: calc(100vh - 23.4em);
+        .task-field {
+          margin-top: 1em;
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+        .task-field-text {
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
+        .task-table-wrap {
+          overflow-x: auto;
+        }
+        .task-table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: 0.9em;
+          line-height: 180%;
+          th,
+          td {
+            padding: 0.65em 0.8em;
+            border: 1px solid #d9e2f2;
+            text-align: left;
+            vertical-align: top;
+          }
+          th {
+            background: #f5f8ff;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-box {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: rgba(255, 255, 255, 0.29);
+    backdrop-filter: blur(4.599999904632568px);
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .dialog-content {
+      width: 800px;
+      height: 80vh;
+      background-color: #fff;
+      border-radius: 18px;
+      --border-radius: 20px;
+      --border-width: 2px;
+      padding: 2em 0;
+      margin-top: -4em;
+      position: relative;
+      box-sizing: border-box;
+
+      .dialog-pdf-box {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        &::-webkit-scrollbar-thumb {
+          background-color: #fff;
+        }
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: #e4e7ff;
+          }
+        }
+      }
+      img {
+        display: block;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+      .close {
+        position: absolute;
+        right: 1.5em;
+        top: 1em;
+        width: 1.125em;
+        height: 1.125em;
+        background: url(@/assets/playground-images/close.svg) no-repeat;
+        background-size: contain;
+        cursor: pointer;
+        z-index: 1;
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+:deep(.el-table) {
+  font-size: 0.9em;
+}
+:deep(.el-table thead) {
+  color: var(--text-color);
+}
+</style>
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div id="capture" ref="capture">
+      <!-- 这里是你想要保存为图片的HTML内容 -->
+      <h1>Hello World</h1>
+    </div>
+    <button @click="saveAsImage">保存为图片</button>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import html2canvas from "html2canvas";
+
+export default {
+  setup() {
+    const capture = ref(null);
+
+    const saveAsImage = async () => {
+      try {
+        const canvas = await html2canvas(capture.value);
+        const img = canvas.toDataURL("image/png");
+
+        const link = document.createElement("a");
+        link.href = img;
+        link.download = "capture.png";
+        link.click();
+      } catch (error) {
+        console.error("Error capturing the image:", error);
+      }
+    };
+
+    return {
+      capture,
+      saveAsImage,
+    };
+  },
+};
+</script>
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <div class="select-box">
+      <div class="select-div gradient-border" @click.stop="changePopover">
+        <div>
+          <div class="checked-item" v-if="scenarioChecked">
+            <SvgIcon
+              class="select-item-icon"
+              :name="scenarioChecked.icon"
+            ></SvgIcon>
+            <span>{{
+              scenarioChecked.checkedName
+                ? scenarioChecked.checkedName
+                : scenarioChecked.name
+            }}</span>
+          </div>
+        </div>
+        <span class="down-arrow" :class="{ active: showPopover }"></span>
+      </div>
+      <div
+        class="select-drop-panel gradient-border"
+        v-show="showPopover"
+        :style="{
+          '--height':
+            scenarioList.length <= 4
+              ? scenarioList.length * 3.375 * 16 +
+                (scenarioList.length - 1) +
+                'px'
+              : '16em',
+        }"
+      >
+        <div class="select-drop-list">
+          <div
+            class="select-drop-item"
+            @click.stop="choiceScenario(item, index)"
+            v-for="(item, index) in scenarioList"
+            :key="index"
+            :style="{ 'border-color': item.color }"
+          >
+            <div
+              class="drop-item-one"
+              :class="{ active: scenarioCheckedIndex == index && !item.child }"
+            >
+              <SvgIcon
+                v-if="item.icon"
+                class="select-item-icon"
+                :name="item.icon"
+              ></SvgIcon>
+              <span>{{ item.name }}</span>
+              <span
+                class="down-arrow"
+                :class="{ active: showChild }"
+                v-if="item.child"
+              ></span>
+            </div>
+            <div v-if="item.child && showChild">
+              <div
+                class="drop-child-item"
+                @click.stop="choiceScenario(item, index, child, index2)"
+                v-for="(child, index2) in item.child"
+                :key="child.name"
+                :style="{ 'border-color': item.color }"
+                :class="{ active: scenarioChildCheckedIndex == index2 }"
+              >
+                <span>{{ child.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {
+  ref,
+  watch,
+  onMounted,
+  defineProps,
+  defineEmits,
+  nextTick,
+  onUnmounted,
+} from "vue";
+const props = defineProps({
+  scenarioList: Array,
+  scenarioIndex: Number,
+});
+const emit = defineEmits(["scenarioCheckedItem"]);
+const scenarioList = ref(props.scenarioList);
+const scenarioCheckedIndex = ref(props.scenarioIndex);
+const scenarioChildCheckedIndex = ref(-1);
+const scenarioChecked = ref(null);
+const showChild = ref(false);
+
+const showPopover = ref(false);
+
+watch(
+  () => [props.scenarioList, props.scenarioIndex],
+  (newValue, oldValue) => {
+    scenarioList.value = newValue[0];
+    scenarioCheckedIndex.value = newValue[1];
+
+    if (scenarioList.value && scenarioCheckedIndex.value >= 0) {
+      scenarioChecked.value = scenarioList.value[scenarioCheckedIndex.value];
+    } else {
+      scenarioChecked.value = null;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+const changePopover = () => {
+  if (showPopover.value) {
+    showPopover.value = false;
+  } else {
+    showPopover.value = true;
+  }
+};
+const choiceScenario = (item, index, child, index2) => {
+  if (item.child && !child) {
+    showChild.value = !showChild.value;
+    return;
+  }
+
+  scenarioCheckedIndex.value = index;
+  scenarioChecked.value = item;
+
+  scenarioChildCheckedIndex.value = -1;
+  if (child) {
+    scenarioChildCheckedIndex.value = index2;
+    scenarioChecked.value.checkedName = child.name;
+  }
+  showPopover.value = false;
+  emit("scenarioCheckedItem", {
+    scenarioCheckedIndex: scenarioCheckedIndex.value,
+    scenarioChecked: scenarioChecked.value,
+  });
+};
+const globalClickHandler = (e) => {
+  e.stopPropagation();
+  showPopover.value = false;
+};
+onMounted(() => {
+  document.addEventListener("click", globalClickHandler);
+});
+
+// 在组件被卸载前移除全局点击事件监听
+onUnmounted(() => {
+  document.removeEventListener("click", globalClickHandler);
+});
+</script>
+
+<style scoped lang="scss">
+.select-box {
+  margin-top: 1.62em;
+  margin-bottom: 2.52em;
+  position: relative;
+  .select-div {
+    display: flex;
+    height: 3.375em;
+    justify-content: space-between;
+    align-items: center;
+    --border-radius: 11px;
+    --border-width: 2px;
+    cursor: pointer;
+
+    .checked-item {
+      padding: 0.5625em 1.98em 0.5625em;
+      display: flex;
+      align-items: center;
+      .select-item-icon {
+        margin-right: 0.9em;
+      }
+      span {
+        color: var(--text-color);
+        font-size: 1.17em;
+        line-height: 200%;
+        margin-top: -2px;
+      }
+    }
+  }
+  .select-drop-panel {
+    --height: 16em;
+    --border-width: 2px;
+    --border-radius: 11px;
+    width: 100%;
+    height: calc(var(--height) + 4px);
+    position: absolute;
+    left: 0;
+    top: 3.375em;
+    cursor: pointer;
+    background-color: var(--bg-white);
+    border-radius: 13px;
+    z-index: 99;
+    overflow: hidden;
+    box-shadow: 8px 11px 30px 0px var(--wg-shadow-color);
+    .select-drop-list {
+      width: calc(100% - 4px);
+      height: var(--height);
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      z-index: 1;
+      background-color: var(--bg-white);
+      border-radius: 11px;
+      overflow: auto;
+      &::-webkit-scrollbar-thumb {
+        background-color: #fff;
+      }
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: #e4e7ff;
+        }
+      }
+    }
+    .select-drop-item {
+      border-bottom: 2px solid #2e65ff;
+
+      .drop-item-one {
+        padding: 0.5625em 1.98em 0.5625em;
+        display: flex;
+        align-items: center;
+        &:hover,
+        &.active {
+          background-color: var(--card-bg-hover-color);
+        }
+      }
+
+      .drop-child-item {
+        padding: 0.5625em 1.98em 0.5625em;
+        padding-left: 4.3em;
+        display: flex;
+        align-items: center;
+        border-top: 2px solid #2e65ff;
+        &:hover,
+        &.active {
+          background-color: var(--card-bg-hover-color);
+        }
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+      .select-item-icon {
+        margin-right: 0.9em;
+      }
+      span {
+        color: var(--text-color);
+        font-size: 1.17em;
+        line-height: 200%;
+        margin-top: -2px;
+      }
+    }
+  }
+  .down-arrow {
+    width: 20px;
+    height: 20px;
+    background: url(@/assets/images/down-arrow.svg) no-repeat;
+    background-size: contain;
+    position: absolute;
+    right: 20px;
+
+    &.active {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>
@@ -0,0 +1,250 @@
+<template>
+  <div class="select-box">
+    <div class="select-div gradient-border" @click.stop="changePopover">
+      <div>
+        <div class="checked-item" v-if="scenarioChecked">
+          <span
+            v-if="showStatus"
+            :class="{
+              success: scenarioChecked.decision,
+              fail: !scenarioChecked.decision,
+            }"
+          ></span>
+          <span :class="{ omit: showStatus }">{{ scenarioChecked.name }}</span>
+        </div>
+        <div class="checked-item checked-placeholder" v-else>
+          <span>{{ placeholder }}</span>
+        </div>
+      </div>
+      <span class="down-arrow"></span>
+    </div>
+    <div
+      class="select-drop-panel gradient-border"
+      :style="{
+        '--height':
+          optionCount <= 4
+            ? optionCount * 3.15 * 16 +
+              Math.max(optionCount - 2, 0) * 2 +
+              'px'
+            : '16em',
+      }"
+      v-show="showPopover"
+    >
+      <div class="select-drop-list">
+        <div
+          class="select-drop-item"
+          @click="choiceScenario(item, index)"
+          v-for="(item, index) in scenarioList"
+          :key="index"
+          :style="{ 'border-color': item.color }"
+          :class="{ active: scenarioCheckedIndex == index }"
+        >
+          <span
+            v-if="showStatus"
+            :class="{
+              success: item.decision,
+              fail: !item.decision,
+            }"
+          ></span>
+          <span :class="{ omit: showStatus }">{{ item.name }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  defineProps,
+  defineEmits,
+  nextTick,
+  onUnmounted,
+} from "vue";
+const props = defineProps({
+  scenarioList: Array,
+  scenarioIndex: Number,
+  showStatus: Boolean,
+  placeholder: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["scenarioCheckedItem"]);
+const scenarioCheckedIndex = ref(props.scenarioIndex);
+const scenarioList = ref(props.scenarioList);
+const scenarioChecked = ref(null);
+const optionCount = computed(() => scenarioList.value?.length || 0);
+if (scenarioList.value) {
+  scenarioChecked.value = scenarioList.value[scenarioCheckedIndex.value];
+}
+const showStatus = ref(props.showStatus);
+const placeholder = ref(props.placeholder);
+watch(
+  () => [props.scenarioList, props.scenarioIndex, props.showStatus, props.placeholder],
+  (newValue, oldValue) => {
+    scenarioList.value = newValue[0];
+    scenarioCheckedIndex.value = newValue[1];
+    showStatus.value = newValue[2];
+    placeholder.value = newValue[3];
+    if (scenarioList.value) {
+      scenarioChecked.value = scenarioList.value[scenarioCheckedIndex.value];
+    }
+  }
+);
+
+const showPopover = ref(false);
+const changePopover = () => {
+  if (showPopover.value) {
+    showPopover.value = false;
+  } else {
+    showPopover.value = true;
+  }
+};
+const choiceScenario = (item, index) => {
+  scenarioCheckedIndex.value = index;
+  scenarioChecked.value = item;
+  showPopover.value = false;
+  emit("scenarioCheckedItem", {
+    scenarioCheckedIndex: scenarioCheckedIndex.value,
+    scenarioChecked: scenarioChecked.value,
+  });
+};
+const globalClickHandler = () => {
+  showPopover.value = false;
+};
+onMounted(() => {
+  document.addEventListener("click", globalClickHandler);
+});
+
+// 在组件被卸载前移除全局点击事件监听
+onUnmounted(() => {
+  document.removeEventListener("click", globalClickHandler);
+});
+</script>
+
+<style scoped lang="scss">
+.select-box {
+  position: relative;
+  .select-div {
+    display: flex;
+    height: 2.7em;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 9px;
+    --border-radius: 11px;
+    --border-width: 2px;
+    cursor: pointer;
+    .down-arrow {
+      width: 1.35em;
+      height: 1.35em;
+      background: url(@/assets/images/down-arrow.svg) no-repeat;
+      background-size: contain;
+      position: absolute;
+      right: 1.35em;
+    }
+    .checked-item {
+      box-sizing: border-box;
+      padding: 0.5625em 1.98em 0.5625em;
+      display: flex;
+      align-items: center;
+      .select-item-icon {
+        margin-right: 0.9em;
+      }
+      span {
+        color: var(--text-color);
+        font-size: 1.0125em;
+        line-height: 200%;
+        margin-top: -2px;
+      }
+    }
+  }
+  .select-drop-panel {
+    --height: 16em;
+    width: 100%;
+    height: calc(var(--height) + 4px);
+    max-height: calc(20em + 4px);
+    position: absolute;
+    left: 0;
+    top: 2.745em;
+    cursor: pointer;
+    background-color: var(--bg-white);
+    border-radius: 11px;
+    z-index: 99;
+    overflow: hidden;
+    // box-shadow: 8px 11px 30px 0px var(--wg-shadow-color);
+    .select-drop-list {
+      width: calc(100% - 4px);
+      height: var(--height);
+      max-height: 20em;
+      overflow-y: auto;
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      z-index: 1;
+      background-color: var(--bg-white);
+      border-radius: 11px;
+    }
+    .select-drop-item {
+      padding: 0.5625em 1.98em 0.5625em;
+      border-bottom: 2px solid #2e65ff;
+      display: flex;
+      align-items: center;
+      height: 3.15em;
+      box-sizing: border-box;
+
+      &:last-child {
+
+      &.checked-placeholder {
+        span {
+          color: #868ca5;
+        }
+      }
+        border-bottom: none;
+      }
+      .select-item-icon {
+        margin-right: 0.9em;
+      }
+      span {
+        color: var(--text-color);
+        font-size: 1.0125em;
+        line-height: 200%;
+        margin-top: -2px;
+      }
+      &:hover,
+      &.active {
+        background-color: var(--card-bg-hover-color);
+      }
+    }
+  }
+  .success {
+    display: inline-block;
+    width: 1.125em;
+    height: 1.125em;
+    background: url(@/assets/playground-images/process-checked.svg) no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    margin-right: 0.45em;
+  }
+  .fail {
+    display: inline-block;
+    width: 1.125em;
+    height: 1.125em;
+    background: url(@/assets/playground-images/process-fail-checked.svg)
+      no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    margin-right: 0.45em;
+  }
+  .omit {
+    display: inline-block;
+    width: 410px;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+}
+</style>
@@ -0,0 +1,87 @@
+<template>
+  <div class="step-box">
+    <div
+      v-for="(item, index) in stepList"
+      :key="index"
+      class="step-card"
+      :class="{
+        'default-color': currentIndex < index,
+        'current-color': currentIndex == index,
+        'active-color': currentIndex > index,
+      }"
+    >
+      <SvgIcon v-if="index != 0" class="step-icon" name="right-arrow"></SvgIcon>
+      <span class="step-label"
+        ><i>{{ index + 1 }}.</i>{{ item }}</span
+      >
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, defineProps, nextTick } from "vue";
+const props = defineProps({
+  activeIndex: Number,
+});
+const currentIndex = ref(props.activeIndex);
+const stepList = ["Start", "Input Information", "Summary"];
+</script>
+
+<style scoped lang="scss">
+.step-box {
+  display: flex;
+  justify-content: center;
+  .step-card {
+    display: flex;
+    align-items: center;
+  }
+  .step-label {
+    display: flex;
+    padding: 0.65em 1em;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 1.25em;
+    font-weight: 600;
+    line-height: 200%;
+    border-radius: 999px;
+    color: var(--step-default-color);
+    border: 2px solid var(--step-default-color);
+    i {
+      margin-right: 0.75em;
+      font-style: normal;
+    }
+  }
+  .step-icon {
+    width: 2.15em;
+    height: 1.25em;
+    margin: 0 1.25em;
+  }
+  .default-color {
+    .step-label {
+      border-color: var(--step-default-color);
+      color: var(--step-default-color);
+    }
+    .step-icon {
+      color: var(--step-default-color) !important;
+    }
+  }
+  .current-color {
+    .step-label {
+      color: var(--step-current-color);
+      border-color: var(--step-current-color);
+    }
+    .step-icon {
+      color: var(--step-current-color) !important;
+    }
+  }
+  .active-color {
+    .step-label {
+      color: var(--step-active-color);
+      border-color: var(--step-active-color);
+    }
+    .step-icon {
+      color: var(--step-active-color) !important;
+    }
+  }
+}
+</style>
@@ -0,0 +1,39 @@
+<template>
+  <svg aria-hidden="true" class="svg-icon" :style="{ color: color }">
+    <use :xlink:href="symbolId" rel="external nofollow" />
+  </svg>
+</template>
+
+<script>
+import { defineComponent, computed } from "vue";
+
+export default defineComponent({
+  name: "SvgIcon",
+  props: {
+    // 使用的svg图标名称，也就是svg文件名
+    name: {
+      type: String,
+      required: true,
+    },
+    prefix: {
+      type: String,
+      default: "icon",
+    },
+    color: {
+      type: String,
+      default: "#000",
+    },
+  },
+  setup(props) {
+    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+    return { symbolId };
+  },
+});
+</script>
+<style scope>
+.svg-icon {
+  width: 26px;
+  height: 26px;
+  fill: currentColor;
+}
+</style>
@@ -0,0 +1,146 @@
+<template>
+  <swiper
+    :modules="modules"
+    :navigation="true"
+    :pagination="{ clickable: true }"
+  >
+    <swiper-slide
+      class="swiper-slide"
+      v-for="(item, index) in caseData"
+      :key="item.model + index"
+    >
+      <div class="swiper-main">
+        <p class="title">
+          <span>Care/Harm Score：</span>{{ item.score.toFixed(4) }}
+        </p>
+        <p class="title">{{ "Case" + (index + 1) + "-" + item.label }} Score</p>
+        <div class="chart-content-desc">
+          <img src="@/assets/images/Avatar-Q.png" alt="Q" />
+          <p>
+            {{ item.prompt }}
+          </p>
+        </div>
+        <div class="chart-content-desc">
+          <img src="@/assets/images/Avatar-A.png" alt="A" />
+          <p class="highlight" v-html="item.highlight"></p>
+        </div>
+      </div>
+    </swiper-slide>
+  </swiper>
+</template>
+<script>
+import { ref, watch } from "vue";
+// import Swiper core and required modules
+import { Pagination, Navigation, A11y, Autoplay } from "swiper/modules";
+
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+// Import Swiper styles
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  mounted() {
+    console.log("接收到的消息:", this.data); // 打印接收到的消息
+  },
+  setup(props) {
+    const onSwiper = (swiper) => {
+      console.log(swiper);
+    };
+    const onSlideChange = () => {
+      console.log("slide change");
+    };
+    const caseData = ref(props.data);
+    watch(
+      () => props.data,
+      (newMessage, oldMessage) => {
+        caseData.value = newMessage;
+        console.log(caseData.value);
+      }
+    );
+    return {
+      onSwiper,
+      onSlideChange,
+      modules: [Pagination, Navigation, A11y, Autoplay],
+      caseData,
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.swiper-slide {
+  width: 100%;
+  padding-bottom: 3.25em;
+  box-sizing: border-box;
+  padding: 2.5em 0 2.5em 0;
+  .swiper-main {
+    padding: 0 4em;
+    height: 21em;
+    overflow: auto;
+  }
+  .title {
+    font-size: 1em;
+    color: #fff;
+    line-height: 2em;
+    span {
+      color: #ffd000;
+    }
+  }
+  .chart-content-desc {
+    display: flex;
+    margin-top: 1.625em;
+    img {
+      display: block;
+      width: 1.875em;
+      height: 1.875em;
+      margin-right: 1.625em;
+    }
+    p {
+      width: 31.43em;
+      font-size: 0.875em;
+      color: #fff;
+      line-height: 1.8em;
+    }
+  }
+}
+
+:deep(.swiper-pagination-bullet) {
+  width: 1em;
+  height: 3px;
+  background-color: #fff;
+  opacity: 0.3;
+  border-radius: 1px;
+}
+:deep(.swiper-pagination-bullet-active) {
+  width: 1.25em;
+  opacity: 1;
+}
+:deep(.swiper-button-prev),
+:deep(.swiper-button-next) {
+  width: 22px;
+  height: 22px;
+  color: #fff;
+}
+:deep(.swiper-button-prev:after),
+:deep(.swiper-button-next:after) {
+  font-size: 1em;
+}
+:deep(.highlight i) {
+  color: #90e0ef;
+  font-weight: 500;
+  line-height: 1.8em;
+}
+</style>
@@ -0,0 +1,436 @@
+<template>
+  <div
+    class="upload"
+    :class="{ finished: displayProgress >= 100 }"
+    :style="{ '--percent': displayProgress }"
+  >
+    <div class="text">
+      <strong><span>{{ displayProgress >= 100 ? "Uploaded" : "Uploading" }}</span> files</strong>
+      <div>
+        <small>%</small>
+        <div>
+          <small>
+            <span>{{ secondsLeftDisplay }}</span> seconds left
+          </small>
+        </div>
+      </div>
+    </div>
+    <nav>
+      <ul>
+        <li>
+          <a href="javascript:;" class="btn cancel" @click="cancelUpload"></a>
+        </li>
+      </ul>
+    </nav>
+    <div class="percent">
+      <span></span>
+      <div>
+        <svg preserveAspectRatio="none" viewBox="0 0 600 12">
+          <path
+            d="M0,1 L200,1 C300,1 300,11 400,11 L600,11"
+            stroke="currentColor"
+            fill="none"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed, defineProps, defineEmits, ref, watch } from "vue";
+const props = defineProps({
+  progress: {
+    type: Number,
+    default: 0,
+  },
+});
+const emit = defineEmits(["cancelUpload"]);
+const displayProgress = ref(0);
+const startedAt = ref(0);
+const secondsLeft = ref(0);
+
+const secondsLeftDisplay = computed(() => {
+  if (displayProgress.value >= 100) {
+    return 0;
+  }
+  return Math.max(0, secondsLeft.value);
+});
+
+watch(
+  () => props.progress,
+  (value) => {
+    const safeValue = Number.isFinite(value) ? value : 0;
+    const next = Math.max(0, Math.min(100, Math.floor(safeValue)));
+    if (displayProgress.value === 0 && next > 0) {
+      startedAt.value = Date.now();
+    }
+    displayProgress.value = next;
+
+    if (next <= 0 || !startedAt.value) {
+      secondsLeft.value = 0;
+      return;
+    }
+    if (next >= 100) {
+      secondsLeft.value = 0;
+      return;
+    }
+
+    const elapsedMs = Date.now() - startedAt.value;
+    const estimatedTotalMs = (elapsedMs * 100) / next;
+    const remainMs = Math.max(0, estimatedTotalMs - elapsedMs);
+    secondsLeft.value = Math.ceil(remainMs / 1000);
+  },
+  { immediate: true }
+);
+
+const cancelUpload = () => {
+  emit("cancelUpload", true);
+};
+</script>
+
+<style scoped lang="scss">
+.upload {
+  --percent: 0;
+  counter-increment: percent var(--percent);
+  background: #fff;
+  border-radius: 40px;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 4px 16px -1px rgba(18, 22, 33, 0.05);
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding: 0 3em 2.3em;
+  box-sizing: border-box;
+  font-family: Roboto, Arial;
+  //Safari fix
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  .percent {
+    background: #eeefff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    transform-origin: 0 50%;
+    overflow: hidden;
+    transition: background 0.6s ease, transform 0.16s ease;
+    transform: scaleX(calc(var(--percent) / 100));
+    span {
+      display: block;
+      position: absolute;
+      right: 3em;
+      width: 100%;
+      top: 54%;
+      // top: 3em;
+      // height: 3em;
+      opacity: 0;
+      transform: translateY(0.5px);
+      transition: transform 0.8s ease;
+      &:before,
+      &:after {
+        --r: 0;
+        --s: 0.5;
+        content: "";
+        position: absolute;
+        top: 0;
+        height: 3px;
+        border-radius: 1px;
+        background: #5628ee;
+        transition: background 0.8s ease, transform 0.8s ease, height 0.3s ease;
+        transform: rotate(var(--r)) scaleY(var(--s));
+      }
+      &:before {
+        right: 0;
+        width: 64%;
+        transform-origin: 0 50%;
+      }
+      &:after {
+        left: 0;
+        width: 38%;
+        transform-origin: 100% 50%;
+      }
+    }
+    div {
+      --x: 0;
+      transform: translateX(var(--x));
+      transition: transform 1s ease;
+      position: absolute;
+      left: 0;
+      bottom: 20%;
+      width: 300%;
+    }
+    svg {
+      display: block;
+      height: 12px;
+      width: 100%;
+      stroke-width: 4px;
+      color: #5628ee;
+      color: linear-gradient(
+          90deg,
+          #3563ff -15.99%,
+          #6b52ff 43.81%,
+          #9146ff 101.25%
+        ),
+        #000;
+      transition: color 0.5s ease;
+    }
+  }
+  &.paused {
+    &:not(.finished) {
+      .percent {
+        div {
+          --x: -66.66%;
+          svg {
+            color: #cdd9ed;
+            animation: down 0.8s linear forwards;
+          }
+        }
+      }
+      .text {
+        & > div {
+          div {
+            small {
+              &:first-child {
+                opacity: 0;
+              }
+              &:last-child {
+                opacity: 1;
+                transition-delay: 0.4s;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.finished {
+    .percent {
+      background: #fff;
+      span {
+        opacity: 1;
+        transform: translate(-20px, -19px);
+        &:before,
+        &:after {
+          --s: 1;
+          background: #99a3ba;
+          transition: background 0.6s ease, transform 0.6s ease 0.45s;
+          animation: check 0.4s linear forwards 0.6s;
+        }
+        &:before {
+          --r: -50deg;
+        }
+        &:after {
+          --r: 38deg;
+        }
+      }
+      svg {
+        opacity: 0;
+      }
+    }
+    .text {
+      --y: 0;
+      & > div {
+        opacity: 0;
+      }
+    }
+    nav {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+  .text {
+    --y: -18px;
+    position: relative;
+    z-index: 1;
+    transform: translateY(var(--y));
+    transition: transform 0.6s ease;
+    strong {
+      display: block;
+      color: #7209b7;
+      font-size: 1.3em;
+      font-weight: 700;
+      line-height: 200%;
+    }
+    & > div {
+      position: absolute;
+      left: 0;
+      top: 100%;
+      transform: translateY(6px);
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      transition: opacity 0.4s ease;
+      small {
+        white-space: nowrap;
+        vertical-align: top;
+        display: block;
+        color: #7209b7;
+        font-size: 1em;
+      }
+      & > small {
+        width: 30px;
+        text-align: center;
+        &:before {
+          content: counter(percent);
+        }
+      }
+      div {
+        vertical-align: top;
+        display: inline-block;
+        position: relative;
+        margin-left: 4px;
+        &:before {
+          content: "";
+          width: 2px;
+          height: 2px;
+          display: block;
+          border-radius: 50%;
+          background: #99a3ba;
+          display: inline-block;
+          vertical-align: top;
+          margin-top: 9px;
+        }
+        small {
+          position: absolute;
+          top: 0;
+          left: 8px;
+          transition: opacity 0.3s ease;
+          &:first-child {
+            transition-delay: 0.4s;
+          }
+          &:last-child {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+  nav {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    transition: opacity 0.4s ease;
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &:first-child {
+        --y: 8px;
+        opacity: 0;
+        transform: translateY(var(--y));
+        transition: opacity 0.3s ease, transform 0.4s ease;
+      }
+      li {
+        &:not(:last-child) {
+          margin-right: 12px;
+        }
+        a {
+          --r: 0deg;
+          --s: 1.01;
+          display: block;
+          transform: rotate(var(--r)) scale(var(--s)) translateZ(0);
+          transition: transform 0.6s ease, background 0.4s ease;
+          svg {
+            display: block;
+            width: 24px;
+            height: 24px;
+            color: #99a3ba;
+            color: #919090;
+          }
+          &:active {
+            --s: 0.84;
+            transition: transform 0.3s ease, background 0.4s ease;
+          }
+          &.dots {
+            --r: 90deg;
+          }
+          &.btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            position: relative;
+            background: rgba(170, 166, 166, 0.27);
+            svg {
+              position: absolute;
+              left: 9px;
+              top: 9px;
+              width: 18px;
+              height: 18px;
+            }
+            &:hover {
+              background: #e4ecfa;
+            }
+            &.play {
+              --r: 90deg;
+              svg {
+                &:last-child {
+                  transform: scale(-1) translateZ(0);
+                }
+              }
+              &.active {
+                --r: 0;
+              }
+            }
+            &.cancel {
+              &:before,
+              &:after {
+                --r: -45deg;
+                content: "";
+                display: block;
+                width: 3px;
+                border-radius: 1px;
+                height: 18px;
+                background: #919090;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                margin: -9px 0 0 -2px;
+                transform: rotate(var(--r)) scale(0.9) translateZ(0);
+              }
+              &:after {
+                --r: 45deg;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &:hover {
+    nav {
+      ul {
+        &:first-child {
+          --y: 0;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+@keyframes down {
+  40% {
+    transform: translateY(2px);
+  }
+}
+
+@keyframes check {
+  100% {
+    background: linear-gradient(
+        90deg,
+        #3563ff -15.99%,
+        #6b52ff 43.81%,
+        #9146ff 101.25%
+      ),
+      var(--Color, #000);
+  }
+}
+</style>
@@ -0,0 +1,77 @@
+export const kaggleCompetitions = [
+  { name: "MLE-Bench:new-york-city-taxi-fare-prediction" },
+  { name: "MLE-Bench:3d-object-detection-for-autonomous-vehicles" },
+  { name: "MLE-Bench:aerial-cactus-identification" },
+  { name: "MLE-Bench:AI4Code" },
+  { name: "MLE-Bench:alaska2-image-steganalysis" },
+  { name: "MLE-Bench:aptos2019-blindness-detection" },
+  { name: "MLE-Bench:billion-word-imputation" },
+  { name: "MLE-Bench:bms-molecular-translation" },
+  { name: "MLE-Bench:cassava-leaf-disease-classification" },
+  { name: "MLE-Bench:cdiscount-image-classification-challenge" },
+  { name: "MLE-Bench:chaii-hindi-and-tamil-question-answering" },
+  { name: "MLE-Bench:champs-scalar-coupling" },
+  { name: "MLE-Bench:denoising-dirty-documents" },
+  { name: "MLE-Bench:detecting-insults-in-social-commentary" },
+  { name: "MLE-Bench:dog-breed-identification" },
+  { name: "MLE-Bench:dogs-vs-cats-redux-kernels-edition" },
+  { name: "MLE-Bench:facebook-recruiting-iii-keyword-extraction" },
+  { name: "MLE-Bench:freesound-audio-tagging-2019" },
+  { name: "MLE-Bench:google-quest-challenge" },
+  { name: "MLE-Bench:google-research-identify-contrails-reduce-global-warming" },
+  { name: "MLE-Bench:h-and-m-personalized-fashion-recommendations" },
+  { name: "MLE-Bench:herbarium-2020-fgvc7" },
+  { name: "MLE-Bench:herbarium-2021-fgvc8" },
+  { name: "MLE-Bench:herbarium-2022-fgvc9" },
+  { name: "MLE-Bench:histopathologic-cancer-detection" },
+  { name: "MLE-Bench:hms-harmful-brain-activity-classification" },
+  { name: "MLE-Bench:hotel-id-2021-fgvc8" },
+  { name: "MLE-Bench:hubmap-kidney-segmentation" },
+  { name: "MLE-Bench:icecube-neutrinos-in-deep-ice" },
+  { name: "MLE-Bench:imet-2020-fgvc7" },
+  { name: "MLE-Bench:inaturalist-2019-fgvc6" },
+  { name: "MLE-Bench:iwildcam-2019-fgvc6" },
+  { name: "MLE-Bench:iwildcam-2020-fgvc7" },
+  { name: "MLE-Bench:jigsaw-toxic-comment-classification-challenge" },
+  { name: "MLE-Bench:jigsaw-unintended-bias-in-toxicity-classification" },
+  { name: "MLE-Bench:kuzushiji-recognition" },
+  { name: "MLE-Bench:leaf-classification" },
+  { name: "MLE-Bench:learning-agency-lab-automated-essay-scoring-2" },
+  { name: "MLE-Bench:lmsys-chatbot-arena" },
+  { name: "MLE-Bench:mlsp-2013-birds" },
+  { name: "MLE-Bench:multi-modal-gesture-recognition" },
+  { name: "MLE-Bench:nfl-player-contact-detection" },
+  { name: "MLE-Bench:nomad2018-predict-transparent-conductors" },
+  { name: "MLE-Bench:osic-pulmonary-fibrosis-progression" },
+  { name: "MLE-Bench:petfinder-pawpularity-score" },
+  { name: "MLE-Bench:plant-pathology-2020-fgvc7" },
+  { name: "MLE-Bench:plant-pathology-2021-fgvc8" },
+  { name: "MLE-Bench:predict-volcanic-eruptions-ingv-oe" },
+  { name: "MLE-Bench:random-acts-of-pizza" },
+  { name: "MLE-Bench:ranzcr-clip-catheter-line-classification" },
+  { name: "MLE-Bench:rsna-2022-cervical-spine-fracture-detection" },
+  { name: "MLE-Bench:rsna-breast-cancer-detection" },
+  { name: "MLE-Bench:rsna-miccai-brain-tumor-radiogenomic-classification" },
+  { name: "MLE-Bench:seti-breakthrough-listen" },
+  { name: "MLE-Bench:siim-covid19-detection" },
+  { name: "MLE-Bench:siim-isic-melanoma-classification" },
+  { name: "MLE-Bench:smartphone-decimeter-2022" },
+  { name: "MLE-Bench:spooky-author-identification" },
+  { name: "MLE-Bench:stanford-covid-vaccine" },
+  { name: "MLE-Bench:statoil-iceberg-classifier-challenge" },
+  { name: "MLE-Bench:tabular-playground-series-dec-2021" },
+  { name: "MLE-Bench:tabular-playground-series-may-2022" },
+  { name: "MLE-Bench:tensorflow2-question-answering" },
+  { name: "MLE-Bench:tensorflow-speech-recognition-challenge" },
+  { name: "MLE-Bench:text-normalization-challenge-english-language" },
+  { name: "MLE-Bench:text-normalization-challenge-russian-language" },
+  { name: "MLE-Bench:tgs-salt-identification-challenge" },
+  { name: "MLE-Bench:the-icml-2013-whale-challenge-right-whale-redux" },
+  { name: "MLE-Bench:tweet-sentiment-extraction" },
+  { name: "MLE-Bench:us-patent-phrase-to-phrase-matching" },
+  { name: "MLE-Bench:uw-madison-gi-tract-image-segmentation" },
+  { name: "MLE-Bench:ventilator-pressure-prediction" },
+  { name: "MLE-Bench:vesuvius-challenge-ink-detection" },
+  { name: "MLE-Bench:vinbigdata-chest-xray-abnormalities-detection" },
+  { name: "MLE-Bench:whale-categorization-playground" },
+];
@@ -0,0 +1,162 @@
+const ALPHA158 = {
+    "KMID": "($close-$open)/$open",
+    "KLEN": "($high-$low)/$open",
+    "KMID2": "($close-$open)/($high-$low+1e-12)",
+    "KUP": "($high-Greater($open, $close))/$open",
+    "KUP2": "($high-Greater($open, $close))/($high-$low+1e-12)",
+    "KLOW": "(Less($open, $close)-$low)/$open",
+    "KLOW2": "(Less($open, $close)-$low)/($high-$low+1e-12)",
+    "KSFT": "(2*$close-$high-$low)/$open",
+    "KSFT2": "(2*$close-$high-$low)/($high-$low+1e-12)",
+    "OPEN0": "$open/$close",
+    "HIGH0": "$high/$close",
+    "LOW0": "$low/$close",
+    "VWAP0": "$vwap/$close",
+    "ROC5": "Ref($close, 5)/$close",
+    "ROC10": "Ref($close, 10)/$close",
+    "ROC20": "Ref($close, 20)/$close",
+    "ROC30": "Ref($close, 30)/$close",
+    "ROC60": "Ref($close, 60)/$close",
+    "MA5": "Mean($close, 5)/$close",
+    "MA10": "Mean($close, 10)/$close",
+    "MA20": "Mean($close, 20)/$close",
+    "MA30": "Mean($close, 30)/$close",
+    "MA60": "Mean($close, 60)/$close",
+    "STD5": "Std($close, 5)/$close",
+    "STD10": "Std($close, 10)/$close",
+    "STD20": "Std($close, 20)/$close",
+    "STD30": "Std($close, 30)/$close",
+    "STD60": "Std($close, 60)/$close",
+    "BETA5": "Slope($close, 5)/$close",
+    "BETA10": "Slope($close, 10)/$close",
+    "BETA20": "Slope($close, 20)/$close",
+    "BETA30": "Slope($close, 30)/$close",
+    "BETA60": "Slope($close, 60)/$close",
+    "RSQR5": "Rsquare($close, 5)",
+    "RSQR10": "Rsquare($close, 10)",
+    "RSQR20": "Rsquare($close, 20)",
+    "RSQR30": "Rsquare($close, 30)",
+    "RSQR60": "Rsquare($close, 60)",
+    "RESI5": "Resi($close, 5)/$close",
+    "RESI10": "Resi($close, 10)/$close",
+    "RESI20": "Resi($close, 20)/$close",
+    "RESI30": "Resi($close, 30)/$close",
+    "RESI60": "Resi($close, 60)/$close",
+    "MAX5": "Max($high, 5)/$close",
+    "MAX10": "Max($high, 10)/$close",
+    "MAX20": "Max($high, 20)/$close",
+    "MAX30": "Max($high, 30)/$close",
+    "MAX60": "Max($high, 60)/$close",
+    "MIN5": "Min($low, 5)/$close",
+    "MIN10": "Min($low, 10)/$close",
+    "MIN20": "Min($low, 20)/$close",
+    "MIN30": "Min($low, 30)/$close",
+    "MIN60": "Min($low, 60)/$close",
+    "QTLU5": "Quantile($close, 5, 0.8)/$close",
+    "QTLU10": "Quantile($close, 10, 0.8)/$close",
+    "QTLU20": "Quantile($close, 20, 0.8)/$close",
+    "QTLU30": "Quantile($close, 30, 0.8)/$close",
+    "QTLU60": "Quantile($close, 60, 0.8)/$close",
+    "QTLD5": "Quantile($close, 5, 0.2)/$close",
+    "QTLD10": "Quantile($close, 10, 0.2)/$close",
+    "QTLD20": "Quantile($close, 20, 0.2)/$close",
+    "QTLD30": "Quantile($close, 30, 0.2)/$close",
+    "QTLD60": "Quantile($close, 60, 0.2)/$close",
+    "RANK5": "Rank($close, 5)",
+    "RANK10": "Rank($close, 10)",
+    "RANK20": "Rank($close, 20)",
+    "RANK30": "Rank($close, 30)",
+    "RANK60": "Rank($close, 60)",
+    "RSV5": "($close-Min($low, 5))/(Max($high, 5)-Min($low, 5)+1e-12)",
+    "RSV10": "($close-Min($low, 10))/(Max($high, 10)-Min($low, 10)+1e-12)",
+    "RSV20": "($close-Min($low, 20))/(Max($high, 20)-Min($low, 20)+1e-12)",
+    "RSV30": "($close-Min($low, 30))/(Max($high, 30)-Min($low, 30)+1e-12)",
+    "RSV60": "($close-Min($low, 60))/(Max($high, 60)-Min($low, 60)+1e-12)",
+    "IMAX5": "IdxMax($high, 5)/5",
+    "IMAX10": "IdxMax($high, 10)/10",
+    "IMAX20": "IdxMax($high, 20)/20",
+    "IMAX30": "IdxMax($high, 30)/30",
+    "IMAX60": "IdxMax($high, 60)/60",
+    "IMIN5": "IdxMin($low, 5)/5",
+    "IMIN10": "IdxMin($low, 10)/10",
+    "IMIN20": "IdxMin($low, 20)/20",
+    "IMIN30": "IdxMin($low, 30)/30",
+    "IMIN60": "IdxMin($low, 60)/60",
+    "IMXD5": "(IdxMax($high, 5)-IdxMin($low, 5))/5",
+    "IMXD10": "(IdxMax($high, 10)-IdxMin($low, 10))/10",
+    "IMXD20": "(IdxMax($high, 20)-IdxMin($low, 20))/20",
+    "IMXD30": "(IdxMax($high, 30)-IdxMin($low, 30))/30",
+    "IMXD60": "(IdxMax($high, 60)-IdxMin($low, 60))/60",
+    "CORR5": "Corr($close, Log($volume+1), 5)",
+    "CORR10": "Corr($close, Log($volume+1), 10)",
+    "CORR20": "Corr($close, Log($volume+1), 20)",
+    "CORR30": "Corr($close, Log($volume+1), 30)",
+    "CORR60": "Corr($close, Log($volume+1), 60)",
+    "CORD5": "Corr($close/Ref($close,1), Log($volume/Ref($volume, 1)+1), 5)",
+    "CORD10": "Corr($close/Ref($close,1), Log($volume/Ref($volume, 1)+1), 10)",
+    "CORD20": "Corr($close/Ref($close,1), Log($volume/Ref($volume, 1)+1), 20)",
+    "CORD30": "Corr($close/Ref($close,1), Log($volume/Ref($volume, 1)+1), 30)",
+    "CORD60": "Corr($close/Ref($close,1), Log($volume/Ref($volume, 1)+1), 60)",
+    "CNTP5": "Mean($close>Ref($close, 1), 5)",
+    "CNTP10": "Mean($close>Ref($close, 1), 10)",
+    "CNTP20": "Mean($close>Ref($close, 1), 20)",
+    "CNTP30": "Mean($close>Ref($close, 1), 30)",
+    "CNTP60": "Mean($close>Ref($close, 1), 60)",
+    "CNTN5": "Mean($close<Ref($close, 1), 5)",
+    "CNTN10": "Mean($close<Ref($close, 1), 10)",
+    "CNTN20": "Mean($close<Ref($close, 1), 20)",
+    "CNTN30": "Mean($close<Ref($close, 1), 30)",
+    "CNTN60": "Mean($close<Ref($close, 1), 60)",
+    "CNTD5": "Mean($close>Ref($close, 1), 5)-Mean($close<Ref($close, 1), 5)",
+    "CNTD10": "Mean($close>Ref($close, 1), 10)-Mean($close<Ref($close, 1), 10)",
+    "CNTD20": "Mean($close>Ref($close, 1), 20)-Mean($close<Ref($close, 1), 20)",
+    "CNTD30": "Mean($close>Ref($close, 1), 30)-Mean($close<Ref($close, 1), 30)",
+    "CNTD60": "Mean($close>Ref($close, 1), 60)-Mean($close<Ref($close, 1), 60)",
+    "SUMP5": "Sum(Greater($close-Ref($close, 1), 0), 5)/(Sum(Abs($close-Ref($close, 1)), 5)+1e-12)",
+    "SUMP10": "Sum(Greater($close-Ref($close, 1), 0), 10)/(Sum(Abs($close-Ref($close, 1)), 10)+1e-12)",
+    "SUMP20": "Sum(Greater($close-Ref($close, 1), 0), 20)/(Sum(Abs($close-Ref($close, 1)), 20)+1e-12)",
+    "SUMP30": "Sum(Greater($close-Ref($close, 1), 0), 30)/(Sum(Abs($close-Ref($close, 1)), 30)+1e-12)",
+    "SUMP60": "Sum(Greater($close-Ref($close, 1), 0), 60)/(Sum(Abs($close-Ref($close, 1)), 60)+1e-12)",
+    "SUMN5": "Sum(Greater(Ref($close, 1)-$close, 0), 5)/(Sum(Abs($close-Ref($close, 1)), 5)+1e-12)",
+    "SUMN10": "Sum(Greater(Ref($close, 1)-$close, 0), 10)/(Sum(Abs($close-Ref($close, 1)), 10)+1e-12)",
+    "SUMN20": "Sum(Greater(Ref($close, 1)-$close, 0), 20)/(Sum(Abs($close-Ref($close, 1)), 20)+1e-12)",
+    "SUMN30": "Sum(Greater(Ref($close, 1)-$close, 0), 30)/(Sum(Abs($close-Ref($close, 1)), 30)+1e-12)",
+    "SUMN60": "Sum(Greater(Ref($close, 1)-$close, 0), 60)/(Sum(Abs($close-Ref($close, 1)), 60)+1e-12)",
+    "SUMD5": "(Sum(Greater($close-Ref($close, 1), 0), 5)-Sum(Greater(Ref($close, 1)-$close, 0), 5))/(Sum(Abs($close-Ref($close, 1)), 5)+1e-12)",
+    "SUMD10": "(Sum(Greater($close-Ref($close, 1), 0), 10)-Sum(Greater(Ref($close, 1)-$close, 0), 10))/(Sum(Abs($close-Ref($close, 1)), 10)+1e-12)",
+    "SUMD20": "(Sum(Greater($close-Ref($close, 1), 0), 20)-Sum(Greater(Ref($close, 1)-$close, 0), 20))/(Sum(Abs($close-Ref($close, 1)), 20)+1e-12)",
+    "SUMD30": "(Sum(Greater($close-Ref($close, 1), 0), 30)-Sum(Greater(Ref($close, 1)-$close, 0), 30))/(Sum(Abs($close-Ref($close, 1)), 30)+1e-12)",
+    "SUMD60": "(Sum(Greater($close-Ref($close, 1), 0), 60)-Sum(Greater(Ref($close, 1)-$close, 0), 60))/(Sum(Abs($close-Ref($close, 1)), 60)+1e-12)",
+    "VMA5": "Mean($volume, 5)/($volume+1e-12)",
+    "VMA10": "Mean($volume, 10)/($volume+1e-12)",
+    "VMA20": "Mean($volume, 20)/($volume+1e-12)",
+    "VMA30": "Mean($volume, 30)/($volume+1e-12)",
+    "VMA60": "Mean($volume, 60)/($volume+1e-12)",
+    "VSTD5": "Std($volume, 5)/($volume+1e-12)",
+    "VSTD10": "Std($volume, 10)/($volume+1e-12)",
+    "VSTD20": "Std($volume, 20)/($volume+1e-12)",
+    "VSTD30": "Std($volume, 30)/($volume+1e-12)",
+    "VSTD60": "Std($volume, 60)/($volume+1e-12)",
+    "WVMA5": "Std(Abs($close/Ref($close, 1)-1)*$volume, 5)/(Mean(Abs($close/Ref($close, 1)-1)*$volume, 5)+1e-12)",
+    "WVMA10": "Std(Abs($close/Ref($close, 1)-1)*$volume, 10)/(Mean(Abs($close/Ref($close, 1)-1)*$volume, 10)+1e-12)",
+    "WVMA20": "Std(Abs($close/Ref($close, 1)-1)*$volume, 20)/(Mean(Abs($close/Ref($close, 1)-1)*$volume, 20)+1e-12)",
+    "WVMA30": "Std(Abs($close/Ref($close, 1)-1)*$volume, 30)/(Mean(Abs($close/Ref($close, 1)-1)*$volume, 30)+1e-12)",
+    "WVMA60": "Std(Abs($close/Ref($close, 1)-1)*$volume, 60)/(Mean(Abs($close/Ref($close, 1)-1)*$volume, 60)+1e-12)",
+    "VSUMP5": "Sum(Greater($volume-Ref($volume, 1), 0), 5)/(Sum(Abs($volume-Ref($volume, 1)), 5)+1e-12)",
+    "VSUMP10": "Sum(Greater($volume-Ref($volume, 1), 0), 10)/(Sum(Abs($volume-Ref($volume, 1)), 10)+1e-12)",
+    "VSUMP20": "Sum(Greater($volume-Ref($volume, 1), 0), 20)/(Sum(Abs($volume-Ref($volume, 1)), 20)+1e-12)",
+    "VSUMP30": "Sum(Greater($volume-Ref($volume, 1), 0), 30)/(Sum(Abs($volume-Ref($volume, 1)), 30)+1e-12)",
+    "VSUMP60": "Sum(Greater($volume-Ref($volume, 1), 0), 60)/(Sum(Abs($volume-Ref($volume, 1)), 60)+1e-12)",
+    "VSUMN5": "Sum(Greater(Ref($volume, 1)-$volume, 0), 5)/(Sum(Abs($volume-Ref($volume, 1)), 5)+1e-12)",
+    "VSUMN10": "Sum(Greater(Ref($volume, 1)-$volume, 0), 10)/(Sum(Abs($volume-Ref($volume, 1)), 10)+1e-12)",
+    "VSUMN20": "Sum(Greater(Ref($volume, 1)-$volume, 0), 20)/(Sum(Abs($volume-Ref($volume, 1)), 20)+1e-12)",
+    "VSUMN30": "Sum(Greater(Ref($volume, 1)-$volume, 0), 30)/(Sum(Abs($volume-Ref($volume, 1)), 30)+1e-12)",
+    "VSUMN60": "Sum(Greater(Ref($volume, 1)-$volume, 0), 60)/(Sum(Abs($volume-Ref($volume, 1)), 60)+1e-12)",
+    "VSUMD5": "(Sum(Greater($volume-Ref($volume, 1), 0), 5)-Sum(Greater(Ref($volume, 1)-$volume, 0), 5))/(Sum(Abs($volume-Ref($volume, 1)), 5)+1e-12)",
+    "VSUMD10": "(Sum(Greater($volume-Ref($volume, 1), 0), 10)-Sum(Greater(Ref($volume, 1)-$volume, 0), 10))/(Sum(Abs($volume-Ref($volume, 1)), 10)+1e-12)",
+    "VSUMD20": "(Sum(Greater($volume-Ref($volume, 1), 0), 20)-Sum(Greater(Ref($volume, 1)-$volume, 0), 20))/(Sum(Abs($volume-Ref($volume, 1)), 20)+1e-12)",
+    "VSUMD30": "(Sum(Greater($volume-Ref($volume, 1), 0), 30)-Sum(Greater(Ref($volume, 1)-$volume, 0), 30))/(Sum(Abs($volume-Ref($volume, 1)), 30)+1e-12)",
+    "VSUMD60": "(Sum(Greater($volume-Ref($volume, 1), 0), 60)-Sum(Greater(Ref($volume, 1)-$volume, 0), 60))/(Sum(Abs($volume-Ref($volume, 1)), 60)+1e-12)"
+};
+
+export default ALPHA158;
@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import './common/reset.css'
+// import './common/code-theme.css'
+import './style.css'
+// import 'prismjs/themes/prism.css';
+import './common/py-theme.css'
+import App from './App.vue'
+import router from './router/index'
+import 'virtual:svg-icons-register'
+import SvgIcon from './components/svgIcon.vue'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App);
+app.component('SvgIcon', SvgIcon)
+app.use(router)
+app.mount('#app')
@@ -0,0 +1,68 @@
+import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('../views/Home.vue'),
+    meta: {
+      keepAlive: true, //此页面需要缓存
+      requiresFrontEndAuth: true,
+      footerBg: "#F6FAFF"
+    },
+  },
+  {
+    path: '/Playground',
+    name: 'Playground',
+    component: () => import('../views/Playground.vue'),
+    meta: {
+      keepAlive: false, //此页面需要缓存
+      requiresFrontEndAuth: true,
+      footerBg: "#fff"
+    },
+  },
+  {
+    path: '/PlaygroundPage',
+    name: 'PlaygroundPage',
+    component: () => import('../views/PlaygroundPage.vue'),
+    meta: {
+      keepAlive: false, //此页面需要缓存
+      requiresFrontEndAuth: true,
+      footerBg: "#fff"
+    },
+  }
+  // {
+  //   path: '/Login',
+  //   name: 'Login',
+  //   component: () => import('../views/Login.vue'),
+  //   meta: {
+  //     keepAlive: false, //此页面需要缓存
+  //     requiresFrontEndAuth: false
+  //   },
+  // }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+// 前端添加密码，防止release流程未走完，外部人员访问
+// router.beforeEach((to, from, next) => {
+//   console.log(from)
+//     if (!!to.meta && to.meta.requiresFrontEndAuth === false) {
+//         //这里判断用户是否登录，验证本地存储是否有token
+//         next();
+//         return;
+//     }
+//     if (!sessionStorage.getItem("token")) { // 判断当前的token是否存在
+//         next({
+//             name: 'Login',
+//             query: { redirect: to.fullPath }
+//         })
+//     } else {
+//         next();
+//     }
+// })
+
+export default router
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
@@ -0,0 +1,139 @@
+:root {
+    font-family: "Segoe UI";
+    line-height: 1.5;
+    font-weight: 400;
+    --text-color: #2B2B2B;
+    --nav-hover-color: #9E9E9E;
+    --nav-default-color: #C3CEDC;
+    --sub-text-color: #3B3B3B;
+    --intro-text-color: #626C80;
+    --no-active-text-color: #626C80;
+    --footer-text-color: rgba(37, 37, 37, 0.78);
+    --btn-color: #353535;
+    --text-white-color: #fff;
+    --bg-white: #FFFFFF;
+    --bg-grey: #F6FAFF;
+    --bg-white-blue-color: #f8f9ff;
+    --bg-black: #2B2B2B;
+    --border-color: #2B2B2B;
+    --step-default-color: #C5D2E6;
+    --step-current-color: #4361EE;
+    --step-active-color: #626C80;
+    --blue-border-color: #4895EF;
+    --card-border-color: #2667FF;
+    --card-bg-hover-color: #EEEFFF;
+    --wg-shadow-color: #EDF0FF;
+    --border-width: 1px;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background: var(--bg-white);
+    overflow: hidden;
+}
+
+.component {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+
+button:focus,
+button:focus-visible {
+    outline: none;
+}
+
+.card {
+    padding: 2em;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    font-family: Segoe UI;
+}
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    box-sizing: border-box;
+}
+
+.gradient-border {
+    --border-width: 2px;
+    --border-radius: 11px;
+    position: relative;
+    background: #fff;
+    border-radius: calc(var(--border-radius) - 2px);
+    &::after {
+        position: absolute;
+        content: "";
+        top: calc(-1 * var(--border-width));
+        left: calc(-1 * var(--border-width));
+        z-index: -1;
+        width: calc(100% + var(--border-width) * 2);
+        height: calc(100% + var(--border-width) * 2);
+        background: linear-gradient( to bottom, #2768FF, #9D42FF);
+        background-position: 0 50%;
+        border-radius: var(--border-radius);
+        box-shadow: 8px 11px 30px 0px var(--wg-shadow-color);
+    }
+}
+
+.gradient-big-border {
+    --border-width: 2px;
+    --border-radius: 20px;
+    position: relative;
+    background: #fff;
+    border-radius: calc(var(--border-radius) - 2px);
+    &::after {
+        position: absolute;
+        content: "";
+        top: calc(-1 * var(--border-width));
+        left: calc(-1 * var(--border-width));
+        z-index: -1;
+        width: calc(100% + var(--border-width) * 2);
+        height: calc(100% + var(--border-width) * 2);
+        background: linear-gradient( to bottom, #2768FF, #9D42FF);
+        background-position: 0 50%;
+        border-radius: var(--border-radius);
+        box-shadow: 8px 11px 30px 0px var(--wg-shadow-color);
+    }
+}
+
+.el-popper__arrow,
+.el-popper__arrow:before {
+    width: 15px !important;
+    height: 15px !important;
+}
+
+.el-popper[data-popper-placement^=bottom]>.el-popper__arrow {
+    top: -8px !important;
+}
+
+.el-popper[data-popper-placement^=left]>.el-popper__arrow {
+    right: -8px !important;
+}
+
+.el-popper {
+    border-radius: 11px !important;
+}
+.markdown-body li {
+    list-style: unset;
+  }
+
+
+/* .process-popper {
+    border-radius: 4px !important;
+} */
@@ -0,0 +1,64 @@
+import request from './request';
+
+export const url = typeof window !== 'undefined' ? `${window.location.origin}/` : '/';
+
+export function uploadFile(data, config = {}) {
+    return request({
+        url: url + "upload",
+        method: 'post',
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        // onUploadProgress: progressEvent => {
+        //     //   this.uploadPercentage = parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100));
+        //     console.log(progressEvent)
+        // },
+        data: data,
+        ...config
+    })
+}
+
+export function trace(data) {
+    return request({
+        url: url + "trace",
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        data: data
+    })
+}
+
+export function getHistoryTraceIds() {
+    return request({
+        url: url + "traces",
+        method: 'get'
+    })
+}
+
+export function control(data) {
+    return request({
+        url: url + "control",
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        data: data
+    })
+}
+
+export function submitUserInteraction(data) {
+    return request({
+        url: url + "user_interaction/submit",
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        data: data
+    })
+}
+
+export function getStdoutDownloadUrl(traceId) {
+    const query = new URLSearchParams({ id: traceId });
+    return url + "stdout?" + query.toString();
+}
@@ -0,0 +1,29 @@
+//crypto.js文件内容
+import CryptoJS from 'crypto-js'
+export default { // 加密
+    /**
+     * @description: 加密
+     * @param {*} word
+     * @param {*} keyStr
+     */
+    set(word, keyStr) {
+        keyStr = keyStr || 'abcdef0123456789' // 16位的密钥，自己定义，和下面的密钥要相同
+        var srcs = CryptoJS.enc.Utf8.parse(word) //  字符串到数组转换，解析明文
+        var key = CryptoJS.enc.Utf8.parse(keyStr) //  字符串到数组转换，解析秘钥
+            // mode:加密方式；padding:填充方式；iv便宜向量（可选）
+        var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
+        return encrypted.toString() // 加密后的结果是对象，要转换为文本
+    },
+
+    /**
+     * @description: 解密
+     * @param {*} word
+     * @param {*} keyStr
+     */
+    get(word, keyStr) {
+        keyStr = keyStr || 'abcdef0123456789'
+        var key = CryptoJS.enc.Utf8.parse(keyStr) //  字符串到数组转换
+        var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
+        return CryptoJS.enc.Utf8.stringify(decrypt).toString() //  数组到字符串转换
+    }
+}
@@ -0,0 +1,5 @@
+// 获取assets静态资源
+const getAssetsFile = (url: string) => {
+   return new URL(`../assets/images/${url}`, import.meta.url).href
+}
+export default getAssetsFile;
@@ -0,0 +1,37 @@
+import axios from 'axios'
+
+axios.defaults.headers.post['Content-Type'] = 'application/json'
+
+const service = axios.create({
+    baseURL: ''
+})
+service.defaults.timeout = 5 * 60 * 1000;
+
+// request拦截器
+service.interceptors.request.use(
+    config => {
+        if (config.data) {}
+        if (config.params) {
+            // console.log('request: ', config.params)
+        }
+        return config
+    },
+    error => {
+        console.log('error-request: ', error)
+        return error
+    }
+)
+
+// respone拦截器
+service.interceptors.response.use(
+    response => {
+        return response.data
+    },
+    error => {
+        console.log('error-response: ', error)
+        console.log('error-response: ', error.response)
+        return error.response
+    }
+)
+
+export default service
@@ -0,0 +1,297 @@
+<template>
+  <div class="content">
+    <div class="content-1">
+      <h2>Get Valuable</h2>
+      <h2 class="h2"><span>Insights</span> Instantly</h2>
+      <div class="bg-1">
+        <button ref="btn" @mousemove="moveMouse" @click="tryNow">
+          <span>Try now</span>
+        </button>
+      </div>
+    </div>
+    <div class="modal">
+      <div class="des">
+        <p>
+          R&D-Agent is your dedicated data scientist powered by an LLM. It
+          automatically researches your unique data-mining tasks, learns domain
+          knowledge to evolve from practice, develops the most tailored datasets
+          and models for your data sources, and delivers solutions with
+          significant industrial value.
+        </p>
+      </div>
+      <div class="content-2">
+        <h2>AI Drives Data-Driven AI</h2>
+        <img src="@/assets/images/Data-Driven.png" alt="R&D-Agent" />
+        <p>
+          In modern industry, research and development (R&D) is crucial for the
+          enhancement of industrial productivity, especially in the AI era,
+          where the core aspects of R&D are mainly focused on data and models.
+          We are committed to automate these high-value generic R&D processes
+          through our open source R&D automation tool R&D-Agent, which let AI
+          drive data-driven AI.   R&D-Agent harnesses the strengths of LLMs to
+          create an integrated, automated system for data-driven R&D, ensuring
+          that innovation and development proceed hand in hand, driven by the
+          powerful capabilities of modern AI. 
+        </p>
+        <h2 class="h2">The Framework of R&D-Agent</h2>
+        <img
+          src="@/assets/images/Framework.png"
+          alt="R&D-Agent"
+          style="margin: 3em 0 2em"
+        />
+        <p>
+          Methodologically, we propose an autonomous agent framework consisting
+          of two key parts: (R)esearch and (D)evelopment. Research involves
+          actively exploring by proposing new ideas, while Development focuses
+          on realizing these ideas. The effectiveness of these two components is
+          continually refined through practice, with both research and
+          development capabilities learning and growing over time. 
+        </p>
+        <div class="content-2-bg"></div>
+      </div>
+      <div class="content-3">
+        <h2>Ready to experiment?</h2>
+        <p>Dive into our Playground and set your creativity free!</p>
+        <div class="btn-box">
+          <button class="playground" @click="tryNow">Playground</button>
+            <button class="contact" @click="goToGitHub">GitHub</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, reactive, nextTick } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const btn = ref(null);
+const moveMouse = (e) => {
+  const x = e.offsetX;
+  const y = e.offsetY;
+  btn.value.style.setProperty("--x", x + "px");
+  btn.value.style.setProperty("--y", y + "px");
+};
+const tryNow = () => {
+  router.push("/Playground");
+};
+const goToGitHub = () => {
+  window.open("https://github.com/microsoft/R&D-Agent");
+};
+</script>
+
+<style scoped lang="scss">
+.content {
+  width: 100%;
+  text-align: center;
+  .content-1 {
+    width: 100vw;
+    height: calc(100vh - 6.125em);
+    position: fixed;
+    top: 6.125em;
+    padding-top: 1em;
+    h2 {
+      color: var(--text-color);
+      text-align: center;
+      font-size: 4.5em;
+      line-height: 1.3em;
+      font-weight: 700;
+    }
+    .h2 {
+      font-family: "Microsoft YaHei";
+      span {
+        background: linear-gradient(
+          90deg,
+          #2667ff 0%,
+          #9d41ff 50%,
+          #d453ff 99%
+        );
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    .bg-1 {
+      width: 70%;
+      height: auto;
+      padding-top: 37.4%;
+      background: url(@/assets/images/bg-1.png) no-repeat center center;
+      background-size: contain;
+      margin: 0 auto;
+      position: relative;
+      // padding-top: 3em;
+      display: flex;
+      justify-content: center;
+      button {
+        // margin-top: 0.5em;
+        position: absolute;
+        top: 1.4em;
+        width: 7.5em;
+        background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 999px;
+        padding: 0.5em 1.2em 0.6em;
+        // border-radius: 999px;
+        background-image: linear-gradient(
+          95deg,
+          #2667ff -11.58%,
+          #9d41ff 90.52%,
+          #d453ff 190.58%
+        );
+        box-shadow: 1px 4px 5px 0px rgba(235, 224, 253, 0.32) inset,
+          -1px -2px 3.4px 0px rgba(117, 89, 190, 0.65) inset,
+          -1px 1px 2px 0px rgba(117, 89, 190, 0.2),
+          1px 1px 3px 0px rgba(172, 158, 210, 0.72);
+        backdrop-filter: blur(15px);
+        // background-clip: text;
+        // -webkit-background-clip: text;
+        // -webkit-text-fill-color: transparent;
+        font-size: 1.65em;
+        font-weight: 600;
+        text-transform: capitalize;
+
+        // padding: 14px 50px;
+        // border-radius: 4px;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        outline: none;
+        overflow: hidden;
+        // box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
+        // font-family: "Lato", sans-serif;
+        // font-size: 16px;
+        // text-transform: uppercase;
+        // letter-spacing: 2px;
+
+        span {
+          position: relative;
+        }
+
+        &::before {
+          --size: 0;
+          // --x: 0;
+          // --y: 0;
+          content: "";
+          position: absolute;
+          left: var(--x);
+          top: var(--y);
+          width: var(--size);
+          height: var(--size);
+          background: radial-gradient(
+            circle closest-side,
+            #a3b1f1,
+            transparent
+          );
+          transform: translate(-50%, -50%);
+          transition: all 0.2s ease, left 0s, top 0s;
+        }
+
+        &:hover::before {
+          --size: 200px;
+        }
+      }
+    }
+  }
+  .modal {
+    width: 100%;
+    margin-top: 62vh;
+    position: relative;
+    z-index: 1;
+    .des {
+      width: 100%;
+      opacity: 0.9;
+      background: var(--bg-white);
+      padding: 3.625em 0;
+      p {
+        width: 1130px;
+        color: var(--text-color);
+        font-size: 1.375em;
+        line-height: 200%;
+        margin: 0 auto;
+      }
+    }
+    .content-2 {
+      width: 100%;
+      padding: 9em 0 16em;
+      color: var(--text-color);
+      background-color: var(--bg-white);
+      position: relative;
+      .content-2-bg {
+        width: 100%;
+        height: 340px;
+        background: url(@/assets/images/footer-bg.png) no-repeat;
+        background-position: top;
+        background-size: cover;
+        position: absolute;
+        bottom: 0;
+      }
+      h2 {
+        font-size: 3.125em;
+        font-weight: 700;
+        line-height: 200%;
+      }
+      img {
+        margin-top: 1.625em;
+      }
+      p {
+        width: 1220px;
+        margin: 0 auto;
+        font-size: 1.375em;
+        font-weight: 400;
+        line-height: 200%;
+        margin-top: 1.64em;
+        position: relative;
+        z-index: 9;
+      }
+      .h2 {
+        margin-top: 3em;
+      }
+    }
+    .content-3 {
+      background: var(--bg-grey);
+      padding: 5em 0 7em;
+      color: var(--text-color);
+      h2 {
+        font-size: 2.4em;
+        font-weight: 700;
+        line-height: 200%;
+      }
+      p {
+        font-size: 1.8em;
+        line-height: 200%;
+      }
+      .btn-box {
+        margin-top: 3.125em;
+        button {
+          border-radius: 1.46em;
+          font-size: 1.4em;
+          font-weight: 700;
+          line-height: 200%;
+          width: 9em;
+          height: 2.5em;
+          cursor: pointer;
+        }
+        .playground {
+          background: var(--bg-black);
+          border-color: var(--bg-black);
+          color: var(--text-white-color);
+          margin-right: 2.2em;
+          &:hover {
+            background: rgba(43, 43, 43, 0.74);
+            border-color: rgba(43, 43, 43, 0.74);
+          }
+        }
+        .contact {
+          border-color: var(--bg-black);
+          border: 2px solid var(--bg-black);
+          background: var(--bg-white);
+          box-shadow: 8px 11px 30px 0px #edf0ff;
+          color: var(--btn-color);
+          &:hover {
+            background: #f2f5fa;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,82 @@
+<template>
+  <div class="home">
+    <div>
+      <div class="token">
+        <input
+          type="password"
+          @keydown.enter="login"
+          placeholder="Please enter password"
+          v-model.trim="token"
+        />
+      </div>
+      <div>
+        <button @click="login">Enter</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import crypto from "@/utils/crypto.js";
+export default {
+  name: "Login",
+  components: {},
+  data() {
+    return {
+      token: "",
+      defaultpwd: "",
+    };
+  },
+  methods: {
+    login() {
+      if (this.token != this.defaultpwd) {
+        alert("请输入正确的密码");
+      } else {
+        sessionStorage.setItem("token", this.token);
+        let path = this.$route.query.redirect || "/";
+        this.$router.push(path);
+      }
+    },
+  },
+  mounted() {
+    this.defaultpwd = crypto.get("vCTcSPKS1eGmRXBh4c6RXA==");
+  },
+};
+</script>
+<style scoped lang="scss">
+.home {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999999999;
+  // padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  & > div {
+    width: 18.75rem;
+  }
+  .token {
+    margin-bottom: 1.25rem;
+  }
+  input,
+  button {
+    padding: 0 0.625rem;
+    height: 2.375rem;
+    width: 15.625rem;
+    outline: none;
+    border: none;
+    box-sizing: border-box;
+    font-size: 1rem;
+  }
+  button {
+    background: rgba(0, 101, 255, 0.5);
+    color: #fff;
+    cursor: pointer;
+  }
+}
+</style>
@@ -0,0 +1,109 @@
+<template>
+  <div class="main-content">
+    <div class="step">
+      <Step :activeIndex="0" />
+    </div>
+    <div class="intro">
+      <h2>Welcome to our intelligent model analysis platform.</h2>
+      <p>
+        New here? Choose a scenario to input info or upload a file. Returning?
+        Upload your code file to continue.
+      </p>
+    </div>
+    <div class="content">
+      <div class="scenario-item">
+        <div class="scenario-item-text">
+          <p class="p1">
+            <SvgIcon class="edit-icon" name="edit" color="#2B2B2B"></SvgIcon
+            >First Time? Start Your Analysis
+          </p>
+          <p class="p2">
+            Select a scenario and input the information you want, or upload a
+            related file to generate real-time analysis.
+          </p>
+        </div>
+        <SvgIcon class="step-icon" name="arrows-mark" color="#4895EF"></SvgIcon>
+      </div>
+      <div class="scenario-item">
+        <div class="scenario-item-text">
+          <p class="p1">
+            <SvgIcon
+              class="edit-icon"
+              name="prime_upload"
+              color="#2B2B2B"
+            ></SvgIcon
+            >Upload Your Code File
+          </p>
+          <p class="p2">
+            Already used our service? Upload your previously exported code file
+            to continue your analysis.
+          </p>
+        </div>
+        <SvgIcon class="step-icon" name="arrows-mark" color="#4895EF"></SvgIcon>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, reactive, nextTick } from "vue";
+import Step from "../components/step-component.vue";
+</script>
+
+<style scoped lang="scss">
+.main-content {
+  .step {
+    margin-top: 4.125em;
+  }
+  .intro {
+    margin-top: 3.75em;
+    text-align: center;
+    h2 {
+      color: var(--text-color);
+      font-size: 2.5em;
+      font-weight: 700;
+      line-height: 200%;
+    }
+    p {
+      margin-top: 1.875em;
+      color: var(---intro-text-color);
+      font-family: "Microsoft YaHei";
+      font-size: 1.125em;
+      line-height: 200%;
+    }
+  }
+  .content {
+    margin-top: 6.25em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2.5em;
+    .scenario-item {
+      display: flex;
+      width: 900px;
+      justify-content: space-between;
+      padding: 2em 3.56em 2em 2.5em;
+      align-items: center;
+      border-radius: 4px;
+      border: 2px solid var(--blue-border-color);
+      .scenario-item-text {
+        .p1 {
+          color: var(--text-color);
+          font-size: 1.5em;
+          line-height: 200%;
+          display: flex;
+          align-items: center;
+
+          .edit-icon {
+            margin-right: 0.4em;
+          }
+        }
+        .p2 {
+          color: var(--text-color);
+          font-size: 1em;
+          line-height: 200%;
+        }
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1730451372035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1445" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M153 294.6l351.5 351.5c1.9 1.9 4.5 3.1 7.5 3.1s5.6-1.2 7.6-3.2L871 294.6c13.9-13.9 36.7-13.9 50.6 0 13.9 13.9 13.9 36.7 0 50.6L537.3 729.4c-13.9 13.9-36.7 13.9-50.6 0-0.1-0.1-0.1-0.1-0.1-0.2L102.4 345.1c-13.9-13.9-13.9-36.7 0-50.6 13.9-13.8 36.7-13.8 50.6 0.1z" p-id="1446"></path><path d="M501.8 641.2c0-0.2-0.1-0.3-0.1-0.5 0 0.2 0 0.3 0.1 0.5zM502.4 642.9c0-0.1-0.1-0.1-0.1-0.2 0 0.1 0 0.1 0.1 0.2zM501.4 638.6v0z" p-id="1447"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`