happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Components naming

This commit is contained in:
Aleksander Grygier 2025-11-28 15:39:47 +01:00
parent 3470b12b76
commit 5fadd0fe18
6 changed files with 43 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
tools/server/webui/docs/high-level-architecture.md → tools/server/webui/docs/high-level-architecture.mmd
View File

@ -1,4 +1,3 @@
```mermaid
flowchart TB flowchart TB
subgraph Routes["📍 Routes"] subgraph Routes["📍 Routes"]
R1["/ (+page.svelte)"] R1["/ (+page.svelte)"]
@ -12,13 +11,12 @@ flowchart TB
C_Sidebar["ChatSidebar"] C_Sidebar["ChatSidebar"]
C_Screen["ChatScreen"] C_Screen["ChatScreen"]
end end
subgraph ChatComponents["Chat"] subgraph ChatUIComponents["Chat UI"]
C_Form["ChatForm"] C_Form["ChatForm"]
C_Messages["ChatMessages"] C_Messages["ChatMessages"]
C_Message["ChatMessage"] C_Message["ChatMessage"]
end C_Attach["ChatAttachments"]
subgraph ControlComponents["Controls"] C_ModelsSelector["ModelsSelector"]
C_SelectorModel["SelectorModel"]
C_Settings["ChatSettings"] C_Settings["ChatSettings"]
end end
end end
@ -47,9 +45,9 @@ flowchart TB
S2Utils["<b>Utilities:</b><br/>setTitleUpdateConfirmationCallback()"] S2Utils["<b>Utilities:</b><br/>setTitleUpdateConfirmationCallback()"]
end end
subgraph S3["modelsStore"] subgraph S3["modelsStore"]
S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelUsage<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching"] S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelUsage<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching<br/>propsCacheVersion"]
S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds"] S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds<br/>singleModelName"]
S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelProps()<br/>updateModelModalities()"] S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelModalitiesArray()<br/>getModelProps()<br/>updateModelModalities()"]
S3Status["<b>Status Queries:</b><br/>isModelLoaded()<br/>isModelOperationInProgress()<br/>getModelStatus()<br/>isModelPropsFetching()"] S3Status["<b>Status Queries:</b><br/>isModelLoaded()<br/>isModelOperationInProgress()<br/>getModelStatus()<br/>isModelPropsFetching()"]
S3Fetch["<b>Data Fetching:</b><br/>fetch()<br/>fetchRouterModels()<br/>fetchModelProps()<br/>fetchModalitiesForLoadedModels()"] S3Fetch["<b>Data Fetching:</b><br/>fetch()<br/>fetchRouterModels()<br/>fetchModelProps()<br/>fetchModalitiesForLoadedModels()"]
S3Select["<b>Model Selection:</b><br/>selectModelById()<br/>selectModelByName()<br/>clearSelection()<br/>findModelByName()<br/>findModelById()<br/>hasModel()"] S3Select["<b>Model Selection:</b><br/>selectModelById()<br/>selectModelByName()<br/>clearSelection()<br/>findModelByName()<br/>findModelById()<br/>hasModel()"]
@ -59,7 +57,7 @@ flowchart TB
end end
subgraph S4["serverStore"] subgraph S4["serverStore"]
S4State["<b>State:</b><br/>props<br/>loading, error<br/>role<br/>fetchPromise"] S4State["<b>State:</b><br/>props<br/>loading, error<br/>role<br/>fetchPromise"]
S4Getters["<b>Getters:</b><br/>modelName<br/>supportedModalities<br/>supportsVision<br/>supportsAudio<br/>defaultParams<br/>contextSize<br/>slotsEndpointAvailable<br/>isRouterMode<br/>isModelMode"] S4Getters["<b>Getters:</b><br/>defaultParams<br/>contextSize<br/>slotsEndpointAvailable<br/>isRouterMode<br/>isModelMode"]
S4Data["<b>Data Handling:</b><br/>fetch()<br/>getErrorMessage()<br/>clear()"] S4Data["<b>Data Handling:</b><br/>fetch()<br/>getErrorMessage()<br/>clear()"]
S4Utils["<b>Utilities:</b><br/>detectRole()"] S4Utils["<b>Utilities:</b><br/>detectRole()"]
end end
@ -103,26 +101,24 @@ flowchart TB
RE22["selectedModelOption()"] RE22["selectedModelOption()"]
RE23["loadedModelIds()"] RE23["loadedModelIds()"]
RE24["loadingModelIds()"] RE24["loadingModelIds()"]
RE25["propsCacheVersion()"]
RE26["singleModelName()"]
end end
subgraph ServerExports["serverStore"] subgraph ServerExports["serverStore"]
RE25["serverProps()"] RE27["serverProps()"]
RE26["serverLoading()"] RE28["serverLoading()"]
RE27["serverError()"] RE29["serverError()"]
RE28["serverRole()"] RE30["serverRole()"]
RE29["modelName()"] RE31["slotsEndpointAvailable()"]
RE30["supportedModalities()"] RE32["defaultParams()"]
RE31["supportsVision()"] RE33["contextSize()"]
RE32["supportsAudio()"] RE34["isRouterMode()"]
RE33["slotsEndpointAvailable()"] RE35["isModelMode()"]
RE34["defaultParams()"]
RE35["contextSize()"]
RE36["isRouterMode()"]
RE37["isModelMode()"]
end end
subgraph SettingsExports["settingsStore"] subgraph SettingsExports["settingsStore"]
RE38["config()"] RE36["config()"]
RE39["theme()"] RE37["theme()"]
RE40["isInitialized()"] RE38["isInitialized()"]
end end
end end
end end
@ -181,8 +177,10 @@ flowchart TB
%% Component hierarchy %% Component hierarchy
C_Screen --> C_Form & C_Messages & C_Settings C_Screen --> C_Form & C_Messages & C_Settings
C_Messages --> C_Message C_Messages --> C_Message
C_Message --> C_SelectorModel C_Message --> C_ModelsSelector
C_Form --> C_SelectorModel C_Form --> C_ModelsSelector
C_Form --> C_Attach
C_Message --> C_Attach
%% Components use Stores %% Components use Stores
C_Screen --> S1 & S2 C_Screen --> S1 & S2
@ -190,7 +188,7 @@ flowchart TB
C_Message --> S1 & S2 & S3 C_Message --> S1 & S2 & S3
C_Form --> S1 & S3 C_Form --> S1 & S3
C_Sidebar --> S2 C_Sidebar --> S2
C_SelectorModel --> S3 & S4 C_ModelsSelector --> S3 & S4
C_Settings --> S5 C_Settings --> S5
%% Stores export Reactive State %% Stores export Reactive State
@ -233,8 +231,9 @@ flowchart TB
class R1,R2,RL routeStyle class R1,R2,RL routeStyle
class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message componentStyle class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message componentStyle
class C_SelectorModel,C_Settings componentStyle class C_ModelsSelector,C_Settings componentStyle
class LayoutComponents,ChatComponents,ControlComponents componentGroupStyle class C_Attach componentStyle
class LayoutComponents,ChatUIComponents componentGroupStyle
class S1,S2,S3,S4,S5 storeStyle class S1,S2,S3,S4,S5 storeStyle
class S1State,S2State,S3State,S4State,S5State stateStyle class S1State,S2State,S3State,S4State,S5State stateStyle
class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle
@ -251,4 +250,3 @@ flowchart TB
class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle
class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle
class API1,API2,API3,API4 apiStyle class API1,API2,API3,API4 apiStyle
```

