Spaces:

Amartala
/

visionvortex-analyzer

Running

App Files Files Community

Amartala commited on Oct 17, 2025

Commit

ad50e1c

verified ·

1 Parent(s): 8ea1c7f

<!DOCTYPE html>

Browse files

<html lang="ar">
<head>
<meta charset="UTF-8">
<title>تحليل الوسائط الإعلامية</title>
<style>
body { font-family: Arial; direction: rtl; margin: 20px; }
textarea { width: 100%; }
#result { white-space: pre-wrap; background: #f3f3f3; padding: 10px; margin-top: 20px; }
img { max-width: 300px; display: block; margin-top: 10px; }
</style>
</head>
<body>
<h1>تحليل الوسائط الإعلامية</h1>

<form id="analyzeForm">
<label>نص التحليل:</label><br>
<textarea name="userText" rows="4" placeholder="أدخل نص التحليل هنا"></textarea><br><br>
<label>اختر صورة:</label><br>
<input type="file" name="media" accept="image/*" required><br><br>
<button type="submit">تحليل</button>
</form>

<div id="preview"></div>
<div id="result"></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_MEDIA_ANALYSIS = """
أنت خبير في تحليل انتشار الوسائط الرقمية (صور / فيديوهات) على الإنترنت.

المطلوب:
قم بتحليل الوسائط المرفقة والنص المصاحب لها لاستخراج وتحليل العناصر التالية:

🔹 1. نوع الوسيط:
- صورة / فيديو / صورة مع نص.
🔹 2. عدد المنشورات التي تتضمن هذا الوسيط أو نسخًا مشابهة منه.
🔹 3. المنصات التي انتشر عليها الوسيط (تويتر، إنستغرام، تيك توك، يوتيوب، فيسبوك...).
🔹 4. مستوى الانتشار:
- محلي (داخل دولة معينة).
- إقليمي.
- عالمي.
🔹 5. نسب التفاعل الإجمالية:
- الإعجابات.
- المشاركات / إعادة النشر.
- التعليقات.
🔹 6. الفترات الزمنية الأبرز في الانتشار (مثل: يوم الذروة، مدة الانتشار).
🔹 7. تحليل دلالي لمحتوى الصورة / الفيديو:
- ما الذي يظهر في الوسيط؟
- الرسالة أو الانطباع العام الذي يقدمه للجمهور.
🔹 8. تقييم موثوقية المصدر واحتمالية التلاعب أو التعديل في الصورة/الفيديو.
🔹 9. إذا كانت هناك صور أو مقاطع مشابهة، فحلل أوجه التشابه وأي أنماط تكرار.

🧾 النص الوصفي أو التحليلي المرفق:
{user_text}

🖼️ الوسائط المرفقة:
(يتم تحليل الصورة أو الفيديو المرفق كجزء من الإدخال)
"""
const form = document.getElementById("analyzeForm");
const previewDiv = document.getElementById("preview");
const resultDiv = document.getElementById("result");

form.addEventListener("submit", async (e) => {
e.preventDefault();
resultDiv.textContent = "جارٍ التحليل...";
previewDiv.innerHTML = "";

const userText = form.userText.value;
const file = form.media.files[0];

if (!file) return alert("اختر صورة");

// عرض المعاينة
const imgPreview = document.createElement("img");
imgPreview.src = URL.createObjectURL(file);
previewDiv.appendChild(imgPreview);

// تحويل الصورة إلى Base64
const reader = new FileReader();
reader.onloadend = async () => {
const base64Image = reader.result;

const chat_prompt = [
{ role: "system", content:PROMPT_MEDIA_ANALYSIS},
{ role: "user", content: `${userText}\nالصورة: ${base64Image}` }
];

try {
const res = await fetch(AZURE_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json",
"api-key": AZURE_API_KEY
},
body: JSON.stringify({
model: DEPLOYMENT,
messages: chat_prompt,
max_completion_tokens: 1024,
stream: false
})
});

const data = await res.json();
const analysis = data.choices?.[0]?.message?.content || "لم يتم الحصول على نتيجة";
resultDiv.textContent = analysis;

} catch (err) {
resultDiv.textContent = "حدث خطأ: " + err.message;
}
};

reader.readAsDataURL(file);
});
</script>

</body>
</html>

Files changed (1) hide show

index.html +206 -8

index.html CHANGED Viewed

@@ -53,9 +53,17 @@
         <!-- Main Card -->
         <div class="bg-white rounded-xl shadow-2xl overflow-hidden max-w-4xl mx-auto">
-            <!-- Upload Section -->
-            <div class="p-8 border-b border-gray-200">
-                <div class="flex flex-col md:flex-row gap-8 items-center">
                     <div class="flex-1">
                         <h2 class="text-2xl font-semibold text-gray-800 mb-4">تحميل الصورة للتحليل</h2>
                         <p class="text-gray-600 mb-6">اسحب وأسقط صورتك هنا أو انقر لتحديد ملف. سيتم تحليل المحتوى باستخدام نماذج الذكاء الاصطناعي المتطورة.</p>
@@ -90,10 +98,9 @@
                     </div>
                 </div>
             </div>
             <!-- Results Section -->
-            <div class="p-8">
-                <h2 class="text-2xl font-semibold text-gray-800 mb-6">نتائج التحليل</h2>
                 <div id="loadingIndicator" class="hidden flex flex-col items-center py-12">
                     <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
@@ -136,11 +143,175 @@
     <footer class="text-center py-8 mt-12 text-gray-500 text-sm">
         <p>© 2023 VisionVortex. جميع الحقوق محفوظة.</p>
     </footer>
     <script>
         feather.replace();
-        // Initialize Vanta.js background
         VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
@@ -333,6 +504,33 @@
                 };
             }
         }
-</script>
 </body>
 </html>

         <!-- Main Card -->
         <div class="bg-white rounded-xl shadow-2xl overflow-hidden max-w-4xl mx-auto">
+        <!-- Navigation Tabs -->
+        <div class="flex justify-center mb-8">
+            <div class="inline-flex rounded-lg bg-gray-100 p-1">
+                <button id="imageAnalysisTab" class="px-4 py-2 rounded-md font-medium text-indigo-600 bg-white shadow-sm">تحليل الصور</button>
+                <button id="mediaAnalysisTab" class="px-4 py-2 rounded-md font-medium text-gray-500">تحليل الوسائط الإعلامية</button>
+            </div>
+        </div>
+        <!-- Image Analysis Section -->
+        <div id="imageAnalysisSection" class="p-8 border-b border-gray-200">
+<div class="flex flex-col md:flex-row gap-8 items-center">
                     <div class="flex-1">
                         <h2 class="text-2xl font-semibold text-gray-800 mb-4">تحميل الصورة للتحليل</h2>
                         <p class="text-gray-600 mb-6">اسحب وأسقط صورتك هنا أو انقر لتحديد ملف. سيتم تحليل المحتوى باستخدام نماذج الذكاء الاصطناعي المتطورة.</p>
                     </div>
                 </div>
             </div>
             <!-- Results Section -->
+            <div id="imageResultsSection" class="p-8">
+<h2 class="text-2xl font-semibold text-gray-800 mb-6">نتائج التحليل</h2>
                 <div id="loadingIndicator" class="hidden flex flex-col items-center py-12">
                     <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
     <footer class="text-center py-8 mt-12 text-gray-500 text-sm">
         <p>© 2023 VisionVortex. جميع الحقوق محفوظة.</p>
     </footer>
