Initial commit - Datalab Lite source code
This commit is contained in:
admin committed
commit
e0b852dd6b
6 files changed
+780
No files matched your search
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DTNum Labs</title>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background:#0f172a; color:#e2e8f0; min-height:100vh; }
|
||||
header { background:#1e293b; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #334155; }
|
||||
header h1 { font-size:20px; color:#60a5fa; font-weight:700; }
|
||||
.user-info { display:flex; align-items:center; gap:12px; font-size:14px; color:#94a3b8; }
|
||||
.logout { color:#f87171; text-decoration:none; font-size:13px; }
|
||||
.container { max-width:1100px; margin:0 auto; padding:32px 24px; }
|
||||
h2 { font-size:16px; color:#94a3b8; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
|
||||
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-bottom:40px; }
|
||||
.card { background:#1e293b; border:1px solid #334155; border-radius:12px; padding:20px; }
|
||||
.card-icon { font-size:32px; margin-bottom:12px; }
|
||||
.card-name { font-size:16px; font-weight:700; margin-bottom:6px; }
|
||||
.card-status { font-size:12px; color:#94a3b8; margin-bottom:16px; }
|
||||
.card-status.running { color:#34d399; }
|
||||
.btn { padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-size:13px; font-weight:600; transition:all .2s; }
|
||||
.btn-launch { background:#3b82f6; color:#fff; }
|
||||
.btn-launch:hover { background:#2563eb; }
|
||||
.btn-open { background:#10b981; color:#fff; }
|
||||
.btn-open:hover { background:#059669; }
|
||||
.btn-delete { background:#ef4444; color:#fff; }
|
||||
.btn-delete:hover { background:#dc2626; }
|
||||
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }
|
||||
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
|
||||
.badge-running { background:#064e3b; color:#34d399; }
|
||||
.badge-stopped { background:#1e293b; color:#64748b; border:1px solid #334155; }
|
||||
.minio-info { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:16px 20px; margin-top:8px; font-size:13px; color:#94a3b8; }
|
||||
.minio-info strong { color:#60a5fa; }
|
||||
.token-box { display:flex; align-items:center; gap:8px; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:6px 10px; margin-top:10px; font-family:monospace; font-size:12px; color:#94a3b8; }
|
||||
.token-box span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.btn-copy { background:#334155; color:#94a3b8; border:none; border-radius:6px; padding:4px 8px; font-size:11px; cursor:pointer; flex-shrink:0; transition:all .2s; }
|
||||
.btn-copy:hover { background:#475569; color:#e2e8f0; }
|
||||
.btn-copy.copied { background:#064e3b; color:#34d399; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div style="display:flex;align-items:center;gap:10px;"><img src="data:image/png;base64,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 truncated
|
||||
<div class="user-info">
|
||||
👤 {{ username }}
|
||||
<a href="/logout" class="logout">Déconnexion</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Services actifs -->
|
||||
<h2>Mes services actifs</h2>
|
||||
<div class="grid" id="active-services">
|
||||
{% if services %}
|
||||
{% for svc in services %}
|
||||
<div class="card">
|
||||
<div class="card-icon">{{ catalog[svc.type].icon if svc.type in catalog else '🔧' }}</div>
|
||||
<div class="card-name">{{ catalog[svc.type].name if svc.type in catalog else svc.type }}</div>
|
||||
<div class="card-status">
|
||||
<span class="badge {% if svc.ready %}badge-running{% else %}badge-stopped{% endif %}">
|
||||
{% if svc.ready %}● En cours{% else %}⏳ Démarrage...{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% if svc.token %}<div class="token-box"><span>{{ svc.token }}</span><button class="btn-copy" onclick="copyToken('{{ svc.token }}', this)">📋 Copier</button></div>{% endif %}<div class="btn-group">
|
||||
{% if svc.ready %}
|
||||
<a href="{{ svc.url }}" target="_blank"><button class="btn btn-open">🔗 Ouvrir</button></a>
|
||||
{% endif %}
|
||||
<button class="btn btn-delete" onclick="deleteService('{{ svc.name }}')">🗑 Supprimer</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div style="color:#64748b; font-size:14px; padding:16px 0;">Aucun service actif. Lance un service depuis le catalogue.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Catalogue -->
|
||||
<h2>Catalogue de services</h2>
|
||||
<div class="grid">
|
||||
{% for key, svc in catalog.items() %}
|
||||
<div class="card">
|
||||
<div class="card-icon">{{ svc.icon }}</div>
|
||||
<div class="card-name">{{ svc.name }}</div>
|
||||
<div class="card-status">Port {{ svc.port }}</div>
|
||||
<button class="btn btn-launch" onclick="launchService('{{ key }}')">▶ Lancer</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- MinIO info -->
|
||||
<div class="minio-info" id="minio-block">
|
||||
🪣 Ton stockage S3 : <strong>s3://user-{{ username }}/</strong> —
|
||||
<a href="#" onclick="showMinioCredentials(event)" style="color:#60a5fa;">Voir les accès MinIO</a>
|
||||
<div id="minio-creds" style="display:none; margin-top:12px;">
|
||||
<div style="margin-bottom:6px;">
|
||||
🔗 <a id="minio-url" href="#" target="_blank" style="color:#34d399;"></a>
|
||||
</div>
|
||||
<div style="margin-bottom:4px;">👤 Login : <span id="minio-login" style="color:#e2e8f0; font-family:monospace;"></span>
|
||||
<button class="btn-copy" onclick="copyText(document.getElementById('minio-login').textContent, this)">📋</button>
|
||||
</div>
|
||||
<div>🔑 Password : <span id="minio-password" style="color:#e2e8f0; font-family:monospace;"></span>
|
||||
<button class="btn-copy" onclick="copyText(document.getElementById('minio-password').textContent, this)">📋</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function launchService(type) {
|
||||
const btn = event.target;
|
||||
btn.disabled = true;
|
||||
btn.textContent = '⏳ Lancement...';
|
||||
const r = await fetch(`/api/launch/${type}`, { method: 'POST' });
|
||||
const d = await r.json();
|
||||
if (d.url) {
|
||||
alert(`✅ Service lancé !\n\nURL : ${d.url}\n\nLe certificat TLS sera prêt dans ~2 minutes.`);
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Erreur lors du lancement');
|
||||
btn.disabled = false;
|
||||
btn.textContent = '▶ Lancer';
|
||||
}
|
||||
}
|
||||
|
||||
function copyToken(token, btn) {
|
||||
navigator.clipboard.writeText(token).then(() => {
|
||||
btn.textContent = "✅ Copié !";
|
||||
btn.classList.add("copied");
|
||||
setTimeout(() => { btn.textContent = "📋 Copier"; btn.classList.remove("copied"); }, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteService(type) {
|
||||
if (!confirm('Supprimer ce service ?')) return;
|
||||
await fetch(`/api/delete/${type}`, { method: 'DELETE' });
|
||||
location.reload();
|
||||
}
|
||||
|
||||
async function showMinioCredentials(e) {
|
||||
e.preventDefault();
|
||||
const div = document.getElementById("minio-creds");
|
||||
if (div.style.display === "none") {
|
||||
const r = await fetch("/api/minio-credentials");
|
||||
const d = await r.json();
|
||||
document.getElementById("minio-url").href = d.url;
|
||||
document.getElementById("minio-url").textContent = d.url;
|
||||
document.getElementById("minio-login").textContent = d.access_key;
|
||||
document.getElementById("minio-password").textContent = d.secret_key;
|
||||
div.style.display = "block";
|
||||
} else {
|
||||
div.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function copyText(text, btn) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
btn.textContent = "✅";
|
||||
setTimeout(() => btn.textContent = "📋", 2000);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<button id="chat-btn" onclick="toggleChat()" style="position:fixed;bottom:24px;right:24px;z-index:9999;width:52px;height:52px;border-radius:50%;background:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:22px;box-shadow:0 4px 16px rgba(59,130,246,0.4);">🤖</button>
|
||||
|
||||
<div id="chat-window" style="position:fixed;bottom:88px;right:24px;z-index:9998;width:360px;height:480px;background:#1e293b;border:1px solid #334155;border-radius:16px;display:none;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.4);overflow:hidden;">
|
||||
<div style="padding:14px 16px;background:#0f172a;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:18px;">🤖</span>
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:600;color:#e2e8f0;">Assistant IA</div>
|
||||
<div style="font-size:11px;color:#34d399;">● llama3.2:3b</div>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="clearChat()" style="background:none;border:none;color:#64748b;cursor:pointer;font-size:18px;">🗑</button>
|
||||
</div>
|
||||
<div id="chat-messages" style="flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;">
|
||||
<div style="background:#0f172a;border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:13px;color:#94a3b8;max-width:85%;">Bonjour ! Je suis ton assistant Data Science. Pose-moi une question sur Python, pandas, SQL ou MinIO.</div>
|
||||
</div>
|
||||
<div style="padding:10px 12px;border-top:1px solid #334155;display:flex;gap:8px;">
|
||||
<input id="chat-input" type="text" placeholder="Pose ta question..."
|
||||
style="flex:1;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#e2e8f0;padding:8px 12px;font-size:13px;outline:none;"/>
|
||||
<button id="send-btn" onclick="sendMessage()" style="background:#3b82f6;border:none;border-radius:8px;color:#fff;padding:8px 14px;cursor:pointer;font-size:16px;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#chat-messages::-webkit-scrollbar{width:4px;}
|
||||
#chat-messages::-webkit-scrollbar-thumb{background:#334155;border-radius:2px;}
|
||||
.msg-user{background:#1e40af;border-radius:10px 10px 2px 10px;padding:10px 12px;font-size:13px;color:#e2e8f0;max-width:85%;align-self:flex-end;}
|
||||
.msg-ai{background:#0f172a;border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:13px;color:#e2e8f0;max-width:85%;white-space:pre-wrap;line-height:1.5;}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var chatHistory = [];
|
||||
var chatOpen = false;
|
||||
|
||||
function toggleChat() {
|
||||
chatOpen = !chatOpen;
|
||||
var win = document.getElementById('chat-window');
|
||||
var btn = document.getElementById('chat-btn');
|
||||
win.style.display = chatOpen ? 'flex' : 'none';
|
||||
btn.textContent = chatOpen ? 'X' : '🤖';
|
||||
if (chatOpen) document.getElementById('chat-input').focus();
|
||||
}
|
||||
|
||||
function clearChat() {
|
||||
chatHistory = [];
|
||||
document.getElementById('chat-messages').innerHTML = '<div class="msg-ai">Chat effacé.</div>';
|
||||
}
|
||||
|
||||
function appendMsg(text, type) {
|
||||
var msgs = document.getElementById('chat-messages');
|
||||
var div = document.createElement('div');
|
||||
div.className = type === 'user' ? 'msg-user' : 'msg-ai';
|
||||
div.textContent = text;
|
||||
msgs.appendChild(div);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
return div;
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
input.value = '';
|
||||
appendMsg(text, 'user');
|
||||
chatHistory.push({role: 'user', content: text});
|
||||
var thinking = appendMsg('En train de réfléchir...', 'ai');
|
||||
thinking.style.color = '#64748b';
|
||||
document.getElementById('send-btn').disabled = true;
|
||||
fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({messages: chatHistory})
|
||||
}).then(function(r) { return r.json(); }).then(function(d) {
|
||||
thinking.remove();
|
||||
var reply = d.response || 'Erreur.';
|
||||
appendMsg(reply, 'ai');
|
||||
chatHistory.push({role: 'assistant', content: reply});
|
||||
document.getElementById('send-btn').disabled = false;
|
||||
input.focus();
|
||||
}).catch(function() {
|
||||
thinking.textContent = "Erreur de connexion.";
|
||||
thinking.style.color = '#f87171';
|
||||
document.getElementById('send-btn').disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('chat-input').addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') { e.preventDefault(); sendMessage(); }
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user