feat: redesign UI section Cles API IA - recherche, carte defaut, cartes depliables, footer sticky (#104)
This commit is contained in:
+80
-199
@@ -2038,210 +2038,95 @@
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- Cles API AI -->
|
||||
<!-- Cles API AI (#104 — accordéon fournisseurs) -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-ai"
|
||||
>
|
||||
<h2>🤖 Cles API Intelligence Artificielle</h2>
|
||||
<p class="config-description">
|
||||
Configurez vos cles API. Cliquez sur
|
||||
<strong data-i18n="config.test">Tester</strong> pour charger les
|
||||
modeles.
|
||||
</p>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-ai-default-provider"
|
||||
data-i18n="config.ai_default_provider"
|
||||
>Fournisseur par defaut</label
|
||||
>
|
||||
<select
|
||||
id="cfg-ai-default-provider"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">--</option>
|
||||
</select>
|
||||
<div class="ai-keys-header">
|
||||
<div class="ai-keys-header-text">
|
||||
<h2 data-i18n="config.section_cles-api-intelligence-artificielle">🤖 Cles API Intelligence Artificielle</h2>
|
||||
<p class="config-description" data-i18n="config.ai_header_desc">
|
||||
Configurez vos cles API fournisseur par fournisseur. Dépliez une carte pour saisir une
|
||||
clé, puis cliquez sur <strong data-i18n="config.test">Tester</strong> pour charger les
|
||||
modeles.
|
||||
</p>
|
||||
</div>
|
||||
<div class="ai-keys-search">
|
||||
<i data-lucide="search" class="icon"></i>
|
||||
<input
|
||||
type="search"
|
||||
id="cfg-ai-search"
|
||||
data-i18n-placeholder="config.ai_search_placeholder"
|
||||
placeholder="Rechercher un fournisseur…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-ai-default-model"
|
||||
data-i18n="config.ai_default_model"
|
||||
>Modele par defaut</label
|
||||
>
|
||||
<select
|
||||
id="cfg-ai-default-model"
|
||||
class="config-select"
|
||||
style="width: 220px"
|
||||
>
|
||||
<option value="">--</option>
|
||||
</select>
|
||||
|
||||
<div class="ai-default-card">
|
||||
<div class="ai-card-title" data-i18n="config.ai_default_section">Configuration par defaut</div>
|
||||
<div class="ai-default-grid">
|
||||
<div class="ai-field">
|
||||
<label
|
||||
class="ai-field-label"
|
||||
for="cfg-ai-default-provider"
|
||||
data-i18n="config.ai_default_provider"
|
||||
>Fournisseur par defaut</label
|
||||
>
|
||||
<select
|
||||
id="cfg-ai-default-provider"
|
||||
class="config-select"
|
||||
>
|
||||
<option value="">--</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ai-field">
|
||||
<label
|
||||
class="ai-field-label"
|
||||
for="cfg-ai-default-model"
|
||||
data-i18n="config.ai_default_model"
|
||||
>Modele par defaut</label
|
||||
>
|
||||
<select
|
||||
id="cfg-ai-default-model"
|
||||
class="config-select"
|
||||
>
|
||||
<option value="">--</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-field">
|
||||
<span
|
||||
class="ai-field-label"
|
||||
data-i18n="config.ai_capabilities"
|
||||
>Capacites du modele</span
|
||||
>
|
||||
<div
|
||||
id="cfg-ai-default-model-caps"
|
||||
class="ai-caps-badges"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-row" style="align-items: flex-start">
|
||||
<label
|
||||
class="config-label"
|
||||
data-i18n="config.ai_capabilities"
|
||||
>Capacites du modele</label
|
||||
|
||||
<div class="ai-providers-header">
|
||||
<h3
|
||||
class="ai-card-title"
|
||||
data-i18n="config.ai_providers_title"
|
||||
>
|
||||
<div
|
||||
id="cfg-ai-default-model-caps"
|
||||
class="ai-picker-caps"
|
||||
style="flex: 1"
|
||||
></div>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-deepseek-key"
|
||||
>DeepSeek API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-deepseek-key"
|
||||
class="config-input"
|
||||
placeholder="sk-..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-deepseek-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-openrouter-key"
|
||||
>OpenRouter API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-openrouter-key"
|
||||
class="config-input"
|
||||
placeholder="sk-or-..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-openrouter-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-gemini-key"
|
||||
>Gemini API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-gemini-key"
|
||||
class="config-input"
|
||||
placeholder="AIza..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-gemini-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-nvidia-key"
|
||||
>NVIDIA API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-nvidia-key"
|
||||
class="config-input"
|
||||
placeholder="nvapi-..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-nvidia-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-qwencloud-key"
|
||||
>QwenCloud API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-qwencloud-key"
|
||||
class="config-input"
|
||||
placeholder="sk-..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-qwencloud-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-xiaomi-key"
|
||||
>Xiaomi API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-xiaomi-key"
|
||||
class="config-input"
|
||||
placeholder="xm-..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-xiaomi-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-mistral-key"
|
||||
>Mistral API Key</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="cfg-mistral-key"
|
||||
class="config-input"
|
||||
placeholder="sk-..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<select
|
||||
id="cfg-mistral-model"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">-- Modele --</option>
|
||||
</select>
|
||||
Fournisseurs d'API
|
||||
</h3>
|
||||
</div>
|
||||
<div id="cfg-ai-providers" class="ai-providers-list"></div>
|
||||
<div
|
||||
class="config-actions-row"
|
||||
style="margin-top: 16px"
|
||||
id="cfg-ai-providers-empty"
|
||||
class="ai-providers-empty hidden"
|
||||
data-i18n="config.ai_providers_empty"
|
||||
>
|
||||
Aucun fournisseur ne correspond
|
||||
</div>
|
||||
|
||||
<div class="ai-keys-footer">
|
||||
<button class="config-btn-save"
|
||||
id="cfg-save-ai-keys" data-i18n="help.shortcut_save">
|
||||
Sauvegarder
|
||||
@@ -2252,11 +2137,7 @@
|
||||
</button>
|
||||
<span
|
||||
id="cfg-ai-status"
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-left: 12px;
|
||||
"
|
||||
class="ai-keys-status"
|
||||
></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user