🌿 EcoSort Kids
Веб-камераны, ойын механикасын және компьютерлік көру элементтерін қолданатын мектеп оқушыларына арналған интерактивті экологиялық веб-платформа.
Жоба туралы
EcoSort Kids — балаларға ойын түрінде қоқысты дұрыс сұрыптауды және қоршаған ортаға қамқорлық жасауды үйрететін білім беру жобасы.
Пайдаланушы қалдық санаттарын зерттей алады, қоқысты сүйреп апару арқылы сұрыптай алады, экология бойынша викториналарды өтіп, интерфейсті қол ишараттарымен басқару үшін веб-камераны қолдана алады және тіпті заттарды тануға арнап ұсына алады.
Жоба сервер болмай-ақ браузерде толық жұмыс істейді. Барлық деректер localStorage-да жергілікті сақталады. Камера бейне ағыны пайдаланушының құрылғысында өңделеді — ешқандай деректер серверлерге жіберілмейді.
Мүмкіндіктер
Сұрыптауды үйрену
Толық сипаттамасы бар 6 қалдық санаты
Сұрыптау ойыны
Ұпаймен және кеңестермен drag-and-drop ойыны
Ишараттармен басқару
MediaPipe Hands арқылы қолды бақылау
Затты тану
Қоқыс түрін анықтауға арналған MobileNet
Мини-ойындар
«Саябақты тазала» және эко-викторина
Технологиялық стек
Next.js 16
App Router бар React-фреймворк
TypeScript
Типтелген JavaScript
Tailwind CSS
Утилиталық CSS-фреймворк
shadcn/ui
Қайта пайдаланылатын UI-компоненттер
Framer Motion
Анимациялар мен өтулер
dnd-kit
Drag and Drop
MediaPipe Hands
Камера арқылы қолды бақылау
TensorFlow.js
Заттарды тану (MobileNet)
Камерамен жұмыс
Hand Tracking MediaPipe Hands кітапханасы арқылы жұмыс істейді. Модель нақты уақытта қолдың 21 негізгі нүктесін бақылайды. Сұқ саусақ курсорды басқарады, ал бас бармақ пен сұқ саусақты жақындату (pinch) таңдау ишараты болады.
Затты тану TensorFlow.js арқылы MobileNet v2 моделін пайдаланады. Модель ImageNet-те (1000 класс) оқытылған және көптеген тұрмыстық заттарды тани алады. Жүйе нәтижені қоқыс санаттарымен салыстырып, ұсыныс береді.
Шектеулер:
- Hand tracking жақсы жарықтандыруды талап етеді және қуатты құрылғыларда жақсы жұмыс істейді
- MobileNet ұсақ немесе ерекше заттарды әрдайым дәл анықтай бермейді
- Камераға кіру тоқтатылса, сайттың барлық функциялары тышқанмен жұмыс істей береді
- Chromium негізіндегі браузерді (Chrome, Edge) қолдану ұсынылады
Қалай іске қосу керек
# Тәуелділіктерді орнату
npm install
# Әзірлеу режимінде іске қосу
npm run dev
# Продакшен үшін жинау
npm run build
npm start
Мектеп экологиялық жобасы, 2026
Планетаға қамқорлықпен жасалған 🌍