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> | |
| <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; | |
| } | |
| textarea { | |
| resize: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <div class="flex justify-center items-center mb-4"> | |
| <i data-feather="search" class="text-indigo-600 w-12 h-12 mr-4"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">MediaMinds Analyzer Pro</h1> | |
| </div> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| أداة متقدمة لتحليل انتشار المحتوى المرئي عبر المنصات الرقمية باستخدام الذكاء الاصطناعي | |
| </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 for="userText" class="block text-lg font-medium text-gray-700 mb-2">نص التحليل</label> | |
| <textarea id="userText" name="userText" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="أدخل النص المرافق للصورة أو الفيديو..."></textarea> | |
| </div> | |
| <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"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">معاينة الوسائط</h3> | |
| <img id="previewImg" class="rounded-lg mx-auto" alt="معاينة الصورة"> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="result" class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto hidden"> | |
| <div class="flex items-center mb-6"> | |
| <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> | |
| <div class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="analysis-card bg-indigo-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-indigo-700 mb-2">نوع الوسيط</h3> | |
| <p id="mediaType" class="text-gray-700">-</p> | |
| </div> | |
| <div class="analysis-card bg-green-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-green-700 mb-2">نطاق الانتشار</h3> | |
| <p id="spreadLevel" class="text-gray-700">-</p> | |
| </div> | |
| <div class="analysis-card bg-yellow-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-yellow-700 mb-2">المنصات</h3> | |
| <p id="platforms" class="text-gray-700">-</p> | |
| </div> | |
| <div class="analysis-card bg-purple-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-purple-700 mb-2">التفاعلات</h3> | |
| <p id="engagement" class="text-gray-700">-</p> | |
| </div> | |
| </div> | |
| <div class="analysis-card bg-white border border-gray-200 p-4 rounded-lg"> | |
| <h3 class="font-medium text-gray-800 mb-2">تحليل المحتوى</h3> | |
| <p id="contentAnalysis" class="text-gray-700 leading-relaxed">-</p> | |
| </div> | |
| <div class="analysis-card bg-white border border-gray-200 p-4 rounded-lg"> | |
| <h3 class="font-medium text-gray-800 mb-2">تقييم المصداقية</h3> | |
| <p id="credibility" class="text-gray-700 leading-relaxed">-</p> | |
| </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_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. إذا كانت هناك صور أو مقاطع مشابهة، فحلل أوجه التشابه وأي أنماط تكرار. | |
| 🧾 النص الوصفي أو التحليلي المرفق: | |
| {user_text} | |
| 🖼️ الوسائط المرفقة: | |
| (يتم تحليل الصورة أو الفيديو المرفق كجزء من الإدخال)`; | |
| 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'); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const userText = form.userText.value; | |
| const file = form.media.files[0]; | |
| if (!file) { | |
| alert('الرجاء اختيار ملف للتحليل'); | |
| return; | |
| } | |
| // Show loading and hide results | |
| loadingDiv.classList.remove('hidden'); | |
| resultDiv.classList.add('hidden'); | |
| // Show preview | |
| 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('{user_text}', userText)}\n\nالصورة: ${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: 1500, | |
| temperature: 0.7, | |
| stream: false | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| displayResults(data.choices[0].message.content); | |
| } else { | |
| throw new Error(data.error?.message || 'فشل في التحليل'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| document.getElementById('contentAnalysis').textContent = `حدث خطأ أثناء التحليل: ${error.message}`; | |
| resultDiv.classList.remove('hidden'); | |
| } finally { | |
| loadingDiv.classList.add('hidden'); | |
| } | |
| }; | |
| reader.readAsDataURL(file); | |
| }); | |
| function displayResults(analysisText) { | |
| // Basic parsing of the analysis results | |
| // In a real app, you would parse this more carefully | |
| document.getElementById('contentAnalysis').textContent = analysisText; | |
| // Extract other sections if possible (simplified for demo) | |
| if (analysisText.includes('صورة')) { | |
| document.getElementById('mediaType').textContent = 'صورة'; | |
| } | |
| if (analysisText.includes('عالمي')) { | |
| document.getElementById('spreadLevel').textContent = 'انتشار عالمي'; | |
| } else if (analysisText.includes('إقليمي')) { | |
| document.getElementById('spreadLevel').textContent = 'انتشار إقليمي'; | |
| } else { | |
| document.getElementById('spreadLevel').textContent = 'انتشار محلي'; | |
| } | |
| resultDiv.classList.remove('hidden'); | |
| } | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |