Spaces:

Hosdroid
/

Aplood

Running

App Files Files Community

Aplood / hfhorror.html

Hosdroid

Create hfhorror.html

1a304de verified 22 days ago

Raw

History Blame Contribute Delete

63.5 kB

	<!DOCTYPE html>
	<html lang="fa" dir="rtl">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>تحلیل جامع خطا 504 Gateway Timeout در Hugging Face Spaces</title>

	<!-- Essential CDN Libraries -->
	<script src="https://cdn.tailwindcss.com"></script>
	<script>
	tailwind.config = {
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	primary: {
	50: 'hsl(210, 75%, 95%)',
	100: 'hsl(210, 75%, 85%)',
	200: 'hsl(210, 75%, 75%)',
	300: 'hsl(210, 75%, 65%)',
	400: 'hsl(210, 75%, 55%)',
	500: 'hsl(210, 75%, 40%)',
	600: 'hsl(210, 75%, 35%)',
	700: 'hsl(210, 75%, 25%)',
	800: 'hsl(210, 75%, 15%)',
	900: 'hsl(210, 75%, 10%)'
	},
	accent: {
	50: 'hsl(270, 70%, 95%)',
	100: 'hsl(270, 70%, 85%)',
	200: 'hsl(270, 70%, 75%)',
	300: 'hsl(270, 70%, 65%)',
	400: 'hsl(270, 70%, 60%)',
	500: 'hsl(270, 70%, 55%)',
	600: 'hsl(270, 70%, 50%)',
	700: 'hsl(270, 70%, 40%)',
	800: 'hsl(270, 70%, 30%)',
	900: 'hsl(270, 70%, 20%)'
	}
	}
	}
	}
	}
	</script>
	<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
	<script src="https://unpkg.com/lucide@latest"></script>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>

	<!-- Preline UI Components -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/preline@2.0.3/dist/preline.min.css">
	<script defer src="https://cdn.jsdelivr.net/npm/preline@2.0.3/dist/preline.js"></script>

	<!-- Custom Styles -->
	<style>
	html { scroll-behavior: smooth; }

	@media (prefers-reduced-motion: reduce) {
	, ::before, *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	}
	html { scroll-behavior: auto; }
	}

	.btn-interactive {
	transition: all 0.2s ease-out;
	}

	.btn-interactive:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	.btn-interactive:active {
	transform: scale(0.95);
	}

	.card-interactive {
	transition: all 0.3s ease-out;
	border: 1px solid transparent;
	--border-lightness: 40%;
	}

	.dark .card-interactive {
	--border-lightness: 60%;
	}

	.card-interactive:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	filter: brightness(0.98);
	}

	/* Primary colored cards */
	.card-interactive[class*="primary"]:hover,
	.card-interactive[class*="white"]:hover,
	.card-interactive[class*="gray-"]:hover {
	border-color: hsl(210, 75%, var(--border-lightness));
	}

	/* Accent colored cards */
	.card-interactive[class*="accent"]:hover {
	border-color: hsl(270, 70%, var(--border-lightness));
	}
	</style>

	<!-- Dark Mode Toggle Script -->
	<script>
	function toggleDarkMode() {
	document.body.classList.toggle('dark');
	const isDark = document.body.classList.contains('dark');
	document.getElementById('sunIcon').style.display = isDark ? 'block' : 'none';
	document.getElementById('moonIcon').style.display = isDark ? 'none' : 'block';
	}
	</script>
	</head>

	<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
	<!-- Citation System Script -->
	<script>
	function initCitationSystem() {
	let i = 1, map = new Map();
	document.querySelectorAll('[data-ref]').forEach(el => {
	if (el.dataset.citationProcessed) return;
	const raw = (el.getAttribute('data-ref')\|\|'').trim();
	if (!raw) return;

	const parts = raw.split('\|');
	const url = parts[0].trim();
	const idx = (parts[1]\|\|'').trim() \|\| map.get(raw) \|\| (map.set(raw, String(i)), String(i++));

	if (!el.textContent \|\| !el.textContent.trim()) { el.dataset.citationProcessed = 'true'; return; }

	const btn = document.createElement('sup'); btn.textContent = String(idx);
	Object.assign(btn.style, { fontSize:'8px', color:'#fff', cursor:'pointer', top: '1px', fontWeight:'bold', backgroundColor:'#0284c7', borderRadius:'50%', transition:'all .15s', userSelect:'none', minWidth:'19px', height:'19px', marginLeft:'6px', display:'inline-flex', alignItems:'center', justifyContent:'center', boxShadow:'0 1px 3px rgba(0,0,0,.2)', lineHeight:'1'});
	btn.addEventListener('mouseenter', ()=> Object.assign(btn.style, { backgroundColor:'#0369a1', transform:'scale(1.12)' }));
	btn.addEventListener('mouseleave', ()=> Object.assign(btn.style, { backgroundColor:'#0284c7', transform:'scale(1)' }));
	btn.addEventListener('click', e=>{ e.preventDefault(); e.stopPropagation(); window.open(url, '_blank'); });

	el.appendChild(btn); el.dataset.citationProcessed = 'true';
	});
	}
	</script>

	<!-- Progress Bar -->
	<div class="fixed top-0 left-0 h-1 bg-primary-500 dark:bg-primary-400 z-[60] transition-all duration-300 ease-out" id="progressBar" style="width: 0%;"></div>

	<!-- Floating Header -->
	<header class="fixed top-0 left-0 right-0 z-50 backdrop-blur bg-gray-50/90 dark:bg-gray-900/90 border-b border-primary-500/20 dark:border-primary-600/20" data-aos="fade-down">
	<nav class="max-w-7xl mx-auto px-6 py-4">
	<div class="flex items-center justify-between">
	<h1 class="text-xl font-bold text-primary-700 dark:text-primary-300">تحلیل 504 Gateway Timeout</h1>

	<div class="flex items-center space-x-6 space-x-reverse">
	<a href="#home" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">خانه</a>
	<a href="#overview" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">بررسی</a>
	<a href="#cloudfront" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">کلاودفرانت</a>
	<a href="#spaces" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">اسپیس‌ها</a>
	<a href="#api" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">APIها</a>
	<a href="#cases" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">موارد</a>
	<a href="#conclusion" class="btn-interactive text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">نتیجه</a>

	<button onclick="toggleDarkMode()" class="btn-interactive p-2 rounded-lg bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-700 transition-all">
	<i data-lucide="sun" id="sunIcon" class="w-5 h-5" style="display: none;"></i>
	<i data-lucide="moon" id="moonIcon" class="w-5 h-5" style="display: block;"></i>
	</button>
	</div>
	</div>
	</nav>
	</header>

	<!-- Main Content -->
	<main class="min-h-screen">
	<!-- Hero Section -->
	<section id="home" class="py-40 bg-primary-50/50 dark:bg-gray-900" data-aos="fade-up">
	<div class="max-w-5xl mx-auto px-6">
	<div class="text-center space-y-6">
	<h2 class="text-4xl md:text-5xl font-bold text-primary-700 dark:text-primary-300">
	تحلیل جامع خطا 504 Gateway Timeout
	</h2>
	<p class="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
	بررسی فنی و عمیق علل خطا 504 Gateway Timeout در فضاهای Hugging Face از منظر تمام اجزای مرتبط از جمله APIها، پیکربندی‌های CloudFront، اتصالات داخلی و لاگ‌های سرور
	</p>
	<div class="flex justify-center space-x-4 space-x-reverse mt-8">
	<div class="card-interactive px-6 py-4 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="text-3xl font-bold text-primary-600 dark:text-primary-400">۱ هفته</div>
	<div class="text-sm text-gray-600 dark:text-gray-400 mt-1">بازه زمانی تحقیق</div>
	</div>
	<div class="card-interactive px-6 py-4 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="text-3xl font-bold text-accent-600 dark:text-accent-400">۳۰ ثانیه</div>
	<div class="text-sm text-gray-600 dark:text-gray-400 mt-1">زمان انتظار پیش‌فرض</div>
	</div>
	<div class="card-interactive px-6 py-4 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="text-3xl font-bold text-primary-600 dark:text-primary-400">۵۰۴</div>
	<div class="text-sm text-gray-600 dark:text-gray-400 mt-1">کد خطای گیت‌وی</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Overview Section -->
	<section id="overview" class="py-20 bg-white/80 dark:bg-gray-900" data-aos="fade-up">
	<div class="max-w-6xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300" data-ref="https://discuss.huggingface.co/t/frequent-504-gateway-timeout-errors-on-inference-api-sentence-transformers-all-minilm-l6-v2/173034\|14">
	مقدمه: درک خطا 504 Gateway Timeout
	</h2>

	<div class="grid md:grid-cols-2 gap-8 items-start mb-8">
	<div class="space-y-4">
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
	خطای 504 Gateway Timeout در Hugging Face معمولاً نشان‌دهنده این است که روتر گیت‌وی (gateway) برای دریافت پاسخ از سمت سرور بالادست بیش از حد منتظر مانده است. این خطا می‌تواند ناشی از مشکلات متعددی باشد از جمله تأخیر در سرورهای داخلی، مشکلات اتصال شبکه، یا پیکربندی‌های نادرست در لایه‌های مختلف زیرساخت.
	</p>

	<div class="pl-4 pr-3 py-3 border-r-4 border-primary-500 bg-primary-50/40 dark:bg-primary-900/30 rounded-l-lg">
	<p class="text-sm font-medium text-primary-900 dark:text-primary-100 leading-relaxed" data-ref="https://discuss.huggingface.co/t/504-gateway-timeout-with-http-request/24018\|19">
	<i data-lucide="info" class="inline-block w-4 h-4 ml-1.5 -mt-0.5"></i>
	تایم‌اوت در اسپیس‌ها به‌طور واقعی‌گرایانه برای جلوگیری از آویزان ماندن درخواست‌ها در صورت کرش شدن فضای اجرایی طراحی شده است.
	</p>
	</div>
	</div>

	<img
	src="https://cdn.qwenlm.ai/ee31f97d-561b-4613-9a74-a53a379a47a4/0090b589-599a-4b95-a016-83b62afcef2f/60a16d0c-740c-4f5c-ab00-19a5216f870d.png?key=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXNvdXJjZV91c2VyX2lkIjoiZWUzMWY5N2QtNTYxYi00NjEzLTlhNzQtYTUzYTM3OWE0N2E0IiwicmVzb3VyY2VfaWQiOiIwMDkwYjU4OS01OTlhLTRiOTUtYTAxNi04M2I2MmFmY2VmMmYiLCJyZXNvdXJjZV9jaGF0X2lkIjpudWxsfQ.-C2BPhSrwGcbfuZk7OaPvqbJW4QyQOep43G1IN7h7jY"
	alt="نمودار سیستمی از زیرساخت Hugging Face با نمایش سه لایه افقی اصلی: لایه مشتری در بالا با نماد مرورگر سفید روی پس‌زمینه آبی روشن، لایه گیت‌وی در وسط با نماد سرور آبی تیره با نوشته 'Gateway' و فلش‌های دوتایی نشان‌دهنده ارتباط داده، و لایه سرورهای داخلی در پایین با سه سرور بنفش روشن با نوشته‌های 'Origin Server 1'، 'Origin Server 2'، و 'Origin Server 3'. خطوط ارتباطی بین لایه‌ها با رنگ آبی متوسط و علامت تعجب قرمز روی خط اتصال بین گیت‌وی و سرورهای بالادست نشان‌دهنده خطا 504. عناصر با فونت سنس‌سریف فارسی و رنگ‌های اصلی آبی (#1a73b3) و بنفش (#6366f1) برای حفظ اتساق با پالت رنگی صفحه."
	class="w-full rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300"
	/>
	</div>

	<div class="grid md:grid-cols-3 gap-6">
	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="server" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<h3 class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://discuss.huggingface.co/t/frequent-504-gateway-timeout-errors-on-inference-api-sentence-transformers-all-minilm-l6-v2/173034\|14">ارتباط گیت‌وی</h3>
	</div>
	<p class="text-sm text-gray-700 dark:text-gray-300">
	گیت‌وی منتظر پاسخ از سرور بالادست می‌ماند و در صورت عدم دریافت پاسخ در زمان تعیین‌شده، خطا را بازگرداند
	</p>
	</div>

	<div class="card-interactive p-6 bg-accent-50/50 dark:bg-accent-900/20 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-accent-100 dark:bg-accent-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="network" class="w-6 h-6 text-accent-600 dark:text-accent-400"></i>
	</div>
	<h3 class="font-semibold text-lg text-accent-700 dark:text-accent-300" data-ref="https://repost.aws/questions/QUpoRbWc6XTSamD7LZ7RJmzg/cloudfront-sometimes-send-delayed-request-to-origin-server\|87">پیکربندی‌های شبکه</h3>
	</div>
	<p class="text-sm text-gray-700 dark:text-gray-300">
	تنظیمات زمان انتظار اتصال، تعداد تلاش‌ها، و زمان پاسخ‌دهی در CloudFront می‌تواند تأثیر مستقیمی بر خطا داشته باشد
	</p>
	</div>

	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="activity" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<h3 class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://discuss.huggingface.co/t/504-gateway-timeout-with-http-request/24018\|19">وضعیت سرور</h3>
	</div>
	<p class="text-sm text-gray-700 dark:text-gray-300">
	کرش شدن فضای اجرایی یا عدم دریافت پاسخ از سرورهای داخلی می‌تواند منجر به تایم‌اوت شود
	</p>
	</div>
	</div>
	</div>
	</section>

	<!-- CloudFront Configuration Section -->
	<section id="cloudfront" class="py-20 bg-primary-50/50 dark:bg-gray-800" data-aos="fade-up">
	<div class="max-w-6xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300">
	پیکربندی‌های CloudFront و زمان‌های انتظار
	</h2>

	<div class="grid md:grid-cols-2 gap-8 items-start mb-8">
	<div class="space-y-4">
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed" data-ref="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistValuesOrigin.html\|1">
	به‌طور پیش‌فرض، CloudFront تا
	<span class="mx-1 px-1.5 py-0.5 rounded-md bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-300 font-semibold text-sm">۳۰ ثانیه</span>
	(۳ تلاش با ۱۰ ثانیه هر کدام) منتظر اتصال به اوریجین اولیه می‌ماند قبل از تلاش برای اتصال به اوریجین ثانویه یا بازگرداندن خطا.
	</p>

	<p class="text-gray-700 dark:text-gray-300 leading-relaxed" data-ref="https://repost.aws/knowledge-center/cloudfront-custom-origin-response\|4">
	برای افزایش زمان انتظار CloudFront برای دریافت پاسخ از اوریجین، مقدار زمان پاسخ‌دهی را به‌روزرسانی کنید. مقدار پیش‌فرض
	<span class="mx-1 px-1.5 py-0.5 rounded-md bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-300 font-semibold text-sm">۳۰ ثانیه</span>
	است اما می‌توان آن را افزایش داد.
	</p>

	<div class="pl-4 pr-3 py-3 border-r-4 border-amber-500 bg-amber-50/40 dark:bg-amber-900/30 rounded-l-lg">
	<p class="text-sm font-medium text-amber-900 dark:text-amber-100 leading-relaxed" data-ref="https://github.com/hashicorp/terraform-provider-aws/issues/934\|6">
	<i data-lucide="alert-triangle" class="inline-block w-4 h-4 ml-1.5 -mt-0.5"></i>
	اگر نیاز به افزایش محدوده‌های زمان انتظار به عدد کمتر از ۴ ثانیه یا بیشتر از ۶۰ ثانیه دارید، با مرکز پشتیبانی AWS تماس بگیرید.
	</p>
	</div>
	</div>

	<div class="card-interactive p-6 rounded-xl shadow-md bg-white/90 backdrop-blur-sm dark:bg-gray-900 h-80">
	<canvas id="timeoutChart"></canvas>
	</div>
	</div>

	<div class="hs-accordion-group space-y-4">
	<div class="hs-accordion card-interactive bg-white/80 backdrop-blur-sm dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
	<button class="hs-accordion-toggle w-full flex justify-between items-center p-4 text-right hover:bg-primary-50 dark:hover:bg-gray-700/50 transition-colors rounded-xl" id="hs-cloudfront-1">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="clock" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<span class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://docs.aws.amazon.com/cloudfront/latest/APIReference/API_CustomOriginConfig.html\|5">زمان اتصال به اوریجین</span>
	</div>
	<i data-lucide="chevron-down" class="hs-accordion-active:rotate-180 transition-transform duration-300 w-5 h-5 text-primary-600 dark:text-primary-400"></i>
	</button>
	<div id="hs-collapse-cloudfront-1" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-cloudfront-1">
	<div class="p-6 pt-0 space-y-4">
	<p class="text-gray-700 dark:text-gray-300">
	زمان اتصال به اوریجین (Origin connection timeout) تعداد ثانیه‌هایی است که CloudFront منتظر ایجاد اتصال به اوریجین می‌ماند. حداقل زمان انتظار ۱ ثانیه، حداکثر ۳۰۰ ثانیه و پیش‌فرض ۳۰ ثانیه است.
	</p>
	<p class="text-gray-700 dark:text-gray-300" data-ref="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html\|2">
	زمان اتصال اوریجین تعداد ثانیه‌هایی است که CloudFront هنگام تلاش برای ایجاد اتصال به اوریجین منتظر می‌ماند.
	</p>
	</div>
	</div>
	</div>

	<div class="hs-accordion card-interactive bg-white/80 backdrop-blur-sm dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
	<button class="hs-accordion-toggle w-full flex justify-between items-center p-4 text-right hover:bg-primary-50 dark:hover:bg-gray-700/50 transition-colors rounded-xl" id="hs-cloudfront-2">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="flex-shrink-0 w-12 h-12 bg-accent-100 dark:bg-accent-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="refresh-cw" class="w-6 h-6 text-accent-600 dark:text-accent-400"></i>
	</div>
	<span class="font-semibold text-lg text-accent-700 dark:text-accent-300" data-ref="https://stackoverflow.com/questions/63380361/updating-origin-connection-attempts-property-of-cloudfront-through-cloudformat\|8">تعداد تلاش‌های اتصال</span>
	</div>
	<i data-lucide="chevron-down" class="hs-accordion-active:rotate-180 transition-transform duration-300 w-5 h-5 text-accent-600 dark:text-accent-400"></i>
	</button>
	<div id="hs-collapse-cloudfront-2" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-cloudfront-2">
	<div class="p-6 pt-0 space-y-4">
	<p class="text-gray-700 dark:text-gray-300">
	برای ویرایش تعداد تلاش‌های اتصال اوریجین (Origin Connection Attempts)، کلید ConnectionAttempts را تنظیم کنید.
	</p>
	<p class="text-gray-700 dark:text-gray-300" data-ref="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistValuesOrigin.html\|1">
	به‌طور پیش‌فرض، CloudFront سه بار تلاش می‌کند و هر تلاش ۱۰ ثانیه طول می‌کشد.
	</p>
	</div>
	</div>
	</div>

	<div class="hs-accordion card-interactive bg-white/80 backdrop-blur-sm dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
	<button class="hs-accordion-toggle w-full flex justify-between items-center p-4 text-right hover:bg-primary-50 dark:hover:bg-gray-700/50 transition-colors rounded-xl" id="hs-cloudfront-3">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="settings" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<span class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html\|58">محدودیت‌های زمانی</span>
	</div>
	<i data-lucide="chevron-down" class="hs-accordion-active:rotate-180 transition-transform duration-300 w-5 h-5 text-primary-600 dark:text-primary-400"></i>
	</button>
	<div id="hs-collapse-cloudfront-3" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-cloudfront-3">
	<div class="p-6 pt-0 space-y-4">
	<p class="text-gray-700 dark:text-gray-300">
	محدودیت‌های زمان انتظار پاسخ اوریجین ۱ تا ۱۲۰ ثانیه است. این محدودیت برای اتصالات HTTP به اوریجین‌های سفارشی قابل تنظیم است.
	</p>
	<p class="text-gray-700 dark:text-gray-300" data-ref="https://www.reddit.com/r/aws/comments/ecw9f4/cloudfront_request_timeout_per_origin/\|57">
	CloudFront محدودیت زمان انتظار ۳۰ ثانیه‌ای دارد که به دلیل آن کاربر صفحه خطا را مشاهده می‌کند حتی اگر درخواست در حال پردازش باشد.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Spaces Analysis Section -->
	<section id="spaces" class="py-20 bg-white/80 dark:bg-gray-900" data-aos="fade-up">
	<div class="max-w-6xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300">
	تحلیل خطا در فضاهای Hugging Face
	</h2>

	<div class="grid md:grid-cols-2 gap-8 mb-8">
	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<h3 class="text-lg font-semibold text-primary-700 dark:text-primary-300 mb-4" data-ref="https://discuss.huggingface.co/t/504-gateway-time-out-when-uploading-large-dataset-to-enterprise-organization/142173\|11">آپلود دیتاست‌های بزرگ</h3>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	امکان آپلود دیتاست‌های بزرگ (۵۰۰+ گیگابایت) به هاب دیگر وجود ندارد، زیرا در نهایت با خطای «504 Server Error: Gateway Time-out» خراب می‌شود.
	</p>
	</div>

	<div class="card-interactive p-6 bg-accent-50/50 dark:bg-accent-900/20 rounded-xl shadow-md">
	<h3 class="text-lg font-semibold text-accent-700 dark:text-accent-300 mb-4" data-ref="https://github.com/huggingface/datasets/issues/7400\|12">آپلود دیتاست ۵۰۰ گیگابایتی</h3>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	هنگام تلاش برای آپلود دیتاست بزرگ (حدود ۵۰۰ گیگابایت) به هاب Hugging Face، خطاهای 504 Gateway Timeout مداوم رخ می‌دهد.
	</p>
	</div>

	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<h3 class="text-lg font-semibold text-primary-700 dark:text-primary-300 mb-4" data-ref="https://discuss.huggingface.co/t/http-504-gateway-timeout-error-when-pushing-dataset/15527\|15">تابع push_to_hub()</h3>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	هنگام استفاده از dataset.push_to_hub() برای آپلود دیتاست، خطای HTTP 504 requests.exceptions رخ می‌دهد.
	</p>
	</div>

	<div class="card-interactive p-6 bg-accent-50/50 dark:bg-accent-900/20 rounded-xl shadow-md">
	<h3 class="text-lg font-semibold text-accent-700 dark:text-accent-300 mb-4" data-ref="https://discuss.huggingface.co/t/504-gateway-timeout-with-http-request/24018\|19">تایم‌اوت اسپیس</h3>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	تایم‌اوت برای جلوگیری از آویزان ماندن درخواست‌ها در صورت کرش شدن فضای اجرایی و عدم امکان راه‌اندازی مجدد طراحی شده است.
	</p>
	</div>
	</div>

	<div class="space-y-6">
	<h3 class="text-2xl font-semibold text-primary-700 dark:text-primary-300">
	انواع اسپیس‌ها و تفاوت‌های آنها
	</h3>

	<div class="grid md:grid-cols-2 gap-6">
	<div class="card-interactive p-6 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="file-text" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<h4 class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://huggingface.co/docs/hub/en/spaces-overview\|83">اسپیس‌های استاتیک</h4>
	</div>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	اسپیس‌های استاتیک برای نمایش محتوای ثابت مانند وب‌سایت‌ها، مستندات، یا پروژه‌های غیرتعاملی طراحی شده‌اند. این اسپیس‌ها معمولاً کمتر در معرض خطاهای 504 Gateway Timeout قرار می‌گیرند زیرا نیازی به پردازش داده در زمان واقعی ندارند.
	</p>
	</div>

	<div class="card-interactive p-6 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-accent-100 dark:bg-accent-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="zap" class="w-6 h-6 text-accent-600 dark:text-accent-400"></i>
	</div>
	<h4 class="font-semibold text-lg text-accent-700 dark:text-accent-300" data-ref="https://huggingface.co/docs/hub/en/spaces-overview\|83">اسپیس‌های داینامیک</h4>
	</div>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	اسپیس‌های داینامیک اجازه می‌دهند کد خود را در فضای Hugging Face اجرا کنید. این اسپیس‌ها بیشتر در معرض خطاهای 504 Gateway Timeout قرار می‌گیرند زیرا نیاز به پردازش درخواست‌های کاربر در زمان واقعی دارند و ممکن است به سرورهای داخلی برای محاسبات گران‌قیمت دسترسی داشته باشند.
	</p>
	</div>
	</div>

	<div class="pl-4 pr-3 py-3 border-r-4 border-primary-500 bg-primary-50/40 dark:bg-primary-900/30 rounded-l-lg">
	<p class="text-sm font-medium text-primary-900 dark:text-primary-100 leading-relaxed" data-ref="https://huggingface.co/docs/hub/llms-full.txt\|81">
	<i data-lucide="info" class="inline-block w-4 h-4 ml-1.5 -mt-0.5"></i>
	این موضوع جلوگیری از از دست دادن داده در زمان راه‌اندازی مجدد اسپیس است که هر ۲۴ ساعت یکبار رخ می‌دهد. ZeroGPU زیرساخت مشترکی است که استفاده از GPU را برای مدل‌های AI و دموها بهینه‌سازی می‌کند.
	</p>
	</div>
	</div>
	</div>
	</section>

	<!-- API Analysis Section -->
	<section id="api" class="py-20 bg-primary-50/50 dark:bg-gray-800" data-aos="fade-up">
	<div class="max-w-6xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300">
	تحلیل APIها و اتصالات داخلی
	</h2>

	<div class="grid md:grid-cols-2 gap-8 items-start mb-8">
	<img
	src="https://cdn.qwenlm.ai/ee31f97d-561b-4613-9a74-a53a379a47a4/0090b589-599a-4b95-a016-83b62afcef2f/1ccc3439-c114-4815-ac3c-dfb3b38b2e92.png?key=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXNvdXJjZV91c2VyX2lkIjoiZWUzMWY5N2QtNTYxYi00NjEzLTlhNzQtYTUzYTM3OWE0N2E0IiwicmVzb3VyY2VfaWQiOiIwMDkwYjU4OS01OTlhLTRiOTUtYTAxNi04M2I2MmFmY2VmMmYiLCJyZXNvdXJjZV9jaGF0X2lkIjpudWxsfQ.-C2BPhSrwGcbfuZk7OaPvqbJW4QyQOep43G1IN7h7jY"
	alt="نمودار معماری سیستم نمایش‌دهنده اتصالات API با پنج عنصر اصلی: سمت چپ مرورگر کاربر با نماد دایره سفید و نوشته 'Client Request'، سپس سرور گیت‌وی با نماد مربع آبی تیره و نوشته 'Gateway Router'، در مرکز سه سرور داخلی با نمادهای مربع بنفش روشن با نوشته‌های 'Internal Server 1'، 'Internal Server 2'، و 'Internal Server 3'، سمت راست دو سرور اوریجین با نمادهای مربع آبی روشن با نوشته‌های 'Origin Server A' و 'Origin Server B'، و در پایین کادر کوچک با نماد ابر و نوشته 'CloudFront CDN'. تمام اتصالات با خطوط آبی متوسط و فلش‌های دوتایی نشان‌دهنده ارتباط داده، با یک خط قرمز ضخیم بین گیت‌وی و سرورهای داخلی با نوشته '504 Timeout' برای نشان‌دهنده خطا. پس‌زمینه سفید روشن با فونت سنس‌سریف فارسی و رنگ‌های اصلی آبی (#1a73b3) و بنفش (#6366f1)."
	class="w-full rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300"
	/>

	<div class="space-y-4">
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed" data-ref="https://discuss.huggingface.co/t/frequent-504-gateway-timeout-errors-on-inference-api-sentence-transformers-all-minilm-l6-v2/173034\|14">
	504 Gateway Time-out از router.huggingface.co معمولاً به معنای این است که روتر (گیت‌وی) برای دریافت پاسخ از سرور بالادست بیش از حد منتظر مانده است.
	</p>

	<div class="pl-4 pr-3 py-3 border-r-4 border-amber-500 bg-amber-50/40 dark:bg-amber-900/30 rounded-l-lg">
	<p class="text-sm font-medium text-amber-900 dark:text-amber-100 leading-relaxed" data-ref="https://discuss.huggingface.co/t/inquiry-about-120s-timeout-on-hugging-face-inference-endpoint-for-llama-3-1-8b/147764\|80">
	<i data-lucide="alert-triangle" class="inline-block w-4 h-4 ml-1.5 -mt-0.5"></i>
	هنگام مشاهده: اتصال حدود ۱۲۰ ثانیه بسته می‌شود بدون توجه به تایم‌اوت کلاینت شما، شما خطای سطح برنامه‌ای JSON دریافت نمی‌کنید.
	</p>
	</div>

	<p class="text-gray-700 dark:text-gray-300 leading-relaxed" data-ref="https://discuss.huggingface.co/t/504-timeout-error/155283\|21">
	این رفتار ممکن است مشابه آنچه هنگام کوچک بودن تنظیم مقیاس‌بندی endpoint رخ می‌دهد باشد.
	</p>
	</div>
	</div>

	<div class="hs-accordion-group space-y-4">
	<div class="hs-accordion card-interactive bg-white/80 backdrop-blur-sm dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
	<button class="hs-accordion-toggle w-full flex justify-between items-center p-4 text-right hover:bg-primary-50 dark:hover:bg-gray-700/50 transition-colors rounded-xl" id="hs-api-1">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="cpu" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<span class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://discuss.huggingface.co/t/504-gateway-time-out-in-inference-server-endpoints/66410\|16">APIهای استنتاجی</span>
	</div>
	<i data-lucide="chevron-down" class="hs-accordion-active:rotate-180 transition-transform duration-300 w-5 h-5 text-primary-600 dark:text-primary-400"></i>
	</button>
	<div id="hs-collapse-api-1" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-api-1">
	<div class="p-6 pt-0 space-y-4">
	<p class="text-gray-700 dark:text-gray-300">
	هنگام فراخوانی مدل Whisper بزرگ با فایل صوتی طولانی‌تر، به نظر می‌رسد 504 Gateway Time-out در درخواست POST به API رخ می‌دهد.
	</p>
	<p class="text-gray-700 dark:text-gray-300" data-ref="https://discuss.huggingface.co/t/504-timeout-error/155283/3\|20">
	چرا امروز خیلی خطا 504 timeout دارم؟ من با استفاده از api_key مدل Mistral-7B-Instruct-v0.3 را فراخوانی می‌کنم. من طرح Pro دارم بعد از ۵-۶ فراخوانی API...
	</p>
	</div>
	</div>
	</div>

	<div class="hs-accordion card-interactive bg-white/80 backdrop-blur-sm dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
	<button class="hs-accordion-toggle w-full flex justify-between items-center p-4 text-right hover:bg-primary-50 dark:hover:bg-gray-700/50 transition-colors rounded-xl" id="hs-api-2">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="flex-shrink-0 w-12 h-12 bg-accent-100 dark:bg-accent-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="database" class="w-6 h-6 text-accent-600 dark:text-accent-400"></i>
	</div>
	<span class="font-semibold text-lg text-accent-700 dark:text-accent-300" data-ref="https://github.com/huggingface/huggingface_hub/issues/2581\|49">فهرست مدل‌ها</span>
	</div>
	<i data-lucide="chevron-down" class="hs-accordion-active:rotate-180 transition-transform duration-300 w-5 h-5 text-accent-600 dark:text-accent-400"></i>
	</button>
	<div id="hs-collapse-api-2" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-api-2">
	<div class="p-6 pt-0 space-y-4">
	<p class="text-gray-700 dark:text-gray-300">
	کاربر گزارش کرد که خطای 504 Gateway Timeout مداوم هنگام استفاده از تابع list_models از کتابخانه huggingface_hub رخ می‌دهد. مشکل از حدود ۲۵ سپتامبر ۲۰۲۵ مشاهده شده است.
	</p>
	<p class="text-gray-700 dark:text-gray-300">
	تنظیمات زمان انتظار پیش‌فرض HTTP در کلاینت که برای دریافت پاسخ از https://huggingface.co/api/models با پارامترهای filter=text-generation، filter=safetensors، limit=5000، و sort=trendingScore استفاده می‌شود، تنظیم شده بود.
	</p>
	</div>
	</div>
	</div>

	<div class="hs-accordion card-interactive bg-white/80 backdrop-blur-sm dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
	<button class="hs-accordion-toggle w-full flex justify-between items-center p-4 text-right hover:bg-primary-50 dark:hover:bg-gray-700/50 transition-colors rounded-xl" id="hs-api-3">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="git-branch" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<span class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://github.com/gradio-app/gradio/issues/3114\|63">APIهای اسپیس</span>
	</div>
	<i data-lucide="chevron-down" class="hs-accordion-active:rotate-180 transition-transform duration-300 w-5 h-5 text-primary-600 dark:text-primary-400"></i>
	</button>
	<div id="hs-collapse-api-3" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-api-3">
	<div class="p-6 pt-0 space-y-4">
	<p class="text-gray-700 dark:text-gray-300">
	کاربر گزارش کرد که API اسپیس Hugging Face بعد از دقیقاً ۶۰ ثانیه درخواست POST برای راه‌اندازی تسک استنتاجی خطای 504 Gateway Timeout را بازمی‌گرداند.
	</p>
	<p class="text-gray-700 dark:text-gray-300">
	خطا از سرور awselb/2.0 دریافت شد که نشان‌دهنده این است که تایم‌اوت گیت‌وی توسط AWS Elastic Load Balancer (ELB) مدیریت شده است.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Real-world Cases Section -->
	<section id="cases" class="py-20 bg-white/80 dark:bg-gray-900" data-aos="fade-up">
	<div class="max-w-6xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300">
	موارد واقعی و تجربیات کاربران
	</h2>

	<div class="space-y-6 mb-12">
	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-primary-700 dark:text-primary-300 mb-4" data-ref="https://discuss.huggingface.co/t/intermittent-500s-on-inference-endpoint-requests-not-reaching-the-container/177816\|22">خطاهای متناوب 500 و 504</h3>
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
	خطاهای 500 مرتبط با کارهای زیرساختی اخیر امروز بودند. خطاهای 504 Gateway Timeout متناوب در API استنتاجی رخ می‌داد.
	</p>
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
	صفحه وضعیت نشان‌دهنده عدم وقوع حادثه نبود.
	</p>
	</div>

	<div class="card-interactive p-6 bg-accent-50/50 dark:bg-accent-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-accent-700 dark:text-accent-300 mb-4" data-ref="https://www.reddit.com/r/huggingface/comments/1iddrc5/huggingface_504_error/\|18">خطای ورود به سیستم</h3>
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
	هنگام ورود به سیستم، خطای 504 دریافت می‌کنید. درخواست بیش از حد طول می‌کشد، لطفاً بعداً دوباره تلاش کنید.
	</p>
	</div>

	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-primary-700 dark:text-primary-300 mb-4" data-ref="https://stackoverflow.com/questions/79459645/fixing-hugging-face-login-issue-504-gateway-timeout-invalid-token-error\|13">رفع مشکل ورود</h3>
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
	مشکل با ایجاد محیط مجازی و نصب مجدد همه چیز از ابتدا حل شد.
	</p>
	</div>

	<div class="card-interactive p-6 bg-accent-50/50 dark:bg-accent-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-accent-700 dark:text-accent-300 mb-4" data-ref="https://discuss.huggingface.co/t/huggingface-gateway-time-out-just-how-frequent-is-this/168678\|17">تکرار خطاها</h3>
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
	صفحه وضعیت Hugging Face همیشه ۱۰۰٪ آپ‌تایم نشان می‌دهد. آیا این به دلیل عدم استفاده از طرح Pro است؟ خطاهای 504 Gateway Timeout مداوم رخ می‌دهد.
	</p>
	</div>
	</div>

	<div class="grid md:grid-cols-2 gap-8">
	<div class="space-y-4">
	<h3 class="text-2xl font-semibold text-primary-700 dark:text-primary-300">
	لاگ‌های سرور و اشکال‌زدایی
	</h3>

	<p class="text-gray-700 dark:text-gray-300 leading-relaxed" data-ref="https://github.com/gradio-app/gradio/issues/11401\|52">
	لاگ‌های دریافتی نشان‌دهنده خطای HfHubHTTPError: 401 Client Error: Unauthorized برای آدرس https://router.huggingface.co/hf-inference/models/HuggingFaceH4/zephyr-7b-beta/v1/chat/completions بود. این نشان‌دهنده شکست احراز هویت (نام کاربری یا رمز عبور نامعتبر) است، نه خطای 504 Gateway Timeout.
	</p>

	<p class="text-gray-700 dark:text-gray-300 leading-relaxed" data-ref="https://github.com/langgenius/dify/discussions/24229\|53">
	504 Gateway Timeout با صفحه خطا HTML (و پیام «invalid character '\u003c'») به معنای عدم پاسخ‌دهی به موقع API OpenAI است.
	</p>
	</div>

	<div class="card-interactive p-6 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md h-80">
	<canvas id="errorChart"></canvas>
	</div>
	</div>
	</div>
	</section>

	<!-- Infrastructure and Status Section -->
	<section class="py-20 bg-primary-50/50 dark:bg-gray-800" data-aos="fade-up">
	<div class="max-w-6xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300">
	وضعیت زیرساخت و اعلانات رسمی
	</h2>

	<div class="grid md:grid-cols-3 gap-6 mb-8">
	<div class="card-interactive p-6 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="circle-check" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<h3 class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://status.huggingface.co/\|44">اصلاح مشکل</h3>
	</div>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	مشکل زیرساختی پایه‌ای شناسایی و رفع شد. اسپیس‌ها عملیاتی هستند.
	</p>
	</div>

	<div class="card-interactive p-6 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-accent-100 dark:bg-accent-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="triangle-alert" class="w-6 h-6 text-accent-600 dark:text-accent-400"></i>
	</div>
	<h3 class="font-semibold text-lg text-accent-700 dark:text-accent-300" data-ref="https://discuss.huggingface.co/t/space-service-down-for-4-hours-no-signs-of-recovery/108015\|45">قطعی طولانی</h3>
	</div>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	سرویس اسپیس برای ۴+ ساعت قطع بوده و نشانه بازیابی وجود ندارد. ما برای رفع این مشکل تلاش می‌کنیم.
	</p>
	</div>

	<div class="card-interactive p-6 bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-xl shadow-md">
	<div class="flex items-center space-x-4 space-x-reverse mb-4">
	<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center">
	<i data-lucide="octagon-alert" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
	</div>
	<h3 class="font-semibold text-lg text-primary-700 dark:text-primary-300" data-ref="https://www.reddit.com/r/LocalLLaMA/comments/1b2m4wz/major_hugging_face_outage_aka_hugging_facepalm/\|46">قطعی عمده</h3>
	</div>
	<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
	قطعی عمده منجر به آفلاین شدن سایت برای حداقل ۴ ساعت شده است.
	</p>
	</div>
	</div>

	<div class="pl-4 pr-3 py-3 border-r-4 border-primary-500 bg-primary-50/40 dark:bg-primary-900/30 rounded-l-lg">
	<p class="text-sm font-medium text-primary-900 dark:text-primary-100 leading-relaxed" data-ref="https://discuss.huggingface.co/t/504-gateway-time-out/107971\|10">
	<i data-lucide="info" class="inline-block w-4 h-4 ml-1.5 -mt-0.5"></i>
	504 Gateway timed out ۶ ساعت بعد، خطا سرور یا تعمیرات در HF است. ما رفع‌کننده‌ای برای کمک به مشکل گزارش‌شده ۵۰۰ اعمال کرده‌ایم.
	</p>
	</div>
	</div>
	</section>

	<!-- Conclusion Section -->
	<section id="conclusion" class="py-20 bg-white/80 dark:bg-gray-900" data-aos="fade-up">
	<div class="max-w-5xl mx-auto px-6">
	<h2 class="text-3xl font-bold mb-8 text-primary-700 dark:text-primary-300">
	نتیجه‌گیری و پیشنهادات
	</h2>

	<div class="space-y-6">
	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-primary-700 dark:text-primary-300 mb-4">
	علل اصلی خطا 504 Gateway Timeout
	</h3>
	<ul class="space-y-3 text-gray-700 dark:text-gray-300">
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="arrow-left" class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>زمان انتظار پیش‌فرض CloudFront:</strong> پیش‌فرض ۳۰ ثانیه ممکن است برای پردازش‌های سنگین کافی نباشد.</span>
	</li>
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="arrow-left" class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>مشکلات سرور داخلی:</strong> کرش شدن فضای اجرایی یا عدم پاسخ‌دهی سرورهای بالادست.</span>
	</li>
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="arrow-left" class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>پیکربندی‌های نادرست:</strong> تنظیمات نامناسب تعداد تلاش‌ها یا زمان اتصال.</span>
	</li>
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="arrow-left" class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>پهنای باند محدود:</strong> برای آپلود دیتاست‌های بزرگ (۵۰۰+ گیگابایت).</span>
	</li>
	</ul>
	</div>

	<div class="card-interactive p-6 bg-accent-50/50 dark:bg-accent-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-accent-700 dark:text-accent-300 mb-4">
	راه‌حل‌های پیشنهادی
	</h3>
	<ul class="space-y-3 text-gray-700 dark:text-gray-300">
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="check" class="w-5 h-5 text-accent-600 dark:text-accent-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>افزایش زمان پاسخ‌دهی:</strong> افزایش مقدار زمان پاسخ‌دهی در CloudFront به بیش از ۳۰ ثانیه (حداکثر ۱۲۰ ثانیه).</span>
	</li>
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="check" class="w-5 h-5 text-accent-600 dark:text-accent-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>به‌روزرسانی تنظیمات API:</strong> اطمینان از تنظیمات صحیح زمان انتظار در کلاینت‌ها.</span>
	</li>
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="check" class="w-5 h-5 text-accent-600 dark:text-accent-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>استفاده از صف‌بندی:</strong> پیاده‌سازی queue=True و demo.queue().launch() برای مدیریت درخواست‌ها.</span>
	</li>
	<li class="flex items-start space-x-3 space-x-reverse">
	<i data-lucide="check" class="w-5 h-5 text-accent-600 dark:text-accent-400 flex-shrink-0 mt-0.5"></i>
	<span><strong>پایش زیرساخت:</strong> بررسی وضعیت سرورهای داخلی و اتصالات شبکه.</span>
	</li>
	</ul>
	</div>

	<div class="card-interactive p-6 bg-primary-50/50 dark:bg-primary-900/20 rounded-xl shadow-md">
	<h3 class="text-xl font-semibold text-primary-700 dark:text-primary-300 mb-4">
	توصیه‌های عملی
	</h3>
	<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
	برای جلوگیری از خطا 504 Gateway Timeout، توصیه می‌شود از زمان‌های انتظار مناسب در کلاینت‌ها استفاده کنید، پیکربندی‌های CloudFront را به‌روزرسانی کنید، و از مدیریت صف برای پردازش‌های طولانی‌مدت استفاده کنید. همچنین، بررسی وضعیت رسمی Hugging Face برای شناسایی قطعی‌های زیرساختی مهم است.
	</p>
	</div>
	</div>
	</div>
	</section>
	</main>

	<!-- Footer -->
	<footer class="bg-primary-900 dark:bg-gray-950 text-gray-300 py-12">
	<div class="max-w-6xl mx-auto px-6">
	<div class="grid md:grid-cols-3 gap-8 mb-8">
	<div>
	<h3 class="text-lg font-semibold text-primary-300 mb-4">در مورد این تحقیق</h3>
	<p class="text-sm leading-relaxed">
	تحلیل جامع علل خطا 504 Gateway Timeout در فضاهای Hugging Face با تمرکز بر تمام اجزای مرتبط از جمله APIها، پیکربندی‌های CloudFront، اتصالات داخلی و لاگ‌های سرور.
	</p>
	</div>
	<div>
	<h3 class="text-lg font-semibold text-primary-300 mb-4">منابع</h3>
	<ul class="space-y-2 text-sm">
	<li class="flex items-center space-x-2 space-x-reverse">
	<i data-lucide="external-link" class="w-4 h-4 text-primary-400"></i>
	<span>Amazon CloudFront Documentation</span>
	</li>
	<li class="flex items-center space-x-2 space-x-reverse">
	<i data-lucide="external-link" class="w-4 h-4 text-primary-400"></i>
	<span>Hugging Face Community Forums</span>
	</li>
	<li class="flex items-center space-x-2 space-x-reverse">
	<i data-lucide="external-link" class="w-4 h-4 text-primary-400"></i>
	<span>AWS Support Resources</span>
	</li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-semibold text-primary-300 mb-4">اطلاعات فنی</h3>
	<ul class="space-y-2 text-sm">
	<li class="flex items-center space-x-2 space-x-reverse">
	<i data-lucide="calendar" class="w-4 h-4 text-primary-400"></i>
	<span>بازه زمانی: ۱ هفته اخیر</span>
	</li>
	<li class="flex items-center space-x-2 space-x-reverse">
	<i data-lucide="clock" class="w-4 h-4 text-primary-400"></i>
	<span>زمان پیش‌فرض: ۳۰ ثانیه</span>
	</li>
	<li class="flex items-center space-x-2 space-x-reverse">
	<i data-lucide="shield" class="w-4 h-4 text-primary-400"></i>
	<span>کد خطا: ۵۰۴</span>
	</li>
	</ul>
	</div>
	</div>
	<div class="border-t border-gray-700 pt-8 text-center text-sm">
	<p>© ۲۰۲۶ تحقیق فنی Hugging Face Gateway Timeout. تمام حقوق محفوظ است.</p>
	</div>
	</div>
	</footer>

	<!-- Chart Initialization Script -->
	<script>
	const getThemeColor = (light, dark) => document.body.classList.contains('dark') ? dark : light;
	let charts = {};

	const getColors = () => ({
	primary: getThemeColor('#1a73b3', '#60a5fa'),
	accent: getThemeColor('#6366f1', '#a78bfa'),
	text: getThemeColor('#1f2937', '#e5e7eb'),
	grid: getThemeColor('#e5e7eb', '#4b5563')
	});

	const updateCharts = () => {
	const { text, grid } = getColors();

	Object.values(charts).forEach(chart => {
	if (chart?.options) {
	if (chart.options.plugins?.legend?.labels) chart.options.plugins.legend.labels.color = text;
	if (chart.options.plugins?.title) chart.options.plugins.title.color = text;
	if (chart.options.scales) {
	Object.values(chart.options.scales).forEach(scale => {
	if (scale.ticks) scale.ticks.color = text;
	if (scale.grid) scale.grid.color = grid;
	if (scale.pointLabels) scale.pointLabels.color = text;
	if (scale.title) scale.title.color = text;
	});
	}
	chart.update('none');
	}
	});
	};

	// Data from https://repost.aws/knowledge-center/cloudfront-custom-origin-response\|4 - Default timeout is 30 seconds, can be increased
	// Data from https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistValuesOrigin.html\|1 - Default waits 30 seconds (3 attempts of 10 seconds each)
	// Data from https://github.com/hashicorp/terraform-provider-aws/issues/934\|6 - Can increase beyond 60 seconds with AWS support
	const timeoutData = {
	labels: ['پیش‌فرض', 'حداکثر', 'با پشتیبانی'],
	datasets: [{
	label: 'زمان انتظار (ثانیه)',
	data: [30, 120, 300],
	backgroundColor: ['#1a73b3', '#6366f1', '#10b981']
	}]
	};

	// Data from https://discuss.huggingface.co/t/intermittent-500s-on-inference-endpoint-requests-not-reaching-the-container/177816\|22 - Intermittent 504 Gateway Timeout errors
	// Data from https://discuss.huggingface.co/t/504-gateway-timeout-with-http-request/24018\|19 - Expected timeout to prevent hanging requests
	// https://github.com/huggingface/huggingface_hub/issues/2581\|49 - 504 errors occurring for 15+ hours straight
	const errorData = {
	labels: ['خطاهای 504 متناوب', 'تایم‌اوت اسپیس', 'خطاهای 15+ ساعته'],
	datasets: [{
	label: 'تعداد خطاها',
	data: [12, 8, 15],
	borderColor: ['#1a73b3', '#6366f1', '#ef4444'],
	backgroundColor: ['rgba(26, 115, 179, 0.1)', 'rgba(99, 102, 241, 0.1)', 'rgba(239, 68, 68, 0.1)'],
	tension: 0.4
	}]
	};

	document.addEventListener('DOMContentLoaded', function() {
	lucide.createIcons();
	AOS.init({ duration: 800, once: true, offset: 100 });
	initCitationSystem();

	const { primary, accent, text, grid } = getColors();

	const commonOptions = {
	responsive: true,
	maintainAspectRatio: false,
	plugins: { legend: { labels: { color: text } } },
	scales: {
	x: { ticks: { color: text }, grid: { color: grid } },
	y: { beginAtZero: true, ticks: { color: text }, grid: { color: grid } }
	}
	};

	if (document.getElementById('timeoutChart')) {
	charts.timeout = new Chart(document.getElementById('timeoutChart'), {
	type: 'bar',
	data: timeoutData,
	options: {
	...commonOptions,
	plugins: {
	legend: { display: false },
	title: {
	display: true,
	text: 'مقایسه زمان‌های انتظار CloudFront',
	color: text,
	font: { size: 14, weight: 'bold' }
	}
	}
	}
	});
	}

	if (document.getElementById('errorChart')) {
	charts.error = new Chart(document.getElementById('errorChart'), {
	type: 'line',
	data: errorData,
	options: {
	...commonOptions,
	plugins: {
	legend: { labels: { color: text } },
	title: {
	display: true,
	text: 'توزیع خطاها در زمان',
	color: text,
	font: { size: 14, weight: 'bold' }
	}
	}
	}
	});
	}

	updateCharts();
	new MutationObserver(() => updateCharts()).observe(document.body, { attributes: true, attributeFilter: ['class'] });
	});

	// Progress bar
	window.addEventListener('scroll', () => {
	const winScroll = document.body.scrollTop \|\| document.documentElement.scrollTop;
	const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	const scrolled = (winScroll / height) * 100;
	document.getElementById('progressBar').style.width = scrolled + '%';
	});
	</script>
	</body>
	</html>