Update index-backup.html

index-backup.html

@@ -5,12 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HumanGen.AI - AI Creative Playground</title>
     <meta name="description" content="HumanGen.AI - Your Ultimate AI Creative Playground. Generate images, videos, audio and more with cutting-edge AI models.">
-    
     <!-- 파비콘 설정 -->
     <link rel="icon" type="image/png" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
     <link rel="apple-touch-icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
     <link rel="shortcut icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
-    
     <!-- Open Graph (Facebook, Discord, Slack 등) -->
     <meta property="og:title" content="HumanGen.AI - AI Creative Playground">
     <meta property="og:description" content="Generate stunning images, videos, audio and more with state-of-the-art AI models. No coding required!">
@@ -18,25 +16,21 @@
     <meta property="og:url" content="https://humangen.ai">
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="HumanGen.AI">
-    
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="HumanGen.AI - AI Creative Playground">
     <meta name="twitter:description" content="Generate stunning images, videos, audio with cutting-edge AI. No coding required!">
     <meta name="twitter:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
     <meta name="twitter:site" content="@humangen_ai">
-    
     <!-- 추가 SEO 메타태그 -->
     <meta name="keywords" content="AI, image generation, video generation, audio generation, creative tools, humangen, artificial intelligence">
     <meta name="author" content="HumanGen.AI">
     <meta name="robots" content="index, follow">
     <link rel="canonical" href="https://humangen.ai">
-    
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
-    
     <style>
         /* ===== CSS Variables - Comic Classic Theme ===== */
         :root {
@@ -51,21 +45,18 @@
             --pink: #EC4899;
             --cyan: #06B6D4;
             --orange: #F97316;
-            
             --shadow: 6px 6px 0px var(--dark);
             --shadow-sm: 4px 4px 0px var(--dark);
             --shadow-lg: 8px 8px 0px var(--dark);
             --border: 3px solid var(--dark);
             --radius: 12px;
         }
-
         /* ===== Reset & Base ===== */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             font-family: 'Comic Neue', cursive, sans-serif;
             background-color: var(--background);
@@ -75,14 +66,12 @@
             color: var(--dark);
             overflow-x: hidden;
         }
-
         /* ===== Header ===== */
         .header {
             text-align: center;
             padding: 3rem 1rem 2rem;
             position: relative;
         }
-
         .logo {
             font-family: 'Bangers', cursive;
             font-size: 4rem;
@@ -95,19 +84,16 @@
             margin-bottom: 1.5rem;
             animation: bounce 2s ease-in-out infinite;
         }
-
         @keyframes bounce {
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-10px); }
         }
-
         /* ===== Banner Image ===== */
         .banner-container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 1rem;
         }
-
         .banner-image {
             width: 100%;
             max-width: 1200px;
@@ -117,7 +103,6 @@
             box-shadow: var(--shadow);
             display: block;
         }
-
         /* ===== Enterprise Banner ===== */
         .enterprise-banner {
             max-width: 1200px;
@@ -134,7 +119,6 @@
             gap: 0.75rem;
             flex-wrap: wrap;
         }
-
         .enterprise-banner-text {
             font-family: 'Bangers', cursive;
             font-size: 1.4rem;
@@ -142,7 +126,6 @@
             letter-spacing: 1px;
             text-shadow: 2px 2px 0px var(--dark);
         }
-
         .enterprise-banner-link {
             font-family: 'Bangers', cursive;
             font-size: 1.5rem;
@@ -155,20 +138,17 @@
             transition: all 0.2s ease;
             text-shadow: none;
         }
-
         .enterprise-banner-link:hover {
             background: var(--accent);
             color: var(--dark);
             transform: scale(1.05);
         }
-
         .tagline {
             font-size: 1.4rem;
             font-weight: 700;
             color: var(--dark);
             margin-bottom: 1rem;
         }
-
         .subtitle {
             font-size: 1.1rem;
             color: #6B7280;
@@ -176,7 +156,6 @@
             margin: 0 auto;
             line-height: 1.6;
         }
-
         /* ===== Notice Box ===== */
         .notice-box {
             max-width: 700px;
@@ -187,18 +166,15 @@
             border-radius: var(--radius);
             box-shadow: var(--shadow-sm);
         }
-
         .notice-item {
             font-size: 0.95rem;
             color: var(--dark);
             margin-bottom: 0.5rem;
             line-height: 1.5;
         }
-
         .notice-item:last-child {
             margin-bottom: 0;
         }
-
         .notice-link {
             color: var(--primary);
             font-weight: 700;
@@ -206,12 +182,10 @@
             border-bottom: 2px solid var(--primary);
             transition: all 0.2s ease;
         }
-
         .notice-link:hover {
             color: var(--secondary);
             border-bottom-color: var(--secondary);
         }
-
         /* ===== Stats Bar ===== */
         .stats-bar {
             display: flex;
@@ -226,24 +200,20 @@
             box-shadow: var(--shadow);
             flex-wrap: wrap;
         }
-
         .stat-item {
             text-align: center;
         }
-
         .stat-number {
             font-family: 'Bangers', cursive;
             font-size: 2rem;
             color: var(--primary);
             letter-spacing: 1px;
         }
-
         .stat-label {
             font-size: 0.9rem;
             font-weight: 700;
             color: var(--dark);
         }
-
         /* ===== Navigation Tabs ===== */
         .nav-tabs {
             display: flex;
@@ -254,7 +224,6 @@
             max-width: 1200px;
             margin: 0 auto;
         }
-
         .nav-tab {
             font-family: 'Comic Neue', cursive;
             font-weight: 700;
@@ -268,50 +237,41 @@
             box-shadow: var(--shadow-sm);
             transition: all 0.15s ease;
         }
-
         .nav-tab:hover {
             transform: translate(-2px, -2px);
             box-shadow: 6px 6px 0px var(--dark);
         }
-
         .nav-tab.active {
             background: var(--primary);
             color: var(--white);
         }
-
         .nav-tab:active {
             transform: translate(2px, 2px);
             box-shadow: 2px 2px 0px var(--dark);
         }
-
         /* ===== BEST Tab Special Style ===== */
         .nav-tab.best-tab {
             background: linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
             color: var(--white);
             animation: best-pulse 2s infinite;
         }
