Aplikacja mobilna do rozpoznawania i tłumaczenia języka migowego w czasie rzeczywistym, zbudowana w React Native z Expo i zaawansowanym backendem opartym na sztucznej inteligencji.

Signly to odpowiedź na wyzwanie hackathonowe "Moja generacja. Młodzi dla przyszłości". W naszej interpretacji, przyszłość to świat, w którym nie istnieją bariery językowe - świat, w którym możemy się swobodnie porozumiewać, niezależnie od niepełnosprawności czy różnic w komunikacji.

Osoby niesłyszące i niedosłyszące często napotykają na trudności w codziennej komunikacji. Język migowy jest ich naturalnym językiem, ale większość społeczeństwa go nie zna. To tworzy barierę, która:

• Utrudnia dostęp do edukacji i pracy
• Ogranicza możliwości społeczne
• Prowadzi do izolacji i wykluczenia

Signly wykorzystuje sztuczną inteligencję i technologie mobilne, aby:

1. 🔄 Dwukierunkowa Komunikacja

   • Tłumaczenie gestów na tekst w czasie rzeczywistym
   • Konwersja tekstu na animacje języka migowego
   • Umożliwienie płynnej rozmowy między osobami słyszącymi i niesłyszącymi

2. 📚 Edukacja i Nauka

   • Interaktywny quiz do nauki alfabetu migowego
   • Dostępność dla każdego, kto chce się nauczyć
   • Budowanie mostów między społecznościami

3. 🚀 Technologia dla Dobra Społecznego

   • Model AI z dokładnością 99.96%
   • Działanie w czasie rzeczywistym
   • Dostępność na urządzeniach mobilnych

Wierzymy, że młode pokolenie ma moc tworzenia bardziej inkluzywnej przyszłości. Signly to krok w kierunku świata, gdzie:

• Każdy może się swobodnie komunikować
• Technologia służy łamaniu barier
• Niepełnosprawność nie jest przeszkodą w pełnym uczestnictwie w społeczeństwie

Nasza generacja buduje przyszłość bez barier - jedną aplikację na raz.

• 📷 Rozpoznawanie w Czasie Rzeczywistym: Wykorzystuje kamerę do wykrywania gestów języka migowego
• 🤖 Rozpoznawanie Alfabetu przez AI: Model Hugging Face z dokładnością 99.96%
• 🔤 Tłumaczenie Tekstu: Konwersja gestów na tekst w czasie rzeczywistym
• 📚 Tryb Quizu: Interaktywna nauka alfabetu języka migowego
• 🎯 System Hybrydowy: Rozpoznawanie zarówno pojedynczych liter, jak i kompletnych słów
• 👤 Wykrywanie Twarzy: Kontekstowe rozpoznawanie gestów
• 📱 Wieloplatformowość: Działa na iOS, Android i Web

• Framework: React Native + Expo
• Język: TypeScript
• Stylowanie: Tailwind CSS poprzez Nativewind
• Komponenty UI: React Native Reusables
• Routing: Expo Router
• Kamera: expo-camera, react-native-vision-camera

• Framework: FastAPI
• Język: Python 3.10+
• Modele AI:
  • Hugging Face Transformers (rozpoznawanie alfabetu - 99.96% dokładności)
  • MediaPipe Hands (wykrywanie dłoni - 21 punktów orientacyjnych)
  • MediaPipe Face (wykrywanie twarzy)
• Serwer: Uvicorn (ASGI)
• Przetwarzanie Obrazu: OpenCV + PIL

• Node.js 18+ lub Bun
• npm, yarn, pnpm lub bun
• Expo CLI
• iOS Simulator (tylko macOS) lub Android Emulator
• Aplikacja Expo Go (dla testowania na urządzeniach fizycznych)

• Python 3.10+
• pip
• Środowisko wirtualne (zalecane)
• (Opcjonalnie) CUDA dla akceleracji GPU

# Przejdź do katalogu serwera
cd server

# Utwórz środowisko wirtualne
python3 -m venv venv

# Aktywuj środowisko wirtualne
# Na Linux/macOS:
source venv/bin/activate
# Na Windows:
# venv\Scripts\activate

# Zainstaluj zależności
pip install -r requirements.txt

# Uruchom serwer
python hand_recognition_server.py

Serwer będzie dostępny pod adresem http://localhost:8000

Alternatywnie, możesz użyć uvicorn bezpośrednio:

uvicorn hand_recognition_server:app --host 0.0.0.0 --port 8000 --reload

# W katalogu głównym projektu
# Zainstaluj zależności
npm install
# lub
yarn install
# lub
pnpm install
# lub
bun install

# Uruchom serwer deweloperski
npm run dev
# lub
yarn dev
# lub
pnpm dev
# lub
bun dev

Należy również zmienienie adresu servera w camera.tsx w folderze app/(tabs) adres znajduje się w konsoli serwera

Po uruchomieniu serwera deweloperskiego Expo:

• iOS: Naciśnij i, aby uruchomić w symulatorze iOS (tylko Mac)
• Android: Naciśnij a, aby uruchomić w emulatorze Android
• Web: Naciśnij w, aby uruchomić w przeglądarce

Możesz również zeskanować kod QR za pomocą aplikacji Expo Go na swoim urządzeniu, aby testować na fizycznym telefonie.

app/
├── (tabs)/
│   ├── camera.tsx          # Ekran kamery z rozpoznawaniem
│   ├── translate.tsx       # Historia tłumaczeń i zarządzanie
│   ├── quiz.tsx            # Interaktywny quiz edukacyjny
│   └── index.tsx           # Ekran główny
├── _layout.tsx             # Główny layout aplikacji
└── +html.tsx               # Konfiguracja HTML

