StillHammer
8ff322b85a
- Documentation complète Proto-Confluent (langue primitive) - Traducteur web FR → Proto/Ancien Confluent - Interface avec config persistante (Anthropic/OpenAI) - Prompts système pour traduction LLM 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
223 lines
6.4 KiB
HTML
223 lines
6.4 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; }
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.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;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 4px;
|
|
color: #e0e0e0;
|
|
font-family: inherit;
|
|
}
|
|
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; }
|
|
.output {
|
|
background: #1a1a1a;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
border: 1px solid #3a3a3a;
|
|
min-height: 100px;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
color: #4a9eff;
|
|
}
|
|
.error { color: #ff4a4a; }
|
|
.row { display: flex; gap: 15px; }
|
|
.row .form-group { flex: 1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>ConfluentTranslator</h1>
|
|
|
|
<div class="panel">
|
|
<h2>Configuration</h2>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Provider</label>
|
|
<select id="provider">
|
|
<option value="anthropic">Anthropic</option>
|
|
<option value="openai">OpenAI</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Modèle</label>
|
|
<select id="model">
|
|
<option value="claude-sonnet-4-5-20250929">Claude Sonnet 4.5</option>
|
|
<option value="claude-4-5-haiku-20250514">Claude Haiku 4.5</option>
|
|
<option value="gpt-4o-mini">GPT-4o Mini</option>
|
|
<option value="o1-mini">GPT o1-mini</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Traduction</h2>
|
|
<div class="form-group">
|
|
<label>Langue cible</label>
|
|
<select id="target">
|
|
<option value="proto">Proto-Confluent</option>
|
|
<option value="ancien">Ancien Confluent</option>
|
|
</select>
|
|
</div>
|
|
<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>
|
|
|
|
<div class="panel">
|
|
<h2>Résultat</h2>
|
|
<div id="output" class="output">La traduction apparaîtra ici...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Load config from localStorage
|
|
const loadConfig = () => {
|
|
const config = JSON.parse(localStorage.getItem('confluentConfig') || '{}');
|
|
if (config.provider) document.getElementById('provider').value = config.provider;
|
|
if (config.model) document.getElementById('model').value = config.model;
|
|
if (config.target) document.getElementById('target').value = config.target;
|
|
};
|
|
|
|
// Save config to localStorage
|
|
const saveConfig = () => {
|
|
const config = {
|
|
provider: document.getElementById('provider').value,
|
|
model: document.getElementById('model').value,
|
|
target: document.getElementById('target').value,
|
|
};
|
|
localStorage.setItem('confluentConfig', JSON.stringify(config));
|
|
};
|
|
|
|
// Update model options based on provider
|
|
document.getElementById('provider').addEventListener('change', (e) => {
|
|
const modelSelect = document.getElementById('model');
|
|
modelSelect.innerHTML = '';
|
|
|
|
if (e.target.value === 'anthropic') {
|
|
modelSelect.innerHTML = `
|
|
<option value="claude-sonnet-4-5-20250929">Claude Sonnet 4.5</option>
|
|
<option value="claude-4-5-haiku-20250514">Claude Haiku 4.5</option>
|
|
`;
|
|
} else if (e.target.value === 'openai') {
|
|
modelSelect.innerHTML = `
|
|
<option value="gpt-4o-mini">GPT-4o Mini</option>
|
|
<option value="o1-mini">GPT o1-mini</option>
|
|
`;
|
|
}
|
|
saveConfig();
|
|
});
|
|
|
|
// Save config on change
|
|
document.getElementById('model').addEventListener('change', saveConfig);
|
|
document.getElementById('target').addEventListener('change', saveConfig);
|
|
|
|
// Translation
|
|
document.getElementById('translate').addEventListener('click', async () => {
|
|
const button = document.getElementById('translate');
|
|
const output = document.getElementById('output');
|
|
const text = document.getElementById('input').value.trim();
|
|
|
|
if (!text) {
|
|
output.innerHTML = '<span class="error">Veuillez entrer un texte.</span>';
|
|
return;
|
|
}
|
|
|
|
button.disabled = true;
|
|
output.textContent = 'Traduction en cours...';
|
|
|
|
const config = {
|
|
text,
|
|
target: document.getElementById('target').value,
|
|
provider: document.getElementById('provider').value,
|
|
model: document.getElementById('model').value,
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/translate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(config),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
output.textContent = data.translation;
|
|
} else {
|
|
output.innerHTML = `<span class="error">Erreur: ${data.error}</span>`;
|
|
}
|
|
} catch (error) {
|
|
output.innerHTML = `<span class="error">Erreur: ${error.message}</span>`;
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
loadConfig();
|
|
</script>
|
|
</body>
|
|
</html>
|