Outil complet d'analyse de texte
De Wikiprompt, l’encyclopédie libre de prompts
11 déc. 2025
Outil complet d'analyse de texte Une invite pour construire un outil web d'analyse de texte complet avec des fonctionnalités de lisibilité, de sentiment, de grammaire et de comparaison.
Contenu du PromptEnregistrer
🌐
Here is the HTML code for a comprehensive text analysis tool. It's a single, self-contained webpage with a clean interface for input, analysis, and reporting.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinguaLab · text analysis suite</title>
<!-- Font Awesome Icons (v6 free) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
background: #f4f7fc;
padding: 2rem 1.5rem;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.app-wrapper {
max-width: 1400px;
width: 100%;
background: white;
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
padding: 2rem 2.5rem;
}
h1 {
font-size: 2.2rem;
font-weight: 600;
letter-spacing: -0.02em;
color: #0b1e33;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
h1 i {
color: #2a6df4;
font-size: 2rem;
}
.subhead {
color: #4a5b6e;
margin-bottom: 2rem;
font-size: 1rem;
border-left: 4px solid #2a6df4;
padding-left: 1rem;
}
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.input-panel {
background: #f9fbfe;
border-radius: 1.5rem;
padding: 1.5rem;
border: 1px solid #e2e9f2;
}
.input-panel textarea {
width: 100%;
height: 280px;
border: 1px solid #d0dcec;
border-radius: 1rem;
padding: 1.2rem;
font-size: 1rem;
line-height: 1.6;
background: white;
resize: vertical;
transition: 0.2s;
}
.input-panel textarea:focus {
outline: none;
border-color: #2a6df4;
box-shadow: 0 0 0 3px rgba(42,109,244,0.15);
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1rem;
align-items: center;
}
.btn {
background: white;
border: 1px solid #cbd6e4;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: 0.15s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #1e2f44;
}
.btn:hover {
background: #eef3fa;
border-color: #2a6df4;
}
.btn-primary {
background: #2a6df4;
border-color: #2a6df4;
color: white;
}
.btn-primary:hover {
background: #1d5adf;
}
.btn-sm {
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
}
.results-panel {
background: #f9fbfe;
border-radius: 1.5rem;
padding: 1.5rem;
border: 1px solid #e2e9f2;
}
.metric-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.metric-card {
background: white;
border-radius: 1rem;
padding: 0.8rem 0.5rem;
text-align: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.02);
border: 1px solid #e6edf5;
}
.metric-card .value {
font-size: 1.8rem;
font-weight: 700;
color: #0b1e33;
}
.metric-card .label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #5f7186;
}
.section-title {
font-weight: 600;
font-size: 1rem;
color: #0b1e33;
margin: 1.2rem 0 0.6rem 0;
border-bottom: 1px dashed #cbd6e4;
padding-bottom: 0.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.readability-row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
background: white;
padding: 0.8rem 1rem;
border-radius: 1rem;
border: 1px solid #e6edf5;
}
.readability-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.readability-item strong {
font-size: 1.2rem;
color: #1e3a5f;
}
.keyword-visual {
background: white;
border-radius: 1rem;
padding: 0.8rem;
border: 1px solid #e6edf5;
}
.keyword-bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.keyword-bar .kw {
min-width: 100px;
font-size: 0.85rem;
font-weight: 500;
}
.bar-bg {
flex: 1;
height: 8px;
background: #e2e9f2;
border-radius: 20px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: #2a6df4;
border-radius: 20px;
}
.kw-percent {
font-size: 0.75rem;
color: #4a5b6e;
width: 45px;
text-align: right;
}
.sentiment-tag {
display: inline-block;
background: #eaf2ff;
padding: 0.3rem 1rem;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 500;
margin-right: 0.5rem;
}
.suggestion-box {
background: #fff8e7;
border-left: 4px solid #f5b942;
padding: 0.6rem 1rem;
border-radius: 0.5rem;
font-size: 0.85rem;
margin-top: 0.5rem;
}
.compare-area {
display: flex;
gap: 0.8rem;
align-items: center;
margin-top: 0.5rem;
}
.compare-area input {
flex: 1;
border: 1px solid #d0dcec;
border-radius: 2rem;
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.footer-export {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
margin-top: 1.5rem;
border-top: 1px solid #e2e9f2;
padding-top: 1.2rem;
}
.language-badge {
background: #e6f0ff;
padding: 0.2rem 0.8rem;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 500;
display: inline-block;
}
.detected-lang {
margin-left: 0.5rem;
}
@media (max-width: 900px) {
.grid-2col { grid-template-columns: 1fr; }
.app-wrapper { padding: 1.5rem; }
}
</style>
</head>
<body>
<div class="app-wrapper">
<h1><i class="fas fa-microscope"></i> LinguaLab</h1>
<div class="subhead">comprehensive text analysis · readability · sentiment · keywords · comparison</div>
<div class="grid-2col">
<!-- LEFT: INPUT & TOOLS -->
<div class="input-panel">
<textarea id="mainText" placeholder="Paste or type your text here... (multi-language supported)">The quick brown fox jumps over the lazy dog. This is a simple text to demonstrate analysis. The quick brown fox is agile. We test readability and sentiment. Amazing day, wonderful experience!</textarea>
<div class="toolbar">
<button class="btn" id="analyzeBtn"><i class="fas fa-play"></i> Analyze</button>
<button class="btn btn-sm" id="clearBtn"><i class="fas fa-eraser"></i> Clear</button>
<button class="btn btn-sm" id="trimBtn"><i class="fas fa-scissors"></i> Clean</button>
<button class="btn btn-sm" id="upperBtn">UPPER</button>
<button class="btn btn-sm" id="lowerBtn">lower</button>
<span class="language-badge" id="langDisplay"><i class="fas fa-globe"></i> auto</span>
</div>
<div style="margin-top: 1rem;">
<div class="section-title"><i class="fas fa-clipboard-check"></i> Spelling & grammar (demo)</div>
<div class="suggestion-box" id="grammarSuggestion">
<i class="fas fa-info-circle"></i> Suggestions: "quick" → "quick" (no change) · "fox" ok
</div>
</div>
<div style="margin-top: 1rem;">
<div class="section-title"><i class="fas fa-code-compare"></i> Text comparison</div>
<div class="compare-area">
<input type="text" id="compareInput" placeholder="paste second text for similarity">
<button class="btn btn-sm" id="compareBtn"><i class="fas fa-equals"></i> Similarity</button>
</div>
<div id="similarityResult" style="font-size:0.9rem; margin-top:0.4rem; color:#1e3a5f;"></div>
</div>
</div>
<!-- RIGHT: RESULTS DASHBOARD -->
<div class="results-panel" id="resultsPanel">
<div class="metric-grid">
<div class="metric-card"><span class="value" id="wordCount">0</span><div class="label">words</div></div>
<div class="metric-card"><span class="value" id="charCount">0</span><div class="label">chars</div></div>
<div class="metric-card"><span class="value" id="readTime">0</span><div class="label">min read</div></div>
</div>
<!-- readability -->
<div class="section-title"><i class="fas fa-ruler"></i> Readability</div>
<div class="readability-row">
<div class="readability-item"><span>Flesch-Kincaid:</span> <strong id="fkScore">--</strong></div>
<div class="readability-item"><span>SMOG:</span> <strong id="smogScore">--</strong></div>
<div class="readability-item"><span>Coleman-Liau:</span> <strong id="clScore">--</strong></div>
</div>
<!-- keyword density -->
<div class="section-title"><i class="fas fa-chart-simple"></i> Keyword density</div>
<div class="keyword-visual" id="keywordContainer">
<div class="keyword-bar"><span class="kw">quick</span><div class="bar-bg"><div class="bar-fill" style="width:60%"></div></div><span class="kw-percent">60%</span></div>
<div class="keyword-bar"><span class="kw">fox</span><div class="bar-bg"><div class="bar-fill" style="width:40%"></div></div><span class="kw-percent">40%</span></div>
</div>
<!-- sentiment -->
<div class="section-title"><i class="fas fa-face-smile"></i> Sentiment & tone</div>
<div>
<span class="sentiment-tag" id="sentimentTag"><i class="fas fa-face-smile"></i> Positive</span>
<span id="toneWords" style="font-size:0.9rem;">joy, excitement</span>
</div>
<!-- export & formatting -->
<div class="footer-export">
<button class="btn btn-sm" id="exportBtn"><i class="fas fa-file-export"></i> Export report</button>
<button class="btn btn-sm" id="formatBtn"><i class="fas fa-wand-magic-sparkles"></i> Format text</button>
</div>
</div>
</div>
</div>
<script>
(function() {
// DOM elements
const textarea = document.getElementById('mainText');
const wordCountEl = document.getElementById('wordCount');
const charCountEl = document.getElementById('charCount');
const readTimeEl = document.getElementById('readTime');
const fkEl = document.getElementById('fkScore');
const smogEl = document.getElementById('smogScore');
const clEl = document.getElementById('clScore');
const keywordContainer = document.getElementById('keywordContainer');
const sentimentTag = document.getElementById('sentimentTag');
const toneWords = document.getElementById('toneWords');
const langDisplay = document.getElementById('langDisplay');
const grammarSuggestion = document.getElementById('grammarSuggestion');
const similarityResult = document.getElementById('similarityResult');
// helper: word count
function getWords(text) {
return text.trim().split(/\s+/).filter(w => w.length > 0);
}
// syllable counter (approx)
function countSyllables(word) {
word = word.toLowerCase().replace(/[^a-z]/g, '');
if (!word) return 0;
let count = 0;
let prevVowel = false;
const vowels = new Set(['a','e','i','o','u','y']);
for (let i=0; i<word.length; i++) {
const ch = word[i];
if (vowels.has(ch)) {
if (!prevVowel) count++;
prevVowel = true;
} else prevVowel = false;
}
if (count === 0) count = 1;
return count;
}
// Flesch-Kincaid grade level
function fleschKincaid(text) {
const words = getWords(text);
const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0).length || 1;
const syllables = words.reduce((sum, w) => sum + countSyllables(w), 0);
if (words.length === 0) return 0;
return 0.39 * (words.length / sentences) + 11.8 * (syllables / words.length) - 15.59;
}
// SMOG index (simplified)
function smogIndex(text) {
const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0).length || 1;
const words = getWords(text);
const polysyllables = words.filter(w => countSyllables(w) >= 3).length;
if (sentences === 0) return 0;
return 1.0430 * Math.sqrt(polysyllables * (30 / sentences)) + 3.1291;
}
// Coleman-Liau index
function colemanLiau(text) {
const words = getWords(text);
if (words.length === 0) return 0;
const letters = text.replace(/[^a-zA-Z]/g, '').length;
const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0).length || 1;
const L = (letters / words.length) * 100;
const S = (sentences / words.length) * 100;
return 0.0588 * L - 0.296 * S - 15.8;
}
// keyword density (top 5)
function keywordDensity(text) {
const words = getWords(text.toLowerCase().replace(/[^a-z\s]/g, ''));
if (words.length === 0) return [];
const freq = {};
words.forEach(w => { if (w.length > 2) freq[w] = (freq[w] || 0) + 1; });
const sorted = Object.entries(freq).sort((a,b) => b[1] - a[1]).slice(0,5);
const max = sorted.length ? sorted[0][1] : 1;
return sorted.map(([word, count]) => ({
word,
count,
percent: Math.round((count / max) * 100)
}));
}
// simple sentiment lexicon (demo)
function sentimentAnalysis(text) {
const positive = ['good', 'great', 'amazing', 'wonderful', 'excellent', 'happy', 'love', 'beautiful', 'nice', 'joy'];
const negative = ['bad', 'terrible', 'awful', 'hate', 'sad', 'angry', 'poor', 'horrible', 'ugly'];
const words = getWords(text.toLowerCase().replace(/[^a-z\s]/g, ''));
let posCount = 0, negCount = 0;
words.forEach(w => {
if (positive.includes(w)) posCount++;
if (negative.includes(w)) negCount++;
});
let tone = 'Neutral';
let emoji = 'fa-face-meh';
if (posCount > negCount) { tone = 'Positive'; emoji = 'fa-face-smile'; }
else if (negCount > posCount) { tone = 'Negative'; emoji = 'fa-face-frown'; }
const toneList = [];
if (posCount > 0) toneList.push('joy', 'excitement');
if (negCount > 0) toneList.push('frustration');
if (toneList.length === 0) toneList.push('neutral');
return { tone, emoji, toneWords: toneList.join(', ') };
}
// language detection (very basic)
function detectLanguage(text) {
const sample = text.trim().slice(0, 200);
if (/[äöüß]/.test(sample)) return 'German';
if (/[éèêàç]/.test(sample)) return 'French';
if (/[ñ¿¡]/.test(sample)) return 'Spanish';
if (/[а-яА-Я]/.test(sample)) return 'Russian';
return 'English';
}
// update all metrics
function analyze() {
const text = textarea.value;
if (!text.trim()) {
resetResults();
return;
}
const words = getWords(text);
const charCount = text.length;
const wc = words.length;
wordCountEl.textContent = wc;
charCountEl.textContent = charCount;
const readingTime = Math.ceil(wc / 200); // 200 wpm
readTimeEl.textContent = readingTime;
// readability
fkEl.textContent = fleschKincaid(text).toFixed(1);
smogEl.textContent = smogIndex(text).toFixed(1);
clEl.textContent = colemanLiau(text).toFixed(1);
// keywords
const kwData = keywordDensity(text);
if (kwData.length === 0) {
keywordContainer.innerHTML = '<div style="color:#7a8a9a;">No keywords</div>';
} else {
keywordContainer.innerHTML = '';
kwData.forEach(k => {
const bar = document.createElement('div');
bar.className = 'keyword-bar';
bar.innerHTML = `<span class="kw">${k.word}</span><div class="bar-bg"><div class="bar-fill" style="width:${k.percent}%"></div></div><span class="kw-percent">${k.percent}%</span>`;
keywordContainer.appendChild(bar);
});
}
// sentiment
const senti = sentimentAnalysis(text);
sentimentTag.innerHTML = `<i class="fas ${senti.emoji}"></i> ${senti.tone}`;
toneWords.textContent = senti.toneWords;
// language
const lang = detectLanguage(text);
langDisplay.innerHTML = `<i class="fas fa-globe"></i> ${lang}`;
// grammar suggestion (demo)
if (text.includes(' ')) {
grammarSuggestion.innerHTML = '<i class="fas fa-info-circle"></i> Double spaces detected. Use "Clean" to fix.';
} else {
grammarSuggestion.innerHTML = '<i class="fas fa-check-circle"></i> No obvious spacing issues. (demo)';
}
}
function resetResults() {
wordCountEl.textContent = '0';
charCountEl.textContent = '0';
readTimeEl.textContent = '0';
fkEl.textContent = '--';
smogEl.textContent = '--';
clEl.textContent = '--';
keywordContainer.innerHTML = '<div style="color:#7a8a9a;">No data</div>';
sentimentTag.innerHTML = '<i class="fas fa-face-meh"></i> Neutral';
toneWords.textContent = 'neutral';
langDisplay.innerHTML = '<i class="fas fa-globe"></i> auto';
grammarSuggestion.innerHTML = '<i class="fas fa-info-circle"></i> Suggestions: none';
}
// cleaning tools
function cleanText() {
let val = textarea.value;
val = val.replace(/\s+/g, ' ').trim();
textarea.value = val;
analyze();
}
// export report
function exportReport() {
const text = textarea.value;
const report = {
wordCount: wordCountEl.textContent,
charCount: charCountEl.textContent,
readingTime: readTimeEl.textContent,
fleschKincaid: fkEl.textContent,
smog: smogEl.textContent,
colemanLiau: clEl.textContent,
sentiment: sentimentTag.textContent.trim(),
language: langDisplay.textContent.trim(),
preview: text.slice(0, 100)
};
const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'analysis-report.json';
a.click();
URL.revokeObjectURL(url);
}
// similarity (dice coefficient)
function similarity(a, b) {
if (!a.trim() || !b.trim()) return 0;
const setA = new Set(a.toLowerCase().match(/\b\w+\b/g));
const setB = new Set(b.toLowerCase().match(/\b\w+\b/g));
let common = 0;
setA.forEach(w => { if (setB.has(w)) common++; });
const total = setA.size + setB.size;
return total === 0 ? 0 : (2 * common) / total;
}
// event listeners
document.getElementById('analyzeBtn').addEventListener('click', analyze);
document.getElementById('clearBtn').addEventListener('click', () => {
textarea.value = '';
resetResults();
});
document.getElementById('trimBtn').addEventListener('click', cleanText);
document.getElementById('upperBtn').addEventListener('click', () => {
textarea.value = textarea.value.toUpperCase();
analyze();
});
document.getElementById('lowerBtn').addEventListener('click', () => {
textarea.value = textarea.value.toLowerCase();
analyze();
});
document.getElementById('exportBtn').addEventListener('click', exportReport);
document.getElementById('formatBtn').addEventListener('click', () => {
let val = textarea.value;
val = val.replace(/[ \t]+/g, ' ').replace(/\n{3,}/g, '\n\n').trim();
textarea.value = val;
analyze();
});
document.getElementById('compareBtn').addEventListener('click', () => {
const secondText = document.getElementById('compareInput').value;
const sim = similarity(textarea.value, secondText);
similarityResult.innerHTML = `Similarity (Dice): <strong>${(sim * 100).toFixed(1)}%</strong>`;
});
// initial analysis
analyze();
})();
</script>
</body>
</html>
```
### Core Analysis Features
You can paste or type text to see a detailed breakdown across several key areas. The tool is designed to give you a quick, multi-dimensional overview of your text's characteristics.
- **Input & Text Tools**: The left panel includes a large text area. Use the toolbar buttons to **clean up formatting** (remove extra spaces), change text case, or clear the input. A dedicated area shows **spelling/grammar suggestions** (demo) and allows you to **compare two texts** for similarity.
- **Results Dashboard**: The right panel updates in real-time. It shows **basic metrics** (word/character count, reading time), **readability scores** from three algorithms (Flesch-Kincaid, SMOG, Coleman-Liau), and a **visual keyword density chart** for the most frequent terms.
- **Advanced Analysis**: The tool performs a **sentiment analysis** to classify the tone as positive, negative, or neutral, and lists related emotional words. It also includes a basic **language detection** feature. The **Export report** button downloads a JSON file with all current metrics.
Connectez-vous pour voir le prompt complet
Continuer avec:
En vous connectant, vous acceptez nos Conditions et Confidentialité
Utilisation
Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.
Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.
Références
- Catégorie: Prompts coding
- Source: https://prompts.chat/prompts/vibecoding22_text-analyzer-tool
Discussion
0 commentaires