Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 15

Commit

85521cb

verified ·

1 Parent(s): 9e5459b

Update index.html

Browse files

Files changed (1) hide show

index.html +183 -115

index.html CHANGED Viewed

@@ -5,46 +5,122 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>تطبيق مراجعة النصوص</title>
     <style>
-        /* 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;
         }
-        .highlight-error {
-            background-color: #ffeb3b;
-            padding: 2px 4px;
-            border-radius: 3px;
-            position: relative;
         }
-        .explanation-section {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border: 1px solid #e9ecef;
             border-radius: 4px;
         }
-        .error-marker {
-            color: #e74c3c;
-            font-weight: bold;
         }
-        .preview-text {
-            white-space: pre-wrap;
-            line-height: 1.8;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- Existing header and API key section remain the same -->
         <div class="text-areas">
             <div class="text-column">
@@ -62,33 +138,20 @@
         </div>
         <div id="spinner" class="spinner"></div>
-        <div id="errorMessage" class="error-message"></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="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>
@@ -98,14 +161,14 @@
             const apiKey = document.getElementById('apiKey').value.trim();
             const errorMessageElement = document.getElementById('errorMessage');
             const resultElement = document.getElementById('result');
-            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 = 'الرجاء إدخال كلا النصين للمقارنة';
@@ -118,22 +181,24 @@
             }
             spinner.style.display = 'block';
-            resultElement.style.display = 'none';
             try {
                 const prompt = `
-                قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما. ضع النصوص المختلفة داخل علامات <<>> وقم بشرح الاختلافات:
-                النص المصدر:
-                ${sourceText}
-                النص الهدف:
-                ${targetText}
-                المطلوب:
-                1. تحديد النصوص المختلفة بين المصدر والهدف
-                2. وضع النصوص المختلفة داخل علامات <<>>
-                3. شرح كل اختلاف وسببه
                 `;
                 const response = await fetch('https://api.deepseek.com/chat/completions', {
@@ -145,10 +210,7 @@
                     body: JSON.stringify({
                         model: 'deepseek-reasoner',
                         messages: [
-                            {
-                                role: 'system',
-                                content: 'أنت مساعد متخصص في مراجعة النصوص وتحديد الاختلافات بدقة عالية. قم بتحديد الاختلافات ووضعها بين علامات <<>>'
-                            },
                             { role: 'user', content: prompt }
                         ],
                         stream: false
@@ -162,13 +224,23 @@
                 const data = await response.json();
                 const analysisResult = data.choices[0].message.content;
-                // تحديث المعاينة والشرح
-                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);
@@ -177,56 +249,52 @@
             }
         });
-        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>

     <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, .explanation {
+            margin-top: 30px;
+            padding: 20px;
+            border: 1px solid #ddd;
             border-radius: 4px;
+            background-color: #f9f9f9;
         }
+        .result h2, .explanation 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;
+        }
+        .diff-removed {
+            background-color: #ffcdd2;
+            text-decoration: line-through;
+        }
+        .diff-changed {
+            background-color: #fff9c4;
+            border: 1px dashed #f39c12;
+        }
+        .api-key-section {
+            margin-bottom: 20px;
+        }
+        .error-message {
+            color: #e74c3c;
+            margin-top: 10px;
         }
     </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>
         <div class="text-areas">
             <div class="text-column">
         </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>
+        <!-- قسم عرض الشرح إذا وُجد -->
+        <div id="explanation" class="explanation" style="display: none;">
+            <h2>شرح النتائج:</h2>
+            <div id="explanationContent"></div>
+        </div>
     </div>
     <script>
             const apiKey = document.getElementById('apiKey').value.trim();
             const errorMessageElement = document.getElementById('errorMessage');
             const resultElement = document.getElementById('result');
+            const comparisonResultsElement = document.getElementById('comparisonResults');
+            const explanationElement = document.getElementById('explanation');
+            const explanationContentElement = document.getElementById('explanationContent');
             const spinner = document.getElementById('spinner');
             errorMessageElement.textContent = '';
+            resultElement.style.display = 'none';
+            explanationElement.style.display = 'none';
             if (!sourceText || !targetText) {
                 errorMessageElement.textContent = 'الرجاء إدخال كلا النصين للمقارنة';
             }
             spinner.style.display = 'block';
             try {
+                // تحديث الطلب ليشمل توجيه للموديل بوضع الاختلافات داخل << >>
                 const prompt = `
+قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما، بما في ذلك:
+1. الأرقام المكتوبة بشكل خاطئ
+2. النصوص المفقودة
+3. النصوص الفاسدة أو غير المفهومة
+4. النصوص المختلفة في المعنى
+يرجى وضع النصوص المختلفة أو التي بها خطأ داخل علامتي << و >>.
+كما يُرجى إضافة قسم "الشرح:" في نهاية التحليل يوضح أسباب الاختلاف وأهميتها.
+النص المصدر:
+${sourceText}
+النص الهدف:
+${targetText}
                 `;
                 const response = await fetch('https://api.deepseek.com/chat/completions', {
                     body: JSON.stringify({
                         model: 'deepseek-reasoner',
                         messages: [
+                            { role: 'system', content: 'أنت مساعد مفيد متخصص في مراجعة النصوص وتحديد الاختلافات بينها بدقة عالية.' },
                             { role: 'user', content: prompt }
                         ],
                         stream: false
                 const data = await response.json();
                 const analysisResult = data.choices[0].message.content;
+                // فصل التحليل عن قسم الشرح إن وُجد
+                let analysisPart = analysisResult;
+                let explanationPart = '';
+                if (analysisResult.includes('الشرح:')) {
+                    const splitParts = analysisResult.split('الشرح:');
+                    analysisPart = splitParts[0];
+                    explanationPart = splitParts[1];
+                }
+                comparisonResultsElement.innerHTML = formatAnalysisResult(analysisPart, sourceText, targetText);
+                if(explanationPart.trim()){
+                    explanationContentElement.innerHTML = explanationPart.replace(/\n/g, '<br>');
+                    explanationElement.style.display = 'block';
+                }
                 resultElement.style.display = 'block';
             } catch (error) {
                 errorMessageElement.textContent = `حدث خطأ: ${error.message}`;
                 console.error('Error:', error);
             }
         });
+        function formatAnalysisResult(analysisText, sourceText, targetText) {
+            // تحويل النص إلى 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="diff-highlight diff-changed"><<$1>></span>');
+            // إبراز الاختلافات بناءً على موقعها في النص المصدر أو النص الهدف
+            formattedText = formattedText
+                .replace(/في النص المصدر: "(.*?)"/g, 'في النص المصدر: "<span class="diff-highlight diff-removed">$1</span>"')
+                .replace(/في النص الهدف: "(.*?)"/g, 'في النص الهدف: "<span class="diff-highlight diff-added">$1</span>"');
+            // إضافة مقارنة سطرية للمعاينة
+            const sourceLines = sourceText.split('\n');
+            const targetLines = targetText.split('\n');
+            const maxLines = Math.max(sourceLines.length, targetLines.length);
+            let visualComparison = '<h3>المقارنة السطرية:</h3><div style="display: flex; gap: 20px;">';
+            // عمود النص المصدر
+            visualComparison += '<div style="flex: 1;"><h4>النص المصدر:</h4><pre style="background-color: #f8f8f8; padding: 10px; border-radius: 4px; overflow-x: auto;">';
+            for (let i = 0; i < maxLines; i++) {
+                if (i < sourceLines.length) {
+                    visualComparison += `<div>${i+1}. ${sourceLines[i] || ''}</div>`;
+                }
+            }
+            visualComparison += '</pre></div>';
+            // عمود النص الهدف
+            visualComparison += '<div style="flex: 1;"><h4>النص الهدف:</h4><pre style="background-color: #f8f8f8; padding: 10px; border-radius: 4px; overflow-x: auto;">';
+            for (let i = 0; i < maxLines; i++) {
+                if (i < targetLines.length) {
+                    visualComparison += `<div>${i+1}. ${targetLines[i] || ''}</div>`;
+                }
             }
+            visualComparison += '</pre></div>';
+            visualComparison += '</div>';
+            return formattedText + '<br><br>' + visualComparison;
         }
     </script>
 </body>
+</html>