416 lines
24 KiB
HTML
416 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Lab - Interface de Test</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<h1>🧠 AI Lab</h1>
|
|
<p>Interface de test pour l'API NLP</p>
|
|
</div>
|
|
<div class="api-status" id="apiStatus">
|
|
<div class="status-indicator offline"></div>
|
|
<span>API Déconnectée</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<div class="container">
|
|
<!-- API Configuration -->
|
|
<section class="config-section">
|
|
<div class="config-card">
|
|
<h3>⚙️ Configuration API</h3>
|
|
<div class="config-form">
|
|
<div class="input-group">
|
|
<label for="apiUrl">URL de l'API</label>
|
|
<input type="url" id="apiUrl" value="http://localhost:8000"
|
|
placeholder="http://localhost:8000">
|
|
</div>
|
|
<button class="btn btn-secondary" onclick="checkApiStatus()">
|
|
<span class="btn-icon">🔄</span>
|
|
Tester la connexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav-section">
|
|
<div class="nav-tabs">
|
|
<button class="nav-tab active" data-tab="sentiment">
|
|
<span class="tab-icon">💭</span>
|
|
Sentiment
|
|
</button>
|
|
<button class="nav-tab" data-tab="ner">
|
|
<span class="tab-icon">🏷️</span>
|
|
NER
|
|
</button>
|
|
<button class="nav-tab" data-tab="qa">
|
|
<span class="tab-icon">❓</span>
|
|
Q&A
|
|
</button>
|
|
<button class="nav-tab" data-tab="fillmask">
|
|
<span class="tab-icon">🎭</span>
|
|
Fill Mask
|
|
</button>
|
|
<button class="nav-tab" data-tab="moderation">
|
|
<span class="tab-icon">🛡️</span>
|
|
Modération
|
|
</button>
|
|
<button class="nav-tab" data-tab="textgen">
|
|
<span class="tab-icon">✍️</span>
|
|
Génération
|
|
</button>
|
|
<button class="nav-tab" data-tab="batch">
|
|
<span class="tab-icon">📦</span>
|
|
Batch
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Tab Contents -->
|
|
<div class="tab-contents">
|
|
<!-- Sentiment Analysis -->
|
|
<div class="tab-content active" id="sentiment">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>💭 Analyse de Sentiment</h2>
|
|
<p>Analysez l'émotion et le ton d'un texte</p>
|
|
</div>
|
|
<form class="form" onsubmit="analyzeSentiment(event)">
|
|
<div class="form-group">
|
|
<label for="sentimentText">Texte à analyser</label>
|
|
<textarea id="sentimentText" rows="4" placeholder="Enter your text here..."
|
|
required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sentimentModel">Modèle (optionnel)</label>
|
|
<select id="sentimentModel">
|
|
<option value="">Modèle par défaut</option>
|
|
<option value="cardiffnlp/twitter-roberta-base-sentiment-latest">Twitter RoBERTa
|
|
</option>
|
|
<option value="distilbert-base-uncased-finetuned-sst-2-english">DistilBERT SST-2
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('sentiment')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-icon">🔍</span>
|
|
Analyser
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="result-container" id="sentimentResult"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Named Entity Recognition -->
|
|
<div class="tab-content" id="ner">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>🏷️ Reconnaissance d'Entités Nommées</h2>
|
|
<p>Identifiez les personnes, lieux et organisations</p>
|
|
</div>
|
|
<form class="form" onsubmit="analyzeNER(event)">
|
|
<div class="form-group">
|
|
<label for="nerText">Texte à analyser</label>
|
|
<textarea id="nerText" rows="4" placeholder="Enter your text here..."
|
|
required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="nerModel">Modèle (optionnel)</label>
|
|
<select id="nerModel">
|
|
<option value="">Modèle par défaut</option>
|
|
<option value="dbmdz/bert-large-cased-finetuned-conll03-english">BERT Large
|
|
CoNLL03</option>
|
|
<option value="dslim/bert-base-NER">BERT Base NER</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('ner')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-icon">🔍</span>
|
|
Analyser
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="result-container" id="nerResult"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question Answering -->
|
|
<div class="tab-content" id="qa">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>❓ Questions-Réponses</h2>
|
|
<p>Obtenez des réponses basées sur un contexte</p>
|
|
</div>
|
|
<form class="form" onsubmit="answerQuestion(event)">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="qaQuestion">Question</label>
|
|
<input type="text" id="qaQuestion" placeholder="Ask your question..." required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="qaModel">Modèle (optionnel)</label>
|
|
<select id="qaModel">
|
|
<option value="">Modèle par défaut</option>
|
|
<option value="distilbert-base-cased-distilled-squad">DistilBERT SQuAD
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="qaContext">Contexte</label>
|
|
<textarea id="qaContext" rows="4"
|
|
placeholder="Enter the context to answer the question..." required></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('qa')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-icon">🔍</span>
|
|
Répondre
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="result-container" id="qaResult"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fill Mask -->
|
|
<div class="tab-content" id="fillmask">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>🎭 Complétion de Masques</h2>
|
|
<p>Prédisez les mots manquants avec [MASK]</p>
|
|
</div>
|
|
<form class="form" onsubmit="fillMask(event)">
|
|
<div class="form-group">
|
|
<label for="fillmaskText">Texte avec [MASK]</label>
|
|
<textarea id="fillmaskText" rows="4" placeholder="Enter your text with [MASK]..."
|
|
required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fillmaskModel">Modèle (optionnel)</label>
|
|
<select id="fillmaskModel">
|
|
<option value="">Modèle par défaut</option>
|
|
<option value="bert-base-uncased">BERT Base</option>
|
|
<option value="distilbert-base-uncased">DistilBERT</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('fillmask')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-icon">🔍</span>
|
|
Compléter
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="result-container" id="fillmaskResult"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Moderation -->
|
|
<div class="tab-content" id="moderation">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>🛡️ Modération de Contenu</h2>
|
|
<p>Détectez le contenu toxique ou inapproprié</p>
|
|
</div>
|
|
<form class="form" onsubmit="moderateContent(event)">
|
|
<div class="form-group">
|
|
<label for="moderationText">Texte à modérer</label>
|
|
<textarea id="moderationText" rows="4" placeholder="Enter your text here..."
|
|
required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="moderationModel">Modèle (optionnel)</label>
|
|
<select id="moderationModel">
|
|
<option value="">Modèle par défaut</option>
|
|
<option value="unitary/toxic-bert">Toxic BERT</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('moderation')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-icon">🔍</span>
|
|
Modérer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="result-container" id="moderationResult"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Generation -->
|
|
<div class="tab-content" id="textgen">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>✍️ Génération de Texte</h2>
|
|
<p>Générez du texte créatif à partir d'un prompt avec des paramètres configurables</p>
|
|
</div>
|
|
<form class="form" onsubmit="generateText(event)">
|
|
<div class="form-group">
|
|
<label for="textgenSystemPrompt">Prompt System (optionnel)</label>
|
|
<textarea id="textgenSystemPrompt" rows="2"
|
|
placeholder="You are a helpful assistant that..."></textarea>
|
|
<small>Définit le rôle ou le contexte du modèle (optionnel)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="textgenPrompt">Prompt</label>
|
|
<textarea id="textgenPrompt" rows="4" placeholder="Enter your prompt..."
|
|
required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="textgenModel">Modèle (optionnel)</label>
|
|
<select id="textgenModel">
|
|
<option value="">Modèle par défaut (GPT-2)</option>
|
|
<option value="distilgpt2">DistilGPT-2 (Très rapide, moins précis)</option>
|
|
<option value="gpt2">GPT-2 (Rapide)</option>
|
|
<option value="gpt2-medium">GPT-2 Medium (Lent, nécessite plus de mémoire)
|
|
</option>
|
|
<option value="gpt2-large">GPT-2 Large (Très lent, beaucoup de mémoire)</option>
|
|
<option value="gpt2-xl">GPT-2 XL (Extrêmement lent, mémoire élevée)</option>
|
|
<option value="meta-llama/Llama-3.2-3B-Instruct">Meta Llama 3.2 3B Instruct
|
|
</option>
|
|
<option value="meta-llama/Meta-Llama-3.1-8B-Instruct">Meta Llama 3.1 8B Instruct
|
|
</option>
|
|
<option value="mistralai/Mistral-7B-v0.1">Mistral 7B v0.1</option>
|
|
<option value="sanchit-gandhi/Mistral-3B-Instruct-v0.2">Mistral 3B Instruct v0.2
|
|
</option>
|
|
<option value="Qwen/Qwen3-0.6B">Qwen 3 0.6B</option>
|
|
<option value="Qwen/Qwen2.5-VL-3B-Instruct">Qwen 2.5 VL 3B Instruct</option>
|
|
<option value="Qwen/Qwen3-1.7B">Qwen 3 1.7B</option>
|
|
|
|
</select>
|
|
<small>⚠️ Les modèles plus gros peuvent nécessiter plus de mémoire GPU</small>
|
|
</div>
|
|
|
|
<!-- Configuration Parameters -->
|
|
<div class="form-group">
|
|
<label for="maxNewTokens">Nombre maximum de nouveaux tokens</label>
|
|
<input type="number" id="maxNewTokens" value="500" min="1" max="2048"
|
|
placeholder="500">
|
|
<small>Contrôle la longueur du texte généré (1-2048)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="numReturnSequences">Nombre de séquences à générer</label>
|
|
<input type="number" id="numReturnSequences" value="1" min="1" max="5"
|
|
placeholder="1">
|
|
<small>Nombre de textes différents à générer (1-5)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="temperature">Température</label>
|
|
<input type="number" id="temperature" value="1.0" min="0.1" max="2.0" step="0.1"
|
|
placeholder="1.0">
|
|
<small>Contrôle la créativité : plus bas = plus prévisible, plus haut = plus créatif
|
|
(0.1-2.0)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="doSample" checked>
|
|
<span class="checkbox-custom"></span>
|
|
Utiliser l'échantillonnage
|
|
</label>
|
|
<small>Active l'échantillonnage aléatoire pour plus de créativité</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('textgen')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-icon">✨</span>
|
|
Générer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="result-container" id="textgenResult"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batch Processing -->
|
|
<div class="tab-content" id="batch">
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2>📦 Traitement par Lot</h2>
|
|
<p>Analysez plusieurs textes simultanément</p>
|
|
</div>
|
|
<div class="form">
|
|
<div class="form-group">
|
|
<label for="batchType">Type d'analyse</label>
|
|
<select id="batchType">
|
|
<option value="sentiment">Sentiment</option>
|
|
<option value="ner">NER</option>
|
|
<option value="fillmask">Fill Mask</option>
|
|
<option value="moderation">Modération</option>
|
|
<option value="textgen">Génération</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="batchTexts">Textes (un par ligne)</label>
|
|
<textarea id="batchTexts" rows="6" placeholder="Enter your texts, one per line..."
|
|
required></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="loadExample('batch')">
|
|
<span class="btn-icon">💡</span>
|
|
Exemple
|
|
</button>
|
|
<button type="button" class="btn btn-primary" onclick="processBatch()">
|
|
<span class="btn-icon">🚀</span>
|
|
Traiter le lot
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="result-container" id="batchResult"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Bibliothèque Marked.js pour le rendu Markdown -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |