adding welcome page
This commit is contained in:
binary-husky
@@ -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;
|
||||
}
|
||||
1
themes/svg/1.svg
Normal file
1
themes/svg/1.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1721122982934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1823" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#04BEE8" p-id="1824"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="1825"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="1826"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="1827"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="1828"></path><path d="M282.161998 248.054504m80.617714 0l299.215746 0q80.617714 0 80.617714 80.617714l0 366.380379q0 80.617714-80.617714 80.617713l-299.215746 0q-80.617714 0-80.617714-80.617713l0-366.380379q0-80.617714 80.617714-80.617714Z" fill="#FFFFFF" p-id="1829"></path><path d="M530.216503 280.611658h113.433774v146.467658c0 10.89967-13.049992 16.498725-20.948978 8.9881l-35.767909-34.009048-35.767909 34.009048C543.266495 443.578041 530.216503 437.978986 530.216503 427.079316V280.611658z" fill="#29C8EB" p-id="1830"></path><path d="M365.105223 280.611658m14.728237 0l0 0q14.728236 0 14.728236 14.728236l0 417.041635q0 14.728236-14.728236 14.728236l0 0q-14.728236 0-14.728237-14.728236l0-417.041635q0-14.728236 14.728237-14.728236Z" fill="#29C8EB" p-id="1831"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -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];
|
||||
// 添加隐藏动画
|
||||
welcome_card_container.classList.add('hide');
|
||||
|
||||
// 等待动画结束后再移除元素
|
||||
welcome_card_container.addEventListener('transitionend', () => {
|
||||
elem_chatbot.removeChild(welcome_card_container);
|
||||
}, { once: true });
|
||||
}
|
||||
|
||||
async isChatbotEmpty() {
|
||||
|
||||
Reference in New Issue
Block a user