Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 15

Commit

ff95748

verified ·

1 Parent(s): 778176a

Update index.html

Browse files

Files changed (1) hide show

index.html +87 -32

index.html CHANGED Viewed

@@ -3,12 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>تحليل بسيط للنصوص والترجمات</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%; }
@@ -18,6 +18,60 @@
       background-size: 200% 200%;
       animation: gradient 15s ease infinite;
     }
     .spinner {
       border: 4px solid #f3f3f3;
       border-top: 4px solid #4f46e5;
@@ -30,26 +84,19 @@
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
     /* منطقة سلسلة التفكير */
     #chainOfThought {
       display: none;
-      background: #f9fafb;
-      padding: 0.5rem;
       border: 1px solid #e5e7eb;
       border-radius: 0.5rem;
-      margin-top: 1rem;
       font-size: 0.9rem;
       direction: ltr;
       text-align: left;
     }
-    /* تظليل الاختلافات */
-    .highlight {
-      color: white;
-      background-color: #ef4444;
-      padding: 0 3px;
-      border-radius: 3px;
-      font-weight: bold;
-    }
   </style>
 </head>
 <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
@@ -57,7 +104,7 @@
     <!-- رأس الصفحة -->
     <header class="text-center mb-12">
       <h1 class="text-5xl font-bold mb-4 animate-gradient">تحليل النصوص والترجمات</h1>
-      <p class="text-2xl">ترجم النص الهدف إلى العربية مع الاهتمام بالتعليم، ثم قارن مع النص المصدر واخرج الاختلافات (النصوص الناقصة) فقط.</p>
     </header>
     <!-- منطقة الإدخال -->
@@ -83,7 +130,7 @@
     <!-- منطقة سلسلة التفكير -->
     <div id="chainOfThought" class="mt-6">
       <strong>سلسلة التفكير:</strong>
-      <pre id="chainText"></pre>
     </div>
     <!-- منطقة النتائج -->
@@ -97,8 +144,8 @@
     (function(){
       "use strict";
-      // برومت بسيط: يطلب من DeepSeek ترجمة النص الهدف إلى العربية مع التعليم، ثم مقارنة النصوص واستخراج الاختلافات (النصوص الناقصة) فقط مع وضعها بين أقواس.
-      const PROMPT = `ترجم النص الهدف إلى العربية مع الاهتمام بالتعليم، ثم قارن بين النص المصدر والنص الهدف المُترجم واخرج الاختلافات فقط (النصوص الناقصة) مع وضعها بين أقواس ().
 النص المصدر:
 {source}
 النص الهدف:
@@ -112,20 +159,20 @@
         document.getElementById('loadingIndicator').classList.add('hidden');
       };
-      // دالة إرسال الطلب للنموذج
       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: false
         };
-        console.log("Payload:", payload); // للتأكد من إرسال النصوص
         try {
           const response = await fetch("https://api.deepseek.com/chat/completions", {
             method: "POST",
@@ -138,18 +185,26 @@
           if (!response.ok) {
             throw new Error("حدث خطأ في الاتصال: " + response.statusText);
           }
-          const data = await response.json();
-          return data.choices[0].message.content.trim();
         } catch (error) {
           throw error;
         }
       }
-      // دالة معالجة النتيجة وتظليل الاختلافات
       function processResult(source, analysisOutput) {
-        // هنا نقوم بتطبيق تظليل بسيط: نضع الاختلافات بين أقواس.
-        // افترضنا أن الاختلافات تظهر ضمن علامات معينة مثل __النص__ للنص المفقود.
-        // يمكن تعديل هذا الجزء حسب تنسيق الناتج.
         let processed = analysisOutput.replace(/__(.*?)__/g, '<span class="highlight">($1)</span>');
         return processed;
       }
@@ -162,16 +217,15 @@
           alert("يرجى إدخال كلا النصين.");
           return;
         }
-        // إظهار مؤشر التحميل
-        showLoading();
         document.getElementById('resultSection').classList.add('hidden');
         document.getElementById('chainOfThought').style.display = "none";
         try {
           const analysisOutput = await analyzeText(sourceText, targetText);
-          // عرض سلسلة التفكير قبل التعليم
-          document.getElementById('chainText').innerText = analysisOutput;
           document.getElementById('chainOfThought').style.display = "block";
-          // معالجة الناتج (تظليل الاختلافات)
           const diffResult = processResult(sourceText, analysisOutput);
           document.getElementById('diffResult').innerHTML = diffResult;
           document.getElementById('resultSection').classList.remove('hidden');
@@ -181,6 +235,7 @@
           hideLoading();
         }
       });
     })();
   </script>
 </body>

 <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%; }
       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;
       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">
     <!-- رأس الصفحة -->
     <header class="text-center mb-12">
       <h1 class="text-5xl font-bold mb-4 animate-gradient">تحليل النصوص والترجمات</h1>
+      <p class="text-2xl">ترجم النص الهدف إلى العربية مع التعليم، ثم قارن مع النص المصدر واخرج الاختلافات (النصوص الناقصة) فقط.</p>
     </header>
     <!-- منطقة الإدخال -->
     <!-- منطقة سلسلة التفكير -->
     <div id="chainOfThought" class="mt-6">
       <strong>سلسلة التفكير:</strong>
+      <pre id="chainText" class="whitespace-pre-wrap text-gray-700"></pre>
     </div>
     <!-- منطقة النتائج -->
     (function(){
       "use strict";
+      // برومت بسيط: ترجمة النص الهدف إلى العربية مع التعليم، ثم قارن بين النص المصدر والنص الهدف المُترجم واخرج الاختلافات (النصوص الناقصة) فقط مع وضعها بين أقواس.
+      const PROMPT = `ترجم النص الهدف إلى العربية مع التعليم، ثم قارن بين النص المصدر والنص الهدف المُترجم واخرج الاختلافات فقط (النصوص الناقصة) مع وضعها بين أقواس ().
 النص المصدر:
 {source}
 النص الهدف:
         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",
           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;
       }
           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');
           hideLoading();
         }
       });
     })();
   </script>
 </body>