Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debug button and experimental tag #27

Merged
merged 4 commits into from
Dec 17, 2024
Merged

Debug button and experimental tag #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d49eae
Add Debug Button
marijnvg-tng Dec 17, 2024
a405d81
Add Experimental tag to LlamaCpp backend
marijnvg-tng Dec 17, 2024
a984b1e
Minor UI improvement in the Basics tab under AppSettings
marijnvg-tng Dec 17, 2024
ebca464
Fix Checkbox style error
marijnvg-tng Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions WebUI/src/assets/css/compontents.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,29 @@
display: flex;
justify-content: center;
align-items: center;


&::after {
content: " ";
width: 14px;
height: 14px;
background: url("@/assets/svg/right.svg") 0px 0px no-repeat;
background-size: contain;

}
}
}

.v-checkbox-control-table {
border: 1px solid var(--compontents-main);
border-radius: 4px;
width: 16px;
height: 16px;

&.v-checkbox-checked-table {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;


Expand Down
4 changes: 2 additions & 2 deletions WebUI/src/components/InstallationManagement.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
</td>
<td>
<button v-if="component.status !== 'running' && !component.isLoading"
class="v-checkbox-control flex-none w-5 h-5"
:class="{ 'v-checkbox-checked': component.enabled}"
class="v-checkbox-control-table flex-none w-5 h-5"
:class="{ 'v-checkbox-checked-table': component.enabled}"
@click="() => {
if (component.enabled && !component.isSetUp) {
enabledComponents.delete(component.serviceName)
Expand Down
64 changes: 41 additions & 23 deletions WebUI/src/components/SettingsBasic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
<template>
<div class="flex flex-col gap-2">
<p>{{ languages.SETTINGS_BASIC_LANGUAGE }}</p>
<drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
<template #selected>
<div class="flex gap-2 items-center">
<span class="rounded-full bg-green-500 w-2 h-2"></span>
<span>{{ i18n.currentLanguageName }}</span>
</div>
</template>
<template #list="slotItem">
<div class="flex gap-2 items-center">
<span class="rounded-full bg-green-500 w-2 h-2"></span>
<span>{{ slotItem.item.name }}</span>
</div>
</template>
</drop-selector>
</div>
<div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
<p>Theme</p>
<div class="grid gap-2" :class="{[`grid-cols-${theme.availableThemes.length}`]: true}">
<radio-block v-for="themeName in theme.availableThemes" :checked="theme.active === themeName"
:text="themeToDisplayName(themeName)"
@click="() => theme.selected = themeName"></radio-block>
<div class="border-b border-color-spilter flex flex-col gap-5 py-4">
<div class="flex flex-col gap-2">
<p>{{ languages.SETTINGS_BASIC_LANGUAGE }}</p>
<drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
<template #selected>
<div class="flex gap-2 items-center">
<span class="rounded-full bg-green-500 w-2 h-2"></span>
<span>{{ i18n.currentLanguageName }}</span>
</div>
</template>
<template #list="slotItem">
<div class="flex gap-2 items-center">
<span class="rounded-full bg-green-500 w-2 h-2"></span>
<span>{{ slotItem.item.name }}</span>
</div>
</template>
</drop-selector>
</div>
<div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
<p>Theme</p>
<div class="grid gap-2" :class="{[`grid-cols-${theme.availableThemes.length}`]: true}">
<radio-block v-for="themeName in theme.availableThemes" :checked="theme.active === themeName"
:text="themeToDisplayName(themeName)"
@click="() => theme.selected = themeName"></radio-block>
</div>
</div>
</div>
<div class="flex flex-col gap-2">
Expand Down Expand Up @@ -53,12 +55,21 @@
<div class="flex gap-2 items-center">
<span class="rounded-full bg-green-500 w-2 h-2"></span>
<span>{{ textInferenceBackendDisplayName[textInference.backend] }}</span>
<!-- Flag LlamaCpp as experimental -->
<span v-if="textInference.backend=='LLAMA.CPP'"
class="rounded-lg h-4 px-1 text-xs"
:style="{ 'background-color': '#cc00ff88' }">
Experimental</span>
</div>
</template>
<template #list="slotItem">
<div class="flex gap-2 items-center">
<span class="rounded-full bg-green-500 w-2 h-2"></span>
<span>{{ textInferenceBackendDisplayName[slotItem.item as typeof backendTypes[number]] }}</span>
<span v-if="slotItem.item=='LLAMA.CPP'"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion to calculate the colour of the backend dot in the line above by server state. If expensive, omit

class="rounded-lg h-4 px-1 text-xs"
:style="{ 'background-color': '#cc00ff88' }">
Experimental</span>
</div>
</template>
</drop-selector>
Expand All @@ -82,6 +93,9 @@
</div>
</div>
</div>
<div class="text-right my-5">
<button @click="openDebug" class="v-radio-block">Open Developer Logs</button>
</div>
</template>
<script setup lang="ts">

Expand Down Expand Up @@ -129,6 +143,10 @@ const graphicsName = computed(() => {
return globalSetup.graphicsList.find(item => modelSettings.graphics as number == item.index)?.name || "";
})

function openDebug() {
window.electronAPI.openDevTools()
}

function changeGraphics(value: any, index: number) {
globalSetup.applyModelSettings({graphics: (value as GraphicsItem).index});
}
Expand Down
Loading