AI Pages: Коллекция интерактивных HTML-примеров 🤖

March 12, 2026 · View on GitHub

Превращаем идеи в код за минуты, а не дни

GitHub Pages License Tests

🚀 О проекте

AI Pages - это комплексная веб-платформа, предоставляющая разработчикам коллекцию интерактивных HTML-примеров на различные темы. Каждая страница представляет собой самодостаточное приложение со встроенными CSS и JavaScript, готовое к использованию прямо в браузере.

✨ Особенности

  • 🎮 20+ интерактивных приложений - от игр до инструментов разработки
  • 🌐 Самодостаточная архитектура - каждый HTML файл содержит все необходимые ресурсы
  • 🎯 Образовательная ценность - подробные комментарии и лучшие практики
  • 🌍 Мультиязычность - поддержка русского и английского языков
  • 🌙 Темная/светлая тема - адаптация под предпочтения пользователя
  • 📱 Адаптивный дизайн - работает на всех устройствах

🎯 Категории приложений

🛠️ Инструменты разработки

  • Python Editor - интерактивный редактор с поддержкой библиотек
  • Gradio Lite - создание ML интерфейсов
  • Web Stable Diffusion - генерация изображений с ИИ
  • WebLLM Chat - локальный ChatGPT с приватностью

🎮 Игры и развлечения

  • Tetris (Vanilla JS + React версии)
  • Арканоид с неоновыми эффектами
  • Сапер с несколькими уровнями
  • Морской бой (классический + аркадный)
  • Змейка с прогрессивной сложностью

🌐 Веб-приложения

  • Новостное приложение на React
  • Каталог профессий с поиском
  • Карта осадков с геоданными

🎨 3D и графика

  • 3D Balls - физическая симуляция
  • MP3 Визуализатор - аудио анализ в реальном времени
  • Liquid Simulation - симуляция жидкости

🚀 Быстрый старт

  1. Откройте главную страницу: index.html
  2. Выберите интересующий инструмент из каталога
  3. Начните экспериментировать - всё работает в браузере!

Локальный запуск

# Клонируйте репозиторий
git clone https://github.com/w111/AI-Pages.git
cd AI-Pages

# Запустите локальный сервер
python -m http.server 8000
# или
npx serve .

# Откройте в браузере
open http://localhost:8000

🛠️ Технологии

  • Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
  • 3D графика: Three.js
  • Python в браузере: Pyodide
  • Карты: OpenLayers
  • ML интерфейсы: Gradio Lite
  • Тестирование: Playwright, pytest
  • CI/CD: GitHub Actions
  • Хостинг: GitHub Pages
  • Free API https://github.com/public-apis/public-apis

📚 Документация

🤝 Участие в разработке

Мы приветствуем вклад сообщества! Подробнее в архитектурной документации.

🚀 Быстрый старт для разработчиков

# 1. Клонирование и установка
git clone <repo-url> && cd AI-Pages
npm install  # Автоматически настроит pre-commit hooks

# 2. Проверка среды (точная копия CI)
./scripts/ci-local.sh

# 3. Разработка с автопроверкой
git add . && git commit -m "fix: feature"  # ← Автоматическая проверка!

Как добавить новое приложение

  1. Создайте самодостаточный HTML файл
  2. Добавьте подробные комментарии
  3. Обновите главную страницу (index.html)
  4. Добавьте тесты
  5. Создайте Pull Request

🧪 Тестирование и качество

# Полная проверка как в CI/CD
./scripts/ci-local.sh

# Отдельные проверки
npm run lint               # Все линтеры
npm test                   # Python тесты (основные)
npm run test:e2e          # Playwright E2E тесты
npm run lint:js:ci        # JavaScript как в GitHub Actions

🪝 Pre-commit hooks: Автоматическая проверка качества перед каждым коммитом.

Подробнее в архитектурной документации → раздел CI/CD.

📄 Лицензия

Этот проект распространяется под лицензией MIT. См. файл LICENSE для подробностей.

🤝 Участие в проекте

Как помочь:

  • 🐛 Баги: GitHub Issues с описанием и шагами
  • 💡 Идеи: Issues с меткой enhancement
  • 🚀 Новые приложения: Самодостаточные HTML с тестами
  • 📝 Документация: Улучшения и переводы

Процесс:

git clone https://github.com/w111/AI-Pages.git
cd AI-Pages && npm install && pip install -r requirements.txt
git checkout -b feature/your-feature
# Разработка + тесты
# Pull Request с описанием

Quality Gates: Линтинг → E2E тесты → Security → Performance → Deploy

🌟 Поддержка проекта

  • ⭐ Поставьте звездочку на GitHub
  • 🤝 Внесите свой вклад через Pull Request

📞 Контакты

AI Pages - это не просто коллекция примеров, это платформа для изучения и экспериментов с современными веб-технологиями! 🚀