From 1084108df697887891b84ff5c4b6798ab6002e4e Mon Sep 17 00:00:00 2001 From: binary-husky Date: Tue, 16 Jul 2024 10:41:25 +0000 Subject: [PATCH] adding welcome page --- themes/common.css | 28 +++++++++++++-- themes/svg/1.svg | 1 + themes/welcome.js | 88 +++++++++++++++++++++++++++++++++++++---------- 3 files changed, 96 insertions(+), 21 deletions(-) create mode 100644 themes/svg/1.svg diff --git a/themes/common.css b/themes/common.css index 32a25ce8..778fdafc 100644 --- a/themes/common.css +++ b/themes/common.css @@ -155,20 +155,44 @@ transform: translate(-50%, -50%); flex-wrap: wrap; justify-content: center; + transition: opacity 1s ease-in-out; + opacity: 0; } +.welcome-card-container.show { + opacity: 1; +} +.welcome-card-container.hide { + opacity: 0; +} .welcome-card { border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - padding: 20px; + padding: 15px; margin: 10px; flex: 0 0 calc(30% - 10px); } -.welcome-card-title { +.welcome-title { font-size: 40px; padding: 20px; margin: 10px; flex: 0 0 calc(90%); +} + +.welcome-card-title { + font-size: 20px; + margin: 2px; + flex: 0 0 calc(95%); + padding-bottom: 8px; + padding-top: 8px; + padding-right: 8px; + padding-left: 8px; + display: flex; + justify-content: center; +} + +.welcome-svg { + padding-right: 10px; } \ No newline at end of file diff --git a/themes/svg/1.svg b/themes/svg/1.svg new file mode 100644 index 00000000..990eda38 --- /dev/null +++ b/themes/svg/1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/themes/welcome.js b/themes/welcome.js index 988b17d5..3825a90c 100644 --- a/themes/welcome.js +++ b/themes/welcome.js @@ -2,28 +2,52 @@ class WelcomeMessage { constructor() { this.static_welcome_message = [ { - title: "论文翻译与润色", - content: "跨越学术交流语言障碍。" + title: "环境配置教程", + content: "释放任意大语言模型的学术应用潜力。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", }, { - title: "PDF翻译", - content: "这是一个可以翻译PDF内容的工具。" + title: "Arxiv论文一键翻译", + content: "最优英文转中文的学术论文阅读体验。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", }, { - title: "推荐配置", - content: "这是一个根据你的需求推荐最佳配置的工具。" + title: "多模态模型", + content: "试试将截屏直接粘贴到输入框中，随后使用多模态模型提问。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", }, { - title: "论文翻译与润色", - content: "跨越学术交流语言障碍。" + title: "文档与源码批处理", + content: "您可以将任意文件拖入「此处」，随后调用对应插件功能。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", }, { - title: "PDF翻译", - content: "这是一个可以翻译PDF内容的工具。" + title: "图表与脑图绘制", + content: "输入一段语料，然后点击「总结绘制脑图」。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", }, { - title: "推荐配置", - content: "这是一个根据你的需求推荐最佳配置的工具。" + title: "虚空终端", + content: "点击右侧插件区的「虚空终端」插件，然后直接输入您的想法。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", + }, + { + title: "DALLE图像生成", + content: "接入DALLE生成插画或者项目Logo。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", + }, + { + title: "TTS语音克隆", + content: "借助SoVits，以你喜爱的角色的声音回答问题。", + svg: "file=themes/svg/1.svg", + url: "https://github.com/binary-husky/gpt_academic", } ]; this.visible = false; @@ -32,7 +56,7 @@ class WelcomeMessage { begin_render() { this.update(); - setInterval(() => { this.update() }, 2000); // 每2000毫秒执行一次 + setInterval(() => { this.update() }, 5000); // 每5000毫秒执行一次 } async update() { @@ -62,7 +86,7 @@ class WelcomeMessage { // 创建主标题 const major_title = document.createElement('div'); - major_title.classList.add('welcome-card-title'); + major_title.classList.add('welcome-title'); major_title.textContent = "欢迎使用GPT-Academic"; // major_title.style.paddingBottom = '5px' welcome_card_container.appendChild(major_title) @@ -72,16 +96,31 @@ class WelcomeMessage { 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 title = document.createElement('div'); + title.classList.add('welcome-card-title'); + // 创建图标 + const svg = document.createElement('img'); + svg.classList.add('welcome-svg'); + svg.src = message.svg; + svg.style.height = '30px'; + title.appendChild(svg); + + // 创建标题 + const text = document.createElement('a'); + text.textContent = message.title; + // var text = document.createTextNode(message.title); + text.href = message.url; + text.target = "_blank"; + title.appendChild(text) // 创建内容 const content = document.createElement('p'); content.textContent = message.content; + // 将标题和内容添加到卡片 div 中 card.appendChild(title); card.appendChild(content); @@ -89,13 +128,24 @@ class WelcomeMessage { }); elem_chatbot.appendChild(welcome_card_container); + + // 添加显示动画 + requestAnimationFrame(() => { + welcome_card_container.classList.add('show'); + }); } 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); + // 添加隐藏动画 + welcome_card_container.classList.add('hide'); + + // 等待动画结束后再移除元素 + welcome_card_container.addEventListener('transitionend', () => { + elem_chatbot.removeChild(welcome_card_container); + }, { once: true }); } async isChatbotEmpty() {