6
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
View File

@ -5,7 +5,7 @@
ChatFormActionFileAttachments, ChatFormActionFileAttachments,
ChatFormActionRecord, ChatFormActionRecord,
ChatFormActionSubmit, ChatFormActionSubmit,
SelectorModel ModelsSelector
} from '$lib/components/app'; } from '$lib/components/app';
import { FileTypeCategory } from '$lib/enums'; import { FileTypeCategory } from '$lib/enums';
import { getFileTypeCategory } from '$lib/utils/file-type'; import { getFileTypeCategory } from '$lib/utils/file-type';
@ -153,7 +153,7 @@
return ''; return '';
}); });
let selectorModelRef: SelectorModel | undefined = $state(undefined); let selectorModelRef: ModelsSelector | undefined = $state(undefined);
export function openModelSelector() { export function openModelSelector() {
selectorModelRef?.open(); selectorModelRef?.open();
@ -178,7 +178,7 @@
{onFileUpload} {onFileUpload}
/> />
<SelectorModel <ModelsSelector
bind:this={selectorModelRef} bind:this={selectorModelRef}
currentModel={conversationModel} currentModel={conversationModel}
forceForegroundText={true} forceForegroundText={true}

8
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { import {
BadgeModelName, ModelBadge,
ChatMessageActions, ChatMessageActions,
ChatMessageStatistics, ChatMessageStatistics,
ChatMessageThinkingBlock, ChatMessageThinkingBlock,
CopyToClipboardIcon, CopyToClipboardIcon,
MarkdownContent, MarkdownContent,
SelectorModel ModelsSelector
} from '$lib/components/app'; } from '$lib/components/app';
import { useProcessingState } from '$lib/hooks/use-processing-state.svelte'; import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte'; import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte';
@ -248,14 +248,14 @@
{#if displayedModel()} {#if displayedModel()}
<span class="inline-flex flex-wrap items-center gap-2 text-xs text-muted-foreground"> <span class="inline-flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
{#if isRouter} {#if isRouter}
<SelectorModel <ModelsSelector
currentModel={displayedModel()} currentModel={displayedModel()}
onModelChange={handleModelChange} onModelChange={handleModelChange}
disabled={isLoading()} disabled={isLoading()}
upToMessageId={message.id} upToMessageId={message.id}
/> />
{:else} {:else}
<BadgeModelName model={displayedModel() || undefined} onclick={handleCopyModel} /> <ModelBadge model={displayedModel() || undefined} onclick={handleCopyModel} />
{/if} {/if}
{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms} {#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}

4
tools/server/webui/src/lib/components/app/index.ts
View File

@ -55,14 +55,14 @@ export { default as ActionButton } from './misc/ActionButton.svelte';
export { default as ActionDropdown } from './misc/ActionDropdown.svelte'; export { default as ActionDropdown } from './misc/ActionDropdown.svelte';
export { default as BadgeChatStatistic } from './misc/BadgeChatStatistic.svelte'; export { default as BadgeChatStatistic } from './misc/BadgeChatStatistic.svelte';
export { default as BadgeInfo } from './misc/BadgeInfo.svelte'; export { default as BadgeInfo } from './misc/BadgeInfo.svelte';
export { default as BadgeModelName } from './misc/BadgeModelName.svelte'; export { default as ModelBadge } from './models/ModelBadge.svelte';
export { default as BadgeModality } from './misc/BadgeModality.svelte'; export { default as BadgeModality } from './misc/BadgeModality.svelte';
export { default as ConversationSelection } from './misc/ConversationSelection.svelte'; export { default as ConversationSelection } from './misc/ConversationSelection.svelte';
export { default as CopyToClipboardIcon } from './misc/CopyToClipboardIcon.svelte'; export { default as CopyToClipboardIcon } from './misc/CopyToClipboardIcon.svelte';
export { default as KeyboardShortcutInfo } from './misc/KeyboardShortcutInfo.svelte'; export { default as KeyboardShortcutInfo } from './misc/KeyboardShortcutInfo.svelte';
export { default as MarkdownContent } from './misc/MarkdownContent.svelte'; export { default as MarkdownContent } from './misc/MarkdownContent.svelte';
export { default as RemoveButton } from './misc/RemoveButton.svelte'; export { default as RemoveButton } from './misc/RemoveButton.svelte';
export { default as SelectorModel } from './misc/SelectorModel.svelte'; export { default as ModelsSelector } from './models/ModelsSelector.svelte';
// Server // Server

0
tools/server/webui/src/lib/components/app/misc/BadgeModelName.svelte → tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
View File

0
tools/server/webui/src/lib/components/app/misc/SelectorModel.svelte → tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
View File