Теоретическая основа проекта собрана в главном концепте [«учиться-легко.рф — обучение чтению как дешифровке письменного кода»](/concepts/uchitsya-legko-rf-obuchenie-chteniyu-kak-deshifrovke-pismennogo-koda). Он является центральной точкой проекта: описывает общую модель, текущее состояние и связывает частные концепты.

Сейчас проект находится на стадии **Idea**. Сформирована базовая теория чтения как восстановления информации по письменному коду. Зафиксированы информационные сущности, на которых строится обучение: объект и ситуация, понятие, изображение, устное слово, звучание, написанное слово, буквы и более крупные структурные части слова.

Ключевые составляющие теории:

- [Чтение — это распознавание слова и восстановление смысла, а не последовательное озвучивание букв](/concepts/chtenie-eto-raspoznavanie-slova-i-vosstanovlenie-smysla).
- [Письменное слово связывает несколько представлений одного и того же содержания](/concepts/pismennoe-slovo-svyazyvaet-neskolko-predstavleniy).
- [Обучение чтению должно идти от известных опор к неизвестному коду](/concepts/obuchenie-chteniyu-ot-izvestnyh-opor-k-neizvestnomu-kodu).
- [Устный словарь — база распознавания при обучении чтению](/concepts/ustnyy-slovar-baza-raspoznavaniya-pri-obuchenii-chteniyu).
- [Длинное слово должно раскрываться через знакомые структурные части](/concepts/dlinnoe-slovo-cherez-znakomye-strukturnye-chasti).
- [Подсказки должны постепенно исчезать по мере освоения связей](/concepts/podskazki-dolzhny-postepenno-ischezat).

Практическое направление — интерактивная система, в которой ребёнок начинает с узнаваемых объектов и слов, подтверждает их звучание, знакомится с написанием, обнаруживает повторяющиеся элементы письменного кода и затем применяет найденные соответствия для дешифровки новых слов.

Критический принцип: система не должна одновременно требовать освоения нескольких неизвестных уровней. Если ребёнок не знает понятие, устное слово, его звучание и буквы, такое слово плохо подходит как начальный материал. Следующее задание должно опираться на уже подтверждённые знания конкретного ребёнка.

Следующий этап проекта — превратить теорию в минимальную интерактивную механику и проверить главный критерий: способен ли ребёнок переносить освоенные соответствия на ранее не встречавшиеся слова, а не только запоминать показанные примеры.

Интерактивный проект обучения чтению как постепенной дешифровке письменного кода через уже знакомые ребёнку смыслы, изображения и звучащие слова.

учиться-легко.рф

Нужно описать и реализовать минимальный сценарий, который проверяет основную идею проекта, без построения полноценного курса.

Теоретическая основа: [главный концепт проекта](/concepts/uchitsya-legko-rf-obuchenie-chteniyu-kak-deshifrovke-pismennogo-koda) и [обучение от известных опор к неизвестному коду](/concepts/obuchenie-chteniyu-ot-izvestnyh-opor-k-neizvestnomu-kodu).

Минимальный цикл должен включать:

1. показ нескольких знакомых ребёнку изображений;
2. выбор ребёнком известного объекта;
3. воспроизведение звучащего слова и подтверждение узнавания;
4. показ написанного слова;
5. повторение этого цикла на нескольких словах с пересекающимися буквенными элементами;
6. задание, где часть опор убрана и ребёнок должен восстановить слово или выбрать соответствующее изображение;
7. финальное задание на ранее не показанное слово, которое можно расшифровать из уже освоенных соответствий.

Не включать в MVP предложения, длинные тексты, морфологию и сложную геймификацию. Главная задача — проверить сам механизм дешифровки.

Зафиксировать один короткий интерактивный цикл от знакомой картинки и звучания до распознавания нового написания.

Спроектировать минимальный учебный цикл MVP

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

Опора: [устный словарь как база распознавания](/concepts/ustnyy-slovar-baza-raspoznavaniya-pri-obuchenii-chteniyu) и [сеть представлений одного содержания](/concepts/pismennoe-slovo-svyazyvaet-neskolko-predstavleniy).

Для каждого слова нужны:

- понятное ребёнку значение;
- однозначно узнаваемое изображение;
- естественное произношение;
- написание;
- разметка букв/звуковых соответствий, которые оно позволяет показать;
- указание, какие новые слова можно затем попробовать расшифровать на основе уже изученных примеров.

Набор должен быть небольшим — достаточным для одного MVP-сценария. Слова должны быть знакомыми детям и пересекаться по буквам так, чтобы из нескольких известных пар можно было сделать новое декодирование. Не использовать редкие или сложные слова только ради удобного набора букв.

Собрать компактный учебный набор, на котором можно проверить перенос буквенных соответствий на новые слова.

Подобрать минимальный набор слов, изображений и звуков для MVP

MVP должен различать, что именно ребёнок уже знает, а не хранить только общий прогресс урока.

Основа: [письменное слово связывает несколько представлений одного содержания](/concepts/pismennoe-slovo-svyazyvaet-neskolko-predstavleniy) и [подсказки должны постепенно исчезать](/concepts/podskazki-dolzhny-postepenno-ischezat).

Для MVP достаточно минимальной модели состояния по каждому учебному слову/элементу, например:

- узнаёт изображение;
- узнаёт звучащее слово;
- связывает изображение и звучание;
- узнаёт написанное слово;
- знает отдельное буквенно-звуковое соответствие;
- смог применить его в новом слове.

Нужно определить простые правила, когда следующая подсказка убирается и какое задание показывается дальше. Не строить сложную адаптивную систему: достаточно нескольких прозрачных переходов, необходимых для проверки основной гипотезы.

Зафиксировать, какие связи система считает освоенными и когда может скрыть картинку, звук или написание.

Определить минимальную модель знаний ребёнка и правила снятия подсказок

Собрать простую веб-версию MVP на основе [главного концепта проекта](/concepts/uchitsya-legko-rf-obuchenie-chteniyu-kak-deshifrovke-pismennogo-koda).

Прототип должен уметь:

- показывать изображения;
- воспроизводить записанное произношение;
- показывать написание слова и отдельные его элементы;
- принимать выбор ребёнка;
- переключать задания в зависимости от простого состояния освоения;
- скрывать отдельные подсказки;
- выдавать хотя бы одно контрольное новое слово для проверки переноса;
- записывать ответы и время/порядок попыток в достаточном объёме для последующего анализа.

Не нужны аккаунты, платежи, сложная CMS, большой дизайн-системный слой или полноценная игровая механика. Ценность MVP — работающий эксперимент, а не готовый продукт.

Реализовать работающий интерактивный прототип, проходящий один полный учебный цикл без лишней платформенной инфраструктуры.

Собрать браузерный прототип минимального MVP

После появления рабочего прототипа провести небольшую первичную проверку на реальных детях.

Главный критерий следует из [концепта чтения как распознавания и восстановления смысла](/concepts/chtenie-eto-raspoznavanie-slova-i-vosstanovlenie-smysla): ребёнок должен не просто повторять знакомые ответы, а использовать освоенный код.

Минимально фиксировать:

- какие изображения и устные слова ребёнок знал до занятия;
- какие буквенно-звуковые связи были введены;
- насколько быстро ребёнок начал узнавать уже показанные написания;
- смог ли он расшифровать контрольное слово, которого раньше не видел в системе;
- смог ли связать результат с правильной картинкой/смыслом;
- где именно возникали ошибки: значение, звучание, буква, сборка слова или узнавание.

Не пытаться на первом тесте доказать эффективность всей методики статистически. Цель — понять, существует ли наблюдаемый эффект переноса и где ломается предполагаемая цепочка.

Проверить, помогает ли механизм ребёнку восстановить ранее не показанное слово, а не только запомнить изученные примеры.

Провести первичную проверку MVP на детях и зафиксировать перенос

## Цель

Добавить голосовой ответ ребёнка в упражнениях вида «Что изображено на картинке?». Браузер распознаёт короткое слово, приложение сравнивает распознанный текст с ожидаемым ответом.

Пример:

1. На экране изображена собака.
2. Ребёнок нажимает кнопку микрофона.
3. Говорит: «Собака».
4. Браузер возвращает текстовую гипотезу.
5. Приложение сравнивает её с ожидаемым словом.
6. Показывает результат и позволяет повторить попытку.

На первом этапе используем встроенный Web Speech API, без LLM и без собственного фонетического анализа.

---

## Основное API

В разных браузерах класс может называться по-разному:

```ts
const SpeechRecognitionClass =
  window.SpeechRecognition ||
  window.webkitSpeechRecognition

const recognition = new SpeechRecognitionClass()
```

Базовая настройка:

```ts
recognition.lang = 'ru-RU'
recognition.continuous = false
recognition.interimResults = false
recognition.maxAlternatives = 5
```

Основные параметры:

- `lang = 'ru-RU'` — русский язык;
- `continuous = false` — один короткий ответ, затем завершение;
- `interimResults = false` — использовать только финальный результат;
- `maxAlternatives = 5` — запросить несколько вариантов распознавания, если браузер их предоставляет.

---

## Получение результата

```ts
recognition.onresult = event => {
  const result = event.results[event.results.length - 1]

  const alternatives = Array.from(result).map(item => ({
    transcript: item.transcript,
    confidence: item.confidence,
  }))

  console.log(alternatives)
}
```

Пример результата:

```ts
[
  { transcript: 'собака', confidence: 0.91 },
  { transcript: 'сабака', confidence: 0.62 },
  { transcript: 'собачка', confidence: 0.41 },
]
```

`confidence` не гарантированно одинаково полезен во всех браузерах, поэтому основная логика должна опираться на текстовые гипотезы, а confidence использовать как дополнительный сигнал.

---

## Нормализация текста

Перед сравнением нужно привести строки к единому виду:

```ts
export const normalizeRecognizedText = (value: string) =>
  value
    .toLowerCase()
    .trim()
    .replace(/ё/g, 'е')
    .replace(/[^а-яa-z0-9\s-]/gi, '')
    .replace(/\s+/g, ' ')
```

Пример:

```ts
normalizeRecognizedText('  Собака! ')
// 'собака'
```

---

## Точное и приблизительное сравнение

Сначала проверяем точное совпадение:

```ts
const exact =
  normalizeRecognizedText(recognized) ===
  normalizeRecognizedText(expected)
```

Если точного совпадения нет, используем строковую близость. На первом этапе достаточно Levenshtein distance.

### Levenshtein

```ts
export const levenshteinDistance = (
  a: string,
  b: string,
): number => {
  const rows = a.length + 1
  const cols = b.length + 1

  const matrix = Array.from(
    { length: rows },
    () => Array<number>(cols).fill(0),
  )

  for (let i = 0; i < rows; i++) {
    matrix[i][0] = i
  }

  for (let j = 0; j < cols; j++) {
    matrix[0][j] = j
  }

  for (let i = 1; i < rows; i++) {
    for (let j = 1; j < cols; j++) {
      const cost = a[i - 1] === b[j - 1] ? 0 : 1

      matrix[i][j] = Math.min(
        matrix[i - 1][j] + 1,
        matrix[i][j - 1] + 1,
        matrix[i - 1][j - 1] + cost,
      )
    }
  }

  return matrix[a.length][b.length]
}
```

Нормализованный score:

```ts
export const wordSimilarity = (
  a: string,
  b: string,
): number => {
  const left = normalizeRecognizedText(a)
  const right = normalizeRecognizedText(b)

  const maxLength = Math.max(left.length, right.length)

  if (maxLength === 0) {
    return 1
  }

  return 1 - levenshteinDistance(left, right) / maxLength
}
```

Пример:

```ts
wordSimilarity('собака', 'сабака')
// ~0.83
```

Важно: это только строковое сравнение. Никакого собственного распознавания фонем здесь не делать.

---

## Выбор лучшей гипотезы

```ts
type RecognitionAlternative = {
  transcript: string
  confidence: number
}

export const findBestAlternative = (
  expected: string,
  alternatives: RecognitionAlternative[],
) => {
  return alternatives
    .map(item => ({
      ...item,
      normalized: normalizeRecognizedText(item.transcript),
      similarity: wordSimilarity(expected, item.transcript),
    }))
    .sort((a, b) => b.similarity - a.similarity)[0] ?? null
}
```

Использование:

```ts
const best = findBestAlternative('собака', alternatives)

if (best?.similarity === 1) {
  // точное совпадение
} else if (best && best.similarity >= 0.8) {
  // вероятно правильный ответ с небольшой ошибкой распознавания
} else {
  // ответ отличается заметно
}
```

Порог `0.8` здесь не считать истиной. Его нужно подобрать по реальным детским ответам.

---

## Полный минимальный helper распознавания

```ts
export const recognizeSingleWord = () =>
  new Promise<RecognitionAlternative[]>((resolve, reject) => {
    const SpeechRecognitionClass =
      window.SpeechRecognition ||
      window.webkitSpeechRecognition

    if (!SpeechRecognitionClass) {
      reject(new Error('SpeechRecognition is not supported'))
      return
    }

    const recognition = new SpeechRecognitionClass()

    recognition.lang = 'ru-RU'
    recognition.continuous = false
    recognition.interimResults = false
    recognition.maxAlternatives = 5

    recognition.onresult = event => {
      const result = event.results[event.results.length - 1]

      const alternatives = Array.from(result).map(item => ({
        transcript: item.transcript,
        confidence: item.confidence,
      }))

      resolve(alternatives)
    }

    recognition.onerror = event => {
      reject(new Error(event.error))
    }

    recognition.onnomatch = () => {
      resolve([])
    }

    recognition.start()
  })
```

