From 4058485b64c010239fedf65c193610b5c72ffdec Mon Sep 17 00:00:00 2001 From: Angela Hudson Date: Mon, 6 Jul 2026 18:32:19 -0400 Subject: [PATCH] Redesign README with animated hero, dual-cube diagram, and 10-language nav Brings GLB_FACTORY in line with the visual README standard used across Angela's other repos: dark animated SVG hero, an animated photo-to-GLB spin diagram, a language badge bar, and full translations for all 10 supported languages. --- README.ar.md | 118 ++++++++++++++++++++++++ README.de.md | 121 +++++++++++++++++++++++++ README.es.md | 120 ++++++++++++++++++++++++ README.fr.md | 121 +++++++++++++++++++++++++ README.it.md | 122 +++++++++++++++++++++++++ README.ja.md | 118 ++++++++++++++++++++++++ README.ko.md | 116 ++++++++++++++++++++++++ README.md | 146 ++++++++++++++++++++---------- README.pt-BR.md | 120 ++++++++++++++++++++++++ README.zh-CN.md | 112 +++++++++++++++++++++++ docs/assets/photo-to-glb-spin.svg | 54 +++++++++++ docs/assets/readme-hero.svg | 70 ++++++++++++++ 12 files changed, 1290 insertions(+), 48 deletions(-) create mode 100644 README.ar.md create mode 100644 README.de.md create mode 100644 README.es.md create mode 100644 README.fr.md create mode 100644 README.it.md create mode 100644 README.ja.md create mode 100644 README.ko.md create mode 100644 README.pt-BR.md create mode 100644 README.zh-CN.md create mode 100644 docs/assets/photo-to-glb-spin.svg create mode 100644 docs/assets/readme-hero.svg diff --git a/README.ar.md b/README.ar.md new file mode 100644 index 0000000..f2075a8 --- /dev/null +++ b/README.ar.md @@ -0,0 +1,118 @@ +

+ GLB_FACTORY — استوديو تحويل الصور إلى أفاتار ثلاثي الأبعاد +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ رسم متحرك: صورة شخصية تتحول إلى أفاتار GLB ثلاثي الأبعاد يدور +

+ +

+ عرض مباشر + React 19 + Three.js + Vite 6 + TypeScript +

+ +**استوديو تفاعلي لتحويل الصور الشخصية إلى أفاتار ثلاثي الأبعاد.** ارفعي صورة شخصية، ودعي +التطبيق يقرأ الوجه ولون البشرة والشعر والملابس، ثم صدّري نموذج **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 new file mode 100644 index 0000000..b90e15e --- /dev/null +++ b/README.de.md @@ -0,0 +1,121 @@ +

+ GLB_FACTORY — 3D-Foto-zu-Avatar-Studio +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ Animiertes Diagramm: Ein Porträtfoto wird zu einem rotierenden 3D-GLB-Avatar +

+ +

+ Live-Demo + React 19 + Three.js + Vite 6 + TypeScript +

+ +**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 new file mode 100644 index 0000000..0040b58 --- /dev/null +++ b/README.es.md @@ -0,0 +1,120 @@ +

+ GLB_FACTORY — Estudio de Foto a Avatar 3D +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ Diagrama animado: una foto de retrato se convierte en un avatar 3D GLB giratorio +

+ +

+ Demo en vivo + React 19 + Three.js + Vite 6 + TypeScript +

+ +**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. diff --git a/README.fr.md b/README.fr.md new file mode 100644 index 0000000..e3316a8 --- /dev/null +++ b/README.fr.md @@ -0,0 +1,121 @@ +

+ GLB_FACTORY — Studio Photo-vers-Avatar 3D +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ Diagramme animé : une photo de portrait devient un avatar 3D GLB en rotation +

+ +

+ Démo en direct + React 19 + Three.js + Vite 6 + TypeScript +

