"docs/source/vscode:/vscode.git/clone" did not exist on "0ccad2ad2d80f3d58780c4503e3ea4dfd1ff3c0e"
Commit f7de01cb authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

refac: styling

parent 1bc96de6
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
<div class="flex flex-col md:flex-row w-full h-full py-3 md:space-x-4"> <div class="flex flex-col md:flex-row w-full h-full py-3 md:space-x-4">
<div <div
class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col md:flex-none md:w-40 dark:text-gray-200 text-xs text-left scrollbar-hidden" class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col md:flex-none md:w-44 dark:text-gray-200 text-xs text-left scrollbar-hidden"
> >
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'general' 'general'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'connections' 'connections'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'connections'; selectedTab = 'connections';
}} }}
...@@ -77,8 +77,8 @@ ...@@ -77,8 +77,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'models' 'models'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'models'; selectedTab = 'models';
}} }}
...@@ -103,8 +103,8 @@ ...@@ -103,8 +103,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'users' 'users'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'users'; selectedTab = 'users';
}} }}
...@@ -127,8 +127,8 @@ ...@@ -127,8 +127,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'interface' 'interface'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'interface'; selectedTab = 'interface';
}} }}
...@@ -153,8 +153,8 @@ ...@@ -153,8 +153,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'audio' 'audio'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'audio'; selectedTab = 'audio';
}} }}
...@@ -180,8 +180,8 @@ ...@@ -180,8 +180,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'images' 'images'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'images'; selectedTab = 'images';
}} }}
...@@ -206,8 +206,8 @@ ...@@ -206,8 +206,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'banners' 'banners'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'banners'; selectedTab = 'banners';
}} }}
...@@ -235,8 +235,8 @@ ...@@ -235,8 +235,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'pipelines' 'pipelines'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'pipelines'; selectedTab = 'pipelines';
}} }}
...@@ -265,8 +265,8 @@ ...@@ -265,8 +265,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'db' 'db'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'db'; selectedTab = 'db';
}} }}
......
...@@ -113,183 +113,184 @@ ...@@ -113,183 +113,184 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class="flex flex-col gap-3"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
<div> <div class="flex flex-col gap-3">
<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div> <div class=" py-0.5 flex w-full justify-between">
<div class="flex items-center relative"> <div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div>
<select <div class="flex items-center relative">
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" <select
bind:value={STT_ENGINE} class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
placeholder="Select an engine" bind:value={STT_ENGINE}
> placeholder="Select an engine"
<option value="">{$i18n.t('Whisper (Local)')}</option> >
<option value="openai">OpenAI</option> <option value="">{$i18n.t('Whisper (Local)')}</option>
<option value="web">{$i18n.t('Web API')}</option> <option value="openai">OpenAI</option>
</select> <option value="web">{$i18n.t('Web API')}</option>
</div> </select>
</div>
{#if STT_ENGINE === 'openai'}
<div>
<div class="mt-1 flex gap-2 mb-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
placeholder={$i18n.t('API Base URL')}
bind:value={STT_OPENAI_API_BASE_URL}
required
/>
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
placeholder={$i18n.t('API Key')}
bind:value={STT_OPENAI_API_KEY}
required
/>
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850 my-2" /> {#if STT_ENGINE === 'openai'}
<div>
<div> <div class="mt-1 flex gap-2 mb-1">
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('STT Model')}</div>
<div class="flex w-full">
<div class="flex-1">
<input <input
list="model-list"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={STT_MODEL} placeholder={$i18n.t('API Base URL')}
placeholder="Select a model" bind:value={STT_OPENAI_API_BASE_URL}
required
/> />
<datalist id="model-list"> <input
<option value="whisper-1" /> class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
</datalist> placeholder={$i18n.t('API Key')}
bind:value={STT_OPENAI_API_KEY}
required
/>
</div> </div>
</div> </div>
</div>
{/if}
</div>
<hr class=" dark:border-gray-800" /> <hr class=" dark:border-gray-850 my-2" />
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('TTS Settings')}</div> <div class=" mb-1.5 text-sm font-medium">{$i18n.t('STT Model')}</div>
<div class="flex w-full">
<div class=" py-0.5 flex w-full justify-between"> <div class="flex-1">
<div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div> <input
<div class="flex items-center relative"> list="model-list"
<select class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
class=" dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" bind:value={STT_MODEL}
bind:value={TTS_ENGINE} placeholder="Select a model"
placeholder="Select a mode" />
on:change={(e) => {
if (e.target.value === 'openai') { <datalist id="model-list">
getOpenAIVoices(); <option value="whisper-1" />
TTS_VOICE = 'alloy'; </datalist>
TTS_MODEL = 'tts-1'; </div>
} else { </div>
getWebAPIVoices(); </div>
TTS_VOICE = ''; {/if}
}
}}
>
<option value="">{$i18n.t('Web API')}</option>
<option value="openai">{$i18n.t('Open AI')}</option>
</select>
</div>
</div> </div>
{#if TTS_ENGINE === 'openai'} <hr class=" dark:border-gray-800" />
<div>
<div class="mt-1 flex gap-2 mb-1"> <div>
<input <div class=" mb-1 text-sm font-medium">{$i18n.t('TTS Settings')}</div>
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
placeholder={$i18n.t('API Base URL')} <div class=" py-0.5 flex w-full justify-between">
bind:value={TTS_OPENAI_API_BASE_URL} <div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div>
required <div class="flex items-center relative">
/> <select
class=" dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
<input bind:value={TTS_ENGINE}
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" placeholder="Select a mode"
placeholder={$i18n.t('API Key')} on:change={(e) => {
bind:value={TTS_OPENAI_API_KEY} if (e.target.value === 'openai') {
required getOpenAIVoices();
/> TTS_VOICE = 'alloy';
TTS_MODEL = 'tts-1';
} else {
getWebAPIVoices();
TTS_VOICE = '';
}
}}
>
<option value="">{$i18n.t('Web API')}</option>
<option value="openai">{$i18n.t('Open AI')}</option>
</select>
</div> </div>
</div> </div>
{/if}
<hr class=" dark:border-gray-850 my-2" /> {#if TTS_ENGINE === 'openai'}
<div>
<div class="mt-1 flex gap-2 mb-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
placeholder={$i18n.t('API Base URL')}
bind:value={TTS_OPENAI_API_BASE_URL}
required
/>
{#if TTS_ENGINE === ''} <input
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Voice')}</div>
<div class="flex w-full">
<div class="flex-1">
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={TTS_VOICE} placeholder={$i18n.t('API Key')}
> bind:value={TTS_OPENAI_API_KEY}
<option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option> required
{#each voices as voice} />
<option
value={voice.voiceURI}
class="bg-gray-100 dark:bg-gray-700"
selected={TTS_VOICE === voice.voiceURI}>{voice.name}</option
>
{/each}
</select>
</div> </div>
</div> </div>
</div> {/if}
{:else if TTS_ENGINE === 'openai'}
<div class=" flex gap-2"> <hr class=" dark:border-gray-850 my-2" />
<div class="w-full">
{#if TTS_ENGINE === ''}
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Voice')}</div> <div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Voice')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <select
list="voice-list"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={TTS_VOICE} bind:value={TTS_VOICE}
placeholder="Select a voice" >
/> <option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option>
<datalist id="voice-list">
{#each voices as voice} {#each voices as voice}
<option value={voice.name} /> <option
value={voice.voiceURI}
class="bg-gray-100 dark:bg-gray-700"
selected={TTS_VOICE === voice.voiceURI}>{voice.name}</option
>
{/each} {/each}
</datalist> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full"> {:else if TTS_ENGINE === 'openai'}
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Model')}</div> <div class=" flex gap-2">
<div class="flex w-full"> <div class="w-full">
<div class="flex-1"> <div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Voice')}</div>
<input <div class="flex w-full">
list="model-list" <div class="flex-1">
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" <input
bind:value={TTS_MODEL} list="voice-list"
placeholder="Select a model" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
/> bind:value={TTS_VOICE}
placeholder="Select a voice"
<datalist id="model-list"> />
{#each models as model}
<option value={model.name} /> <datalist id="voice-list">
{/each} {#each voices as voice}
</datalist> <option value={voice.name} />
{/each}
</datalist>
</div>
</div>
</div>
<div class="w-full">
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('TTS Model')}</div>
<div class="flex w-full">
<div class="flex-1">
<input
list="model-list"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={TTS_MODEL}
placeholder="Select a model"
/>
<datalist id="model-list">
{#each models as model}
<option value={model.name} />
{/each}
</datalist>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> {/if}
{/if} </div>
</div> </div>
</div> </div>
<div class="flex justify-end text-sm font-medium"> <div class="flex justify-end text-sm font-medium">
<button <button
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
saveHandler(); saveHandler();
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
<div class=" space-y-3 pr-1.5"> <div class=" space-y-3 pr-1.5">
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold"> <div class=" self-center text-sm font-semibold">
......
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class="space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class="space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null} {#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null}
<div class=" space-y-3"> <div class=" space-y-3">
<div class="mt-2 space-y-2 pr-1.5"> <div class="mt-2 space-y-2 pr-1.5">
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
saveHandler(); saveHandler();
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
<div> <div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div>
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
saveHandler(); saveHandler();
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if adminConfig !== null} {#if adminConfig !== null}
<div> <div>
<div class=" mb-3 text-sm font-medium">{$i18n.t('General Settings')}</div> <div class=" mb-3 text-sm font-medium">{$i18n.t('General Settings')}</div>
......
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
loading = false; loading = false;
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[24rem]"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden">
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden">
<div> <div>
<div class=" mb-2.5 text-sm font-medium flex"> <div class=" mb-2.5 text-sm font-medium flex">
<div class=" mr-1">{$i18n.t('Set Task Model')}</div> <div class=" mr-1">{$i18n.t('Set Task Model')}</div>
......
...@@ -550,7 +550,7 @@ ...@@ -550,7 +550,7 @@
</script> </script>
<div class="flex flex-col h-full justify-between text-sm"> <div class="flex flex-col h-full justify-between text-sm">
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if ollamaEnabled} {#if ollamaEnabled}
{#if ollamaVersion !== null} {#if ollamaVersion !== null}
<div class="space-y-2 pr-1.5"> <div class="space-y-2 pr-1.5">
......
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
updateHandler(); updateHandler();
}} }}
> >
<div class=" pr-1.5 overflow-y-scroll h-full"> <div class=" pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if PIPELINES_LIST !== null} {#if PIPELINES_LIST !== null}
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold"> <div class=" self-center text-sm font-semibold">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment