Kontekst
Dużo treści (PDF, EPUB, obraz, audio, wideo) kończy jako „plik na dysku”: trudno je porównać, zestawić i zobaczyć wzorce. Precek powstał jako aplikacja, która traktuje media jak dane — przetwarza je modelami AI i buduje tymczasową bazę pod wizualizacje, streszczenia oraz eksport.
Cel
Zaprojektowałem i wdrożyłem narzędzie, które:
- przetwarza tekst, obraz, audio i wideo przez modele AI (OpenRouter / OpenAI),
- buduje tymczasową bazę pod analizę i wizualizację,
- generuje streszczenia, trendy, konteksty i chmury słów,
- pozwala wyeksportować wynik do CSV.
Moja rola
Odpowiadałem za projekt, opracowanie rozwiązania, wdrożenie oraz opiekę powdrożeniową do 30 dni.
Zakres funkcjonalny
- AI Media Processing — przetwarzanie obrazów, audio, wideo i tekstu,
- Database Management — tymczasowa baza pod wizualizację,
- CSV Export — pobranie danych do zewnętrznej analizy,
- Data Visualization — streszczenia, trendy, konteksty, word cloud,
- Cross-platform — aplikacja web z kierunkiem także na mobile (React Native w stacku projektu).
Podejście
Świadomie postawiłem na przetwarzanie po stronie klienta + IndexedDB: dane robocze nie muszą od razu lądować w chmurze użytkownika aplikacji. Modele AI są podłączane przez OpenRouter (w tym tańsze / darmowe ścieżki) lub OpenAI — zależnie od konfiguracji. Frontend (Next.js + React + TypeScript + Tailwind/MUI) łączy formularze wgrywania z wizualizacjami (D3, force graph, word cloud) oraz parserami dokumentów (PDF.js, epub.js).
Wyzwania
- Wiele typów mediów, jeden pipeline — każdy format wchodzi inaczej; trzeba było ujednolicić wynik do wspólnego modelu danych pod wizualizację.
- Koszt i dostęp do modeli — OpenRouter jako warstwa wyboru modeli bez twardego lock-inu na jednego dostawcę.
- Prywatność danych roboczych — IndexedDB jako magazyn sesyjny/tymczasowy zamiast domyślnego „wszystko na serwer”.
Rezultat
Powstała działająca aplikacja (demo, GitHub) zamieniająca media w analizowalny zestaw danych z wizualizacjami i eksportem CSV. Po wdrożeniu zapewniłem opiekę do 30 dni.
Stack
- App: Next.js, React, TypeScript, React Native (kierunek mobilny)
- UI: Tailwind CSS, MUI, NativeWind
- Wizualizacje: D3, React Force Graph, React WordCloud
- Dokumenty: pdfjs-dist, epub.js
- Dane: IndexedDB
- AI: OpenRouter API / OpenAI API