{"id":50796879,"url":"https://github.com/smouj/tazo-art-studio","last_synced_at":"2026-06-12T15:01:58.081Z","repository":{"id":362802609,"uuid":"1260851351","full_name":"smouj/tazo-art-studio","owner":"smouj","description":"🎴 AI-powered Tazo Art Creator for Trading Tazos Game — Create. Collect. Battle.","archived":false,"fork":false,"pushed_at":"2026-06-06T00:25:49.000Z","size":60164,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-06T02:20:43.089Z","etag":null,"topics":["90s-aesthetic","ai-art","digimon","dragon-ball","image-generation","nextjs","pokemon","prisma","shadcn-ui","tailwindcss","tazo","trading-cards","typescript"],"latest_commit_sha":null,"homepage":"https://smouj.github.io/tazo-art-studio/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smouj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-06T00:16:28.000Z","updated_at":"2026-06-06T00:25:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/smouj/tazo-art-studio","commit_stats":null,"previous_names":["smouj/tazo-art-studio"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/smouj/tazo-art-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smouj%2Ftazo-art-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smouj%2Ftazo-art-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smouj%2Ftazo-art-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smouj%2Ftazo-art-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smouj","download_url":"https://codeload.github.com/smouj/tazo-art-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smouj%2Ftazo-art-studio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34249561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["90s-aesthetic","ai-art","digimon","dragon-ball","image-generation","nextjs","pokemon","prisma","shadcn-ui","tailwindcss","tazo","trading-cards","typescript"],"created_at":"2026-06-12T15:01:52.924Z","updated_at":"2026-06-12T15:01:58.071Z","avatar_url":"https://github.com/smouj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🎴 Tazo Art Studio\n\n**AI-Powered Tazo Art Creator for Trading Tazos Game**\n\n_Create. Collect. Battle._\n\n[![Next.js](https://img.shields.io/badge/Next.js-16-black?logo=next.js)](https://nextjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-06B6D4?logo=tailwindcss)](https://tailwindcss.com/)\n[![Prisma](https://img.shields.io/badge/Prisma-ORM-2D3748?logo=prisma)](https://www.prisma.io/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)\n[![GitHub Pages](https://img.shields.io/badge/Demo-GitHub_Pages-222?logo=github)](https://smouj.github.io/tazo-art-studio/)\n\n\u003c/div\u003e\n\n---\n\n## 📖 Overview\n\n**Tazo Art Studio** is a web application for generating, collecting, and managing AI-created tazo art cards across TTG's three original Season 1 franchises. Each tazo features an AI-generated character composited onto circular tazo backgrounds with full front-and-back designs.\n\n\u003e 🔗 **Related Project:** [Trading Tazos Game](https://github.com/smouj/Trading-Tazos-Game) — The original game this studio creates art for. Generate characters here, battle them there!\n\n---\n\n## 🎴 What Does a Tazo Look Like?\n\nEach tazo is a **circular collectible disc** with two sides — much like the classic 90s tazos/pogs:\n\n| | **Front (Composited)** | **Back (Collection Design)** |\n|---|---|---|\n| The AI-generated character is composited onto a real tazo frontal background | Unique back artwork per collection |\n\n### Minimon — Luminara Creatures\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-minimon-card.png\" alt=\"Minimon Tazo Example - Front and Back\" width=\"600\"\u003e\n\u003c/p\u003e\n\n### Dracobell — Bellora Fighters\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-dracobell-card.png\" alt=\"Dracobell Tazo Example - Front and Back\" width=\"600\"\u003e\n\u003c/p\u003e\n\n### Cybermon — Neon Grid Entities\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-cybermon-card.png\" alt=\"Cybermon Tazo Example - Front and Back\" width=\"600\"\u003e\n\u003c/p\u003e\n\n---\n\n## 🖼️ Frontal Backgrounds\n\nEach collection features unique circular backgrounds where AI characters are composited onto. The backgrounds are actual PNG assets giving each tazo its authentic 90s aesthetic.\n\n### Minimon — 6 Unique Backgrounds\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-minimon-showcase.png\" alt=\"Minimon frontal backgrounds\" width=\"700\"\u003e\n\u003c/p\u003e\n\n### Dracobell — 4 Unique Backgrounds\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-dracobell-showcase.png\" alt=\"Dracobell frontal backgrounds\" width=\"700\"\u003e\n\u003c/p\u003e\n\n### Cybermon — 3 Unique Backgrounds\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-cybermon-showcase.png\" alt=\"Cybermon frontal backgrounds\" width=\"700\"\u003e\n\u003c/p\u003e\n\n### Collection Back Designs\n\nEach collection has its own back-side tazo design:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/tazo-backs-showcase.png\" alt=\"Collection back designs\" width=\"700\"\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n### 🎨 AI-Powered Generation\n- Describe your tazo character and let AI generate the art\n- **Automatic compositing** of AI characters onto real tazo backgrounds using Sharp\n- Custom prompt support for advanced users\n- Random preset descriptions for quick inspiration\n- Built-in **transparency validation** — ensures characters have clean alpha channels\n\n### 🗂️ Three Iconic Collections\n\n| Collection | Inspiration | Backgrounds | Color | Theme |\n|-----------|------------|-------------|-------|-------|\n| **Minimon** | Luminara lineage creatures | 6 frontal BGs | Yellow/Orange | Vital Sparks, Pathfinders, lineage awakening |\n| **Dracobell** | Bellora aura fighters | 4 frontal BGs | Orange/Red | Roar Aura, Bell Shards, resonance phases |\n| **Cybermon** | Neon Grid entities | 3 frontal BGs | Blue/Cyan | Soul Protocols, Core Gates, Blackout Drift |\n\n### ⭐ Five Rarity Tiers\n\n| Rarity | Color | Visual Effect |\n|--------|-------|---------------|\n| **Common** | `#9CA3AF` Gray | Standard clean design |\n| **Uncommon** | `#22C55E` Green | Subtle shimmer on character |\n| **Rare** | `#3B82F6` Blue | Holographic crystal accents |\n| **Ultra-Rare** | `#A855F7` Purple | Purple aura + metallic glow |\n| **Legendary** | `#FFCC00` Gold | Golden aura + crown light + particles |\n\n### ⚔️ Eight Combat Roles\n\n```\nAttacker · Tank · Technical · Bouncer · Heavy · Light · Balanced · Special\n```\n\nEach role determines the distribution of **9 combat stats**:\n\n| Stat | Icon | Description |\n|------|------|-------------|\n| **ATK** Attack | ⚔️ | Offensive power |\n| **DEF** Defense | 🛡️ | Damage reduction |\n| **RES** Resistance | 🛡️ | Status effect resistance |\n| **WGT** Weight | 🏋️ | Knockback resistance |\n| **STB** Stability | ⚓ | Recovery speed |\n| **SPN** Spin | 🔄 | Spin attack power |\n| **CTR** Control | 🎯 | Accuracy |\n| **BNC** Bounce | ↕️ | Jump/mobility |\n| **PRC** Precision | 🎯 | Critical hit chance |\n\n### 🖼️ Gallery \u0026 Collection Management\n- Browse all created tazos with visual grid\n- Filter by collection, rarity, or favorites\n- **Flip animation** to see front and back of each tazo\n- **Download** tazo images (front, back, or creature-only PNG)\n- **Download metadata** as JSON\n- Favorite/unfavorite your best designs\n- Delete unwanted creations\n\n### 📰 90s Magazine Aesthetic\n- Complete design system inspired by **Nintendo Power / Pokémon Magazine**\n- Magazine-style shadows, halftone patterns, and bold typography\n- Collection-specific gradients and color schemes\n- Animated effects for legendary and ultra-rare tazos\n- Comic-style stat bars with color-coded values\n\n---\n\n## 📸 App Screenshots\n\n### Landing Page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/examples/app-landing-page.jpg\" alt=\"Tazo Art Studio Landing Page\" width=\"800\"\u003e\n\u003c/p\u003e\n\n\u003e 💡 The full Next.js app (with live AI generation, gallery, and flip animations) requires the `z-ai-web-dev-sdk` API key. See [Getting Started](#-getting-started) to run it locally.\n\n---\n\n## 🛠️ Tech Stack\n\n| Layer | Technology | Purpose |\n|-------|-----------|---------|\n| **Framework** | [Next.js 16](https://nextjs.org/) (App Router) | Full-stack React framework |\n| **Language** | [TypeScript 5](https://www.typescriptlang.org/) | Type-safe development |\n| **Styling** | [Tailwind CSS 4](https://tailwindcss.com/) + Magazine Design System | 90s aesthetic UI |\n| **UI Components** | [shadcn/ui](https://ui.shadcn.com/) (Radix primitives) | Accessible, composable components |\n| **Icons** | [Lucide React](https://lucide.dev/) | Consistent icon set |\n| **Image Processing** | [Sharp](https://sharp.pixelplumbing.com/) | Character-to-background compositing + circular masking |\n| **AI Generation** | [z-ai-web-dev-sdk](https://www.npmjs.com/package/z-ai-web-dev-sdk) | AI image generation with transparency guard |\n| **Database** | [Prisma ORM](https://www.prisma.io/) + SQLite | Persistent storage |\n| **Animations** | [Framer Motion](https://www.framer.com/motion/) | Smooth UI transitions + flip card |\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) 22+ or [Bun](https://bun.sh/) 1.x\n- npm, yarn, pnpm, or bun\n- A [z-ai-web-dev-sdk](https://www.npmjs.com/package/z-ai-web-dev-sdk) API key\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/smouj/tazo-art-studio.git\ncd tazo-art-studio\n\n# Install dependencies\nnpm install    # or: bun install\n\n# Set up environment variables\ncp .env.example .env\n\n# Initialize the database\nnpx prisma db push    # or: bunx prisma db push\n\n# Start the development server\nnpm run dev    # or: bun run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Environment Variables\n\n| Variable | Description | Default |\n|----------|------------|---------|\n| `DATABASE_URL` | SQLite database connection string | `file:./dev.db` |\n\n---\n\n## 📁 Project Structure\n\n```\ntazo-art-studio/\n├── prisma/\n│   └── schema.prisma              # TazoArt model with 9 combat stats\n├── public/\n│   ├── tazo-assets/                # Real tazo background artwork\n│   │   ├── frontal/                # Frontal backgrounds per collection\n│   │   │   ├── minimon/            # 6 PNG backgrounds (1254×1254)\n│   │   │   ├── dracobell/          # 4 PNG backgrounds (1254×1254)\n│   │   │   ├── cybermon/           # 3 PNG backgrounds (1254×1254)\n│   │   │   └── special/            # Cross-collection legendary BG\n│   │   └── back/                   # Back designs per collection\n│   │       ├── back-minimon.png\n│   │       ├── back-dracobell.png\n│   │       └── back-cybermon.png\n│   └── examples/                   # README showcase images\n│       ├── tazo-*-card.png         # Front+back card examples\n│       ├── tazo-*-showcase.png     # Background galleries\n│       └── tazo-backs-showcase.png # Back designs showcase\n├── docs/\n│   └── index.html                  # GitHub Pages landing page\n├── src/\n│   ├── app/\n│   │   ├── page.tsx                # Main SPA (Create Tab + Gallery Tab)\n│   │   ├── layout.tsx              # Root layout with fonts \u0026 metadata\n│   │   ├── globals.css             # Magazine design system + animations\n│   │   └── api/\n│   │       └── tazo-art/\n│   │           ├── route.ts        # GET (list) + POST (create + generate)\n│   │           └── [id]/\n│   │               └── route.ts    # GET + PATCH (favorite) + DELETE\n│   ├── components/ui/              # shadcn/ui components (Radix-based)\n│   ├── hooks/                      # Custom React hooks\n│   └── lib/\n│       ├── db.ts                   # Prisma client singleton\n│       └── utils.ts                # Utility functions\n├── scripts/\n│   └── generate-examples.mjs       # README example image generator\n├── .env.example                    # Environment variable template\n├── .gitignore\n├── LICENSE                         # MIT License\n├── package.json\n└── tsconfig.json\n```\n\n---\n\n## 🎮 How It Works\n\n### AI Generation Flow\n\n```\nUser Input → Prompt Builder → AI Image Generation → Transparency Check → Character Compositing → Database Storage\n```\n\n1. **User fills in** the form: name, collection, rarity, role, and visual description\n2. **API builds a strict prompt** — collection style + rarity effects + role stance + mandatory transparency guard\n3. **z-ai-web-dev-sdk** generates a 1024×1024 character illustration with transparent background\n4. **Transparency validation** checks all 4 corners of the generated image for alpha channel\n5. **Sharp** composites the AI character (65% size) onto a randomly selected frontal background (1254×1254)\n6. **Both images** (composited front + raw character) are stored in the database as Base64\n7. **Tazo appears** in the gallery with full front/back flip view\n\n### Compositing Process\n\nThe character is generated with a transparent background, then composited onto the real tazo background:\n\n```typescript\n// Character is resized to 65% of background size\nconst charSize = Math.round(bgSize * 0.65);\nconst offset = Math.round((bgSize - charSize) / 2);\n\n// Composited with proper transparency preservation\nconst composited = await sharp(bgBuffer)\n  .composite([{ input: resizedCharacter, left: offset, top: offset }])\n  .png()\n  .toBuffer();\n```\n\n### Stat Generation\n\nStats are generated based on:\n- **Rarity tier** — Higher rarity = higher multiplier (Common: 0.8×, Legendary: 1.25×)\n- **Combat role** — Each role has different base stat emphasis:\n  - **Attacker:** ATK 80, DEF 35 — pure offense\n  - **Tank:** DEF 85, RES 80, WGT 75 — maximum durability\n  - **Heavy:** WGT 95, STB 80 — unmovable wall\n  - **Light:** WGT 15, BNC 65, PRC 75 — nimble glass cannon\n- **Random variance** — ±5 points from calculated value to keep each tazo unique\n\n---\n\n## 🎨 Design System\n\nThe application follows a **90s Nintendo Power / Pokémon Magazine** aesthetic:\n\n### Color Palette\n\n| Token | Hex | Usage |\n|-------|-----|-------|\n| Magazine Yellow | `#FFCC00` | Primary actions, headings, legendary rarity |\n| Pokémon Red | `#E3350D` | Destructive actions, alerts, attacker role |\n| Pokémon Blue | `#3B4CCA` | Links, accents, tank role |\n| Dragon Orange | `#FF6B00` | Dracobell collection |\n| Cyber Blue | `#00A1E9` | Cybermon collection |\n| Magazine Cream | `#FFFBE6` | Page backgrounds |\n| Magazine Black | `#1A1A1A` | Text, borders, headers |\n\n### Typography\n- **Headings:** `font-black uppercase tracking-wider`\n- **Labels:** `font-bold text-xs uppercase`\n- **Body:** `font-bold text-sm`\n- **Font stack:** System sans-serif with bold emphasis\n\n### Special CSS Effects\n\n| Class | Effect |\n|-------|--------|\n| `.mag-card` | Magazine-style card with thick border + shadow offset |\n| `.mag-btn` | Bold button with shadow offset + scale on hover |\n| `.legendary-glow` | Animated golden glow + particles for legendary tazos |\n| `.holo-border` | Holographic shimmer for rare+ tazos |\n| `.mag-stroke` | Text stroke for readability on images |\n| `.tazo-card-hover` | Scale(1.03) + shadow on hover |\n| `.mag-stripes` | Diagonal halftone pattern overlay |\n| `.stat-bar` | Comic-style progress bar for stats |\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Ideas for Contributions\n- New collection backgrounds\n- Additional rarity tiers or effects\n- Export formats (GIF, WebP)\n- Batch generation\n- WebSocket integration with Trading Tazos Game\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License — see the [LICENSE](./LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- [Trading Tazos Game](https://github.com/smouj/Trading-Tazos-Game) — The original game project\n- [z-ai-web-dev-sdk](https://www.npmjs.com/package/z-ai-web-dev-sdk) — AI image generation SDK\n- [shadcn/ui](https://ui.shadcn.com/) — Beautiful, accessible UI components\n- [Sharp](https://sharp.pixelplumbing.com/) — High-performance image compositing\n- The 90s magazine culture that inspired the aesthetic\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**[⬆ Back to Top](#-tazo-art-studio)**\n\nMade with ❤️ and 90s nostalgia\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmouj%2Ftazo-art-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmouj%2Ftazo-art-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmouj%2Ftazo-art-studio/lists"}