mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-19 07:59:34 +00:00
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.
This commit is contained in:
Alessandro
parent
28a0b35ad4
commit
7b20baebbf
4 changed files with 46 additions and 82 deletions
|
|
@ -36,14 +36,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<div class="project-detail-inline-section">
|
||||
<div class="project-detail-header">
|
||||
<span class="projects-project-card-title">LLM</span>
|
||||
</div>
|
||||
<x-component path="projects/project-edit-llm.html">
|
||||
</x-component>
|
||||
</div>
|
||||
|
||||
<div class="buttons-right">
|
||||
<button type="button" class="button cancel"
|
||||
@click="$store.projects.cancelCreate()"
|
||||
|
|
@ -82,12 +74,6 @@
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.project-detail-inline-section {
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.button-loading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -4,86 +4,54 @@
|
|||
<title>Project LLM</title>
|
||||
<script type="module">
|
||||
import { store } from "/components/projects/projects-store.js";
|
||||
import { store as modelConfigStore } from "/plugins/_model_config/webui/model-config-store.js";
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div x-data x-init="await $store.modelConfig.ensureLoaded()">
|
||||
<template x-if="$store.projects && $store.projects.selectedProject && $store.projects.selectedProject.llm && $store.modelConfig._loaded">
|
||||
<div>
|
||||
<div class="projects-form-group">
|
||||
<label class="projects-form-label">Preset</label>
|
||||
<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>
|
||||
<select class="projects-form-select"
|
||||
x-model="$store.projects.selectedProject.llm.preset_key"
|
||||
@change="$store.projects.applySelectedLlmPreset()">
|
||||
<option value="current">Current config</option>
|
||||
<optgroup label="Global presets">
|
||||
<div x-data>
|
||||
<template x-if="$store.projects && $store.projects.selectedProject && $store.projects.selectedProject.llm">
|
||||
<div class="project-llm-preset-row">
|
||||
<div class="projects-form-group project-llm-preset-field">
|
||||
<label class="projects-form-label">Model preset</label>
|
||||
<div class="projects-input-with-button-wrapper project-llm-preset-controls">
|
||||
<select class="projects-form-select"
|
||||
x-model="$store.projects.selectedProject.llm.preset_key"
|
||||
@change="$store.projects.applySelectedLlmPreset()">
|
||||
<option value="current">Current project config</option>
|
||||
<template x-for="preset in $store.projects.selectedProject.llm.global_presets" :key="$store.projects.getLlmPresetKey(preset)">
|
||||
<option :value="$store.projects.getLlmPresetKey(preset)" x-text="preset.name"></option>
|
||||
</template>
|
||||
</optgroup>
|
||||
<optgroup label="This project's presets">
|
||||
<template x-for="preset in $store.projects.selectedProject.llm.project_presets" :key="$store.projects.getLlmPresetKey(preset)">
|
||||
<option :value="$store.projects.getLlmPresetKey(preset)" x-text="preset.name"></option>
|
||||
</template>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="projects-form-group">
|
||||
<label class="projects-form-label">Project preset</label>
|
||||
<template x-if="$store.projects.selectedProject._meta.creating">
|
||||
<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>
|
||||
</template>
|
||||
<template x-if="!$store.projects.selectedProject._meta.creating">
|
||||
<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>
|
||||
</template>
|
||||
<div class="projects-input-with-button-wrapper">
|
||||
<input class="projects-form-input" type="text"
|
||||
x-model="$store.projects.selectedProject.llm.new_preset_name"
|
||||
placeholder="Preset name">
|
||||
<button type="button" class="button icon-button"
|
||||
:disabled="!$store.projects.selectedProject.llm.new_preset_name.trim()"
|
||||
@click="$store.projects.saveSelectedLlmProjectPreset()">
|
||||
<span class="icon material-symbols-outlined">save</span>
|
||||
<span>Save preset</span>
|
||||
</select>
|
||||
<button type="button" class="button icon-button project-llm-edit-presets"
|
||||
@click="openModal('/plugins/_model_config/webui/main.html')">
|
||||
<span class="icon material-symbols-outlined">tune</span>
|
||||
<span>Edit Presets</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-for="section in $store.modelConfig.MODEL_SECTIONS" :key="section.key">
|
||||
<div class="project-llm-model-section"
|
||||
@input.capture="$store.projects.markLlmCurrent()"
|
||||
@change.capture="$store.projects.markLlmCurrent()"
|
||||
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' }">
|
||||
<div class="project-llm-section-title" x-text="section.title"></div>
|
||||
<div class="project-llm-section-description" x-text="section.desc"></div>
|
||||
<x-component path="/plugins/_model_config/webui/model-field.html"></x-component>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</body>
|
||||
<style>
|
||||
.project-llm-model-section {
|
||||
border-top: 1px dashed var(--color-border);
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
.project-llm-preset-row {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.project-llm-section-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25em;
|
||||
.project-llm-preset-field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-llm-section-description {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.75;
|
||||
margin-bottom: 0.8em;
|
||||
.project-llm-preset-controls {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.project-llm-preset-controls select {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.project-llm-edit-presets {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,14 +32,19 @@
|
|||
</div>
|
||||
<x-component path="projects/project-edit-basic-data.html">
|
||||
</x-component>
|
||||
</div>
|
||||
|
||||
<div class="project-detail">
|
||||
<div class="project-detail-header">
|
||||
<span class="projects-project-card-title">LLM</span>
|
||||
<div class="settings-advanced-section project-advanced-section" x-data="{ advOpen: false }">
|
||||
<button type="button" class="settings-advanced-toggle" @click="advOpen = !advOpen">
|
||||
<span class="material-symbols-outlined settings-advanced-toggle-icon"
|
||||
:style="advOpen ? 'transform:rotate(90deg)' : ''">chevron_right</span>
|
||||
<span>Advanced Settings</span>
|
||||
</button>
|
||||
|
||||
<div class="settings-advanced-body" x-show="advOpen" x-transition.opacity style="display: none;">
|
||||
<x-component path="projects/project-edit-llm.html">
|
||||
</x-component>
|
||||
</div>
|
||||
</div>
|
||||
<x-component path="projects/project-edit-llm.html">
|
||||
</x-component>
|
||||
</div>
|
||||
|
||||
<div class="project-detail">
|
||||
|
|
@ -104,6 +109,12 @@
|
|||
.project-detail-header {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.project-advanced-section {
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin-top: 1em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -410,7 +410,6 @@ const model = {
|
|||
color: "",
|
||||
git_url: "",
|
||||
git_token: "",
|
||||
llm: await this._createProjectLlmData(""),
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue