توليد صور بنماذج الذكاء الإصطناعي

Hxfhf Ucicic · 19 مايو

كيف يمكنني توليد صور بستخدام JavaScript

حيث اريد اي نص يتم ادخاله في حقل ينفذ في div الفارغ ويظهر صور على حسب المحتوى الذي تم ادخاله

محمد_عاطف · 19 مايو

هل لديك او قمت بتصميم نماذج ذكاء اصطناعي لتوليد الصور ؟

اذا لم يكن لديك سيتوجب عليك شراء رصيد مثلا على موقع openai لتستطيع استخدامه فى توليد صور بالذكاء الإصطناعي.

مثلا إليك هذه الدالة :

async function generateImage() {
  const text = document.getElementById('textInput').value;
  const container = document.getElementById('image-container');
  container.innerHTML = "جاري توليد الصورة...";

  try {
    const response = await fetch("https://api.openai.com/v1/images/generations", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer API_KEY" // استبدلها بمفتاحك
      },
      body: JSON.stringify({
        prompt: text,
        n: 1,
        size: "512x512"
      })
    });

    const data = await response.json();
    const imageUrl = data.data[0].url;

    container.innerHTML = `<img src="${imageUrl}" alt="image">`;
  } catch (error) {
    console.error("خطأ في التوليد:", error);
    container.innerHTML = "حدث خطأ أثناء توليد الصورة.";
  }
}

في الدالة السابقة يجب عليك أولا إستبدال API_KEY بال api_key في حسابك على openai .حيث بعد شحن الرصيد سيتوجب عليك إنشاء api_key ووضعه في الكود هنا.

بعد ذلك يمكنك إستخدام تلك الدالة لتوليد الصور .

Hxfhf Ucicic · 19 مايو

لقد استخدمت openai ولم يعمل الكود

const api = "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";

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "n":3,
                "size":"256x256"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

هاد هو كود جافا سكريبت

Hxfhf Ucicic · 19 مايو

لقد استخدمت openai ولم يعمل الكود

const api = "";

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "n":3,
                "size":"256x256"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

هاد هو كود جافا سكريبت

AI.zip

بلال زيادة · 19 مايو

بتاريخ 42 دقائق مضت قال Hxfhf Ucicic:

لقد استخدمت openai ولم يعمل الكود

const api = "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";

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "n":3,
                "size":"256x256"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

هاد هو كود جافا سكريبت

AI.zip 2.11 kB · 1 تنزيل

الكود الذي قدمته في الملفات (index.html, main.js, style.css)، ويبدو أن هناك عدة مشاكل في الكود تمنع عملية توليد الصور باستخدام واجهة برمجة التطبيقات (API) الخاصة بـ OpenAI لتحقيق هدف إدخال نص في حقل، ثم إرسال طلب إلى OpenAI API لتوليد صور بناءً على النص، وعرضها في عنصر div.

هناك مشكلة في index.html حيث أن الملف غير مكتمل ويحتوي على أجزاء ناقصة (مثل عدم وجود وسم <body> مكتمل أو روابط لملفات CSS وJavaScript) ثم يجب إضافة زر أو حدث لتشغيل دالة getImage عند إدخال النص والضغط على الزر.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مولد الصور بالذكاء الاصطناعي</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>مولد الصور بالذكاء الاصطناعي</h2>
    <div class="prompt">
        <input type="text" id="input" placeholder="أدخل وصف الصورة...">
        <button onclick="getImage()">توليد</button>
    </div>
    <div class="images"></div>
    <script src="main.js"></script>
</body>
</html>

مشاكل في main.js حيث السطر img.photo.url غير صحيح. الصياغة الصحيحة للوصول إلى رابط الصورة هي photo.url، ويجب تعيينه إلى خاصية src لعنصر img، لا يتم التعامل مع الأخطاء المحتملة من الـ API (مثل إدخال مفتاح API غير صالح أو استجابة غير متوقعة).

