Spaces:

Amartala
/

visionvortex-analyzer

Running

File size: 27,803 Bytes

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VisionVortex - تحليل الوسائط الذكي</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://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.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;
        }
        .dropzone {
            border: 2px dashed #4F46E5;
            transition: all 0.3s;
        }
        .dropzone.active {
            border-color: #10B981;
            background-color: rgba(16, 185, 129, 0.05);
        }
        .result-card {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease-out;
        }
        .result-card.show {
            opacity: 1;
            transform: translateY(0);
        }
        #vanta-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div id="vanta-bg"></div>
    
    <div class="container mx-auto px-4 py-12">
        <!-- Header -->
        <header class="text-center mb-16">
            <h1 class="text-4xl md:text-5xl font-bold text-indigo-700 mb-4">VisionVortex <span class="text-emerald-500">🔍</span></h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">أداة التحليل الذكية للوسائط المرئية باستخدام الذكاء الاصطناعي المتقدم</p>
        </header>

        <!-- 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 id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6">
                            <i data-feather="upload-cloud" class="w-12 h-12 text-indigo-500 mx-auto mb-4"></i>
                            <p class="text-gray-500 mb-2">اسحب الصورة هنا أو انقر للتحميل</p>
                            <p class="text-sm text-gray-400">يدعم الصور: JPG, PNG, GIF (حتى 5MB)</p>
                        </div>
                        <input type="file" id="fileInput" accept="image/*" class="hidden">
                        
                        <div class="flex gap-4">
                            <button id="analyzeBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i data-feather="eye"></i>
                                بدء التحليل
                            </button>
                            <button id="clearBtn" class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition">
                                <i data-feather="trash-2"></i>
                                مسح
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex-1">
                        <div class="relative bg-gray-100 rounded-lg overflow-hidden aspect-square">
                            <img id="previewImage" src="" alt="Preview" class="absolute inset-0 w-full h-full object-contain hidden">
                            <div id="emptyPreview" 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>
            <!-- 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>
                    <p class="text-gray-600">جاري تحليل الصورة، يرجى الانتظار...</p>
                </div>
                
                <div id="resultsContainer" class="space-y-6">
                    <div class="result-card bg-gray-50 p-6 rounded-xl">
                        <h3 class="flex items-center gap-2 text-lg font-medium text-gray-700 mb-4">
                            <i data-feather="info" class="text-indigo-500"></i>
                            ملخص التحليل
                        </h3>
                        <p id="analysisSummary" class="text-gray-600">سيعرض هنا ملخص شامل لتحليل الصورة بعد الانتهاء من المعالجة.</p>
                    </div>
                    
                    <div class="result-card bg-gray-50 p-6 rounded-xl">
                        <h3 class="flex items-center gap-2 text-lg font-medium text-gray-700 mb-4">
                            <i data-feather="tag" class="text-emerald-500"></i>
                            الكلمات المفتاحية
                        </h3>
                        <div id="keywordsContainer" class="flex flex-wrap gap-2">
                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">انتظر النتائج</span>
                        </div>
                    </div>
                    
                    <div class="result-card bg-gray-50 p-6 rounded-xl">
                        <h3 class="flex items-center gap-2 text-lg font-medium text-gray-700 mb-4">
                            <i data-feather="file-text" class="text-purple-500"></i>
                            التقرير التفصيلي
                        </h3>
                        <div id="detailedReport" class="prose max-w-none text-gray-600">
                            <p>سيعرض هنا التقرير التفصيلي لتحليل الصورة بعد الانتهاء من المعالجة.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x4f46e5,
            backgroundColor: 0xf8fafc,
            size: 0.8
        });
        
        // DOM elements
        const dropzone = document.getElementById('dropzone');
        const fileInput = document.getElementById('fileInput');
        const previewImage = document.getElementById('previewImage');
        const emptyPreview = document.getElementById('emptyPreview');
        const analyzeBtn = document.getElementById('analyzeBtn');
        const clearBtn = document.getElementById('clearBtn');
        const loadingIndicator = document.getElementById('loadingIndicator');
        const resultsContainer = document.getElementById('resultsContainer');
        const analysisSummary = document.getElementById('analysisSummary');
        const keywordsContainer = document.getElementById('keywordsContainer');
        const detailedReport = document.getElementById('detailedReport');
        
        let selectedFile = null;
        
        // Event listeners
        dropzone.addEventListener('click', () => fileInput.click());
        
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length) {
                selectedFile = e.target.files[0];
                displayPreview(selectedFile);
                analyzeBtn.disabled = false;
            }
        });
        
        dropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropzone.classList.add('active');
        });
        
        dropzone.addEventListener('dragleave', () => {
            dropzone.classList.remove('active');
        });
        
        dropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropzone.classList.remove('active');
            
            if (e.dataTransfer.files.length) {
                selectedFile = e.dataTransfer.files[0];
                displayPreview(selectedFile);
                analyzeBtn.disabled = false;
                fileInput.files = e.dataTransfer.files;
            }
        });
        
        clearBtn.addEventListener('click', () => {
            selectedFile = null;
            fileInput.value = '';
            previewImage.src = '';
            previewImage.classList.add('hidden');
            emptyPreview.classList.remove('hidden');
            analyzeBtn.disabled = true;
            resetResults();
        });
        
        analyzeBtn.addEventListener('click', () => {
            if (selectedFile) {
                analyzeImage(selectedFile);
            }
        });
        
        // Functions
        function displayPreview(file) {
            if (file.type.match('image.*')) {
                const reader = new FileReader();
                
                reader.onload = (e) => {
                    previewImage.src = e.target.result;
                    previewImage.classList.remove('hidden');
                    emptyPreview.classList.add('hidden');
                };
                
                reader.readAsDataURL(file);
            }
        }
        
        function resetResults() {
            analysisSummary.textContent = 'سيعرض هنا ملخص شامل لتحليل الصورة بعد الانتهاء من المعالجة.';
            keywordsContainer.innerHTML = '<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">انتظر النتائج</span>';
            detailedReport.innerHTML = '<p>سيعرض هنا التقرير التفصيلي لتحليل الصورة بعد الانتهاء من المعالجة.</p>';
            
            document.querySelectorAll('.result-card').forEach(card => {
                card.classList.remove('show');
            });
        }
        
        function showResults() {
            setTimeout(() => {
                document.querySelectorAll('.result-card').forEach((card, index) => {
                    setTimeout(() => {
                        card.classList.add('show');
                    }, index * 200);
                });
            }, 300);
        }
        
        // Mock analysis function - replace with actual API call
        function analyzeImage(file) {
            loadingIndicator.classList.remove('hidden');
            resultsContainer.classList.add('hidden');
            resetResults();
            
            // Simulate API call delay
            setTimeout(() => {
                loadingIndicator.classList.add('hidden');
                resultsContainer.classList.remove('hidden');
                
                // Mock results - replace with actual API response
                const mockSummary = "تحليل الصورة يكشف عن مشهد طبيعي خلاب يحتوي على بحيرة صافية وجبال مغطاة بالثلوج في الخلفية. تظهر الأشجار الخضراء على جانبي البحيرة مع انعكاس واضح للمناظر الطبيعية على سطح الماء الهادئ.";
                
                const mockKeywords = [
                    "مناظر طبيعية", "بحيرة", "جبال", "ثلوج", 
                    "أشجار", "انعكاس", "سماء صافية", "هدوء"
                ];
                
                const mockReport = `
                    <h3>التفاصيل البصرية</h3>
                    <p>الصورة تلتقط مشهداً طبيعياً في وضح النهار مع إضاءة متوسطة. التركيز الأساسي على البحيرة التي تحتل الجزء الأوسط من الصورة.</p>
                    
                    <h3>التركيبة اللونية</h3>
                    <p>يغلب على الصورة درجات اللون الأزرق والأخضر، مع وجود بقع بيضاء تمثل الثلوج على الجبال. الألوان متوازنة ومشبعة بشكل معتدل.</p>
                    
                    <h3>التقييم الفني</h3>
                    <p>الصورة تمتلك تكويناً جيداً مع ��طوط رائدة توجه العين نحو نقطة الاهتمام الرئيسية. التباين مناسب والتفاصيل واضحة في معظم أجزاء الصورة.</p>
                    
                    <h3>المشاعر المثارة</h3>
                    <p>المشهد يوحي بالهدوء والسكينة والجمال الطبيعي. الانعكاسات على الماء تضيف بعداً تأملياً للصورة.</p>
                `;
                
                // Update UI with mock results
                analysisSummary.textContent = mockSummary;
                
                keywordsContainer.innerHTML = '';
                mockKeywords.forEach(keyword => {
                    const keywordElement = document.createElement('span');
                    keywordElement.className = 'bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm';
                    keywordElement.textContent = keyword;
                    keywordsContainer.appendChild(keywordElement);
                });
                
                detailedReport.innerHTML = mockReport;
                
                showResults();
                
                // Scroll to results
                resultsContainer.scrollIntoView({ behavior: 'smooth' });
                
            }, 3000);
        }
        // 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>"
                };
            }
        }
        // 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>