Spaces:

Amartala
/

visionvortex-analyzer

Running

App Files Files Community

Amartala commited on Oct 17, 2025

Commit

105f55a

verified ·

1 Parent(s): b8a76af

import fs from "fs";

Browse files

import fetch from "node-fetch";

// إعداد المتغيرات
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 = "ضع هنا محتوى النظام لتحليل الوسائط";

// دالة لإنشاء Base64 من الصورة
function encodeImageToBase64(filePath) {
const buffer = fs.readFileSync(filePath);
const ext = filePath.split('.').pop();
return `data:image/${ext};base64,${buffer.toString('base64')}`;
}

// البيانات للإرسال
const userText = "تحليل محتوى الوسائط المرفقة";
const filePath = "./test_image.jpg"; // ضع مسار الصورة هنا
const media_url = encodeImageToBase64(filePath);

// بناء الرسائل (chat prompt)
const chat_prompt = [
{
role: "system",
content: [
{
type: "text",
text: PROMPT_MEDIA_ANALYSIS
}
]
},
{
role: "user",
content: [
{ type: "text", text: userText },
{ type: "image_url", image_url: { url: media_url } }
]
}
];

// طلب POST إلى Azure OpenAI
async function analyzeMedia() {
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: chat_prompt,
max_completion_tokens: 16384,
stream: false
})
});

if (!response.ok) {
const text = await response.text();
throw new Error(`Azure API Error ${response.status}: ${text}`);
}

const data = await response.json();
console.log("Raw response:", data);
console.log("Extracted content:", data.choices[0].message.content);
} catch (err) {
console.error(err);
}
}

// نفّذ الدالة
analyzeMedia();
اربط الكود بواجهه

Files changed (2) hide show

README.md +7 -4
index.html +333 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Visionvortex Analyzer
-emoji: 🏃
 colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: VisionVortex Analyzer 🔍
 colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,334 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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">
+            <!-- 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>
+                        <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 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>
+    <script>
+        feather.replace();
+        // 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);
+        }
+        // Here you would integrate the actual API call from your Node.js code
+        /*
+        async function analyzeImageWithAPI(file) {
+            const formData = new FormData();
+            formData.append('image', file);
+            try {
+                const response = await fetch('/api/analyze', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                // Process the response and update UI
+                updateResultsUI(data);
+            } catch (error) {
+                console.error('Error analyzing image:', error);
+                // Show error to user
+            }
+        }
+        */
+    </script>
+</body>
 </html>