🌌 HackNU AI Workspace

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

Специально разработано в рамках хакатона HackNU 2026.

---

🎯 Какую проблему мы решаем?

В современном мире креативные и технические команды вынуждены использовать зоопарк разрозненных инструментов:

1. Видеозвонки (Zoom / Google Meet / Discord)
2. Доски для мозгового штурма (Miro / Figma / FigJam)
3. ИИ-ассистенты для написания кода или текстов (ChatGPT / Claude / Gemini)
4. Генераторы изображений и видео по описанию (Midjourney / Runway / Higgsfield)

HackNU AI Workspace решает проблему фрагментации. Мы объединили все эти процессы в едином пространстве премиального киберпанк-формата. Теперь команда может одновременно обсуждать идеи голосом, строить архитектуры на бесконечном холсте и тут же, при помощи нодов, поручать ИИ сгенерировать недостающие ресурсы, картинки или видео напрямую в рабочем пространстве. Умный контекстный бот "видит" всё, что происходит на доске, и может помогать идеями.

---

🚀 Ключевые возможности проекта

• 🎨 Интерактивный Node-Холст (Canvas): Мощная рабочая область на базе React Flow. Позволяет создавать графы, перемещать элементы, связывать карточки и выстраивать сложную архитектуру визуально. Интуитивный дизайн без лишних кликов.
• 🧠 Встроенный умный помощник (Gemini 3): AI-ассистент, реализованный как дополнительный участник сети. Он "понимает" состояние всей доски (canvas_state), может анализировать схемы, выдавать советы по улучшению логики или предлагать креативные идеи. Вывод результатов (или новых нодов) происходит моментально на холст приложения.
• 🎬 Generative AI Медиа-пайплайн (Higgsfield):
  • Text-to-Image: Прямо на холсте вы добавляете ноду генерации, описываете запрос, и платформа асинхронно рендерит изображение.
  • Image-to-Video: Соедините сгенерированную картинку с нодой видеогенерации — система "оживит" её через продвинутый пайплайн нейросетей Higgsfield.
• ⚡ Real-Time Коллаборация (Laravel Reverb): Мгновенная WebSocket-синхронизация изменений холста между всеми участниками комнаты, отображение "живых курсоров", подобное Figma.
• 🎙 Пространственное Аудио и Видео (LiveKit): Полноценные видеоконференции, интегрированные прямо в воркспейс в виде плавающих виджетов. Отпала необходимость открывать сторонние мессенджеры для созвона команды.

---

🏗 Архитектура и Технологический Стек

Пространство разделено на два мощных независимых сервиса.

💻 Frontend

• Ядро: React 18, Vite.
• Стейт и Роутинг: React Router v6.
• Архитектура: Строгое разделение слоев по FSD (Feature-Sliced Design) для максимальной масштабируемости компонентов (app, pages, widgets, features, entities, shared).
• Визуальный движок: @xyflow/react (React Flow).
• Стилизация и дизайн: Tailwind CSS. Киберпанк-тема (глубокие темные фоны neutral-950, акценты циана, фуксии и лайма, эффекты backdrop-blur).
• WebRTC: livekit-client, pusher-js.

⚙️ Backend

• Фреймворк: Laravel 11.x (PHP 8.2+).
• База данных: PostgreSQL.
• Аутентификация: JWT-like API Tokens через Laravel Sanctum.
• WebSockets: Laravel Reverb (Высокопроизводительный сервер для трансляции событий и курсоров).
• Внешние API Интеграции:
  • Higgsfield API — создание AI графики и видеоконтента в фоне.
  • Gemini 3 — языковая модель для чат-бота (мультимодальная или текстовая аналитика по координатам холста).
  • LiveKit Server — облачная инфраструктура создания защищенных webRTC видеоконференций по токенам.

---

🛠 Руководство по локальному запуску

Для развертывания проекта локально выполните следующие шаги:

1. Подготовка окружения и Базы Данных

Убедитесь, что у вас установлен PHP, Node.js, Composer и запущен сервер PostgreSQL (по умолчанию в .env ожидается порт 5433 и БД hackathon_db).

2. Запуск Backend (Laravel)

Откройте терминал и перейдите в папку backend:

cd backend

# 1. Загрузите вендорные пакеты
composer install

# 2. Настройте конфигурационный файл
cp .env.example .env
php artisan key:generate

# 3. Примените структуры таблиц
php artisan migrate

# 4. Запустите основной API сервер (порт 8000)
php artisan serve

Вам потребуются дополнительные фоновые воркеры (откройте новые вкладки терминала):

# Запуск высокочастотного сервера веб-сокетов 
php artisan reverb:start

# Обработчик очередей (обязательно нужен для поллинга генераций картинок/видео)
php artisan queue:work

3. Запуск Frontend (React)

Откройте новое окно терминала и перейдите в папку frontend:

cd frontend

# 1. Скачайте Node.js пакеты
npm install

# 2. Запустите сборщик Vite в dev-режиме
npm run dev

🚀 Приложение загрузится, и интерфейс будет доступен по адресу http://localhost:5173. Успехов на стендапе!

---

📚 Дополнительная документация

Для более глубокого погружения вы можете обратиться к внутренним документам системы:

• Контекст проекта (Для AI)
• Документация по Backend API и Endpoint'ам
• Локальный Frontend Readme