+ +**Un studio interactif de photo vers avatar 3D.** Chargez un portrait, laissez l'application +lire le visage, le teint, la couleur des cheveux et de la tenue, puis exportez un modèle +**GLB** complet, prêt pour le jeu vidéo, sans aucune expérience en modélisation 3D. + +Application en ligne : [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) + +--- + +## Fonctionnalités principales + +| Fonctionnalité | Ce qu'elle fait | +|---|---| +| **Photo → avatar** | Chargez un simple portrait et obtenez un personnage 3D stylisé, prêt pour le jeu | +| **Extraction des couleurs à partir du visage** | Détecte le teint, la couleur des cheveux et de la tenue à partir de la photo | +| **Recommandation de coiffure** | Suggère un style de coiffure adapté à ce qu'elle détecte sur l'image source | +| **Aperçu 3D en direct** | Faites pivoter, zoomez et inspectez l'avatar généré dans une vue Three.js avant export | +| **Export GLB en un clic** | Téléchargez un fichier `.glb` standard prêt pour moteurs de jeu et visionneuses 3D | +| **Fonctionne avec ou sans serveur** | Analyse complète via Gemini si hébergé, repli automatique par canvas si statique | + +## Architecture à double mode + +GLB_FACTORY est conçu pour fonctionner de deux façons différentes selon l'endroit où il est +déployé, et choisit automatiquement la bonne : + +1. **Mode IA (hébergement Node/Express)** — Sur un environnement complet comme le + développement local ou un conteneur cloud, l'application communique avec un proxy backend + relié à **Gemini 3.5 Flash**. Gemini localise automatiquement le visage et en extrait le + teint, la couleur des cheveux, la couleur de la tenue et une coiffure recommandée avec une + grande précision visuelle. + +2. **Mode de repli statique (GitHub Pages)** — Sans backend disponible, l'application + détecte l'environnement statique et bascule vers une **analyse faciale côté client** : + un échantillonneur canvas HTML5 léger lit les pixels du portrait directement dans le + navigateur et extrait les mêmes couleurs, sans aucune requête réseau. + +Même interface, même résultat GLB, deux moteurs différents en coulisses, selon ce que +l'environnement de déploiement peut réellement exécuter. + +--- + +## Démarrage rapide + +```bash +npm install +npm run dev +``` + +Ouvrez [http://localhost:3000](http://localhost:3000) dans votre navigateur. + +Pour activer l'analyse IA en local, ajoutez une clé Gemini : + +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` + +Sans clé, l'application fonctionne quand même : elle utilise simplement l'analyseur de +repli côté client. + +## Déploiement sur GitHub Pages + +Le dépôt inclut `.github/workflows/deploy.yml`, qui construit et publie l'application +statique à chaque push sur `main`. + +1. Allez sur le dépôt GitHub, puis **Settings**. +2. Sous **Code and automation → Pages**, choisissez **GitHub Actions** comme **Source**. +3. Poussez sur `main` et suivez la construction dans l'onglet **Actions**. + +--- + +## Technologies utilisées + +| Couche | Stack | +|---|---| +| Rendu 3D | **Three.js** — rendu WebGL et construction procédurale du maillage de l'avatar | +| Frontend | **React 19** + **Vite 6** — runtime et build de la SPA | +| Style | **Tailwind CSS v4** | +| Icônes | **Lucide React** | +| Backend | **Express** + **Google GenAI SDK** — proxy vers l'API Gemini | + +## Contributeurs + +- Angela — direction produit, tests +- Claude — implémentation et workflow GitHub + +## Mentions légales + +Les photos envoyées sont traitées dans le seul but de générer un avatar 3D. En mode IA, les +données de l'image sont envoyées à l'API Gemini selon les conditions de Google ; en mode de +repli statique, l'analyse se fait entièrement dans le navigateur et rien ne quitte l'appareil. diff --git a/README.it.md b/README.it.md new file mode 100644 index 0000000..ba599eb --- /dev/null +++ b/README.it.md @@ -0,0 +1,122 @@ +

+ GLB_FACTORY — Studio Foto-ad-Avatar 3D +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ Diagramma animato: una foto ritratto diventa un avatar 3D GLB rotante +

+ +

+ Demo live + React 19 + Three.js + Vite 6 + TypeScript +