+    <!-- Media Analysis Section (hidden by default) -->
+    <div id="mediaAnalysisSection" class="hidden p-8 border-b border-gray-200">
+        <div class="flex flex-col md:flex-row gap-8 items-center">
+            <div class="flex-1">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-4">تحليل الوسائط الإعلامية</h2>
+                <p class="text-gray-600 mb-6">أدخل النص المرافق للوسائط واختر الصورة لتحليل انتشارها وتفاعلاتها</p>
+                <form id="analyzeForm" class="space-y-4">
+                    <div>
+                        <label class="block text-gray-700 mb-2">نص التحليل:</label>
+                        <textarea name="userText" rows="4" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="أدخل نص التحليل هنا"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">اختر صورة:</label>
+                        <input type="file" name="media" accept="image/*" required class="w-full">
+                    </div>
+                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition">
+                        <i data-feather="search"></i>
+                        تحليل الوسائط
+                    </button>
+                </form>
+            </div>
+            <div class="flex-1">
+                <div id="mediaPreview" class="relative bg-gray-100 rounded-lg overflow-hidden aspect-square">
+                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <i data-feather="image" class="w-16 h-16 mb-4"></i>
+                        <p>ستظهر معاينة الصورة هنا</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Media Results Section -->
+    <div id="mediaResultsSection" class="hidden p-8">
+        <h2 class="text-2xl font-semibold text-gray-800 mb-6">نتائج تحليل الوسائط</h2>
+        <div id="mediaResults" class="prose max-w-none text-gray-600 bg-gray-50 p-6 rounded-xl">
+            <p>سيعرض هنا نتائج تحليل الوسائط بعد الانتهاء من المعالجة.</p>
+        </div>
+    </div>
     <script>
         feather.replace();
+        // Tab switching functionality
+        const imageAnalysisTab = document.getElementById('imageAnalysisTab');
+        const mediaAnalysisTab = document.getElementById('mediaAnalysisTab');
+        const imageAnalysisSection = document.getElementById('imageAnalysisSection');
+        const imageResultsSection = document.getElementById('imageResultsSection');
+        const mediaAnalysisSection = document.getElementById('mediaAnalysisSection');
+        const mediaResultsSection = document.getElementById('mediaResultsSection');
+        imageAnalysisTab.addEventListener('click', () => {
+            imageAnalysisTab.classList.add('text-indigo-600', 'bg-white', 'shadow-sm');
+            imageAnalysisTab.classList.remove('text-gray-500');
+            mediaAnalysisTab.classList.remove('text-indigo-600', 'bg-white', 'shadow-sm');
+            mediaAnalysisTab.classList.add('text-gray-500');
+            imageAnalysisSection.classList.remove('hidden');
+            imageResultsSection.classList.remove('hidden');
+            mediaAnalysisSection.classList.add('hidden');
+            mediaResultsSection.classList.add('hidden');
+        });
+        mediaAnalysisTab.addEventListener('click', () => {
+            mediaAnalysisTab.classList.add('text-indigo-600', 'bg-white', 'shadow-sm');
+            mediaAnalysisTab.classList.remove('text-gray-500');
+            imageAnalysisTab.classList.remove('text-indigo-600', 'bg-white', 'shadow-sm');
+            imageAnalysisTab.classList.add('text-gray-500');
+            mediaAnalysisSection.classList.remove('hidden');
+            mediaResultsSection.classList.remove('hidden');
+            imageAnalysisSection.classList.add('hidden');
+            imageResultsSection.classList.add('hidden');
+        });
+        // Media Analysis Form
+        const analyzeForm = document.getElementById('analyzeForm');
+        const mediaPreview = document.getElementById('mediaPreview');
+        const mediaResults = document.getElementById('mediaResults');
+        analyzeForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            mediaResults.textContent = "جارٍ التحليل...";
+            const userText = analyzeForm.userText.value;
+            const file = analyzeForm.media.files[0];
+            if (!file) return;
+            // Display preview
+            mediaPreview.innerHTML = '';
+            const imgPreview = document.createElement('img');
+            imgPreview.src = URL.createObjectURL(file);
+            imgPreview.className = 'absolute inset-0 w-full h-full object-contain';
+            mediaPreview.appendChild(imgPreview);
+            // Convert image to Base64
+            const reader = new FileReader();
+            reader.onloadend = async () => {
+                const base64Image = reader.result;
+                try {
+                    const response = await analyzeMediaContent(userText, base64Image);
+                    mediaResults.innerHTML = response;
+                } catch (err) {
+                    mediaResults.textContent = "حدث خطأ: " + err.message;
+                }
+            };
+            reader.readAsDataURL(file);
+        });
+        async function analyzeMediaContent(userText, imageData) {
+            // Replace with your actual Azure credentials and endpoint
+            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 PROMPT = `أنت خبير في تحليل انتشار الوسائط الرقمية (صور / فيديوهات) على الإنترنت.
+            المطلوب:
+            قم بتحليل الوسائط المرفقة والنص المصاحب لها لاستخراج وتحليل العناصر التالية:
+            🔹 1. نوع الوسيط:
+                 - صورة / فيديو / صورة مع نص.
+            🔹 2. عدد المنشورات التي تتضمن هذا الوسيط أو نسخًا مشابهة منه.
+            🔹 3. المنصات التي انتشر عليها الوسيط (تويتر، إنستغرام، تيك توك، يوتيوب، فيسبوك...).
+            🔹 4. مستوى الانتشار:
+                 - محلي (داخل دولة معينة).
+                 - إقليمي.
+                 - عالمي.
+            🔹 5. نسب التفاعل الإجمالية:
+                 - الإعجابات.
+                 - المشاركات / إعادة النشر.
+                 - التعليقات.
+            🔹 6. الفترات الزمنية الأبرز في الانتشار (مثل: يوم الذروة، مدة الانتشار).
+            🔹 7. تحليل دلالي لمحتوى الصورة / الفيديو:
+                 - ما الذي يظهر في الوسيط؟
+                 - الرسالة أو الانطباع العام الذي يقدمه للجمهور.
+            🔹 8. تقييم موثوقية المصدر واحتمالية التلاعب أو التعديل في الصورة/الفيديو.
+            🔹 9. إذا كانت هناك صور أو مقاطع مشابهة، فحلل أوجه التشابه وأي أنماط تكرار.
+            🧾 النص الوصفي أو التحليلي المرفق:
+            ${userText || "لا يوجد نص مرفق"}`;
+            const chat_prompt = [
+                { role: "system", content: PROMPT },
+                { role: "user", content: `الصورة: ${imageData}` }
+            ];
+            const res = await fetch(AZURE_ENDPOINT, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "api-key": AZURE_API_KEY
+                },
+                body: JSON.stringify({
+                    messages: chat_prompt,
+                    max_tokens: 2048
+                })
+            });
+            const data = await res.json();
+            return data.choices?.[0]?.message?.content || "لم يتم الحصول على نتيجة";
+        }
+// Initialize Vanta.js background
         VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
                 };
             }
         }
