Hugging Face's logo

Spaces:
Heartsync
/
humangen
Running

App Files Community
humangen / index.html
seawolf2357's picture
seawolf2357
Update index.html
93f44a2 verified
raw
history blame contribute delete
108 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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!">
<meta property="og:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
<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 {
--primary: #3B82F6;
--secondary: #EF4444;
--accent: #FACC15;
--dark: #1F2937;
--background: #FEF9C3;
--white: #FFFFFF;
--success: #10B981;
--purple: #8B5CF6;
--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);
background-image: radial-gradient(var(--dark) 1px, transparent 1px);
background-size: 20px 20px;
min-height: 100vh;
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;
color: var(--dark);
text-shadow:
5px 5px 0px var(--accent),
8px 8px 0px var(--dark);
letter-spacing: 4px;
-webkit-text-stroke: 2px var(--dark);
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;
height: auto;
border: var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: block;
}
/* ===== Enterprise Banner ===== */
.enterprise-banner {
max-width: 1200px;
margin: 1.5rem auto 0;
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--primary) 0%, #1E40AF 50%, #7C3AED 100%);
border: var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.enterprise-banner-text {
font-family: 'Bangers', cursive;
font-size: 1.4rem;
color: var(--white);
letter-spacing: 1px;
text-shadow: 2px 2px 0px var(--dark);
}
.enterprise-banner-link {
font-family: 'Bangers', cursive;
font-size: 1.5rem;
color: var(--accent);
text-decoration: none;
padding: 0.25rem 0.75rem;
background: var(--dark);
border: 2px solid var(--accent);
border-radius: 6px;
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;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* ===== Notice Box ===== */
.notice-box {
max-width: 700px;
margin: 1.5rem auto 0;
padding: 1rem 1.5rem;
background: var(--white);
border: var(--border);
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;
text-decoration: none;
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;
justify-content: center;
gap: 2rem;
padding: 1.5rem;
margin: 2rem auto;
max-width: 800px;
background: var(--white);
border: var(--border);
border-radius: var(--radius);
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;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.nav-tab {
font-family: 'Comic Neue', cursive;
font-weight: 700;
font-size: 1rem;
padding: 0.75rem 1.5rem;
border: var(--border);
border-radius: 8px;
background: var(--white);
color: var(--dark);
cursor: pointer;
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;
gap: 1rem;
margin-bottom: 1.5rem;
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;
font-size: 0.9rem;
background: var(--accent);
padding: 0.25rem 0.75rem;
border: 2px solid var(--dark);
border-radius: 20px;
}
/* ===== BEST Category Special Header ===== */
.category-header.best-header {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
padding: 1rem;
border-radius: var(--radius);
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);
font-family: 'Bangers', cursive;
font-size: 0.9rem;
padding: 0.25rem 0.75rem;
border: 2px solid var(--dark);
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);
border: var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: all 0.2s ease;
cursor: pointer;
text-decoration: none;
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;
align-items: center;
justify-content: center;
font-size: 4rem;
position: relative;
overflow: hidden;
}
.card-preview.gradient-1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-preview.gradient-2 {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.card-preview.gradient-3 {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.card-preview.gradient-4 {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.card-preview.gradient-5 {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.card-preview.gradient-6 {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.card-preview.gradient-7 {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}
.card-preview.gradient-8 {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.card-preview.gradient-9 {
background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
}
.card-preview.gradient-10 {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.card-preview.gradient-qwen {
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
}
.card-preview.gradient-qwen-lora {
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
}
.card-preview.gradient-korea {
background: linear-gradient(135deg, #0047A0 0%, #FFFFFF 50%, #C60C30 100%);
}
.card-preview.gradient-fortune {
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%);
}
.card-preview.gradient-nsfw {
background: linear-gradient(135deg, #DC2626 0%, #991B1B 50%, #7F1D1D 100%);
}
.card-preview.gradient-nsfw-2 {
background: linear-gradient(135deg, #BE185D 0%, #9D174D 50%, #831843 100%);
}
.card-preview.gradient-nsfw-3 {
background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%);
}
.card-preview.gradient-nsfw-4 {
background: linear-gradient(135deg, #EA580C 0%, #C2410C 50%, #9A3412 100%);
}
.card-preview.gradient-nsfw-5 {
background: linear-gradient(135deg, #0891B2 0%, #0E7490 50%, #155E75 100%);
}
.card-preview.gradient-nsfw-6 {
background: linear-gradient(135deg, #DB2777 0%, #BE185D 50%, #9D174D 100%);
}
.card-preview.gradient-novel {
background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 30%, #EC4899 70%, #F43F5E 100%);
}
.card-preview.gradient-exam {
background: linear-gradient(135deg, #0369A1 0%, #0284C7 30%, #06B6D4 70%, #22D3EE 100%);
}
.card-preview.gradient-best {
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 30%, #EC4899 70%, #8B5CF6 100%);
}
.card-preview.gradient-youtube {
background: linear-gradient(135deg, #FF0000 0%, #CC0000 30%, #990000 70%, #1F2937 100%);
}
.card-preview.gradient-minimax {
background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 50%, #60A5FA 100%);
}
.card-preview.gradient-kimi {
background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #C084FC 100%);
}
.card-preview.gradient-deepseek {
background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
}
.card-preview.gradient-glm {
background: linear-gradient(135deg, #DC2626 0%, #F97316 50%, #FBBF24 100%);
}
.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;
right: 12px;
font-family: 'Bangers', cursive;
font-size: 0.85rem;
padding: 0.35rem 0.75rem;
border: 2px solid var(--dark);
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;
letter-spacing: 1px;
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);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-qwen {
background: #6366F1;
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-korea {
background: #0047A0;
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-fortune {
background: #8B5CF6;
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-nsfw {
background: #DC2626;
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-novel {
background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-exam {
background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-best {
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-youtube {
background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-llm {
background: linear-gradient(135deg, #1E40AF 0%, #7C3AED 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-minimax {
background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-kimi {
background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-deepseek {
background: linear-gradient(135deg, #059669 0%, #10B981 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-glm {
background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
color: var(--white);
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.card-highlight-motion {
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
color: var(--white);
font-weight: 700;
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;
align-items: center;
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;
padding: 0.25rem 0.5rem;
background: var(--background);
border: 2px solid var(--dark);
border-radius: 4px;
}
.tag-qwen {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #EEF2FF;
border: 2px solid #6366F1;
border-radius: 4px;
color: #6366F1;
}
.tag-korea {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #EFF6FF;
border: 2px solid #0047A0;
border-radius: 4px;
color: #0047A0;
}
.tag-fortune {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #F3E8FF;
border: 2px solid #8B5CF6;
border-radius: 4px;
color: #8B5CF6;
}
.tag-nsfw {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #FEE2E2;
border: 2px solid #DC2626;
border-radius: 4px;
color: #DC2626;
}
.tag-novel {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 100%);
border: 2px solid #7C3AED;
border-radius: 4px;
color: #7C3AED;
}
.tag-exam {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, #E0F2FE 0%, #CFFAFE 100%);
border: 2px solid #0284C7;
border-radius: 4px;
color: #0284C7;
}
.tag-best {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border: 2px solid #F59E0B;
border-radius: 4px;
color: #D97706;
}
.tag-youtube {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #FEE2E2;
border: 2px solid #FF0000;
border-radius: 4px;
color: #CC0000;
}
.tag-llm {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, #EEF2FF 0%, #F3E8FF 100%);
border: 2px solid #1E40AF;
border-radius: 4px;
color: #1E40AF;
}
.tag-minimax {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #DBEAFE;
border: 2px solid #1E3A8A;
border-radius: 4px;
color: #1E3A8A;
}
.tag-kimi {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #F3E8FF;
border: 2px solid #7C3AED;
border-radius: 4px;
color: #7C3AED;
}
.tag-deepseek {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #D1FAE5;
border: 2px solid #059669;
border-radius: 4px;
color: #059669;
}
.tag-glm {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: #FEF3C7;
border: 2px solid #DC2626;
border-radius: 4px;
color: #DC2626;
}
.tag-motion {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 100%);
border: 2px solid #8B5CF6;
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;
padding: 3rem 1rem;
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;
gap: 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.footer-link {
font-weight: 700;
color: var(--dark);
text-decoration: none;
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;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: var(--primary);
border: var(--border);
border-radius: 50%;
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
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 {
font-size: 2.5rem;
text-shadow:
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 {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
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; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.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;
font-family: 'Comic Neue', cursive;
font-size: 1.1rem;
font-weight: 700;
border: var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
background: var(--white);
color: var(--dark);
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;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<h1 class="logo">๐Ÿ’ฅ HUMANGEN.AI ๐Ÿ’ฅ</h1>
<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>
<span style="color:#1F2937;font-weight:700"> โ†’ </span>
<a href="mailto:arxivgpt@gmail.com" style="color:#3B82F6;font-weight:700;font-family:'Comic Neue',cursive">๐Ÿ“ง arxivgpt@gmail.com</a>
</div>
</header>
<!-- "์ˆ˜์ •ํ•  ๋ถ€๋ถ„ ์ฒซ๋ฒˆ์งธ" - AI Models 41๋กœ ๋ณ€๊ฒฝ -->
<!-- Stats Bar -->
<div class="stats-bar">
<div class="stat-item">
<div class="stat-number">41</div>
<div class="stat-label">AI Models</div>
</div>
<div class="stat-item">
<div class="stat-number">70K+</div>
<div class="stat-label">Daily Active Users</div>
</div>
<div class="stat-item">
<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, camera, 3d, flipbook)" id="searchInput">
</div>
<!-- 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="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">
<span class="category-icon">๐Ÿ†</span>
<h2 class="category-title">BEST PICKS - EDITOR'S CHOICE</h2>
<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">
<span>๐Ÿ“Š</span>
<span class="card-badge badge-best">๐Ÿ† BEST</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ“Š YouTube Trend Analyzer</h3>
<p class="card-description">
<span class="card-highlight-youtube">AI-Powered YouTube Analytics</span> -
Search 100-1000 videos with <strong>AI Pick ratings</strong>!
๐Ÿ”ฅ Trending surge detection, ๐Ÿ“ˆ 48h growth tracking,
5 LLM tools (Keyword, Trend, Ideas, Channel, Competitor).
๐ŸŒ <strong>EN/ํ•œ๊ธ€</strong>
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-youtube">YouTube</span>
<span class="tag-youtube">AI Pick</span>
<span class="tag">Trend</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>โœ‚๏ธ</span>
<span class="card-badge badge-best">๐Ÿ† BEST</span>
</div>
<div class="card-content">
<h3 class="card-title">โœ‚๏ธ Video Editor</h3>
<p class="card-description">
<span class="card-highlight-best">Full-Featured Timeline Editor</span> -
Professional video editing in your browser! Cut, trim, add text overlays,
merge clips, and export to WebM/MP4. No software installation needed.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-best">Timeline</span>
<span class="tag-best">Text Overlay</span>
<span class="tag">Export</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽ“</span>
<span class="card-badge badge-best">๐Ÿ† BEST</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!</span> -
Transform PDF โ†’ Up to <strong>50 questions</strong> (2~5 choice)!
๐Ÿ“ Generate โ†’ ๐ŸŽฏ Take Exam โ†’ ๐Ÿ“Š Get Score!
Download PDF. ๐ŸŒ <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>
<!-- 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 ํ”Œ๋ฆฝ๋ถ (AI FlipBook)</h3>
<p class="card-description">
<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-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>
<!-- 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">TEXT & LANGUAGE</h2>
<span class="category-count">7 models</span>
</div>
<div class="card-grid">
<!-- 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">๐Ÿค– Help Desk & Chatbot</h3>
<p class="card-description">
<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-helpdesk">Chatbot</span>
<span class="tag-helpdesk">Guide</span>
<span class="tag">EN/ํ•œ๊ธ€</span>
</div>
<span class="card-arrow">โ†’</span>
</div>
</div>
</a>
<!-- 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>
<!-- "์นดํ…Œ๊ณ ๋ฆฌ ์นด์šด๋“œ ์ˆ˜์ • ๋‘๋ฒˆ์งธ" -->
<!-- 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.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">FLUX.2</span>
<span class="tag">32B</span>
<span class="tag">Turbo</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽจ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽจ Qwen Image Layer Decomposer</h3>
<p class="card-description">
Decompose any image into magical layers!
Export to PPTX & ZIP for editing. Perfect for designers.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Layer</span>
<span class="tag">PPTX</span>
<span class="tag">Qwen</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ–Œ๏ธ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ–Œ๏ธ Qwen Image Edit Studio</h3>
<p class="card-description">
Upload an image and describe your edit - AI transforms it instantly!
Lightning-fast 4-step inference powered by Qwen.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Edit</span>
<span class="tag">Transform</span>
<span class="tag">Qwen</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ“ท</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ“ท Camera Angle Control</h3>
<p class="card-description">
Control camera angles with AI magic! Rotate, zoom, tilt & wide-angle.
Generate transition videos between views.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Camera</span>
<span class="tag">3D</span>
<span class="tag">Video</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽญ</span>
<span class="card-badge badge-hot">๐Ÿ”ฅ HOT</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽญ Qwen Image to LoRA</h3>
<p class="card-description">
Generate custom LoRA models from your images instantly.
Train style LoRAs with Qwen-Image and create unique AI art.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">LoRA</span>
<span class="tag">Style</span>
<span class="tag">Qwen</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>โšก</span>
<span class="card-badge badge-hot">๐Ÿ”ฅ HOT</span>
</div>
<div class="card-content">
<h3 class="card-title">โšก Z-Image Turbo Plus</h3>
<p class="card-description">
Ultra-fast image generation with SOMA prompt enhancement.
Create stunning visuals in seconds with AI-powered prompt optimization.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Fast</span>
<span class="tag">SOMA</span>
<span class="tag">HD</span>
</div>
<span class="card-arrow">โ†’</span>
</div>
</div>
</a>
</div>
</section>
<!-- Video Generation Section -->
<section class="category-section" data-section="video">
<div class="category-header">
<span class="category-icon">๐ŸŽฌ</span>
<h2 class="category-title">VIDEO GENERATION</h2>
<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">
<span>๐Ÿ“Š</span>
<span class="card-badge badge-youtube">๐Ÿ“ˆ TREND</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ“Š YouTube Trend Analyzer</h3>
<p class="card-description">
<span class="card-highlight-youtube">AI-Powered YouTube Analytics</span> -
Search 100-1000 videos, AI Pick ratings, surge detection,
growth tracking, and 5 LLM analysis tools. EN/ํ•œ๊ธ€
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-youtube">YouTube</span>
<span class="tag-youtube">Analytics</span>
<span class="tag">AI</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽฌ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽฌ Uncensored Text to Video</h3>
<p class="card-description">
Transform your ideas into stunning AI-generated videos!
Powered by Wan 1.3B with AI prompt enhancement.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">T2V</span>
<span class="tag">Wan</span>
<span class="tag">HD</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ–ผ๏ธ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ–ผ๏ธ Uncensored Image to Video</h3>
<p class="card-description">
Upload an image and create amazing videos!
Powered by Wan 2.2 with up to 10 seconds duration.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">I2V</span>
<span class="tag">Wan 2.2</span>
<span class="tag">10s</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>โœ‚๏ธ</span>
<span class="card-badge badge-hot">๐Ÿ”ฅ HOT</span>
</div>
<div class="card-content">
<h3 class="card-title">โœ‚๏ธ Video Editor</h3>
<p class="card-description">
Full-featured timeline video editor in your browser.
Cut, trim, add text overlays, merge clips, and export to WebM/MP4.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Timeline</span>
<span class="tag">Text</span>
<span class="tag">Export</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽž๏ธ</span>
<span class="card-badge badge-hot">๐Ÿ”ฅ HOT</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽž๏ธ Last Frame Extractor</h3>
<p class="card-description">
Extract the last frame from any video instantly.
Upload a video, get the final frame as a downloadable image.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Extract</span>
<span class="tag">Frame</span>
<span class="tag">Fast</span>
</div>
<span class="card-arrow">โ†’</span>
</div>
</div>
</a>
</div>
</section>
<!-- Audio Generation Section -->
<section class="category-section" data-section="audio">
<div class="category-header">
<span class="category-icon">๐ŸŽต</span>
<h2 class="category-title">AUDIO GENERATION</h2>
<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">
<span>๐ŸŽต</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽต MMAudio Studio</h3>
<p class="card-description">
Generate audio from text or video! Video search, V2A, T2A modes.
Korean language supported ํ•œ๊ธ€์ง€์›!
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">V2A</span>
<span class="tag">T2A</span>
<span class="tag">ํ•œ๊ธ€</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>โœ‚๏ธ</span>
<span class="card-badge badge-hot">๐Ÿ”ฅ HOT</span>
</div>
<div class="card-content">
<h3 class="card-title">โœ‚๏ธ Audio Segment Extractor</h3>
<p class="card-description">
Cut any segment from your audio file with timeline visualization.
Select start/end time and download the extracted segment instantly.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Cut</span>
<span class="tag">Extract</span>
<span class="tag">Timeline</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">
<span class="category-icon">๐ŸŽฎ</span>
<h2 class="category-title">3D & MODELING</h2>
<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">
<span>๐Ÿ•บ</span>
<span class="card-badge badge-motion">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ•บ HY-Motion Generator</h3>
<p class="card-description">
<span class="card-highlight-motion">Text to 3D Human Motion!</span> -
Transform text descriptions into realistic 3D human animations!
AI prompt rewriting, <strong>FBX export</strong> for games & 3D software. Walk, dance, jump & more!
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-motion">Text-to-Motion</span>
<span class="tag-motion">FBX</span>
<span class="tag">3D Anim</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽฎ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽฎ TRELLIS.2 Text/Image-to-3D</h3>
<p class="card-description">
Generate high-quality 3D models from text or images using Microsoft TRELLIS.2.
Export to GLB format for games, AR/VR, and 3D printing.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Text/Image-to-3D</span>
<span class="tag">GLB</span>
<span class="tag">TRELLIS.2</span>
</div>
<span class="card-arrow">โ†’</span>
</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">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">
<span>๐Ÿ”’</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ”’ Ansim Blur - Face Privacy</h3>
<p class="card-description">
AI-powered face detection & privacy protection!
Gaussian blur or mosaic for images & videos.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Face</span>
<span class="tag">Blur</span>
<span class="tag">Privacy</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽฏ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽฏ QR Canvas+ Generator</h3>
<p class="card-description">
Create customized QR codes with professional styling!
URL, Email, Phone, WiFi, vCard & decorative borders.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">QR Code</span>
<span class="tag">Custom</span>
<span class="tag">Style</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿท๏ธ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿท๏ธ BadgeCraft Generator</h3>
<p class="card-description">
Create beautiful shields.io badges with live preview!
Perfect for GitHub READMEs, websites & documentation.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">Badge</span>
<span class="tag">Shields</span>
<span class="tag">HTML</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿงฌ</span>
<span class="card-badge badge-new">โœจ NEW</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿงฌ DNA Diffusion Generator</h3>
<p class="card-description">
Generate DNA sequences with AI diffusion model!
Translate to protein & analyze structure with LLM.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag">DNA</span>
<span class="tag">Protein</span>
<span class="tag">Bio</span>
</div>
<span class="card-arrow">โ†’</span>
</div>
</div>
</a>
</div>
</section>
<!-- NSFW Section -->
<section class="category-section" data-section="nsfw">
<div class="category-header">
<span class="category-icon">๐Ÿ”ž</span>
<h2 class="category-title">NSFW GENERATION</h2>
<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">
<span>๐Ÿ“–</span>
<span class="card-badge badge-novel">โœ๏ธ NOVEL</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ“– AI Adult Novel Generator</h3>
<p class="card-description">
<span class="card-highlight-novel">Professional Erotic Fiction Writer</span> -
Create passionate stories with 10 Golden Writing Rules!
SOMA AI proofreading, multi-episode continuation, book-style output.
๐ŸŒ <strong>English / ํ•œ๊ตญ์–ด</strong> bilingual support.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-novel">Novel</span>
<span class="tag-novel">EN/ํ•œ๊ธ€</span>
<span class="tag">Multi-EP</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ–ผ๏ธ</span>
<span class="card-badge badge-nsfw">๐Ÿ”ž ADULT</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ–ผ๏ธ NSFW ADULT</h3>
<p class="card-description">
<span class="card-highlight-nsfw">Uncensored AI Image Generation</span> -
Generate uncensored AI images from text prompts!
Powered by Z-Image-Turbo with high-quality output up to 2048px.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-nsfw">Uncensored</span>
<span class="tag-nsfw">2048px</span>
<span class="tag">Z-Image</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽจ</span>
<span class="card-badge badge-nsfw">๐Ÿ”ž T2I</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽจ NSFW IMAGE GENERATOR</h3>
<p class="card-description">
<span class="card-highlight-nsfw">Advanced Diffusion Models</span> -
Generate high-quality AI images from text prompts.
Powered by advanced diffusion models with customizable parameters.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-nsfw">Diffusion</span>
<span class="tag-nsfw">Custom</span>
<span class="tag">T2I</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ“ธ</span>
<span class="card-badge badge-nsfw">๐Ÿ”ž REAL</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ“ธ NSFW REAL</h3>
<p class="card-description">
<span class="card-highlight-nsfw">Realistic SDXL Generation</span> -
Generate high-quality uncensored images with AI!
Powered by SDXL with long prompt support and advanced settings.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-nsfw">Realistic</span>
<span class="tag-nsfw">SDXL</span>
<span class="tag">Long Prompt</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽฏ</span>
<span class="card-badge badge-nsfw">๐Ÿ”ž HUB</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽจ NSFW HUB IMAGE</h3>
<p class="card-description">
<span class="card-highlight-nsfw">Stable Diffusion XL</span> -
Generate stunning AI images with Stable Diffusion XL!
Supports long prompts with automatic processing.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-nsfw">SDXL</span>
<span class="tag-nsfw">Auto</span>
<span class="tag">Long Prompt</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ”„</span>
<span class="card-badge badge-nsfw">๐Ÿ”ž I2I</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ”„ NSFW I2I</h3>
<p class="card-description">
<span class="card-highlight-nsfw">Image-to-Image Transform</span> -
Transform images with uncensored AI! Text-to-Image and Image-to-Image
generation with multi-language prompt support and auto-translation.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-nsfw">I2I</span>
<span class="tag-nsfw">Multi-Lang</span>
<span class="tag">Transform</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐ŸŽญ</span>
<span class="card-badge badge-nsfw">๐Ÿ”ž HENTAI</span>
</div>
<div class="card-content">
<h3 class="card-title">๐ŸŽญ NSFW HENTAI</h3>
<p class="card-description">
<span class="card-highlight-nsfw">Anime-Style Artwork</span> -
Generate stunning AI illustrations with SDXL!
Create detailed anime-style artwork with advanced prompt controls and customizable settings.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-nsfw">Anime</span>
<span class="tag-nsfw">SDXL</span>
<span class="tag">Illustration</span>
</div>
<span class="card-arrow">โ†’</span>
</div>
</div>
</a>
</div>
</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">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">
<span>๐Ÿช</span>
<span class="card-badge badge-korea">๐Ÿ‡ฐ๐Ÿ‡ท KOREA</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿช AI ์ƒ๊ถŒ ๋ถ„์„ ์‹œ์Šคํ…œ</h3>
<p class="card-description">
<span class="card-highlight-korea">์ „๊ตญ ์ƒ๊ฐ€(์ƒ๊ถŒ) ๋ฐ์ดํ„ฐ ์‹ค์‹œ๊ฐ„ ๋ถ„์„</span> -
17๊ฐœ ์‹œ๋„ ์ƒ๊ถŒ ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ AI ๋ถ„์„! 10๊ฐ€์ง€ ์‹ฌ์ธต ์ธ์‚ฌ์ดํŠธ,
ํžˆํŠธ๋งต ์‹œ๊ฐํ™”, AI ์ฑ—๋ด‡ ์ƒ๋‹ด๊นŒ์ง€. ์ฐฝ์—…ยทํˆฌ์ž ์˜์‚ฌ๊ฒฐ์ • ์ง€์›.
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-korea">์ƒ๊ถŒ๋ถ„์„</span>
<span class="tag-korea">์ฐฝ์—…</span>
<span class="tag">AI์ฑ—๋ด‡</span>
</div>
<span class="card-arrow">โ†’</span>
</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">
<span>๐Ÿ”ฎ</span>
<span class="card-badge badge-fortune">๐Ÿ”ฅ ์ŠคํŠธ๋ฆฌ๋ฐ</span>
</div>
<div class="card-content">
<h3 class="card-title">๐Ÿ”ฎ AGI ๋ช…๋ฆฌํ•™ ์™„์ „ํŒ</h3>
<p class="card-description">
<span class="card-highlight-fortune">์‚ฌ์ฃผํŒ”์ž AI ์™„์ „ ๋ถ„์„</span> -
๐Ÿ’ง๋ฌผ๋‹ญ vs ๐ŸŒถ๏ธ๋ถˆ๋‹ญ ๋ชจ๋“œ! ์‹ญ์„ฑ + 12์šด์„ฑ + ์˜คํ–‰ ๋ถ„์„,
์Œ๋ ฅ/์–‘๋ ฅ ์ง€์›, ๋Œ€์šด/์„ธ์šด ์‚ฌ์ดํด ์ฐจํŠธ๊นŒ์ง€. ์‹ค์‹œ๊ฐ„ ์ŠคํŠธ๋ฆฌ๋ฐ AI ํ•ด์„!
</p>
<div class="card-meta">
<div class="card-tags">
<span class="tag-fortune">์‚ฌ์ฃผํŒ”์ž</span>
<span class="tag-fortune">์šด์„ธ๋ถ„์„</span>
<span class="tag">AIํ•ด์„</span>
</div>
<span class="card-arrow">โ†’</span>
</div>
</div>
</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-logo">๐Ÿ’ฅ HUMANGEN.AI ๐Ÿ’ฅ</div>
<div class="footer-links">
<a href="#" class="footer-link">About</a>
<a href="#" class="footer-link">Blog</a>
<a href="#" class="footer-link">API</a>
<a href="#" class="footer-link">Discord</a>
<a href="#" class="footer-link">Twitter</a>
<a href="#" class="footer-link">GitHub</a>
</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');
} else {
sections.forEach(s => {
if (s.dataset.section === category) {
s.style.display = 'block';
} else {
s.style.display = 'none';
}
});
}
});
});
// 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');
navTabs.forEach(t => t.classList.remove('active'));
navTabs[0].classList.add('active');
}
});
</script>
</body>
</html>