+ +**Uno studio interattivo per trasformare foto in avatar 3D.** Carica un ritratto, lascia che +l'app legga viso, incarnato, colore dei capelli e dell'abbigliamento, ed esporta un modello +**GLB** pronto per motori di gioco, senza alcuna esperienza di modellazione 3D. + +App live: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) + +--- + +## Funzionalità principali + +| Funzionalità | Cosa fa | +|---|---| +| **Foto → avatar** | Carica un singolo ritratto e ottieni un personaggio 3D stilizzato, pronto per i giochi | +| **Estrazione colore basata sul viso** | Rileva incarnato, colore dei capelli e dell'abbigliamento direttamente dalla foto | +| **Consiglio di acconciatura** | Suggerisce uno stile di capelli adatto in base all'immagine originale | +| **Anteprima 3D live** | Ruota, ingrandisci e ispeziona l'avatar generato in una vista Three.js prima di esportare | +| **Esportazione GLB in un clic** | Scarica un file `.glb` standard pronto per motori di gioco e visualizzatori 3D | +| **Funziona con o senza server** | Analisi completa con Gemini se ospitato, fallback automatico via canvas se statico | + +## Architettura a doppia modalità + +GLB_FACTORY è progettato per funzionare in due modi diversi a seconda di dove viene +distribuito, e sceglie automaticamente quello giusto: + +1. **Modalità con IA (hosting Node/Express)** — In un ambiente completo come lo sviluppo + locale o un container cloud, l'app comunica con un proxy backend collegato a + **Gemini 3.5 Flash**. Gemini localizza automaticamente il viso ed estrae incarnato, + colore dei capelli, colore dell'abbigliamento e un'acconciatura consigliata con alta + precisione visiva. + +2. **Modalità di fallback statico (GitHub Pages)** — Senza un backend disponibile, l'app + rileva l'ambiente statico e passa all'**analisi del viso lato client**: un leggero + campionatore canvas HTML5 legge i pixel del ritratto direttamente nel browser ed estrae + gli stessi colori, senza alcuna richiesta di rete. + +Stessa interfaccia, stesso risultato GLB, due motori diversi dietro le quinte, a seconda di +cosa l'ambiente di distribuzione può effettivamente eseguire. + +--- + +## Avvio rapido + +```bash +npm install +npm run dev +``` + +Apri [http://localhost:3000](http://localhost:3000) nel browser. + +Per abilitare l'analisi con IA in locale, aggiungi una chiave Gemini: + +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` + +Senza chiave, l'app funziona comunque: usa semplicemente l'analizzatore di fallback lato +client. + +## Distribuzione su GitHub Pages + +Il repository include `.github/workflows/deploy.yml`, che costruisce e pubblica l'app +statica a ogni push su `main`. + +1. Vai al repository su GitHub, poi **Settings**. +2. In **Code and automation → Pages**, imposta **Source** su **GitHub Actions**. +3. Fai push su `main` e segui la build nella scheda **Actions**. + +--- + +## Tecnologie utilizzate + +| Livello | Stack | +|---|---| +| Rendering 3D | **Three.js** — rendering WebGL e costruzione procedurale della mesh dell'avatar | +| Frontend | **React 19** + **Vite 6** — runtime e build della SPA | +| Stile | **Tailwind CSS v4** | +| Icone | **Lucide React** | +| Backend | **Express** + **Google GenAI SDK** — proxy per l'API Gemini | + +## Collaboratori + +- Angela — direzione di prodotto, test +- Claude — implementazione e workflow GitHub + +## Note legali + +Le foto caricate vengono elaborate al solo scopo di generare un avatar 3D. In modalità con +IA, i dati dell'immagine vengono inviati all'API Gemini secondo i termini di Google; in +modalità di fallback statico, l'analisi avviene interamente nel browser e nessun dato lascia +il dispositivo. diff --git a/README.ja.md b/README.ja.md new file mode 100644 index 0000000..1b3827c --- /dev/null +++ b/README.ja.md @@ -0,0 +1,118 @@ +

+ GLB_FACTORY — 3D 写真からアバターへのスタジオ +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ アニメーション図解：ポートレート写真が回転する3D GLBアバターに変わる +

+ +

+ ライブデモ + React 19 + Three.js + Vite 6 + TypeScript +

