Журнал «Код»

Подключаем к сайту орфокорректор. Орфонейрокорректор!

Журнал «Код»·13 Aug 2019

Пиши­те как угод­но — ней­рон­ка нико­му не рас­ска­жет.

Подключаем к сайту орфокорректор. Орфонейрокорректор!, image #1

В ста­тье про ней­ро­се­ти мы гово­ри­ли, что они здо­ро­во справ­ля­ют­ся с машин­ным пере­во­дом и тек­ста­ми. Наста­ло вре­мя попро­бо­вать эти тех­но­ло­гии на прак­ти­ке — будем под­клю­чать модуль орфо­кор­рек­ции «Яндекс.Спеллер» к веб-странице. В резуль­та­те вве­ден­ный на стра­ни­це текст будет авто­ма­ти­че­ски про­ве­рять­ся орфо­кор­рек­то­ром.

Яндекс.Спеллер помогает находить и исправлять орфографические ошибки в русском, украинском или английском тексте. Чтобы обнаруживать ошибки и подбирать замены, Спеллер использует библиотеку машинного обучения CatBoost. Благодаря CatBoost он может расшифровывать искажённые до неузнаваемости слова («адникасниеи» → «одноклассники») и учитывать контекст при поиске опечаток («скучать музыку» → «скачать музыку»).

Основные условия, по которым предоставляется «Спеллер», такие:

  • проверяем не больше 10 000 раз в сутки;
  • не больше 10 миллионов символов в сутки.

Этого вполне хватает для нашего частного проекта. Если вы захотите использовать «Спеллер» в профессиональных целях, почитайте полные условия.

Вот что мы сделаем:

  1. Возьмём шаблон пустой страницы.
  2. Поместим на неё заголовок, пояснительный текст и поле ввода.
  3. Напишем скрипт, который после каждого введённого слова проверяет наш текст и автоматически исправляет ошибки.

Оформляем страницу

Возь­мём наш стан­дарт­ный шаб­лон:

 
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Орфокорректор</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  </style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
  <!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->
</html>

Доба­вим на стра­ни­цу заго­ло­вок, текст и поле вво­да:

<!-- заголовок на странице -->
<h1>Орфокорректор</h1>

<!-- пояснительный текст -->
<p>Напишите что угодно с ошибками. Страница сама всё исправит.</p>

<!-- поле ввода текста -->
<textarea id="text_field" class="text"></textarea>

Подключаем к сайту орфокорректор. Орфонейрокорректор!, image #2

Вот что у нас полу­чи­лось. Выгля­дит неопрят­но, давай­те доба­вим сти­лей.

 
<style type="text/css">
 
  /* общие параметры страницы*/
  body{
    text-align: center;
    margin: 10;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
  }
  /* заголовок */
  h1{
    font-size: 48px;
    text-align: center;
  }
 
  /* поле ввода */
  .text{
    height: 80%; 
    min-width: 300px; 
    margin-left: 15vw; 
    margin-right: 15vw; 
    border: solid; 
    border-width: 1px; 
    text-align: left; 
    -webkit-box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
    box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
 
  }
 
</style>
Подключаем к сайту орфокорректор. Орфонейрокорректор!, image #3

Пишем скрипт проверки орфографии

Что­бы мож­но было обра­щать­ся к эле­мен­ту на стра­ни­це по име­ни, под­клю­чим jQuery. Если вы не зна­е­те, зачем это нуж­но и как рабо­та­ет, — про­чи­тай­те нашу ста­тью.

<script type="text/javascript" src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>

Зада­ча скрип­та — ждать нажа­тия про­бе­ла или энте­ра, после чего отпра­вить текст на про­вер­ку и полу­чить назад гото­вые сло­ва без оши­бок. Как толь­ко скрипт полу­ча­ет от сер­ве­ра Яндек­са ответ — скрипт меня­ет текст в окне вво­да на пра­виль­ный.

