Update index.html

index.html

@@ -9,6 +9,8 @@
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
   <!-- ربط مكتبة jsPDF لتحويل النص إلى PDF -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <!-- (اختياري) ربط مكتبة PicoCSS لتنسيق قسم OCR -->
+  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
   <style>
     @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");
 
@@ -243,6 +245,11 @@
           <i class="fas fa-gavel ml-3"></i>
           <span>الأحكام والسوابق</span>
         </a>
+        <!-- إضافة قسم OCR -->
+        <a href="#" class="nav-link" data-section="ocr">
+          <i class="fas fa-image ml-3"></i>
+          <span>OCR</span>
+        </a>
       </nav>
     </div>
   </aside>
@@ -478,15 +485,42 @@
         </div>
       </div>
     </section>
+
+    <!-- قسم OCR للتعرف على النص من الصورة -->
+    <section id="ocr" class="section hidden">
+      <h2 class="text-3xl font-bold text-gray-800 mb-8">OCR التعرف على النص</h2>
+      <div class="bg-white rounded p-6 shadow">
+        <article style="text-align: center;">
+          <h3>نموذج OCR</h3>
+          <p>هذه الواجهة تقوم بمعالجة الصورة وإجراء التعرف على النص.</p>
+        </article>
+        <label for="ocrFile">اختر صورة للرفع
+          <input type="file" id="ocrFile" name="file" accept="image/*">
+        </label>
+        <button id="ocrSubmit" class="action-button mt-4">معالجة الصورة</button>
+        <h4 id="ocrSpinner" style="text-align: center;" aria-busy="true" hidden>جاري المعالجة...</h4>
+        <section id="ocrParsed" hidden>
+          <label for="ocrText">💬 النص المعترف عليه:
+            <pre id="ocrText" style="padding: 10px;"></pre>
+          </label>
+        </section>
+        <section id="ocrRaw" hidden>
+          <label for="ocrRawResponse">💬 الاستجابة الخام:
+            <pre id="ocrRawResponse" style="padding: 10px;"></pre>
+          </label>
+        </section>
+      </div>
+    </section>
   </main>
 
   <!-- سكربتات الموقع -->
   <script>
-    // تعريف API الأساسي (نقطة /chat)
+    // تعريف API الأساسي (نقطة /chat) ومصادر أخرى
     const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
     const UPLOAD_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/upload';
+    const OCR_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/ocr';
 
-    // دالة الحصول على البادئة (prompt prefix) بناءً على القسم
+    // دالة الحصول على البادئة (prompt prefix) لكل قسم
     function getPromptPrefix(section) {
       switch(section) { 
         case 'analysis':
@@ -755,7 +789,57 @@
       });
     }
 
-    // تهيئة الصفحة بالقسم الافتراضي "home"
+    // دالة التعامل مع رفع ومعالجة الصورة لنظام OCR
+    document.getElementById("ocrSubmit").addEventListener("click", async function() {
+      const fileInput = document.getElementById("ocrFile");
+      const spinner = document.getElementById("ocrSpinner");
+      const ocrParsedSection = document.getElementById("ocrParsed");
+      const ocrRawSection = document.getElementById("ocrRaw");
+      const ocrTextPre = document.getElementById("ocrText");
+      const ocrRawResponsePre = document.getElementById("ocrRawResponse");
+
+      if (!fileInput.files || fileInput.files.length === 0) {
+         alert("الرجاء اختيار صورة.");
+         return;
+      }
+      
+      const file = fileInput.files[0];
+      let formData = new FormData();
+      formData.append("file", file);
+      
+      spinner.hidden = false;
+      ocrParsedSection.hidden = true;
+      ocrRawSection.hidden = true;
+      
+      try {
+         const response = await fetch(OCR_URL, {
+             method: "POST",
+             body: formData
+         });
+         const data = await response.json();
+         
+         // إذا كان النص طويلاً وقُسِم إلى جزئين، يتم دمجهما للعرض
+         let recognizedText = "";
+         if (data.text) {
+           recognizedText = data.text;
+         } else if (data.part1 && data.part2) {
+           recognizedText = data.part1 + "\n\n" + data.part2;
+         }
+         
+         ocrTextPre.textContent = recognizedText;
+         ocrRawResponsePre.textContent = JSON.stringify(data, null, 2);
+         
+         ocrParsedSection.hidden = false;
+         ocrRawSection.hidden = false;
+      } catch (error) {
+         console.error("OCR processing error:", error);
+         alert("حدث خطأ أثناء معالجة الصورة.");
+      } finally {
+         spinner.hidden = true;
+      }
+    });
+
+    // تهيئة الصفحة للقسم الافتراضي "home"
     document.addEventListener("DOMContentLoaded", () => {
       showSection("home");
     });