Simplify project LLM setup
Keep the project creation modal focused on basic project details and Git cloning, without loading model config data. Move project model selection into a collapsed Advanced Settings accordion on the edit screen, and reduce the project LLM UI to a global preset selector plus the existing tune-icon preset editor shortcut.
Alessandro committed
May 7, 2026 at 03:31 UTC
7b20baebbf49515446ab3fc49a7bd0c9e8dd7f2a
4 files changed
+46
-82
webui/components/projects/project-create.html
-14
@@ -36,14 +36,6 @@
36
</div>
37
</template>
38
39
- <div class="project-detail-inline-section">
40
- <div class="project-detail-header">
41
- <span class="projects-project-card-title">LLM</span>
42
- </div>
43
- <x-component path="projects/project-edit-llm.html">
44
- </x-component>
45
- </div>
46
-
39
<div class="buttons-right">
40
<button type="button" class="button cancel"
41
@click="$store.projects.cancelCreate()"
@@ -82,12 +74,6 @@
74
margin-bottom: 1em;
75
}
76
85
- .project-detail-inline-section {
86
- border-top: 1px solid var(--color-border);
87
- margin-top: 1em;
88
- padding-top: 1em;
89
- }
90
-
77
.button-loading {
78
display: inline-flex;
79
align-items: center;
webui/components/projects/project-edit-llm.html
+29
-61
@@ -4,86 +4,54 @@
4
<title>Project LLM</title>
5
<script type="module">
6
import { store } from "/components/projects/projects-store.js";
7
- import { store as modelConfigStore } from "/plugins/_model_config/webui/model-config-store.js";
7
</script>
8
</head>
9
10
<body>
12
- <div x-data x-init="await $store.modelConfig.ensureLoaded()">
13
- <template x-if="$store.projects && $store.projects.selectedProject && $store.projects.selectedProject.llm && $store.modelConfig._loaded">
14
- <div>
15
- <div class="projects-form-group">
16
- <label class="projects-form-label">Preset</label>
17
- <span class="projects-form-description">Pick a preset to copy its main and utility model settings into this project. Embeddings stay with the current project config.</span>
18
- <select class="projects-form-select"
19
- x-model="$store.projects.selectedProject.llm.preset_key"
20
- @change="$store.projects.applySelectedLlmPreset()">
21
- <option value="current">Current config</option>
22
- <optgroup label="Global presets">
11
+ <div x-data>
12
+ <template x-if="$store.projects && $store.projects.selectedProject && $store.projects.selectedProject.llm">
13
+ <div class="project-llm-preset-row">
14
+ <div class="projects-form-group project-llm-preset-field">
15
+ <label class="projects-form-label">Model preset</label>
16
+ <div class="projects-input-with-button-wrapper project-llm-preset-controls">
17
+ <select class="projects-form-select"
18
+ x-model="$store.projects.selectedProject.llm.preset_key"
19
+ @change="$store.projects.applySelectedLlmPreset()">
20
+ <option value="current">Current project config</option>
21
<template x-for="preset in $store.projects.selectedProject.llm.global_presets" :key="$store.projects.getLlmPresetKey(preset)">
22
<option :value="$store.projects.getLlmPresetKey(preset)" x-text="preset.name"></option>
23
</template>
26
- </optgroup>
27
- <optgroup label="This project's presets">
28
- <template x-for="preset in $store.projects.selectedProject.llm.project_presets" :key="$store.projects.getLlmPresetKey(preset)">
29
- <option :value="$store.projects.getLlmPresetKey(preset)" x-text="preset.name"></option>
30
- </template>
31
- </optgroup>
32
- </select>
33
- </div>
34
-
35
- <div class="projects-form-group">
36
- <label class="projects-form-label">Project preset</label>
37
- <template x-if="$store.projects.selectedProject._meta.creating">
38
- <span class="projects-form-description">Create or update a preset stored in this project's <strong>_model_config/presets.yaml</strong> when the project is saved.</span>
39
- </template>
40
- <template x-if="!$store.projects.selectedProject._meta.creating">
41
- <span class="projects-form-description">Create or update a preset stored in <strong><span x-text="$store.projects.getSelectedAbsPath('.a0proj','plugins','_model_config','presets.yaml')"></span></strong>.</span>
42
- </template>
43
- <div class="projects-input-with-button-wrapper">
44
- <input class="projects-form-input" type="text"
45
- x-model="$store.projects.selectedProject.llm.new_preset_name"
46
- placeholder="Preset name">
47
- <button type="button" class="button icon-button"
48
- :disabled="!$store.projects.selectedProject.llm.new_preset_name.trim()"
49
- @click="$store.projects.saveSelectedLlmProjectPreset()">
50
- <span class="icon material-symbols-outlined">save</span>
51
- <span>Save preset</span>
24
+ </select>
25
+ <button type="button" class="button icon-button project-llm-edit-presets"
26
+ @click="openModal('/plugins/_model_config/webui/main.html')">
27
+ <span class="icon material-symbols-outlined">tune</span>
28
+ <span>Edit Presets</span>
29
</button>
30
</div>
31
</div>
55
-
56
- <template x-for="section in $store.modelConfig.MODEL_SECTIONS" :key="section.key">
57
- <div class="project-llm-model-section"
58
- @input.capture="$store.projects.markLlmCurrent()"
59
- @change.capture="$store.projects.markLlmCurrent()"
60
- x-data="{ get model() { return $store.projects.selectedProject.llm.config[section.key]; }, get modelType() { return section.key.replace('_model', ''); }, get providers() { return $store.modelConfig.getProviders(section.key); }, get searchType() { return $store.modelConfig.getSearchType(section.key); }, apiKeyMode: 'store' }">
61
- <div class="project-llm-section-title" x-text="section.title"></div>
62
- <div class="project-llm-section-description" x-text="section.desc"></div>
63
- <x-component path="/plugins/_model_config/webui/model-field.html"></x-component>
64
- </div>
65
- </template>
32
</div>
33
</template>
34
</div>
35
</body>
36
<style>
71
- .project-llm-model-section {
72
- border-top: 1px dashed var(--color-border);
73
- margin-top: 1em;
74
- padding-top: 1em;
37
+ .project-llm-preset-row {
38
+ max-width: 100%;
39
+ }
40
+
41
+ .project-llm-preset-field {
42
+ margin-bottom: 0;
43
+ }
44
+
45
+ .project-llm-preset-controls {
46
+ align-items: stretch;
47
}
48
77
- .project-llm-section-title {
78
- font-size: 0.95rem;
79
- font-weight: 700;
80
- margin-bottom: 0.25em;
49
+ .project-llm-preset-controls select {
50
+ min-width: 0;
51
}
52
83
- .project-llm-section-description {
84
- font-size: 0.8rem;
85
- opacity: 0.75;
86
- margin-bottom: 0.8em;
53
+ .project-llm-edit-presets {
54
+ flex: 0 0 auto;
55
}
56
</style>
57
webui/components/projects/project-edit.html
+17
-6
@@ -32,14 +32,19 @@
32
</div>
33
<x-component path="projects/project-edit-basic-data.html">
34
</x-component>
35
- </div>
35
37
- <div class="project-detail">
38
- <div class="project-detail-header">
39
- <span class="projects-project-card-title">LLM</span>
36
+ <div class="settings-advanced-section project-advanced-section" x-data="{ advOpen: false }">
37
+ <button type="button" class="settings-advanced-toggle" @click="advOpen = !advOpen">
38
+ <span class="material-symbols-outlined settings-advanced-toggle-icon"
39
+ :style="advOpen ? 'transform:rotate(90deg)' : ''">chevron_right</span>
40
+ <span>Advanced Settings</span>
41
+ </button>
42
+
43
+ <div class="settings-advanced-body" x-show="advOpen" x-transition.opacity style="display: none;">
44
+ <x-component path="projects/project-edit-llm.html">
45
+ </x-component>
46
+ </div>
47
</div>
41
- <x-component path="projects/project-edit-llm.html">
42
- </x-component>
48
</div>
49
50
<div class="project-detail">
@@ -104,6 +109,12 @@
109
.project-detail-header {
110
margin-bottom: 1em;
111
}
112
+
113
+ .project-advanced-section {
114
+ border-top: 1px solid var(--color-border);
115
+ margin-top: 1em;
116
+ padding-top: 0.5em;
117
+ }
118
</style>
119
120
</html>
webui/components/projects/projects-store.js
-1
@@ -410,7 +410,6 @@ const model = {
410
color: "",
411
git_url: "",
412
git_token: "",
413
- llm: await this._createProjectLlmData(""),
413
};
414
},
415