Gyorsítsd fel a fotós workflow-d!

EXIF adatok kinyerése és manipulálása, képszerkesztés és közösségi médiára felkészítés egy helyen.

Technológiák | Roadmap | Architektúra | Első indítás (Fejlesztői) | Screenshot | Közreműködés |

---

Vízió

Cél: Megkönnyíteni a fotósok közösségi média munkafolyamatát – hogy az alapvető feladatokhoz ne legyen szükség professzionális képszerkesztő szoftverekre.

Az WizPX segítségével a fotósok percek alatt közösségi médiára kész képeket hozhatnak létre, egy egyszerű és átlátható webes felületen.

Főbb funkciók:

Feldolgozás

• Drag & drop feltöltés, egyszerre legfeljebb 5 kép (AVIF, JPG, PNG, TIFF, WebP)
• EXIF adatok kinyerése, ezekből caption-ök generálása (a szövegnél is elérhető)

Szerkesztés

• Színkorrekció: expozíció, fényerő, kontraszt, színhőmérséklet, tint, telítettség, vibrance (bőrtónus védelemmel), hue, value, levels, gamma
• Channel mixer
• LUT használata
• Maszkolás: rétegenként egérrel rajzolt, puha szélű maszk (rajzolás / törlés mód, állítható kefeméret és élesség), a szűrők csak a maszkolt területre hatnak
• A szerkesztés előnézete valós időben, a böngészőben (WebGL) fut

Kompozíció

• Közösségi média méretek (Instagram, Facebook, X, Pinterest) – expand / crop
• Képkeret
• Szöveg a fotóra, vízjel / saját copyright kép

Export

• JPG, PNG, BMP, WebP, GIF, TIFF
• Több kép exportálása egyszerre

Tervezett

• HEIC támogatás
• LUT készítése a webes felületen

Vissza a tetejére

---

Gyors indítás

git clone https://github.com/bencso/WizPX.git
cd WizPX/src
cp ./frontend/.env.example ./frontend/.env
cp ./backend/.env.example ./backend/.env
docker compose up --build

Ezután a frontend a http://localhost címen érhető el. A részletes leírás: docs/START_DEV.md.

---

Dokumentáció

Dokumentum	Tartalom
docs/START_DEV.md	Fejlesztői környezet indítása (Docker és Docker nélkül)
Beépített útmutató (/docs, a „Leírás” menüpont)	Felhasználói guide: felület, menüpontok, billentyűparancsok, maszkolás, exportálás
src/frontend/README.md	Frontend felépítés, a maszkrajzolás működése
docs/kepszerkeszt-megertesehez.md	A saját jegyzeteim a tervezéshez: az alkalmazott technológiák és képszerkesztési alapok (LUT, színkorrekció, HSV, levels, channel mixer, white balance, vibrance, GLSL). Tervezés közben készült személyes jegyzet, nem hivatalos dokumentáció.

Projektszerkezet

src/
├── frontend/   Next.js + Chakra UI + Pixi.js (szerkesztőfelület)
├── backend/    FastAPI + pyvips / Pillow (export, LUT, maszk, vízjel, keret)
├── nginx/      reverse proxy (/ → frontend, /api → backend)
└── compose.yml
docs/           fejlesztői dokumentáció

Vissza a tetejére

---

Technológiák

Terület	Technológia	Miért?
Frontend		Gyors, reszponzív UI komponensek React alapokon
UI library
Képfeldolgozás (böngésző)	Pixi.js (WebGL / GLSL)	Valós idejű szűrők és maszkok GPU-n
Backend		Modern Python REST API, az exportált kép előállítása (pyvips + Pillow)
Futtatás		Könnyen telepíthető, konténerezett környezet

Vissza a tetejére

---

Roadmap

---
config:
  look: handDrawn
  layout: elk
