[feat] new welcome screen
This commit is contained in:
kwaroran
BIN
public/bg.webp
Normal file
BIN
public/bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -16,9 +16,9 @@
|
||||
let gridOpen = false
|
||||
|
||||
DataBase.subscribe(db => {
|
||||
if(db.didFirstSetup !== didFirstSetup){
|
||||
didFirstSetup = db.didFirstSetup || false
|
||||
}
|
||||
// if(db.didFirstSetup !== didFirstSetup){
|
||||
// didFirstSetup = db.didFirstSetup || false
|
||||
// }
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -110,7 +110,13 @@ export const languageEnglish = {
|
||||
themeDescWifuCut: "Suitable for mobile",
|
||||
themeDescClassic: "Suitable for All devices",
|
||||
texttheme: "Select your text color",
|
||||
inputName: "Lastly, Input your Nickname."
|
||||
inputName: "Lastly, Input your Nickname.",
|
||||
welcome: "Welcome to RisuAI! Here, I will guide you to setup. First, What may I call you?",
|
||||
welcome2: "Hello {username}! before we start, I will ask you some questions. You can change these settings later in settings.\n\nFirst select the AI provider.",
|
||||
openAIProvider: "OpenAI GPT is a high quality AI model, but it is paid and filtered.",
|
||||
openrouterProvider: "Openrouter has a lot of models, some of them unfiltered and some of them free, but it is not as good as OpenAI.",
|
||||
hordeProvider: "Horde is a free provider, but the response time is long and the quality is low.",
|
||||
setProviderLater: "There are other providers, but you can set it later in settings. select this if you want to set it later.",
|
||||
},
|
||||
confirm: "Confirm",
|
||||
goback: "Go Back",
|
||||
|
||||
@@ -1,192 +1,192 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
|
||||
import { ArrowBigLeftIcon } from "lucide-svelte";
|
||||
import { ArrowBigLeftIcon, Send } from "lucide-svelte";
|
||||
import { changeLanguage, language } from "src/lang";
|
||||
import { addDefaultCharacters } from "src/ts/characters";
|
||||
import { DataBase } from "src/ts/storage/database";
|
||||
import { sleep } from "src/ts/util";
|
||||
import TextInput from "../UI/GUI/TextInput.svelte";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
import Chat from "../ChatScreens/Chat.svelte";
|
||||
|
||||
let step = 0
|
||||
let provider = 0
|
||||
let provider = ''
|
||||
let input = ''
|
||||
|
||||
if(step === 0){
|
||||
const browserLang = navigator.language
|
||||
const browserLangShort = browserLang.split('-')[0]
|
||||
const usableLangs = ['de', 'en', 'ko', 'cn']
|
||||
if(usableLangs.includes(browserLangShort)){
|
||||
changeLanguage(browserLangShort)
|
||||
$DataBase.language = browserLangShort
|
||||
step = 1
|
||||
}
|
||||
}
|
||||
let start = false
|
||||
|
||||
function send(){
|
||||
switch(step){
|
||||
case 1:{
|
||||
if(input.length > 0){
|
||||
$DataBase.username = input
|
||||
step = 2
|
||||
}
|
||||
break
|
||||
}
|
||||
case 2:{
|
||||
if(['openai','openrouter','horde','later'].includes(input.toLocaleLowerCase())){
|
||||
provider = input.toLocaleLowerCase()
|
||||
step = 3
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-center welcome-bg text-textcolor">
|
||||
<article class="w-full overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-auto">
|
||||
<div class="w-full justify-center flex mt-8">
|
||||
<img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm mb-0">
|
||||
</div>
|
||||
<!-- <div class="w-full items-center flex flex-col justify-center mb-8">
|
||||
<button class=" border border-selected rounded-md px-4 py-2 text-lg hover:border-neutral-200 transition">Get Started</button>
|
||||
</div> -->
|
||||
<div class="w-full flex-col bg-darkbg flex-grow mt-5 prose prose-invert max-w-full p-5 rounded-t-lg overflow-x-hidden">
|
||||
{#if step === 0}
|
||||
<h2>Choose the language</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('de')
|
||||
$DataBase.language='de'
|
||||
step = 1
|
||||
}}>• Deutsch</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('en')
|
||||
$DataBase.language='en'
|
||||
step = 1
|
||||
}}>• English</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('ko')
|
||||
$DataBase.language='ko'
|
||||
step = 1
|
||||
}}>• 한국어</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('cn')
|
||||
$DataBase.language='cn'
|
||||
step = 1
|
||||
}}>• 中文</button>
|
||||
</div>
|
||||
<div class="w-full h-full flex justify-center welcome-bg text-textcolor relative bg-gray-900">
|
||||
<div class="w-2xl overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-hidden" class:justify-center={!start}>
|
||||
{#if !start}
|
||||
<div class="w-full justify-center flex mt-8 logo-animation" on:animationend={() => {
|
||||
start = true
|
||||
}}>
|
||||
<img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm mb-0">
|
||||
</div>
|
||||
{:else}
|
||||
<div class="relative w-full flex-col bg-darkbg flex-grow mt-5 max-w-full p-5 rounded-t-lg overflow-x-hidden flex border-gray-800 border chat-animation overflow-y-auto">
|
||||
{#if step === 0}
|
||||
<h2 class="animate-bounce">Choose your language</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('de')
|
||||
$DataBase.language='de'
|
||||
step = 1
|
||||
}}>• Deutsch</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('en')
|
||||
$DataBase.language='en'
|
||||
step = 1
|
||||
}}>• English</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('ko')
|
||||
$DataBase.language='ko'
|
||||
step = 1
|
||||
}}>• 한국어</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('cn')
|
||||
$DataBase.language='cn'
|
||||
step = 1
|
||||
}}>• 中文</button>
|
||||
</div>
|
||||
|
||||
{:else if step === 1}
|
||||
<h2>{language.setup.chooseProvider}</h2>
|
||||
<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-textcolor2">{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>
|
||||
<Chat name="Risu" message={language.setup.welcome} isLastMemory={false} />
|
||||
{#if step >= 2}
|
||||
<Chat name={$DataBase.username} message={$DataBase.username} isLastMemory={false} />
|
||||
<Chat name="Risu" message={language.setup.welcome2.replace('{username}', $DataBase.username)} isLastMemory={false} />
|
||||
{/if}
|
||||
{#if step === 2}
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
provider = 'openai'
|
||||
step = 3
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">OpenAI</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.openAIProvider}</span>
|
||||
</button>
|
||||
<button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
provider = 'openrouter'
|
||||
step = 3
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">OpenRouter</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.openrouterProvider}</span>
|
||||
</button>
|
||||
<button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
provider = 'horde'
|
||||
step = 3
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">Horde</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.hordeProvider}</span>
|
||||
</button>
|
||||
<button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
provider = 'later'
|
||||
step = 3
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">Setup Later</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.setProviderLater}</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if step === 3}
|
||||
<Chat name={$DataBase.username} message={provider} isLastMemory={false} />
|
||||
<Chat name="Risu" message={language.setup.welcome2.replace('{username}', $DataBase.username)} isLastMemory={false} />
|
||||
|
||||
{/if}
|
||||
<div class="flex items-end mb-2 w-full mt-auto ">
|
||||
<input class="flex-grow text-textcolor p-2 min-w-0 bg-transparent input-text text-xl ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
|
||||
bind:value={input}
|
||||
on:keydown={(e) => {
|
||||
if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey) && !e.isComposing){
|
||||
e.preventDefault()
|
||||
}
|
||||
}}
|
||||
style:height={'44px'}
|
||||
/>
|
||||
<div on:click={send}
|
||||
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
|
||||
<Send />
|
||||
</div>
|
||||
</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>
|
||||
{/if}
|
||||
|
||||
</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}
|
||||
|
||||
<button class="hover:text-green-500 transition-colors ml-2" on:click={() => {
|
||||
step = step - 1
|
||||
}}>• Go Back</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.classic{
|
||||
color: #fafafa;
|
||||
}
|
||||
.classic-italic{
|
||||
color: #8C8D93;
|
||||
}
|
||||
.welcome-bg{
|
||||
background-image: url("/public/welcome/welcomebg.png");
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes darkness {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-animation{
|
||||
animation: logo-animation 3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes logo-animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-animation{
|
||||
animation: chat-animation 3s ease-in-out;
|
||||
}
|
||||
@keyframes chat-animation {
|
||||
from {
|
||||
top: 100vh;
|
||||
}
|
||||
to {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user