mirror of
https://github.com/mudler/LocalAI.git
synced 2025-12-30 09:59:36 -05:00
473 lines
18 KiB
HTML
473 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{{template "views/partials/head" .}}
|
|
|
|
<body class="bg-[#101827] text-[#E5E7EB]">
|
|
<div class="flex flex-col min-h-screen">
|
|
|
|
{{template "views/partials/navbar" .}}
|
|
|
|
<div class="container mx-auto px-4 py-8 flex-grow">
|
|
<!-- Hero Header -->
|
|
<div class="relative bg-[#1E293B] border border-[#8B5CF6]/20 rounded-3xl shadow-2xl shadow-[#8B5CF6]/10 p-8 mb-8 overflow-hidden">
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 opacity-10">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-[#8B5CF6]/20 to-[#38BDF8]/20"></div>
|
|
<div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 1px 1px, rgba(139,92,246,0.15) 1px, transparent 0); background-size: 20px 20px;"></div>
|
|
</div>
|
|
|
|
<div class="relative max-w-5xl mx-auto">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
|
|
<div class="mb-4 md:mb-0">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-400 via-purple-400 to-fuchsia-400">
|
|
{{if .ModelName}}Edit Model: {{.ModelName}}{{else}}Import New Model{{end}}
|
|
</span>
|
|
</h1>
|
|
<p class="text-lg text-gray-300 font-light">Configure your model settings using YAML</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button id="validateBtn" class="group relative inline-flex items-center bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-3 px-6 rounded-xl font-semibold transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl hover:shadow-blue-500/25">
|
|
<i class="fas fa-check mr-2 group-hover:animate-pulse"></i>
|
|
<span>Validate</span>
|
|
<div class="absolute inset-0 rounded-xl bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
</button>
|
|
<button id="saveBtn" class="group relative inline-flex items-center bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white py-3 px-6 rounded-xl font-semibold transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl hover:shadow-green-500/25">
|
|
<i class="fas fa-save mr-2 group-hover:animate-pulse"></i>
|
|
<span>{{if .ModelName}}Update{{else}}Create{{end}}</span>
|
|
<div class="absolute inset-0 rounded-xl bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Messages -->
|
|
<div id="alertContainer" class="mb-6"></div>
|
|
|
|
<!-- YAML Editor Panel -->
|
|
<div class="relative bg-gradient-to-br from-gray-800/90 to-gray-900/90 border border-gray-700/50 rounded-2xl overflow-hidden shadow-xl backdrop-blur-sm h-[calc(100vh-250px)]">
|
|
<div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-fuchsia-500/5 to-purple-500/5"></div>
|
|
|
|
<div class="relative sticky top-0 bg-gray-800/95 border-b border-gray-700/50 p-6 flex items-center justify-between z-10 backdrop-blur-sm">
|
|
<h2 class="text-xl font-semibold text-white flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-fuchsia-500/20 flex items-center justify-center">
|
|
<i class="fas fa-code text-fuchsia-400"></i>
|
|
</div>
|
|
YAML Configuration Editor
|
|
</h2>
|
|
<div class="flex items-center gap-3">
|
|
<button id="formatYamlBtn" class="group text-gray-400 hover:text-gray-200 text-sm px-3 py-1.5 rounded-lg hover:bg-gray-700/50 transition-all duration-200">
|
|
<i class="fas fa-indent mr-1.5 group-hover:animate-pulse"></i> Format
|
|
</button>
|
|
<button id="copyYamlBtn" class="group text-gray-400 hover:text-gray-200 text-sm px-3 py-1.5 rounded-lg hover:bg-gray-700/50 transition-all duration-200">
|
|
<i class="fas fa-copy mr-1.5 group-hover:animate-bounce"></i> Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="relative" style="height: calc(100% - 88px);">
|
|
<div id="yamlCodeMirror" class="h-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "views/partials/footer" .}}
|
|
</div>
|
|
|
|
<!-- Include JS-YAML library -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
|
|
|
|
<!-- Include CodeMirror for syntax highlighting -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/yaml/yaml.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/display/autorefresh.min.js"></script>
|
|
|
|
<style>
|
|
/* Enhanced CodeMirror styling */
|
|
.CodeMirror {
|
|
background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
|
|
color: #e5e7eb !important;
|
|
border: none !important;
|
|
height: 100% !important;
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace !important;
|
|
font-size: 14px !important;
|
|
border-radius: 0 !important;
|
|
line-height: 1.5 !important;
|
|
}
|
|
|
|
.CodeMirror-cursor {
|
|
border-left: 2px solid #a78bfa !important;
|
|
animation: blink 1s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
|
|
border-right: 1px solid rgba(75, 85, 99, 0.5) !important;
|
|
color: #9ca3af !important;
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.CodeMirror-linenumber {
|
|
color: #6b7280 !important;
|
|
padding: 0 8px 0 4px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.CodeMirror-activeline-background {
|
|
background: rgba(139, 92, 246, 0.1) !important;
|
|
}
|
|
|
|
.CodeMirror-selected {
|
|
background: rgba(139, 92, 246, 0.25) !important;
|
|
}
|
|
|
|
.CodeMirror-selectedtext {
|
|
background: rgba(139, 92, 246, 0.25) !important;
|
|
}
|
|
|
|
.CodeMirror-focused .CodeMirror-selected {
|
|
background: rgba(139, 92, 246, 0.3) !important;
|
|
}
|
|
|
|
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
|
|
background: rgba(139, 92, 246, 0.3) !important;
|
|
}
|
|
|
|
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
|
|
background: rgba(139, 92, 246, 0.3) !important;
|
|
}
|
|
|
|
/* Enhanced YAML Syntax Highlighting */
|
|
.cm-keyword { color: #8b5cf6 !important; font-weight: 600 !important; } /* Purple for YAML keys */
|
|
.cm-string { color: #10b981 !important; } /* Emerald for strings */
|
|
.cm-number { color: #f59e0b !important; } /* Amber for numbers */
|
|
.cm-comment { color: #6b7280 !important; font-style: italic !important; } /* Gray for comments */
|
|
.cm-property { color: #ec4899 !important; } /* Pink for properties */
|
|
.cm-operator { color: #ef4444 !important; } /* Red for operators */
|
|
.cm-variable { color: #06b6d4 !important; } /* Cyan for variables */
|
|
.cm-tag { color: #8b5cf6 !important; font-weight: 600 !important; } /* Purple for tags */
|
|
.cm-attribute { color: #f59e0b !important; } /* Amber for attributes */
|
|
.cm-def { color: #ec4899 !important; font-weight: 600 !important; } /* Pink for definitions */
|
|
.cm-bracket { color: #d1d5db !important; } /* Light gray for brackets */
|
|
.cm-punctuation { color: #d1d5db !important; } /* Light gray for punctuation */
|
|
.cm-quote { color: #10b981 !important; } /* Emerald for quotes */
|
|
.cm-meta { color: #6b7280 !important; } /* Gray for meta */
|
|
.cm-builtin { color: #f472b6 !important; } /* Pink for builtins */
|
|
.cm-atom { color: #f59e0b !important; } /* Amber for atoms like true/false/null */
|
|
|
|
/* Enhanced scrollbar styling */
|
|
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
|
background: #1f2937 !important;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
|
|
background: #1f2937 !important;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar::-webkit-scrollbar, .CodeMirror-hscrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar::-webkit-scrollbar-track, .CodeMirror-hscrollbar::-webkit-scrollbar-track {
|
|
background: #1f2937;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover, .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
|
|
}
|
|
|
|
/* Focus ring styling */
|
|
.CodeMirror-focused {
|
|
outline: 2px solid rgba(139, 92, 246, 0.5) !important;
|
|
outline-offset: -2px !important;
|
|
border-radius: 0.5rem !important;
|
|
}
|
|
|
|
/* Alert styling */
|
|
.alert {
|
|
border-radius: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid;
|
|
animation: slideInFromTop 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideInFromTop {
|
|
from {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.alert-success {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
color: #10b981;
|
|
}
|
|
|
|
.alert-error {
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.alert-warning {
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
|
|
border-color: rgba(245, 158, 11, 0.3);
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.alert-info {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
color: #3b82f6;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
class ModelEditor {
|
|
constructor() {
|
|
this.modelName = '{{.ModelName}}';
|
|
this.isEditMode = !!this.modelName;
|
|
this.yamlEditor = null;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.initializeCodeMirror();
|
|
this.bindEvents();
|
|
}
|
|
|
|
getDefaultConfig() {
|
|
return `# Model Configuration
|
|
name: my-model
|
|
backend: llama-cpp
|
|
parameters:
|
|
model: path/to/model.gguf
|
|
temperature: 0.7
|
|
top_p: 0.9
|
|
top_k: 40
|
|
max_tokens: 2048
|
|
|
|
# Uncomment and configure as needed:
|
|
# context_size: 4096
|
|
# gpu_layers: 35
|
|
# threads: 8
|
|
# f16: true
|
|
# mmap: true
|
|
|
|
# Template configuration
|
|
# template:
|
|
# chat: |
|
|
# {{"{{"}}.Input}}
|
|
# completion: |
|
|
# {{"{{"}}.Input}}
|
|
|
|
# Use cases
|
|
# known_usecases:
|
|
# - chat
|
|
# - completion
|
|
`;
|
|
}
|
|
|
|
initializeCodeMirror() {
|
|
const initialValue = {{if .ConfigYAML}}`{{.ConfigYAML}}`{{else}}this.getDefaultConfig(){{end}};
|
|
|
|
this.yamlEditor = CodeMirror(document.getElementById('yamlCodeMirror'), {
|
|
mode: 'yaml',
|
|
theme: 'default',
|
|
lineNumbers: true,
|
|
autoRefresh: true,
|
|
indentUnit: 2,
|
|
tabSize: 2,
|
|
indentWithTabs: false,
|
|
lineWrapping: true,
|
|
styleActiveLine: true,
|
|
matchBrackets: true,
|
|
autoCloseBrackets: true,
|
|
value: initialValue
|
|
});
|
|
}
|
|
|
|
bindEvents() {
|
|
// Button events
|
|
document.getElementById('saveBtn').addEventListener('click', () => this.saveConfig());
|
|
document.getElementById('validateBtn').addEventListener('click', () => this.validateConfig());
|
|
document.getElementById('formatYamlBtn').addEventListener('click', () => this.formatYaml());
|
|
document.getElementById('copyYamlBtn').addEventListener('click', () => this.copyYaml());
|
|
}
|
|
|
|
validateConfig() {
|
|
try {
|
|
const yamlContent = this.yamlEditor.getValue();
|
|
const config = jsyaml.load(yamlContent);
|
|
|
|
if (!config || typeof config !== 'object') {
|
|
throw new Error('Invalid YAML structure');
|
|
}
|
|
|
|
if (!config.name) {
|
|
throw new Error('Model name is required');
|
|
}
|
|
if (!config.backend) {
|
|
throw new Error('Backend is required');
|
|
}
|
|
if (!config.parameters || !config.parameters.model) {
|
|
throw new Error('Model file/path is required in parameters.model');
|
|
}
|
|
|
|
this.showAlert('success', 'Configuration is valid!');
|
|
} catch (error) {
|
|
this.showAlert('error', 'Validation failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async saveConfig() {
|
|
try {
|
|
// Validate before saving
|
|
const yamlContent = this.yamlEditor.getValue();
|
|
const config = jsyaml.load(yamlContent);
|
|
|
|
if (!config || typeof config !== 'object') {
|
|
throw new Error('Invalid YAML structure');
|
|
}
|
|
|
|
if (!config.name) {
|
|
throw new Error('Model name is required');
|
|
}
|
|
if (!config.backend) {
|
|
throw new Error('Backend is required');
|
|
}
|
|
if (!config.parameters || !config.parameters.model) {
|
|
throw new Error('Model file/path is required in parameters.model');
|
|
}
|
|
|
|
const endpoint = this.isEditMode ? `/models/edit/${this.modelName}` : '/models/import';
|
|
|
|
const response = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-yaml',
|
|
},
|
|
body: yamlContent
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.showAlert('success', result.message || (this.isEditMode ? 'Model updated successfully!' : 'Model created successfully!'));
|
|
if (!this.isEditMode && config.name) {
|
|
setTimeout(() => {
|
|
window.location.href = `/models/edit/${config.name}`;
|
|
}, 2000);
|
|
}
|
|
} else {
|
|
this.showAlert('error', result.error || 'Failed to save configuration');
|
|
}
|
|
} catch (error) {
|
|
this.showAlert('error', 'Failed to save: ' + error.message);
|
|
}
|
|
}
|
|
|
|
formatYaml() {
|
|
try {
|
|
const yamlContent = this.yamlEditor.getValue();
|
|
const parsed = jsyaml.load(yamlContent);
|
|
const formatted = jsyaml.dump(parsed, {
|
|
indent: 2,
|
|
lineWidth: 120,
|
|
noRefs: true,
|
|
sortKeys: false
|
|
});
|
|
this.yamlEditor.setValue(formatted);
|
|
this.showAlert('success', 'YAML formatted successfully');
|
|
} catch (error) {
|
|
this.showAlert('error', 'Failed to format YAML: ' + error.message);
|
|
}
|
|
}
|
|
|
|
copyYaml() {
|
|
const yamlContent = this.yamlEditor.getValue();
|
|
navigator.clipboard.writeText(yamlContent).then(() => {
|
|
this.showAlert('success', 'YAML copied to clipboard');
|
|
}).catch(err => {
|
|
// Fallback for older browsers
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = yamlContent;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textArea);
|
|
this.showAlert('success', 'YAML copied to clipboard');
|
|
});
|
|
}
|
|
|
|
showAlert(type, message) {
|
|
const container = document.getElementById('alertContainer');
|
|
const alertClasses = {
|
|
success: 'alert alert-success',
|
|
error: 'alert alert-error',
|
|
warning: 'alert alert-warning',
|
|
info: 'alert alert-info'
|
|
};
|
|
|
|
const alertIcons = {
|
|
success: 'fas fa-check-circle',
|
|
error: 'fas fa-exclamation-triangle',
|
|
warning: 'fas fa-exclamation-circle',
|
|
info: 'fas fa-info-circle'
|
|
};
|
|
|
|
container.innerHTML = `
|
|
<div class="${alertClasses[type]}">
|
|
<div class="flex items-center">
|
|
<i class="${alertIcons[type]} mr-3 text-lg"></i>
|
|
<span class="flex-1">${message}</span>
|
|
<button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-current hover:opacity-70 transition-opacity">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
if (type === 'success' || type === 'info') {
|
|
setTimeout(() => {
|
|
const alert = container.querySelector('div');
|
|
if (alert) alert.remove();
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
clearAlert() {
|
|
document.getElementById('alertContainer').innerHTML = '';
|
|
}
|
|
}
|
|
|
|
// Initialize the editor when the page loads
|
|
let modelEditor;
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
modelEditor = new ModelEditor();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|