Skip to content

Commit 86ddce4

Browse files
jukofyorkjukofyork
committed
Refactored 'command_line_generator.html'.
1 parent 7aa0f98 commit 86ddce4

File tree

2 files changed

+102
-58
lines changed

2 files changed

+102
-58
lines changed

‎command_line_generator.html

+102-58
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
</head>
99
<body class="bg-gray-100 p-8">
1010
<div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md">
11-
<h1 class="text-2xl font-bold mb-4">Llama.cpp Control Vector Command Generator</h1>
11+
<h1 class="text-2xl font-bold mb-4 text-center">Llama.cpp Control Vector Command Line Generator</h1>
1212

13-
<div class="mb-4">
14-
<label for="controlVectorPath" class="block mb-2">Control Vector Path:</label>
15-
<input type="text" id="controlVectorPath" class="w-full p-2 border rounded" placeholder="/path/to/control/vectors">
13+
<div class="mb-4 flex items-center">
14+
<label for="controlVectorPath" class="block mr-4">Control Vector Path:</label>
15+
<input type="text" id="controlVectorPath" class="flex-1 p-2 border rounded" placeholder="/path/to/vectors">
1616
</div>
17-
18-
<div class="mb-4">
19-
<label for="modelVectorName" class="block mb-2">Model Vector Name:</label>
20-
<input type="text" id="modelVectorName" class="w-full p-2 border rounded" placeholder="e.g., wizard-lm-2:8x22b">
17+
18+
<div class="mb-4 flex items-center">
19+
<label for="modelVectorName" class="block mr-4">Model Vector Name:</label>
20+
<input type="text" id="modelVectorName" class="flex-1 p-2 border rounded" placeholder="e.g., wizard-lm-2:8x22b">
2121
</div>
2222

2323
<div id="sliders" class="space-y-4"></div>
@@ -30,76 +30,120 @@ <h2 class="text-xl font-semibold mb-2">Generated Command:</h2>
3030

3131
<script>
3232
const controlVectors = [
33-
{ name: "character_focus", options: ["dialogue", "narration"] },
34-
{ name: "compassion_vs_sadism", options: ["compassion", "sadism"] },
35-
{ name: "empathy_vs_sociopathy", options: ["empathy", "sociopathy"] },
36-
{ name: "honesty_vs_machiavellianism", options: ["honesty", "machiavellianism"] },
37-
{ name: "humility_vs_narcissism", options: ["humility", "narcissism"] },
38-
{ name: "language", options: ["ornate", "simple"] },
39-
{ name: "optimism_vs_nihilism", options: ["optimism", "nihilism"] },
40-
{ name: "storytelling", options: ["descriptive", "explicit"] }
33+
{ category: "Writing Style", display_name: "Language (Simple vs Ornate)", name: "language", options: ["simple", "ornate"] },
34+
{ category: "Writing Style", display_name: "Storytelling (Explicit vs Descriptive)", name: "storytelling", options: ["explicit", "descriptive"] },
35+
{ category: "Writing Style", display_name: "Character Focus (Narration vs Dialogue)", name: "character_focus", options: ["narration", "dialogue"] },
36+
{ category: "Dark Tetrad", display_name: "Empathy vs Sociopathy", name: "empathy_vs_sociopathy", options: ["empathy", "sociopathy"] },
37+
{ category: "Dark Tetrad", display_name: "Humility vs Narcissism", name: "humility_vs_narcissism", options: ["humility", "narcissism"] },
38+
{ category: "Dark Tetrad", display_name: "Honesty vs Machiavellianism", name: "honesty_vs_machiavellianism", options: ["honesty", "machiavellianism"] },
39+
{ category: "Dark Tetrad", display_name: "Compassion vs Sadism", name: "compassion_vs_sadism", options: ["compassion", "sadism"] },
40+
{ category: "Other", display_name: "Optimism vs Nihilism", name: "optimism_vs_nihilism", options: ["optimism", "nihilism"] }
4141
];
4242

4343
const slidersContainer = document.getElementById('sliders');
44+
const categories = {};
4445
const outputElement = document.getElementById('output');
4546
const controlVectorPathInput = document.getElementById('controlVectorPath');
4647
const modelVectorNameInput = document.getElementById('modelVectorName');
47-
48+
4849
controlVectors.forEach(vector => {
50+
if (!categories[vector.category]) {
51+
const categoryContainer = document.createElement('div');
52+
categoryContainer.classList.add("mb-6", "p-4", "border", "border-gray-300", "rounded");
53+
const categoryTitle = document.createElement('h3');
54+
categoryTitle.textContent = vector.category;
55+
categoryTitle.classList.add("text-lg", "font-bold", "mb-4");
56+
categoryContainer.appendChild(categoryTitle);
57+
slidersContainer.appendChild(categoryContainer);
58+
categories[vector.category] = categoryContainer;
59+
}
60+
4961
const sliderContainer = document.createElement('div');
5062
sliderContainer.innerHTML = `
5163
<div class="flex items-center mb-2">
5264
<input type="checkbox" id="${vector.name}-active" class="mr-2" onchange="updateOutput()">
53-
<label class="mr-4">${vector.name.replace(/_/g, ' ')}</label>
65+
<label class="mr-4">${vector.display_name}</label>
5466
<span id="${vector.name}-value" class="ml-auto">0</span>
5567
<button id="${vector.name}-reset" class="ml-2 px-2 py-1 bg-gray-200 rounded" onclick="resetSlider('${vector.name}')">Reset</button>
5668
</div>
5769
<input type="range" min="-100" max="100" value="0" class="w-full"
5870
id="${vector.name}" oninput="updateSliderValue('${vector.name}')">
5971
`;
60-
slidersContainer.appendChild(sliderContainer);
72+
categories[vector.category].appendChild(sliderContainer);
6173
});
6274

6375
function updateSliderValue(vectorName) {
64-
const slider = document.getElementById(vectorName);
65-
const value = parseFloat(slider.value) / 100;
66-
document.getElementById(`${vectorName}-value`).textContent = value.toFixed(2);
67-
updateOutput();
68-
}
69-
70-
function resetSlider(vectorName) {
71-
const slider = document.getElementById(vectorName);
72-
slider.value = 0;
73-
document.getElementById(`${vectorName}-value`).textContent = '0';
74-
updateOutput();
75-
}
76-
77-
function updateOutput() {
78-
const controlVectorPath = controlVectorPathInput.value.trim();
79-
const modelVectorName = modelVectorNameInput.value.trim();
80-
let command = '';
81-
82-
controlVectors.forEach(vector => {
83-
const isActive = document.getElementById(`${vector.name}-active`).checked;
84-
if (!isActive) return;
85-
86-
const slider = document.getElementById(vector.name);
87-
const value = parseFloat(slider.value) / 100;
88-
89-
command += `--control-vector ${controlVectorPath}/${modelVectorName}-${vector.name}__debias.gguf \\\n`;
90-
91-
if (value !== 0) {
92-
const option = value > 0 ? vector.options[0] : vector.options[1];
93-
const absValue = Math.abs(value);
94-
command += `--control-vector-scaled ${controlVectorPath}/${modelVectorName}-${vector.name}__${option}.gguf ${absValue.toFixed(2)} \\\n`;
95-
}
96-
});
97-
98-
outputElement.textContent = command ? command.trim() : 'No control vectors selected';
99-
}
100-
101-
controlVectorPathInput.addEventListener('input', updateOutput);
102-
modelVectorNameInput.addEventListener('input', updateOutput);
76+
const slider = document.getElementById(vectorName);
77+
const value = parseFloat(slider.value) / 100;
78+
document.getElementById(`${vectorName}-value`).textContent = value.toFixed(2);
79+
updateOutput();
80+
}
81+
82+
function resetSlider(vectorName) {
83+
const slider = document.getElementById(vectorName);
84+
slider.value = 0;
85+
document.getElementById(`${vectorName}-value`).textContent = '0';
86+
updateOutput();
87+
}
88+
89+
function updateOutput() {
90+
const controlVectorPath = controlVectorPathInput.value.trim();
91+
const modelVectorName = modelVectorNameInput.value.trim();
92+
let command = '';
93+
94+
controlVectors.forEach(vector => {
95+
const isActive = document.getElementById(`${vector.name}-active`).checked;
96+
const slider = document.getElementById(vector.name);
97+
const sliderValueDisplay = document.getElementById(`${vector.name}-value`);
98+
const resetButton = document.getElementById(`${vector.name}-reset`);
99+
100+
// Enable or disable the slider and reset button based on checkbox state
101+
slider.disabled = !isActive;
102+
resetButton.disabled = !isActive;
103+
sliderValueDisplay.style.opacity = isActive ? '1' : '0.5'; // Dim the value display when disabled
104+
105+
if (!isActive) return;
106+
107+
const value = parseFloat(slider.value) / 100;
108+
const formattedPath = controlVectorPath ? `${controlVectorPath}/` : "";
109+
const modelName = modelVectorName || "XXXXX";
110+
111+
command += `--control-vector ${formattedPath}${modelName}-${vector.name}__debias.gguf \\\n`;
112+
113+
if (value !== 0) {
114+
const option = value > 0 ? vector.options[1] : vector.options[0];
115+
const absValue = Math.abs(value);
116+
117+
if (Math.abs(absValue - 1.0) < 0.005) {
118+
command += `--control-vector ${formattedPath}${modelName}-${vector.name}__${option}.gguf \\\n`;
119+
} else {
120+
command += `--control-vector-scaled ${formattedPath}${modelName}-${vector.name}__${option}.gguf ${absValue.toFixed(2)} \\\n`;
121+
}
122+
}
123+
});
124+
125+
// Check if the last character is a backslash and remove it
126+
if (command.endsWith("\\\n")) {
127+
command = command.slice(0, -2);
128+
}
129+
130+
outputElement.textContent = command ? command.trim() : 'No control vectors selected';
131+
}
132+
133+
// Set initial state of sliders based on checkbox state
134+
document.addEventListener('DOMContentLoaded', () => {
135+
controlVectors.forEach(vector => {
136+
const isActive = document.getElementById(`${vector.name}-active`).checked;
137+
const slider = document.getElementById(vector.name);
138+
const resetButton = document.getElementById(`${vector.name}-reset`);
139+
slider.disabled = !isActive;
140+
resetButton.disabled = !isActive;
141+
});
142+
updateOutput();
143+
});
144+
145+
controlVectorPathInput.addEventListener('input', updateOutput);
146+
modelVectorNameInput.addEventListener('input', updateOutput);
103147

104148
updateOutput();
105149
</script>

‎command_line_generator.png

20.6 KB
Loading

0 commit comments

Comments
 (0)