Update index.html

index.html

@@ -5,154 +5,46 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>تطبيق مراجعة النصوص</title>
     <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            line-height: 1.6;
-            margin: 0;
-            padding: 20px;
-            background-color: #f5f5f5;
-            color: #333;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        h1 {
-            color: #2c3e50;
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .text-areas {
-            display: flex;
-            flex-direction: row;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-        .text-column {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-        label {
-            font-weight: bold;
-            margin-bottom: 5px;
-            color: #2c3e50;
-        }
-        textarea {
-            height: 300px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            resize: vertical;
-            font-size: 16px;
-            font-family: inherit;
-        }
-        button {
-            background-color: #3498db;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s;
-        }
-        button:hover {
-            background-color: #2980b9;
-        }
-        .result {
-            margin-top: 30px;
-            padding: 20px;
+        /* Existing styles remain the same */
+        
+        /* Add new styles for preview and highlighting */
+        .preview-section {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #fff;
             border: 1px solid #ddd;
             border-radius: 4px;
-            background-color: #f9f9f9;
-        }
-        .result h2 {
-            color: #2c3e50;
-            margin-top: 0;
-        }
-        .spinner {
-            display: none;
-            margin: 20px auto;
-            width: 50px;
-            height: 50px;
-            border: 5px solid #f3f3f3;
-            border-top: 5px solid #3498db;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .diff-highlight {
-            display: inline;
-            padding: 2px 0;
-        }
-        .diff-added {
-            background-color: #c8e6c9;
-            text-decoration: none;
         }
-        .diff-removed {
-            background-color: #ffcdd2;
-            text-decoration: line-through;
-        }
-        .diff-changed {
-            background-color: #fff9c4;
-            text-decoration: none;
-        }
-        .error-text {
-            background-color: #ffcdd2;
-            color: #c62828;
-            padding: 0 3px;
+        
+        .highlight-error {
+            background-color: #ffeb3b;
+            padding: 2px 4px;
             border-radius: 3px;
-            font-weight: bold;
-        }
-        .api-key-section {
-            margin-bottom: 20px;
+            position: relative;
         }
-        .error-message {
-            color: #e74c3c;
-            margin-top: 10px;
-        }
-        .side-by-side {
-            display: flex;
-            gap: 20px;
+        
+        .explanation-section {
             margin-top: 20px;
-        }
-        .preview-column {
-            flex: 1;
             padding: 15px;
-            background-color: #f8f8f8;
+            background-color: #f8f9fa;
+            border: 1px solid #e9ecef;
             border-radius: 4px;
-            border: 1px solid #ddd;
         }
-        .preview-heading {
-            margin-top: 0;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #ddd;
+        
+        .error-marker {
+            color: #e74c3c;
+            font-weight: bold;
         }
-        .explanation-section {
-            margin-top: 30px;
-            padding: 15px;
-            background-color: #e8f4fd;
-            border-radius: 4px;
-            border: 1px solid #cce5ff;
+        
+        .preview-text {
+            white-space: pre-wrap;
+            line-height: 1.8;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>تطبيق مراجعة النصوص</h1>
-        
-        <div class="api-key-section">
-            <label for="apiKey">مفتاح API (يمكنك تعديله إذا لزم الأمر):</label>
-            <input type="text" id="apiKey" value="sk-21a46269cd8e449f8aeb0cc129c36c33" style="width: 100%; padding: 8px; margin-top: 5px;">
-        </div>
+        <!-- Existing header and API key section remain the same -->
         
         <div class="text-areas">
             <div class="text-column">
@@ -170,29 +62,33 @@
         </div>
         
         <div id="spinner" class="spinner"></div>
-        
         <div id="errorMessage" class="error-message"></div>
         
-        <div id="result" class="result" style="display: none;">
-            <h2>نتائج المقارنة:</h2>
-            <div id="comparisonResults"></div>
-            
-            <div class="explanation-section">
-                <h3>شرح الاختلافات:</h3>
-                <div id="explanationText"></div>
-            </div>
-            
-            <div class="side-by-side">
-                <div class="preview-column">
-                    <h3 class="preview-heading">النص المصدر مع تحديد الاختلافات:</h3>
-                    <div id="sourcePreview"></div>
+        <!-- Add new preview section -->
+        <div id="previewSection" class="preview-section" style="display: none;">
+            <h2>معاينة النصوص مع تحديد الاختلافات:</h2>
+            <div class="text-areas">
+                <div class="text-column">
+                    <h3>النص المصدر:</h3>
+                    <div id="sourcePreview" class="preview-text"></div>
                 </div>
-                <div class="preview-column">
-                    <h3 class="preview-heading">النص الهدف مع تحديد الاختلافات:</h3>
-                    <div id="targetPreview"></div>
+                <div class="text-column">
+                    <h3>النص الهدف:</h3>
+                    <div id="targetPreview" class="preview-text"></div>
                 </div>
             </div>
         </div>
+        
+        <!-- Add explanation section -->
+        <div id="explanationSection" class="explanation-section" style="display: none;">
+            <h2>شرح الاختلافات:</h2>
+            <div id="explanationContent"></div>
+        </div>
+        
+        <div id="result" class="result" style="display: none;">
+            <h2>نتائج المقارنة:</h2>
+            <div id="comparisonResults"></div>
+        </div>
     </div>
 
     <script>
@@ -202,13 +98,14 @@
             const apiKey = document.getElementById('apiKey').value.trim();
             const errorMessageElement = document.getElementById('errorMessage');
             const resultElement = document.getElementById('result');
-            const comparisonResultsElement = document.getElementById('comparisonResults');
-            const explanationTextElement = document.getElementById('explanationText');
-            const sourcePreviewElement = document.getElementById('sourcePreview');
-            const targetPreviewElement = document.getElementById('targetPreview');
+            const previewSection = document.getElementById('previewSection');
+            const explanationSection = document.getElementById('explanationSection');
             const spinner = document.getElementById('spinner');
             
+            // Reset UI
             errorMessageElement.textContent = '';
+            previewSection.style.display = 'none';
+            explanationSection.style.display = 'none';
             
             if (!sourceText || !targetText) {
                 errorMessageElement.textContent = 'الرجاء إدخال كلا النصين للمقارنة';
@@ -225,31 +122,18 @@
             
             try {
                 const prompt = `
-                قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما، بما في ذلك:
-                1. الأرقام المكتوبة بشكل خاطئ
-                2. النصوص المفقودة
-                3. النصوص الفاسدة أو غير المفهومة
-                4. النصوص المختلفة في المعنى
-                
-                مهم جدًا: قم بتحديد النص المختلف أو الذي يحتوي على خطأ بوضعه بين علامتي <<>> في إجابتك.
-                
-                قدم تحليلاً مفصلاً للاختلافات وتصنيفها حسب نوع الخطأ.
-                
-                بالإضافة لذلك، قم بإعداد نسخة من النص المصدر مع وضع علامة <<>> حول الأجزاء التي تختلف عن النص الهدف أو غير موجودة في النص الهدف.
-                
-                كذلك قم بإعداد نسخة من النص الهدف مع وضع علامة <<>> حول الأجزاء التي تختلف عن النص المصدر أو الأجزاء التي تحتوي على أخطاء.
-                
-                جاوب على شكل JSON مع المفاتيح التالية:
-                - analysisResult: تحليل مفصل للاختلافات
-                - sourceWithMarkers: النص المصدر مع علامات <<>> حول المناطق المختلفة
-                - targetWithMarkers: النص الهدف مع علامات <<>> حول المناطق المختلفة
-                - explanation: شرح موجز وواضح للاختلافات الرئيسية
-                
+                قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما. ضع النصوص المختلفة داخل علامات <<>> وقم بشرح الاختلافات:
+
                 النص المصدر:
                 ${sourceText}
-                
+
                 النص الهدف:
                 ${targetText}
+
+                المطلوب:
+                1. تحديد النصوص المختلفة بين المصدر والهدف
+                2. وضع النصوص المختلفة داخل علامات <<>>
+                3. شرح كل اختلاف وسببه
                 `;
                 
                 const response = await fetch('https://api.deepseek.com/chat/completions', {
@@ -261,7 +145,10 @@
                     body: JSON.stringify({
                         model: 'deepseek-reasoner',
                         messages: [
-                            { role: 'system', content: 'أنت مساعد مفيد متخصص في مراجعة النصوص وتحديد الاختلافات بينها بدقة عالية. يجب أن تضع الاختلافات والأخطاء بين علامتي <<>> في إجابتك وتنظم النتائج بتنسيق JSON كما هو مطلوب.' },
+                            {
+                                role: 'system',
+                                content: 'أنت مساعد متخصص في مراجعة النصوص وتحديد الاختلافات بدقة عالية. قم بتحديد الاختلافات ووضعها بين علامات <<>>'
+                            },
                             { role: 'user', content: prompt }
                         ],
                         stream: false
@@ -273,43 +160,15 @@
                 }
                 
                 const data = await response.json();
-                const result = data.choices[0].message.content;
-                
-                // استخراج JSON من النتيجة
-                let jsonResult;
-                try {
-                    // البحث عن JSON داخل النص
-                    const jsonRegex = /{[\s\S]*}/;
-                    const match = result.match(jsonRegex);
-                    
-                    if (match) {
-                        jsonResult = JSON.parse(match[0]);
-                    } else {
-                        // إذا لم يتم العثور على JSON، عامل النص كاملاً كتحليل
-                        jsonResult = {
-                            analysisResult: result,
-                            sourceWithMarkers: sourceText,
-                            targetWithMarkers: targetText,
-                            explanation: "لم يتم توفير شرح منظم."
-                        };
-                    }
-                } catch (e) {
-                    console.error("خطأ في تحليل JSON:", e);
-                    jsonResult = {
-                        analysisResult: result,
-                        sourceWithMarkers: sourceText,
-                        targetWithMarkers: targetText,
-                        explanation: "لم يتم توفير شرح منظم."
-                    };
-                }
+                const analysisResult = data.choices[0].message.content;
                 
-                // عرض النتائج
-                comparisonResultsElement.innerHTML = formatAnalysisResult(jsonResult.analysisResult);
-                explanationTextElement.innerHTML = formatExplanation(jsonResult.explanation);
-                sourcePreviewElement.innerHTML = formatTextWithMarkers(jsonResult.sourceWithMarkers || sourceText);
-                targetPreviewElement.innerHTML = formatTextWithMarkers(jsonResult.targetWithMarkers || targetText);
+                // تحديث المعاينة والشرح
+                updatePreview(sourceText, targetText, analysisResult);
+                updateExplanation(analysisResult);
                 
                 resultElement.style.display = 'block';
+                previewSection.style.display = 'block';
+                explanationSection.style.display = 'block';
             } catch (error) {
                 errorMessageElement.textContent = `حدث خطأ: ${error.message}`;
                 console.error('Error:', error);
@@ -318,31 +177,56 @@
             }
         });
         
-        function formatAnalysisResult(analysisText) {
-    // التحويل إلى HTML مع إبراز الاختلافات
-    let formattedText = analysisText
-        .replace(/\n/g, '<br>')
-        .replace(/الأرقام المكتوبة بشكل خاطئ:|الأرقام غير الصحيحة:/gi, '<strong style="color: #e74c3c;">الأرقام المكتوبة بشكل خاطئ:</strong>')
-        .replace(/النصوص المفقودة:/gi, '<strong style="color: #e74c3c;">النصوص المفقودة:</strong>')
-        .replace(/النصوص الفاسدة:|النصوص غير المفهومة:/gi, '<strong style="color: #e74c3c;">النصوص الفاسدة:</strong>')
-        .replace(/النصوص المختلفة في المعنى:/gi, '<strong style="color: #e74c3c;">النصوص المختلفة في المعنى:</strong>');
-    
-    // تظليل النصوص بين علامات <<>>
-    formattedText = formattedText.replace(/<<(.*?)>>/g, '<span class="error-text">$1</span>');
-    
-    return formattedText;
-}
-
-function formatExplanation(explanationText) {
-    // تطبيق نفس التنسيق على شرح الاختلافات
-    let formattedExplanation = explanationText
-        .replace(/\n/g, '<br>')
-        .replace(/<<(.*?)>>/g, '<span class="error-text">$1</span>');
-    
-    return formattedExplanation;
-}
-
-function formatTextWithMarkers(markedText) {
-    // استبدال علامات <<>> بتنسيق HTML للتظليل
-    return markedText.replace(/<<(.*?)>>/g, '<span class="error-text">$1</span>');
-}
+        function updatePreview(sourceText, targetText, analysisResult) {
+            const sourcePreview = document.getElementById('sourcePreview');
+            const targetPreview = document.getElementById('targetPreview');
+            
+            // استخراج النصوص المختلفة من نتيجة التحليل
+            const differences = extractDifferences(analysisResult);
+            
+            // تحديث معاينة النص المصدر
+            let highlightedSource = sourceText;
+            differences.forEach(diff => {
+                highlightedSource = highlightedSource.replace(
+                    diff,
+                    `<span class="highlight-error"><<${diff}>></span>`
+                );
+            });
+            sourcePreview.innerHTML = highlightedSource;
+            
+            // تحديث معاينة النص الهدف
+            let highlightedTarget = targetText;
+            differences.forEach(diff => {
+                highlightedTarget = highlightedTarget.replace(
+                    diff,
+                    `<span class="highlight-error"><<${diff}>></span>`
+                );
+            });
+            targetPreview.innerHTML = highlightedTarget;
+        }
+        
+        function updateExplanation(analysisResult) {
+            const explanationContent = document.getElementById('explanationContent');
+            
+            // تنسيق شرح الاختلافات
+            const formattedExplanation = analysisResult
+                .replace(/<<(.*?)>>/g, '<span class="error-marker"><<$1>></span>')
+                .replace(/\n/g, '<br>');
+            
+            explanationContent.innerHTML = formattedExplanation;
+        }
+        
+        function extractDifferences(analysisResult) {
+            const differences = [];
+            const regex = /<<(.*?)>>/g;
+            let match;
+            
+            while ((match = regex.exec(analysisResult)) !== null) {
+                differences.push(match[1]);
+            }
+            
+            return differences;
+        }
+    </script>
+</body>
+</html>