+ +**インタラクティブな3D写真アバタースタジオ。** ポートレート写真をアップロードすると、アプリが +顔・肌の色・髪・服の色を読み取り、3Dモデリングの経験がなくても、ゲームエンジンでそのまま使える +**GLB** モデルを書き出せます。 + +ライブアプリ: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) + +--- + +## 主な機能 + +| 機能 | 内容 | +|---|---| +| **写真 → アバター** | ポートレート写真を1枚アップロードするだけで、ゲームに使える3Dキャラクターを生成 | +| **顔認識による色抽出** | 写真から直接、肌の色・髪の色・服の色を検出 | +| **ヘアスタイルの提案** | 元画像に合わせたヘアスタイルを提案 | +| **リアルタイム3Dプレビュー** | 書き出す前にThree.jsビューポートで回転・ズームして確認 | +| **ワンクリックGLBエクスポート** | ゲームエンジンや3Dビューアで使える標準の `.glb` ファイルをダウンロード | +| **サーバーの有無を問わず動作** | ホスティング時はGeminiによるフル解析、静的環境では自動でキャンバス解析にフォールバック | + +## デュアルモード・アーキテクチャ + +GLB_FACTORYはデプロイ先に応じて2通りの動作モードを持ち、自動的に適切な方を選択します。 + +1. **AI駆動モード（Node/Expressホスティング）** — ローカル開発やクラウドコンテナのような + フルスタック環境では、アプリは **Gemini 3.5 Flash** に接続されたバックエンドプロキシと + 通信します。Geminiが顔の位置を自動検出し、肌の色・髪の色・服の色・おすすめのヘアスタイル + を高い視覚的精度で抽出します。 + +2. **静的フォールバックモード（GitHub Pages）** — バックエンドが利用できない場合、アプリは + 静的環境を検出して**クライアント側の顔解析**に切り替わります。軽量なHTML5キャンバス + サンプラーがブラウザ内で直接ポートレートのピクセルデータを読み取り、ネットワーク通信なしで + 同じ肌・髪・服の色を抽出します。 + +同じUI、同じGLB出力、裏側で動くエンジンだけが異なり、デプロイ環境が実際に動かせる方が +自動的に選ばれます。 + +--- + +## クイックスタート + +```bash +npm install +npm run dev +``` + +ブラウザで [http://localhost:3000](http://localhost:3000) を開いてください。 + +ローカルでAI解析を有効にするには、Geminiのキーを追加します。 + +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` + +キーがなくてもアプリは動作し、クライアント側のフォールバック解析が使われます。 + +## GitHub Pagesへのデプロイ + +リポジトリには `.github/workflows/deploy.yml` が含まれており、`main` へのpushのたびに +静的アプリをビルド・公開します。 + +1. GitHub上のリポジトリを開き、**Settings** へ。 +2. **Code and automation → Pages** で **Source** を **GitHub Actions** に設定。 +3. `main` にpushし、**Actions** タブでビルドの進行を確認。 + +--- + +## 使用技術 + +| レイヤー | スタック | +|---|---| +| 3Dレンダリング | **Three.js** — WebGLレンダリングとアバターメッシュのプロシージャル生成 | +| フロントエンド | **React 19** + **Vite 6** — SPAランタイムとビルド | +| スタイリング | **Tailwind CSS v4** | +| アイコン | **Lucide React** | +| バックエンド | **Express** + **Google GenAI SDK** — Gemini APIプロキシ | + +## コントリビューター + +- Angela — プロダクトの方向性、テスト +- Claude — 実装とGitHubワークフロー + +## 法的事項 + +アップロードされた写真は3Dアバター生成の目的にのみ使用されます。AI駆動モードでは、画像データは +Googleの規約のもとGemini APIに送信されます。静的フォールバックモードでは解析はすべてブラウザ内 +で完結し、データが端末の外に出ることはありません。 diff --git a/README.ko.md b/README.ko.md new file mode 100644 index 0000000..c38259b --- /dev/null +++ b/README.ko.md @@ -0,0 +1,116 @@ +

+ GLB_FACTORY — 3D 사진-아바타 스튜디오 +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ 애니메이션 다이어그램: 인물 사진이 회전하는 3D GLB 아바타로 바뀌는 모습 +

+ +

+ 라이브 데모 + React 19 + Three.js + Vite 6 + TypeScript +

