mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] new welcome page

Browse Source
This commit is contained in:
kwaroran
2023-07-26 22:21:59 +09:00
parent 8edf0ee3c7
commit b2881f8036
3 changed files with 155 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/logo_typo_trans.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

10
src/App.svelte
View File

@@ -15,11 +15,11 @@
let didFirstSetup: boolean = false let didFirstSetup: boolean = false
let gridOpen = false let gridOpen = false
DataBase.subscribe(db => { // DataBase.subscribe(db => {
if(db.didFirstSetup !== didFirstSetup){ // if(db.didFirstSetup !== didFirstSetup){
didFirstSetup = db.didFirstSetup || false // didFirstSetup = db.didFirstSetup || false
} // }
}) // })
</script> </script>

293
src/lib/Others/WelcomeRisu.svelte
View File

@@ -4,169 +4,172 @@
import { changeLanguage, language } from "src/lang"; import { changeLanguage, language } from "src/lang";
import { addDefaultCharacters } from "src/ts/characters"; import { addDefaultCharacters } from "src/ts/characters";
import { DataBase } from "src/ts/storage/database"; import { DataBase } from "src/ts/storage/database";
import { sleep } from "src/ts/util"; import { sleep } from "src/ts/util";
import TextInput from "../UI/GUI/TextInput.svelte"; import TextInput from "../UI/GUI/TextInput.svelte";
import Button from "../UI/GUI/Button.svelte";
let step = 0 let step = 0
let provider = 0 let provider = 0
</script> </script>
<div class="w-full h-full bg-bgcolor flex justify-center"> <div class="w-full h-full flex justify-center welcome-bg text-neutral-200">
<article class="max-w-screen-md w-full prose prose-invert bg-darkbg p-5 overflow-y-auto overflow-x-hidden"> <article class="w-full overflow-y-hidden overflow-x-hidden max-w-full min-h-full h-full flex flex-col">
<div class="w-full justify-center flex"> <div class="w-full justify-center flex mt-8">
<img src="/logo2.png" alt="logo"> <img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm mb-0">
</div> </div>
<div class="w-full justify-center flex"> <!-- <div class="w-full items-center flex flex-col justify-center mb-8">
<h1>Welcome to RisuAI!</h1> <button class=" border border-selected rounded-md px-4 py-2 text-lg hover:border-neutral-200 transition">Get Started</button>
</div> </div> -->
{#if step === 0} <div class="w-full flex-col bg-darkbg flex-grow mt-5 prose prose-invert max-w-full p-5 rounded-t-lg overflow-y-auto overflow-x-hidden">
<h2>Choose the language</h2> {#if step === 0}
<div class="flex flex-col items-start ml-2"> <h2>Choose the language</h2>
<button class="hover:text-green-500 transition-colors" on:click={() => { <div class="flex flex-col items-start ml-2">
changeLanguage('en') <button class="hover:text-green-500 transition-colors" on:click={() => {
$DataBase.language='en' changeLanguage('en')
step = 1 $DataBase.language='en'
}}>• English</button> step = 1
<button class="hover:text-green-500 transition-colors" on:click={() => { }}>• English</button>
changeLanguage('ko') <button class="hover:text-green-500 transition-colors" on:click={() => {
$DataBase.language='ko' changeLanguage('ko')
step = 1 $DataBase.language='ko'
}}>• 한국어</button> step = 1
<button class="hover:text-green-500 transition-colors" on:click={() => { }}>• 한국어</button>
changeLanguage('cn') <button class="hover:text-green-500 transition-colors" on:click={() => {
$DataBase.language='cn' changeLanguage('cn')
step = 1 $DataBase.language='cn'
}}>• 中文</button> step = 1
</div> }}>• 中文</button>
</div>
{:else if step === 1} {:else if step === 1}
<h2>{language.setup.chooseProvider}</h2> <h2>{language.setup.chooseProvider}</h2>
<div class="flex flex-col items-start ml-2"> <div class="flex flex-col items-start ml-2">
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1
step += 1
}}>• {language.setup.openaikey}</button>
<button class="hover:text-green-500 transition-colors"on:click={() => {
provider = 2
step += 1
}}>• {language.setup.openaiProxy}</button>
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 3
step += 1
}}>• {language.setup.setupmodelself}</button>
</div>
{:else if step === 2}
{#if provider === 1}
<h2>{language.setup.openaikey}</h2>
<div class="w-full ml-2">
<span class="mb-2">API key</span>
<TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
</div>
<span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => { <button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1 provider = 1
step += 1 step += 1
}}>• {language.confirm}</button> }}>• {language.setup.openaikey}</button>
<button class="hover:text-green-500 transition-colors"on:click={() => {
provider = 2
step += 1
}}>• {language.setup.openaiProxy}</button>
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 3
step += 1
}}>• {language.setup.setupmodelself}</button>
</div> </div>
{:else if provider === 2} {:else if step === 2}
<h2>{language.setup.openaiProxy}</h2> {#if provider === 1}
<h2>{language.setup.openaikey}</h2>
<div class="w-full ml-2">
<span class="mb-2">API key</span>
<TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
</div>
<span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1
step += 1
}}>• {language.confirm}</button>
</div>
{:else if provider === 2}
<h2>{language.setup.openaiProxy}</h2>
<div class="w-full ml-2">
<span class="mb-2">OpenAI Reverse Proxy URL</span>
<TextInput bind:value={$DataBase.forceReplaceUrl} placeholder="https://..." autocomplete="off"/>
</div>
<div class="w-full ml-2 mt-4">
<span class="mb-2">API key (Used for passwords)</span>
<TextInput bind:value={$DataBase.proxyKey} placeholder="Optional" autocomplete="off"/>
</div>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1
step += 1
}}>• {language.confirm}</button>
</div>
{:else}
<h2>{language.setup.setupmodelself}</h2>
<div class="w-full ml-2">
<span>{language.setup.setupSelfHelp}</span>
</div>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1
step += 1
}}>• {language.confirm}</button>
</div>
{/if}
{:else if step === 3}
<h2>{language.setup.theme}</h2>
<div class="flex flex-col items-start ml-2">
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.theme = ''
step += 1
}}><span>• Standard Risu ({language.setup.themeDescClassic})</span>
<img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.theme = 'waifu'
step += 1
}}><span>• Waifulike ({language.setup.themeDescWifulike})</span>
<img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.theme = 'waifuMobile'
step += 1
}}><span>• WaifuCut ({language.setup.themeDescWifuCut})</span>
<img class="w-3/4 mt-2" src="/ss4.webp" alt="example"></button>
</div>
{:else if step === 4}
<h2>{language.setup.texttheme}</h2>
<div class="flex flex-col items-start ml-2">
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.textTheme = 'standard'
step += 1
}}><span>• {language.classicRisu}</span>
<div class="border-borderc py-2 px-8 not-prose">
<p class="mt-2 mb-0 classic p-0"> Normal Text</p>
<p class="mt-2 mb-0 classic-italic italic p-0">Italic Text</p>
<p class="mt-2 mb-0 classic font-bold p-0">Bold Text</p>
</div>
</button>
</div>
<div class="flex flex-col items-start ml-2 mt-2 mb-2">
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.textTheme = 'highcontrast'
step += 1
}}><span>• {language.highcontrast}</span>
<div class="border-borderc p-2 py-2 px-8 not-prose">
<p class="mt-2 mb-0 classic p-0" style="color:#f8f8f2"> Normal Text</p>
<p class="mt-2 mb-0 classic-italic italic p-0" style="color:#F1FA8C">Italic Text</p>
<p class="mt-2 mb-0 classic font-bold p-0" style="color:#FFB86C">Bold Text</p>
</div>
</button>
</div>
{:else if step === 5}
<h2 class="mb-2">{language.setup.inputName}</h2>
<div class="w-full ml-2"> <div class="w-full ml-2">
<span class="mb-2">OpenAI Reverse Proxy URL</span> <TextInput bind:value={$DataBase.username} />
<TextInput bind:value={$DataBase.forceReplaceUrl} placeholder="https://..." autocomplete="off"/>
</div>
<div class="w-full ml-2 mt-4">
<span class="mb-2">API key (Used for passwords)</span>
<TextInput bind:value={$DataBase.proxyKey} placeholder="Optional" autocomplete="off"/>
</div> </div>
<div class="flex flex-col items-start ml-2 mt-6"> <div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => { <button class="hover:text-green-500 transition-colors" on:click={async () => {
provider = 1 $DataBase.forceReplaceUrl2 = $DataBase.forceReplaceUrl
step += 1 await addDefaultCharacters()
}}>• {language.confirm}</button> $DataBase.didFirstSetup = true
</div> await sleep(2000)
{:else} location.reload()
<h2>{language.setup.setupmodelself}</h2>
<div class="w-full ml-2">
<span>{language.setup.setupSelfHelp}</span>
</div>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1
step += 1
}}>• {language.confirm}</button> }}>• {language.confirm}</button>
</div> </div>
{/if} {/if}
{:else if step === 3}
<h2>{language.setup.theme}</h2>
<div class="flex flex-col items-start ml-2">
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.theme = ''
step += 1
}}><span>• Standard Risu ({language.setup.themeDescClassic})</span>
<img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.theme = 'waifu'
step += 1
}}><span>• Waifulike ({language.setup.themeDescWifulike})</span>
<img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.theme = 'waifuMobile'
step += 1
}}><span>• WaifuCut ({language.setup.themeDescWifuCut})</span>
<img class="w-3/4 mt-2" src="/ss4.webp" alt="example"></button>
</div>
{:else if step === 4}
<h2>{language.setup.texttheme}</h2>
<div class="flex flex-col items-start ml-2">
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.textTheme = 'standard'
step += 1
}}><span>• {language.classicRisu}</span>
<div class="border-borderc py-2 px-8 not-prose">
<p class="mt-2 mb-0 classic p-0"> Normal Text</p>
<p class="mt-2 mb-0 classic-italic italic p-0">Italic Text</p>
<p class="mt-2 mb-0 classic font-bold p-0">Bold Text</p>
</div>
</button>
</div>
<div class="flex flex-col items-start ml-2 mt-2 mb-2">
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
$DataBase.textTheme = 'highcontrast'
step += 1
}}><span>• {language.highcontrast}</span>
<div class="border-borderc p-2 py-2 px-8 not-prose">
<p class="mt-2 mb-0 classic p-0" style="color:#f8f8f2"> Normal Text</p>
<p class="mt-2 mb-0 classic-italic italic p-0" style="color:#F1FA8C">Italic Text</p>
<p class="mt-2 mb-0 classic font-bold p-0" style="color:#FFB86C">Bold Text</p>
</div>
</button>
</div>
{:else if step === 5}
<h2 class="mb-2">{language.setup.inputName}</h2>
<div class="w-full ml-2">
<TextInput bind:value={$DataBase.username} />
</div>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={async () => {
$DataBase.forceReplaceUrl2 = $DataBase.forceReplaceUrl
await addDefaultCharacters()
$DataBase.didFirstSetup = true
await sleep(2000)
location.reload()
}}>• {language.confirm}</button>
</div>
{/if}
{#if step > 0} {#if step > 0}
<button class="hover:text-green-500 transition-colors ml-2" on:click={() => { <button class="hover:text-green-500 transition-colors ml-2" on:click={() => {
step = step - 1 step = step - 1
}}>• Go Back</button> }}>• Go Back</button>
{/if} {/if}
</div>
</article> </article>
</div> </div>
@@ -177,4 +180,8 @@
.classic-italic{ .classic-italic{
color: #8C8D93; color: #8C8D93;
} }
.welcome-bg{
background-image: url("/public/welcome/welcomebg.png");
background-size: cover;
}
</style> </style>