ما الذي نبنيه

في هذا الدرس، سنقوم ببناء تطبيق ذكي يستفيد من قدرات Claude وChatGPT APIs. ومع ذلك، بسبب التغييرات الأخيرة، تم إلغاء وصول OpenAI إلى Claude API. سنركز على دمج Claude API لمهام مثل الترجمة اللغوية، تحليل المشاعر، وتقديم الردود الحوارية.

بنهاية هذا الدرس، سيكون لديك تطبيق يعمل يمكنه التبديل بين نماذج الذكاء الاصطناعي المختلفة بناءً على إدخال المستخدم، مما يوضح القوة والمرونة في دمج خدمات الذكاء الاصطناعي المتعددة.

الإعداد والتثبيت

أولاً، نحتاج إلى إعداد بيئة التطوير لدينا وتثبيت الحزم الضرورية. سنستخدم Next.js كإطار عمل لتطبيقنا، والذي يعتمد على React ويوفر التصيير من جانب الخادم بشكل افتراضي.

npx create-next-app@latest my-smart-app --ts
cd my-smart-app
npm install anthropic
npm install dotenv

بعد ذلك، قم بتكوين متغيرات البيئة الخاصة بك لتأمين مفاتيح API الخاصة بك. هذا أمر بالغ الأهمية للحفاظ على المعلومات الحساسة خارج شفرة المصدر الخاصة بك.

// .env.local
ANTHROPIC_API_KEY=your-anthropic-api-key

الخطوة ١: إعداد عملاء API

في هذه الخطوة، سنقوم بإعداد العملاء للتفاعل مع Anthropic API. يتضمن ذلك إنشاء مثيلات من SDKs التي ستسمح لنا بإجراء طلبات إلى APIs.

import { Anthropic } from 'anthropic';

const anthropicClient = new Anthropic(process.env.ANTHROPIC_API_KEY);

// Use this client to make API requests in your application

هنا، نقوم باستيراد المكتبة المطلوبة وإنشاء العميل باستخدام مفتاح API من متغيرات البيئة لدينا. يتيح لنا هذا الإعداد الوصول إلى الوظائف المختلفة التي يوفرها API.

الخطوة ٢: بناء واجهة المستخدم

الآن سنقوم بإنشاء واجهة مستخدم بسيطة باستخدام مكونات React. ستسمح هذه الواجهة للمستخدمين بإدخال نص واختيار نموذج الذكاء الاصطناعي الذي يرغبون في استخدامه للمعالجة.

import { useState } from 'react';
function App() {

const [inputText, setInputText] = useState('');

const [model, setModel] = useState('claude');

const [response, setResponse] = useState('');
  const handleInputChange = (e) => setInputText(e.target.value);

const handleModelChange = (e) => setModel(e.target.value);
  return (
Smart AI Application
            <select value={model} onChange={handleModelChange}><br />
<option value="claude">Claude</option><br />
</select><br />
<button>Submit</button><br />
<p>Response: {response}</p><br />
</div><br />
);<br />
}</p><p>export default App;<br />
</code></pre><br />
<p>هذا الكود يقوم بإعداد واجهة أساسية مع منطقة نصية للإدخال، وقائمة منسدلة لاختيار نموذج الذكاء الاصطناعي، وقسم لعرض الرد. سنقوم بربط هذه الواجهة بعميل API الخاص بنا في الخطوات التالية.</p><br />
</section></p><p><section class="gai-section" id="gai-step3"><br />
<h2>الخطوة ٣: الاتصال بـ API</h2><br />
<p>في هذه الخطوة، سنقوم بتنفيذ المنطق لإرسال إدخال المستخدم إلى نموذج الذكاء الاصطناعي المختار وعرض الرد. سنستخدم الدوال غير المتزامنة للتعامل مع استدعاءات API.</p><br />
<pre class="gai-code-block"><code>const handleSubmit = async () => {<br />
let apiResponse;</p><p>  apiResponse = await anthropicClient.messages.create({<br />
model: 'claude-3-5-sonnet-20241022',<br />
prompt: inputText<br />
});</p><p>  setResponse(apiResponse.choices[0].message.content);<br />
};</p><p>// Add this inside your App component<br />
<button onClick={handleSubmit}>Submit</button><br />
</code></pre><br />
<p>هنا، نقوم بتعريف دالة غير متزامنة <code>handleSubmit</code> التي ترسل الإدخال إلى Claude API. يتم بعد ذلك تعيين الرد إلى الحالة، مما يحدث واجهة المستخدم لعرضه.</p><br />
</section></p><p><div class="gai-expert-tip"><br />
<strong>⚠️ خطأ شائع:</strong> تأكد من ضبط مفاتيح API الخاصة بك بشكل صحيح في متغيرات البيئة. المفاتيح غير الصحيحة ستؤدي إلى أخطاء في المصادقة مع APIs.</div></p><p><section class="gai-section" id="gai-testing"><br />
<h2>اختبار تنفيذك</h2><br />
<p>للتحقق من أن تطبيقنا يعمل كما هو متوقع، أدخل بعض النصوص واختر نموذجًا. عند الإرسال، يجب أن ترى ردًا من نموذج الذكاء الاصطناعي.</p><br />
<pre class="gai-code-block"><code>// Run your Next.js application<br />
npm run dev</p><p>// Access the application via http://localhost:3000<br />
</code></pre><br />
<p>تحقق من وحدة التحكم لأي أخطاء وتأكد من أن الردود منطقية بناءً على الإدخال والنموذج المختار.</p><br />
</section></p><p><section class="gai-section" id="gai-next"><br />
<h2>ما الذي تبنيه بعد ذلك</h2><br />
<ul><br />
<li>دمج نماذج ذكاء اصطناعي إضافية لمزيد من الوظائف.</li><br />
<li>إضافة مصادقة المستخدم لحفظ واسترجاع إعدادات المستخدم.</li><br />
<li>تنفيذ ميزة التاريخ لتتبع التفاعلات السابقة.</li><br />
</ul><br />
</section></p><p></article></p><p></p><div class="gateofai-share-container" style="display: flex; gap: 10px; align-items: center; margin: 25px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #eef0f2;">
<strong style="font-size: 0.95rem; color: #4a5568;">Share:</strong>
<a href="https://twitter.com/intent/tweet?text=%D8%AF%D9%85%D8%AC+Claude+API+%D9%84%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA+%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9&url=https%3A%2F%2Fgateofai.com%2Ftutorial%2Fintegrating-claude-api-smart-applications-ar%2F" target="_blank" rel="noopener noreferrer" style="display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #000; color: #fff; border-radius: 50%; opacity: 0.9; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">
<svg fill="currentColor" viewBox="0 0 24 24" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgateofai.com%2Ftutorial%2Fintegrating-claude-api-smart-applications-ar%2F" target="_blank" rel="noopener noreferrer" style="display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #0e76a8; color: #fff; border-radius: 50%; opacity: 0.9; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">
<svg fill="currentColor" viewBox="0 0 24 24" width="18" height="18"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://api.whatsapp.com/send?text=%D8%AF%D9%85%D8%AC+Claude+API+%D9%84%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA+%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9%20https%3A%2F%2Fgateofai.com%2Ftutorial%2Fintegrating-claude-api-smart-applications-ar%2F" target="_blank" rel="noopener noreferrer" style="display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #25D366; color: #fff; border-radius: 50%; opacity: 0.9; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">
<svg fill="currentColor" viewBox="0 0 24 24" width="18" height="18"><path d="M12.031 0C5.385 0 .013 5.382.01 12.029c-.002 2.126.549 4.204 1.597 6.035L.001 24l6.095-1.598c1.781.95 3.754 1.45 5.922 1.451h.005c6.643 0 12.016-5.382 12.02-12.031A11.967 11.967 0 0020.528 3.52 11.972 11.972 0 0012.031 0zm0 21.826h-.004c-1.796 0-3.555-.483-5.093-1.396l-.365-.217-3.784.992.934-3.69-.238-.379A10.02 10.02 0 011.986 12.03c.003-5.54 4.512-10.05 10.052-10.05 2.686.002 5.21 1.049 7.106 2.946 1.895 1.896 2.94 4.42 2.938 7.108-.004 5.542-4.513 10.048-10.051 10.048zm5.51-7.536c-.302-.15-1.786-.882-2.064-.984-.277-.101-.48-.15-.682.152-.204.302-.782.983-.956 1.185-.175.202-.352.226-.654.076-1.554-.775-2.73-1.603-3.79-3.411-.277-.472.138-.445.717-1.599.102-.202.05-.378-.026-.53-.075-.152-.682-1.643-.935-2.25-.246-.593-.497-.513-.683-.523l-.582-.01c-.201 0-.528.076-.804.378-.277.303-1.057 1.033-1.057 2.517 0 1.484 1.082 2.921 1.233 3.123.152.203 2.13 3.253 5.161 4.558 2.065.888 2.822.955 3.328.805.578-.17 1.786-.73 2.037-1.436.252-.705.252-1.31.176-1.437-.076-.126-.277-.202-.58-.353z"/></svg>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgateofai.com%2Ftutorial%2Fintegrating-claude-api-smart-applications-ar%2F" target="_blank" rel="noopener noreferrer" style="display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #1877f2; color: #fff; border-radius: 50%; opacity: 0.9; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">
<svg fill="currentColor" viewBox="0 0 24 24" width="18" height="18"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.249h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a></div></div></div><div class="gai-helpful-voting" data-post-id="4700" style="padding: 2.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 24px; text-align: center; margin-bottom: 4rem;"><h4 style="margin: 0 0 1.5rem 0; font-size: 1.25rem; color: #fff; font-weight: 800;">هل كان هذا الشرح مفيداً؟</h4><div class="helpful-buttons" style="display: flex; gap: 1rem; justify-content: center;">
<button class="btn-helpful btn-yes" data-vote="yes" style="padding: 12px 30px; border: 1px solid #10B981; background: rgba(16, 185, 129, 0.1); color: #10B981; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 800;"><i class="fas fa-thumbs-up" style="margin-left: 8px;"></i> نعم</button>
<button class="btn-helpful btn-no" data-vote="no" style="padding: 12px 30px; border: 1px solid #EF4444; background: rgba(239, 68, 68, 0.1); color: #EF4444; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 800;"><i class="fas fa-thumbs-down" style="margin-left: 8px;"></i> لا</button></div><div class="helpful-response" style="display: none; margin-top: 1.5rem; color: #94A3B8; font-weight: 700;"></div></div><nav class="navigation post-navigation" role="navigation"
style="margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<a href="https://gateofai.com/tutorial/integrating-claude-api-smart-applications/" rel="prev"
style="padding: 1rem; border: 1px solid #E2E8F0; border-radius: 8px; text-decoration: none; display: block; text-align: right;">
<span style="font-size: 0.8rem; color: #64748B; display: block; margin-bottom: 0.25rem;">
← الدرس السابق                            </span>
<span style="font-weight: 600; color: #1E293B;">
Integrating Claude API for Smart Applications                            </span>
</a></nav></article></main><style>/* Comment Form Styling */
.comments-area { color: #fff; margin-top: 4rem; }
.comment-respond { 
    background: rgba(255,255,255,0.02); 
    padding: 2.5rem; 
    border-radius: 24px; 
    border: 1px solid rgba(255,255,255,0.05); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.comment-reply-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; color: #fff; }
.comment-form p { margin-bottom: 1.5rem; }
.comment-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #94A3B8; }
.comment-form input[type="text"], 
.comment-form input[type="email"], 
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 14px 20px;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 14px;
    color: #fff !important;
    outline: none;
    transition: all 0.3s;
}
.comment-form input:focus, .comment-form textarea:focus {
    border-color: #4F46E5 !important;
    background: rgba(0,0,0,0.4) !important;
}
.comment-form .submit {
    background: #4F46E5 !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 40px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.3s;
}
.comment-form .submit:hover {
    background: #4338CA !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}

/* Verdict Styling */
.gai-verdict { padding: 1.5rem; border-radius: 12px; margin: 2rem 0; font-weight: 600; }
.gai-verdict.positive { background: rgba(16, 185, 129, 0.1); border: 1px solid #10B981; color: #10B981; }
.gai-verdict.negative { background: rgba(239, 68, 68, 0.1); border: 1px solid #EF4444; color: #EF4444; }

/* Code Block Formatting & Copy Button */
.single-tutorial .wp-block-code,
.single-tutorial pre,
.single-tutorial .gai-code-block {
    background: #0F172A !important;
    color: #F8FAFC !important;
    padding: 1.5rem !important;
    border-radius: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-x: auto;
    position: relative;
    border: 1px solid #1E293B;
    margin-bottom: 2rem;
    margin-top: 1rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.single-tutorial .wp-block-code code,
.single-tutorial pre code,
.single-tutorial .gai-code-block code,
.single-tutorial .wp-block-code p, .single-tutorial .wp-block-code span, .single-tutorial .wp-block-code div,
.single-tutorial pre p, .single-tutorial pre span, .single-tutorial pre div,
.single-tutorial .gai-code-block p, .single-tutorial .gai-code-block span, .single-tutorial .gai-code-block div {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
    white-space: pre-wrap !important; 
    display: block; 
}
/* Enhanced copy button */
.gai-copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #F8FAFC;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    z-index: 10;
}
.gai-copy-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.gai-copy-btn.copied {
    background: #10B981;
    border-color: #10B981;
    color: white;
}
html[dir="rtl"] .gai-copy-btn {
    right: auto;
    left: 12px;
}</style> <script type="litespeed/javascript">document.addEventListener('DOMContentLiteSpeedLoaded',function(){const codeBlocks=document.querySelectorAll('.single-tutorial .wp-block-code, .single-tutorial pre, .single-tutorial .gai-code-block');codeBlocks.forEach(function(block){if(block.querySelector('.gai-copy-btn'))return;block.style.position='relative';const btn=document.createElement('button');btn.className='gai-copy-btn';let isArabic=document.documentElement.lang&&document.documentElement.lang.includes('ar');btn.innerHTML='<i class="far fa-copy"></i> '+(isArabic?'نسخ الكود':'Copy Code');btn.addEventListener('click',function(){const codeEl=block.querySelector('code');const code=codeEl?codeEl.innerText:block.innerText.replace(btn.innerText,'').trim();navigator.clipboard.writeText(code).then(function(){btn.innerHTML='<i class="fas fa-check"></i> '+(isArabic?'تم النسخ':'Copied!');btn.classList.add('copied');setTimeout(()=>{btn.innerHTML='<i class="far fa-copy"></i> '+(isArabic?'نسخ الكود':'Copy Code');btn.classList.remove('copied')},2000)})});block.appendChild(btn)})})</script> <footer id="colophon" class="site-footer mt-auto bg-[#020617] border-t border-white/5 py-12"><div class="container mx-auto px-6"><div class="grid grid-cols-1 md:grid-cols-5 gap-12 lg:gap-16"><div class="col-span-1 md:col-span-1"><div class="site-logo mb-6 h-8">
<a href="https://gateofai.com/" class="text-xl font-black tracking-tighter text-white">
GATE<span class="text-cyan-400">OF</span>AI
</a></div><p class="text-slate-500 text-xs leading-relaxed max-w-xs">
المنصة العربية الرائدة لأدوات وأخبار الذكاء الاصطناعي للمحترفين والمطورين، تم تصميمها لبناء مستقبل التقنية.</p></div><div><h3 class="text-white text-[10px] font-black uppercase tracking-[0.2em] mb-6">المحتوى</h3><ul class="space-y-3 text-slate-500 text-xs font-medium"><li><a href="https://gateofai.com/ai-tools/" class="hover:text-cyan-400 transition-colors">دليل الأدوات</a></li><li><a href="https://gateofai.com/tutorial/" class="hover:text-cyan-400 transition-colors">الأكاديمية</a></li><li><a href="https://gateofai.com/latest-ai-news/" class="hover:text-cyan-400 transition-colors">غرفة الأخبار</a></li></ul></div><div><h3 class="text-white text-[10px] font-black uppercase tracking-[0.2em] mb-6">المختبر</h3><ul class="space-y-3 text-slate-500 text-xs font-medium"><li><a href="https://gateofai.com/prompt-generator/" class="hover:text-cyan-400 transition-colors">مولد الأوامر</a></li><li><a href="https://gateofai.com/dev-prompts/" class="hover:text-cyan-400 transition-colors">بيئة المطورين</a></li></ul></div><div><h3 class="text-white text-[10px] font-black uppercase tracking-[0.2em] mb-6">المصادر</h3><ul class="space-y-3 text-slate-500 text-xs font-medium"><li><a href="https://gateofai.com/about-us/" class="hover:text-cyan-400 transition-colors">عن البوابة</a></li><li><a href="https://gateofai.com/contact-us/" class="hover:text-cyan-400 transition-colors">اتصل بنا</a></li><li><a href="https://gateofai.com/privacy-policy/" class="hover:text-cyan-400 transition-colors">سياسة الخصوصية</a></li><li><a href="https://gateofai.com/terms-and-conditions/" class="hover:text-cyan-400 transition-colors">شروط الاستخدام</a></li></ul></div><div><h3 class="text-white text-[10px] font-black uppercase tracking-[0.2em] mb-6">تواصل</h3><div class="flex flex-col space-y-4">
<a href="https://x.com/gateofai" target="_blank" aria-label="Follow us on X" class="flex items-center space-x-3 rtl:space-x-reverse text-slate-400 hover:text-cyan-400 transition-colors group"><div class="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-cyan-500/10 group-hover:border-cyan-400 transition-all text-sm font-black text-white">X</div>
<span class="text-xs font-bold uppercase tracking-widest">Twitter</span>
</a>
<a href="https://linkedin.com/company/gateofai" target="_blank" aria-label="Follow us on LinkedIn" class="flex items-center space-x-3 rtl:space-x-reverse text-slate-400 hover:text-cyan-400 transition-colors group"><div class="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-cyan-500/10 group-hover:border-cyan-400 transition-all text-sm font-black text-white">in</div>
<span class="text-xs font-bold uppercase tracking-widest">LinkedIn</span>
</a>
<a href="https://www.youtube.com/@GateofAI" target="_blank" aria-label="Follow us on YouTube" class="flex items-center space-x-3 rtl:space-x-reverse text-slate-400 hover:text-cyan-400 transition-colors group"><div class="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-cyan-500/10 group-hover:border-cyan-400 transition-all text-sm font-black text-white">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"/></svg></div>
<span class="text-xs font-bold uppercase tracking-widest">YouTube</span>
</a></div></div></div><div class="mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center text-[10px] text-slate-600 font-bold tracking-tight uppercase gap-4"><p>© 2026 GATE OF AI. التشفير: نشط</p></div></div></footer></div> <script data-no-optimize="1">document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        try {
            // Front-End Bot & Headless Filter
            if (navigator.webdriver) {
                return; // Stop tracking headless/webdriver automation instantly
            }

            let userType = 'new_guest';
                            if (localStorage.getItem('gai_returning_v2')) {
                    userType = 'returning_guest';
                } else {
                    localStorage.setItem('gai_returning_v2', '1');
                }
                        let sessionDepth = parseInt(sessionStorage.getItem('gai_depth') || '0') + 1;
            sessionStorage.setItem('gai_depth', sessionDepth);

            const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            const deviceType = (isMobileUA || window.innerWidth < 1024) ? 'mobile' : 'desktop';
            
            const urlParams = new URLSearchParams(window.location.search);
            let currentLang = urlParams.get('lang') || document.documentElement.lang || 'ar';
            if (currentLang.includes('en')) currentLang = 'en';
            if (currentLang.includes('ar')) currentLang = 'ar';

            // Capture custom search query
            let searchQuery = '';
            if (!searchQuery && urlParams.get('gai_search')) {
                searchQuery = urlParams.get('gai_search');
            }

            // 1. Log Page View
            fetch('/wp-json/gai/v1/track', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    post_id: 4700,
                    page_type: 'tutorial',
                    user_type: userType,
                    guest_type: userType,
                    search_query: searchQuery,
                    referrer: document.referrer || '',
                    device: deviceType,
                    session_depth: sessionDepth,
                    lang: currentLang
                })
            });

            // 2. Track Outbound Clicks (Conversion)
            document.addEventListener('click', function(e) {
                const trackBtn = e.target.closest('.gai-track-visit');
                if (trackBtn) {
                    const pid = trackBtn.getAttribute('data-post-id');
                    fetch('/wp-json/gai/v1/track', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            event: 'click',
                            post_id: pid,
                            page_type: 'tool_click',
                            lang: currentLang
                        })
                    });
                }
            });
        } catch (e) {}
    }, 500); 
});</script> <script type="speculationrules">{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/gateofai-v5/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script> <script type="litespeed/javascript">(function(){const texts={en:{fullMessage:"We use cookies to personalize content, analyze traffic, and enhance your experience on GateOfAI.com. By accepting, you consent to our Privacy Policy and cookie usage.",accept:"Accept",reject:"Reject",language:"Language",dir:"ltr",},ar:{fullMessage:"نستخدم ملفات تعريف الارتباط لتخصيص المحتوى وتحليل الحركة وتحسين تجربتك على GateOfAI.com. بقبولك، فإنك توافق على سياسة الخصوصية واستخدام ملفات تعريف الارتباط.",accept:"موافقة",reject:"رفض",language:"اللغة",dir:"rtl",}};const savedLang=localStorage.getItem("cookieLang")||"en";const consent=localStorage.getItem("cookieConsent");if(consent==="accepted"||consent==="rejected")return;let lang=savedLang;const t=()=>texts[lang];const banner=document.createElement("div");banner.id="gateofai-cookie-banner";banner.dir=t().dir;banner.innerHTML=`
        <div style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          backdrop-filter: blur(12px);
          background: rgba(0, 40, 80, 0.85);
          color: #eee;
          padding: 1.5rem 1rem;
          z-index: 999999;
          font-family: 'Courier New', monospace;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: ${lang === "ar" ? "right" : "center"};
          box-shadow: 0 -2px 20px rgba(0,0,0,0.8);
        ">
          <p id="cookie-typing-text" style="margin-bottom: 1rem; font-size: 15px; line-height: 1.6; min-height: 3em;"></p>
          <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 0.8rem;">
            <button id="cookie-accept" style="
              padding: 0.5rem 1.4rem;
              background: linear-gradient(145deg, #0fffc1, #00c48c);
              border: none;
              color: #000;
              font-weight: bold;
              border-radius: 25px;
              cursor: pointer;
              transition: transform 0.2s ease;
            ">${t().accept}</button>
            <button id="cookie-reject" style="
              padding: 0.5rem 1.4rem;
              background: linear-gradient(145deg, #ff4e50, #e63946);
              border: none;
              color: #fff;
              font-weight: bold;
              border-radius: 25px;
              cursor: pointer;
              transition: transform 0.2s ease;
            ">${t().reject}</button>
          </div>
          <div style="font-size: 13px;">
            🌐 ${t().language}:
            <select id="cookie-lang" style="margin-left: 8px; padding: 5px 10px; border-radius: 6px; background: #111; color: #fff; border: 1px solid #333;">
              <option value="en" ${lang === "en" ? "selected" : ""}>English</option>
              <option value="ar" ${lang === "ar" ? "selected" : ""}>العربية</option>
            </select>
          </div>
        </div>
        <style>
          #cookie-typing-text::after {
            content: '|';
            animation: blink 1s step-start infinite;
          }
          @keyframes blink {
            50% { opacity: 0; }
          }
          #cookie-accept:hover, #cookie-reject:hover {
            transform: scale(1.05);
          }
        </style>
      `;document.body.appendChild(banner);const typeText=(text,element,speed=28)=>{let index=0;const typing=setInterval(()=>{if(index<text.length){element.textContent+=text[index++]}else{clearInterval(typing)}},speed)};typeText(t().fullMessage,document.getElementById("cookie-typing-text"));document.getElementById("cookie-accept").onclick=function(){localStorage.setItem("cookieConsent","accepted");banner.remove()};document.getElementById("cookie-reject").onclick=function(){localStorage.setItem("cookieConsent","rejected");banner.remove()};document.getElementById("cookie-lang").onchange=function(e){localStorage.setItem("cookieLang",e.target.value);location.reload()}})()</script> <style>.googlesitekit-sign-in-with-google__frontend-output-button{max-width:320px}
		.interim-login #login>.googlesitekit-sign-in-with-google__frontend-output-button{margin-bottom:16px}</style> <script type="litespeed/javascript" data-src="https://accounts.google.com/gsi/client"></script> <script type="litespeed/javascript">(()=>{async function handleCredentialResponse(response){try{const res=await fetch('https://gateofai.com/wp-login.php?action=googlesitekit_auth',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams(response)});const commentText=document.querySelector('#comment')?.value;const postId=document.querySelectorAll('.googlesitekit-sign-in-with-google__comments-form-button')?.[0]?.className?.match(/googlesitekit-sign-in-with-google__comments-form-button-postid-(\d+)/)?.[1];if(!!commentText?.length){sessionStorage.setItem(`siwg-comment-text-${postId}`,commentText)}location.reload()}catch(error){console.error(error)}}if(typeof google!=='undefined'){google.accounts.id.initialize({client_id:'442805551754-h4jrtq2er7mpejrqp01lmqda0ck9nfgg.apps.googleusercontent.com',callback:handleCredentialResponse,library_name:'Site-Kit'})}const defaultButtonOptions={"theme":"outline","text":"signin_with","shape":"rectangular"};document.querySelectorAll('.googlesitekit-sign-in-with-google__frontend-output-button').forEach((siwgButtonDiv)=>{const buttonOptions={shape:siwgButtonDiv.getAttribute('data-googlesitekit-siwg-shape')||defaultButtonOptions.shape,text:siwgButtonDiv.getAttribute('data-googlesitekit-siwg-text')||defaultButtonOptions.text,theme:siwgButtonDiv.getAttribute('data-googlesitekit-siwg-theme')||defaultButtonOptions.theme,};if(typeof google!=='undefined'){google.accounts.id.renderButton(siwgButtonDiv,buttonOptions)}});const postId=document.body.className.match(/postid-(\d+)/)?.[1];const commentField=document.querySelector('#comment');const commentText=sessionStorage.getItem(`siwg-comment-text-${postId}`);if(commentText?.length&&commentField&&!!postId){commentField.value=commentText;sessionStorage.removeItem(`siwg-comment-text-${postId}`)}})()</script>  <script id="gateofai-v2-core-js-extra" type="litespeed/javascript">var gateOfAiData={"ajax_url":"https://gateofai.com/wp-admin/admin-ajax.php","nonce":"5752250418","gai_lang":"ar"}</script> <script id="gai-newsletter-js-extra" type="litespeed/javascript">var gai_newsletter_vars={"ajax_url":"https://gateofai.com/wp-admin/admin-ajax.php","nonce":"4c5dfeb575"}</script> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script><script data-no-optimize="1">window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||(sessionStorage.getItem("litespeed_reloaded")?console.log("LiteSpeed: skipping guest vary reload (already reloaded this session)"):fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),sessionStorage.setItem("litespeed_reloaded","1"),window.location.reload(!0))}));</script><script data-optimized="1" type="litespeed/javascript" data-src="https://gateofai.com/wp-content/litespeed/js/4d567f7ac617f389c61d14758e8474f5.js?ver=5810a"></script></body></html>
<!-- Page optimized by LiteSpeed Cache @2026-06-27 00:27:41 -->

<!-- Page cached by LiteSpeed Cache 7.8.1 on 2026-06-27 00:27:41 -->
<!-- Guest Mode -->
<!-- QUIC.cloud CCSS in queue -->
<!-- QUIC.cloud UCSS in queue -->