---
flowchart LR
 subgraph MVP["<br>"]
        m1["Több fájl támogatás (max. 5)<br>AVIF, JPG, PNG, TIFF, WebP"]
        m2["EXIF + caption generálás"]
        m3["Kép méret optimalizálás"]
        m4["Testreszabható vízjel"]
        m5["Kép szerkesztés"]
        m6["LUT kezelések"]
  end
 subgraph WEB["<br>"]
        w1["Drag & Drop feltöltés"]
        w2["Kép szerkesztés"]
        w3["Vízjel pozíció/méret"]
        w4["Szöveg elhelyezés"]
        w5["Előnézet"]
        w6["FastAPI API<br>(export, EXIF, caption)"]
        w7["Rajzolt maszk rétegek"]
  end
 subgraph ADV["</br>"]
        a1["Saját galéria"]
        a2["Térkép képekhez"]
        a3["OAuth2 autentikáció"]
        a4["LUT generálás WEBes felületen keresztül (amit fel lehet használni majd a fotókhoz - mentheti a felhasználó ezeket)"]
        a5["HEIC támogatás"]
  end
    Start["Projekt indulás"] --> MVP
    MVP --> WEB
    WEB --> ADV
    ADV --> End(["Release"])

    Start@{ shape: terminal}
    style MVP fill:#C8E6C9,color:#00C853
    style WEB fill:#C8E6C9,color:#00C853
    style ADV fill:#FFCDD2

Loading

Kiemelt feature táblázat

Funkció	Státusz
EXIF kinyerés	✅ Kész
Caption generálás	✅ Kész
Vízjel	✅ Kész
Cropolás / Expandolás	✅ Kész
Képkeret funkció	✅ Kész
Szerkesztés (szűrők, channel mixer)	✅ Kész
Maszkolás (rajzolt maszk rétegek)	✅ Kész
LUT használata (.cube)	✅ Kész
LUT készítése a webes felületen	🔴 Tervezett
HEIC támogatás	🔴 Tervezett

Vissza a tetejére

---

Architektúra

---
config:
  look: handDrawn
---
flowchart LR
 subgraph Frontend["Frontend"]
        NextJS["Next.js App"]
  end
 subgraph Backend["Backend"]
        API["Python FastAPI"]
  end
 subgraph subGraph4["Docker Hálózat"]
        Nginx["Nginx Reverse Proxy"]
        Frontend
        Backend
  end
    User["Felhasználó / Böngésző"] -- HTTP --> Nginx
    Nginx -- / --> NextJS
    Nginx -- /api --> API
    NextJS -- "Export: eredeti kép + paraméterek + maszkok" --> API
    API -- "pyvips / Pillow" --> Export["Exportált kép"]

Loading

A szerkesztés előnézete teljesen a böngészőben (Pixi.js / WebGL) fut. A backend állapotmentes, nincs adatbázis és nincs tartós fájltárolás: az exportálásnál a kép és a szerkesztési paraméterek (szűrők, LUT, maszkok, szöveg, vízjel, keret) érkeznek meg, és a kész kép megy vissza válaszként.

Vissza a tetejére

---

Screenshot

Warning

BÉTA verzió – hibák előfordulhatnak!

A szerkesztő: a Kép réteg bal felső sarkában szöveg, egy új rétegen pedig rajzolt maszk, ami csak a hegyvonulatra alkalmazza az expozíciót (2026.10.13.).

Vissza a tetejére

---

A kódról

A projekt nagyrészt saját fejlesztés. A teljesítmény-optimalizáláshoz (első alkalom, mikor GLSL-t és WEBGL-t használtam) Claude-ot használtam, de azon kívül a kód nagy része a saját munkám, ezért lehetnek benne hibák és hiányosságok. Ha ilyet találsz, szívesen veszem a jelzést.

Vissza a tetejére

---

Közreműködés

A projekt jelenleg fejlesztés alatt áll, ezért külső hozzájárulás még nem elérhető.

Későbbiekben:

• PR-ek fogadása
• Hibajelentés és feature javaslatok
• CONTRIBUTING.md dokumentáció

Vissza a tetejére

---