Update app.py

app.py

@@ -5,9 +5,12 @@ import cv2
 from tensorflow.keras import datasets, layers, models
 import os
 import spaces
+import matplotlib.pyplot as plt
+from io import BytesIO
+import base64
 
 # ============================================
-# 1. تحميل النموذج (مع تدريب أفضل إن لزم)
+# 1. تحميل النموذج
 # ============================================
 model_path = 'mnist_cnn_model.keras'
 
@@ -43,65 +46,106 @@ else:
 test_images = test_images.reshape((10000, 28, 28, 1)).astype('float32') / 255
 
 # ============================================
-# 3. دالة التنبؤ (ذكية وتظهر معلومات التصحيح)
+# 3. دالة معالجة الصورة وعرضها
+# ============================================
+def process_image_for_mnist(image):
+    """
+    تعالج الصورة لتطابق تنسيق MNIST وتعيد الصورة المعالجة + المصفوفة
+    """
+    # 3.1 التأكد من الشكل
+    if isinstance(image, dict):
+        image = image['composite']
+    
+    # 3.2 تحويل إلى تدرج رمادي
+    if len(image.shape) == 3:
+        gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
+    else:
+        gray = image
+    
+    # 3.3 تغيير الحجم إلى 28x28
+    resized = cv2.resize(gray, (28, 28), interpolation=cv2.INTER_AREA)
+    
+    # 3.4 **معالجة قوية للألوان**
+    # MNIST: خلفية سوداء (قيمة 0) وكتابة بيضاء (قيمة 1)
+    # نقوم بتحويل الصورة إلى ثنائية (أسود/أبيض) مع عتبة ذكية
+    
+    # حساب العتبة التلقائية باستخدام Otsu
+    _, binary = cv2.threshold(resized, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+    
+    # حساب متوسط البيكسلات البيضاء
+    white_pixels = np.sum(binary == 255)
+    black_pixels = np.sum(binary == 0)
+    
+    # إذا كان عدد البيكسلات البيضاء > السوداء، هذا يعني أن الخلفية بيضاء
+    # نقلب الألوان لجعل الخلفية سوداء
+    if white_pixels > black_pixels:
+        binary = 255 - binary
+    
+    # تطبيع إلى [0,1]
+    normalized = binary.astype('float32') / 255.0
+    
+    # إعادة التشكيل
+    reshaped = normalized.reshape(1, 28, 28, 1)
+    
+    return normalized, reshaped
+
+# ============================================
+# 4. دالة التنبؤ (مع عرض الصورة المعالجة)
 # ============================================
 @spaces.GPU
 def predict_sketch(image):
     try:
-        # 3.1 التأكد من أن الصورة بصيغة numpy
-        if isinstance(image, dict):
-            image = image['composite']
-        
-        # 3.2 تحويل إلى تدرج رمادي
-        if len(image.shape) == 3:
-            gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
-        else:
-            gray = image
-        
-        # 3.3 تغيير الحجم إلى 28x28
-        resized = cv2.resize(gray, (28, 28))
-        
-        # 3.4 اكتشاف اتجاه الألوان تلقائياً
-        mean_val = np.mean(resized)
-        if mean_val > 127:
-            # الخلفية فاتحة، نقلب الألوان
-            resized = 255 - resized
-            flip_status = "تم قلب الألوان (خلفية فاتحة → خلفية سوداء)"
-        else:
-            flip_status = "الإبقاء على الألوان (خلفية سوداء بالفعل)"
+        # 4.1 معالجة الصورة
+        normalized, reshaped = process_image_for_mnist(image)
         
-        # 3.5 تطبيق عتبة لتحسين الرسم
-        _, thresh = cv2.threshold(resized, 128, 255, cv2.THRESH_BINARY)
-        
-        # 3.6 تطبيع وإعادة تشكيل
-        normalized = thresh.astype('float32') / 255.0
-        reshaped = normalized.reshape(1, 28, 28, 1)
-        
-        # 3.7 التنبؤ
+        # 4.2 التنبؤ
         pred = model.predict(reshaped, verbose=0)[0]
         predicted_class = int(np.argmax(pred))
         confidence = float(np.max(pred))
         
-        # 3.8 بناء معلومات التصحيح
+        # 4.3 تحويل الصورة المعالجة إلى صورة لعرضها
+        fig, ax = plt.subplots(figsize=(2, 2))
+        ax.imshow(normalized, cmap='gray')
+        ax.set_title(f'الصورة المعالجة\n(يتوقع: {predicted_class})')
+        ax.axis('off')
+        
+        # حفظ الصورة في ذاكرة مؤقتة
+        buf = BytesIO()
+        plt.savefig(buf, format='png', bbox_inches='tight')
+        buf.seek(0)
+        processed_image = base64.b64encode(buf.getvalue()).decode('utf-8')
+        plt.close()
+        
+        # 4.4 بناء معلومات التصحيح
         top3_idx = np.argsort(pred)[-3:][::-1]
         top3_str = "\n".join([f"   {i+1}. {idx}: {pred[idx]:.2%}" for i, idx in enumerate(top3_idx)])
+        
         debug_info = f"""
 📊 معلومات المعالجة:
-- متوسط السطوع الأصلي: {mean_val:.1f}
-- {flip_status}
 - الفئة المتوقعة: {predicted_class}
 - نسبة الثقة: {confidence:.2%}
 - أعلى 3 احتمالات:
 {top3_str}
+- توزيع الاحتمالات الكامل:
+{', '.join([f'{i}: {pred[i]:.2%}' for i in range(10)])}
 """
-        # 3.9 إرجاع الاحتمالات ومعلومات التصحيح
-        return {str(i): float(pred[i]) for i in range(10)}, debug_info
+        
+        # 4.5 إرجاع النتائج
+        return {
+            'prediction': {str(i): float(pred[i]) for i in range(10)},
+            'processed_image': f'data:image/png;base64,{processed_image}',
+            'debug_info': debug_info
+        }
     
     except Exception as e:
-        return {"خطأ": str(e)}, f"❌ خطأ: {str(e)}"
+        return {
+            'prediction': {"خطأ": 1.0},
+            'processed_image': '',
+            'debug_info': f"❌ خطأ: {str(e)}"
+        }
 
 # ============================================
-# 4. دالة المثال العشوائي
+# 5. دالة المثال العشوائي
 # ============================================
 def random_example():
     idx = np.random.randint(0, len(test_images))
@@ -112,28 +156,48 @@ def random_example():
     return img_rgb, f"الرقم الحقيقي: {test_labels[idx]}"
 
 # ============================================
-# 5. بناء واجهة Gradio (بدون وسائط غير مدعومة)
+# 6. دالة تحديث الواجهة بعد التنبؤ
+# ============================================
+def update_outputs(image):
+    result = predict_sketch(image)
+    return (
+        result['prediction'],
+        result['processed_image'],
+        result['debug_info']
+    )
+
+# ============================================
+# 7. بناء واجهة Gradio
 # ============================================
 with gr.Blocks(title="MNIST Recognizer") as demo:
     gr.Markdown("# 🧠 التعرف على الأرقام المكتوبة بخط اليد")
     gr.Markdown("ارسم رقماً (0-9) في المربع، أو اضغط على زر **مثال عشوائي**.")
-
+    
     with gr.Row():
         with gr.Column(scale=1):
-            # 🔥 حذف brush_radius و brush_color نهائياً
             sketch = gr.Sketchpad(label="✏️ ارسم هنا")
             with gr.Row():
                 submit_btn = gr.Button("🔮 توقع", variant="primary")
                 random_btn = gr.Button("🎲 مثال عشوائي", variant="secondary")
-            info = gr.Textbox(label="📌 معلومات التصحيح", interactive=False, lines=10)
-
+            info = gr.Textbox(label="📌 معلومات التصحيح", interactive=False, lines=12)
+        
         with gr.Column(scale=1):
             output = gr.Label(num_top_classes=3, label="📊 الاحتمالات")
-
-    submit_btn.click(fn=predict_sketch, inputs=sketch, outputs=[output, info])
-    random_btn.click(fn=random_example, inputs=[], outputs=[sketch, info])
+            processed_img = gr.Image(label="🖼️ الصورة بعد المعالجة (ما يراه النموذج)", height=150)
+    
+    # ربط الأزرار
+    submit_btn.click(
+        fn=update_outputs,
+        inputs=sketch,
+        outputs=[output, processed_img, info]
+    )
+    random_btn.click(
+        fn=random_example,
+        inputs=[],
+        outputs=[sketch, info]
+    )
 
 # ============================================
-# 6. تشغيل التطبيق (في النطاق العام لـ ZeroGPU)
+# 8. تشغيل التطبيق
 # ============================================
 demo.launch()