Как мы создавали HTML-лекцию по линейной алгебре с помощью ИИ и перепроверяли ее

Привет!

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

Весьма привлекательным кажется то, что можно работать лишь с содержательной частью, а рутину поручить роботу. Но каждый раз возникает проблема контроля за ним. Которую пытались решить как могли. Ценные уроки отсюда могут быть использованы читателем для создания собственных HTML-лекций: если передать текст этой статьи в ИИ, то он работает гораздо качественнее при решении такой задачи, хотя далеко не идеально.

Материалы к статье: прежняя HTML-лекция, новая лекция «Линейный оператор и его матрица — с нуля» и архив нового запуска Gauntlet Loop. В архиве — три версии HTML, бриф, учебный маршрут, замечания проверяющих, скрипты проверок и снимки экрана; метапромпт и готовые задания приведены ниже в спойлерах. Для просмотра HTML скачайте файл и откройте его в браузере.

Опыт создания лекции по линейной алгебре.

Для создания HTML-лекций с помощью ИИ проделывалась огромная предварительная работа. На первом этапе были ИИ-черновики, которые были созданы из материалов учебников по заранее написанным планам. Затем был черновик курса лекций, написанный человеком в текстовом формате. После было преподавание первых 4 лекций, семинары, обратная связь от студентов, и накапливание контекста.

Затем весь набранный контекст отдали передовой модели ИИ (GPT-6 Astra на усилии Ultra) и сделали черновые варианты презентаций. Первые 2 варианта забракованы и к ним написаны были комментарии, после которых ИИ переделывал. Наконец третий вариант отправили лектору вместе со всем контекстом.

Лектор использовал известный подход Gauntlet Loop, который позволяет с одного промпта написать, например, целую компьютерную игру. Суть этого подхода в том, что ИИ создает рой агентов (критиков и исполнителей), которые делят между собой контекст и полируют материал до достижения высокого уровня качества за множество проходов. На это тратится много токенов, но считается, что оно того стоит.

ИИ работал больше 5 часов над созданием презентации на основе этого промпта и выдал прекрасную HTML-лекцию .

В таком виде и преподавали, и даже не заметили ошибок.

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

Галлюцинации до конца не устраняются самим ИИ без помощи человека

Часто можно слышать о том, что галлюцинации ИИ — вопрос решенный. Будто бы достаточно контроля ИИ за самим собой (например, разными агентами с разным контекстом), и галлюцинации полностью вычищаются. Но оказалось даже на таком простом примере, как создание презентации для лекции — это совсем не так. И можно потратить огромное количество проходов на самой лучшей модели, и токенов, провести огромное число тестов, и всё равно это не может работать идеально без прямого участия и контроля человеком.

Чтобы понять, как лучше контролировать ошибки ИИ, мы решили подробно проанализировать ошибки в уже сделанной презентации. Оказалось, этих ошибок там очень много, хотя они едва заметны. Ограничусь разбором трех тем: смена базиса, порядка композиции и односторонней обратимости. В них везде есть ошибки, и их анализ помогает сформулировать требования к учебной демонстрации.

1. Базис меняется, оператор остаётся тем же

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

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

Начнём с растяжения по горизонтали в два раза. В стандартном базисе его матрица и выбранный вектор имеют вид:

Теперь введём семейство базисов:

Столбцы матрицы — новые базисные векторы в старых координатах. Поэтому она переводит новые координаты в старые: . При базисы совпадают, а при увеличении второй базисный вектор наклоняется вправо. Определитель равен единице, поэтому базис не вырождается при любом значении ползунка.

Исходное положение. Стандартный и выбранный базисы совпадают.

Переход к новым координатам даёт:

А матрица того же оператора в новом базисе равна:

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

Положение стрелок прежнее. Другими стали числа, которыми мы их описываем.

Такую демонстрацию удобно проверять по двум равенствам:

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

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

Короткая проверка вычислений

Ниже — отдельный тест формул этого примера на пяти положениях ползунка.

from fractions import Fraction as F


def mv(matrix, vector):
    return tuple(sum(a * b for a, b in zip(row, vector))
                 for row in matrix)


def mm(left, right):
    columns = tuple(zip(*right))
    return tuple(tuple(sum(a * b for a, b in zip(row, column))
                       for column in columns)
                 for row in left)


A_e = ((2, 0), (0, 1))
x_e = (3, 2)

