97 lines
4.0 KiB
HTML
97 lines
4.0 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header bg-dark text-white">Application Settings</div>
|
|
<div class="card-body">
|
|
<form method="post">
|
|
<h5 class="card-title mb-3">LLM Configuration (OpenRouter)</h5>
|
|
|
|
<div class="mb-3">
|
|
<label for="api_key" class="form-label">OpenRouter API Key</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="api_key" name="api_key" value="{{ settings.openrouter_api_key or '' }}">
|
|
<button class="btn btn-outline-secondary" type="button" id="connect-btn">Connect & Load Models</button>
|
|
</div>
|
|
<div class="form-text">Required for AI text generation features.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="model" class="form-label">Model Selection</label>
|
|
<select class="form-select" id="model" name="model">
|
|
<option value="{{ settings.openrouter_model }}" selected>{{ settings.openrouter_model }}</option>
|
|
</select>
|
|
<div class="form-text">Click "Connect" above to load the latest available models.</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary">Save Settings</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const connectBtn = document.getElementById('connect-btn');
|
|
const apiKeyInput = document.getElementById('api_key');
|
|
const modelSelect = document.getElementById('model');
|
|
const currentModel = "{{ settings.openrouter_model }}";
|
|
|
|
connectBtn.addEventListener('click', async () => {
|
|
const apiKey = apiKeyInput.value;
|
|
if (!apiKey) {
|
|
alert('Please enter an API Key first.');
|
|
return;
|
|
}
|
|
|
|
connectBtn.disabled = true;
|
|
connectBtn.textContent = 'Connecting...';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('api_key', apiKey);
|
|
|
|
const response = await fetch('/get_openrouter_models', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
alert('Error: ' + data.error);
|
|
} else {
|
|
// Clear and populate dropdown
|
|
modelSelect.innerHTML = '';
|
|
data.models.sort((a, b) => a.name.localeCompare(b.name)).forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.id;
|
|
option.textContent = model.name;
|
|
if (model.id === currentModel) {
|
|
option.selected = true;
|
|
}
|
|
modelSelect.appendChild(option);
|
|
});
|
|
alert('Model list loaded successfully!');
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Failed to connect to OpenRouter.');
|
|
} finally {
|
|
connectBtn.disabled = false;
|
|
connectBtn.textContent = 'Connect & Load Models';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|