+        // Initialize with your actual Azure credentials
+        const AZURE_ENDPOINT = "https://your-resource-name.openai.azure.com/openai/deployments/your-deployment-name/chat/completions?api-version=2023-05-15";
+        const AZURE_API_KEY = "your-api-key-here";
+        const DEPLOYMENT = "your-deployment-name";
+        // Helper function to format API response
+        function parseAnalysisResponse(text) {
+            try {
+                // Try to parse as JSON first
+                return JSON.parse(text);
+            } catch (e) {
+                // Fallback to extracting sections from plain text
+                const summaryMatch = text.match(/ملخص:(.*?)(?=الكلمات المفتاحية|$)/s);
+                const keywordsMatch = text.match(/الكلمات المفتاحية:(.*?)(?=التقرير التفصيلي|$)/s);
+                const reportMatch = text.match(/التقرير التفصيلي:(.*)/s);
+                return {
+                    summary: summaryMatch ? summaryMatch[1].trim() : "لا يوجد ملخص متاح",
+                    keywords: keywordsMatch ?
+                        keywordsMatch[1].trim().split(',').map(k => k.trim()) :
+                        ["لا يوجد كلمات مفتاحية"],
+                    detailed_report: reportMatch ?
+                        `<p>${reportMatch[1].trim().replace(/\n/g, '</p><p>')}</p>` :
+                        "<p>لا يوجد تقرير متاح</p>"
+                };
+            }
+        }
+    </script>
 </body>
 </html>