for s in map(F, (0, F(1, 4), F(1, 2), F(3, 4), 1)):
    S = ((1, s), (0, 1))
    S_inv = ((1, -s), (0, 1))
    A_b = mm(mm(S_inv, A_e), S)
    x_b = mv(S_inv, x_e)

    assert A_b == ((2, s), (0, 1))
    assert x_b == (3 - 2 * s, 2)
    assert mv(A_b, x_b) == (6 - 2 * s, 2)
    assert mv(S, x_b) == x_e
    assert mv(S, mv(A_b, x_b)) == mv(A_e, x_e)

print("Проверены 5 положений ползунка")

После демонстрации я бы дал студенту другой вектор: в стандартном базисе. Пусть он сначала предскажет новые координаты при , затем координаты образа и только после этого проверит их по формулам. Ответ: и в новом базисе. В стандартных координатах образ по-прежнему равен .

Эта задача отделяет понимание перехода между базисами от запоминания пары чисел на слайде.

2. Откуда берётся порядок BA

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

Если сначала действует , а затем , результат записывается как . Для вектора цепочка такая:

При обратном порядке получается . Промежуточные значения здесь случайно совпали, а конечные — уже нет. Это полезный пример для проверки интерфейса: одного промежуточного кадра недостаточно, нужно проследить действие до конца.

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

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

Для проверки понимания достаточно попросить студента найти второй столбец без правила «строка на столбец». Сначала оставляет второй базисный вектор на месте, затем переводит его в . Именно этот столбец и стоит в произведении.

На уровне реализации у такой демонстрации появляются вполне конкретные требования. Подписи должны однозначно задавать порядок действий. Точка, её промежуточный образ и конечный образ должны соответствовать выбранным матрицам. После возврата на первый шаг должны сбрасываться и подсветка, и численные значения. Каждое из этих условий можно проверить отдельно от впечатления «анимация выглядит хорошо».

3. Нулевое ядро ещё не обещает обратную матрицу

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

Рассмотрим:

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

Введём проекцию на первые две координаты:

Если сначала применить , а затем , исходная пара восстановится: . В обратном порядке получаем:

Например, точка после превращается в , а после — в . Она вообще не могла прийти из исходной плоскости при действии .

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

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

Вопрос студенту: «Можно ли восстановить пару по точке ? А по точке ?» Первая лежит в образе и соответствует паре . Вторая в образ не входит. Проекция даст для неё ту же пару, но повторное применение вернёт другую точку пространства.

Как превратить разбор в требования к проверке

Фраза «проверь лекцию на понятность» оставляет слишком много места для формального одобрения. Для этих трёх фрагментов я бы сформулировал проверку так:

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

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

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

От метапромпта к заданию для прежней лекции

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

Два следующих промпта приведены в исходном виде. Требования превзойти эталон и повторять цикл до победы выражают цель задания. Они не подтверждают преимущества метода или использованных инструментов: результаты проверок разобраны отдельно.

Чтобы воспользоваться им:

1. Замените [GOAL] конкретным результатом. В прежнем запуске это была пятая лекция о линейных операторах с интерактивными примерами, рассчитанная на занятие с работой у доски.

2. В [OPTIONAL REFERENCES] перечислите доступные материалы и критерии качества. У нас это были конспект и HTML третьей лекции. Сами файлы нужно приложить или предоставить агенту доступ к ним: одного упоминания недостаточно.

3. Отправьте заполненный метапромпт ИИ. Прочитайте получившееся задание, уточните математические проверки и условие остановки. Затем передайте это задание вместе с материалами агенту, который будет собирать результат.

I want to run a Gauntlet Loop for this goal:

[GOAL]

Possible references or quality bars:

[OPTIONAL REFERENCES]

Choose the strongest concrete bar that an agent can actually inspect and compare its work against. If I have not supplied one, propose a useful comp or measurement that plays the same role for this task that real Call of Duty screenshots played for Matt Shumer's Claude of Duty game (read the prompt: https://github.com/mshumer/Claude-of-Duty/blob/main/prompt.md). Explain the bar in one sentence.

Then write a short prompt for Claude Code or Codex in the style of Matt's prompt (minimal is better here, we want the agent to decide the specifics!).

Give the lead agent the goal and the bar, but let it choose the approach. Tell it to divide the goal into the smallest pieces that can be improved and judged independently. For each important piece, it should fan out a builder and a separate critic with fresh context.

