From 40c9700a8d8ec75b30f6f926283b98de1574452b Mon Sep 17 00:00:00 2001
From: binary-husky <qingxu.fu@outlook.com>
Date: Mon, 15 Jul 2024 15:47:24 +0000
Subject: [PATCH] add welcome page

---
 themes/common.css |  30 +++++++++++++
 themes/common.py  |   1 +
 themes/init.js    |   7 +++
 themes/welcome.js | 107 ++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 145 insertions(+)
 create mode 100644 themes/welcome.js

diff --git a/themes/common.css b/themes/common.css
index b2c9b8cd..32a25ce8 100644
--- a/themes/common.css
+++ b/themes/common.css
@@ -142,3 +142,33 @@
     border-top-width: 0;
 }
 
+
+.welcome-card-container {
+    text-align: center;
+    margin: 0 auto;
+    display: flex;
+    position: absolute;
+    width: inherit;
+    padding: 50px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+
+.welcome-card {
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px;
+    flex: 0 0 calc(30% - 10px);
+}
+
+.welcome-card-title {
+    font-size: 40px;
+    padding: 20px;
+    margin: 10px;
+    flex: 0 0 calc(90%);
+}
\ No newline at end of file
diff --git a/themes/common.py b/themes/common.py
index 2ea97b27..0b7b5bcc 100644
--- a/themes/common.py
+++ b/themes/common.py
@@ -32,6 +32,7 @@ def get_common_html_javascript_code():
         "themes/theme.js",
         "themes/tts.js",
         "themes/init.js",
+        "themes/welcome.js",
     ]
 
     if ADD_WAIFU: # 添加Live2D
diff --git a/themes/init.js b/themes/init.js
index 0f5711bb..007e9786 100644
--- a/themes/init.js
+++ b/themes/init.js
@@ -2,11 +2,17 @@ async function GptAcademicJavaScriptInit(dark, prompt, live2d, layout, tts) {
     // 第一部分，布局初始化
     audio_fn_init();
     minor_ui_adjustment();
+    
+    // 加载欢迎页面
+    const welcomeMessage = new WelcomeMessage();
+    welcomeMessage.begin_render();
     chatbotIndicator = gradioApp().querySelector('#gpt-chatbot > div.wrap');
     var chatbotObserver = new MutationObserver(() => {
         chatbotContentChanged(1);
+        welcomeMessage.update();
     });
     chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
+    
     if (layout === "LEFT-RIGHT") { chatbotAutoHeight(); }
     if (layout === "LEFT-RIGHT") { limit_scroll_position(); }
 
@@ -122,4 +128,5 @@ async function GptAcademicJavaScriptInit(dark, prompt, live2d, layout, tts) {
 
     // 主题加载（恢复到上次）
     change_theme("", "")
+
 }
diff --git a/themes/welcome.js b/themes/welcome.js
new file mode 100644
index 00000000..988b17d5
--- /dev/null
+++ b/themes/welcome.js
@@ -0,0 +1,107 @@
+class WelcomeMessage {
+    constructor() {
+        this.static_welcome_message = [
+            {
+                title: "论文翻译与润色",
+                content: "跨越学术交流语言障碍。"
+            },
+            {
+                title: "PDF翻译",
+                content: "这是一个可以翻译PDF内容的工具。"
+            },
+            {
+                title: "推荐配置",
+                content: "这是一个根据你的需求推荐最佳配置的工具。"
+            },
+            {
+                title: "论文翻译与润色",
+                content: "跨越学术交流语言障碍。"
+            },
+            {
+                title: "PDF翻译",
+                content: "这是一个可以翻译PDF内容的工具。"
+            },
+            {
+                title: "推荐配置",
+                content: "这是一个根据你的需求推荐最佳配置的工具。"
+            }
+        ];
+        this.visible = false;
+
+    }
+
+    begin_render() {
+        this.update();
+        setInterval(() => { this.update() }, 2000); // 每2000毫秒执行一次
+    }
+
+    async update() {
+        console.log('update')
+        if (!await this.isChatbotEmpty()) {
+            if (this.visible) {
+                this.removeWelcome();
+                this.visible = false;
+            }
+            return; 
+        }
+        if (this.visible){
+            return;
+        }
+        this.showWelcome();
+        this.visible = true;
+    }
+
+    async showWelcome() {
+
+        // 首先，找到你想要添加子元素的父元素
+        const elem_chatbot = document.getElementById('gpt-chatbot');
+
+        // 创建一个新的div元素
+        const welcome_card_container = document.createElement('div');
+        welcome_card_container.classList.add('welcome-card-container');
+        
+        // 创建主标题
+        const major_title = document.createElement('div');
+        major_title.classList.add('welcome-card-title');
+        major_title.textContent = "欢迎使用GPT-Academic";
+        // major_title.style.paddingBottom = '5px'
+        welcome_card_container.appendChild(major_title)
+
+        // 创建卡片
+        this.static_welcome_message.forEach(function (message) {
+            const card = document.createElement('div');
+            card.classList.add('welcome-card');
+
+            // 创建标题
+            const title = document.createElement('p');
+            title.textContent = message.title;
+            title.style.fontSize = '20px'
+            title.style.paddingBottom = '5px'
+
+            // 创建内容
+            const content = document.createElement('p');
+            content.textContent = message.content;
+
+            // 将标题和内容添加到卡片 div 中
+            card.appendChild(title);
+            card.appendChild(content);
+            welcome_card_container.appendChild(card);
+        });
+
+        elem_chatbot.appendChild(welcome_card_container);
+    }
+
+    async removeWelcome() {
+        // remove welcome-card-container
+        const elem_chatbot = document.getElementById('gpt-chatbot');
+        const welcome_card_container = document.getElementsByClassName('welcome-card-container')[0];
+        elem_chatbot.removeChild(welcome_card_container);
+    }
+
+    async isChatbotEmpty() {
+        return (await get_data_from_gradio_component("gpt-chatbot")).length == 0;
+    }
+
+
+}
+