---

## Состояния UI

Минимальная state machine:

```ts
type RecognitionState =
  | 'idle'
  | 'listening'
  | 'processing'
  | 'correct'
  | 'almost-correct'
  | 'incorrect'
  | 'no-match'
  | 'error'
```

Пример логики:

```ts
setState('listening')

try {
  const alternatives = await recognizeSingleWord()
  setState('processing')

  const best = findBestAlternative(expectedWord, alternatives)

  if (!best) {
    setState('no-match')
  } else if (best.similarity === 1) {
    setState('correct')
  } else if (best.similarity >= threshold) {
    setState('almost-correct')
  } else {
    setState('incorrect')
  }
} catch {
  setState('error')
}
```

---

## Важные ограничения

- `SpeechRecognition` поддерживается браузерами неравномерно;
- в некоторых реализациях распознавание может выполняться внешним сервисом браузера/ОС;
- доступ к микрофону требует разрешения пользователя;
- `maxAlternatives` не гарантирует, что браузер всегда вернёт ровно указанное количество вариантов;
- `confidence` зависит от реализации и не должен быть единственным критерием;
- маленькие слова особенно чувствительны к одной ошибке, поэтому threshold должен учитывать длину слова;
- не пытаться поверх этого строить собственное распознавание фонем: используем готовый ASR и сравниваем только его текстовые гипотезы.

## Критерий готовности

Для задания с картинкой приложение умеет по нажатию кнопки принять одно короткое русское слово, получить несколько текстовых гипотез, нормализовать их, выбрать наиболее близкую к ожидаемому слову и вернуть понятный результат: точное совпадение / близкий ответ / другой ответ / не распознано / ошибка.

Распознавать короткий голосовой ответ ребёнка через Web Speech API в заданиях вида «Что изображено на картинке?».

Добавить браузерное распознавание отдельных слов по ответу ребёнка

## Контекст

Связанная задача к браузерной озвучке `cmu326hnm0bbpqw0qh5fgsv2f`.

Эксперименты показали, что `SpeechSynthesisUtterance` приемлемо произносит многие целые слова, но плохо и непредсказуемо работает с отдельными буквами, короткими слогами и искусственно вырезанными частями слов.

Наблюдаемые примеры:

- `Собака` — нормально;
- `Со` — звучит примерно как `С`;
- `Р` — ближе к `Э`;
- `Ры` — нормально;
- `Свинь` — может разваливаться на чтение названий букв;
- `Пель` — нормально;
- `Ковь`, `Солн` — могут читаться по буквам;
- `Ко` → примерно `Ка`;
- `Ар` → примерно `А`;
- `Ре` → примерно `Э`;
- `Де` → `Дэ`.

Вывод: браузерный TTS нельзя считать надёжным источником педагогически корректного произношения для механики `буква → слог → слово`.

---

## Цель

Собрать собственный управляемый TTS-пайплайн, через который заранее генерировать и проверять учебное аудио.

Основная идея:

```text
контент карточки
↓
буквы / слоги / слова
↓
контролируемый TTS
↓
ручная/автоматическая проверка
↓
готовые аудиофайлы
↓
приложение только воспроизводит заранее подготовленный звук
```

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

---

## Что нужно генерировать

Минимум:

- отдельные буквы, где это педагогически уместно;
- учебные слоги;
- отдельные слова к карточкам с картинками;
- при необходимости короткие инструкции/реплики персонажей.

Особенно важно заранее генерировать все слоги и слова, которые реально используются в статическом учебном контенте.

Не нужен универсальный генератор всех возможных комбинаций русского языка. Генерируем только тот словарь, который реально входит в приложение.

---

## Требования к TTS

Нужен движок/сервис, где можно лучше контролировать произношение, чем в браузерном `SpeechSynthesis`.

Желательные возможности:

- стабильный голос между генерациями;
- контроль языка `ru-RU`;
- контроль `rate`;
- контроль `pitch`, если поддерживается;
- SSML или аналогичный механизм управления произношением;
- возможность задавать паузы;
- возможность влиять на чтение отдельных букв/слогов;
- экспорт результата в WAV/MP3/OGG;
- воспроизводимый результат при пакетной генерации.