+ +**인터랙티브한 3D 사진-아바타 스튜디오.** 인물 사진을 업로드하면 앱이 얼굴, 피부톤, 머리색, +옷 색상을 읽어들여 3D 모델링 경험이 없어도 게임 엔진에 바로 쓸 수 있는 완전한 **GLB** 모델을 +내보냅니다. + +라이브 앱: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) + +--- + +## 주요 기능 + +| 기능 | 설명 | +|---|---| +| **사진 → 아바타** | 인물 사진 한 장만 업로드하면 게임에 바로 쓸 수 있는 3D 캐릭터 생성 | +| **얼굴 기반 색상 추출** | 사진에서 피부톤, 머리색, 옷 색상을 직접 감지 | +| **헤어스타일 추천** | 원본 이미지에 맞는 헤어스타일 제안 | +| **실시간 3D 미리보기** | 내보내기 전에 Three.js 뷰포트에서 회전, 확대하며 확인 | +| **원클릭 GLB 내보내기** | 게임 엔진과 3D 뷰어에서 바로 쓸 수 있는 표준 `.glb` 파일 다운로드 | +| **서버 유무와 관계없이 동작** | 호스팅 환경에서는 Gemini로 전체 분석, 정적 환경에서는 캔버스 분석으로 자동 전환 | + +## 듀얼 모드 아키텍처 + +GLB_FACTORY는 배포 환경에 따라 두 가지 방식으로 동작하며, 알맞은 방식을 자동으로 선택합니다. + +1. **AI 기반 모드 (Node/Express 호스팅)** — 로컬 개발이나 클라우드 컨테이너처럼 완전한 + 환경에서는 **Gemini 3.5 Flash**에 연결된 백엔드 프록시와 통신합니다. Gemini가 얼굴 위치를 + 자동으로 찾아내고, 피부톤·머리색·옷 색상과 추천 헤어스타일을 높은 정확도로 추출합니다. + +2. **정적 폴백 모드 (GitHub Pages)** — 백엔드를 사용할 수 없을 때, 앱은 정적 환경을 감지해 + **클라이언트 측 얼굴 분석**으로 전환합니다. 가벼운 HTML5 캔버스 샘플러가 브라우저 안에서 + 직접 인물 사진의 픽셀 데이터를 읽어, 네트워크 요청 없이 동일한 피부·머리·옷 색상을 추출합니다. + +동일한 UI, 동일한 GLB 결과물, 배포 환경이 실제로 실행할 수 있는 쪽에 따라 내부 엔진만 다르게 +동작합니다. + +--- + +## 빠른 시작 + +```bash +npm install +npm run dev +``` + +브라우저에서 [http://localhost:3000](http://localhost:3000) 을 여세요. + +로컬에서 AI 분석을 활성화하려면 Gemini 키를 추가하세요. + +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` + +키가 없어도 앱은 정상 동작하며, 클라이언트 측 폴백 분석기를 사용합니다. + +## GitHub Pages 배포 + +이 저장소에는 `.github/workflows/deploy.yml` 이 포함되어 있어, `main` 에 push할 때마다 +정적 앱을 빌드하고 배포합니다. + +1. GitHub 저장소로 이동한 다음 **Settings** 를 엽니다. +2. **Code and automation → Pages** 에서 **Source** 를 **GitHub Actions** 로 설정합니다. +3. `main` 에 push하고 **Actions** 탭에서 빌드 진행 상황을 확인합니다. + +--- + +## 사용 기술 + +| 레이어 | 스택 | +|---|---| +| 3D 렌더링 | **Three.js** — WebGL 렌더링과 아바타 메시의 절차적 생성 | +| 프론트엔드 | **React 19** + **Vite 6** — SPA 런타임과 빌드 | +| 스타일링 | **Tailwind CSS v4** | +| 아이콘 | **Lucide React** | +| 백엔드 | **Express** + **Google GenAI SDK** — Gemini API 프록시 | + +## 기여자 + +- Angela — 제품 방향, 테스트 +- Claude — 구현 및 GitHub 워크플로 + +## 법적 고지 + +업로드된 사진은 오직 3D 아바타 생성 목적으로만 처리됩니다. AI 기반 모드에서는 이미지 데이터가 +Google의 약관에 따라 Gemini API로 전송됩니다. 정적 폴백 모드에서는 분석이 전적으로 브라우저 +안에서 이루어지며, 어떤 데이터도 기기 밖으로 나가지 않습니다. diff --git a/README.md b/README.md index c921054..987df77 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,119 @@ -# GLB_FACTORY 🎨🤖 +

+ GLB_FACTORY — 3D Photo-to-Avatar Studio +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ Animated diagram: a portrait photo turns into a spinning 3D GLB avatar +

+ +

+ Live demo + React 19 + Three.js + Vite 6 + TypeScript +

