Tyler
514 lines
20 KiB
JavaScript
514 lines
20 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
// ── Constants ─────────────────────────────────────────────────────────────────
|
|
|
|
var DEF_PARAMS = {
|
|
temperature: 0.7,
|
|
top_p: 0.9,
|
|
top_k: 40,
|
|
repeat_penalty: 1.1,
|
|
seed: -1,
|
|
num_ctx: 4096,
|
|
num_predict: -1
|
|
};
|
|
|
|
var PARAM_META = [
|
|
{ key: 'temperature', label: 'Temperature', min: 0, max: 2, step: 0.05 },
|
|
{ key: 'top_p', label: 'Top-P', min: 0, max: 1, step: 0.05 },
|
|
{ key: 'top_k', label: 'Top-K', min: 1, max: 200, step: 1 },
|
|
{ key: 'repeat_penalty', label: 'Repeat Penalty', min: 0.5, max: 2, step: 0.05 },
|
|
{ key: 'seed', label: 'Seed (-1 = rand)', min: -1, max: 999999, step: 1 },
|
|
{ key: 'num_ctx', label: 'Context (tokens)', min: 512, max: 131072, step: 512 },
|
|
{ key: 'num_predict', label: 'Max Tokens (-1=∞)', min: -1, max: 8192, step: 1 }
|
|
];
|
|
|
|
var DEFAULT_SYSTEM_PROMPT =
|
|
'Be concise and detailed. Give the most information in the fewest words unless the topic requires a longer explanation.';
|
|
|
|
// ── DOM refs ──────────────────────────────────────────────────────────────────
|
|
|
|
var app = document.getElementById('app');
|
|
var inputUrl = document.getElementById('input-url');
|
|
var inputToken = document.getElementById('input-token');
|
|
var btnShowToken = document.getElementById('btn-show-token');
|
|
var btnTest = document.getElementById('btn-test');
|
|
var testStatus = document.getElementById('test-status');
|
|
var selectTitleModel = document.getElementById('select-title-model');
|
|
var selectDefaultModel = document.getElementById('select-default-model');
|
|
var selectEmbedModel = document.getElementById('select-embed-model');
|
|
var inputSystemPrompt = document.getElementById('input-system-prompt');
|
|
var inputLanguage = document.getElementById('input-language');
|
|
var paramsGrid = document.getElementById('params-grid');
|
|
var btnThemeDark = document.getElementById('btn-theme-dark');
|
|
var btnThemeLight = document.getElementById('btn-theme-light');
|
|
var btnAutoscrollOn = document.getElementById('btn-autoscroll-on');
|
|
var btnAutoscrollOff = document.getElementById('btn-autoscroll-off');
|
|
var btnCompactOn = document.getElementById('btn-compact-on');
|
|
var btnCompactOff = document.getElementById('btn-compact-off');
|
|
var btnSave = document.getElementById('btn-save');
|
|
var saveStatus = document.getElementById('save-status');
|
|
|
|
// ── State ─────────────────────────────────────────────────────────────────────
|
|
|
|
var S = { theme: 'dark', autoScroll: true, compact: false, models: [] };
|
|
|
|
// ── Utilities ─────────────────────────────────────────────────────────────────
|
|
|
|
function formatBytes(b) {
|
|
if (b >= 1e9) return (b / 1e9).toFixed(1) + ' GB';
|
|
if (b >= 1e6) return (b / 1e6).toFixed(0) + ' MB';
|
|
return b + ' B';
|
|
}
|
|
|
|
function getHeaders() {
|
|
var h = { 'Content-Type': 'application/json' };
|
|
var tok = inputToken.value.trim();
|
|
if (tok) h['Authorization'] = 'Bearer ' + tok;
|
|
return h;
|
|
}
|
|
|
|
// ── Theme ─────────────────────────────────────────────────────────────────────
|
|
|
|
function setTheme(t) {
|
|
S.theme = t;
|
|
app.setAttribute('data-theme', t);
|
|
btnThemeDark.classList.toggle('active', t === 'dark');
|
|
btnThemeLight.classList.toggle('active', t === 'light');
|
|
}
|
|
|
|
function setAutoScroll(on) {
|
|
S.autoScroll = on;
|
|
btnAutoscrollOn.classList.toggle('active', on);
|
|
btnAutoscrollOff.classList.toggle('active', !on);
|
|
}
|
|
|
|
function setCompact(on) {
|
|
S.compact = on;
|
|
btnCompactOn.classList.toggle('active', on);
|
|
btnCompactOff.classList.toggle('active', !on);
|
|
}
|
|
|
|
// ── Model dropdowns ───────────────────────────────────────────────────────────
|
|
|
|
function populateModelSelects(models) {
|
|
S.models = models;
|
|
var titleVal = selectTitleModel.value;
|
|
var defaultVal = selectDefaultModel.value;
|
|
var embedVal = selectEmbedModel.value;
|
|
|
|
[selectTitleModel, selectDefaultModel].forEach(function (sel) {
|
|
sel.innerHTML = '<option value="">— select model —</option>';
|
|
models.forEach(function (m) {
|
|
var opt = document.createElement('option');
|
|
opt.value = m.name;
|
|
var lbl = m.name;
|
|
if (m.paramSize) lbl += ' (' + m.paramSize + ')';
|
|
if (m.sizeLabel) lbl += ' · ' + m.sizeLabel;
|
|
opt.textContent = lbl;
|
|
sel.appendChild(opt);
|
|
});
|
|
});
|
|
|
|
selectEmbedModel.innerHTML = '<option value="">— disable semantic RAG —</option>';
|
|
models.forEach(function (m) {
|
|
var opt = document.createElement('option');
|
|
opt.value = m.name;
|
|
var lbl = m.name;
|
|
if (m.paramSize) lbl += ' (' + m.paramSize + ')';
|
|
if (m.sizeLabel) lbl += ' · ' + m.sizeLabel;
|
|
opt.textContent = lbl;
|
|
selectEmbedModel.appendChild(opt);
|
|
});
|
|
|
|
selectTitleModel.value = titleVal;
|
|
selectDefaultModel.value = defaultVal;
|
|
selectEmbedModel.value = embedVal;
|
|
}
|
|
|
|
// ── Params grid ───────────────────────────────────────────────────────────────
|
|
|
|
function buildParamsGrid(stored) {
|
|
paramsGrid.innerHTML = '';
|
|
PARAM_META.forEach(function (pm) {
|
|
var val = (stored[pm.key] !== undefined) ? stored[pm.key] : DEF_PARAMS[pm.key];
|
|
|
|
var label = document.createElement('label');
|
|
label.className = 'param-label';
|
|
label.htmlFor = 'param-' + pm.key;
|
|
label.textContent = pm.label;
|
|
|
|
var input = document.createElement('input');
|
|
input.type = 'number';
|
|
input.id = 'param-' + pm.key;
|
|
input.className = 'param-input';
|
|
input.value = val;
|
|
input.min = pm.min;
|
|
input.max = pm.max;
|
|
input.step = pm.step;
|
|
|
|
var valDisplay = document.createElement('span');
|
|
valDisplay.className = 'param-val';
|
|
valDisplay.textContent = val;
|
|
|
|
input.addEventListener('input', function () {
|
|
valDisplay.textContent = this.value;
|
|
});
|
|
|
|
paramsGrid.appendChild(label);
|
|
paramsGrid.appendChild(input);
|
|
paramsGrid.appendChild(valDisplay);
|
|
});
|
|
}
|
|
|
|
function getParamsFromGrid() {
|
|
var result = {};
|
|
PARAM_META.forEach(function (pm) {
|
|
var inp = document.getElementById('param-' + pm.key);
|
|
if (inp) result[pm.key] = parseFloat(inp.value);
|
|
});
|
|
return result;
|
|
}
|
|
|
|
// ── Network ───────────────────────────────────────────────────────────────────
|
|
|
|
function fetchModels(cb) {
|
|
var baseUrl = inputUrl.value.trim().replace(/\/+$/, '') || 'http://localhost:11434';
|
|
chrome.runtime.sendMessage(
|
|
{ action: 'OLLAMA_GET', url: baseUrl + '/api/tags', headers: getHeaders() },
|
|
function (response) {
|
|
if (chrome.runtime.lastError || !response || !response.ok) {
|
|
if (cb) cb([]);
|
|
return;
|
|
}
|
|
var models = (response.data.models || []).map(function (m) {
|
|
return {
|
|
name: m.name,
|
|
paramSize: (m.details && m.details.parameter_size) || '',
|
|
sizeLabel: m.size ? formatBytes(m.size) : ''
|
|
};
|
|
});
|
|
populateModelSelects(models);
|
|
if (cb) cb(models);
|
|
}
|
|
);
|
|
}
|
|
|
|
// ── Pull model ────────────────────────────────────────────────────────────────
|
|
|
|
function pullModel(name) {
|
|
if (!name) return;
|
|
var progressEl = document.getElementById('pull-progress');
|
|
progressEl.classList.remove('hidden');
|
|
progressEl.textContent = 'Starting pull…';
|
|
|
|
var baseUrl = inputUrl.value.trim().replace(/\/+$/, '') || 'http://localhost:11434';
|
|
var requestId = Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
|
|
var lastPullStatus = '';
|
|
|
|
chrome.runtime.sendMessage({
|
|
action: 'OLLAMA_FETCH',
|
|
url: baseUrl + '/api/pull',
|
|
headers: getHeaders(),
|
|
body: JSON.stringify({ name: name, stream: true }),
|
|
requestId: requestId
|
|
});
|
|
|
|
var pullListener = function (msg) {
|
|
if (msg.requestId !== requestId) return;
|
|
if (msg.action === 'STREAM_CHUNK' && msg.text) {
|
|
try {
|
|
var parsed = JSON.parse(msg.text);
|
|
var status = parsed.status || '';
|
|
var completed = parsed.completed || 0;
|
|
var total = parsed.total || 0;
|
|
var pct = total > 0 ? ' (' + Math.round(completed / total * 100) + '%)' : '';
|
|
progressEl.textContent = status + pct;
|
|
lastPullStatus = status || lastPullStatus;
|
|
} catch (_) {}
|
|
}
|
|
if (msg.action === 'STREAM_DONE') {
|
|
chrome.runtime.onMessage.removeListener(pullListener);
|
|
progressEl.textContent = 'Pull complete — ' + name;
|
|
setTimeout(function () { progressEl.classList.add('hidden'); }, 2000);
|
|
fetchModels();
|
|
}
|
|
if (msg.action === 'STREAM_ERROR') {
|
|
chrome.runtime.onMessage.removeListener(pullListener);
|
|
progressEl.textContent = 'Error: ' + (msg.error || 'pull failed');
|
|
}
|
|
};
|
|
chrome.runtime.onMessage.addListener(pullListener);
|
|
}
|
|
|
|
// ── Save ──────────────────────────────────────────────────────────────────────
|
|
|
|
function showSaved() {
|
|
saveStatus.classList.remove('hidden');
|
|
setTimeout(function () { saveStatus.classList.add('hidden'); }, 2000);
|
|
}
|
|
|
|
// ── Load ──────────────────────────────────────────────────────────────────────
|
|
|
|
function loadSettings() {
|
|
chrome.storage.local.get([
|
|
'ollamaSidebarUrl', 'ollamaSidebarToken',
|
|
'ollamaSidebarTitleModel', 'ollamaSidebarDefaultModel',
|
|
'ollamaSidebarEmbedModel',
|
|
'ollamaSidebarSystemPrompt', 'ollamaSidebarTheme',
|
|
'ollamaSidebarParams', 'ollamaSidebarLanguage',
|
|
'ollamaSidebarAutoScroll', 'ollamaSidebarCompact'
|
|
], function (r) {
|
|
inputUrl.value = r.ollamaSidebarUrl || 'http://localhost:11434';
|
|
inputToken.value = r.ollamaSidebarToken || '';
|
|
inputSystemPrompt.value = r.ollamaSidebarSystemPrompt || DEFAULT_SYSTEM_PROMPT;
|
|
inputLanguage.value = r.ollamaSidebarLanguage || '';
|
|
setTheme(r.ollamaSidebarTheme || 'dark');
|
|
setAutoScroll(r.ollamaSidebarAutoScroll !== false);
|
|
setCompact(r.ollamaSidebarCompact || false);
|
|
buildParamsGrid(r.ollamaSidebarParams || {});
|
|
|
|
fetchModels(function () {
|
|
selectTitleModel.value = r.ollamaSidebarTitleModel || '';
|
|
selectDefaultModel.value = r.ollamaSidebarDefaultModel || '';
|
|
selectEmbedModel.value = r.ollamaSidebarEmbedModel || '';
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── Event handlers ────────────────────────────────────────────────────────────
|
|
|
|
btnShowToken.addEventListener('click', function () {
|
|
inputToken.type = inputToken.type === 'password' ? 'text' : 'password';
|
|
});
|
|
|
|
btnTest.addEventListener('click', function () {
|
|
var baseUrl = inputUrl.value.trim().replace(/\/+$/, '') || 'http://localhost:11434';
|
|
testStatus.textContent = 'Testing…';
|
|
testStatus.className = 'status-text';
|
|
chrome.runtime.sendMessage(
|
|
{ action: 'OLLAMA_GET', url: baseUrl + '/api/tags', headers: getHeaders() },
|
|
function (response) {
|
|
if (chrome.runtime.lastError || !response) {
|
|
var e = chrome.runtime.lastError ? chrome.runtime.lastError.message : 'No response';
|
|
testStatus.textContent = 'Failed (' + e + ')';
|
|
testStatus.className = 'status-text err';
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
testStatus.textContent = 'Failed (' + (response.status || 'error') + ')';
|
|
testStatus.className = 'status-text err';
|
|
return;
|
|
}
|
|
var models = (response.data.models || []).map(function (m) {
|
|
return {
|
|
name: m.name,
|
|
paramSize: (m.details && m.details.parameter_size) || '',
|
|
sizeLabel: m.size ? formatBytes(m.size) : ''
|
|
};
|
|
});
|
|
populateModelSelects(models);
|
|
testStatus.textContent = 'Connected — ' + models.length + ' model(s)';
|
|
testStatus.className = 'status-text ok';
|
|
}
|
|
);
|
|
});
|
|
|
|
btnThemeDark.addEventListener('click', function () { setTheme('dark'); });
|
|
btnThemeLight.addEventListener('click', function () { setTheme('light'); });
|
|
|
|
btnAutoscrollOn.addEventListener('click', function () { setAutoScroll(true); });
|
|
btnAutoscrollOff.addEventListener('click', function () { setAutoScroll(false); });
|
|
|
|
btnCompactOn.addEventListener('click', function () {
|
|
setCompact(true);
|
|
chrome.storage.local.set({ ollamaSidebarCompact: true });
|
|
});
|
|
btnCompactOff.addEventListener('click', function () {
|
|
setCompact(false);
|
|
chrome.storage.local.set({ ollamaSidebarCompact: false });
|
|
});
|
|
|
|
btnSave.addEventListener('click', function () {
|
|
var url = inputUrl.value.trim().replace(/\/+$/, '') || 'http://localhost:11434';
|
|
chrome.storage.local.set({
|
|
ollamaSidebarUrl: url,
|
|
ollamaSidebarToken: inputToken.value,
|
|
ollamaSidebarTitleModel: selectTitleModel.value,
|
|
ollamaSidebarDefaultModel: selectDefaultModel.value,
|
|
ollamaSidebarEmbedModel: selectEmbedModel.value,
|
|
ollamaSidebarSystemPrompt: inputSystemPrompt.value,
|
|
ollamaSidebarLanguage: inputLanguage.value.trim(),
|
|
ollamaSidebarTheme: S.theme,
|
|
ollamaSidebarAutoScroll: S.autoScroll,
|
|
ollamaSidebarCompact: S.compact,
|
|
ollamaSidebarParams: getParamsFromGrid()
|
|
}, function () {
|
|
showSaved();
|
|
renderSysinfo();
|
|
});
|
|
});
|
|
|
|
document.getElementById('btn-pull').addEventListener('click', function () {
|
|
pullModel(document.getElementById('pull-model-input').value.trim());
|
|
});
|
|
|
|
document.getElementById('pull-model-input').addEventListener('keydown', function (e) {
|
|
if (e.key === 'Enter') pullModel(this.value.trim());
|
|
});
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────────────
|
|
|
|
loadSettings();
|
|
|
|
// ── Debug panel ───────────────────────────────────────────────────────────────
|
|
|
|
var DBG_KEY = 'ollama_debug_log';
|
|
var AUTOCLEAR_MS = 30 * 60 * 1000;
|
|
var debugLog = document.getElementById('debug-log');
|
|
var debugSysinfo = document.getElementById('debug-sysinfo');
|
|
var debugCount = document.getElementById('debug-log-count');
|
|
var debugAutoclear = document.getElementById('debug-autoclear');
|
|
|
|
var TYPE_COLORS = {
|
|
CLICK: '#7c3aed',
|
|
FILE: '#2563eb',
|
|
OLLAMA: '#059669',
|
|
STREAM: '#0891b2',
|
|
PERSONA: '#db2777',
|
|
MODEL: '#d97706',
|
|
ERROR: '#dc2626',
|
|
INFO: '#6b7280',
|
|
SESSION: '#7c3aed'
|
|
};
|
|
|
|
function renderSysinfo() {
|
|
chrome.storage.local.get(['ollamaSidebarUrl', 'ollamaSidebarToken'], function (r) {
|
|
var url = r.ollamaSidebarUrl || 'http://localhost:11434';
|
|
var ua = navigator.userAgent;
|
|
var browser = 'Unknown';
|
|
if (/OPR\//.test(ua)) browser = 'Opera';
|
|
else if (/Orion/.test(ua)) browser = 'Orion';
|
|
else if (/Edg\//.test(ua)) browser = 'Edge';
|
|
else if (/Chrome\//.test(ua)) browser = 'Chrome';
|
|
else if (/Safari\//.test(ua)) browser = 'Safari';
|
|
else if (/Firefox\//.test(ua)) browser = 'Firefox';
|
|
|
|
var supportsFilePicker = typeof window.showOpenFilePicker !== 'undefined';
|
|
|
|
debugSysinfo.innerHTML =
|
|
'<div class="debug-sys-grid">' +
|
|
'<span class="debug-sys-label">Browser</span><span class="debug-sys-val">' + browser + '</span>' +
|
|
'<span class="debug-sys-label">User Agent</span><span class="debug-sys-val debug-ua">' + ua + '</span>' +
|
|
'<span class="debug-sys-label">Ollama URL</span><span class="debug-sys-val">' + url + '</span>' +
|
|
'<span class="debug-sys-label">showOpenFilePicker</span><span class="debug-sys-val" style="color:' + (supportsFilePicker ? 'var(--ok)' : 'var(--err)') + '">' + (supportsFilePicker ? 'supported' : 'NOT supported') + '</span>' +
|
|
'</div>';
|
|
|
|
var tok = r.ollamaSidebarToken || '';
|
|
var hdrs = { 'Content-Type': 'application/json' };
|
|
if (tok) hdrs['Authorization'] = 'Bearer ' + tok;
|
|
chrome.runtime.sendMessage({ action: 'OLLAMA_GET', url: url + '/api/tags', headers: hdrs }, function (res) {
|
|
var statusEl = debugSysinfo.querySelector('.debug-connection') || document.createElement('div');
|
|
statusEl.className = 'debug-connection';
|
|
if (res && res.ok) {
|
|
var modelNames = (res.data.models || []).map(function (m) { return m.name; }).join(', ');
|
|
statusEl.innerHTML = '<span style="color:var(--ok)">● Connected</span> — ' +
|
|
(res.data.models || []).length + ' model(s): ' + (modelNames || '(none)');
|
|
} else {
|
|
statusEl.innerHTML = '<span style="color:var(--err)">● Disconnected</span> — ' + (res ? res.error : 'no response');
|
|
}
|
|
if (!debugSysinfo.contains(statusEl)) debugSysinfo.appendChild(statusEl);
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateAutoclearLabel(entries) {
|
|
if (!debugAutoclear) return;
|
|
if (!entries || !entries.length) {
|
|
debugAutoclear.textContent = '';
|
|
return;
|
|
}
|
|
|
|
var oldest = entries.reduce(function (min, e) {
|
|
return e.ts < min ? e.ts : min;
|
|
}, entries[0].ts);
|
|
|
|
var expiresAt = oldest + AUTOCLEAR_MS;
|
|
var remaining = expiresAt - Date.now();
|
|
|
|
if (remaining <= 0) {
|
|
debugAutoclear.textContent = 'Oldest entry clearing on next log write';
|
|
debugAutoclear.style.color = 'var(--err)';
|
|
return;
|
|
}
|
|
|
|
var totalSecs = Math.ceil(remaining / 1000);
|
|
var mins = Math.floor(totalSecs / 60);
|
|
var secs = totalSecs % 60;
|
|
var label = mins > 0
|
|
? 'Oldest clears in ' + mins + 'm ' + secs + 's'
|
|
: 'Oldest clears in ' + secs + 's';
|
|
|
|
debugAutoclear.textContent = label;
|
|
debugAutoclear.style.color = mins < 5 ? 'var(--warn)' : 'var(--fg3)';
|
|
}
|
|
|
|
var _lastLogEntries = [];
|
|
|
|
function renderLog(entries) {
|
|
_lastLogEntries = entries;
|
|
debugCount.textContent = entries.length + ' entries';
|
|
updateAutoclearLabel(entries);
|
|
if (!entries.length) {
|
|
debugLog.innerHTML = '<div style="padding:12px;color:var(--fg3);font-size:12px;">No log entries yet. Interact with the sidebar to generate logs.</div>';
|
|
return;
|
|
}
|
|
var rows = entries.slice().reverse().map(function (e) {
|
|
var color = TYPE_COLORS[e.type] || '#6b7280';
|
|
var time = new Date(e.ts).toLocaleTimeString();
|
|
var detail = e.detail ? '<div class="debug-detail">' + JSON.stringify(e.detail, null, 2) + '</div>' : '';
|
|
return '<div class="debug-row">' +
|
|
'<span class="debug-ts">' + time + '</span>' +
|
|
'<span class="debug-badge" style="background:' + color + '">' + e.type + '</span>' +
|
|
'<span class="debug-msg">' + e.msg + '</span>' +
|
|
detail +
|
|
'</div>';
|
|
}).join('');
|
|
debugLog.innerHTML = rows;
|
|
}
|
|
|
|
function loadLog() {
|
|
chrome.storage.local.get(DBG_KEY, function (r) {
|
|
renderLog(r[DBG_KEY] || []);
|
|
});
|
|
}
|
|
|
|
chrome.storage.onChanged.addListener(function (changes, area) {
|
|
if (area === 'local' && changes[DBG_KEY]) {
|
|
renderLog(changes[DBG_KEY].newValue || []);
|
|
}
|
|
});
|
|
|
|
document.getElementById('btn-debug-clear').addEventListener('click', function () {
|
|
chrome.storage.local.set({ [DBG_KEY]: [] }, loadLog);
|
|
});
|
|
|
|
document.getElementById('btn-debug-export').addEventListener('click', function () {
|
|
chrome.storage.local.get(DBG_KEY, function (r) {
|
|
var text = JSON.stringify(r[DBG_KEY] || [], null, 2);
|
|
navigator.clipboard.writeText(text).then(function () {
|
|
document.getElementById('btn-debug-export').textContent = 'Copied ✓';
|
|
setTimeout(function () { document.getElementById('btn-debug-export').textContent = 'Copy Log'; }, 2000);
|
|
});
|
|
});
|
|
});
|
|
|
|
setInterval(function () {
|
|
updateAutoclearLabel(_lastLogEntries);
|
|
}, 30000);
|
|
|
|
renderSysinfo();
|
|
loadLog();
|
|
|
|
})();
|