Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 15

Commit

8263469

verified ·

1 Parent(s): ff95748

Update index.html

Browse files

Files changed (1) hide show

index.html +261 -235

index.html CHANGED Viewed

@@ -1,242 +1,268 @@
 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>تحليل النصوص والترجمات – وضع Streaming</title>
-  <!-- استيراد Tailwind CSS وFontAwesome -->
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-  <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); }
-    .pulse-animation { animation: pulse 2s infinite; }
-    @keyframes pulse {
-      0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
-      70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
-      100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
-    }
-    /* تنسيق النصوص */
-    .text-comparison { line-height: 1.8; white-space: pre-wrap; }
-    .highlight {
-      color: white;
-      background-color: #ef4444;
-      padding: 0 3px;
-      border-radius: 3px;
-      font-weight: bold;
-    }
-    /* تقسيم الأسطر */
-    .line-item {
-      margin-bottom: 1rem;
-      padding: 0.5rem;
-      border-bottom: 1px dashed #ccc;
-    }
-    .line-number {
-      font-weight: bold;
-      color: #4B5563;
-      margin-left: 0.5rem;
-    }
-    .line-text { display: inline-block; }
-    /* تصميم البطاقات */
-    .card {
-      background-color: #fff;
-      border-radius: 1rem;
-      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
-      padding: 2rem;
-      border: 1px solid #f3f4f6;
-    }
-    .card-hover:hover {
-      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
-      transform: translateY(-3px);
-    }
-    .icon { margin-left: 0.5rem; }
-    .upload-label {
-      display: flex;
-      flex-direction: row-reverse;
-      align-items: center;
-      justify-content: center;
-    }
-    /* مؤشر التحميل */
-    .spinner {
-      border: 4px solid #f3f3f3;
-      border-top: 4px solid #4f46e5;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-    /* منطقة سلسلة التفكير */
-    #chainOfThought {
-      display: none;
-      margin-top: 1rem;
-      background-color: #f9fafb;
-      padding: 1rem;
-      border: 1px solid #e5e7eb;
-      border-radius: 0.5rem;
-      font-size: 0.9rem;
-      direction: ltr;
-      text-align: left;
-    }
-  </style>
 </head>
-<body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
-  <div class="max-w-5xl mx-auto py-12">
-    <!-- رأس الصفحة -->
-    <header class="text-center mb-12">
-      <h1 class="text-5xl font-bold mb-4 animate-gradient">تحليل النصوص والترجمات</h1>
-      <p class="text-2xl">ترجم النص الهدف إلى العربية مع التعليم، ثم قارن مع النص المصدر واخرج الاختلافات (النصوص الناقصة) فقط.</p>
-    </header>
-    <!-- منطقة الإدخال -->
-    <div class="space-y-6">
-      <div>
-        <label class="block text-2xl font-bold mb-2">النص المصدر</label>
-        <textarea id="sourceText" class="w-full p-4 border rounded-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea>
-      </div>
-      <div>
-        <label class="block text-2xl font-bold mb-2">النص الهدف</label>
-        <textarea id="targetText" class="w-full p-4 border rounded-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
-      </div>
-    </div>
-    <!-- زر التحليل ومؤشر التحميل -->
-    <div class="mt-6 flex items-center justify-center space-x-4">
-      <button id="analyzeBtn" class="px-8 py-4 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 transition">
-        تحليل ومراجعة النصوص
-      </button>
-      <div id="loadingIndicator" class="spinner hidden"></div>
     </div>
-    <!-- منطقة سلسلة التفكير -->
-    <div id="chainOfThought" class="mt-6">
-      <strong>سلسلة التفكير:</strong>
-      <pre id="chainText" class="whitespace-pre-wrap text-gray-700"></pre>
-    </div>
-    <!-- منطقة النتائج -->
-    <div id="resultSection" class="mt-8 hidden">
-      <h2 class="text-3xl font-bold mb-4">النتائج:</h2>
-      <div id="diffResult" class="p-4 border rounded-lg"></div>
-    </div>
-  </div>
-  <script>
-    (function(){
-      "use strict";
-      // برومت بسيط: ترجمة النص الهدف إلى العربية مع التعليم، ثم قارن بين النص المصدر والنص الهدف المُترجم واخرج الاختلافات (النصوص الناقصة) فقط مع وضعها بين أقواس.
-      const PROMPT = `ترجم النص الهدف إلى العربية مع التعليم، ثم قارن بين النص المصدر والنص الهدف المُترجم واخرج الاختلافات فقط (النصوص الناقصة) مع وضعها بين أقواس ().
-النص المصدر:
-{source}
-النص الهدف:
-{target}`;
-      // دالة عرض مؤشر التحميل
-      const showLoading = () => {
-        document.getElementById('loadingIndicator').classList.remove('hidden');
-      };
-      const hideLoading = () => {
-        document.getElementById('loadingIndicator').classList.add('hidden');
-      };
-      // دالة إرسال الطلب إلى DeepSeek مع تفعيل خاصية streaming
-      async function analyzeText(source, target) {
-        const payload = {
-          model: "deepseek-chat",
-          messages: [
-            { role: "system", content: "أنت نموذج DeepSeek؛ ترجم النص الهدف إلى العربية مع التعليم ثم قارن بينه وبين النص المصدر واخرج الاختلافات (النصوص الناقصة) فقط مع وضعها بين أقواس ()." },
-            { role: "user", content: PROMPT.replace("{source}", source).replace("{target}", target) }
-          ],
-          temperature: 0.3,
-          max_tokens: 1024,
-          stream: true
-        };
-        console.log("Payload:", payload);
-        try {
-          const response = await fetch("https://api.deepseek.com/chat/completions", {
-            method: "POST",
-            headers: {
-              "Authorization": "Bearer sk-15606736ed9e4aea8b7cc11a195d2b01",
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify(payload)
-          });
-          if (!response.ok) {
-            throw new Error("حدث خطأ في الاتصال: " + response.statusText);
-          }
-          // قراءة الاستجابة على شكل تدفق
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          let result = "";
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            result += decoder.decode(value, { stream: true });
-            // تحديث سلسلة التفكير بشكل مستمر
-            document.getElementById('chainText').innerText = result;
-          }
-          return result;
-        } catch (error) {
-          throw error;
-        }
-      }
-      // دالة بسيطة لمعالجة النتيجة: هنا نضع الاختلافات بين أقواس
-      function processResult(source, analysisOutput) {
-        // على سبيل المثال: افترض أن الاختلافات تظهر بين علامتي __ للنص المفقود
-        let processed = analysisOutput.replace(/__(.*?)__/g, '<span class="highlight">($1)</span>');
-        return processed;
-      }
-      // مستمع الزر
-      document.getElementById('analyzeBtn').addEventListener('click', async () => {
-        const sourceText = document.getElementById('sourceText').value.trim();
-        const targetText = document.getElementById('targetText').value.trim();
-        if (!sourceText || !targetText) {
-          alert("يرجى إدخال كلا النصين.");
-          return;
-        }
-        // إخفاء النتائج الحالية وإظهار مؤشر التحميل
-        document.getElementById('resultSection').classList.add('hidden');
-        document.getElementById('chainOfThought').style.display = "none";
-        showLoading();
-        try {
-          const analysisOutput = await analyzeText(sourceText, targetText);
-          // عرض سلسلة التفكير بعد استقبال البيانات
-          document.getElementById('chainOfThought').style.display = "block";
-          // معالجة الناتج وتطبيق التظليل
-          const diffResult = processResult(sourceText, analysisOutput);
-          document.getElementById('diffResult').innerHTML = diffResult;
-          document.getElementById('resultSection').classList.remove('hidden');
-        } catch (error) {
-          alert("خطأ أثناء التحليل: " + error.message);
-        } finally {
-          hideLoading();
-        }
-      });
-    })();
-  </script>
 </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>تطبيق مراجعة النصوص</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;
+            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;
+        }
+        .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">
+                <label for="sourceText">النص المصدر (الأساسي):</label>
+                <textarea id="sourceText" placeholder="أدخل النص المصدر هنا..."></textarea>
+            </div>
+            <div class="text-column">
+                <label for="targetText">النص الهدف (المشكوك فيه):</label>
+                <textarea id="targetText" placeholder="أدخل النص الهدف هنا..."></textarea>
+            </div>
+        </div>
+        <div style="text-align: center;">
+            <button id="compareButton">قارن النصوص</button>
+        </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>
+    <script>
+        document.getElementById('compareButton').addEventListener('click', async function() {
+            const sourceText = document.getElementById('sourceText').value.trim();
+            const targetText = document.getElementById('targetText').value.trim();
+            const apiKey = document.getElementById('apiKey').value.trim();
+            const errorMessageElement = document.getElementById('errorMessage');
+            const resultElement = document.getElementById('result');
+            const comparisonResultsElement = document.getElementById('comparisonResults');
+            const spinner = document.getElementById('spinner');
+            errorMessageElement.textContent = '';
+            if (!sourceText || !targetText) {
+                errorMessageElement.textContent = 'الرجاء إدخال كلا النصين للمقارنة';
+                return;
+            }
+            if (!apiKey) {
+                errorMessageElement.textContent = 'الرجاء إدخال مفتاح API صالح';
+                return;
+            }
+            spinner.style.display = 'block';
+            resultElement.style.display = 'none';
+            try {
+                const prompt = `
+                قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما، بما في ذلك:
+                1. الأرقام المكتوبة بشكل خاطئ
+                2. النصوص المفقودة
+                3. النصوص الفاسدة أو غير المفهومة
+                4. النصوص المختلفة في المعنى
+                قدم تحليلاً مفصلاً للاختلافات وتصنيفها حسب نوع الخطأ.
+                النص المصدر:
+                ${sourceText}
+                النص الهدف:
+                ${targetText}
+                `;
+                const response = await fetch('https://api.deepseek.com/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${apiKey}`
+                    },
+                    body: JSON.stringify({
+                        model: 'deepseek-reasoner',
+                        messages: [
+                            { role: 'system', content: 'أنت مساعد مفيد متخصص في مراجعة النصوص وتحديد الاختلافات بينها بدقة عالية.' },
+                            { role: 'user', content: prompt }
+                        ],
+                        stream: false
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`خطأ في الاتصال بالـ API: ${response.status} ${response.statusText}`);
+                }
+                const data = await response.json();
+                const analysisResult = data.choices[0].message.content;
+                comparisonResultsElement.innerHTML = formatAnalysisResult(analysisResult, sourceText, targetText);
+                resultElement.style.display = 'block';
+            } catch (error) {
+                errorMessageElement.textContent = `حدث خطأ: ${error.message}`;
+                console.error('Error:', error);
+            } finally {
+                spinner.style.display = 'none';
+            }
+        });
+        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>')
+                .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>