Spaces:

Heartsync
/

humangen

Running

App Files Files Community

humangen / index.html

seawolf2357

Update index.html

798bd5a verified about 1 month ago

raw

history blame contribute delete

111 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-preview.gradient-hwp {
	background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 25%, #EC4899 50%, #10B981 75%, #FACC15 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;
	}
	.badge-hwp {
	background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
	color: var(--white);
	animation: hwp-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; }
	}
	@keyframes hwp-pulse {
	0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #3B82F6; }
	50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #3B82F6, 0 0 20px #10B981; }
	}
	.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-highlight-hwp {
	background: linear-gradient(135deg, #3B82F6 0%, #10B981 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;
	}
	.tag-hwp {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, #DBEAFE 0%, #D1FAE5 100%);
	border: 2px solid #3B82F6;
	border-radius: 4px;
	color: #3B82F6;
	}
	.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 42로 변경 -->

	<!-- Stats Bar -->
	<div class="stats-bar">
	<div class="stat-item">
	<div class="stat-number">42</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, hwp)" 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 - Video Editor 제거, HWP AI 추가 -->
	<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: HWP AI 어시스턴트 (NEW - Replaced Video Editor) -->
	<a href="https://hwp.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,hwp,hwpx,pdf,document,ai,assistant,한국어,문서,변환,markdown,read,see,speak,think,memory,llm,groq">
	<div class="card-preview gradient-hwp">
	<span>📄</span>
	<span class="card-badge badge-best">🏆 BEST</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📄 HWP AI 어시스턴트</h3>
	<p class="card-description">
	<span class="card-highlight-hwp">READ·SEE·SPEAK·THINK·MEMORY!</span> -
	AI가 HWP 파일을 <strong>읽고, 보고, 말하며, 생각하고 기억</strong>합니다!
	📑 HWP/HWPX/PDF 분석, 🔄 마크다운 변환, 💬 AI 채팅.
	🌐 <strong>한국어 특화</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-hwp">HWP/HWPX</span>
	<span class="tag-hwp">AI분석</span>
	<span class="tag-korea">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- BEST 3: PDF/HWP 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/HWP 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 플립북 -->
	<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://nsfwnovel2.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://nsfwadult2.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://nsfwt2i2.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://nsfwreal2.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://pornhub2.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 - 4 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">4 models</span>
	</div>
	<div class="card-grid">
	<!-- NEW! 42번째 카드 - HWP AI 어시스턴트 -->
	<a href="https://hwp.humangen.ai" target="_blank" class="card" data-tags="korea,hwp,hwpx,pdf,document,ai,assistant,한국어,문서,변환,markdown,read,see,speak,think,memory,llm,groq,fireworks">
	<div class="card-preview gradient-hwp">
	<span>📄</span>
	<span class="card-badge badge-hwp">🆕 NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📄 HWP AI 어시스턴트</h3>
	<p class="card-description">
	<span class="card-highlight-hwp">READ·SEE·SPEAK·THINK·MEMORY!</span> -
	AI가 HWP 파일을 <strong>읽고, 보고, 말하며, 생각하고 기억</strong>합니다!
	📑 HWP/HWPX/PDF/이미지 분석, 🔄 마크다운 변환, 💬 AI 채팅, 💾 대화 기록.
	🌐 <strong>한국어 특화</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-hwp">HWP/HWPX</span>
	<span class="tag-hwp">AI분석</span>
	<span class="tag-korea">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- 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">📖 FLIP</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>