Интеллектуальное саммари для статей на сайте

Интеллектуальное саммари для статей на сайте. Автоматическое выделение главного по кнопке

Краткое саммари помогает читателю быстрее понять смысл материала без необходимости читать весь текст. Это делает блог удобнее, улучшает восприятие и экономит время. Создавать выжимку вручную после каждой статьи долго и скучно поэтому намного эффективнее использовать автоматический скрипт который формирует краткое саммари по кнопке.

Введение

Идея проста. Скрипт берет текст статьи и удаляет примеры кода, технические блоки и служебные элементы. После очистки текст разбивается на отдельные предложения. Каждое из них анализируется и получает собственную оценку значимости. Алгоритм выбирает самые информативные фразы и собирает из них краткую выжимку.

Анализ выполняется только один раз. Все последующие нажатия показывают или скрывают готовое саммари без повторного вычисления. Это дает быстрый и удобный результат.

Как работает интеллектуальное саммари

Процесс состоит из нескольких этапов:

• Сначала удаляются теги pre и code, а также элементы подсветки кода.
• Далее текст делится на предложения.
• Из каждого предложения выделяются слова, они приводятся к нижнему регистру и очищаются от пунктуации.
• Короткие и служебные слова исключаются. Оставшиеся участвуют в формировании частотного словаря.
• Чем чаще слово встречается, тем сильнее оно влияет на вес предложения. На основе этих данных выбираются самые значимые фразы. Затем они сортируются в исходном порядке и объединяются в один абзац. Это и есть итоговое саммари.

Готовая разметка для статьи

<div class="article-summary-wrapper mb-3">
 <button class="btn btn-outline-primary btn-sm js-auto-summary-btn" type="button">
 Показать саммари
 </button>

 <div class="article-summary js-auto-summary" hidden>
 <div class="article-summary-text"></div>
 </div>
</div>

<div class="article-body js-article-body">
 $MESSAGE$
</div>

Стили оформления блока саммари

.article-summary-wrapper {
 margin: 0 0 20px;
}

.article-summary-wrapper .js-auto-summary-btn {
 font-size: 0.85rem;
}

.article-summary {
 margin-top: 10px;
 padding: 12px 14px 12px 40px;
 border-radius: 8px;
 border: 1px solid rgba(0, 0, 0, 0.08);
 background: linear-gradient(
 135deg,
 rgba(13, 110, 253, 0.06),
 rgba(13, 202, 240, 0.06)
 );
 position: relative;
 font-size: 0.95rem;
 line-height: 1.6;
}

.article-summary::before {
 content: "★";
 position: absolute;
 left: 16px;
 top: 12px;
 font-size: 0.9rem;
 opacity: 0.8;
}

.article-summary-text {
 padding-left: 0;
}

Полный скрипт интеллектуального саммари

<script>
document.addEventListener("DOMContentLoaded", function () {
 var buttons = document.querySelectorAll(".js-auto-summary-btn");

 var stopWords = new Set([
 "и","в","во","не","что","он","она","они","на","я","с","со","как","а","то",
 "все","это","по","но","из","у","к","до","за","от","о","для","же","ты",
 "мы","вы","их","ему","ее","наш","ваш","так","или","был","были","быть",
 "есть","нет","при","над","под","ли","там","тут","тот","эта","это",
 "эти","когда","где","только","еще","уже","чтобы","тогда","очень","такой",
 "через","после","перед","между"
 ]);

 function getTextFromElement(el) {
 if (!el) return "";
 var clone = el.cloneNode(true);

 clone.querySelectorAll(
 "pre, code, script, style, .hljs, .prettyprint, .code-block"
 ).forEach(function (node) {
 node.remove();
 });

 var parts = [];
 var textNodes = clone.querySelectorAll("p, li");

 textNodes.forEach(function (node) {
 var t = (node.innerText || node.textContent || "").trim();
 if (t.length > 0) parts.push(t);
 });

 if (parts.length === 0) {
 return (clone.innerText || clone.textContent || "").trim();
 }

 return parts.join(" ");
 }

 function splitToSentences(text) {
 var raw = text
 .replace(/\s+/g, " ")
 .replace(/([\.!\?])+/g, "$1|")
 .split("|");
 var sentences = [];
 raw.forEach(function (s) {
 var t = s.trim();
 if (t.length > 0) sentences.push(t);
 });
 return sentences;
 }

 function tokenizeWords(text) {
 return text
 .toLowerCase()
 .replace(/[^а-яa-z0-9ё]/gi, " ")
 .split(/\s+/)
 .filter(function (w) {
 return w.length > 2 && !stopWords.has(w);
 });
 }

 function buildWordFrequency(sentences) {
 var freq = Object.create(null);
 sentences.forEach(function (s) {
 tokenizeWords(s).forEach(function (w) {
 freq[w] = (freq[w] || 0) + 1;
 });
 });
 return freq;
 }

 function scoreSentences(sentences, freq) {
 var scored = [];
 sentences.forEach(function (s, index) {
 var words = tokenizeWords(s);
 if (words.length === 0) return;
 var score = 0;
 words.forEach(function (w) {
 if (freq[w]) score += freq[w];
 });
 score = score / words.length;
 scored.push({ index: index, text: s, score: score });
 });
 return scored;
 }

 function generateSummary(text, maxSentences) {
 maxSentences = maxSentences || 3;

 var sentences = splitToSentences(text);
 if (sentences.length === 0) return "";
 if (sentences.length <= maxSentences) return sentences.join(" ");

 var freq = buildWordFrequency(sentences);
 var scored = scoreSentences(sentences, freq);

 scored.sort(function (a, b) {
 return b.score - a.score;
 });

 var top = scored.slice(0, maxSentences);

 top.sort(function (a, b) {
 return a.index - b.index;
 });

 return top.map(function (item) { return item.text; }).join(" ");
 }

 buttons.forEach(function (button) {
 var wrapper = button.closest(".article-summary-wrapper");
 var summaryBlock = wrapper.querySelector(".js-auto-summary");
 var article = document.querySelector(".js-article-body");

 var showText = "Показать саммари";
 var hideText = "Скрыть саммари";
 var generated = false;

 button.addEventListener("click", function () {
 var isHidden = summaryBlock.hasAttribute("hidden");

 if (isHidden && !generated) {
 var fullText = getTextFromElement(article);
 var summary = generateSummary(fullText, 3);
 if (!summary) summary = "Не удалось автоматически выделить краткое саммари.";
 summaryBlock.querySelector(".article-summary-text").textContent = summary;
 generated = true;
 }

 if (isHidden) {
 summaryBlock.removeAttribute("hidden");
 button.textContent = hideText;
 } else {
 summaryBlock.setAttribute("hidden", "");
 button.textContent = showText;
 }
 });
 });
});
</script>

Заключение

Интеллектуальное саммари делает статьи компактными, понятными и удобными. Скрипт работает автоматически, не требует внешних сервисов и подходит для любых блогов. Это простой и эффективный способ улучшить материалы и повысить удобство чтения.