| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>تحليل صورة بالذكاء الاصطناعي</title> |
| <style> |
| body { font-family: Arial; margin: 40px; } |
| label, button { display: block; margin-top: 15px; } |
| #result { margin-top: 30px; background: #f5f5f5; padding: 20px; border-radius: 8px; min-height: 30px; } |
| </style> |
| </head> |
| <body> |
| <h2>تحليل صورة بالذكاء الاصطناعي</h2> |
| <form id="vision-form"> |
| <label>رابط الصورة (أو ارفع صورة بالأسفل): |
| <input type="url" id="image-url" placeholder="https://example.com/image.jpg"> |
| </label> |
| <label>أو ارفع صورة: |
| <input type="file" id="image-input" accept="image/*"> |
| </label> |
| <button type="submit">حلل الصورة</button> |
| </form> |
| <div id="result"></div> |
|
|
| <script> |
| async function uploadToImgur(file) { |
| |
| const formData = new FormData(); |
| formData.append('image', file); |
| const res = await fetch('https://api.imgur.com/3/image', { |
| method: 'POST', |
| headers: { Authorization: 'Client-ID 54621f8d4e61e67' }, |
| body: formData |
| }); |
| const data = await res.json(); |
| if (data.data && data.data.link) return data.data.link; |
| throw new Error("تعذر رفع الصورة"); |
| } |
| |
| document.getElementById('vision-form').addEventListener('submit', async function(event) { |
| event.preventDefault(); |
| const resultDiv = document.getElementById('result'); |
| resultDiv.textContent = "جاري التحليل..."; |
| |
| let imageUrl = document.getElementById('image-url').value.trim(); |
| |
| |
| const fileInput = document.getElementById('image-input'); |
| if (!imageUrl && fileInput.files.length) { |
| try { |
| imageUrl = await uploadToImgur(fileInput.files[0]); |
| } catch (err) { |
| resultDiv.textContent = "خطأ في رفع الصورة: " + err.message; |
| return; |
| } |
| } |
| |
| if (!imageUrl) { |
| resultDiv.textContent = "من فضلك ضع رابط صورة أو ارفع صورة من جهازك."; |
| return; |
| } |
| |
| |
| const body = JSON.stringify({ |
| messages: [{ |
| role: "user", |
| content: [ |
| { type: "text", text: "what's in the image" }, |
| { type: "image", url: imageUrl } |
| ] |
| }], |
| web_access: false |
| }); |
| |
| try { |
| const response = await fetch('https://chatgpt-vision1.p.rapidapi.com/matagvision2', { |
| method: 'POST', |
| headers: { |
| 'x-rapidapi-key': '091dbfbf0emsh6606eb2165cfd97p191257jsnd017aa229e09', |
| 'x-rapidapi-host': 'chatgpt-vision1.p.rapidapi.com', |
| 'Content-Type': 'application/json' |
| }, |
| body: body |
| }); |
| |
| const data = await response.json(); |
| resultDiv.textContent = JSON.stringify(data, null, 2); |
| } catch (error) { |
| resultDiv.textContent = "حدث خطأ: " + error; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
