StillHammer_Etheryale
49eb7bac6d
- Restauration onglets Guide et Exemples (commit 7f2fa61 perdu lors rebase) - Fix baseDir dans server.js pour charger les lexiques correctement - Normalisation fins de ligne CRLF → LF 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2134 lines
73 KiB
HTML
2134 lines
73 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ConfluentTranslator</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html {
|
|
background: #1a1a1a;
|
|
min-height: 100%;
|
|
}
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
.container { max-width: 900px; margin: 0 auto; }
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #4a9eff;
|
|
font-size: 2em;
|
|
}
|
|
.panel {
|
|
background: #2a2a2a;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #3a3a3a;
|
|
}
|
|
.panel h2 {
|
|
font-size: 1.2em;
|
|
margin-bottom: 15px;
|
|
color: #4a9eff;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #b0b0b0;
|
|
font-size: 0.9em;
|
|
}
|
|
select, input, textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background: #1a1a1a !important;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 4px;
|
|
color: #e0e0e0 !important;
|
|
font-family: inherit;
|
|
}
|
|
select option {
|
|
background: #1a1a1a !important;
|
|
background-color: #1a1a1a !important;
|
|
color: #e0e0e0 !important;
|
|
padding: 10px;
|
|
}
|
|
/* Force dark background on select dropdown in dark mode */
|
|
body:not(.light-theme) select,
|
|
body:not(.light-theme) select option {
|
|
background: #1a1a1a !important;
|
|
background-color: #1a1a1a !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
select:focus {
|
|
outline: none;
|
|
border-color: #4a9eff;
|
|
}
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
font-size: 0.95em;
|
|
}
|
|
button {
|
|
background: #4a9eff;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
transition: background 0.2s;
|
|
}
|
|
button:hover { background: #357abd; }
|
|
button:disabled { background: #555; cursor: not-allowed; }
|
|
.row { display: flex; gap: 15px; }
|
|
.row .form-group { flex: 1; }
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid #3a3a3a;
|
|
}
|
|
.tab {
|
|
background: transparent;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
color: #b0b0b0;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab:hover { color: #e0e0e0; }
|
|
.tab.active {
|
|
color: #4a9eff;
|
|
border-bottom-color: #4a9eff;
|
|
}
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
|
|
/* 3 LAYERS SYSTEM */
|
|
.layer {
|
|
background: #2a2a2a;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #3a3a3a;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Layer 1 - Always visible */
|
|
.layer1 {
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
border: 2px solid #4a9eff;
|
|
}
|
|
.layer1-title {
|
|
font-size: 0.9em;
|
|
color: #4a9eff;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.layer1-content {
|
|
font-size: 1.3em;
|
|
color: #4a9eff;
|
|
font-family: 'Courier New', monospace;
|
|
line-height: 1.8;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
/* Layer 2 & 3 - Collapsible */
|
|
.layer-header {
|
|
padding: 15px 20px;
|
|
background: #2a2a2a;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background 0.2s;
|
|
user-select: none;
|
|
}
|
|
.layer-header:hover {
|
|
background: #333;
|
|
}
|
|
.layer-title {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.layer-icon {
|
|
font-size: 1.2em;
|
|
}
|
|
.layer-arrow {
|
|
transition: transform 0.3s;
|
|
font-size: 1.2em;
|
|
color: #4a9eff;
|
|
}
|
|
.layer-arrow.expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
.layer-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
background: #1a1a1a;
|
|
}
|
|
.layer-content.expanded {
|
|
max-height: 1000px;
|
|
transition: max-height 0.5s ease-in;
|
|
}
|
|
.layer-content-inner {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Layer 2 specific styles */
|
|
.context-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
.context-label {
|
|
color: #b0b0b0;
|
|
font-size: 0.85em;
|
|
margin-bottom: 5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.word-match {
|
|
display: inline-block;
|
|
background: #2a2a2a;
|
|
padding: 5px 10px;
|
|
margin: 3px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
border-left: 3px solid #4a9eff;
|
|
}
|
|
.word-match-input {
|
|
color: #e0e0e0;
|
|
}
|
|
.word-match-arrow {
|
|
color: #4a9eff;
|
|
margin: 0 5px;
|
|
}
|
|
.word-match-output {
|
|
color: #4a9eff;
|
|
font-family: monospace;
|
|
}
|
|
.word-match-score {
|
|
color: #888;
|
|
font-size: 0.85em;
|
|
margin-left: 5px;
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.stat-box {
|
|
background: #2a2a2a;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #4a9eff;
|
|
}
|
|
.stat-value {
|
|
font-size: 1.5em;
|
|
color: #4a9eff;
|
|
font-weight: 700;
|
|
}
|
|
.stat-label {
|
|
color: #b0b0b0;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Layer 3 specific styles */
|
|
.decomposition-line {
|
|
font-family: 'Courier New', monospace;
|
|
margin: 5px 0;
|
|
padding-left: 10px;
|
|
border-left: 2px solid #3a3a3a;
|
|
color: #e0e0e0;
|
|
}
|
|
.notes-text {
|
|
color: #b0b0b0;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
color: #b0b0b0;
|
|
text-align: center;
|
|
padding: 30px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Lexique styles */
|
|
.lexique-results {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
margin-top: 15px;
|
|
}
|
|
.lexique-item {
|
|
background: #1a1a1a;
|
|
padding: 10px;
|
|
margin-bottom: 8px;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #4a9eff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.lexique-fr {
|
|
color: #e0e0e0;
|
|
font-weight: 500;
|
|
}
|
|
.lexique-cf {
|
|
color: #4a9eff;
|
|
font-family: monospace;
|
|
font-size: 1.1em;
|
|
}
|
|
.lexique-count {
|
|
color: #b0b0b0;
|
|
font-size: 0.9em;
|
|
margin-top: 10px;
|
|
}
|
|
.no-results {
|
|
color: #b0b0b0;
|
|
text-align: center;
|
|
padding: 20px;
|
|
font-style: italic;
|
|
}
|
|
.error { color: #ff4a4a; }
|
|
|
|
/* Light theme */
|
|
body.light-theme {
|
|
background: #f5f5f5;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme html {
|
|
background: #f5f5f5;
|
|
}
|
|
body.light-theme h1 {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .panel {
|
|
background: #ffffff;
|
|
border-color: #e5e5e5;
|
|
}
|
|
body.light-theme .panel h2 {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme label {
|
|
color: #666;
|
|
}
|
|
body.light-theme select,
|
|
body.light-theme input,
|
|
body.light-theme textarea {
|
|
background: #f9f9f9;
|
|
border-color: #e5e5e5;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme select option {
|
|
background: #ffffff;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme .tab {
|
|
color: #666;
|
|
}
|
|
body.light-theme .tab.active {
|
|
color: #2563eb;
|
|
border-bottom-color: #2563eb;
|
|
}
|
|
body.light-theme .tabs {
|
|
border-bottom-color: #e5e5e5;
|
|
}
|
|
body.light-theme .layer {
|
|
background: #ffffff;
|
|
border-color: #e5e5e5;
|
|
}
|
|
body.light-theme .layer1 {
|
|
background: #f9f9f9;
|
|
border-color: #2563eb;
|
|
}
|
|
body.light-theme .layer1-title {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .layer1-content {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .layer-header {
|
|
background: #ffffff;
|
|
}
|
|
body.light-theme .layer-header:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
body.light-theme .layer-content {
|
|
background: #f9f9f9;
|
|
}
|
|
body.light-theme .layer-arrow {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .word-match {
|
|
background: #ffffff;
|
|
border-left-color: #2563eb;
|
|
}
|
|
body.light-theme .word-match-output {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .stat-box {
|
|
background: #ffffff;
|
|
border-left-color: #2563eb;
|
|
}
|
|
body.light-theme .stat-value {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .lexique-item {
|
|
background: #f9f9f9;
|
|
border-left-color: #2563eb;
|
|
}
|
|
body.light-theme .lexique-cf {
|
|
color: #2563eb;
|
|
}
|
|
|
|
/* Light theme red counter - darker red */
|
|
body.light-theme #llm-limit-counter {
|
|
color: #c41e1e;
|
|
background: rgba(196, 30, 30, 0.1);
|
|
border-color: #c41e1e;
|
|
}
|
|
|
|
/* Settings indicator */
|
|
.settings-indicator {
|
|
font-size: 0.75em;
|
|
color: #888;
|
|
text-align: center;
|
|
padding: 8px;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
}
|
|
body.light-theme .settings-indicator {
|
|
color: #666;
|
|
border-bottom-color: #e0e0e0;
|
|
}
|
|
|
|
/* Login overlay */
|
|
.login-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
.login-overlay.hidden {
|
|
display: none;
|
|
}
|
|
.login-modal {
|
|
background: #2a2a2a;
|
|
border: 2px solid #4a9eff;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
box-shadow: 0 10px 40px rgba(74, 158, 255, 0.3);
|
|
}
|
|
.login-modal h2 {
|
|
color: #4a9eff;
|
|
margin-bottom: 20px;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
}
|
|
.login-modal p {
|
|
color: #b0b0b0;
|
|
margin-bottom: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.login-modal .form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
.login-modal input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-size: 1em;
|
|
font-family: monospace;
|
|
}
|
|
.login-modal button {
|
|
width: 100%;
|
|
padding: 14px;
|
|
font-size: 1.1em;
|
|
}
|
|
.login-error {
|
|
color: #ff4a4a;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
body.light-theme .login-modal {
|
|
background: #ffffff;
|
|
border-color: #2563eb;
|
|
box-shadow: 0 10px 40px rgba(37, 99, 235, 0.3);
|
|
}
|
|
body.light-theme .login-modal h2 {
|
|
color: #2563eb;
|
|
}
|
|
|
|
/* Logout button */
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.logout-btn {
|
|
background: #555;
|
|
padding: 8px 16px;
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
}
|
|
.logout-btn:hover {
|
|
background: #666;
|
|
}
|
|
|
|
/* Guide styles */
|
|
.guide-section {
|
|
margin-bottom: 15px;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.guide-header {
|
|
padding: 15px 20px;
|
|
background: #1a1a1a;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background 0.2s;
|
|
user-select: none;
|
|
}
|
|
.guide-header:hover {
|
|
background: #252525;
|
|
}
|
|
.guide-title {
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
color: #4a9eff;
|
|
}
|
|
.guide-arrow {
|
|
transition: transform 0.3s;
|
|
font-size: 1.2em;
|
|
color: #4a9eff;
|
|
}
|
|
.guide-arrow.expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
.guide-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
background: #1a1a1a;
|
|
}
|
|
.guide-content.expanded {
|
|
max-height: 3000px;
|
|
transition: max-height 0.5s ease-in;
|
|
}
|
|
.guide-content h4 {
|
|
color: #4a9eff;
|
|
margin: 20px 20px 10px 20px;
|
|
font-size: 1em;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
padding-bottom: 5px;
|
|
}
|
|
.guide-content h4:first-child {
|
|
margin-top: 15px;
|
|
}
|
|
.guide-content p {
|
|
margin: 10px 20px;
|
|
color: #b0b0b0;
|
|
}
|
|
.guide-table {
|
|
width: calc(100% - 40px);
|
|
margin: 10px 20px;
|
|
border-collapse: collapse;
|
|
font-size: 0.9em;
|
|
}
|
|
.guide-table th {
|
|
background: #2a2a2a;
|
|
color: #4a9eff;
|
|
padding: 10px;
|
|
text-align: left;
|
|
border: 1px solid #3a3a3a;
|
|
}
|
|
.guide-table td {
|
|
padding: 8px 10px;
|
|
border: 1px solid #3a3a3a;
|
|
color: #e0e0e0;
|
|
}
|
|
.guide-table tr:nth-child(even) td {
|
|
background: #222;
|
|
}
|
|
.guide-table code, .guide-content code {
|
|
background: #2a2a2a;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
color: #4a9eff;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.guide-note {
|
|
margin: 15px 20px;
|
|
padding: 12px 15px;
|
|
background: rgba(74, 158, 255, 0.1);
|
|
border-left: 4px solid #4a9eff;
|
|
border-radius: 0 4px 4px 0;
|
|
color: #e0e0e0;
|
|
}
|
|
.guide-example {
|
|
margin: 10px 20px;
|
|
padding: 12px 15px;
|
|
background: #2a2a2a;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
color: #e0e0e0;
|
|
line-height: 1.8;
|
|
}
|
|
.guide-roots {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 10px 20px 20px 20px;
|
|
}
|
|
.root-tag {
|
|
display: inline-block;
|
|
background: #2a2a2a;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #4a9eff;
|
|
font-family: 'Courier New', monospace;
|
|
color: #e0e0e0;
|
|
}
|
|
.root-tag.sacred {
|
|
border-left-color: #ffa64a;
|
|
background: rgba(255, 166, 74, 0.1);
|
|
}
|
|
.root-tag small {
|
|
color: #888;
|
|
margin-left: 5px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Light theme guide */
|
|
body.light-theme .guide-section {
|
|
border-color: #e5e5e5;
|
|
}
|
|
body.light-theme .guide-header {
|
|
background: #f5f5f5;
|
|
}
|
|
body.light-theme .guide-header:hover {
|
|
background: #eee;
|
|
}
|
|
body.light-theme .guide-title {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .guide-arrow {
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .guide-content {
|
|
background: #f9f9f9;
|
|
}
|
|
body.light-theme .guide-content h4 {
|
|
color: #2563eb;
|
|
border-bottom-color: #e5e5e5;
|
|
}
|
|
body.light-theme .guide-table th {
|
|
background: #eee;
|
|
color: #2563eb;
|
|
border-color: #e5e5e5;
|
|
}
|
|
body.light-theme .guide-table td {
|
|
border-color: #e5e5e5;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme .guide-table tr:nth-child(even) td {
|
|
background: #f0f0f0;
|
|
}
|
|
body.light-theme .guide-table code,
|
|
body.light-theme .guide-content code {
|
|
background: #eee;
|
|
color: #2563eb;
|
|
}
|
|
body.light-theme .guide-note {
|
|
background: rgba(37, 99, 235, 0.1);
|
|
border-left-color: #2563eb;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme .guide-example {
|
|
background: #eee;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme .root-tag {
|
|
background: #eee;
|
|
border-left-color: #2563eb;
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme .root-tag.sacred {
|
|
border-left-color: #e07a00;
|
|
background: rgba(224, 122, 0, 0.1);
|
|
}
|
|
|
|
/* Examples styles */
|
|
.example-item {
|
|
background: #1a1a1a;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.example-category {
|
|
color: #888;
|
|
font-size: 0.8em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.example-fr {
|
|
color: #e0e0e0;
|
|
font-size: 1em;
|
|
margin-bottom: 8px;
|
|
padding-left: 10px;
|
|
border-left: 3px solid #888;
|
|
}
|
|
.example-cf {
|
|
color: #4a9eff;
|
|
font-size: 1.1em;
|
|
font-family: 'Courier New', monospace;
|
|
padding-left: 10px;
|
|
border-left: 3px solid #4a9eff;
|
|
}
|
|
.example-section {
|
|
margin-bottom: 25px;
|
|
}
|
|
.example-section-title {
|
|
color: #4a9eff;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
}
|
|
|
|
/* Light theme examples */
|
|
body.light-theme .example-item {
|
|
background: #f9f9f9;
|
|
border-color: #e5e5e5;
|
|
}
|
|
body.light-theme .example-fr {
|
|
color: #1a1a1a;
|
|
}
|
|
body.light-theme .example-cf {
|
|
color: #2563eb;
|
|
border-left-color: #2563eb;
|
|
}
|
|
body.light-theme .example-section-title {
|
|
color: #2563eb;
|
|
border-bottom-color: #e5e5e5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Login overlay -->
|
|
<div id="login-overlay" class="login-overlay">
|
|
<div class="login-modal">
|
|
<h2>🔐 Connexion requise</h2>
|
|
<p>Entrez votre clé API pour accéder au traducteur Confluent.</p>
|
|
<div class="form-group">
|
|
<label>API Key</label>
|
|
<input type="password" id="login-api-key" placeholder="c32b04be-2e68-4e15-8362-...">
|
|
</div>
|
|
<button onclick="login()">Se connecter</button>
|
|
<div id="login-error" class="login-error">Clé API invalide</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="header-container">
|
|
<h1>ConfluentTranslator</h1>
|
|
<!-- LLM Rate Limit Counter (CENTER, RED) -->
|
|
<div id="llm-limit-counter" style="
|
|
color: #ff4444;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
padding: 8px 16px;
|
|
background: rgba(255, 68, 68, 0.1);
|
|
border: 2px solid #ff4444;
|
|
border-radius: 6px;
|
|
display: none;
|
|
">
|
|
<span id="llm-limit-text">Requêtes LLM: 0/20</span>
|
|
</div>
|
|
<div>
|
|
<button class="logout-btn" onclick="goToAdmin()" id="admin-btn" style="display:none; margin-right: 10px;">🔐 Admin</button>
|
|
<button class="logout-btn" onclick="logout()">Déconnexion</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="traduction">Français → Confluent</button>
|
|
<button class="tab" data-tab="cf2fr">Confluent → Français</button>
|
|
<button class="tab" data-tab="lexique">Lexique</button>
|
|
<button class="tab" data-tab="stats">📊 Stats</button>
|
|
<button class="tab" data-tab="guide">📖 Guide</button>
|
|
<button class="tab" data-tab="exemples">💬 Exemples</button>
|
|
<button class="tab" data-tab="settings">⚙️ Settings</button>
|
|
</div>
|
|
|
|
<!-- Tab: Traduction Français → Confluent -->
|
|
<div id="tab-traduction" class="tab-content active">
|
|
<div class="settings-indicator" id="settings-indicator-fr2cf"></div>
|
|
<div class="panel">
|
|
<h2>Traduction Français → Confluent</h2>
|
|
<div class="form-group">
|
|
<label>Texte français</label>
|
|
<textarea id="input" placeholder="Entrez votre texte en français..."></textarea>
|
|
</div>
|
|
<button id="translate">Traduire</button>
|
|
</div>
|
|
|
|
<!-- LAYER 1: TRADUCTION (Always visible) -->
|
|
<div id="result-container" style="display: none;">
|
|
<div class="layer layer1">
|
|
<div class="layer1-title">Traduction</div>
|
|
<div id="layer1-content" class="layer1-content"></div>
|
|
</div>
|
|
|
|
<!-- LAYER 2: CONTEXTE (Collapsible) -->
|
|
<div class="layer">
|
|
<div class="layer-header" onclick="toggleLayer('layer2')">
|
|
<div class="layer-title">
|
|
<span class="layer-icon">📚</span>
|
|
<span>Contexte Lexical</span>
|
|
</div>
|
|
<span class="layer-arrow" id="layer2-arrow">▼</span>
|
|
</div>
|
|
<div id="layer2-content" class="layer-content">
|
|
<div class="layer-content-inner">
|
|
<div class="context-item">
|
|
<div class="context-label">Mots trouvés dans le lexique</div>
|
|
<div id="layer2-words"></div>
|
|
</div>
|
|
<div class="context-item">
|
|
<div class="context-label">Optimisation</div>
|
|
<div class="stats-grid" id="layer2-stats"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LAYER 3: EXPLICATIONS LLM (Collapsible) -->
|
|
<div class="layer">
|
|
<div class="layer-header" onclick="toggleLayer('layer3')">
|
|
<div class="layer-title">
|
|
<span class="layer-icon">💡</span>
|
|
<span>Explications</span>
|
|
</div>
|
|
<span class="layer-arrow" id="layer3-arrow">▼</span>
|
|
</div>
|
|
<div id="layer3-content" class="layer-content">
|
|
<div class="layer-content-inner">
|
|
<div class="context-item">
|
|
<div class="context-label">Décomposition</div>
|
|
<div id="layer3-decomposition"></div>
|
|
</div>
|
|
<div class="context-item" id="layer3-notes-container" style="display: none;">
|
|
<div class="context-label">Notes linguistiques</div>
|
|
<div id="layer3-notes" class="notes-text"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Confluent → Français -->
|
|
<div id="tab-cf2fr" class="tab-content">
|
|
<div class="settings-indicator" id="settings-indicator-cf2fr"></div>
|
|
<div class="panel">
|
|
<h2>Traduction Confluent → Français</h2>
|
|
<div class="form-group">
|
|
<label>Texte en Confluent</label>
|
|
<textarea id="cf-input" placeholder="Entrez votre texte en Confluent..."></textarea>
|
|
</div>
|
|
<button id="translate-cf2fr">Traduire</button>
|
|
</div>
|
|
|
|
<!-- Résultat -->
|
|
<div id="cf2fr-result-container" style="display: none;">
|
|
<div class="layer layer1">
|
|
<div class="layer1-title">Traduction</div>
|
|
<div id="cf2fr-layer1-content" class="layer1-content"></div>
|
|
</div>
|
|
|
|
<!-- LAYER 2: DÉTAILS (Collapsible) -->
|
|
<div class="layer">
|
|
<div class="layer-header" onclick="toggleLayer('cf2fr-layer2')">
|
|
<div class="layer-title">
|
|
<span class="layer-icon">📚</span>
|
|
<span>Détails de la traduction</span>
|
|
</div>
|
|
<span class="layer-arrow" id="cf2fr-layer2-arrow">▼</span>
|
|
</div>
|
|
<div id="cf2fr-layer2-content" class="layer-content">
|
|
<div class="layer-content-inner">
|
|
<div class="context-item">
|
|
<div class="context-label">Mots traduits</div>
|
|
<div id="cf2fr-layer2-tokens"></div>
|
|
</div>
|
|
<div class="context-item">
|
|
<div class="context-label">Couverture</div>
|
|
<div class="stats-grid" id="cf2fr-layer2-stats"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Lexique -->
|
|
<div id="tab-lexique" class="tab-content">
|
|
<div class="settings-indicator" id="settings-indicator-lexique"></div>
|
|
|
|
<!-- Recherche -->
|
|
<div class="panel">
|
|
<h2>Recherche dans le lexique</h2>
|
|
<div class="form-group">
|
|
<label>Rechercher un mot français</label>
|
|
<input type="text" id="lexique-search" placeholder="Tapez un mot en français...">
|
|
</div>
|
|
<div class="lexique-count" id="lexique-count">0 résultat(s)</div>
|
|
<div class="lexique-results" id="lexique-results">
|
|
<div class="no-results">Commencez à taper pour rechercher...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Stats -->
|
|
<div id="tab-stats" class="tab-content">
|
|
<div class="settings-indicator" id="settings-indicator-stats"></div>
|
|
|
|
<div class="panel">
|
|
<h2>📊 Statistiques du lexique</h2>
|
|
|
|
<h3 style="color: #4a9eff; margin-top: 20px; margin-bottom: 15px; font-size: 1.1em;">Couverture générale</h3>
|
|
<div class="stats-grid" id="stats-general">
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Mots CF uniques</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Entrées FR</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Total traductions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="color: #4a9eff; margin-top: 30px; margin-bottom: 15px; font-size: 1.1em;">Racines</h3>
|
|
<div class="stats-grid" id="stats-racines">
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Total racines</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Racines sacrées</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Racines standards</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="color: #4a9eff; margin-top: 30px; margin-bottom: 15px; font-size: 1.1em;">Types de mots</h3>
|
|
<div class="stats-grid" id="stats-types">
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Compositions</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Verbes</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Verbes irréguliers</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Particules</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Noms propres</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Pronoms</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Marqueurs</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Autres</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Guide de la langue -->
|
|
<div id="tab-guide" class="tab-content">
|
|
<div class="panel">
|
|
<h2>📖 Guide de la langue Confluent</h2>
|
|
<p style="color: #b0b0b0; margin-bottom: 20px;">Documentation complète du système linguistique de la Civilisation de la Confluence.</p>
|
|
|
|
<!-- Section: Phonologie -->
|
|
<div class="guide-section">
|
|
<div class="guide-header" onclick="toggleGuide('guide-phonologie')">
|
|
<span class="guide-title">🔊 Phonologie</span>
|
|
<span class="guide-arrow" id="guide-phonologie-arrow">▼</span>
|
|
</div>
|
|
<div id="guide-phonologie" class="guide-content">
|
|
<h4>Consonnes (10)</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Consonne</th><th>Prononciation</th><th>Exemple</th></tr>
|
|
<tr><td><strong>b</strong></td><td>comme en français</td><td><strong>b</strong>ien</td></tr>
|
|
<tr><td><strong>k</strong></td><td>comme en français</td><td><strong>c</strong>oup</td></tr>
|
|
<tr><td><strong>l</strong></td><td>comme en français</td><td><strong>l</strong>une</td></tr>
|
|
<tr><td><strong>m</strong></td><td>comme en français</td><td><strong>m</strong>ain</td></tr>
|
|
<tr><td><strong>n</strong></td><td>comme en français</td><td><strong>n</strong>uit</td></tr>
|
|
<tr><td><strong>p</strong></td><td>comme en français</td><td><strong>p</strong>ain</td></tr>
|
|
<tr><td><strong>s</strong></td><td>toujours sourd</td><td><strong>s</strong>ac</td></tr>
|
|
<tr><td><strong>t</strong></td><td>comme en français</td><td><strong>t</strong>erre</td></tr>
|
|
<tr><td><strong>v</strong></td><td>comme en français</td><td><strong>v</strong>ent</td></tr>
|
|
<tr><td><strong>z</strong></td><td>sonore</td><td><strong>z</strong>éro</td></tr>
|
|
</table>
|
|
|
|
<h4>Voyelles actives (5)</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Voyelle</th><th>Prononciation</th><th>Exemple</th></tr>
|
|
<tr><td><strong>a</strong></td><td>ouvert</td><td>p<strong>a</strong>tte</td></tr>
|
|
<tr><td><strong>e</strong></td><td>fermé</td><td>ét<strong>é</strong></td></tr>
|
|
<tr><td><strong>i</strong></td><td>fermé</td><td>v<strong>i</strong>e</td></tr>
|
|
<tr><td><strong>o</strong></td><td>fermé</td><td>m<strong>o</strong>t</td></tr>
|
|
<tr><td><strong>u</strong></td><td>fermé</td><td>l<strong>ou</strong>p</td></tr>
|
|
</table>
|
|
|
|
<div class="guide-note">
|
|
<strong>Règle importante :</strong> Le Confluent n'a PAS de distinction majuscule/minuscule. Tout s'écrit en minuscules : <code>uraakota</code>, <code>siliaska</code>, <code>aliaska</code>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Morphologie -->
|
|
<div class="guide-section">
|
|
<div class="guide-header" onclick="toggleGuide('guide-morphologie')">
|
|
<span class="guide-title">🧩 Morphologie & Liaisons sacrées</span>
|
|
<span class="guide-arrow" id="guide-morphologie-arrow">▼</span>
|
|
</div>
|
|
<div id="guide-morphologie" class="guide-content">
|
|
<h4>Types de racines</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Type</th><th>Proportion</th><th>Début</th><th>Signification</th></tr>
|
|
<tr><td><strong>Sacrée</strong></td><td>~20-25%</td><td>Voyelle</td><td>Concepts anciens, fondamentaux</td></tr>
|
|
<tr><td><strong>Standard</strong></td><td>~75-80%</td><td>Consonne</td><td>Vocabulaire courant</td></tr>
|
|
</table>
|
|
|
|
<div class="guide-note">
|
|
<strong>Règle :</strong> Toute racine doit FINIR par <strong>CV</strong> (consonne + voyelle). Ex: <code>sili</code>, <code>toka</code>, <code>aska</code>
|
|
</div>
|
|
|
|
<h4>Les 16 liaisons sacrées</h4>
|
|
<p>Les liaisons connectent deux racines en portant un sens relationnel.</p>
|
|
|
|
<table class="guide-table">
|
|
<tr><th>Base</th><th>Liaisons</th><th>Domaine</th></tr>
|
|
<tr><td><strong>I</strong></td><td>i, ie, ii, iu</td><td>Agentivité (qui fait, qui est)</td></tr>
|
|
<tr><td><strong>U</strong></td><td>u, ui</td><td>Appartenance / But</td></tr>
|
|
<tr><td><strong>A</strong></td><td>a, aa, ae, ao</td><td>Relation / Comparaison</td></tr>
|
|
<tr><td><strong>O</strong></td><td>o, oa</td><td>Tension / Résolution</td></tr>
|
|
<tr><td><strong>E</strong></td><td>e, ei, ea, eo</td><td>Dimension / Perspective</td></tr>
|
|
</table>
|
|
|
|
<h4>Exemples de composition</h4>
|
|
<div class="guide-example">
|
|
<code>sili</code> (regard) + <code>-i-</code> (agent) + <code>aska</code> (libre)<br>
|
|
→ <code>sil-</code> + <code>i</code> + <code>aska</code> = <strong>siliaska</strong> ("porteur du regard libre")
|
|
</div>
|
|
|
|
<table class="guide-table">
|
|
<tr><th>Liaison</th><th>Concept</th><th>Exemple</th></tr>
|
|
<tr><td><strong>-i-</strong></td><td>Agent actif</td><td>sil<strong>i</strong>aska = porteur du regard libre</td></tr>
|
|
<tr><td><strong>-u-</strong></td><td>Appartenance</td><td>nak<strong>u</strong>ura = enfant de l'eau</td></tr>
|
|
<tr><td><strong>-aa-</strong></td><td>Mélange/Fusion</td><td>ur<strong>aa</strong>kota = eau mêlée à l'union</td></tr>
|
|
<tr><td><strong>-oa-</strong></td><td>Résolution</td><td>ak<strong>oa</strong>zana = faucon vainqueur</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Grammaire -->
|
|
<div class="guide-section">
|
|
<div class="guide-header" onclick="toggleGuide('guide-grammaire')">
|
|
<span class="guide-title">📝 Grammaire & Verbes</span>
|
|
<span class="guide-arrow" id="guide-grammaire-arrow">▼</span>
|
|
</div>
|
|
<div id="guide-grammaire" class="guide-content">
|
|
<h4>Distinction Noms / Verbes</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Type</th><th>Structure</th><th>Fin</th><th>Exemples</th></tr>
|
|
<tr><td><strong>Nom/racine</strong></td><td>...CV</td><td>Voyelle</td><td>sili, aska, kota</td></tr>
|
|
<tr><td><strong>Verbe</strong></td><td>CVCVC</td><td>Consonne</td><td>mirak, nekan, vosak</td></tr>
|
|
</table>
|
|
|
|
<h4>Verbes de base</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Verbe</th><th>Sens</th><th>Verbe</th><th>Sens</th></tr>
|
|
<tr><td><strong>mirak</strong></td><td>voir, observer</td><td><strong>vosak</strong></td><td>dire, parler</td></tr>
|
|
<tr><td><strong>tekis</strong></td><td>aller</td><td><strong>sekam</strong></td><td>savoir</td></tr>
|
|
<tr><td><strong>kitan</strong></td><td>donner</td><td><strong>mokis</strong></td><td>apprendre</td></tr>
|
|
<tr><td><strong>pasak</strong></td><td>prendre</td><td><strong>kisun</strong></td><td>transmettre</td></tr>
|
|
<tr><td><strong>nekan</strong></td><td>faire, créer</td><td><strong>zakis</strong></td><td>garder</td></tr>
|
|
</table>
|
|
|
|
<h4>Conjugateurs (après le verbe)</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Temps</th><th>Conjugateur</th><th>Exemple</th></tr>
|
|
<tr><td>Présent</td><td><strong>u</strong></td><td>mirak u = observe</td></tr>
|
|
<tr><td>Passé vécu</td><td><strong>at</strong></td><td>mirak at = a observé</td></tr>
|
|
<tr><td>Passé ancestral</td><td><strong>ait</strong></td><td>mirak ait = nos ancêtres ont observé</td></tr>
|
|
<tr><td>Futur</td><td><strong>en</strong></td><td>mirak en = observera</td></tr>
|
|
<tr><td>Accompli</td><td><strong>il</strong></td><td>mirak il = a fini d'observer</td></tr>
|
|
<tr><td>Habituel</td><td><strong>eol</strong></td><td>mirak eol = observe régulièrement</td></tr>
|
|
<tr><td>Éternel</td><td><strong>eom</strong></td><td>mirak eom = observe éternellement</td></tr>
|
|
<tr><td>Impératif</td><td><strong>ok</strong></td><td>mirak ok = observe !</td></tr>
|
|
</table>
|
|
|
|
<h4>Particules de cas (avant le mot)</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Particule</th><th>Fonction</th><th>Particule</th><th>Fonction</th></tr>
|
|
<tr><td><strong>va</strong></td><td>Sujet</td><td><strong>na</strong></td><td>Possession / Adjectif</td></tr>
|
|
<tr><td><strong>vo</strong></td><td>Objet direct</td><td><strong>ni</strong></td><td>Bénéficiaire (pour)</td></tr>
|
|
<tr><td><strong>vi</strong></td><td>Direction (vers)</td><td><strong>no</strong></td><td>Lieu (dans, à)</td></tr>
|
|
<tr><td><strong>ve</strong></td><td>Origine (depuis)</td><td><strong>su</strong></td><td>Pluriel (après le mot)</td></tr>
|
|
<tr><td><strong>vu</strong></td><td>Instrument (avec)</td><td></td><td></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Syntaxe -->
|
|
<div class="guide-section">
|
|
<div class="guide-header" onclick="toggleGuide('guide-syntaxe')">
|
|
<span class="guide-title">📐 Syntaxe & Structure</span>
|
|
<span class="guide-arrow" id="guide-syntaxe-arrow">▼</span>
|
|
</div>
|
|
<div id="guide-syntaxe" class="guide-content">
|
|
<h4>Ordre des mots : SOV</h4>
|
|
<div class="guide-example">
|
|
<code>[CIRCONSTANTS] [SUJET] [OBJET] [NÉGATION] [VERBE] [CONJUGATEUR]</code>
|
|
</div>
|
|
|
|
<h4>Exemples de phrases</h4>
|
|
<div class="guide-example">
|
|
<strong>Va tori vo sili mirak u</strong><br>
|
|
<span style="color: #888;">[SUJET] personne [OBJET] regard observer [PRÉSENT]</span><br>
|
|
→ "La personne observe le regard"
|
|
</div>
|
|
|
|
<div class="guide-example">
|
|
<strong>No talu va kasi vosak u</strong><br>
|
|
<span style="color: #888;">[DANS] hall [SUJET] chef parler [PRÉSENT]</span><br>
|
|
→ "Dans le hall, le chef parle"
|
|
</div>
|
|
|
|
<h4>Négation (avant le verbe)</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Particule</th><th>Sens</th><th>Exemple</th></tr>
|
|
<tr><td><strong>zo</strong></td><td>ne...pas</td><td>zo mirak u = n'observe pas</td></tr>
|
|
<tr><td><strong>zom</strong></td><td>jamais</td><td>zom mirak u = n'observe jamais</td></tr>
|
|
<tr><td><strong>zob</strong></td><td>interdit</td><td>zob mirak u = interdit d'observer</td></tr>
|
|
</table>
|
|
|
|
<h4>Questions</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Type</th><th>Particule</th><th>Exemple</th></tr>
|
|
<tr><td>Oui/Non</td><td><strong>ka</strong> (fin)</td><td>Va tori mirak u <strong>ka</strong> = Est-ce qu'il observe ?</td></tr>
|
|
<tr><td>Qui ?</td><td><strong>ki</strong></td><td>Va <strong>ki</strong> mirak u = Qui observe ?</td></tr>
|
|
<tr><td>Quoi ?</td><td><strong>ke</strong></td><td>Vo <strong>ke</strong> mirak u = Il observe quoi ?</td></tr>
|
|
<tr><td>Où ?</td><td><strong>ko</strong></td><td>No <strong>ko</strong> tekis u = Où va-t-il ?</td></tr>
|
|
<tr><td>Quand ?</td><td><strong>ku</strong></td><td><strong>Ku</strong> tekis at = Quand est-il allé ?</td></tr>
|
|
</table>
|
|
|
|
<h4>Connecteurs logiques</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Français</th><th>Confluent</th><th>Français</th><th>Confluent</th></tr>
|
|
<tr><td>et</td><td><strong>ti</strong></td><td>donc</td><td><strong>lo</strong></td></tr>
|
|
<tr><td>mais</td><td><strong>bo</strong></td><td>car</td><td><strong>se</strong></td></tr>
|
|
<tr><td>ou</td><td><strong>po</strong></td><td>si...alors</td><td><strong>me...ne</strong></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Vocabulaire -->
|
|
<div class="guide-section">
|
|
<div class="guide-header" onclick="toggleGuide('guide-vocabulaire')">
|
|
<span class="guide-title">📚 Vocabulaire validé</span>
|
|
<span class="guide-arrow" id="guide-vocabulaire-arrow">▼</span>
|
|
</div>
|
|
<div id="guide-vocabulaire" class="guide-content">
|
|
<h4>Le peuple : siliaska</h4>
|
|
<div class="guide-example">
|
|
"Les porteurs du regard libre"<br>
|
|
<code>sili</code> (regard) + <code>-i-</code> (agent) + <code>aska</code> (libre)
|
|
</div>
|
|
|
|
<h4>Les Six Castes</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Nom français</th><th>Confluent</th><th>Sens littéral</th></tr>
|
|
<tr><td>Enfants des Échos</td><td><strong>nakukeko</strong></td><td>Enfants de l'écho</td></tr>
|
|
<tr><td>Enfants du Courant</td><td><strong>nakuura</strong></td><td>Enfants de l'eau</td></tr>
|
|
<tr><td>Ailes-Grises</td><td><strong>aliaska</strong></td><td>Porteurs de la grue libre</td></tr>
|
|
<tr><td>Faucons Chasseurs</td><td><strong>akoazana</strong></td><td>Faucon vainqueur de la chasse</td></tr>
|
|
<tr><td>Passes-bien</td><td><strong>takitosa</strong></td><td>Porteurs du bien</td></tr>
|
|
<tr><td>Voix de l'Aurore</td><td><strong>oraumi</strong></td><td>Aurore avec esprit</td></tr>
|
|
</table>
|
|
|
|
<h4>Les Six Lieux</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Nom français</th><th>Confluent</th><th>Sens littéral</th></tr>
|
|
<tr><td>La Confluence</td><td><strong>uraakota</strong></td><td>Eau mêlée à l'union</td></tr>
|
|
<tr><td>Gouffre Humide</td><td><strong>vukuura</strong></td><td>Gouffre de l'eau</td></tr>
|
|
<tr><td>Antres des Échos</td><td><strong>kekutoka</strong></td><td>Écho de la terre</td></tr>
|
|
<tr><td>Cercles de Vigile</td><td><strong>sikuvela</strong></td><td>Cercle de la vigile</td></tr>
|
|
<tr><td>Halls des Serments</td><td><strong>talusavu</strong></td><td>Hall du serment</td></tr>
|
|
<tr><td>Grande Fresque</td><td><strong>ekakova</strong></td><td>Totalité avec peinture</td></tr>
|
|
</table>
|
|
|
|
<h4>Pronoms personnels</h4>
|
|
<table class="guide-table">
|
|
<tr><th>Français</th><th>Confluent</th><th>Français</th><th>Confluent</th></tr>
|
|
<tr><td>je, moi</td><td><strong>miki</strong></td><td>nous</td><td><strong>miki su</strong></td></tr>
|
|
<tr><td>tu, toi</td><td><strong>sinu</strong></td><td>vous</td><td><strong>sinu su</strong></td></tr>
|
|
<tr><td>il, elle</td><td><strong>tani</strong></td><td>ils, elles</td><td><strong>tani su</strong></td></tr>
|
|
</table>
|
|
|
|
<h4>Racines sacrées (15)</h4>
|
|
<p style="color: #888; font-size: 0.9em;">Commencent par une voyelle - concepts fondamentaux</p>
|
|
<div class="guide-roots">
|
|
<span class="root-tag sacred">aska <small>libre</small></span>
|
|
<span class="root-tag sacred">aita <small>ancêtre</small></span>
|
|
<span class="root-tag sacred">asa <small>sacré</small></span>
|
|
<span class="root-tag sacred">ura <small>eau</small></span>
|
|
<span class="root-tag sacred">umi <small>esprit</small></span>
|
|
<span class="root-tag sacred">ora <small>aurore</small></span>
|
|
<span class="root-tag sacred">eka <small>totalité</small></span>
|
|
<span class="root-tag sacred">iko <small>un, unique</small></span>
|
|
<span class="root-tag sacred">ita <small>être</small></span>
|
|
<span class="root-tag sacred">ena <small>origine</small></span>
|
|
<span class="root-tag sacred">oki <small>épreuve</small></span>
|
|
<span class="root-tag sacred">onu <small>son</small></span>
|
|
<span class="root-tag sacred">alu <small>grue</small></span>
|
|
<span class="root-tag sacred">aki <small>faucon</small></span>
|
|
<span class="root-tag sacred">apo <small>oiseau</small></span>
|
|
</div>
|
|
|
|
<h4>Racines standards courantes</h4>
|
|
<p style="color: #888; font-size: 0.9em;">Commencent par une consonne</p>
|
|
<div class="guide-roots">
|
|
<span class="root-tag">sili <small>regard</small></span>
|
|
<span class="root-tag">toka <small>terre</small></span>
|
|
<span class="root-tag">kota <small>union</small></span>
|
|
<span class="root-tag">naki <small>enfant</small></span>
|
|
<span class="root-tag">tori <small>personne</small></span>
|
|
<span class="root-tag">kari <small>pierre</small></span>
|
|
<span class="root-tag">zeru <small>ciel</small></span>
|
|
<span class="root-tag">sora <small>lumière</small></span>
|
|
<span class="root-tag">luna <small>lune</small></span>
|
|
<span class="root-tag">vena <small>air</small></span>
|
|
<span class="root-tag">suki <small>feu</small></span>
|
|
<span class="root-tag">tosa <small>bon</small></span>
|
|
<span class="root-tag">mako <small>grand</small></span>
|
|
<span class="root-tag">pisu <small>petit</small></span>
|
|
<span class="root-tag">veri <small>vrai</small></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Exemples de phrases -->
|
|
<div id="tab-exemples" class="tab-content">
|
|
<div class="panel">
|
|
<h2>💬 Phrases d'exemple en Confluent</h2>
|
|
<p style="color: #b0b0b0; margin-bottom: 15px;">39 phrases traduites pour apprendre la langue.</p>
|
|
|
|
<div id="examples-list">
|
|
<div class="no-results">Chargement des exemples...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Settings -->
|
|
<div id="tab-settings" class="tab-content">
|
|
<div class="panel">
|
|
<h2>⚙️ Paramètres globaux</h2>
|
|
|
|
<h2>🤖 Configuration LLM</h2>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Provider</label>
|
|
<select id="settings-provider">
|
|
<option value="anthropic">Anthropic</option>
|
|
<option value="openai">OpenAI</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Modèle</label>
|
|
<select id="settings-model">
|
|
<option value="claude-sonnet-4-20250514">Claude Sonnet 4.5 (latest)</option>
|
|
<option value="claude-haiku-4-20250514">Claude Haiku 4.5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Température (créativité)</label>
|
|
<input type="range" id="settings-temperature" min="0" max="2" step="0.1" value="1.0">
|
|
<div style="display: flex; justify-content: space-between; color: #888; font-size: 0.85em;">
|
|
<span>Précis (0.0)</span>
|
|
<span id="temp-value">1.0</span>
|
|
<span>Créatif (2.0)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="margin-top: 30px;">🎨 Interface</h2>
|
|
|
|
<div class="form-group">
|
|
<label>Thème</label>
|
|
<select id="settings-theme">
|
|
<option value="dark">Sombre</option>
|
|
<option value="light">Clair</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label style="display: flex; align-items: center; cursor: pointer;">
|
|
<input type="checkbox" id="settings-verbose" style="width: auto; margin-right: 10px;">
|
|
<span>Mode verbose (afficher plus de détails)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button onclick="saveSettings()" style="margin-top: 20px;">💾 Sauvegarder les paramètres</button>
|
|
<div id="settings-saved-message" style="display: none; color: #4a9eff; margin-top: 10px; font-weight: 600;">
|
|
✓ Paramètres sauvegardés !
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// === AUTHENTICATION SYSTEM ===
|
|
|
|
// Get API key from localStorage
|
|
const getApiKey = () => localStorage.getItem('confluentApiKey');
|
|
|
|
// Set API key to localStorage
|
|
const setApiKey = (key) => localStorage.setItem('confluentApiKey', key);
|
|
|
|
// Remove API key from localStorage
|
|
const clearApiKey = () => localStorage.removeItem('confluentApiKey');
|
|
|
|
// Check if user is authenticated
|
|
const checkAuth = () => {
|
|
const apiKey = getApiKey();
|
|
const overlay = document.getElementById('login-overlay');
|
|
|
|
if (!apiKey) {
|
|
// Show login overlay
|
|
overlay.classList.remove('hidden');
|
|
} else {
|
|
// Hide login overlay
|
|
overlay.classList.add('hidden');
|
|
// Load LLM limit counter
|
|
updateLLMLimit();
|
|
}
|
|
|
|
return !!apiKey;
|
|
};
|
|
|
|
// Update LLM rate limit counter
|
|
const updateLLMLimit = async () => {
|
|
try {
|
|
const response = await authFetch('/api/llm/limit');
|
|
const data = await response.json();
|
|
|
|
console.log('LLM Limit data:', data); // Debug
|
|
|
|
const counter = document.getElementById('llm-limit-counter');
|
|
const text = document.getElementById('llm-limit-text');
|
|
|
|
if (data.limit === -1) {
|
|
// Admin with unlimited requests
|
|
counter.style.display = 'none';
|
|
} else {
|
|
// User with limited requests
|
|
counter.style.display = 'block';
|
|
const limit = data.limit || 20;
|
|
const used = data.used || 0;
|
|
text.textContent = `Requêtes LLM: ${used}/${limit}`;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading LLM limit:', error);
|
|
}
|
|
};
|
|
|
|
// Login function
|
|
const login = async () => {
|
|
const apiKey = document.getElementById('login-api-key').value.trim();
|
|
const errorDiv = document.getElementById('login-error');
|
|
|
|
if (!apiKey) {
|
|
errorDiv.textContent = 'Veuillez entrer une clé API';
|
|
errorDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
// Test the API key with the validation endpoint
|
|
try {
|
|
const response = await fetch('/api/validate', {
|
|
headers: {
|
|
'x-api-key': apiKey
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Key is valid
|
|
setApiKey(apiKey);
|
|
checkAuth();
|
|
errorDiv.style.display = 'none';
|
|
document.getElementById('login-api-key').value = '';
|
|
|
|
// Load initial data after successful login
|
|
await loadLexique();
|
|
} else if (response.status === 401 || response.status === 403) {
|
|
// Invalid key
|
|
errorDiv.textContent = 'Clé API invalide';
|
|
errorDiv.style.display = 'block';
|
|
} else {
|
|
// Other error
|
|
errorDiv.textContent = `Erreur: ${response.status}`;
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
} catch (error) {
|
|
errorDiv.textContent = `Erreur de connexion: ${error.message}`;
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
};
|
|
|
|
// Logout function
|
|
const logout = () => {
|
|
if (confirm('Êtes-vous sûr de vouloir vous déconnecter ?')) {
|
|
clearApiKey();
|
|
checkAuth();
|
|
}
|
|
};
|
|
|
|
// Add enter key support for login
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.getElementById('login-api-key').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
login();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Authenticated fetch wrapper with auto-logout on 401/403
|
|
const authFetch = async (url, options = {}) => {
|
|
const apiKey = getApiKey();
|
|
|
|
// Merge headers
|
|
const headers = {
|
|
...options.headers,
|
|
'x-api-key': apiKey
|
|
};
|
|
|
|
const response = await fetch(url, {
|
|
...options,
|
|
headers
|
|
});
|
|
|
|
// Auto-logout on authentication errors
|
|
if (response.status === 401 || response.status === 403) {
|
|
console.warn('Authentication failed - logging out');
|
|
clearApiKey();
|
|
checkAuth();
|
|
throw new Error('Session expirée. Veuillez vous reconnecter.');
|
|
}
|
|
|
|
return response;
|
|
};
|
|
|
|
// Lexique data
|
|
let lexiqueData = null;
|
|
|
|
// Load lexique
|
|
const loadLexique = async () => {
|
|
try {
|
|
const niveau = 'ancien';
|
|
const response = await authFetch(`/api/lexique/${niveau}`);
|
|
lexiqueData = await response.json();
|
|
|
|
// Load stats
|
|
await loadStats(niveau);
|
|
} catch (error) {
|
|
console.error('Error loading lexique:', error);
|
|
}
|
|
};
|
|
|
|
// Load statistics
|
|
const loadStats = async (niveau) => {
|
|
try {
|
|
const response = await authFetch(`/api/stats?variant=${niveau}`);
|
|
const stats = await response.json();
|
|
|
|
// Update general stats
|
|
const statsGeneral = document.getElementById('stats-general');
|
|
if (statsGeneral) {
|
|
statsGeneral.innerHTML = `
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.motsCF || 0}</div>
|
|
<div class="stat-label">Mots CF uniques</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.motsFR || 0}</div>
|
|
<div class="stat-label">Entrées FR</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.totalTraductions || 0}</div>
|
|
<div class="stat-label">Total traductions</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Update racines stats
|
|
const statsRacines = document.getElementById('stats-racines');
|
|
if (statsRacines) {
|
|
statsRacines.innerHTML = `
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.racines || 0}</div>
|
|
<div class="stat-label">Total racines</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.racinesSacrees || 0}</div>
|
|
<div class="stat-label">Racines sacrées</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.racinesStandards || 0}</div>
|
|
<div class="stat-label">Racines standards</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Update types stats
|
|
const statsTypes = document.getElementById('stats-types');
|
|
if (statsTypes) {
|
|
statsTypes.innerHTML = `
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.compositions || 0}</div>
|
|
<div class="stat-label">Compositions</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.verbes || 0}</div>
|
|
<div class="stat-label">Verbes</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.verbesIrreguliers || 0}</div>
|
|
<div class="stat-label">Verbes irréguliers</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.particules || 0}</div>
|
|
<div class="stat-label">Particules</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.nomsPropes || 0}</div>
|
|
<div class="stat-label">Noms propres</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.pronoms || 0}</div>
|
|
<div class="stat-label">Pronoms</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.marqueurs || 0}</div>
|
|
<div class="stat-label">Marqueurs</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${stats.autres || 0}</div>
|
|
<div class="stat-label">Autres</div>
|
|
</div>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading stats:', error);
|
|
}
|
|
};
|
|
|
|
// Toggle layer (expand/collapse)
|
|
function toggleLayer(layerId) {
|
|
const content = document.getElementById(`${layerId}-content`);
|
|
const arrow = document.getElementById(`${layerId}-arrow`);
|
|
|
|
content.classList.toggle('expanded');
|
|
arrow.classList.toggle('expanded');
|
|
}
|
|
|
|
// Toggle guide section (expand/collapse)
|
|
function toggleGuide(sectionId) {
|
|
const content = document.getElementById(sectionId);
|
|
const arrow = document.getElementById(`${sectionId}-arrow`);
|
|
|
|
content.classList.toggle('expanded');
|
|
arrow.classList.toggle('expanded');
|
|
}
|
|
|
|
// Tab switching
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
|
|
tab.classList.add('active');
|
|
const tabName = tab.dataset.tab;
|
|
document.getElementById(`tab-${tabName}`).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Lexique search
|
|
const searchLexique = () => {
|
|
const query = document.getElementById('lexique-search').value.toLowerCase().trim();
|
|
const resultsDiv = document.getElementById('lexique-results');
|
|
const countDiv = document.getElementById('lexique-count');
|
|
|
|
if (!lexiqueData || !lexiqueData.dictionnaire) {
|
|
resultsDiv.innerHTML = '<div class="no-results">Lexique en cours de chargement...</div>';
|
|
return;
|
|
}
|
|
|
|
if (!query) {
|
|
resultsDiv.innerHTML = '<div class="no-results">Commencez à taper pour rechercher...</div>';
|
|
countDiv.textContent = '0 résultat(s)';
|
|
return;
|
|
}
|
|
|
|
const dict = lexiqueData.dictionnaire;
|
|
const results = [];
|
|
|
|
for (const [key, data] of Object.entries(dict)) {
|
|
if (key.includes(query) || (data.mot_francais && data.mot_francais.toLowerCase().includes(query))) {
|
|
if (data.is_synonym_of) continue;
|
|
|
|
const cf = data.traductions && data.traductions.length > 0
|
|
? data.traductions[0].confluent
|
|
: '?';
|
|
|
|
results.push({
|
|
fr: data.mot_francais || key,
|
|
cf: cf,
|
|
type: data.traductions?.[0]?.type || '',
|
|
domaine: data.traductions?.[0]?.domaine || ''
|
|
});
|
|
}
|
|
}
|
|
|
|
results.sort((a, b) => {
|
|
const aExact = a.fr.toLowerCase() === query;
|
|
const bExact = b.fr.toLowerCase() === query;
|
|
if (aExact && !bExact) return -1;
|
|
if (!aExact && bExact) return 1;
|
|
|
|
const aStarts = a.fr.toLowerCase().startsWith(query);
|
|
const bStarts = b.fr.toLowerCase().startsWith(query);
|
|
if (aStarts && !bStarts) return -1;
|
|
if (!aStarts && bStarts) return 1;
|
|
return a.fr.localeCompare(b.fr);
|
|
});
|
|
|
|
if (results.length === 0) {
|
|
resultsDiv.innerHTML = '<div class="no-results">Aucun résultat trouvé</div>';
|
|
countDiv.textContent = '0 résultat(s)';
|
|
} else {
|
|
const html = results.map(r => `
|
|
<div class="lexique-item">
|
|
<span class="lexique-fr">${r.fr}</span>
|
|
<span class="lexique-cf">${r.cf}</span>
|
|
</div>
|
|
`).join('');
|
|
resultsDiv.innerHTML = html;
|
|
countDiv.textContent = `${results.length} résultat(s)`;
|
|
}
|
|
};
|
|
|
|
document.getElementById('lexique-search').addEventListener('input', searchLexique);
|
|
|
|
// Settings management
|
|
const DEFAULT_SETTINGS = {
|
|
provider: 'anthropic',
|
|
model: 'claude-sonnet-4-20250514',
|
|
temperature: 1.0,
|
|
theme: 'light',
|
|
verbose: false,
|
|
anthropicKey: '',
|
|
openaiKey: ''
|
|
};
|
|
|
|
const loadSettings = () => {
|
|
const settings = { ...DEFAULT_SETTINGS, ...JSON.parse(localStorage.getItem('confluentSettings') || '{}') };
|
|
|
|
// Apply to settings page
|
|
document.getElementById('settings-provider').value = settings.provider;
|
|
document.getElementById('settings-model').value = settings.model;
|
|
document.getElementById('settings-temperature').value = settings.temperature;
|
|
document.getElementById('temp-value').textContent = settings.temperature;
|
|
document.getElementById('settings-theme').value = settings.theme;
|
|
document.getElementById('settings-verbose').checked = settings.verbose;
|
|
|
|
// Apply theme
|
|
applyTheme(settings.theme);
|
|
|
|
// Update model options based on provider
|
|
updateModelOptions(settings.provider);
|
|
|
|
return settings;
|
|
};
|
|
|
|
const saveSettings = () => {
|
|
// Load existing settings to preserve API keys
|
|
const existingSettings = JSON.parse(localStorage.getItem('confluentSettings') || '{}');
|
|
|
|
const settings = {
|
|
provider: document.getElementById('settings-provider').value,
|
|
model: document.getElementById('settings-model').value,
|
|
temperature: parseFloat(document.getElementById('settings-temperature').value),
|
|
theme: document.getElementById('settings-theme').value,
|
|
verbose: document.getElementById('settings-verbose').checked,
|
|
// Preserve API keys from localStorage
|
|
anthropicKey: existingSettings.anthropicKey || '',
|
|
openaiKey: existingSettings.openaiKey || ''
|
|
};
|
|
|
|
localStorage.setItem('confluentSettings', JSON.stringify(settings));
|
|
|
|
// Apply theme
|
|
applyTheme(settings.theme);
|
|
|
|
// Reload lexique if target changed
|
|
loadLexique();
|
|
|
|
// Update settings indicators
|
|
updateSettingsIndicators();
|
|
|
|
// Show saved message
|
|
const msg = document.getElementById('settings-saved-message');
|
|
msg.style.display = 'block';
|
|
setTimeout(() => { msg.style.display = 'none'; }, 2000);
|
|
};
|
|
|
|
const applyTheme = (theme) => {
|
|
if (theme === 'light') {
|
|
document.body.classList.add('light-theme');
|
|
} else {
|
|
document.body.classList.remove('light-theme');
|
|
}
|
|
};
|
|
|
|
const updateSettingsIndicators = () => {
|
|
const settings = { ...DEFAULT_SETTINGS, ...JSON.parse(localStorage.getItem('confluentSettings') || '{}') };
|
|
|
|
const providerLabel = settings.provider === 'anthropic' ? 'Anthropic' : 'OpenAI';
|
|
|
|
// Better model label detection
|
|
let modelLabel = 'Model';
|
|
if (settings.model.includes('sonnet')) {
|
|
modelLabel = 'Sonnet 4.5';
|
|
} else if (settings.model.includes('haiku')) {
|
|
modelLabel = 'Haiku 4.5';
|
|
} else if (settings.model === 'chatgpt-4o-latest') {
|
|
modelLabel = 'ChatGPT-5.1';
|
|
} else if (settings.model === 'gpt-4o-mini') {
|
|
modelLabel = 'GPT-4o Mini';
|
|
} else if (settings.model === 'gpt-4o') {
|
|
modelLabel = 'GPT-4o';
|
|
}
|
|
|
|
const indicatorText = `Ancien Confluent • ${providerLabel} ${modelLabel} • Temp: ${settings.temperature}`;
|
|
|
|
document.getElementById('settings-indicator-fr2cf').textContent = indicatorText;
|
|
document.getElementById('settings-indicator-cf2fr').textContent = indicatorText;
|
|
document.getElementById('settings-indicator-lexique').textContent = indicatorText;
|
|
document.getElementById('settings-indicator-stats').textContent = indicatorText;
|
|
};
|
|
|
|
const updateModelOptions = (provider) => {
|
|
const modelSelect = document.getElementById('settings-model');
|
|
modelSelect.innerHTML = '';
|
|
|
|
if (provider === 'anthropic') {
|
|
modelSelect.innerHTML = `
|
|
<option value="claude-sonnet-4-20250514">Claude Sonnet 4.5 (latest)</option>
|
|
<option value="claude-haiku-4-20250514">Claude Haiku 4.5</option>
|
|
`;
|
|
} else if (provider === 'openai') {
|
|
modelSelect.innerHTML = `
|
|
<option value="chatgpt-4o-latest">ChatGPT-5.1 (latest)</option>
|
|
<option value="gpt-4o">GPT-4o</option>
|
|
<option value="gpt-4o-mini">GPT-4o Mini</option>
|
|
`;
|
|
}
|
|
};
|
|
|
|
// Settings event listeners
|
|
document.getElementById('settings-provider').addEventListener('change', (e) => {
|
|
updateModelOptions(e.target.value);
|
|
});
|
|
|
|
document.getElementById('settings-temperature').addEventListener('input', (e) => {
|
|
document.getElementById('temp-value').textContent = e.target.value;
|
|
});
|
|
|
|
// Translation with 3 layers
|
|
document.getElementById('translate').addEventListener('click', async () => {
|
|
const button = document.getElementById('translate');
|
|
const text = document.getElementById('input').value.trim();
|
|
const resultContainer = document.getElementById('result-container');
|
|
|
|
if (!text) {
|
|
alert('Veuillez entrer un texte.');
|
|
return;
|
|
}
|
|
|
|
button.disabled = true;
|
|
resultContainer.style.display = 'none';
|
|
|
|
// Show loading in layer 1
|
|
resultContainer.style.display = 'block';
|
|
document.getElementById('layer1-content').textContent = 'Traduction en cours...';
|
|
|
|
const settings = JSON.parse(localStorage.getItem('confluentSettings') || '{}');
|
|
const config = {
|
|
text,
|
|
target: 'ancien',
|
|
provider: settings.provider || 'anthropic',
|
|
model: settings.model || 'claude-sonnet-4-20250514',
|
|
temperature: settings.temperature || 1.0,
|
|
};
|
|
|
|
// Add custom API keys if provided
|
|
if (settings.anthropicKey && settings.anthropicKey.trim()) {
|
|
config.customAnthropicKey = settings.anthropicKey.trim();
|
|
}
|
|
if (settings.openaiKey && settings.openaiKey.trim()) {
|
|
config.customOpenAIKey = settings.openaiKey.trim();
|
|
}
|
|
|
|
try {
|
|
const response = await authFetch('/translate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(config),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// LAYER 1: Translation
|
|
document.getElementById('layer1-content').textContent = data.layer1.translation;
|
|
|
|
// LAYER 2: Context
|
|
if (data.layer2) {
|
|
const wordsHtml = data.layer2.wordsFound && data.layer2.wordsFound.length > 0
|
|
? data.layer2.wordsFound.map(w => `
|
|
<div class="word-match">
|
|
<span class="word-match-input">${w.input}</span>
|
|
<span class="word-match-arrow">→</span>
|
|
<span class="word-match-output">${w.confluent}</span>
|
|
<span class="word-match-score">(${w.score.toFixed(2)})</span>
|
|
</div>
|
|
`).join('')
|
|
: '<div class="no-results">Aucun mot trouvé (fallback racines activé)</div>';
|
|
|
|
document.getElementById('layer2-words').innerHTML = wordsHtml;
|
|
|
|
const statsHtml = `
|
|
<div class="stat-box">
|
|
<div class="stat-value">${data.layer2.entriesUsed || 0}</div>
|
|
<div class="stat-label">Entrées utilisées</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${data.layer2.tokensSaved || 0}</div>
|
|
<div class="stat-label">Tokens économisés</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${data.layer2.savingsPercent || 0}%</div>
|
|
<div class="stat-label">Économie</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">${
|
|
data.layer2.useFallback ? 'RACINES SEULES' :
|
|
(data.layer2.rootsUsed > 0 ? 'VOCAB + RACINES' : 'VOCAB SEUL')
|
|
}</div>
|
|
<div class="stat-label">Mode</div>
|
|
</div>
|
|
`;
|
|
document.getElementById('layer2-stats').innerHTML = statsHtml;
|
|
}
|
|
|
|
// LAYER 3: Explanations
|
|
if (data.layer3) {
|
|
const decompHtml = data.layer3.decomposition
|
|
? data.layer3.decomposition.split('\n').map(line =>
|
|
`<div class="decomposition-line">${line}</div>`
|
|
).join('')
|
|
: '<div class="no-results">Pas de décomposition disponible</div>';
|
|
|
|
document.getElementById('layer3-decomposition').innerHTML = decompHtml;
|
|
|
|
if (data.layer3.notes) {
|
|
document.getElementById('layer3-notes').textContent = data.layer3.notes;
|
|
document.getElementById('layer3-notes-container').style.display = 'block';
|
|
} else {
|
|
document.getElementById('layer3-notes-container').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
} else {
|
|
document.getElementById('layer1-content').innerHTML = `<span class="error">Erreur: ${data.error}</span>`;
|
|
}
|
|
|
|
// Update LLM limit counter after translation
|
|
updateLLMLimit().catch(err => console.error('Error updating LLM limit:', err));
|
|
|
|
} catch (error) {
|
|
document.getElementById('layer1-content').innerHTML = `<span class="error">Erreur: ${error.message}</span>`;
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Confluent → Français translation
|
|
document.getElementById('translate-cf2fr').addEventListener('click', async () => {
|
|
const button = document.getElementById('translate-cf2fr');
|
|
const text = document.getElementById('cf-input').value.trim();
|
|
const resultContainer = document.getElementById('cf2fr-result-container');
|
|
|
|
if (!text) {
|
|
alert('Veuillez entrer un texte en Confluent.');
|
|
return;
|
|
}
|
|
|
|
button.disabled = true;
|
|
resultContainer.style.display = 'none';
|
|
|
|
// Show loading
|
|
resultContainer.style.display = 'block';
|
|
document.getElementById('cf2fr-layer1-content').textContent = 'Traduction en cours...';
|
|
|
|
const settings = JSON.parse(localStorage.getItem('confluentSettings') || '{}');
|
|
|
|
try {
|
|
// Step 1: Get raw translation to show details immediately
|
|
const rawResponse = await authFetch('/api/translate/conf2fr', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
text,
|
|
variant: 'ancien',
|
|
detailed: true
|
|
}),
|
|
});
|
|
|
|
const rawData = await rawResponse.json();
|
|
|
|
if (rawResponse.ok) {
|
|
// Display detailed tokens immediately
|
|
if (rawData.tokens && rawData.tokens.length > 0) {
|
|
const tokensHtml = rawData.tokens.map(token => {
|
|
const statusClass = token.found ? 'found' : 'not-found';
|
|
const frText = token.francais || '❓';
|
|
const typeText = token.type ? `[${token.type}]` : '';
|
|
|
|
return `
|
|
<div class="word-item ${statusClass}">
|
|
<span class="word-cf">${token.confluent}</span>
|
|
<span class="word-arrow">→</span>
|
|
<span class="word-fr">${frText} ${typeText}</span>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
document.getElementById('cf2fr-layer2-tokens').innerHTML = tokensHtml;
|
|
|
|
// Display stats
|
|
const coverage = rawData.coverage || 0;
|
|
const total = rawData.tokens.length;
|
|
const found = rawData.tokens.filter(t => t.found).length;
|
|
const notFound = total - found;
|
|
|
|
document.getElementById('cf2fr-layer2-stats').innerHTML = `
|
|
<div class="stat-box">
|
|
<div class="stat-label">Couverture</div>
|
|
<div class="stat-value">${coverage}%</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Mots trouvés</div>
|
|
<div class="stat-value">${found}/${total}</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Mots inconnus</div>
|
|
<div class="stat-value">${notFound}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Step 2: Get LLM refined translation
|
|
const llmConfig = {
|
|
text,
|
|
variant: 'ancien',
|
|
provider: settings.provider || 'anthropic',
|
|
model: settings.model || 'claude-sonnet-4-20250514'
|
|
};
|
|
|
|
// Add custom API keys if provided
|
|
if (settings.anthropicKey && settings.anthropicKey.trim()) {
|
|
llmConfig.customAnthropicKey = settings.anthropicKey.trim();
|
|
}
|
|
if (settings.openaiKey && settings.openaiKey.trim()) {
|
|
llmConfig.customOpenAIKey = settings.openaiKey.trim();
|
|
}
|
|
|
|
const llmResponse = await authFetch('/api/translate/conf2fr/llm', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(llmConfig),
|
|
});
|
|
|
|
const llmData = await llmResponse.json();
|
|
|
|
if (llmResponse.ok) {
|
|
// Display refined translation
|
|
document.getElementById('cf2fr-layer1-content').textContent = llmData.refinedTranslation || llmData.rawTranslation || 'Traduction effectuée';
|
|
} else {
|
|
document.getElementById('cf2fr-layer1-content').innerHTML = `<span class="error">Erreur LLM: ${llmData.error}</span>`;
|
|
}
|
|
|
|
// Update LLM limit counter after translation
|
|
updateLLMLimit().catch(err => console.error('Error updating LLM limit:', err));
|
|
|
|
} catch (error) {
|
|
document.getElementById('cf2fr-layer1-content').innerHTML = `<span class="error">Erreur: ${error.message}</span>`;
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Listen to theme change in settings
|
|
document.getElementById('settings-theme').addEventListener('change', (e) => {
|
|
applyTheme(e.target.value);
|
|
});
|
|
|
|
// Go to admin panel
|
|
const goToAdmin = () => {
|
|
window.location.href = '/admin.html';
|
|
};
|
|
|
|
// Check if user is admin and show admin button
|
|
const checkAdminRole = async () => {
|
|
try {
|
|
const response = await authFetch('/api/validate');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.role === 'admin') {
|
|
document.getElementById('admin-btn').style.display = 'inline-block';
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log('Not admin or error checking role');
|
|
}
|
|
};
|
|
|
|
// === EXAMPLES SYSTEM ===
|
|
|
|
// Charger et afficher les exemples pré-générés
|
|
const loadExamples = async () => {
|
|
const list = document.getElementById('examples-list');
|
|
|
|
try {
|
|
const response = await fetch('/data/example-phrases.json');
|
|
if (!response.ok) throw new Error('Erreur chargement');
|
|
|
|
const data = await response.json();
|
|
let html = '';
|
|
|
|
for (const [category, phrases] of Object.entries(data)) {
|
|
html += `<div class="example-section">`;
|
|
html += `<div class="example-section-title">${category}</div>`;
|
|
|
|
for (const { fr, cf } of phrases) {
|
|
html += `
|
|
<div class="example-item">
|
|
<div class="example-fr">${fr}</div>
|
|
<div class="example-cf">${cf}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
}
|
|
|
|
list.innerHTML = html;
|
|
} catch (error) {
|
|
list.innerHTML = '<div class="no-results">Erreur: impossible de charger les exemples.</div>';
|
|
console.error('Erreur chargement exemples:', error);
|
|
}
|
|
};
|
|
|
|
// Initialize
|
|
checkAuth(); // Check if user is logged in
|
|
loadSettings();
|
|
loadLexique();
|
|
loadExamples(); // Load pre-generated examples
|
|
updateSettingsIndicators();
|
|
checkAdminRole(); // Check if admin to show admin button
|
|
</script>
|
|
</body>
|
|
</html>
|