Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>محلل الوسائط الذكي</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .analysis-card { | |
| transition: all 0.3s ease; | |
| } | |
| .analysis-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| #previewImg { | |
| max-height: 300px; | |
| object-fit: contain; | |
| } | |
| #resultFrame { | |
| width: 100%; | |
| height: 600px; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| background: white; | |
| } | |
| .download-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .download-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-3xl font-bold text-indigo-700">Media Mind Explorer</h1> | |
| <p class="text-gray-600 mt-2">أداة التحليل المتقدمة للوسائط الرقمية</p> | |
| </header> | |
| <!-- Main Form --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8 max-w-4xl mx-auto"> | |
| <form id="analyzeForm" class="space-y-6"> | |
| <div> | |
| <label class="block text-lg font-medium text-gray-700 mb-2">رفع الوسائط</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600 justify-center"> | |
| <label for="media" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none"> | |
| <span>اختر ملف</span> | |
| <input id="media" name="media" type="file" class="sr-only" accept="image/*" required> | |
| </label> | |
| <p class="pr-1">أو اسحب الملف هنا</p> | |
| </div> | |
| <p class="text-xs text-gray-500">الصور أو الفيديوهات حتى 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button type="submit" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 flex items-center"> | |
| <i data-feather="activity" class="ml-2"></i> | |
| بدء التحليل | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Preview Section --> | |
| <div id="preview" class="flex justify-center mb-8 hidden"> | |
| <div class="bg-white p-4 rounded-xl shadow-md max-w-md w-full"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-lg font-medium text-gray-800">معاينة الوسائط</h3> | |
| <button onclick="document.getElementById('preview').classList.add('hidden')" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <img id="previewImg" class="rounded-lg mx-auto w-full" alt="معاينة الصورة"> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="result" class="bg-white rounded-xl shadow-lg p-6 max-w-6xl mx-auto hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex items-center"> | |
| <i data-feather="bar-chart-2" class="text-indigo-600 w-6 h-6 ml-2"></i> | |
| <h2 class="text-xl font-bold text-gray-800">نتائج التحليل</h2> | |
| </div> | |
| <button id="downloadPdf" class="download-btn px-4 py-2 bg-green-600 text-white rounded-lg flex items-center hover:bg-green-700"> | |
| <i data-feather="download" class="ml-2"></i> | |
| تحميل التقرير | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="analysis-card bg-white border border-gray-200 p-4 rounded-lg"> | |
| <iframe id="resultFrame"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Indicator --> | |
| <div id="loading" class="text-center py-8 hidden"> | |
| <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600 mb-4"></div> | |
| <p class="text-gray-600">جارٍ تحليل المحتوى، الرجاء الانتظار...</p> | |
| </div> | |
| </div> | |
| <script> | |
| const AZURE_ENDPOINT1 = "https://lahja-dev-resource2.services.ai.azure.com/models/chat/completions?api-version=2024-05-01-preview"; | |
| const AZURE_API_KEY1 = "E7k8z3ADEUi2DZ1dl9pHlSTeUSoKb3jVjg5zYDAPNHBHKBfXlbTFJQQJ99BJACHYHv6XJ3w3AAAAACOGyF4Z"; | |
| const MODEL_NAME1 = "Wasm-Dash"; | |
| const AZURE_ENDPOINT = "https://lahja-dev-resource2.openai.azure.com/openai/deployments/Wasm-V1/chat/completions?api-version=2025-01-01-preview"; | |
| const AZURE_API_KEY = "E7k8z3ADEUi2DZ1dl9pHlSTeUSoKb3jVjg5zYDAPNHBHKBfXlbTFJQQJ99BJACHYHv6XJ3w3AAAAACOGyF4Z"; | |
| const DEPLOYMENT = "Wasm-V1"; | |
| const PROMPT_TEMPLATE = ` | |
| أنت خبير في تحليل انتشار الوسائط الرقمية (صور / فيديوهات) على الإنترنت. | |
| المطلوب: | |
| قم بتحليل الوسائط المرفقة والنص المصاحب لها، واستخرج النقاط التالية مع تقديم النتيجة على شكل تقرير تحليلي منسق ومرتب بعناوين واضحة (وليس جدول): | |
| 1️⃣ نوع الوسيط (صورة / فيديو). | |
| 2️⃣ عدد المنشورات المشابهة أو النسخ المنتشرة. | |
| 3️⃣ المنصات التي انتشر عليها الوسيط. | |
| 4️⃣ مستوى الانتشار (محلي / إقليمي / عالمي). | |
| 5️⃣ نسب التفاعل الإجمالية (إعجابات / مشاركات / تعليقات). | |
| 6️⃣ الفترات الزمنية الأبرز للانتشار. | |
| 7️⃣ تحليل دلالي لمحتوى الصورة أو الفيديو (ما الذي يظهر؟ ما الرسالة العامة؟). | |
| 8️⃣ تقييم الموثوقية واحتمالية التلاعب أو التعديل. | |
| 9️⃣ وجود صور أو مقاطع مشابهة وتحليل الأنماط. | |
| أضف في النهاية فقرة **"الملخص العام"** تحتوي على خلاصة النتائج في 3 أسطر. | |
| الناتج النهائي يجب أن يكون منسقًا بأسلوب تقرير نصي مرتب بعناوين فرعية واضحة مع استخدام عناصر HTML لجعل التقرير تفاعلياً وجذاباً. | |
| `; | |
| const form = document.getElementById('analyzeForm'); | |
| const previewDiv = document.getElementById('preview'); | |
| const previewImg = document.getElementById('previewImg'); | |
| const resultDiv = document.getElementById('result'); | |
| const loadingDiv = document.getElementById('loading'); | |
| const downloadBtn = document.getElementById('downloadPdf'); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const file = form.media.files[0]; | |
| const userText = 'تحليل الصورة'; | |
| if (!file) { | |
| alert('الرجاء اختيار ملف للتحليل'); | |
| return; | |
| } | |
| loadingDiv.classList.remove('hidden'); | |
| resultDiv.classList.add('hidden'); | |
| previewDiv.classList.remove('hidden'); | |
| previewImg.src = URL.createObjectURL(file); | |
| const reader = new FileReader(); | |
| reader.onloadend = async () => { | |
| const base64Image = reader.result.split(',')[1]; | |
| const chatPrompt = [ | |
| { | |
| role: "system", | |
| content: "أنت خبير في تحليل الوسائط الرقمية، ومهمتك تحليل الصور والفيديوهات واستخراج البيانات المطلوبة بشكل احترافي ومنسق." | |
| }, | |
| { | |
| role: "user", | |
| content: ` | |
| ${PROMPT_TEMPLATE.replace('{use r_text}', userText)} | |
| 📎 بيانات الصورة المرفقة (Base64): | |
| ${base64Image} | |
| ` | |
| } | |
| ]; | |
| try { | |
| const response = await fetch(AZURE_ENDPOINT, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "api-key": AZURE_API_KEY | |
| }, | |
| body: JSON.stringify({ | |
| model: DEPLOYMENT, | |
| messages: chatPrompt, | |
| max_tokens: 2000, | |
| temperature: 0.7, | |
| stream: false | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| await displayResults(data.choices[0].message.content); | |
| } else { | |
| throw new Error(data.error?.message || 'فشل في التحليل'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| document.getElementById('resultFrame').srcdoc = `<div class="p-4 text-red-600">حدث خطأ أثناء التحليل: ${error.message}</div>`; | |
| resultDiv.classList.remove('hidden'); | |
| } finally { | |
| loadingDiv.classList.add('hidden'); | |
| } | |
| }; | |
| reader.readAsDataURL(file); | |
| }); | |
| async function generateHTMLFromText(analysisText) { | |
| const prompt = ` | |
| أنشئ صفحة HTML جميلة وجذابة لتقرير تحليل الوسائط مع هذه المتطلبات: | |
| 1. تصميم عصري واحترافي مع ألوان متناسقة (أزرق وأخضر فاتح) | |
| 2. تقسيم التقرير إلى أقسام واضحة مع عناوين مميزة | |
| 3. إضافة أيقونات مناسبة لكل قسم | |
| 4. تنسيق النص بشكل جميل مع استخدام الجداول والعناصر التفاعلية عند الحاجة | |
| 5. إمكانية التبديل بين الوضع النهاري والليلي | |
| 6. إضافة رسوم بيانية تفاعلية للبيانات الإحصائية | |
| 7. التأكد من أن التصميم متجاوب مع جميع أحجام الشاشات | |
| هذا هو نص التحليل الذي يجب عرضه: | |
| ${analysisText} | |
| الرجاء إخراج كود HTML كامل مع CSS مدمج بدون أي شرح إضافي. | |
| `; | |
| const messages = [ | |
| { role: "system", content: "أنت مساعد ذكي متخصص في إنشاء صفحات HTML تفاعلية وجذابة." }, | |
| { role: "user", content: prompt } | |
| ]; | |
| try { | |
| const response = await fetch(AZURE_ENDPOINT1, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "api-key": AZURE_API_KEY1 | |
| }, | |
| body: JSON.stringify({ | |
| messages, | |
| max_tokens: 4000, | |
| temperature: 0.5, | |
| model: MODEL_NAME1 | |
| }) | |
| }); | |
| const data = await response.json(); | |
| return data.choices[0].message.content || ""; | |
| } catch (err) { | |
| console.error("خطأ في توليد HTML:", err); | |
| return `<div class="p-8"><h2 class="text-2xl font-bold text-red-600">حدث خطأ في إنشاء التقرير</h2><p class="mt-4">${err.message}</p></div>`; | |
| } | |
| } | |
| async function displayResults(analysisText) { | |
| const html = await generateHTMLFromText(analysisText); | |
| const resultFrame = document.getElementById('resultFrame'); | |
| // Open the frame document for writing | |
| resultFrame.srcdoc = html; | |
| // Wait for the frame to load | |
| resultFrame.onload = function() { | |
| resultDiv.classList.remove('hidden'); | |
| // Set up PDF download functionality | |
| downloadBtn.onclick = async function() { | |
| loadingDiv.classList.remove('hidden'); | |
| try { | |
| const { jsPDF } = window.jspdf; | |
| const pdf = new jsPDF({ | |
| orientation: 'portrait', | |
| unit: 'mm' | |
| }); | |
| // Use html2canvas to capture the iframe content | |
| const canvas = await html2canvas(resultFrame.contentDocument.body, { | |
| scale: 2, | |
| logging: true, | |
| useCORS: true | |
| }); | |
| const imgData = canvas.toDataURL('image/png'); | |
| const imgWidth = 210; // A4 width in mm | |
| const imgHeight = canvas.height * imgWidth / canvas.width; | |
| pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); | |
| pdf.save('تقرير_تحليل_الوسائط.pdf'); | |
| } catch (error) { | |
| console.error('Error generating PDF:', error); | |
| alert('حدث خطأ أثناء إنشاء ملف PDF'); | |
| } finally { | |
| loadingDiv.classList.add('hidden'); | |
| } | |
| }; | |
| }; | |
| } | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |