<h2>أداة توليد الصور (تجريبية - مفتاح API مكشوف!)</h2> <p> <label for="promptInput">اكتب وصف الصورة (Prompt):</label><br> <input type="text" id="promptInput" style="width: 80%; padding: 8px;" placeholder="مثال: قطة ترتدي قبعة فضاء وتنظر للنجوم"> </p> <p> <label for="modelSelect">اختر النموذج:</label> <select id="modelSelect"> <option value="dall-e-2">DALL-E 2</option> <option value="dall-e-3" selected>DALL-E 3</option> </select> </p> <p> <label for="sizeSelect">اختر الحجم:</label> <select id="sizeSelect"> <!-- سيتم ملء الخيارات بناءً على النموذج المختار --> </select> </p> <button onclick="generateImageFromBlogger()">توليد الصورة</button> <div id="imageResultContainer" style="margin-top: 20px;"> <p>سيتم عرض الصورة هنا...</p> </div> <p style="color: red; font-weight: bold; border: 2px solid red; padding: 15px; margin-top: 25px; background-color: #ffebee;"> <strong>تحذير أمان حاسم للغاية:</strong><br> مفتاح الـ API المستخدم في هذا الكود (`sk-proj-ae4sK...`) تم تضمينه مباشرة وهو الآن <strong>مكشوف تمامًا</strong>. لقد شاركت هذا المفتاح، مما يجعله غير آمن. أي شخص يرى هذا الكود يمكنه سرقة المفتاح واستخدامه على حسابك في OpenAI.<br> <strong>هذا الكود مقدم بناءً على إصرارك وعلى مسؤوليتك الشخصية الكاملة. لا ينصح به إطلاقًا للاستخدام العام.</strong><br> <strong>الرجاء إلغاء هذا المفتاح من لوحة تحكم OpenAI فورًا بعد تجربتك وإنشاء مفتاح جديد.</strong> </p> <script> // !!! تحذير أمان حاسم: المفتاح أدناه مكشوف لأنه تم مشاركته !!! // !!! هذا المفتاح يجب إلغاؤه من OpenAI فورًا بعد التجربة !!! const OPENAI_API_KEY = "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"; const modelSelect = document.getElementById('modelSelect'); const sizeSelect = document.getElementById('sizeSelect'); const promptInput = document.getElementById('promptInput'); const imageResultContainer = document.getElementById('imageResultContainer'); const modelSizes = { "dall-e-2": ["256x256", "512x512", "1024x1024"], "dall-e-3": ["1024x1024", "1792x1024", "1024x1792"] }; function updateSizeOptions() { const selectedModel = modelSelect.value; const sizes = modelSizes[selectedModel] || ["1024x1024"]; sizeSelect.innerHTML = ''; sizes.forEach(size => { const option = document.createElement('option'); option.value = size; option.textContent = size; sizeSelect.appendChild(option); }); if (sizes.length > 0) { sizeSelect.value = sizes[0]; } } modelSelect.addEventListener('change', updateSizeOptions); document.addEventListener('DOMContentLoaded', updateSizeOptions); async function generateImageFromBlogger() { const promptText = promptInput.value; const selectedModel = modelSelect.value; const selectedSize = sizeSelect.value; if (!promptText) { imageResultContainer.innerHTML = '<p style="color: orange;">الرجاء إدخال وصف للصورة.</p>'; return; } imageResultContainer.innerHTML = '<p>جاري توليد الصورة، يرجى الانتظار...</p><div class="loader"></div>'; addLoaderStyles(); try { const headers = new Headers(); headers.append('Content-Type', 'application/json'); headers.append('Authorization', `Bearer ${OPENAI_API_KEY.trim()}`); const body = JSON.stringify({ model: selectedModel, prompt: promptText, n: 1, size: selectedSize, }); const response = await fetch('https://api.openai.com/v1/images/generations', { method: 'POST', headers: headers, body: body }); if (!response.ok) { let errorData; try { errorData = await response.json(); // محاولة قراءة الخطأ كـ JSON } catch (e) { // إذا فشلت قراءة الـ JSON (مثلاً إذا كان الرد نص عادي أو HTML) errorData = { error: { message: `فشل في قراءة استجابة الخطأ كـ JSON. حالة الاستجابة: ${response.status} ${response.statusText}` } }; } console.error('Error from OpenAI API:', errorData, 'Raw response status:', response.status, response.statusText); // بناء رسالة الخطأ الأساسية let errorMessage = `<p style="color: red;">حدث خطأ من OpenAI: `; if (errorData && errorData.error && typeof errorData.error.message === 'string') { errorMessage += errorData.error.message; } else { errorMessage += response.statusText || "خطأ غير معروف"; } errorMessage += ` (الحالة: ${response.status})</p>`; // إضافة تفاصيل إضافية للخطأ إذا كانت متوفرة if (errorData && errorData.error) { if (errorData.error.code === 'billing_hard_limit_reached' || errorData.error.code === 'insufficient_quota') { errorMessage += '<p style="color: red;">لقد تجاوزت حد الفوترة أو الرصيد الخاص بك. يرجى التحقق من حساب OpenAI الخاص بك.</p>'; } else if (errorData.error.type === 'invalid_request_error' && errorData.error.message && // تأكد أن message موجود typeof errorData.error.message === 'string' && // تأكد أنه نص errorData.error.message.includes('safety system')) { // <-- التحقق الآمن errorMessage += '<p style="color: red;">تم رفض طلبك بسبب نظام الأمان الخاص بـ OpenAI. حاول تغيير الوصف.</p>'; } else if (response.status === 401) { errorMessage += '<p style="color: red;">خطأ في المصادقة (401). قد يكون مفتاح الـ API غير صحيح، أو تم إلغاؤه، أو ليس لديه الصلاحية لاستخدام هذا النموذج، أو أنك لم تقم بإعداد طريقة دفع صالحة في حساب OpenAI الخاص بك.</p>'; } else if (response.status === 429) { errorMessage += '<p style="color: red;">لقد تجاوزت حد الطلبات (Rate Limit). يرجى الانتظار قليلاً ثم المحاولة مرة أخرى. أو تحقق من حدود حسابك في OpenAI.</p>'; } } imageResultContainer.innerHTML = errorMessage; return; } const data = await response.json(); if (data.data && data.data.length > 0) { const imageUrl = data.data[0].url; imageResultContainer.innerHTML = ` <p>تم توليد الصورة بنجاح:</p> <img src="${imageUrl}" alt="صورة مولدة: ${promptText.substring(0, 50)}" style="max-width: 100%; border: 1px solid #ccc;" /> <p><a href="${imageUrl}" target="_blank" rel="noopener noreferrer">فتح الصورة في تبويب جديد</a></p> `; } else { imageResultContainer.innerHTML = '<p style="color: orange;">لم يتم إرجاع صور. تحقق من وحدة التحكم لمزيد من التفاصيل.</p>'; console.log('No image data received:', data); } } catch (error) { // هذا يلتقط أخطاء الشبكة أو الأخطاء التي تحدث قبل معالجة الاستجابة console.error('Error during fetch operation or an unhandled error:', error); let displayErrorMessage = `<p style="color: red;">حدث خطأ في الشبكة أو الطلب: `; if (error && typeof error.message === 'string') { displayErrorMessage += error.message; // جعل التحقق من الخطأ الأصلي أكثر أمانًا أيضًا if (error.message.includes("non ISO-8859-1 code point")) { displayErrorMessage += `<br><strong>السبب المحتمل:</strong> هناك حرف غير صالح في مفتاح الـ API. يرجى التحقق من مفتاح الـ API الذي أدخلته في الكود والتأكد من أنه صحيح ونظيف تمامًا ولا يحتوي على مسافات أو أحرف غريبة.`; } } else { displayErrorMessage += "خطأ غير معروف أثناء محاولة الاتصال."; } displayErrorMessage += `. تأكد من اتصالك بالإنترنت.</p>`; imageResultContainer.innerHTML = displayErrorMessage; } } function addLoaderStyles() { if (!document.getElementById('loaderStyles')) { const style = document.createElement('style'); style.id = 'loaderStyles'; style.innerHTML = ` .loader { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(style); } } </script>