+ +**An interactive 3D Photo-to-Avatar Studio.** Upload a portrait, let the app read the face, +skin tone, hair, and outfit colors, then export a fully rigged, game-ready **GLB** model — +no 3D modeling experience required. + +Live app: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) -Welcome to **GLB_FACTORY**! This application is an interactive **3D Photo-to-Avatar Studio**. It allows users to upload a portrait photo and automatically generate, customize, and export fully functional 3D blocky models in standard **GLB** format, ready for game engines or 3D viewports. +--- -View the application live on GitHub Pages: [dacameragirl.github.io/GLB_FACTORY/](https://dacameragirl.github.io/GLB_FACTORY/) +## Product highlights ---- +| Feature | What it does | +|---|---| +| **Photo → avatar** | Upload a single portrait and get a blocky, game-ready 3D character back | +| **Face-aware color extraction** | Detects skin tone, hair color, and clothing color straight from the photo | +| **Hairstyle recommendation** | Suggests a fitting hairstyle type based on what it sees in the source image | +| **Live 3D preview** | Rotate, zoom, and inspect the generated avatar in a Three.js viewport before exporting | +| **One-click GLB export** | Download a standard `.glb` file ready for game engines and 3D viewers | +| **Works with or without a server** | Full Gemini-powered analysis when hosted, automatic canvas-based fallback when static | + +## Dual-mode architecture -## 🚀 Dual-Mode Architecture +GLB_FACTORY is built to run two different ways depending on where it's deployed, and it +picks the right one automatically: -This application is built with a highly resilient **hybrid architecture**: +1. **AI-powered mode (Node/Express hosting)** — On a full-stack environment like local + dev or a container host, the app talks to a backend proxy wired to **Gemini 3.5 Flash**. + Gemini locates the face bounding box and reads skin tone, hair color, clothing color, and + a recommended hairstyle with high visual precision. -1. **AI-Powered Mode (Cloud Hosting)**: - - When running on a full-stack Node/Express container environment (like local development or Cloud Run), the app communicates with a backend proxy connected to the **Gemini 3.5 Flash** API. - - Gemini automatically locates the face bounding box, extracts skin tones, hair colors, clothing colors, and recommends fitting hairstyle types with high visual precision. +2. **Static fallback mode (GitHub Pages)** — With no backend available, the app detects the + static environment and switches to **client-side face analysis**: a lightweight HTML5 + canvas sampler reads the portrait's pixel data directly in the browser and extracts the + same skin, hair, and clothing colors with zero network requests. -2. **Static Fallback Mode (GitHub Pages)**: - - When deployed statically on **GitHub Pages**, where no custom backend server runs, the app **automatically detects the environment** and switches to **Client-Side Face Analysis**. - - It utilizes a lightweight HTML5 canvas sampler to analyze the pixel data of the loaded portrait, extracting the representative skin, hair, and clothing colors directly in the browser with zero external network requests! +Same UI, same GLB output, two different engines under the hood, whichever one the +deployment target can actually run. --- -## ⚡ GitHub Pages Deployment +## Quick start -The repository is equipped with an automated GitHub Actions workflow (`.github/workflows/deploy.yml`) that builds and publishes the application dynamically on every commit to the `main` branch. +```bash +npm install +npm run dev +``` -### How to Activate GitHub Pages in Your Repository: -1. Go to your repository on GitHub: `https://github.com/DaCameraGirl/GLB_FACTORY`. -2. Click on the **Settings** tab. -3. In the left sidebar, navigate to **Pages** under the *Code and automation* section. -4. Under **Build and deployment**: - - For **Source**, select **GitHub Actions** from the dropdown. -5. Once selected, your automated workflow will automatically build and publish the static app. -6. The deployment progress can be monitored under the **Actions** tab. +Open [http://localhost:3000](http://localhost:3000) in your browser. ---- +To enable AI-powered analysis locally, add a Gemini key: -## 🛠️ Local Development +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` -### Prerequisites -- Node.js (v18+) -- npm +Without a key, the app still runs, it just uses the client-side fallback analyzer. -### Installation & Run -1. Install dependencies: - ```bash - npm install - ``` +## Deploying to GitHub Pages -2. Configure environment variables (optional for Gemini server features): - Create a `.env.local` or `.env` file in the root: - ```env - GEMINI_API_KEY=your_gemini_api_key_here - ``` +The repo ships with `.github/workflows/deploy.yml`, which builds and publishes the static +app on every push to `main`. -3. Start the developmental server: - ```bash - npm run dev - ``` - Open [http://localhost:3000](http://localhost:3000) in your browser. +1. Go to the repo on GitHub, then **Settings**. +2. Under **Code and automation → Pages**, set **Source** to **GitHub Actions**. +3. Push to `main` and watch the build under the **Actions** tab. --- -## 🏗️ Technologies Used -- **Three.js** (WebGL 3D Rendering & Procedural Avatar Mesh Construction) -- **React 19** + **Vite 6** (Modern SPA runtime & high-speed builder) -- **Tailwind CSS v4** (Modern utility-first responsive layout styling) -- **Lucide React** (Premium, lightweight icon pairings) -- **Express + Google GenAI SDK** (Lightweight backend proxy handling Gemini API orchestration) +## Technologies used + +| Layer | Stack | +|---|---| +| 3D rendering | **Three.js** — WebGL rendering and procedural avatar mesh construction | +| Frontend | **React 19** + **Vite 6** — SPA runtime and build | +| Styling | **Tailwind CSS v4** | +| Icons | **Lucide React** | +| Backend | **Express** + **Google GenAI SDK** — Gemini API proxy | + +## Contributors + +- Angela — product direction, testing +- Claude — implementation and GitHub workflow + +## Legal + +Uploaded photos are processed for the sole purpose of generating a 3D avatar. In AI-powered +mode, image data is sent to the Gemini API under Google's terms; in static fallback mode, +analysis happens entirely in the browser and nothing leaves the device. diff --git a/README.pt-BR.md b/README.pt-BR.md new file mode 100644 index 0000000..c777970 --- /dev/null +++ b/README.pt-BR.md @@ -0,0 +1,120 @@ +

+ GLB_FACTORY — Estúdio de Foto para Avatar 3D +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ Diagrama animado: uma foto de retrato vira um avatar 3D GLB giratório +

+ +

+ Demo ao vivo + React 19 + Three.js + Vite 6 + TypeScript +

+ +**Um estúdio interativo de foto para avatar 3D.** Envie um retrato, deixe o app ler o rosto, +o tom de pele, o cabelo e as cores da roupa, e exporte um modelo **GLB** pronto para motores +de jogos, sem precisar de experiência em modelagem 3D. + +App ao vivo: [dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) + +--- + +## Principais funcionalidades + +| Funcionalidade | O que faz | +|---|---| +| **Foto → avatar** | Envie um único retrato e receba um personagem 3D estilizado, pronto para jogos | +| **Extração de cor a partir do rosto** | Detecta tom de pele, cor do cabelo e da roupa direto da foto | +| **Recomendação de penteado** | Sugere um estilo de cabelo compatível com o que vê na imagem original | +| **Pré-visualização 3D ao vivo** | Gire, dê zoom e inspecione o avatar gerado em uma visualização Three.js antes de exportar | +| **Exportação GLB em um clique** | Baixe um arquivo `.glb` padrão pronto para motores de jogos e visualizadores 3D | +| **Funciona com ou sem servidor** | Análise completa via Gemini quando hospedado, fallback automático por canvas quando estático | + +## Arquitetura de modo duplo + +O GLB_FACTORY foi feito para rodar de duas formas diferentes dependendo de onde é implantado, +e escolhe a correta automaticamente: + +1. **Modo com IA (hospedagem Node/Express)** — Em um ambiente completo, como + desenvolvimento local ou um contêiner na nuvem, o app conversa com um proxy de backend + ligado ao **Gemini 3.5 Flash**. O Gemini localiza automaticamente o rosto e extrai tom de + pele, cor do cabelo, cor da roupa e um penteado recomendado com alta precisão visual. + +2. **Modo estático de fallback (GitHub Pages)** — Sem backend disponível, o app detecta o + ambiente estático e muda para **análise facial no lado do cliente**: um leve amostrador + de canvas HTML5 lê os pixels do retrato diretamente no navegador e extrai as mesmas cores + de pele, cabelo e roupa, sem nenhuma requisição de rede. + +Mesma interface, mesmo resultado GLB, dois motores diferentes por trás, o que o ambiente de +implantação conseguir realmente rodar. + +--- + +## Início rápido + +```bash +npm install +npm run dev +``` + +Abra [http://localhost:3000](http://localhost:3000) no navegador. + +Para habilitar a análise com IA localmente, adicione uma chave do Gemini: + +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` + +Sem a chave, o app continua funcionando, apenas usando o analisador de fallback no lado do +cliente. + +## Implantação no GitHub Pages + +O repositório já vem com `.github/workflows/deploy.yml`, que constrói e publica o app +estático a cada push para `main`. + +1. Acesse o repositório no GitHub, depois **Settings**. +2. Em **Code and automation → Pages**, defina **Source** como **GitHub Actions**. +3. Faça push para `main` e acompanhe o build na aba **Actions**. + +--- + +## Tecnologias utilizadas + +| Camada | Stack | +|---|---| +| Renderização 3D | **Three.js** — renderização WebGL e construção procedural da malha do avatar | +| Frontend | **React 19** + **Vite 6** — runtime e build da SPA | +| Estilo | **Tailwind CSS v4** | +| Ícones | **Lucide React** | +| Backend | **Express** + **Google GenAI SDK** — proxy da API do Gemini | + +## Colaboradores + +- Angela — direção de produto, testes +- Claude — implementação e fluxo de trabalho no GitHub + +## Aviso legal + +As fotos enviadas são processadas com o único propósito de gerar um avatar 3D. No modo com +IA, os dados da imagem são enviados à API do Gemini sob os termos do Google; no modo estático +de fallback, a análise acontece inteiramente no navegador e nada sai do dispositivo. diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..3536a92 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,112 @@ +

+ GLB_FACTORY — 3D 照片转头像工作室 +

+ +# GLB_FACTORY + +

+ English + Español + Français + Deutsch + Português + 中文 + 日本語 + 한국어 + Italiano + العربية +

+ +

+ 动画示意图：一张肖像照片变成旋转的 3D GLB 头像 +

+ +

+ 在线演示 + React 19 + Three.js + Vite 6 + TypeScript +

+ +**一个交互式的 3D 照片转头像工作室。** 上传一张肖像照片，让应用识别面部、肤色、发色和服装颜色， +然后导出一个可直接用于游戏引擎的完整 **GLB** 模型，完全不需要 3D 建模经验。 + +在线体验：[dacameragirl.github.io/GLB_FACTORY](https://dacameragirl.github.io/GLB_FACTORY/) + +--- + +## 主要功能 + +| 功能 | 作用 | +|---|---| +| **照片 → 头像** | 上传一张肖像照片，即可获得可用于游戏的方块风格 3D 角色 | +| **基于面部的颜色提取** | 直接从照片中识别肤色、发色和服装颜色 | +| **发型推荐** | 根据原始图片推荐合适的发型 | +| **实时 3D 预览** | 导出前可在 Three.js 视口中旋转、缩放并查看生成的头像 | +| **一键导出 GLB** | 下载标准的 `.glb` 文件，可用于游戏引擎和 3D 查看器 | +| **有服务器或无服务器均可运行** | 有服务器时使用 Gemini 完整分析，静态环境下自动切换到画布分析 | + +## 双模式架构 + +GLB_FACTORY 会根据部署环境以两种不同方式运行，并自动选择合适的一种： + +1. **AI 驱动模式（Node/Express 托管）** — 在本地开发或云容器等完整环境中，应用会与连接 + **Gemini 3.5 Flash** 的后端代理通信。Gemini 会自动定位面部区域，并以很高的视觉精度 + 提取肤色、发色、服装颜色以及推荐的发型。 + +2. **静态回退模式（GitHub Pages）** — 当没有可用的后端时，应用会检测到静态环境并切换到 + **客户端面部分析**：一个轻量的 HTML5 画布采样器直接在浏览器中读取肖像的像素数据， + 在零网络请求的情况下提取相同的肤色、发色和服装颜色。 + +界面相同，GLB 输出结果相同，底层引擎不同，取决于部署环境实际能运行哪一种。 + +--- + +## 快速开始 + +```bash +npm install +npm run dev +``` + +在浏览器中打开 [http://localhost:3000](http://localhost:3000)。 + +如需在本地启用 AI 分析，请添加 Gemini 密钥： + +```env +# .env.local +GEMINI_API_KEY=your_gemini_api_key_here +``` + +没有密钥应用依然可以运行，只是会使用客户端回退分析器。 + +## 部署到 GitHub Pages + +仓库已包含 `.github/workflows/deploy.yml`，每次推送到 `main` 分支都会自动构建并发布静态应用。 + +1. 前往 GitHub 上的仓库，然后打开 **Settings**。 +2. 在 **Code and automation → Pages** 中，将 **Source** 设置为 **GitHub Actions**。 +3. 推送到 `main` 分支，并在 **Actions** 标签页查看构建进度。 + +--- + +## 使用的技术 + +| 层级 | 技术栈 | +|---|---| +| 3D 渲染 | **Three.js** — WebGL 渲染与程序化头像网格构建 | +| 前端 | **React 19** + **Vite 6** — SPA 运行时与构建工具 | +| 样式 | **Tailwind CSS v4** | +| 图标 | **Lucide React** | +| 后端 | **Express** + **Google GenAI SDK** — Gemini API 代理 | + +## 贡献者 + +- Angela — 产品方向、测试 +- Claude — 实现与 GitHub 工作流 + +## 法律声明 + +上传的照片仅用于生成 3D 头像。在 AI 驱动模式下，图像数据会按照 Google 的条款发送至 Gemini API； +在静态回退模式下，分析完全在浏览器中进行，任何数据都不会离开设备。 diff --git a/docs/assets/photo-to-glb-spin.svg b/docs/assets/photo-to-glb-spin.svg new file mode 100644 index 0000000..ae4dae4 --- /dev/null +++ b/docs/assets/photo-to-glb-spin.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + PHOTO + + + + + + + + + + + + + + + + + + + + + + + + + .GLB + + diff --git a/docs/assets/readme-hero.svg b/docs/assets/readme-hero.svg new file mode 100644 index 0000000..d4bf348 --- /dev/null +++ b/docs/assets/readme-hero.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GLB_FACTORY + Photo in. 3D avatar out. Zero backend required. + + + + + + + + Upload a portrait · Auto-detect face & colors · Export a real GLB + Gemini-powered on a server · Client-side fallback on GitHub Pages + + + + + + + + + + + + + + + +