78 lines
7.0 KiB
Plaintext
78 lines
7.0 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="nl">
|
||
|
|
<head><%- include('partials/head', { pageTitle: 'AI Providers' }) %></head>
|
||
|
|
<body style="margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text)">
|
||
|
|
<%- include('partials/navbar') %>
|
||
|
|
<div class="app-layout" style="display:flex;min-height:100vh;padding-top:var(--hdr-h)">
|
||
|
|
<%- include('partials/sidebar') %>
|
||
|
|
<main class="main-area" style="flex:1;margin-left:var(--sb-w);padding:1.5rem 2rem 3rem;max-width:1200px">
|
||
|
|
<div class="page-hdr fade-in-up" style="margin-bottom:1.5rem">
|
||
|
|
<h1 style="font-size:1.5rem;font-weight:800;letter-spacing:-.4px;margin:0">AI Providers</h1>
|
||
|
|
<p style="font-size:.78rem;color:var(--text-muted);margin-top:.25rem">Configureer OpenRouter, OpenAI, Anthropic, DeepSeek, Groq, Ollama en custom providers</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<% if (saved) { %><div class="alert alert-success" style="background:var(--green-bg);border:1px solid var(--green);color:var(--green);padding:.5rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.78rem">Opgeslagen — config gesynchroniseerd naar alle Python services</div><% } %>
|
||
|
|
<% if (tested) { %><div class="alert alert-success" style="background:var(--green-bg);border:1px solid var(--green);color:var(--green);padding:.5rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.78rem">Test OK: <%= tested %></div><% } %>
|
||
|
|
<% if (error) { %><div class="alert alert-error" style="background:var(--red-bg);border:1px solid var(--red);color:var(--red);padding:.5rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.78rem"><%= error %></div><% } %>
|
||
|
|
|
||
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem">
|
||
|
|
<% providers.forEach(function(p) { %>
|
||
|
|
<div class="provider-card<%= p.is_default ? ' default' : '' %> fade-in-up">
|
||
|
|
<div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:.75rem">
|
||
|
|
<div>
|
||
|
|
<div style="font-weight:700;font-size:.95rem"><%= p.name %></div>
|
||
|
|
<div style="font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:.15rem"><%= p.provider_type %></div>
|
||
|
|
</div>
|
||
|
|
<span class="status-dot<%= p.is_active ? '' : ' offline' %>"></span>
|
||
|
|
</div>
|
||
|
|
<div style="font-size:.72rem;color:var(--text-muted);margin-bottom:.35rem">Model: <code style="color:var(--accent)"><%= p.default_model || '—' %></code></div>
|
||
|
|
<div style="font-size:.68rem;color:var(--text-dim);margin-bottom:1rem;word-break:break-all"><%= p.base_url %></div>
|
||
|
|
<div style="display:flex;gap:.35rem;flex-wrap:wrap">
|
||
|
|
<% if (p.is_default) { %><span style="font-size:.62rem;padding:.15rem .45rem;border-radius:4px;background:rgba(0,212,255,.12);color:var(--accent);border:1px solid rgba(0,212,255,.25)">Default</span><% } %>
|
||
|
|
<form action="/ai/test/<%= p.id %>" method="POST" style="display:inline"><button type="submit" class="btn btn-small" style="padding:.25rem .55rem;font-size:.65rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer">Test</button></form>
|
||
|
|
<form action="/ai/delete/<%= p.id %>" method="POST" style="display:inline" onsubmit="return confirm('Provider verwijderen?')"><button type="submit" class="btn btn-small" style="padding:.25rem .55rem;font-size:.65rem;border-radius:6px;border:1px solid var(--red);background:transparent;color:var(--red);cursor:pointer">Verwijder</button></form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% }); %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card neon-card fade-in-up" style="background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;position:relative;overflow:hidden">
|
||
|
|
<div class="neon-border-top" style="position:absolute;top:0;left:0;right:0;height:3px"></div>
|
||
|
|
<h3 style="font-size:.85rem;font-weight:700;margin-bottom:1rem">Nieuwe provider toevoegen</h3>
|
||
|
|
<form action="/ai/save" method="POST">
|
||
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
|
||
|
|
<div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Naam</label><input name="name" required placeholder="Mijn OpenRouter" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
|
||
|
|
<div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Provider type</label>
|
||
|
|
<select name="provider_type" id="providerType" onchange="updatePreset()" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem">
|
||
|
|
<% Object.keys(presets).forEach(function(k) { %><option value="<%= k %>"><%= presets[k].label %></option><% }); %>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div style="grid-column:1/-1"><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">API Key</label><input name="api_key" type="password" placeholder="sk-..." style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
|
||
|
|
<div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Base URL</label><input name="base_url" id="baseUrl" placeholder="https://openrouter.ai/api/v1" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
|
||
|
|
<div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Default model</label><input name="default_model" id="defaultModel" placeholder="qwen/qwen3-coder:free" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;gap:1rem;margin-top:1rem;align-items:center">
|
||
|
|
<label style="font-size:.72rem;display:flex;align-items:center;gap:.35rem;color:var(--text-muted)"><input type="checkbox" name="is_active" value="1" checked> Actief</label>
|
||
|
|
<label style="font-size:.72rem;display:flex;align-items:center;gap:.35rem;color:var(--text-muted)"><input type="checkbox" name="is_default" value="1"> Standaard provider</label>
|
||
|
|
<button type="submit" class="btn btn-primary" style="margin-left:auto;padding:.45rem 1.2rem;border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer">Opslaan</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const presets = <%- JSON.stringify(presets) %>;
|
||
|
|
function updatePreset() {
|
||
|
|
const t = document.getElementById('providerType').value;
|
||
|
|
const p = presets[t];
|
||
|
|
if (p) {
|
||
|
|
document.getElementById('baseUrl').value = p.base_url || '';
|
||
|
|
document.getElementById('defaultModel').value = (p.models && p.models[0]) || '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updatePreset();
|
||
|
|
</script>
|
||
|
|
<%- include('partials/scripts') %>
|
||
|
|
</body>
|
||
|
|
</html>
|