Проект представляет собой веб-приложение для работы с флеш-картами, использующее современные технологии искусственного интеллекта для анализа и объяснения правильных ответов на вопросы. В частности, интегрирована модель Google Gemini (через библиотеку @google/genai), которая позволяет генерировать объяснения к каждому вопросу, на который пользователь ответил неправильно.
- Клонируйте репозиторий
git clone https://github.com/1oneegame/Flashcards - Установите зависимости
npm install - Настройте переменные окружения
Создайте файл
.env.localв корне проекта и добавьте в него ваш API-ключ от Google Gemini:NEXT_PUBLIC_API_KEY = 'API_KEY'API-ключ можно получить в Google Cloud Console, подключив API Gemini. - Запустите проект в режиме разработки
npm run dev
-
Определение функционала и выбор ИИ
Первым делом, я определил функционал приложения: работа с флеш-картами с последующим анализом правильных ответов с помощью ИИ, а также тестовая платформа по выбранной тематике на главной странице. Также я заранее продумал, какую модель ИИ буду использовать в будущем для данного приложения. -
Проектирование и верстка интерфейса
Далее, я сверстал дизайн страницы с тестовой системой. -
Интеграция с OpenTBD API
Позже, я изучил приложенную документацию к OpenTBD API и реализовал первую версию бэкенда для получения 10 вопросов (multiple choice и true-false) и ответов по категории General Knowledge. -
Реализация главной страницы и системы выбора категории
После этого, я добавил главную страницу с категориями тестов и подключил систему выбора категории для тестовой системы на главной странице. Вопросы с OpenTBD API загружаются в зависимости от выбранной категории. -
Разработка страницы флеш-карточек
Далее, я добавил страницу для флеш-карточек, на которой загружается один вопрос с помощью того же OpenTBD API. -
Создание страницы профиля и системы прогресса
Затем, я добавил страницу профиля, на которой сохраняется прогресс из раздела флеш-карт, а именно: количество правильных ответов, общее количество вопросов и карточки, на которые пользователь ответил неправильно. -
Интеграция ИИ-модели Gemini 2.0 Flash
После этого, я внедрил ИИ-модель Gemini 2.0 Flash в приложение для анализа карточек, на которые пользователь ответил неправильно, из профиля.
-
Интеграция искусственного интеллекта для объяснения ответов
В приложении используется ИИ-модель Gemini 2.0 Flash для генерации объяснений к вопросам, на которые пользователь ответил неправильно. Это помогает глубже понять материал и способствует более эффективному обучению. -
Динамическая загрузка контента на основе выбранной категории
Вопросы и флеш-карточки подгружаются с помощью OpenTBD API в зависимости от выбранной пользователем категории. Такой подход обеспечивает разнообразие контента. -
Разбиение приложения на компоненты
Архитектура построена на принципах модульности: каждая страница и функциональный блок реализованы как отдельные компоненты. Это облегчает поддержку, тестирование и масштабирование приложения. -
Адаптивная верстка
Интерфейс приложения разработан с учетом адаптивности, что обеспечивает корректное отображение и удобство использования на различных устройствах — от мобильных телефонов до настольных компьютеров.
-
Хранение данных без авторизации на клиенте
Из-за отсутствия собственной базы данных и системы авторизации, прогресс пользователя и результаты работы с флеш-карточками сохраняются локально в браузере. Такой подход упростил архитектуру и ускорил разработку, но ограничил возможности синхронизации данных между устройствами и долговременного хранения информации. -
Обработка запросов с учётом небольшого опыта в бэкенде
При реализации взаимодействия с внешними API и обработке данных на сервере приходилось учитывать ограниченный опыт в бэкенд-разработке. Это повлияло на выбор более простых решений и отказ от сложных серверных логик. -
Реализация анимации переворота карточки
Из-за отсутствия опыта в создании сложных анимаций, анимация переворота флеш-карточки была реализована максимально просто.
-
Повторение вопросов во флеш-карточках
Иногда при работе с флеш-карточками пользователю могут попадаться одни и те же вопросы несколько раз подряд. Это связано с тем, что вопросы загружаются случайным образом из внешнего API без дополнительной проверки на уникальность уже показанных вопросов. Не используется полный функционал API. -
Вопрос может не успеть прогрузиться
В некоторых случаях при переходе на страницу с флеш-карточкой или тестом вопрос может не успеть загрузиться из-за задержки ответа от внешнего API. Это приводит к тому, что пользователь видит неопределенную карточку или сообщение о загрузке дольше обычного.
-
Next.js
Был выбран как основной фреймворк для фронтенда, так как он сочетает в себе удобство разработки на React и возможности серверного рендеринга. Это обеспечивает быструю загрузку страниц, хорошую SEO-оптимизацию и простоту масштабирования приложения. -
TypeScript
Использование TypeScript позволяет повысить надежность и читаемость кода за счёт статической типизации. -
@google/genai (Google Gemini API)
Для генерации объяснений к ответам выбран облачный ИИ-сервис от Google, так как он предоставляет современные модели, легко интегрируется через официальный SDK и не требует самостоятельного обучения или поддержки моделей на сервере. -
OpenTBD API
Этот внешний API был выбран для получения тестовых вопросов и ответов, что позволило быстро реализовать основной функционал приложения без необходимости создавать и наполнять собственную базу данных. -
Хостинг на Vercel
В качестве платформы для размещения приложения выбран Vercel, так как он идеально интегрируется с Next.js, обеспечивает автоматический деплой из репозитория, быструю доставку контента по всему миру и простое масштабирование без необходимости ручной настройки серверов.