rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add site OpenAI key and model picker

Browse Source
This commit is contained in:
rajchales-monito
2026-07-29 21:17:12 +02:00
parent 46d18c69eb
commit 227fcc2084
4 changed files with 157 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+18
View File
@@ -225,6 +225,24 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
width: auto;
margin: 0;
}
.effect-settings input[type="password"],
.effect-settings select {
width: 100%;
}
.effect-settings small {
color: var(--muted);
font-size: 11px;
}
.model-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.model-row button {
height: 38px;
padding: 0 10px;
}
.list-tools {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
public/admin.html
+10 -1
View File
@@ -177,7 +177,16 @@
<option value="de">Nemcina</option>
</select>
</label>
<label>OpenAI model <input id="translationModel" placeholder="gpt-5.6-luna"></label>
<label>OpenAI API key
<input id="openaiApiKey" type="password" autocomplete="off" placeholder="sk-...">
<small id="openaiApiKeyStatus">Klic neni ulozeny.</small>
</label>
<label>OpenAI model
<span class="model-row">
<select id="translationModel"></select>
<button id="refreshAiModels" type="button">Obnovit</button>
</span>
</label>
</fieldset>
</div>
</section>
public/admin.js
+40 -5
View File
@@ -18,7 +18,8 @@ const state = {
soundRepeatTimer: null,
attentionOn: false,
originalTitle: document.title,
originalFavicon: document.querySelector("link[rel='icon']")?.href || "/favicon.svg"
originalFavicon: document.querySelector("link[rel='icon']")?.href || "/favicon.svg",
aiModels: []
};
const $ = (selector) => document.querySelector(selector);
@@ -82,6 +83,8 @@ $("#adminSoundTest").addEventListener("click", () => {
$("#translationEnabled").addEventListener("change", saveTranslationSettings);
$("#operatorLanguage").addEventListener("change", saveTranslationSettings);
$("#translationModel").addEventListener("change", saveTranslationSettings);
$("#openaiApiKey").addEventListener("change", saveTranslationSettings);
$("#refreshAiModels").addEventListener("click", loadAiModels);
document.querySelectorAll("[data-settings-tab]").forEach((button) => {
button.addEventListener("click", () => {
const tab = button.dataset.settingsTab;
@@ -284,6 +287,7 @@ async function showApp() {
$("#loginView").classList.add("hidden");
$("#appView").classList.remove("hidden");
await loadBootstrap();
await loadAiModels().catch(() => {});
await Promise.all([loadConversations(), loadVisitors()]);
connectEvents();
}
@@ -390,7 +394,11 @@ function renderSite() {
form.messageWiggle.checked = s.notifications?.wiggleOnAdminReply !== false;
$("#translationEnabled").checked = Boolean(s.translations?.enabled);
$("#operatorLanguage").value = s.translations?.operatorLanguage || "cs";
$("#translationModel").value = s.translations?.model || "gpt-5.6-luna";
$("#openaiApiKey").value = "";
$("#openaiApiKeyStatus").textContent = s.translations?.hasOpenaiApiKey
? `Klic ulozeny (${s.translations.openaiApiKeyMasked || "sk-..."})`
: "Klic neni ulozeny.";
renderModelOptions(s.translations?.model || "gpt-5-mini");
}
async function saveTranslationSettings() {
@@ -400,9 +408,31 @@ async function saveTranslationSettings() {
...(settings.translations || {}),
enabled: $("#translationEnabled").checked,
operatorLanguage: $("#operatorLanguage").value,
model: $("#translationModel").value.trim() || "gpt-5.6-luna"
model: $("#translationModel").value.trim() || "gpt-5-mini"
};
const apiKey = $("#openaiApiKey").value.trim();
if (apiKey) settings.translations.openaiApiKey = apiKey;
await saveSite({ settings, isOnline: state.site.isOnline });
$("#openaiApiKey").value = "";
await loadAiModels().catch(() => {});
}
async function loadAiModels() {
const current = $("#translationModel").value || state.site?.settings?.translations?.model || "gpt-5-mini";
const data = await api("/api/admin/ai/models").catch((error) => error?.models ? error : null);
state.aiModels = data?.models || fallbackAiModels();
renderModelOptions(current);
}
function renderModelOptions(current) {
const select = $("#translationModel");
const models = [...new Set([current, ...state.aiModels, ...fallbackAiModels()].filter(Boolean))];
select.innerHTML = models.map((model) => `<option value="${escapeHtml(model)}">${escapeHtml(model)}</option>`).join("");
select.value = models.includes(current) ? current : models[0];
}
function fallbackAiModels() {
return ["gpt-5-mini", "gpt-5-nano", "gpt-5.1", "gpt-4.1-mini"];
}
function renderConversations() {
@@ -1019,8 +1049,13 @@ async function api(url, options = {}) {
headers: { "Content-Type": "application/json" },
body: options.body ? JSON.stringify(options.body) : undefined
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
const data = await response.json().catch(() => ({}));
if (!response.ok) {
const error = new Error(`HTTP ${response.status}`);
Object.assign(error, data);
throw error;
}
return data;
}
function debounce(fn, delay) {
server.js
+89 -7
View File
@@ -17,7 +17,7 @@ const PUBLIC_BASE_URL = (process.env.PUBLIC_BASE_URL || `http://localhost:${PORT
const AUTH_SECRET = process.env.AUTH_SECRET || "dev-secret-change-me";
const COOKIE_NAME = "mf_session";
const OPENAI_API_KEY = process.env.OPENAI_API_KEY || "";
const OPENAI_TRANSLATION_MODEL = process.env.OPENAI_TRANSLATION_MODEL || "gpt-5.6-luna";
const OPENAI_TRANSLATION_MODEL = process.env.OPENAI_TRANSLATION_MODEL || "gpt-5-mini";
const ALLOWED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif", "image/avif"]);
const ALLOWED_IMAGE_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".webp", ".gif", ".avif"]);
const MAX_ATTACHMENT_BYTES = 3_000_000;
@@ -85,6 +85,7 @@ async function adminApi(req, res, url) {
if (url.pathname === "/api/admin/bootstrap" && req.method === "GET") return adminBootstrap(res);
if (url.pathname === "/api/admin/events" && req.method === "GET") return eventStream(req, res, url, "admin");
if (url.pathname === "/api/admin/site" && req.method === "PATCH") return updateSite(req, res);
if (url.pathname === "/api/admin/ai/models" && req.method === "GET") return adminAiModels(res);
if (url.pathname === "/api/admin/conversations" && req.method === "GET") return adminConversations(res);
if (url.pathname === "/api/admin/visitors" && req.method === "GET") return adminVisitors(res);
if (url.pathname.match(/^\/api\/admin\/visitors\/[^/]+$/) && req.method === "PATCH") return updateVisitorProfile(req, res, url);
@@ -296,7 +297,8 @@ function defaultSettings() {
translations: {
enabled: false,
operatorLanguage: "cs",
model: OPENAI_TRANSLATION_MODEL
model: OPENAI_TRANSLATION_MODEL,
openaiApiKey: ""
}
};
}
@@ -435,7 +437,9 @@ function adminConversation(res, url) {
async function updateSite(req, res) {
const body = await readJson(req);
const site = getDefaultSite();
const settings = { ...JSON.parse(site.settings_json), ...(body.settings || {}) };
const currentSettings = parseJson(site.settings_json, defaultSettings());
const incomingSettings = body.settings || {};
const settings = mergeSiteSettings(currentSettings, incomingSettings);
db.prepare(`
UPDATE sites
SET is_online = ?, settings_json = ?, updated_at = CURRENT_TIMESTAMP
@@ -446,6 +450,27 @@ async function updateSite(req, res) {
return json(res, 200, { site: formatSite(updated), snippet: snippetFor(updated) });
}
async function adminAiModels(res) {
const settings = getTranslationSettings();
const apiKey = settings.openaiApiKey;
if (!apiKey) return json(res, 400, { error: "missing_openai_api_key", models: fallbackTranslationModels() });
try {
const response = await fetch("https://api.openai.com/v1/models", {
headers: { "Authorization": `Bearer ${apiKey}` }
});
if (!response.ok) throw new Error(`OpenAI HTTP ${response.status}`);
const data = await response.json();
const models = (data.data || [])
.map((item) => item.id)
.filter(isUsableTextModel)
.sort((a, b) => a.localeCompare(b));
return json(res, 200, { models: models.length ? models : fallbackTranslationModels() });
} catch (error) {
console.error("openai_models_failed", error.message);
return json(res, 502, { error: "openai_models_failed", models: fallbackTranslationModels() });
}
}
async function updateConversationStatus(req, res, url) {
const body = await readJson(req);
const status = ["new", "open", "resolved", "spam"].includes(body.status) ? body.status : null;
@@ -742,7 +767,7 @@ async function translateStoredMessage(conversationId, messageId, senderType, bod
if (!targetLanguage) return markMessageTranslation(messageId, null, null, null, "skipped");
try {
const result = await translateText(message.body, targetLanguage, settings.model);
const result = await translateText(message.body, targetLanguage, settings.model, settings.openaiApiKey);
const sourceLanguage = normalizeLanguage(result.sourceLanguage);
const translatedText = String(result.translatedText || "").trim();
const translatedLanguage = normalizeLanguage(result.translatedLanguage || targetLanguage);
@@ -773,11 +798,11 @@ function markMessageTranslation(messageId, sourceLanguage, translatedBody, trans
`).run(sourceLanguage, translatedBody, translatedLanguage, status, messageId);
}
async function translateText(text, targetLanguage, model) {
async function translateText(text, targetLanguage, model, apiKey) {
const response = await fetch("https://api.openai.com/v1/responses", {
method: "POST",
headers: {
"Authorization": `Bearer ${OPENAI_API_KEY}`,
"Authorization": `Bearer ${apiKey}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
@@ -828,6 +853,26 @@ function outputTextFromResponse(data) {
return chunks.join("");
}
function mergeSiteSettings(currentSettings, incomingSettings) {
const settings = { ...currentSettings, ...incomingSettings };
const currentTranslations = currentSettings.translations || {};
const incomingTranslations = incomingSettings.translations || {};
settings.translations = {
...currentTranslations,
...incomingTranslations
};
if (!incomingTranslations.openaiApiKey) {
settings.translations.openaiApiKey = currentTranslations.openaiApiKey || "";
}
if (isMaskedApiKey(incomingTranslations.openaiApiKey)) {
settings.translations.openaiApiKey = currentTranslations.openaiApiKey || "";
}
settings.translations.openaiApiKey = normalizeOpenAiApiKey(settings.translations.openaiApiKey);
delete settings.translations.hasOpenaiApiKey;
delete settings.translations.openaiApiKeyMasked;
return settings;
}
function getTranslationSettings() {
const site = getDefaultSite();
const settings = parseJson(site.settings_json, defaultSettings());
@@ -835,10 +880,43 @@ function getTranslationSettings() {
return {
enabled: Boolean(translations.enabled),
operatorLanguage: normalizeLanguage(translations.operatorLanguage) || "cs",
model: String(translations.model || OPENAI_TRANSLATION_MODEL).trim() || OPENAI_TRANSLATION_MODEL
model: String(translations.model || OPENAI_TRANSLATION_MODEL).trim() || OPENAI_TRANSLATION_MODEL,
openaiApiKey: normalizeOpenAiApiKey(translations.openaiApiKey) || OPENAI_API_KEY
};
}
function normalizeOpenAiApiKey(value) {
const text = String(value || "").trim();
if (!text || isMaskedApiKey(text)) return "";
return text;
}
function isMaskedApiKey(value) {
return String(value || "").includes("...");
}
function maskApiKey(value) {
const text = normalizeOpenAiApiKey(value);
if (!text) return "";
return `${text.slice(0, 7)}...${text.slice(-4)}`;
}
function fallbackTranslationModels() {
return [
OPENAI_TRANSLATION_MODEL,
"gpt-5.1",
"gpt-5-mini",
"gpt-5-nano",
"gpt-4.1-mini",
"gpt-4.1-nano"
].filter(Boolean);
}
function isUsableTextModel(id) {
return /^(gpt-|o[134])/.test(id)
&& !/audio|realtime|transcribe|tts|image|search|embedding|moderation|codex/i.test(id);
}
function normalizeLanguage(value) {
const text = String(value || "").trim().toLowerCase().replace("_", "-");
if (!text) return "";
@@ -1036,6 +1114,10 @@ function formatSite(site) {
settings.notifications = { ...defaultSettings().notifications, ...(settings.notifications || {}) };
settings.launcherEffects = { ...defaultSettings().launcherEffects, ...(settings.launcherEffects || {}) };
settings.translations = { ...defaultSettings().translations, ...(settings.translations || {}) };
const storedOpenAiKey = settings.translations.openaiApiKey || OPENAI_API_KEY;
settings.translations.hasOpenaiApiKey = Boolean(storedOpenAiKey);
settings.translations.openaiApiKeyMasked = maskApiKey(storedOpenAiKey);
settings.translations.openaiApiKey = "";
return {
id: site.id,
siteKey: site.site_key,