-
         .nav-tab.best-tab.active {
             background: linear-gradient(135deg, #D97706 0%, #DC2626 50%, #DB2777 100%);
         }
-
         @keyframes best-pulse {
             0%, 100% { box-shadow: 4px 4px 0px var(--dark), 0 0 10px #F59E0B; }
             50% { box-shadow: 4px 4px 0px var(--dark), 0 0 20px #F59E0B, 0 0 30px #EF4444; }
         }
-
         /* ===== Main Container ===== */
         .container {
             max-width: 1400px;
             margin: 0 auto;
             padding: 2rem 1rem;
         }
-
         /* ===== Category Section ===== */
         .category-section {
             margin-bottom: 3rem;
         }
-
         .category-header {
             display: flex;
             align-items: center;
@@ -320,18 +280,15 @@
             padding-bottom: 0.5rem;
             border-bottom: 3px dashed var(--dark);
         }
-
         .category-icon {
             font-size: 2rem;
         }
-
         .category-title {
             font-family: 'Bangers', cursive;
             font-size: 2rem;
             letter-spacing: 2px;
             color: var(--dark);
         }
-
         .category-count {
             font-family: 'Comic Neue', cursive;
             font-weight: 700;
@@ -341,7 +298,6 @@
             border: 2px solid var(--dark);
             border-radius: 20px;
         }
-
         /* ===== BEST Category Special Header ===== */
         .category-header.best-header {
             background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
@@ -350,14 +306,12 @@
             border: 3px solid var(--dark);
             box-shadow: var(--shadow-sm);
         }
-
         .category-header.best-header .category-title {
             background: linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
-
         .best-badge {
             background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
             color: var(--white);
@@ -368,14 +322,12 @@
             border-radius: 20px;
             animation: best-pulse 2s infinite;
         }
-
         /* ===== Card Grid ===== */
         .card-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
             gap: 1.5rem;
         }
-
         /* ===== Card Styles ===== */
         .card {
             background: var(--white);
@@ -389,27 +341,30 @@
             color: inherit;
             display: block;
         }
-
         .card:hover {
             transform: translate(-4px, -4px);
             box-shadow: 10px 10px 0px var(--dark);
         }
-
         .card:active {
             transform: translate(2px, 2px);
             box-shadow: 4px 4px 0px var(--dark);
         }
-
         /* ===== BEST Card Special Style ===== */
         .card.best-card {
             border: 4px solid #F59E0B;
             box-shadow: 6px 6px 0px var(--dark), 0 0 15px rgba(245, 158, 11, 0.3);
         }
-
         .card.best-card:hover {
             box-shadow: 10px 10px 0px var(--dark), 0 0 25px rgba(245, 158, 11, 0.5);
         }
-
+        /* ===== Help Desk Card Special Style ===== */
+        .card.helpdesk-card {
+            border: 4px solid #10B981;
+            box-shadow: 6px 6px 0px var(--dark), 0 0 15px rgba(16, 185, 129, 0.3);
+        }
+        .card.helpdesk-card:hover {
+            box-shadow: 10px 10px 0px var(--dark), 0 0 25px rgba(16, 185, 129, 0.5);
+        }
         .card-preview {
             height: 180px;
             display: flex;
@@ -419,7 +374,6 @@
             position: relative;
             overflow: hidden;
         }
-
         .card-preview.gradient-1 {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
@@ -507,7 +461,15 @@
         .card-preview.gradient-motion {
             background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 30%, #F59E0B 70%, #10B981 100%);
         }
-
+        .card-preview.gradient-helpdesk {
+            background: linear-gradient(135deg, #10B981 0%, #059669 30%, #047857 70%, #065F46 100%);
+        }
+        .card-preview.gradient-camera3d {
+            background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 30%, #EC4899 70%, #F97316 100%);
+        }
+        .card-preview.gradient-flipbook {
+            background: linear-gradient(135deg, #EF4444 0%, #F97316 25%, #FACC15 50%, #3B82F6 75%, #8B5CF6 100%);
+        }
         .card-badge {
             position: absolute;
             top: 12px;
@@ -519,102 +481,104 @@
             border-radius: 6px;
             box-shadow: 2px 2px 0px var(--dark);
         }
-
         .badge-new {
             background: var(--secondary);
             color: var(--white);
         }
-
         .badge-hot {
             background: var(--orange);
             color: var(--white);
         }
-
         .badge-beta {
             background: var(--purple);
             color: var(--white);
         }
-
         .badge-free {
             background: var(--success);
             color: var(--white);
         }
-
         .badge-qwen {
             background: #6366F1;
             color: var(--white);
         }
-
         .badge-korea {
             background: #0047A0;
             color: var(--white);
         }
-
         .badge-fortune {
             background: #8B5CF6;
             color: var(--white);
         }
-
         .badge-nsfw {
             background: #DC2626;
             color: var(--white);
         }
-
         .badge-novel {
             background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
             color: var(--white);
         }
-
         .badge-exam {
             background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%);
             color: var(--white);
         }
-
         .badge-best {
             background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
             color: var(--white);
             animation: best-pulse 2s infinite;
         }
-
         .badge-youtube {
             background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
             color: var(--white);
         }
-
         .badge-llm {
             background: linear-gradient(135deg, #1E40AF 0%, #7C3AED 100%);
             color: var(--white);
         }
-
         .badge-minimax {
             background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
             color: var(--white);
         }
-
         .badge-kimi {
             background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
             color: var(--white);
         }
-
         .badge-deepseek {
             background: linear-gradient(135deg, #059669 0%, #10B981 100%);
             color: var(--white);
         }
-
         .badge-glm {
             background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
             color: var(--white);
         }
-
         .badge-motion {
             background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
             color: var(--white);
         }
-
+        .badge-helpdesk {
+            background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+            color: var(--white);
+            animation: helpdesk-pulse 2s infinite;
+        }
+        .badge-camera3d {
+            background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+            color: var(--white);
+        }
+        .badge-flipbook {
+            background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%);
+            color: var(--white);
+            animation: flipbook-pulse 2s infinite;
+        }
+        @keyframes helpdesk-pulse {
+            0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #10B981; }
+            50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #10B981, 0 0 20px #059669; }
+        }
+        @keyframes flipbook-pulse {
+            0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #EF4444; }
+            50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #EF4444, 0 0 20px #8B5CF6; }
+        }
         .card-content {
             padding: 1.25rem;
         }
-
         .card-title {
             font-family: 'Bangers', cursive;
             font-size: 1.4rem;
@@ -622,14 +586,12 @@
             margin-bottom: 0.5rem;
             color: var(--dark);
         }
-
         .card-description {
             font-size: 0.95rem;
             color: #6B7280;
             line-height: 1.5;
             margin-bottom: 1rem;
         }
-
         .card-highlight {
             background: var(--accent);
             color: var(--dark);
@@ -637,7 +599,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-qwen {
             background: #6366F1;
             color: var(--white);
@@ -645,7 +606,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-korea {
             background: #0047A0;
             color: var(--white);
@@ -653,7 +613,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-fortune {
             background: #8B5CF6;
             color: var(--white);
@@ -661,7 +620,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-nsfw {
             background: #DC2626;
             color: var(--white);
@@ -669,7 +627,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-novel {
             background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
             color: var(--white);
@@ -677,7 +634,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-exam {
             background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%);
             color: var(--white);
@@ -685,7 +641,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-best {
             background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
             color: var(--white);
@@ -693,7 +648,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-youtube {
             background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
             color: var(--white);
@@ -701,7 +655,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-llm {
             background: linear-gradient(135deg, #1E40AF 0%, #7C3AED 100%);
             color: var(--white);
@@ -709,7 +662,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-minimax {
             background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
             color: var(--white);
@@ -717,7 +669,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-kimi {
             background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
             color: var(--white);
@@ -725,7 +676,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-deepseek {
             background: linear-gradient(135deg, #059669 0%, #10B981 100%);
             color: var(--white);
@@ -733,7 +683,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-glm {
             background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
             color: var(--white);
@@ -741,7 +690,6 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
         .card-highlight-motion {
             background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
             color: var(--white);
@@ -749,7 +697,27 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
-
+        .card-highlight-helpdesk {
+            background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+            color: var(--white);
+            font-weight: 700;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
+        .card-highlight-camera3d {
+            background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+            color: var(--white);
+            font-weight: 700;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
+        .card-highlight-flipbook {
+            background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%);
+            color: var(--white);
+            font-weight: 700;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
         .card-meta {
             display: flex;
             justify-content: space-between;
@@ -757,13 +725,11 @@
             padding-top: 0.75rem;
             border-top: 2px dashed #E5E7EB;
         }
-
         .card-tags {
             display: flex;
             gap: 0.5rem;
             flex-wrap: wrap;
         }
-
         .tag {
             font-size: 0.75rem;
             font-weight: 700;
@@ -772,7 +738,6 @@
             border: 2px solid var(--dark);
             border-radius: 4px;
         }
-
         .tag-qwen {
             font-size: 0.75rem;
             font-weight: 700;
@@ -782,7 +747,6 @@
             border-radius: 4px;
             color: #6366F1;
         }
-
         .tag-korea {
             font-size: 0.75rem;
             font-weight: 700;
@@ -792,7 +756,6 @@
             border-radius: 4px;
             color: #0047A0;
         }
-
         .tag-fortune {
             font-size: 0.75rem;
             font-weight: 700;
@@ -802,7 +765,6 @@
             border-radius: 4px;
             color: #8B5CF6;
         }
-
         .tag-nsfw {
             font-size: 0.75rem;
             font-weight: 700;
@@ -812,7 +774,6 @@
             border-radius: 4px;
             color: #DC2626;
         }
-
         .tag-novel {
             font-size: 0.75rem;
             font-weight: 700;
@@ -822,7 +783,6 @@
             border-radius: 4px;
             color: #7C3AED;
         }
-
         .tag-exam {
             font-size: 0.75rem;
             font-weight: 700;
@@ -832,7 +792,6 @@
             border-radius: 4px;
             color: #0284C7;
         }
-
         .tag-best {
             font-size: 0.75rem;
             font-weight: 700;
@@ -842,7 +801,6 @@
             border-radius: 4px;
             color: #D97706;
         }
-
         .tag-youtube {
             font-size: 0.75rem;
             font-weight: 700;
@@ -852,7 +810,6 @@
             border-radius: 4px;
             color: #CC0000;
         }
-
         .tag-llm {
             font-size: 0.75rem;
             font-weight: 700;
@@ -862,7 +819,6 @@
             border-radius: 4px;
             color: #1E40AF;
         }
-
         .tag-minimax {
             font-size: 0.75rem;
             font-weight: 700;
@@ -872,7 +828,6 @@
             border-radius: 4px;
             color: #1E3A8A;
         }
-
         .tag-kimi {
             font-size: 0.75rem;
             font-weight: 700;
@@ -882,7 +837,6 @@
             border-radius: 4px;
             color: #7C3AED;
         }
-
         .tag-deepseek {
             font-size: 0.75rem;
             font-weight: 700;
@@ -892,7 +846,6 @@
             border-radius: 4px;
             color: #059669;
         }
-
         .tag-glm {
             font-size: 0.75rem;
             font-weight: 700;
@@ -902,7 +855,6 @@
             border-radius: 4px;
             color: #DC2626;
         }
-
         .tag-motion {
             font-size: 0.75rem;
             font-weight: 700;
@@ -912,16 +864,40 @@
             border-radius: 4px;
             color: #8B5CF6;
         }
-
+        .tag-helpdesk {
+            font-size: 0.75rem;
+            font-weight: 700;
+            padding: 0.25rem 0.5rem;
+            background: #D1FAE5;
+            border: 2px solid #10B981;
+            border-radius: 4px;
+            color: #059669;
+        }
+        .tag-camera3d {
+            font-size: 0.75rem;
+            font-weight: 700;
+            padding: 0.25rem 0.5rem;
+            background: linear-gradient(135deg, #DBEAFE 0%, #E9D5FF 100%);
+            border: 2px solid #3B82F6;
+            border-radius: 4px;
+            color: #3B82F6;
+        }
+        .tag-flipbook {
+            font-size: 0.75rem;
+            font-weight: 700;
+            padding: 0.25rem 0.5rem;
+            background: linear-gradient(135deg, #FEE2E2 0%, #E9D5FF 100%);
+            border: 2px solid #EF4444;
+            border-radius: 4px;
+            color: #EF4444;
+        }
         .card-arrow {
             font-size: 1.5rem;
             transition: transform 0.2s ease;
         }
-
         .card:hover .card-arrow {
             transform: translateX(5px);
         }
-
         /* ===== Footer ===== */
         .footer {
             text-align: center;
@@ -929,14 +905,12 @@
             margin-top: 2rem;
             border-top: 3px dashed var(--dark);
         }
-
         .footer-logo {
             font-family: 'Bangers', cursive;
             font-size: 2rem;
             letter-spacing: 2px;
             margin-bottom: 1rem;
         }
-
         .footer-links {
             display: flex;
             justify-content: center;
@@ -944,7 +918,6 @@
             margin-bottom: 1rem;
             flex-wrap: wrap;
         }
-
         .footer-link {
             font-weight: 700;
             color: var(--dark);
@@ -952,16 +925,13 @@
             border-bottom: 2px solid transparent;
             transition: border-color 0.2s;
         }
-
         .footer-link:hover {
             border-bottom-color: var(--primary);
         }
-
         .footer-copy {
             font-size: 0.9rem;
             color: #6B7280;
         }
-
         /* ===== Floating Action Button ===== */
         .fab {
             position: fixed;
@@ -981,12 +951,10 @@
             transition: all 0.2s ease;
             z-index: 1000;
         }
-
         .fab:hover {
             transform: translate(-2px, -2px) scale(1.1);
             box-shadow: 8px 8px 0px var(--dark);
         }
-
         /* ===== Responsive ===== */
         @media (max-width: 768px) {
             .logo {
@@ -995,66 +963,52 @@
                     3px 3px 0px var(--accent),
                     5px 5px 0px var(--dark);
             }
-
             .tagline {
                 font-size: 1.1rem;
             }
-
             .stats-bar {
                 gap: 1rem;
                 padding: 1rem;
             }
-
             .stat-number {
                 font-size: 1.5rem;
             }
-
             .nav-tab {
                 padding: 0.5rem 1rem;
                 font-size: 0.9rem;
             }
-
             .category-title {
                 font-size: 1.5rem;
             }
-
             .card-grid {
                 grid-template-columns: 1fr;
             }
-
             .card-preview {
                 height: 150px;
                 font-size: 3rem;
             }
-
             .notice-box {
                 margin: 1rem;
                 padding: 0.75rem 1rem;
             }
-
             .notice-item {
                 font-size: 0.85rem;
             }
-
             .banner-container {
                 padding: 0 0.5rem;
             }
-
             .enterprise-banner {
                 padding: 0.75rem 1rem;
                 flex-direction: column;
                 gap: 0.5rem;
             }
-
             .enterprise-banner-text {
                 font-size: 1.1rem;
             }
-
             .enterprise-banner-link {
                 font-size: 1.2rem;
             }
         }
-
         /* ===== Animation ===== */
         @keyframes fadeInUp {
             from {
@@ -1066,11 +1020,9 @@
                 transform: translateY(0);
             }
         }
-
         .card {
             animation: fadeInUp 0.5s ease forwards;
         }
-
         .card:nth-child(1) { animation-delay: 0.1s; }
         .card:nth-child(2) { animation-delay: 0.2s; }
         .card:nth-child(3) { animation-delay: 0.3s; }
@@ -1079,14 +1031,13 @@
         .card:nth-child(6) { animation-delay: 0.6s; }
         .card:nth-child(7) { animation-delay: 0.7s; }
         .card:nth-child(8) { animation-delay: 0.8s; }
-
+        .card:nth-child(9) { animation-delay: 0.9s; }
         /* ===== Search Bar ===== */
         .search-container {
             max-width: 600px;
             margin: 0 auto 2rem;
             position: relative;
         }
-
         .search-input {
             width: 100%;
             padding: 1rem 1.5rem 1rem 3rem;
@@ -1101,17 +1052,14 @@
             outline: none;
             transition: all 0.2s ease;
         }
-
         .search-input:focus {
             box-shadow: 8px 8px 0px var(--primary);
             border-color: var(--primary);
         }
-
         .search-input::placeholder {
             color: #9CA3AF;
             font-weight: 400;
         }
-
         .search-icon {
             position: absolute;
             left: 1rem;
@@ -1128,13 +1076,11 @@
         <div class="banner-container">
             <img src="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/banner.png" alt="HumanGen.AI Banner" class="banner-image">
         </div>
-        
         <!-- Enterprise Banner -->
         <div class="enterprise-banner">
             <span class="enterprise-banner-text">🚀 Unlimited Commercial Use Available — Enterprise Service:</span>
             <a href="https://www.ginigen.ai" target="_blank" class="enterprise-banner-link">www.ginigen.ai</a>
         </div>
-        
         <!-- Enterprise Contact Banner -->
         <div style="background:#FACC15;border:3px solid #1F2937;border-radius:8px;padding:12px 20px;text-align:center;box-shadow:4px 4px 0 #1F2937;margin:20px auto;max-width:1200px">
             <span style="font-family:'Bangers',cursive;color:#1F2937;font-size:1.2rem">💼 Enterprise & CUSTOM(White Label) · 문의</span>
@@ -1143,49 +1089,47 @@
         </div>
     </header>
 
+<!-- "수정할 부분 첫번째" - AI Models 41로 변경 -->
+  
     <!-- Stats Bar -->
     <div class="stats-bar">
         <div class="stat-item">
-            <div class="stat-number">36</div>
+            <div class="stat-number">41</div>
             <div class="stat-label">AI Models</div>
         </div>
         <div class="stat-item">
-            <div class="stat-number">1.5M+</div>
-            <div class="stat-label">Monthly Active Users</div>
+            <div class="stat-number">70K+</div>
+            <div class="stat-label">Daily Active Users</div>
         </div>
         <div class="stat-item">
-            <div class="stat-number">20M+</div>
-            <div class="stat-label">Total Visitors</div>
+            <div class="stat-number">2.1M+</div>
+            <div class="stat-label">Monthly Active Users</div>
         </div>
         <div class="stat-item">
             <div class="stat-number">5M+</div>
             <div class="stat-label">Creations / Month</div>
         </div>
     </div>
-
     <!-- Search Bar -->
     <div class="search-container">
         <span class="search-icon">🔍</span>
-        <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion)" id="searchInput">
+        <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion, camera, 3d, flipbook)" id="searchInput">
     </div>
-
-    <!-- Navigation Tabs -->
+    <!-- Navigation Tabs (Text moved after BEST) -->
     <nav class="nav-tabs">
         <button class="nav-tab active" data-category="all">🌟 All</button>
         <button class="nav-tab best-tab" data-category="best">🏆 BEST</button>
+        <button class="nav-tab" data-category="text">📝 Text</button>
         <button class="nav-tab" data-category="image">🖼️ Image</button>
         <button class="nav-tab" data-category="video">🎬 Video</button>
         <button class="nav-tab" data-category="audio">🎵 Audio</button>
-        <button class="nav-tab" data-category="text">📝 Text</button>
         <button class="nav-tab" data-category="3d">🎮 3D</button>
         <button class="nav-tab" data-category="tools">🛠️ Tools</button>
         <button class="nav-tab" data-category="nsfw">🔞 NSFW</button>
         <button class="nav-tab" data-category="korea">🇰🇷 Korea</button>
     </nav>
-
     <!-- Main Container -->
     <main class="container">
-
         <!-- BEST PICKS Section -->
         <section class="category-section" data-section="best">
             <div class="category-header best-header">
@@ -1194,7 +1138,6 @@
                 <span class="best-badge">⭐ TOP 4</span>
             </div>
             <div class="card-grid">
-
                 <!-- BEST 1: YouTube Trend Analyzer -->
                 <a href="https://ytb.humangen.ai" target="_blank" class="card best-card" data-tags="best,video,youtube,trend,analytics,ai,search,groq,llm,seo,keyword,channel,growth,viral,api">
                     <div class="card-preview gradient-youtube">
@@ -1220,7 +1163,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- BEST 2: Video Editor -->
                 <a href="https://studio.humangen.ai" target="_blank" class="card best-card" data-tags="best,video,editor,timeline,cut,text,merge,export,webm,mp4">
                     <div class="card-preview gradient-best">
@@ -1244,7 +1186,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- BEST 3: PDF TO EXAM GENERATOR -->
                 <a href="https://exam.humangen.ai" target="_blank" class="card best-card" data-tags="best,text,pdf,exam,quiz,test,education,학습,시험,문제,generator,english,korean,한글,multiple-choice,선다형,교육,study,interactive">
                     <div class="card-preview gradient-exam">
@@ -1269,97 +1210,320 @@
                         </div>
                     </div>
                 </a>
-
-                <!-- BEST 4: AI Mermaid Diagram -->
-                <a href="https://diagram.humangen.ai" target="_blank" class="card best-card" data-tags="best,text,diagram,mermaid,flowchart,chart,visualization,free,sequence,er,gantt">
-                    <div class="card-preview gradient-10">
-                        <span>📊</span>
+                <!-- BEST 4: AI 플립북 (NEW - Replaced Ultimate File Converter) -->
+                <a href="https://aibook.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,flipbook,pdf,ai,vlm,3d,chatbot,한국어,문서,분석,플립북,webgl,interactive,qwen">
+                    <div class="card-preview gradient-flipbook">
+                        <span>📚</span>
                         <span class="card-badge badge-best">🏆 BEST</span>
                     </div>
                     <div class="card-content">
-                        <h3 class="card-title">📊 AI Mermaid Diagram</h3>
+                        <h3 class="card-title">📚 AI 플립북 (AI FlipBook)</h3>
                         <p class="card-description">
-                            <span class="card-highlight">Save $240/year - Mermaid Chart Pro FREE!</span> - 
-                            Generate professional diagrams from natural language. 
-                            Flowcharts, sequence diagrams, ER diagrams, Gantt charts & more.
+                            <span class="card-highlight-flipbook">VLM + 3D FlipBook + AI 챗봇!</span> - 
+                            PDF를 인터랙티브 3D 플립북으로 변환! 🤖 AI가 문서 분석 후 질의응답.
+                            📖 WebGL 페이지 넘김, 🎨 Comic Style UI.
+                            🌐 <strong>한국어 특화</strong>
                         </p>
                         <div class="card-meta">
                             <div class="card-tags">
-                                <span class="tag-best">Flowchart</span>
-                                <span class="tag-best">Diagram</span>
-                                <span class="tag">$240 FREE</span>
+                                <span class="tag-flipbook">3D FlipBook</span>
+                                <span class="tag-flipbook">VLM AI</span>
+                                <span class="tag-korea">한글</span>
                             </div>
                             <span class="card-arrow">→</span>
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
-        <!-- Image Generation Section -->
-        <section class="category-section" data-section="image">
+        <!-- Text & Language Section (MOVED HERE - AFTER BEST) -->
+        <section class="category-section" data-section="text">
             <div class="category-header">
-                <span class="category-icon">🖼️</span>
-                <h2 class="category-title">IMAGE GENERATION</h2>
-                <span class="category-count">8 models</span>
+                <span class="category-icon">📝</span>
+                <h2 class="category-title">TEXT & LANGUAGE</h2>
+                <span class="category-count">7 models</span>
             </div>
             <div class="card-grid">
-
-                <!-- Qwen Image 2512 Card -->
-                <a href="https://q2512.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lightning,turbo,fast,alibaba,32b">
-                    <div class="card-preview gradient-qwen">
-                        <span>🦜</span>
-                        <span class="card-badge badge-qwen">⚡ QWEN 2512</span>
+                <!-- HELP DESK & CHATBOT - FIRST CARD (ALWAYS FIXED AT TOP) -->
+                <a href="https://chat.humangen.ai" target="_blank" class="card helpdesk-card" data-tags="text,helpdesk,chatbot,support,faq,ai,assistant,help,question,answer,service,guide,english,korean,한글">
+                    <div class="card-preview gradient-helpdesk">
+                        <span>🤖</span>
+                        <span class="card-badge badge-helpdesk">💬 HELP</span>
                     </div>
                     <div class="card-content">
-                        <h3 class="card-title">🦜 Qwen Image 2512</h3>
+                        <h3 class="card-title">🤖 Help Desk & Chatbot</h3>
                         <p class="card-description">
-                            <span class="card-highlight-qwen">Alibaba Qwen-Image-2512</span> - Lightning fast 4-step generation!
-                            AI prompt enhancement with multi-language support (EN/中文/한글).
+                            <span class="card-highlight-helpdesk">AI-Powered Service Guide</span> - 
+                            Ask anything about HumanGen.AI's <strong>39 AI services</strong>! 
+                            Get instant recommendations, usage guides, and support.
+                            🌐 <strong>English / 한국어</strong> bilingual support.
                         </p>
                         <div class="card-meta">
                             <div class="card-tags">
-                                <span class="tag-qwen">Qwen-2512</span>
-                                <span class="tag-qwen">4-Step</span>
-                                <span class="tag">Lightning</span>
+                                <span class="tag-helpdesk">Chatbot</span>
+                                <span class="tag-helpdesk">Guide</span>
+                                <span class="tag">EN/한글</span>
                             </div>
                             <span class="card-arrow">→</span>
                         </div>
                     </div>
                 </a>
-
-                <!-- Qwen Image 2512 LoRA Card -->
-                <a href="https://qlora.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lora,style,custom,alibaba,32b">
-                    <div class="card-preview gradient-qwen-lora">
-                        <span>🎭</span>
-                        <span class="card-badge badge-qwen">🦜 QWEN LoRA</span>
+                <!-- MINIMAX-M2.1 Card -->
+                <a href="https://minimax.humangen.ai" target="_blank" class="card" data-tags="text,llm,minimax,m2.1,agent,coding,moe,230b,multilingual,tool-calling,agentic">
+                    <div class="card-preview gradient-minimax">
+                        <span>🤖</span>
+                        <span class="card-badge badge-minimax">⚡ M2.1</span>
                     </div>
                     <div class="card-content">
-                        <h3 class="card-title">🎭 Qwen Image 2512 LoRA</h3>
+                        <h3 class="card-title">🤖 MINIMAX-M2.1</h3>
                         <p class="card-description">
-                            <span class="card-highlight-qwen">Qwen-Image-2512 + Style LoRA</span> - Apply custom styles!
-                            Gallery of curated LoRAs + custom LoRA support. Light 4/8 step modes.
+                            <span class="card-highlight-minimax">230B MoE, 10B Active</span> - 
+                            Best AI Agent LLM! Lightning Attention with 4M context.
+                            Multi-language coding, SWE-bench SOTA. Open-source #1!
                         </p>
                         <div class="card-meta">
                             <div class="card-tags">
-                                <span class="tag-qwen">Qwen-2512</span>
-                                <span class="tag-qwen">LoRA</span>
-                                <span class="tag">Styles</span>
+                                <span class="tag-minimax">MoE</span>
+                                <span class="tag-minimax">Agent</span>
+                                <span class="tag">Coding</span>
                             </div>
                             <span class="card-arrow">→</span>
                         </div>
                     </div>
                 </a>
-
-                <!-- FLUX.2 Turbo Image Generator Card -->
-                <a href="https://flux2.humangen.ai" target="_blank" class="card" data-tags="image,flux,turbo,32b,edit,combine">
-                    <div class="card-preview gradient-5">
-                        <span>⚡</span>
-                        <span class="card-badge badge-new">✨ NEW</span>
+                <!-- Kimi-K2-Thinking Card -->
+                <a href="https://kimi.humangen.ai" target="_blank" class="card" data-tags="text,llm,kimi,k2,thinking,moonshot,1t,agent,reasoning,tool-calling,browsing">
+                    <div class="card-preview gradient-kimi">
+                        <span>🌙</span>
+                        <span class="card-badge badge-kimi">🧠 THINKING</span>
                     </div>
                     <div class="card-content">
-                        <h3 class="card-title">⚡ FLUX.2 Turbo Generator</h3>
+                        <h3 class="card-title">🌙 Kimi-K2-Thinking</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-kimi">Moonshot 1T Params, 256K Context</span> - 
+                            Deep thinking agent! 200-300 tool calls in sequence.
+                            HLE & BrowseComp SOTA. INT4 native for 2x speed!
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-kimi">1T</span>
+                                <span class="tag-kimi">Deep Think</span>
+                                <span class="tag">Agent</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+                <!-- DeepSeek-V3.2 Card -->
+                <a href="https://deepseek.humangen.ai" target="_blank" class="card" data-tags="text,llm,deepseek,v3.2,reasoning,coding,moe,685b,sparse-attention,agentic">
+                    <div class="card-preview gradient-deepseek">
+                        <span>🔍</span>
+                        <span class="card-badge badge-deepseek">🚀 V3.2</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🔍 DeepSeek-V3.2</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-deepseek">685B MoE + Sparse Attention</span> - 
+                            Advanced reasoning & agentic AI! AIME 96%, HMMT 99.2%.
+                            GRPO training, Speciale for max reasoning depth!
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-deepseek">685B</span>
+                                <span class="tag-deepseek">Reasoning</span>
+                                <span class="tag">Olympiad</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+                <!-- GLM-4.7 Card -->
+                <a href="https://glm.humangen.ai" target="_blank" class="card" data-tags="text,llm,glm,4.7,zhipu,zai,coding,vibe,agent,200k,128k-output">
+                    <div class="card-preview gradient-glm">
+                        <span>🔥</span>
+                        <span class="card-badge badge-glm">💻 CODING</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🔥 GLM-4.7</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-glm">Zhipu AI 400B, 200K In/128K Out</span> - 
+                            Vibe Coding champion! SWE-bench 73.8% (#1 open-source).
+                            $3/month or FREE local. Think-before-act mode!
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-glm">Vibe Code</span>
+                                <span class="tag-glm">200K</span>
+                                <span class="tag">$3/mo</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+                <!-- PDF TO EXAM GENERATOR Card -->
+                <a href="https://exam.humangen.ai" target="_blank" class="card" data-tags="text,pdf,exam,quiz,test,education,학습,시험,문제,generator,english,korean,한글,multiple-choice,선다형,교육,study,interactive">
+                    <div class="card-preview gradient-exam">
+                        <span>🎓</span>
+                        <span class="card-badge badge-exam">🎯 INTERACTIVE</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🎓 PDF TO EXAM GENERATOR</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-exam">SOMA AI + Interactive Exam Mode!</span> - 
+                            Transform any PDF into exams! Up to <strong>50 questions</strong> (2~5 choice).
+                            📝 Generate → 🎯 Take Exam → 📊 See Score!
+                            🌐 <strong>English / 한국어</strong>
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-exam">PDF→Exam</span>
+                                <span class="tag-exam">Interactive</span>
+                                <span class="tag">EN/한글</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+                <!-- AI Mermaid Diagram Generator Card -->
+                <a href="https://diagram.humangen.ai" target="_blank" class="card" data-tags="text,diagram,mermaid,flowchart,chart,visualization,free">
+                    <div class="card-preview gradient-10">
+                        <span>📊</span>
+                        <span class="card-badge badge-free">💎 $240 FREE</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">📊 AI Mermaid Diagram</h3>
+                        <p class="card-description">
+                            Generate professional diagrams from natural language. 
+                            Flowcharts, sequence diagrams, ER diagrams, Gantt charts & more.
+                            <span class="card-highlight">Save $240/year - Mermaid Chart Pro for FREE!</span>
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag">Flowchart</span>
+                                <span class="tag">Diagram</span>
+                                <span class="tag">FREE</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </section>
+
+
+
+      
+<!-- "카테고리 카운드 수정 두번째" -->
+      
+        <!-- Image Generation Section -->
+        <section class="category-section" data-section="image">
+            <div class="category-header">
+                <span class="category-icon">🖼️</span>
+                <h2 class="category-title">IMAGE GENERATION</h2>
+                <span class="category-count">10 models</span>
+            </div>
+            <div class="card-grid">
+                <!-- NEW! 3D Camera Angle Editor Card - 39th Card -->
+                <a href="https://3dangle.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,qwen,lora,lightning,edit,azimuth,elevation,distance,multiangle,threejs,interactive">
+                    <div class="card-preview gradient-camera3d">
+                        <span>🎬</span>
+                        <span class="card-badge badge-camera3d">🎮 3D CTRL</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🎬 3D Camera Angle Editor</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-camera3d">Qwen + Lightning + Multi-Angles LoRA</span> - 
+                            Transform camera angles with interactive <strong>3D viewport</strong>! 
+                            🎮 8 Azimuths • 📐 4 Elevations • 🔍 3 Distances.
+                            ⚡ Lightning-fast 4-step generation!
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-camera3d">3D Control</span>
+                                <span class="tag-camera3d">Multi-Angle</span>
+                                <span class="tag">Qwen</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+
+<!-- NEW! Z-Image LoRA Generator Card - 40th Card -->
+<a href="https://zlora.humangen.ai" target="_blank" class="card" data-tags="image,lora,z-image,turbo,style,generator,custom,30+styles,jimin,portrait,ghibli,pixel,anime">
+    <div class="card-preview gradient-qwen-lora">
+        <span>🎨</span>
+        <span class="card-badge badge-new">✨ NEW</span>
+    </div>
+    <div class="card-content">
+        <h3 class="card-title">🎨 Z-Image LoRA Generator</h3>
+        <p class="card-description">
+            <span class="card-highlight">Z-Image Turbo + 30+ LoRAs!</span> - 
+            Generate stunning images with various styles! Ghibli, Pixel Art, Anime, Portrait & more.
+            ⚡ Turbo speed, 🎭 Custom LoRA support, 📱 SNS aspect presets.
+        </p>
+        <div class="card-meta">
+            <div class="card-tags">
+                <span class="tag">Z-Image</span>
+                <span class="tag">30+ LoRA</span>
+                <span class="tag">Turbo</span>
+            </div>
+            <span class="card-arrow">→</span>
+        </div>
+    </div>
+</a>
+              
+                <!-- Qwen Image 2512 Card -->
+                <a href="https://q2512.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lightning,turbo,fast,alibaba,32b">
+                    <div class="card-preview gradient-qwen">
+                        <span>🦜</span>
+                        <span class="card-badge badge-qwen">⚡ QWEN 2512</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🦜 Qwen Image 2512</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-qwen">Alibaba Qwen-Image-2512</span> - Lightning fast 4-step generation!
+                            AI prompt enhancement with multi-language support (EN/中文/한글).
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-qwen">Qwen-2512</span>
+                                <span class="tag-qwen">4-Step</span>
+                                <span class="tag">Lightning</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+                <!-- Qwen Image 2512 LoRA Card -->
+                <a href="https://qlora.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lora,style,custom,alibaba,32b">
+                    <div class="card-preview gradient-qwen-lora">
+                        <span>🎭</span>
+                        <span class="card-badge badge-qwen">🦜 QWEN LoRA</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🎭 Qwen Image 2512 LoRA</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-qwen">Qwen-Image-2512 + Style LoRA</span> - Apply custom styles!
+                            Gallery of curated LoRAs + custom LoRA support. Light 4/8 step modes.
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-qwen">Qwen-2512</span>
+                                <span class="tag-qwen">LoRA</span>
+                                <span class="tag">Styles</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
+                <!-- FLUX.2 Turbo Image Generator Card -->
+                <a href="https://flux2.humangen.ai" target="_blank" class="card" data-tags="image,flux,turbo,32b,edit,combine">
+                    <div class="card-preview gradient-5">
+                        <span>⚡</span>
+                        <span class="card-badge badge-new">✨ NEW</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">⚡ FLUX.2 Turbo Generator</h3>
                         <p class="card-description">
                             32B Rectified Flow Model! Generate, edit & combine images in just 8 steps.
                             AI prompt upsampling with VLM support.
@@ -1374,7 +1538,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Qwen Image Layered Decomposer Card -->
                 <a href="https://layer.humangen.ai" target="_blank" class="card" data-tags="image,layer,decompose,pptx,qwen">
                     <div class="card-preview gradient-7">
@@ -1397,7 +1560,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Qwen Image Edit Studio Card -->
                 <a href="https://qedit.humangen.ai" target="_blank" class="card" data-tags="image,edit,qwen,transform,ai">
                     <div class="card-preview gradient-3">
@@ -1420,7 +1582,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Camera Angle Control Card -->
                 <a href="https://angle.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,video">
                     <div class="card-preview gradient-9">
@@ -1443,7 +1604,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Qwen Image to LoRA Card -->
                 <a href="https://qwenlora.humangen.ai" target="_blank" class="card" data-tags="image,lora,qwen,style,training">
                     <div class="card-preview gradient-2">
@@ -1466,7 +1626,6 @@
                         </div>
                     </div>
                 </a>
-                
                 <!-- Z-Image Turbo Card -->
                 <a href="https://z.humangen.ai" target="_blank" class="card" data-tags="image,turbo,fast">
                     <div class="card-preview gradient-1">
@@ -1489,10 +1648,8 @@
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
         <!-- Video Generation Section -->
         <section class="category-section" data-section="video">
             <div class="category-header">
@@ -1501,7 +1658,6 @@
                 <span class="category-count">5 models</span>
             </div>
             <div class="card-grid">
-
                 <!-- YouTube Trend Analyzer Card -->
                 <a href="https://ytb.humangen.ai" target="_blank" class="card" data-tags="video,youtube,trend,analytics,ai,search,groq,llm,seo,keyword,channel,growth,viral,api">
                     <div class="card-preview gradient-youtube">
@@ -1525,7 +1681,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Uncensored Text to Video Card -->
                 <a href="https://nsfwt2v.humangen.ai" target="_blank" class="card" data-tags="video,text2video,uncensored,wan,ai">
                     <div class="card-preview gradient-1">
@@ -1548,7 +1703,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Uncensored Image to Video Card -->
                 <a href="https://nsfwi2v.humangen.ai" target="_blank" class="card" data-tags="video,image2video,uncensored,wan,ai">
                     <div class="card-preview gradient-6">
@@ -1571,7 +1725,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Video Editor Card -->
                 <a href="https://studio.humangen.ai" target="_blank" class="card" data-tags="video,editor,timeline,cut,text">
                     <div class="card-preview gradient-9">
@@ -1594,7 +1747,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Video Last Frame Extractor Card -->
                 <a href="https://frame.humangen.ai" target="_blank" class="card" data-tags="video,frame,extract,last">
                     <div class="card-preview gradient-5">
@@ -1617,10 +1769,8 @@
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
         <!-- Audio Generation Section -->
         <section class="category-section" data-section="audio">
             <div class="category-header">
@@ -1629,7 +1779,6 @@
                 <span class="category-count">2 models</span>
             </div>
             <div class="card-grid">
-
                 <!-- MMAudio Studio Card -->
                 <a href="https://mmaudio.humangen.ai" target="_blank" class="card" data-tags="audio,video2audio,text2audio,mmaudio,korean">
                     <div class="card-preview gradient-9">
@@ -1652,7 +1801,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- Audio Segment Extractor Card -->
                 <a href="https://cut.humangen.ai" target="_blank" class="card" data-tags="audio,cut,extract,segment">
                     <div class="card-preview gradient-8">
@@ -1675,167 +1823,8 @@
                         </div>
                     </div>
                 </a>
-
-            </div>
-        </section>
-
-        <!-- Text & Language Section -->
-        <section class="category-section" data-section="text">
-            <div class="category-header">
-                <span class="category-icon">📝</span>
-                <h2 class="category-title">TEXT & LANGUAGE</h2>
-                <span class="category-count">6 models</span>
-            </div>
-            <div class="card-grid">
-
-                <!-- MINIMAX-M2.1 Card -->
-                <a href="https://minimax.humangen.ai" target="_blank" class="card" data-tags="text,llm,minimax,m2.1,agent,coding,moe,230b,multilingual,tool-calling,agentic">
-                    <div class="card-preview gradient-minimax">
-                        <span>🤖</span>
-                        <span class="card-badge badge-minimax">⚡ M2.1</span>
-                    </div>
-                    <div class="card-content">
-                        <h3 class="card-title">🤖 MINIMAX-M2.1</h3>
-                        <p class="card-description">
-                            <span class="card-highlight-minimax">230B MoE, 10B Active</span> - 
-                            Best AI Agent LLM! Lightning Attention with 4M context.
-                            Multi-language coding, SWE-bench SOTA. Open-source #1!
-                        </p>
-                        <div class="card-meta">
-                            <div class="card-tags">
-                                <span class="tag-minimax">MoE</span>
-                                <span class="tag-minimax">Agent</span>
-                                <span class="tag">Coding</span>
-                            </div>
-                            <span class="card-arrow">→</span>
-                        </div>
-                    </div>
-                </a>
-
-                <!-- Kimi-K2-Thinking Card -->
-                <a href="https://kimi.humangen.ai" target="_blank" class="card" data-tags="text,llm,kimi,k2,thinking,moonshot,1t,agent,reasoning,tool-calling,browsing">
-                    <div class="card-preview gradient-kimi">
-                        <span>🌙</span>
-                        <span class="card-badge badge-kimi">🧠 THINKING</span>
-                    </div>
-                    <div class="card-content">
-                        <h3 class="card-title">🌙 Kimi-K2-Thinking</h3>
-                        <p class="card-description">
-                            <span class="card-highlight-kimi">Moonshot 1T Params, 256K Context</span> - 
-                            Deep thinking agent! 200-300 tool calls in sequence.
-                            HLE & BrowseComp SOTA. INT4 native for 2x speed!
-                        </p>
-                        <div class="card-meta">
-                            <div class="card-tags">
-                                <span class="tag-kimi">1T</span>
-                                <span class="tag-kimi">Deep Think</span>
-                                <span class="tag">Agent</span>
-                            </div>
-                            <span class="card-arrow">→</span>
-                        </div>
-                    </div>
-                </a>
-
-                <!-- DeepSeek-V3.2 Card -->
-                <a href="https://deepseek.humangen.ai" target="_blank" class="card" data-tags="text,llm,deepseek,v3.2,reasoning,coding,moe,685b,sparse-attention,agentic">
-                    <div class="card-preview gradient-deepseek">
-                        <span>🔍</span>
-                        <span class="card-badge badge-deepseek">🚀 V3.2</span>
-                    </div>
-                    <div class="card-content">
-                        <h3 class="card-title">🔍 DeepSeek-V3.2</h3>
-                        <p class="card-description">
-                            <span class="card-highlight-deepseek">685B MoE + Sparse Attention</span> - 
-                            Advanced reasoning & agentic AI! AIME 96%, HMMT 99.2%.
-                            GRPO training, Speciale for max reasoning depth!
-                        </p>
-                        <div class="card-meta">
-                            <div class="card-tags">
-                                <span class="tag-deepseek">685B</span>
-                                <span class="tag-deepseek">Reasoning</span>
-                                <span class="tag">Olympiad</span>
-                            </div>
-                            <span class="card-arrow">→</span>
-                        </div>
-                    </div>
-                </a>
-
-                <!-- GLM-4.7 Card -->
-                <a href="https://glm.humangen.ai" target="_blank" class="card" data-tags="text,llm,glm,4.7,zhipu,zai,coding,vibe,agent,200k,128k-output">
-                    <div class="card-preview gradient-glm">
-                        <span>🔥</span>
-                        <span class="card-badge badge-glm">💻 CODING</span>
-                    </div>
-                    <div class="card-content">
-                        <h3 class="card-title">🔥 GLM-4.7</h3>
-                        <p class="card-description">
-                            <span class="card-highlight-glm">Zhipu AI 400B, 200K In/128K Out</span> - 
-                            Vibe Coding champion! SWE-bench 73.8% (#1 open-source).
-                            $3/month or FREE local. Think-before-act mode!
-                        </p>
-                        <div class="card-meta">
-                            <div class="card-tags">
-                                <span class="tag-glm">Vibe Code</span>
-                                <span class="tag-glm">200K</span>
-                                <span class="tag">$3/mo</span>
-                            </div>
-                            <span class="card-arrow">→</span>
-                        </div>
-                    </div>
-                </a>
-
-                <!-- PDF TO EXAM GENERATOR Card -->
-                <a href="https://exam.humangen.ai" target="_blank" class="card" data-tags="text,pdf,exam,quiz,test,education,학습,시험,문제,generator,english,korean,한글,multiple-choice,선다형,교육,study,interactive">
-                    <div class="card-preview gradient-exam">
-                        <span>🎓</span>
-                        <span class="card-badge badge-exam">🎯 INTERACTIVE</span>
-                    </div>
-                    <div class="card-content">
-                        <h3 class="card-title">🎓 PDF TO EXAM GENERATOR</h3>
-                        <p class="card-description">
-                            <span class="card-highlight-exam">SOMA AI + Interactive Exam Mode!</span> - 
-                            Transform any PDF into exams! Up to <strong>50 questions</strong> (2~5 choice).
-                            📝 Generate → 🎯 Take Exam → 📊 See Score!
-                            🌐 <strong>English / 한국어</strong>
-                        </p>
-                        <div class="card-meta">
-                            <div class="card-tags">
-                                <span class="tag-exam">PDF→Exam</span>
-                                <span class="tag-exam">Interactive</span>
-                                <span class="tag">EN/한글</span>
-                            </div>
-                            <span class="card-arrow">→</span>
-                        </div>
-                    </div>
-                </a>
-
-                <!-- AI Mermaid Diagram Generator Card -->
-                <a href="https://diagram.humangen.ai" target="_blank" class="card" data-tags="text,diagram,mermaid,flowchart,chart,visualization,free">
-                    <div class="card-preview gradient-10">
-                        <span>📊</span>
-                        <span class="card-badge badge-free">💎 $240 FREE</span>
-                    </div>
-                    <div class="card-content">
-                        <h3 class="card-title">📊 AI Mermaid Diagram</h3>
-                        <p class="card-description">
-                            Generate professional diagrams from natural language. 
-                            Flowcharts, sequence diagrams, ER diagrams, Gantt charts & more.
-                            <span class="card-highlight">Save $240/year - Mermaid Chart Pro for FREE!</span>
-                        </p>
-                        <div class="card-meta">
-                            <div class="card-tags">
-                                <span class="tag">Flowchart</span>
-                                <span class="tag">Diagram</span>
-                                <span class="tag">FREE</span>
-                            </div>
-                            <span class="card-arrow">→</span>
-                        </div>
-                    </div>
-                </a>
-
             </div>
         </section>
-
         <!-- 3D & Modeling Section -->
         <section class="category-section" data-section="3d">
             <div class="category-header">
@@ -1844,7 +1833,6 @@
                 <span class="category-count">2 models</span>
             </div>
             <div class="card-grid">
-
                 <!-- NEW! HY-Motion Generator Card -->
                 <a href="https://motion.humangen.ai" target="_blank" class="card" data-tags="3d,motion,human,animation,text-to-motion,fbx,dance,walk,jump,pose,body,movement,ai,generator">
                     <div class="card-preview gradient-motion">
@@ -1868,7 +1856,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- TRELLIS.2 Text/Image-to-3D Card -->
                 <a href="https://trellis2.humangen.ai" target="_blank" class="card" data-tags="3d,text-to-3d,trellis,glb,model">
                     <div class="card-preview gradient-5">
@@ -1891,19 +1878,39 @@
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
         <!-- Tools Section -->
         <section class="category-section" data-section="tools">
             <div class="category-header">
                 <span class="category-icon">🛠️</span>
                 <h2 class="category-title">AI TOOLS</h2>
-                <span class="category-count">4 models</span>
+                <span class="category-count">5 models</span>
             </div>
             <div class="card-grid">
-
+                <!-- Ultimate File Converter Card -->
+                <a href="https://conv.humangen.ai" target="_blank" class="card" data-tags="tools,converter,file,data,csv,json,excel,parquet,xml,yaml,tsv,image,png,jpg,jpeg,webp,bmp,gif,tiff,ico,svg,audio,mp3,wav,ogg,flac,m4a,aac,video,mp4,avi,mkv,webm,mov,document,markdown,html,pdf,docx,txt,rtf,archive,zip,tar,7z,config,toml,ini,env,encoding,base64,url,hex,binary">
+                    <div class="card-preview gradient-best">
+                        <span>🔄</span>
+                        <span class="card-badge badge-best">⭐ ALL-IN-ONE</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🔄 Ultimate File Converter</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-best">Convert Anything to Anything!</span> - 
+                            📊 Data (CSV/JSON/Excel/Parquet/XML/YAML) • 🖼️ Image (PNG/JPG/WebP/GIF) • 
+                            🎵 Audio (MP3/WAV/FLAC) • 🎬 Video (MP4/AVI/MKV) • 📄 Document • 🗜️ Archive • ⚙️ Config • 🔤 Encoding
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-best">8 Categories</span>
+                                <span class="tag-best">50+ Formats</span>
+                                <span class="tag">FREE</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
                 <!-- Ansim Blur - Face Privacy Card -->
                 <a href="https://blur.humangen.ai" target="_blank" class="card" data-tags="tools,blur,face,privacy,mosaic,video,image">
                     <div class="card-preview gradient-1">
@@ -1926,7 +1933,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- QR Canvas+ Generator Card -->
                 <a href="https://qr.humangen.ai" target="_blank" class="card" data-tags="tools,qr,qrcode,generator,decoration">
                     <div class="card-preview gradient-4">
@@ -1949,7 +1955,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- BadgeCraft Generator Card -->
                 <a href="https://badge.humangen.ai" target="_blank" class="card" data-tags="tools,badge,shields,html,github">
                     <div class="card-preview gradient-2">
@@ -1972,7 +1977,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- DNA Diffusion Generator Card -->
                 <a href="https://dna.humangen.ai" target="_blank" class="card" data-tags="tools,dna,protein,biology,diffusion,science">
                     <div class="card-preview gradient-4">
@@ -1995,10 +1999,8 @@
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
         <!-- NSFW Section -->
         <section class="category-section" data-section="nsfw">
             <div class="category-header">
@@ -2007,7 +2009,6 @@
                 <span class="category-count">7 models</span>
             </div>
             <div class="card-grid">
-
                 <!-- AI Adult Novel Generator Card -->
                 <a href="https://nsfwnovel.humangen.ai" target="_blank" class="card" data-tags="nsfw,novel,story,adult,erotic,fiction,writing,english,korean,한글,소설,성인소설,ai,generator,romance,passionate,literature">
                     <div class="card-preview gradient-novel">
@@ -2032,7 +2033,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- NSFW ADULT Card -->
                 <a href="https://nsfwadult.humangen.ai" target="_blank" class="card" data-tags="nsfw,adult,uncensored,ai,image,text2image,2048px,z-image">
                     <div class="card-preview gradient-nsfw">
@@ -2056,7 +2056,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- NSFW IMAGE GENERATOR Card -->
                 <a href="https://nsfwt2i.humangen.ai" target="_blank" class="card" data-tags="nsfw,image,generator,text2image,diffusion,customizable">
                     <div class="card-preview gradient-nsfw-2">
@@ -2080,7 +2079,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- NSFW REAL Card -->
                 <a href="https://nsfwreal.humangen.ai" target="_blank" class="card" data-tags="nsfw,real,realistic,sdxl,uncensored,long-prompt">
                     <div class="card-preview gradient-nsfw-3">
@@ -2104,7 +2102,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- NSFW HUB IMAGE Card -->
                 <a href="https://pornhub.humangen.ai" target="_blank" class="card" data-tags="nsfw,hub,sdxl,stable-diffusion,long-prompt,auto">
                     <div class="card-preview gradient-nsfw-4">
@@ -2128,7 +2125,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- NSFW I2I Card -->
                 <a href="https://nsfwi2i.humangen.ai" target="_blank" class="card" data-tags="nsfw,i2i,image2image,transform,multilang,translation">
                     <div class="card-preview gradient-nsfw-5">
@@ -2152,7 +2148,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- NSFW HENTAI Card -->
                 <a href="https://hentai.humangen.ai" target="_blank" class="card" data-tags="nsfw,hentai,anime,illustration,sdxl,artwork">
                     <div class="card-preview gradient-nsfw-6">
@@ -2176,19 +2171,40 @@
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
-        <!-- Korea Section -->
+        <!-- Korea Section - 3 models로 업데이트 -->
         <section class="category-section" data-section="korea">
             <div class="category-header">
                 <span class="category-icon">🇰🇷</span>
                 <h2 class="category-title">KOREA 한국 특화</h2>
-                <span class="category-count">2 models</span>
+                <span class="category-count">3 models</span>
             </div>
             <div class="card-grid">
-
+                <!-- NEW! 41번째 카드 - AI 플립북 -->
+                <a href="https://aibook.humangen.ai" target="_blank" class="card" data-tags="korea,flipbook,pdf,ai,vlm,3d,chatbot,한국어,문서,분석,플립북,webgl,interactive,qwen,fireworks">
+                    <div class="card-preview gradient-flipbook">
+                        <span>📚</span>
+                        <span class="card-badge badge-flipbook">🆕 NEW</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">📚 AI 플립북 (AI FlipBook)</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-flipbook">VLM + 3D FlipBook + AI 챗봇!</span> - 
+                            PDF를 인터랙티브 3D 플립북으로 변환! 🤖 Qwen VLM이 문서 분석 후 질의응답.
+                            📖 WebGL 페이지 넘김 효과, 🎨 Comic Style UI, 💬 마크다운 채팅.
+                            🌐 <strong>한국어 특화</strong>
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-flipbook">3D FlipBook</span>
+                                <span class="tag-flipbook">VLM AI</span>
+                                <span class="tag-korea">한글</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
                 <!-- AI 상권 분석 시스템 Card -->
                 <a href="https://markets.humangen.ai" target="_blank" class="card" data-tags="korea,상권,창업,분석,데이터,소상공인,market,business,ai,한국,korean,startup">
                     <div class="card-preview gradient-korea">
@@ -2212,7 +2228,6 @@
                         </div>
                     </div>
                 </a>
-
                 <!-- AGI 명리학 완전판 Card -->
                 <a href="https://unse.humangen.ai" target="_blank" class="card" data-tags="korea,사주,명리학,운세,팔자,fortune,saju,ai,한국,korean,음양,오행,십성,12운성,대운">
                     <div class="card-preview gradient-fortune">
@@ -2236,12 +2251,9 @@
                         </div>
                     </div>
                 </a>
-
             </div>
         </section>
-
     </main>
-
     <!-- Footer -->
     <footer class="footer">
         <div class="footer-logo">💥 HUMANGEN.AI 💥</div>
@@ -2255,27 +2267,22 @@
         </div>
         <p class="footer-copy">© 2025 HumanGen.AI - Powered by www.ginigen.ai/en 🤗</p>
     </footer>
-
     <!-- Floating Action Button -->
     <div class="fab" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
         ⬆️
     </div>
-
     <!-- JavaScript -->
     <script>
         // Category Navigation
         const navTabs = document.querySelectorAll('.nav-tab');
         const sections = document.querySelectorAll('.category-section');
         const cards = document.querySelectorAll('.card');
-
         navTabs.forEach(tab => {
             tab.addEventListener('click', () => {
                 const category = tab.dataset.category;
-                
                 // Update active tab
                 navTabs.forEach(t => t.classList.remove('active'));
                 tab.classList.add('active');
-                
                 // Filter sections
                 if (category === 'all') {
                     sections.forEach(s => s.style.display = 'block');
@@ -2290,25 +2297,20 @@
                 }
             });
         });
-
         // Search Functionality
         const searchInput = document.getElementById('searchInput');
-        
         searchInput.addEventListener('input', (e) => {
             const query = e.target.value.toLowerCase();
-            
             cards.forEach(card => {
                 const title = card.querySelector('.card-title').textContent.toLowerCase();
                 const description = card.querySelector('.card-description').textContent.toLowerCase();
                 const tags = card.dataset.tags?.toLowerCase() || '';
-                
                 if (title.includes(query) || description.includes(query) || tags.includes(query)) {
                     card.style.display = 'block';
                 } else {
                     card.style.display = 'none';
                 }
             });
-
             // Show all sections when searching
             if (query) {
                 sections.forEach(s => s.style.display = 'block');
@@ -2317,6 +2319,5 @@
             }
         });
     </script>
-
 </body>
 </html>