components/
├── SignLanguageAnimation.tsx  # Komponent animacji gestów
└── ui/                     # Komponenty UI
    ├── button.tsx
    ├── card.tsx
    ├── progress.tsx
    └── text.tsx

lib/
├── sign-language-data.ts      # Dane gestów
├── sign-translation-service.ts # Logika tłumaczenia
├── translation-config.ts      # Konfiguracja
└── utils.ts                   # Funkcje pomocnicze

Endpoint sprawdzający status serwera

Szczegółowe informacje o zdrowiu serwera, wersji i modelach

Wykrywanie dłoni i rozpoznawanie gestów języka migowego

Wejście: Plik obrazu (multipart/form-data)
Wyjście: JSON z punktami orientacyjnymi dłoni i rozpoznanymi gestami

Bezpośrednie rozpoznawanie alfabetu za pomocą modelu Hugging Face

Wejście: Plik obrazu (multipart/form-data)
Wyjście: JSON z przewidywaną literą i wynikami pewności

Przetwarzanie obrazu zakodowanego w base64 (zoptymalizowane dla czasu rzeczywistego)

Wejście: JSON z obrazem base64
Wyjście: JSON z wynikami rozpoznawania

Czyszczenie bufora tłumaczenia

Pobranie aktualnego statusu tłumaczenia i bufora

{
  "hands_detected": 1,
  "image_width": 1920,
  "image_height": 1080,
  "recognized_gesture": "A",
  "hf_confidence": 0.9987,
  "recognition_method": "huggingface",
  "hf_top3": [
    { "label": "A", "confidence": 0.9987 },
    { "label": "E", "confidence": 0.0008 },
    { "label": "S", "confidence": 0.0003 }
  ],
  "hands": [
    {
      "hand_index": 0,
      "handedness": "Right",
      "handedness_score": 0.98,
      "landmarks": [
        {
          "x": 0.5,
          "y": 0.5,
          "z": -0.1,
          "visibility": 1.0
        }
        // ... 21 punktów orientacyjnych na dłoń
      ]
    }
  ]
}

MediaPipe wykrywa 21 punktów orientacyjnych na dłoń:

• 0: NADGARSTEK (WRIST)
• 1-4: KCIUK (THUMB) - CMC, MCP, IP, TIP
• 5-8: PALEC WSKAZUJĄCY (INDEX_FINGER) - MCP, PIP, DIP, TIP
• 9-12: PALEC ŚRODKOWY (MIDDLE_FINGER) - MCP, PIP, DIP, TIP
• 13-16: PALEC SERDECZNY (RING_FINGER) - MCP, PIP, DIP, TIP
• 17-20: PALEC MAŁY (PINKY) - MCP, PIP, DIP, TIP

• Wykrywanie Dłoni: 15-20 FPS na nowoczesnym sprzęcie
• Wnioskowanie Modelu HF:
  • CPU: ~50-100ms na obraz
  • GPU: ~10-20ms na obraz
• Całkowity Pipeline: ~100-200ms end-to-end
• Użycie Pamięci:
  • Aplikacja mobilna: ~100-200MB
  • Serwer backend: ~500-800MB (z modelem HF)

Możesz dodać więcej komponentów wielokrotnego użytku za pomocą CLI:

npx react-native-reusables/cli@latest add [...komponenty]

Przykład:

npx react-native-reusables/cli@latest add input textarea

Jeśli nie określisz nazw komponentów, zostaniesz poproszony o interaktywny wybór. Użyj flagi --all, aby zainstalować wszystkie dostępne komponenty naraz.

Jeśli napotkasz problemy, możesz wyczyścić projekt:

npm run clean
# lub użyj bezpośrednio:
rm -rf .expo node_modules

Następnie ponownie zainstaluj zależności:

npm install

• Dokumentacja React Native
• Dokumentacja Expo
• Dokumentacja Nativewind
• React Native Reusables
• FastAPI
• MediaPipe
• Hugging Face

Aplikacja wykorzystuje model Alphabet-Sign-Language-Detection do dokładnego rozpoznawania alfabetu (A-Z) z dokładnością 99.96%.

Najłatwiejszym sposobem wdrożenia aplikacji jest użycie Expo Application Services (EAS):

• EAS Build - Budowanie natywnych aplikacji
• EAS Updates - Aktualizacje Over-The-Air
• EAS Submit - Publikowanie w sklepach

• Upewnij się, że zainstalowano wszystkie zależności Pythona
• Sprawdź, czy port 8000 nie jest zajęty
• Sprawdź logi serwera pod kątem błędów

• Upewnij się, że serwer backend jest uruchomiony
• Sprawdź ustawienia sieci (aplikacja i serwer muszą być w tej samej sieci)
• Zaktualizuj URL serwera w konfiguracji aplikacji

• Na CPU, rozpoznawanie może być wolniejsze (~50-100ms)
• Rozważ użycie GPU dla szybszego wnioskowania (~10-20ms)
• Zmniejsz rozdzielczość obrazu wejściowego, jeśli to konieczne

Ten projekt został zbudowany przy użyciu:

• React Native Reusables
• Expo
• FastAPI
• MediaPipe
• Hugging Face

Ten projekt został zainicjowany za pomocą:

npx @react-native-reusables/cli@latest init -t signly

• Obsługa WebSocket dla komunikacji w czasie rzeczywistym
• Rozpoznawanie kompletnych zdań
• Obsługa wielu języków migowych
• Tryb offline z modelami on-device
• Historia i statystyki użytkownika
• Udostępnianie i eksport tłumaczeń
• Integracja z uczeniem maszynowym dla personalizacji

Ostatnia aktualizacja: 10 listopada 2025

Jeśli podoba Ci się React Native Reusables, rozważ danie ⭐ na GitHub. Twoje wsparcie jest bardzo ważne!