Each critic must inspect the real output, compare it directly with the bar—using a blind A/B comparison when possible—identify the biggest remaining gap, and send it back for another round. Keep looping until our output wins or I stop the run.

Have the lead agent maintain a simple live progress page that shows the work evolving over time.

Have it use subagents and ultracode. Do not prescribe the architecture, exact decomposition, or a fixed number of rounds. Keep the final prompt short, just like Matt's.

Названия subagents и ultracode оставлены из исходного шаблона; эту строку нужно согласовать с возможностями выбранной среды. Перед повторением задайте перечень обязательных проверок, критерий приёмки и предел времени или расходов.

Для прежней лекции общее условие можно конкретизировать так: «При смене базиса восстанови исходный вектор и его образ из новых координат; для композиции проверь оба порядка на одном векторе; для отображения 2 → 3 проверь обе композиции с предполагаемым обратным».

Готовый запрос для пятой лекции

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

Сделай готовую пятую лекцию в /Users/ioseledets/teaching/algebra-1, чтобы толковые ребята прочувствовали линейные операторы, выбор базиса, матричные представления и связь композиции с умножением матриц. Рассмотри размерности 1, 2, 3 и отображения 2→3. Геометрическая история: одно правило преобразует каждую точку, поэтому преобразуется круг, квадрат или другое множество; нужны работающие динамические демки с ползунками. Рассчитывай на 95 минут с вопросами и существенной работой преподавателя у доски.

Эталон — реальные HTML-слайды третьей лекции про определитель 3×3 и её анимация. Пятая должна превзойти их по понятности и наглядности, сохранив математическую строгость конспекта.

Сам выбери подход. Раздели цель на мельчайшие части, которые можно независимо улучшать и оценивать. Для каждой важной части запусти отдельного builder и независимого critic со свежим контекстом. Критик обязан открыть реальный результат, посмотреть отрисованные слайды, поработать с демками и напрямую сравнить с эталоном, по возможности через слепое A/B. Проверяй также, сможет ли читатель объяснить действие и предсказать результат нового примера. Возвращай builder самый большой оставшийся пробел и повторяй цикл.

Веди простую живую страницу прогресса с версиями, реальными результатами сравнений и текущими пробелами. Проверь также собранную лекцию целиком. Продолжай, пока результат не выиграет у эталона или я не остановлю работу. Fan out subagents and ultracode.

Создание новой лекции.

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

Работу организовали как цикл «сборка → проверка результата → исправление → повторная проверка» — Gauntlet Loop. Исполнитель собирал HTML, отдельные проверяющие разбирали математику и последовательность объяснения, а координатор проверял управление и отображение в браузере.

Ниже покажу весь путь: постановку задачи, учебный маршрут, первую сборку, найденные ошибки и повторные проверки. Сохранились три HTML-версии и два цикла обратной связи; версии, замечания и результаты проверок собраны в архиве материалов нового запуска. По ним можно проследить, что изменилось после замечаний и какие новые дефекты обнаружились при проверке исправлений. Для повторения процесса приведу сводный промпт и условия приёмки.

Например, в первой версии новой HTML-лекции произведение 0,5 × 0,25 вычислялось правильно, но на экране появлялось 0,13 вместо 0,125. В другом месте ученику предлагалось предсказать результат, на который уже показывала стрелка. Такие ошибки легко пропустить, если оценивать только формулы или общее впечатление от слайдов.

Новая лекция от школьных векторов к матрицам

Здесь пришлось начать раньше, чем в пятой лекции: восстановить смысл координат, сложения и умножения вектора на число, объяснить слово «образ». Затем вывести действие линейного оператора по образам двух единичных векторов и только после этого собрать матрицу из столбцов.

Цель — объяснить переход от двух законов линейности к формуле

Читатель должен понимать, откуда взялись коэффициенты и , почему образы и становятся столбцами матрицы и как именно используется условие линейности.

Процесс создания учебного материала

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

Создай автономную интерактивную HTML-лекцию на русском «Линейный оператор и его матрица — с нуля». Аудитория знает школьные векторы. Ориентир — 28–34 слайда и план занятия на 60–90 минут с вопросами. Это план, а не измеренная длительность.

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

