diff --git a/tools/assets.py b/tools/assets.py
index 28d0f6b..533a020 100644
--- a/tools/assets.py
+++ b/tools/assets.py
@@ -1,38 +1,81 @@
 js = """
-function deleteTheme() {
+function createGradioAnimation() {
     
-const params = new URLSearchParams(window.location.search);
-if (params.has('__theme')) {
-    params.delete('__theme');
-    const newUrl = `${window.location.pathname}?${params.toString()}`;
-    window.location.replace(newUrl);
-}
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('__theme') !== 'light') { 
+        params.set('__theme', 'light'); // 仅当 __theme 不是 'light' 时设置为 'light'
+        window.location.search = params.toString(); // 更新 URL，触发页面刷新
+    }
+    
+    var container = document.createElement('div');
+    container.id = 'gradio-animation';
+    container.style.fontSize = '2em';
+    container.style.fontWeight = '500';
+    container.style.textAlign = 'center';
+    container.style.marginBottom = '20px';
+    container.style.fontFamily = '-apple-system, sans-serif, Arial, Calibri';
 
+    var text = 'Welcome to GPT-SoVITS !';
+    for (var i = 0; i < text.length; i++) {
+        (function(i){
+            setTimeout(function(){
+                var letter = document.createElement('span');
+                letter.style.opacity = '0';
+                letter.style.transition = 'opacity 0.5s';
+                letter.innerText = text[i];
+
+                container.appendChild(letter);
+
+                setTimeout(function() {
+                    letter.style.opacity = '1';
+                }, 50);
+            }, i * 250);
+        })(i);
+    }
+    return 'Animation created';
 }
 """
 
+
 css = """
 /* CSSStyleRule */
+
 .markdown {
+    background-color: lightblue;
     padding: 6px 10px;
 }
 
-@media (prefers-color-scheme: light) {
-    .markdown {
-        background-color: lightblue;
-        color: #000;
-    }
+.checkbox_info {
+    color: var(--block-title-text-color) !important;
+    font-size: var(--block-title-text-size) !important;
+    font-weight: var(--block-title-text-weight) !important;
+    height: 22px;
+    margin-bottom: 8px !important;
 }
 
-@media (prefers-color-scheme: dark) {
-    .markdown {
-        background-color: #4b4b4b;
-        color: rgb(244, 244, 245);
-    }
+::selection {
+    background: #ffc078; !important;
 }
 
-::selection {
-    background: #ffc078 !important;
+#checkbox_train_dpo input[type="checkbox"]{
+    margin-top: 6px;
+}
+
+#checkbox_train_dpo span {
+    margin-top: 6px;
+}
+
+#checkbox_align_train {
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+
+#checkbox_align_infer input[type="checkbox"] {
+    margin-top: 10px;
+}
+
+#checkbox_align_infer span {
+    margin-top: 10px;
 }
 
 footer {
@@ -48,14 +91,16 @@ footer * {
 }
 
 """
-
 top_html = """
 <div align="center">
     <div style="margin-bottom: 5px; font-size: 15px;">{}</div>
-    <div style="display: flex; gap: 80px; justify-content: center;">
+    <div style="display: flex; gap: 60px; justify-content: center;">
         <a href="https://github.com/RVC-Boss/GPT-SoVITS" target="_blank">
             <img src="https://img.shields.io/badge/GitHub-GPT--SoVITS-blue.svg?style=for-the-badge&logo=github" style="width: auto; height: 30px;">
         </a>
+        <a href="https://github.com/RVC-Boss/GPT-SoVITS" target="_blank">
+            <img src="https://img.shields.io/badge/免费在线体验-free_online_demo-blue.svg?style=for-the-badge&logo=huggingface" style="width: auto; height: 30px;">
+        </a>
         <a href="https://www.yuque.com/baicaigongchang1145haoyuangong/ib3g1e" target="_blank">
             <img src="https://img.shields.io/badge/简体中文-阅读文档-blue?style=for-the-badge&logo=googledocs&logoColor=white" style="width: auto; height: 30px;">
         </a>