Если конкретный TTS плохо читает отдельный слог, должна быть возможность задавать специальную TTS-строку отдельно от отображаемого текста.

Например:

```ts
type PronunciationAsset = {
  text: string
  ttsText?: string
  audioSrc: string
}
```

где:

```ts
{
  text: 'КО',
  ttsText: '<специальная строка/SSML для нужного произношения>',
  audioSrc: '/audio/syllables/ko.mp3',
}
```

---

## Пайплайн контента

Предусмотреть реестр генерируемых единиц:

```ts
type TtsSourceItem = {
  id: string
  text: string
  kind: 'letter' | 'syllable' | 'word'
  ttsText?: string
  voiceId?: string
  rate?: number
  pitch?: number
}
```

Пример:

```ts
const items: TtsSourceItem[] = [
  {
    id: 'word-dog',
    text: 'СОБАКА',
    kind: 'word',
  },
  {
    id: 'syllable-so',
    text: 'СО',
    kind: 'syllable',
    ttsText: '...',
  },
  {
    id: 'letter-r',
    text: 'Р',
    kind: 'letter',
    ttsText: '...',
  },
]
```

Дальше отдельный script/build-step:

```text
items
→ TTS API
→ audio files
→ manifest
```

---

## Manifest готового аудио

После генерации приложение должно работать уже не с TTS, а с готовыми asset'ами.

Например:

```ts
type AudioAsset = {
  id: string
  text: string
  kind: 'letter' | 'syllable' | 'word'
  src: string
}
```

```ts
export const audioAssets: AudioAsset[] = [
  {
    id: 'word-dog',
    text: 'СОБАКА',
    kind: 'word',
    src: '/audio/words/sobaka.mp3',
  },
  {
    id: 'syllable-so',
    text: 'СО',
    kind: 'syllable',
    src: '/audio/syllables/so.mp3',
  },
]
```

В UI:

```ts
const audio = new Audio(asset.src)
audio.play()
```

---

## Важная архитектурная идея

Разделить три слоя:

```text
Display text
≠
TTS input
≠
Generated audio asset
```

Это позволит показывать ребёнку `СО`, но отправлять в TTS другую техническую строку/SSML, если только так удаётся получить правильное произношение.

То есть не делать предположение:

```text
что написано на экране
=
что нужно буквально передать TTS
```

---

## Проверка качества

Для каждой единицы нужен простой статус проверки:

```ts
type AudioReviewStatus =
  | 'generated'
  | 'approved'
  | 'rejected'
```

Минимальный workflow:

1. сгенерировать пачку;
2. прослушать;
3. отметить плохие варианты;
4. подобрать `ttsText` / voice / параметры;
5. перегенерировать только отклонённые;
6. после `approved` использовать asset в приложении.

Особенно внимательно проверять:

- отдельные согласные;
- двухбуквенные слоги;
- слоги с `ь`/`ъ`;
- обрезанные части слов;
- сочетания, которые TTS может принять за аббревиатуры.

---

## Связь с персонажами

Система голосовых персонажей может использовать тот же пайплайн.

Если персонажи должны отличаться голосом/темпом/высотой, для каждого персонажа можно либо:

- генерировать отдельный комплект asset'ов;
- либо использовать персонажей только для некритичных реплик, а учебные буквы/слоги оставить в одном эталонном голосе.

Это нужно решить отдельно после оценки объёма generated assets.

---

## Первый практический этап

Не выбирать сразу окончательный TTS.

Сначала сравнить несколько кандидатов на коротком тестовом наборе проблемных строк:

```text
Р
СО
РЫ
РЕ
ДЕ
КО
АР
СВИНЬ
ПЕЛЬ
КОВЬ
СОЛН
СОБАКА
СВИНЬЯ
```

Для каждого кандидата оценить:

- корректность произношения;
- стабильность;
- наличие SSML/phoneme hints;
- качество русского голоса;
- возможность пакетной генерации;
- стоимость;
- лицензионные ограничения;
- удобство сохранения результата в аудиофайлы.

После этого выбрать основной TTS и уже строить production pipeline.

## Критерий готовности

Есть воспроизводимый процесс, который из статического списка учебных букв/слогов/слов генерирует проверенные аудиофайлы, сохраняет их как assets приложения и позволяет отдельно переопределять техническую TTS-строку для проблемных случаев.

Настроить собственный контролируемый TTS-процесс и заранее генерировать аудио для букв, слогов и слов вместо зависимости от непредсказуемого браузерного SpeechSynthesis.