Вводи понятия до использования. Сначала восстанови координаты, сложение, отрицательные и дробные множители, разложение по двум единичным векторам и запись вектора столбцом. Затем объясни преобразование и образ, сформулируй оба свойства линейности со словами «для любых» и выведи A(xe₁ + ye₂) = xA(e₁) + yA(e₂), пояснив основание каждого перехода. Матрицу вводи как запись двух образов; умножение на вектор выведи из комбинации столбцов. Включи перенос, нелинейный пример, проекцию, нулевой оператор и задания на новых числах. Не перегружай основной маршрут определителем, рангом, ядром, обратимостью, композицией и сменой базиса. Короткое дополнение о базисе допустимо после основной цели.

Организуй Gauntlet Loop. Автор учебного маршрута готовит последовательность и задания. Отдельный математический проверяющий заранее составляет эталоны и контрпримеры. Исполнитель собирает HTML. Педагогический критик проверяет готовый материал с позиции заявленной аудитории: достаточно ли введённых понятий, есть ли основания у переходов и можно ли самостоятельно решить новый пример. Критики должны проверять фактические версии, а не пересказ исполнителя.

Оформи лекцию на белом фоне с крупным текстом и координатными SVG-рисунками рядом с вычислениями. Все стили, рисунки и код включи в один файл, без внешних библиотек, шрифтов и сетевых запросов. Предусмотри изменение параметров, численные результаты, сброс и минимум два проверяемых состояния каждого демо. Цвет дополняй подписями. Масштабы осей должны совпадать, подписи — оставаться читаемыми при допустимых значениях.

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

Координатор открывает реальный HTML в браузере, проверяет управление, сброс, раскрытия, шаги и крайние состояния, сохраняет настоящие снимки для критиков. Отдельно проверяй вычисления по независимым эталонам. Различай проверку JavaScript вне браузера, визуальный осмотр и реальные действия в интерфейсе.

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

Завершай, когда закрыты найденные существенные ошибки в математике и необходимых предпосылках, основные демо согласованы с эталонами, а управление и читаемость проверены в браузере. Если что-то осталось непроверенным или неисправленным, перечисли это в итоговом отчёте. Не объявляй победу над эталоном, улучшение усвоения или экономию времени без соответствующих измерений. Не выдумывай итерации и результаты обучения.

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

Что происходило в проходах агентами по лекции

После подготовки маршрута и математических эталонов агент-исполнитель собрал первую HTML-версию. Математический проверяющий прочитал все 32 слайда и запустил вычислительный код отдельно от браузера. Агент педагогический критик изучил HTML и реальные снимки, которые агент-координатор получал, делая скриншоты экрана.

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

Точное вычисление превращалось в неточную подпись.

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

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

Вопрос предлагал предсказать уже показанный ответ.

На одних слайдах решение было закрыто, но стрелка оставалась на рисунке.

На других результат можно было увидеть на подписи или в готовом равенстве.

На слайде с выводом умножения матрицы на вектор сразу стояла вся цепочка вычислений.

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

Вместе с ответом оказалось спрятано условие.

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

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

После этих изменений получилась вторая версия.

Повторная проверка обнаружила уже последствия правок: одно раскрытие открывалось пустым, а подпись, перенесённая внутрь рисунка, накладывалась на соседнюю.

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

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

Для подписей повторно осмотрели обычное, нулевое и крайнее состояния.

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

В необязательном разделе о базисе дописали ещё одно обоснование.

Подстановка найденных координат подтверждала существование разложения, но сама по себе не объясняла единственность.

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

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

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

Что получилось и что подтверждают проверки

Финальная лекция содержит 30 основных слайдов и 2 необязательных о выборе базиса, 14 геометрических демонстраций с изменяемыми параметрами и 2 пошаговых вывода.

Первый вывод связывает линейность с действием по двум образам, второй — эту формулу с умножением матрицы на вектор.

Итоговый автоматический прогон дал 383 успешные проверки вычислений, состояний рендереров и текстовых условий.

Во время браузерной проверки в Edge переключили по две предустановки каждого из 14 демо — 28 состояний. Проверяли сбросы, шаги обоих выводов, раскрытия, режим всех слайдов, заметки, сохранение введённых значений при переходах и клавиатуру внутри числового поля. В просмотренных состояниях ошибок JavaScript в журнале браузера обнаружено не было.

Новая HTML-презентация: «Линейный оператор и его матрица — с нуля»

Итак, можете посмотреть, что получилось. Вычитка человеком теперь не нашла ошибок.

Но может быть найдете вы?