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

Add custom css and rs classes for it

Browse Source
This commit is contained in:
kwaroran
2024-09-09 18:47:30 +09:00
parent 611f3e4b94
commit eb8e1d31c8
10 changed files with 67 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lang/en.ts
View File

@@ -143,6 +143,7 @@ export const languageEnglish = {
urllora: "You can use direct download link of the model file. you can make direct url from google drive like website like https://sites.google.com/site/gdocs2direct/ , or use civitai URL, copy the the AIR (looks like `urn:air:flux1:lora:civitai:180891@776656` or just `civitai:180891@776656`) and paste it.",
namespace: "Namespace is a unique identifier for the module. it is used to prevent conflicts between modules, and for interaction of presets, other modules and etc. if you are not sure what to put, leave it blank.",
moduleIntergration: "You can enable modules by putting the module namespace in the module intergartion sections. if you want to enable multiple modules, you can seperate them by comma. for example, `module1,module2,module3`. this is for advanced users, who wants to vary the use of modules by presets.",
customCSS: "Custom CSS for styling. you can also disable/enable it by pressing (Ctrl + .) if something goes wrong.",
},
setup: {
chooseProvider: "Choose AI Provider",
@@ -703,4 +704,5 @@ export const languageEnglish = {
miscTools: "Misc Tools",
promptConvertion: "Prompt Convertion",
convertionStep1: "Select all file related to the prompt (Context, Instruct and Sampler JSON is supported)",
customCSS: "Custom CSS",
}

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

@@ -5,7 +5,7 @@
import { DataBase, setPreset } from "src/ts/storage/database";
import Chat from "../ChatScreens/Chat.svelte";
import { prebuiltPresets } from "src/ts/process/templates/templates";
import { updateTextTheme } from "src/ts/gui/colorscheme";
import { updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
let step = 0
let provider = ''
@@ -65,7 +65,7 @@
setTimeout(() => {
$DataBase = setPreset($DataBase, prebuiltPresets.OAI2)
$DataBase.textTheme = 'highcontrast'
updateTextTheme()
updateTextThemeAndCSS()
if(provider === 'openrouter'){
$DataBase.aiModel = 'openrouter'
$DataBase.subModel = 'openrouter'

28
src/lib/Setting/Pages/DisplaySettings.svelte
View File

@@ -8,11 +8,12 @@
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import { updateAnimationSpeed } from "src/ts/gui/animation";
import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import ColorInput from "src/lib/UI/GUI/ColorInput.svelte";
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
const onSchemeInputChange = (e:Event) => {
changeColorScheme((e.target as HTMLInputElement).value)
@@ -24,7 +25,7 @@
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
{#if submenu !== -1}
<div class="flex w-full rounded-md border border-darkborderc mb-4">
<div class="flex w-full rounded-md border border-darkborderc mb-4 overflow-x-auto h-16 min-h-16 overflow-y-clip">
<button on:click={() => {
submenu = 0
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
@@ -128,7 +129,7 @@
{/if}
<span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextThemeAndCSS}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
<OptionInput value="custom" >Custom</OptionInput>
@@ -136,40 +137,40 @@
{#if $DataBase.textTheme === "custom"}
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextThemeAndCSS} />
<span class="ml-2">Normal Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextThemeAndCSS} />
<span class="ml-2">Italic Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextThemeAndCSS} />
<span class="ml-2">Bold Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextThemeAndCSS} />
<span class="ml-2">Italic Bold Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextThemeAndCSS} />
<span class="ml-2">Single Quote Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextThemeAndCSS} />
<span class="ml-2">Double Quote Text</span>
</div>
{/if}
<span class="text-textcolor mt-4">{language.font}</span>
<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextThemeAndCSS}>
<OptionInput value="default" >Default</OptionInput>
<OptionInput value="timesnewroman" >Times New Roman</OptionInput>
<OptionInput value="custom" >Custom</OptionInput>
</SelectInput>
{#if $DataBase.font === "custom"}
<TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
<TextInput bind:value={$DataBase.customFont} on:change={updateTextThemeAndCSS} />
{/if}
{/if}
@@ -325,4 +326,9 @@
</div>
{/if}
<span class="text-textcolor mt-4">{language.customCSS}<Help key="customCSS" /></span>
<TextAreaInput bind:value={$DataBase.customCSS} onInput={() => {
updateTextThemeAndCSS()
}} />
{/if}

8
src/lib/Setting/Settings.svelte
View File

@@ -27,10 +27,10 @@
}
</script>
<div class="h-full w-full flex justify-center setting-bg">
<div class="h-full max-w-screen-lg w-full flex relative">
<div class="h-full w-full flex justify-center setting-bg rs-setting-cont">
<div class="h-full max-w-screen-lg w-full flex relative rs-setting-cont-2">
{#if window.innerWidth >= 700 || $SettingsMenuIndex === -1}
<div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
<div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative rs-setting-cont-3"
class:w-full={window.innerWidth < 700}>
<button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={$SettingsMenuIndex === 1 || $SettingsMenuIndex === 13}
@@ -141,7 +141,7 @@
{/if}
{#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1}
{#key $SettingsMenuIndex}
<div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
<div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative rs-setting-cont-4">
{#if $SettingsMenuIndex === 0}
<UserSettings />
{:else if $SettingsMenuIndex === 1}

2
src/lib/SideBars/Sidebar.svelte
View File

@@ -337,7 +337,7 @@
</script>
<div
class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative"
class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative rs-sidebar"
class:editMode
class:risu-sub-sidebar={$sideBarClosing}
class:risu-sub-sidebar-close={$sideBarClosing}

11
src/ts/gui/colorscheme.ts
View File

@@ -4,6 +4,7 @@ import { downloadFile } from "../storage/globalApi";
import { BufferToText, selectSingleFile } from "../util";
import { alertError } from "../alert";
import { isLite } from "../lite";
import { CustomCSSStore, SafeModeStore } from "../stores";
export interface ColorScheme{
bgcolor: string;
@@ -179,7 +180,8 @@ export async function importColorScheme(){
}
}
export function updateTextTheme(){
export function updateTextThemeAndCSS(){
let db = get(DataBase)
const root = document.querySelector(':root') as HTMLElement;
if(!root){
@@ -250,4 +252,11 @@ export function updateTextTheme(){
break
}
}
if(!get(SafeModeStore)){
CustomCSSStore.set(db.customCSS ?? '')
}
else{
CustomCSSStore.set('')
}
}

10
src/ts/hotkey.ts
View File

@@ -1,8 +1,9 @@
import { get } from "svelte/store"
import { alertSelect, alertToast, doingAlert } from "./alert"
import { DataBase, changeToPreset as changeToPreset2 } from "./storage/database"
import { openPersonaList, openPresetList, selectedCharID, settingsOpen } from "./stores"
import { openPersonaList, openPresetList, SafeModeStore, selectedCharID, settingsOpen } from "./stores"
import { language } from "src/lang"
import { updateTextThemeAndCSS } from "./gui/colorscheme"
export function initHotkey(){
document.addEventListener('keydown', (ev) => {
@@ -86,6 +87,13 @@ export function initHotkey(){
ev.stopPropagation()
break
}
case '.':{
SafeModeStore.set(!get(SafeModeStore))
updateTextThemeAndCSS()
ev.preventDefault()
ev.stopPropagation()
break
}
}
}
if(ev.key === 'Escape'){

2
src/ts/storage/database.ts
View File

@@ -434,6 +434,7 @@ export function setDatabase(data:Database){
data.translatorInputLanguage ??= 'auto'
data.falModel ??= 'fal-ai/flux/dev'
data.falLoraScale ??= 1
data.customCSS ??= ''
changeLanguage(data.language)
DataBase.set(data)
}
@@ -726,6 +727,7 @@ export interface Database{
falLoraName: string
falLoraScale: number
moduleIntergration: string
customCSS: string
}
export interface customscript{

4
src/ts/storage/globalApi.ts
View File

@@ -21,7 +21,7 @@ import { loadRisuAccountData } from "../drive/accounter";
import { decodeRisuSave, encodeRisuSave } from "./risuSave";
import { AutoStorage } from "./autoStorage";
import { updateAnimationSpeed } from "../gui/animation";
import { updateColorScheme, updateTextTheme } from "../gui/colorscheme";
import { updateColorScheme, updateTextThemeAndCSS } from "../gui/colorscheme";
import { saveDbKei } from "../kei/backup";
import { Capacitor, CapacitorHttp } from '@capacitor/core';
import * as CapFS from '@capacitor/filesystem'
@@ -525,7 +525,7 @@ export async function loadData() {
await checkNewFormat()
const db = get(DataBase);
updateColorScheme()
updateTextTheme()
updateTextThemeAndCSS()
updateAnimationSpeed()
updateHeightMode()
updateErrorHandling()

18
src/ts/stores.ts
View File

@@ -45,11 +45,29 @@ export const ShowRealmFrameStore = writable('')
export const PlaygroundStore = writable(0)
export const HideIconStore = writable(false)
export const UserIconProtrait = writable(false)
export const CustomCSSStore = writable('')
export const SafeModeStore = writable(false)
let lastGlobalEnabledModules: string[] = []
let lastChatEnabledModules: string[] = []
let moduleHideIcon = false
let characterHideIcon = false
CustomCSSStore.subscribe((css) => {
console.log(css)
const q = document.querySelector('#customcss')
if(q){
q.innerHTML = css
}
else{
const s = document.createElement('style')
s.id = 'customcss'
s.innerHTML = css
document.body.appendChild(s)
}
})
function createSimpleCharacter(char:character|groupChat){
if((!char) || char.type === 'group'){
return null