Spaces:

joermd
/

translatemodel

Running

File size: 18,283 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>نظام المقارنة والترجمة المتقدم</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
    <style>
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animate-gradient {
            background-size: 200% 200%;
            animation: gradient 15s ease infinite;
        }
        .transition-all {
            transition: all 0.3s ease-in-out;
        }
        .animate-scale {
            transition: transform 0.2s ease-in-out;
        }
        .animate-scale:hover {
            transform: scale(1.02);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
    <div class="min-h-screen pb-12">
        <!-- Header -->
        <header class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 animate-gradient text-white py-10 mb-10 shadow-xl">
            <div class="max-w-6xl mx-auto px-4">
                <h1 class="text-5xl font-bold text-center mb-4 animate-scale">نظام المقارنة والترجمة المتقدم</h1>
                <p class="text-center text-xl text-blue-100 opacity-90">مقارنة وتحليل النصوص العربية والإنجليزية بذكاء</p>
                <div class="flex justify-center mt-6 space-x-4">
                    <div class="bg-white bg-opacity-20 rounded-lg px-4 py-2 backdrop-blur-sm">
                        <span class="text-sm">دقة عالية</span>
                    </div>
                    <div class="bg-white bg-opacity-20 rounded-lg px-4 py-2 backdrop-blur-sm">
                        <span class="text-sm">تحليل ذكي</span>
                    </div>
                    <div class="bg-white bg-opacity-20 rounded-lg px-4 py-2 backdrop-blur-sm">
                        <span class="text-sm">سهولة الاستخدام</span>
                    </div>
                </div>
            </div>
        </header>

        <main class="max-w-6xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Input Section -->
                <div class="space-y-6">
                    <!-- File Upload Card -->
                    <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale">
                        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center">
                            <svg class="w-6 h-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                            </svg>
                            تحميل الملفات
                        </h2>
                        
                        <div class="space-y-6">
                            <!-- Word Upload -->
                            <div class="group border-3 border-dashed border-blue-200 rounded-xl p-8 text-center hover:border-blue-500 transition-colors duration-300 bg-blue-50 hover:bg-blue-100">
                                <label class="cursor-pointer block">
                                    <input type="file" id="docxFile" accept=".docx" class="hidden">
                                    <svg class="w-12 h-12 mx-auto mb-4 text-blue-500 group-hover:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    <span class="text-lg text-blue-600 group-hover:text-blue-700">اختر ملف Word أو اسحبه هنا</span>
                                </label>
                            </div>

                            <!-- PDF Upload -->
                            <div class="group border-3 border-dashed border-purple-200 rounded-xl p-8 text-center hover:border-purple-500 transition-colors duration-300 bg-purple-50 hover:bg-purple-100">
                                <label class="cursor-pointer block">
                                    <input type="file" id="pdfFile" accept=".pdf" class="hidden">
                                    <svg class="w-12 h-12 mx-auto mb-4 text-purple-500 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                                    </svg>
                                    <span class="text-lg text-purple-600 group-hover:text-purple-700">اختر ملف PDF أو اسحبه هنا</span>
                                </label>
                            </div>

                            <!-- Processing Status -->
                            <div id="processStatus" class="hidden">
                                <div class="flex items-center justify-center space-x-3 bg-blue-100 rounded-xl p-4">
                                    <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div>
                                    <span class="text-lg text-blue-700">جاري معالجة الملف...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Text Input Card -->
                    <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale">
                        <div class="space-y-6">
                            <!-- Arabic Input -->
                            <div class="group">
                                <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
                                    </svg>
                                    النص العربي
                                </label>
                                <textarea id="arabicText" dir="rtl" 
                                    class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-200 focus:border-blue-400 transition-all resize-none text-lg"
                                    rows="6"
                                    placeholder="اكتب النص العربي هنا..."></textarea>
                            </div>

                            <!-- English Input -->
                            <div class="group">
                                <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
                                    </svg>
                                    English Text
                                </label>
                                <textarea id="englishText" dir="ltr"
                                    class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-200 focus:border-purple-400 transition-all resize-none text-lg"
                                    rows="6"
                                    placeholder="Enter English text here..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button id="submitBtn" 
                        class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover:scale-105 focus:ring-4 focus:ring-blue-200 text-xl shadow-lg hover:shadow-xl">
                        <div class="flex items-center justify-center">
                            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                            </svg>
                            تحليل النصوص
                        </div>
                    </button>
                </div>

                <!-- Review Section -->
                <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale">
                    <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center">
                        <svg class="w-6 h-6 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        مراجعة وتحليل النصوص
                    </h2>
                    
                    <!-- Original Text Review -->
                    <div class="mb-8">
                        <h3 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                            النص الأصلي
                        </h3>
                        <div id="originalTextReview" class="bg-blue-50 rounded-xl p-6 min-h-[200px] border-2 border-blue-100"></div>
                    </div>

                    <!-- Translation Review -->
                    <div class="mb-8">
                        <h3 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                            النص المترجم
                        </h3>
                        <div id="translatedTextReview" class="bg-gray-50 rounded-xl p-6 min-h-[200px]"></div>
                    </div>

                    <!-- Errors List -->
                    <div class="border-t pt-6">
                        <h3 class="text-lg font-medium text-gray-700 mb-3">الأخطاء والملاحظات</h3>
                        <div id="errorsList" class="space-y-3"></div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Same JavaScript code as before
        const ANALYSIS_PROMPT = `قم بمقارنة النصوص بين النسختين العربية والإنجليزية. إذا وُجدت نصوص مفقودة في النسخة الإنجليزية، أو كانت الأرقام غير صحيحة أو تحتوي على أخطاء إملائية، فاعرضها. تأكد أيضًا من إظهار أي نص عربي موجود في النسخة الأصلية ولم يُترجم بالكامل. إذا لم يتم العثور على أي مشاكل، فأجب برسالة واحدة تفيد بأن النص سليم.`;

        document.getElementById('docxFile').addEventListener('change', async (event) => {
            const file = event.target.files[0];
            if (!file) return;

            const processStatus = document.getElementById('processStatus');
            processStatus.classList.remove('hidden');

            try {
                const arrayBuffer = await file.arrayBuffer();
                const result = await mammoth.extractRawText({ arrayBuffer });
                
                const text = result.value;
                if (/[\u0600-\u06FF]/.test(text)) {
                    document.getElementById('arabicText').value = text;
                } else {
                    document.getElementById('englishText').value = text;
                }
            } catch (error) {
                console.error('DOCX processing error:', error);
                addError('خطأ في معالجة ملف Word');
            } finally {
                processStatus.classList.add('hidden');
            }
        });

        document.getElementById('pdfFile').addEventListener('change', async (event) => {
            const file = event.target.files[0];
            if (!file) return;

            const processStatus = document.getElementById('processStatus');
            processStatus.classList.remove('hidden');

            try {
                const form = new FormData();
                form.append('image', file);

                const response = await fetch('https://demo.api4ai.cloud/ocr/v1/results', {
                    method: 'POST',
                    body: form,
                    headers: { 'A4A-CLIENT-APP-ID': 'sample' }
                });

                const data = await response.json();
                const text = data.results[0].entities[0].objects[0].entities[0].text;

                if (/[\u0600-\u06FF]/.test(text)) {
                    document.getElementById('arabicText').value = text;
                } else {
                    document.getElementById('englishText').value = text;
                }
            } catch (error) {
                console.error('PDF processing error:', error);
                addError('خطأ في معالجة ملف PDF');
            } finally {
                processStatus.classList.add('hidden');
            }
        });

        function addError(message, type = 'error') {
            const errorsList = document.getElementById('errorsList');
            const errorDiv = document.createElement('div');
            errorDiv.className = `p-4 rounded-xl ${type === 'error' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700'}`;
            errorDiv.textContent = message;
            errorsList.appendChild(errorDiv);
        }

        function highlightDifferences(originalText, translatedText, container) {
            container.innerHTML = '';
            
            const textElement = document.createElement('div');
            textElement.className = 'text-gray-800 leading-relaxed';
            
            const words = originalText.split(' ');
            words.forEach(word => {
                const span = document.createElement('span');
                span.textContent = word + ' ';
                
                if (!translatedText.includes(word)) {
                    span.className = 'bg-yellow-200 px-1 rounded';
                }
                
                textElement.appendChild(span);
            });
            
            container.appendChild(textElement);
        }

        document.getElementById('submitBtn').addEventListener('click', async () => {
            const arabicText = document.getElementById('arabicText').value;
            const englishText = document.getElementById('englishText').value;
            
            document.getElementById('errorsList').innerHTML = '';
            
            highlightDifferences(arabicText, englishText, document.getElementById('originalTextReview'));
            highlightDifferences(englishText, arabicText, document.getElementById('translatedTextReview'));

            try {
                const response = await fetch('https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: `Arabic: ${arabicText}\nEnglish: ${englishText}\nAnalysis: ${ANALYSIS_PROMPT}`,
                        history: []
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                const analysisResults = data.response;
                
                addError(analysisResults, 'warning');
            } catch (error) {
                addError(`خطأ في التحليل: ${error.message}`);
            }
        });
    </script>
</body>
</html>