Код про­бе­ла — 32, код энте­ра — 13. Полу­ча­ет­ся, что нам нуж­но отсле­жи­вать нажа­тие каж­дой кла­ви­ши и смот­реть, что имен­но нажа­лось. Если выпа­ли нуж­ные нам коды — запус­ка­ем скрипт про­вер­ки. Подроб­нее про отсле­жи­ва­ние нажа­тых кла­виш — в ста­тье про редак­тор с авто­со­хра­не­ни­ем.

 
$(document).ready(function(){
 
  // эта функция получает наш результат проверки орфографии
  fix_spell = function(data) {
    data.forEach(function(elem) {
 
      // она находит наше поле ввода по имени
      $('#text_field').val(
 
        // и меняет всё на правильные слова без ошибок
        $('#text_field').val().replace(
          elem['word'],
          elem['s'][0] || elem['word']
        )
      );
    });
  }
});
 
// обработчик нажатия на клавиши
document.addEventListener('keydown', function(e) {
 
  // если нажат пробел или энтер
  if((e.keyCode == 32) || (e.keyCode == 13) ){
      
    // делим текст на строки
    var lines = $('#text_field').val().replace(/\r\n|\n\r|\n|\r/g, "\n").split("\n");
 
    // и обрабатываем каждую строчку:
    lines.forEach(function(line) {
      if (line.length) {
 
        // отправляем строку со словами на проверку в Спеллер, результат сразу отправляется в функцию fix_spell
        $.getScript('http://speller.yandex.net/services/spellservice.json/checkText?text=' + line + '&callback=fix_spell');
      }
    });
  }
});

Сохра­ня­ем скрипт отдель­ным фай­лом script.js в той же пап­ке, что и стра­ни­ца, и под­клю­ча­ем его в коде стра­ни­цы:

<script type="text/javascript" src="script.js"></script>

Полный код страницы

 
<!DOCTYPE html>
<html>
 
<!-- служебная часть -->
<head>
 
  <!-- заголовок страницы -->
  <title>Орфокорректор</title>
 
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <style type="text/css">
 
    /* общие параметры страницы*/
    body{
      text-align: center;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }
    /* заголовок */
    h1{
      font-size: 48px;
      text-align: center;
    }
 
    /* поле ввода */
    .text{
      min-height: 300px; 
      min-width: 500px; 
      border: solid; 
      border-width: 1px; 
      text-align: left; 
      -webkit-box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
      box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
    }
  
  </style>
 
<!-- закрываем служебную часть страницы -->
</head>
 
<body>
 
  <!-- подключаем jQuery -->
  <script type="text/javascript" src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
 
  <!-- подключаем наш скрипт проверки орфографии -->
  <script type="text/javascript" src="script.js"></script>
  <!-- заголовок на странице -->
  <h1>Орфокорректор</h1>
 
  <!-- пояснительный текст -->
  <p>Напишите что угодно с ошибками. Страница сама всё исправит.</p>
 
  <!-- поле ввода текста -->
  <textarea id="text_field" class="text"></textarea>
 
</body>
 
<!-- конец всей страницы -->
</html>

Посмотрите на результат

Мож­но поиг­рать с нашей пуб­лич­ной вер­си­ей на сай­те mihailmaximov.ru. Она точ­но такая же, как мы опи­са­ли в ста­тье, и про­вер­ка идёт по каж­до­му нажа­тию энте­ра или про­бе­ла. Если не хоти­те пере­гру­жать сер­ве­ра Яндек­са — сде­лай­те про­вер­ку по кноп­ке.

Что дальше

Мож­но при­кру­тить этот орфо­кор­рек­тор к наше­му тек­сто­во­му редак­то­ру, и тогда вы сра­зу буде­те печа­тать текст почти без оши­бок.

Если вы не укла­ды­ва­е­тесь в лими­ты по коли­че­ству или объ­ё­му про­ве­рок, мож­но убрать авто­про­вер­ку и доба­вить кноп­ку руч­ной про­вер­ки. Или сде­лать чек­бокс, кото­рый будет отве­чать за авто­кор­рек­цию.

А ещё мож­но доба­вить счёт­чик оши­бок — он пока­жет, насколь­ко акку­рат­но вы наби­ра­е­те текст.

Подписывайтесь на наш паблик, чтобы все было красиво!

2775 views·22 shares
2775 views