DaCameraGirl · DaCameraGirl · Jul 6, 2026
diff --git a/README.ar.md b/README.ar.md
@@ -0,0 +1,118 @@
+<p align="center">
+  <img src="docs/assets/readme-hero.svg" alt="GLB_FACTORY — استوديو تحويل الصور إلى أفاتار ثلاثي الأبعاد" width="100%"/>
+</p>
+
+# GLB_FACTORY
+
+<p align="center">
+  <a href="README.md"><img src="https://img.shields.io/badge/🇺🇸_English-131a26?style=for-the-badge" alt="English"/></a>
+  <a href="README.es.md"><img src="https://img.shields.io/badge/🇪🇸_Español-131a26?style=for-the-badge" alt="Español"/></a>
+  <a href="README.fr.md"><img src="https://img.shields.io/badge/🇫🇷_Français-131a26?style=for-the-badge" alt="Français"/></a>
+  <a href="README.de.md"><img src="https://img.shields.io/badge/🇩🇪_Deutsch-131a26?style=for-the-badge" alt="Deutsch"/></a>
+  <a href="README.pt-BR.md"><img src="https://img.shields.io/badge/🇧🇷_Português-131a26?style=for-the-badge" alt="Português"/></a>
+  <a href="README.zh-CN.md"><img src="https://img.shields.io/badge/🇨🇳_中文-131a26?style=for-the-badge" alt="中文"/></a>
+  <a href="README.ja.md"><img src="https://img.shields.io/badge/🇯🇵_日本語-131a26?style=for-the-badge" alt="日本語"/></a>
+  <a href="README.ko.md"><img src="https://img.shields.io/badge/🇰🇷_한국어-131a26?style=for-the-badge" alt="한국어"/></a>
+  <a href="README.it.md"><img src="https://img.shields.io/badge/🇮🇹_Italiano-131a26?style=for-the-badge" alt="Italiano"/></a>
+  <a href="README.ar.md"><img src="https://img.shields.io/badge/🇸🇦_العربية-f59e0b?style=for-the-badge" alt="العربية"/></a>
+</p>
+
+<p align="center">
+  <img src="docs/assets/photo-to-glb-spin.svg" alt="رسم متحرك: صورة شخصية تتحول إلى أفاتار GLB ثلاثي الأبعاد يدور" width="420"/>
+</p>
+
+<p align="center">
+  <a href="https://dacameragirl.github.io/GLB_FACTORY/"><img src="https://img.shields.io/badge/🌐_عرض_مباشر-f59e0b?style=for-the-badge" alt="عرض مباشر"/></a>
+  <img src="https://img.shields.io/badge/React_19-149ECA?style=for-the-badge&logo=react&logoColor=white" alt="React 19"/>
+  <img src="https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white" alt="Three.js"/>
+  <img src="https://img.shields.io/badge/Vite_6-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite 6"/>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
+</p>
+
+**استوديو تفاعلي لتحويل الصور الشخصية إلى أفاتار ثلاثي الأبعاد.** ارفعي صورة شخصية، ودعي
+التطبيق يقرأ الوجه ولون البشرة والشعر والملابس، ثم صدّري نموذج **GLB** جاهزًا بالكامل
+لمحركات الألعاب، من دون أي خبرة في النمذجة ثلاثية الأبعاد.
+
+التطبيق المباشر: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/)
+
+---
+
+## أبرز المزايا
+
+| الميزة | ماذا تفعل |
+|---|---|
+| **صورة ← أفاتار** | ارفعي صورة شخصية واحدة واحصلي على شخصية ثلاثية الأبعاد جاهزة للألعاب |
+| **استخراج الألوان اعتمادًا على الوجه** | يكتشف لون البشرة والشعر والملابس مباشرة من الصورة |
+| **اقتراح تسريحة الشعر** | يقترح نوع تسريحة مناسبًا بناءً على الصورة الأصلية |
+| **معاينة ثلاثية الأبعاد مباشرة** | دوّري وكبّري وافحصي الأفاتار الناتج في عارض Three.js قبل التصدير |
+| **تصدير GLB بنقرة واحدة** | نزّلي ملف `.glb` قياسي جاهزًا لمحركات الألعاب وعارضات النماذج ثلاثية الأبعاد |
+| **يعمل بوجود خادم أو من دونه** | تحليل كامل عبر Gemini عند الاستضافة، وتحوّل تلقائي إلى تحليل بالمتصفح في الوضع الساكن |
+
+## بنية ذات وضعين
+
+صُمم GLB_FACTORY للعمل بطريقتين مختلفتين حسب مكان نشره، ويختار الطريقة المناسبة تلقائيًا:
+
+1. **الوضع المدعوم بالذكاء الاصطناعي (استضافة Node/Express)** — في بيئة متكاملة مثل
+   التطوير المحلي أو حاوية سحابية، يتواصل التطبيق مع وسيط خلفي متصل بـ **Gemini 3.5 Flash**.
+   يحدد Gemini موقع الوجه تلقائيًا ويستخرج لون البشرة ولون الشعر ولون الملابس وتسريحة
+   مقترحة بدقة بصرية عالية.
+
+2. **وضع الاحتياط الساكن (GitHub Pages)** — عند عدم توفر خادم خلفي، يكتشف التطبيق البيئة
+   الساكنة وينتقل إلى **تحليل الوجه من جهة المتصفح**: يقرأ عيّن كانفاس HTML5 خفيف بيانات
+   بكسل الصورة مباشرة داخل المتصفح، ويستخرج نفس ألوان البشرة والشعر والملابس من دون أي
+   طلبات شبكة.
+
+نفس الواجهة، ونفس نتيجة GLB، لكن بمحركين مختلفين خلف الكواليس، بحسب ما يمكن لبيئة النشر
+تشغيله فعليًا.
+
+---
+
+## البدء السريع
+
+```bash
+npm install
+npm run dev
+```
+
+افتحي [http://localhost:3000](http://localhost:3000) في المتصفح.
+
+لتفعيل التحليل بالذكاء الاصطناعي محليًا، أضيفي مفتاح Gemini:
+
+```env
+# .env.local
+GEMINI_API_KEY=your_gemini_api_key_here
+```
+
+من دون مفتاح، يظل التطبيق يعمل، ويستخدم فقط محلل الاحتياط من جهة المتصفح.
+
+## النشر على GitHub Pages
+
+يتضمن المستودع ملف `.github/workflows/deploy.yml` الذي يبني وينشر التطبيق الساكن مع كل
+دفع (push) إلى فرع `main`.
+
+1. اذهبي إلى المستودع على GitHub، ثم **Settings**.
+2. ضمن **Code and automation → Pages**، اضبطي **Source** على **GitHub Actions**.
+3. ادفعي إلى `main` وتابعي عملية البناء من تبويب **Actions**.
+
+---
+
+## التقنيات المستخدمة
+
+| الطبقة | التقنية |
+|---|---|
+| العرض ثلاثي الأبعاد | **Three.js** — عرض WebGL وبناء شبكي إجرائي للأفاتار |
+| الواجهة الأمامية | **React 19** + **Vite 6** — بيئة تشغيل وبناء التطبيق أحادي الصفحة |
+| التنسيق | **Tailwind CSS v4** |
+| الأيقونات | **Lucide React** |
+| الخلفية | **Express** + **Google GenAI SDK** — وسيط لواجهة برمجة Gemini |
+
+## المساهمون
+
+- Angela — توجيه المنتج، الاختبار
+- Claude — التنفيذ وسير عمل GitHub
+
+## إشعار قانوني
+
+تُعالج الصور المرفوعة فقط بغرض توليد أفاتار ثلاثي الأبعاد. في الوضع المدعوم بالذكاء
+الاصطناعي، تُرسل بيانات الصورة إلى واجهة Gemini وفق شروط Google؛ وفي وضع الاحتياط الساكن،
+يتم التحليل بالكامل داخل المتصفح ولا تغادر أي بيانات الجهاز.
diff --git a/README.de.md b/README.de.md
@@ -0,0 +1,121 @@
+<p align="center">
+  <img src="docs/assets/readme-hero.svg" alt="GLB_FACTORY — 3D-Foto-zu-Avatar-Studio" width="100%"/>
+</p>
+
+# GLB_FACTORY
+
+<p align="center">
+  <a href="README.md"><img src="https://img.shields.io/badge/🇺🇸_English-131a26?style=for-the-badge" alt="English"/></a>
+  <a href="README.es.md"><img src="https://img.shields.io/badge/🇪🇸_Español-131a26?style=for-the-badge" alt="Español"/></a>
+  <a href="README.fr.md"><img src="https://img.shields.io/badge/🇫🇷_Français-131a26?style=for-the-badge" alt="Français"/></a>
+  <a href="README.de.md"><img src="https://img.shields.io/badge/🇩🇪_Deutsch-f59e0b?style=for-the-badge" alt="Deutsch"/></a>
+  <a href="README.pt-BR.md"><img src="https://img.shields.io/badge/🇧🇷_Português-131a26?style=for-the-badge" alt="Português"/></a>
+  <a href="README.zh-CN.md"><img src="https://img.shields.io/badge/🇨🇳_中文-131a26?style=for-the-badge" alt="中文"/></a>
+  <a href="README.ja.md"><img src="https://img.shields.io/badge/🇯🇵_日本語-131a26?style=for-the-badge" alt="日本語"/></a>
+  <a href="README.ko.md"><img src="https://img.shields.io/badge/🇰🇷_한국어-131a26?style=for-the-badge" alt="한국어"/></a>
+  <a href="README.it.md"><img src="https://img.shields.io/badge/🇮🇹_Italiano-131a26?style=for-the-badge" alt="Italiano"/></a>
+  <a href="README.ar.md"><img src="https://img.shields.io/badge/🇸🇦_العربية-131a26?style=for-the-badge" alt="العربية"/></a>
+</p>
+
+<p align="center">
+  <img src="docs/assets/photo-to-glb-spin.svg" alt="Animiertes Diagramm: Ein Porträtfoto wird zu einem rotierenden 3D-GLB-Avatar" width="420"/>
+</p>
+
+<p align="center">
+  <a href="https://dacameragirl.github.io/GLB_FACTORY/"><img src="https://img.shields.io/badge/🌐_Live_Demo-f59e0b?style=for-the-badge" alt="Live-Demo"/></a>
+  <img src="https://img.shields.io/badge/React_19-149ECA?style=for-the-badge&logo=react&logoColor=white" alt="React 19"/>
+  <img src="https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white" alt="Three.js"/>
+  <img src="https://img.shields.io/badge/Vite_6-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite 6"/>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
+</p>
+
+**Ein interaktives 3D-Foto-zu-Avatar-Studio.** Lade ein Porträt hoch, lass die App Gesicht,
+Hautton, Haar- und Kleidungsfarbe erkennen und exportiere ein voll einsatzbereites
+**GLB**-Modell für Spiele-Engines, ganz ohne 3D-Modellierungserfahrung.
+
+Live-App: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/)
+
+---
+
+## Wichtigste Funktionen
+
+| Funktion | Was sie tut |
+|---|---|
+| **Foto → Avatar** | Ein einzelnes Porträt hochladen und einen spielfertigen 3D-Charakter erhalten |
+| **Gesichtsbasierte Farberkennung** | Erkennt Hautton, Haar- und Kleidungsfarbe direkt aus dem Foto |
+| **Frisurenempfehlung** | Schlägt einen passenden Frisurtyp basierend auf dem Quellbild vor |
+| **Live-3D-Vorschau** | Den generierten Avatar vor dem Export in einer Three.js-Ansicht drehen und zoomen |
+| **GLB-Export mit einem Klick** | Eine standardmäßige `.glb`-Datei für Spiele-Engines und 3D-Viewer herunterladen |
+| **Funktioniert mit oder ohne Server** | Volle Gemini-Analyse bei Hosting, automatischer Canvas-Fallback bei statischem Betrieb |
+
+## Zwei-Modi-Architektur
+
+GLB_FACTORY läuft je nach Deployment-Umgebung auf zwei unterschiedliche Arten und wählt die
+passende automatisch:
+
+1. **KI-gestützter Modus (Node/Express-Hosting)** — In einer vollständigen Umgebung wie
+   lokaler Entwicklung oder einem Cloud-Container spricht die App mit einem Backend-Proxy,
+   der an **Gemini 3.5 Flash** angebunden ist. Gemini lokalisiert automatisch das Gesicht
+   und liest Hautton, Haarfarbe, Kleidungsfarbe sowie eine empfohlene Frisur mit hoher
+   visueller Genauigkeit aus.
+
+2. **Statischer Fallback-Modus (GitHub Pages)** — Ohne verfügbares Backend erkennt die App
+   die statische Umgebung und wechselt zur **clientseitigen Gesichtsanalyse**: Ein
+   leichtgewichtiger HTML5-Canvas-Sampler liest die Pixel des Porträts direkt im Browser aus
+   und extrahiert dieselben Farben, ganz ohne Netzwerkanfragen.
+
+Gleiche Oberfläche, gleiches GLB-Ergebnis, zwei unterschiedliche Engines im Hintergrund, je
+nachdem, was die Deployment-Umgebung tatsächlich ausführen kann.
+
+---
+
+## Schnellstart
+
+```bash
+npm install
+npm run dev
+```
+
+Öffne [http://localhost:3000](http://localhost:3000) im Browser.
+
+Für die KI-gestützte Analyse lokal einen Gemini-Schlüssel hinzufügen:
+
+```env
+# .env.local
+GEMINI_API_KEY=your_gemini_api_key_here
+```
+
+Ohne Schlüssel läuft die App trotzdem, sie nutzt dann einfach den clientseitigen Fallback.
+
+## Deployment auf GitHub Pages
+
+Das Repository enthält `.github/workflows/deploy.yml`, das die statische App bei jedem
+Push auf `main` baut und veröffentlicht.
+
+1. Zum Repository auf GitHub gehen, dann **Settings**.
+2. Unter **Code and automation → Pages** bei **Source** **GitHub Actions** auswählen.
+3. Auf `main` pushen und den Build im Tab **Actions** verfolgen.
+
+---
+
+## Verwendete Technologien
+
+| Ebene | Stack |
+|---|---|
+| 3D-Rendering | **Three.js** — WebGL-Rendering und prozedurale Avatar-Mesh-Erstellung |
+| Frontend | **React 19** + **Vite 6** — SPA-Runtime und Build |
+| Styling | **Tailwind CSS v4** |
+| Icons | **Lucide React** |
+| Backend | **Express** + **Google GenAI SDK** — Gemini-API-Proxy |
+
+## Mitwirkende
+
+- Angela — Produktrichtung, Tests
+- Claude — Implementierung und GitHub-Workflow
+
+## Rechtliches
+
+Hochgeladene Fotos werden ausschließlich zur Erstellung eines 3D-Avatars verarbeitet. Im
+KI-Modus werden Bilddaten gemäß den Bedingungen von Google an die Gemini-API gesendet; im
+statischen Fallback-Modus läuft die Analyse vollständig im Browser, und nichts verlässt das
+Gerät.
diff --git a/README.es.md b/README.es.md
@@ -0,0 +1,120 @@
+<p align="center">
+  <img src="docs/assets/readme-hero.svg" alt="GLB_FACTORY — Estudio de Foto a Avatar 3D" width="100%"/>
+</p>
+
+# GLB_FACTORY
+
+<p align="center">
+  <a href="README.md"><img src="https://img.shields.io/badge/🇺🇸_English-131a26?style=for-the-badge" alt="English"/></a>
+  <a href="README.es.md"><img src="https://img.shields.io/badge/🇪🇸_Español-f59e0b?style=for-the-badge" alt="Español"/></a>
+  <a href="README.fr.md"><img src="https://img.shields.io/badge/🇫🇷_Français-131a26?style=for-the-badge" alt="Français"/></a>
+  <a href="README.de.md"><img src="https://img.shields.io/badge/🇩🇪_Deutsch-131a26?style=for-the-badge" alt="Deutsch"/></a>
+  <a href="README.pt-BR.md"><img src="https://img.shields.io/badge/🇧🇷_Português-131a26?style=for-the-badge" alt="Português"/></a>
+  <a href="README.zh-CN.md"><img src="https://img.shields.io/badge/🇨🇳_中文-131a26?style=for-the-badge" alt="中文"/></a>
+  <a href="README.ja.md"><img src="https://img.shields.io/badge/🇯🇵_日本語-131a26?style=for-the-badge" alt="日本語"/></a>
+  <a href="README.ko.md"><img src="https://img.shields.io/badge/🇰🇷_한국어-131a26?style=for-the-badge" alt="한국어"/></a>
+  <a href="README.it.md"><img src="https://img.shields.io/badge/🇮🇹_Italiano-131a26?style=for-the-badge" alt="Italiano"/></a>
+  <a href="README.ar.md"><img src="https://img.shields.io/badge/🇸🇦_العربية-131a26?style=for-the-badge" alt="العربية"/></a>
+</p>
+
+<p align="center">
+  <img src="docs/assets/photo-to-glb-spin.svg" alt="Diagrama animado: una foto de retrato se convierte en un avatar 3D GLB giratorio" width="420"/>
+</p>
+
+<p align="center">
+  <a href="https://dacameragirl.github.io/GLB_FACTORY/"><img src="https://img.shields.io/badge/🌐_Demo_en_vivo-f59e0b?style=for-the-badge" alt="Demo en vivo"/></a>
+  <img src="https://img.shields.io/badge/React_19-149ECA?style=for-the-badge&logo=react&logoColor=white" alt="React 19"/>
+  <img src="https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white" alt="Three.js"/>
+  <img src="https://img.shields.io/badge/Vite_6-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite 6"/>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
+</p>
+
+**Un estudio interactivo de foto a avatar 3D.** Sube un retrato, deja que la app detecte el
+rostro, el tono de piel, el cabello y los colores de la ropa, y exporta un modelo **GLB**
+completamente listo para usar en videojuegos, sin necesidad de experiencia en modelado 3D.
+
+App en vivo: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/)
+
+---
+
+## Funciones principales
+
+| Función | Qué hace |
+|---|---|
+| **Foto → avatar** | Sube un solo retrato y obtén un personaje 3D estilizado, listo para juegos |
+| **Extracción de color a partir del rostro** | Detecta el tono de piel, el color del cabello y de la ropa desde la foto |
+| **Recomendación de peinado** | Sugiere un estilo de cabello acorde a lo que ve en la imagen original |
+| **Vista previa 3D en vivo** | Rota, acerca e inspecciona el avatar generado en un visor Three.js antes de exportar |
+| **Exportación GLB con un clic** | Descarga un archivo `.glb` estándar listo para motores de juego y visores 3D |
+| **Funciona con o sin servidor** | Análisis completo con Gemini si hay servidor, o alternativa por canvas si es estático |
+
+## Arquitectura de doble modo
+
+GLB_FACTORY está diseñado para funcionar de dos formas distintas según dónde se despliegue,
+y elige la correcta automáticamente:
+
+1. **Modo con IA (alojamiento Node/Express)** — En un entorno completo como desarrollo
+   local o un contenedor en la nube, la app habla con un proxy de backend conectado a
+   **Gemini 3.5 Flash**. Gemini ubica el rostro automáticamente y extrae el tono de piel,
+   color de cabello, color de ropa y un estilo de peinado recomendado con alta precisión.
+
+2. **Modo estático de respaldo (GitHub Pages)** — Sin backend disponible, la app detecta
+   el entorno estático y cambia a **análisis facial del lado del cliente**: un ligero
+   muestreador de canvas HTML5 lee los píxeles del retrato directamente en el navegador y
+   extrae los mismos colores de piel, cabello y ropa sin ninguna solicitud de red.
+
+Misma interfaz, mismo resultado GLB, dos motores distintos por debajo, el que el entorno de
+despliegue pueda ejecutar realmente.
+
+---
+
+## Inicio rápido
+
+```bash
+npm install
+npm run dev
+```
+
+Abre [http://localhost:3000](http://localhost:3000) en tu navegador.
+
+Para habilitar el análisis con IA en local, agrega una clave de Gemini:
+
+```env
+# .env.local
+GEMINI_API_KEY=your_gemini_api_key_here
+```
+
+Sin la clave, la app sigue funcionando: simplemente usa el analizador de respaldo del lado
+del cliente.
+
+## Despliegue en GitHub Pages
+
+El repositorio incluye `.github/workflows/deploy.yml`, que construye y publica la app
+estática en cada push a `main`.
+
+1. Ve al repositorio en GitHub, luego **Settings**.
+2. En **Code and automation → Pages**, elige **GitHub Actions** como **Source**.
+3. Haz push a `main` y observa la compilación en la pestaña **Actions**.
+
+---
+
+## Tecnologías utilizadas
+
+| Capa | Stack |
+|---|---|
+| Renderizado 3D | **Three.js** — renderizado WebGL y construcción procedural de la malla del avatar |
+| Frontend | **React 19** + **Vite 6** — runtime de la SPA y compilación |
+| Estilos | **Tailwind CSS v4** |
+| Iconos | **Lucide React** |
+| Backend | **Express** + **Google GenAI SDK** — proxy de la API de Gemini |
+
+## Colaboradores
+
+- Angela — dirección de producto, pruebas
+- Claude — implementación y flujo de trabajo en GitHub
+
+## Aviso legal
+
+Las fotos subidas se procesan con el único fin de generar un avatar 3D. En modo con IA, los
+datos de la imagen se envían a la API de Gemini bajo los términos de Google; en modo estático
+de respaldo, el análisis ocurre completamente en el navegador y nada sale del dispositivo.