دالة getImage لا ترتبط بأي حدث (مثل النقر على الزر).

لم يتم التحقق من إدخال المستخدم قبل إرسال الطلب.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مولد الصور بالذكاء الاصطناعي</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>مولد الصور بالذكاء الاصطناعي</h2>
    <div class="prompt">
        <input type="text" id="input" placeholder="أدخل وصف الصورة...">
        <button onclick="getImage()">توليد</button>
    </div>
    <div class="images"></div>
    <script src="main.js"></script>
</body>
</html>

const apiKey = "YOUR_OPENAI_API_KEY"; // استبدل بمفتاح API صالح
const input = document.getElementById('input');
const imagesContainer = document.querySelector('.images');

const getImage = async () => {
    // التحقق من إدخال المستخدم
    if (!input.value.trim()) {
        alert("يرجى إدخال وصف للصورة");
        return;
    }

    // عرض حالة التحميل
    imagesContainer.innerHTML = '<p>جارٍ التحميل...</p>';

    try {
        const response = await fetch("https://api.openai.com/v1/images/generations", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${apiKey}`
            },
            body: JSON.stringify({
                prompt: input.value,
                n: 3, // عدد الصور
                size: "256x256" // حجم الصورة
            })
        });

        // التحقق من نجاح الطلب
        if (!response.ok) {
            throw new Error(`خطأ في الطلب: ${response.status}`);
        }

        const data = await response.json();
        
        // التحقق من وجود بيانات الصور
        if (!data.data || !Array.isArray(data.data)) {
            throw new Error("لم يتم العثور على صور في الاستجابة");
        }

        // إفراغ الحاوية
        imagesContainer.innerHTML = '';

        // إضافة الصور إلى DOM
        data.data.forEach(photo => {
            const container = document.createElement('div');
            const img = document.createElement('img');
            img.src = photo.url;
            img.alt = input.value;
            container.appendChild(img);
            imagesContainer.appendChild(container);
        });

    } catch (error) {
        console.error("Error:", error);
        imagesContainer.innerHTML = `<p style="color: red;">حدث خطأ: ${error.message}</p>`;
    }
};

// ربط حدث الضغط على زر Enter
input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        getImage();
    }
});

محمد_عاطف · 19 مايو

بتاريخ 45 دقائق مضت قال Hxfhf Ucicic:

لقد استخدمت openai ولم يعمل الكود

const api = "";

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "n":3,
                "size":"256x256"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

هاد هو كود جافا سكريبت

AI.zip 2.11 kB · 3 تنزيلات

يرجى عدم مشاركة ال API_KEY هكذا حتى لا يقوم بإستخدامه أى شخص أخر . يرجى تغير ال api_key لديك .

أولا المشكلة أن النموذج يطلب إسم للنموذج الذي تريد إستخدامه وهذا لم يتم توفيره . وأيضا حجم الصورة غير مناسب حيث النموذج لا يستطيع توليد صورة 256x256 .

يجب أن يكون methods كالتالي :

const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "model":"gpt-image-1",
                "n":3,
                "size":"1024x1024"
            }
        )
    }

الآن ستجد أنه تم إرسال الطلب بنجاح ولكن تظهر رسالة خطأ أن الرصيد قد نفذ أو وصلت للحد الأقصى للإستخدام . لهذا تأكد من أن لديك رصيد في حسابك .

Hxfhf Ucicic · 19 مايو

const api = ""

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "n":3,
                "size":"1024x1024"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

لقد عدلت كما وضحت لي لكن عند ضغط على زر بعد ملئ الحقل تختفي div ولا يظهر شيء

محمد_عاطف · 19 مايو

بتاريخ 8 دقائق مضت قال Hxfhf Ucicic:

const api = ""

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "n":3,
                "size":"1024x1024"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

لقد عدلت كما وضحت لي لكن عند ضغط على زر بعد ملئ الحقل تختفي div ولا يظهر شيء

لم تقم بوضع إسم النموذج كما أخبرتك . وأيضا تأكد من وضع API_KEY في الكود لديك مع وجود رصيد .

هذا هو الكود :

const api = "";

const inp = document.getElementById('input')
const images = document.querySelector('.images')

const getImage = async () => {
    // make a request to openoia api
    const methods ={
        method: "POST",
        headers:{
            "Content-Type":"application/json",
            "Authorization":`Bearer ${api}`
        },
        body:JSON.stringify(
            {
                "prompt":inp.value,
                "model":"gpt-image-1",
                "n":3,
                "size":"1024x1024"
            }
        )
    }
    const res = await fetch("https://api.openai.com/v1/images/generations" , methods)
    // parse the response as json
    const data = await res.json()
    console.log(data);
    
   const listImages = data.data;
   images.innerHTML = '';
   listImages.map(photo => {
    const container = document.createElement('div')
    images.append(container)
    const img = document.createElement('img')
    container.append(img)
    img.photo.url
   })

}

إذا لم يعمل يرجى فتح ال console وإرسال صورة للخطأ الذي يظهر لك .

Hxfhf Ucicic · 19 مايو

محمد_عاطف · 19 مايو

بتاريخ 21 دقائق مضت قال Hxfhf Ucicic:

يظهر لك خطأ 429 وهذا يعني انه تم إرسال الكثر من الطلبات .

يجب الانتظار فترة من الوقت ومن ثم اعادة المحاولة ولا تضغط على الزر سريعا حتى لا يتم ارسال العديد من الطلبات ويظهر الخطا.

Hxfhf Ucicic · 19 مايو

لقد انتظرت وقتاً طويلاً ولم تنحل المشكلة

محمد_عاطف · 19 مايو

بتاريخ 9 دقائق مضت قال Hxfhf Ucicic:

لقد انتظرت وقتاً طويلاً ولم تنحل المشكلة

هذا خطأ 400 وليس 429 كالذي سابقا. وهو بسبب أنه ليس لديك رصيد كما وضحت لك . هل قمت بشحن رصيد في حسابك أم لا ؟ وهل قمت بتعديل الكود وإضافة إسم النموذج كما وضحت لك ؟

يرجى إرفاق ملف المشروع المضغوط بعد أخر تعديل أجريته.

Hxfhf Ucicic · 19 مايو

AI (2).zip

محمد_عاطف · 19 مايو

بتاريخ 37 دقائق مضت قال Hxfhf Ucicic:

AI (2).zip 2.11 kB · 0 تنزيلات

لماذا لم تقم بإتباع الحلول التي وضحتها لك هذا هو سبب المشكلة الرئيسي .

أولا لم تقم بتعديل الدالة وإضافة إسم النموذج gpt-image-1 حيث يبدوا أن حسابك ليس مدفوعا لهذا ليس لك صلاحية الوصول إلى النموذج الإفتراضي dall-e-2 .

وأيضا بعد تعديلها سيظهر خطأ أنه ليس لديك رصيد :

image.png.1ca9e486c3913ada831c8cbcf7ca0f6f.png

هذا هو ملف main.js يجب إستخدامه لحل المشكلة الأساسية . بعد ذلك ستجد مشكلة الرصيد يجب شحن رصيدك وإستخدام api_key مختلف.

لن يعمل الكود بدون هذه الحلول.

main.js

توليد صور بنماذج الذكاء الإصطناعي

السؤال

Hxfhf Ucicic

13 أجوبة على هذا السؤال

Recommended Posts

محمد_عاطف

Hxfhf Ucicic

Hxfhf Ucicic

بلال زيادة

محمد_عاطف

Hxfhf Ucicic

محمد_عاطف

Hxfhf Ucicic

محمد_عاطف

Hxfhf Ucicic

محمد_عاطف

Hxfhf Ucicic

محمد_عاطف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية