Update app.py

app.py

@@ -5,15 +5,11 @@ 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. تحميل النموذج
 # ============================================
 model_path = 'mnist_cnn_model.keras'
-
 if os.path.exists(model_path):
     model = tf.keras.models.load_model(model_path)
     print("✅ تم تحميل النموذج المحفوظ.")
@@ -34,7 +30,7 @@ else:
                   metrics=['accuracy'])
     
     (x_train, y_train), _ = datasets.mnist.load_data()
-    x_train = x_train.reshape((60000, 28, 28, 1)).astype('float32') / 255
+    x_train = x_train.reshape((60000, 28, 28, 1)).astype('float32') / 255.0
     model.fit(x_train, y_train, epochs=5, validation_split=0.1, verbose=1)
     model.save(model_path)
     print("✅ تم بناء النموذج وتدريبه وحفظه.")
@@ -43,106 +39,95 @@ else:
 # 2. تحميل بيانات الاختبار
 # ============================================
 (_, _), (test_images, test_labels) = datasets.mnist.load_data()
-test_images = test_images.reshape((10000, 28, 28, 1)).astype('float32') / 255
+test_images = test_images.reshape((10000, 28, 28, 1)).astype('float32') / 255.0
 
 # ============================================
-# 3. دالة معالجة الصورة وعرضها
+# 3. دالة معالجة الصورة
 # ============================================
-def process_image_for_mnist(image):
+def process_image_for_mnist(image_input):
     """
-    تعالج الصورة لتطابق تنسيق MNIST وتعيد الصورة المعالجة + المصفوفة
+    تعالج الصورة المدخلة من Sketchpad لتناسب تنسيق MNIST
     """
-    # 3.1 التأكد من الشكل
-    if isinstance(image, dict):
-        image = image['composite']
-    
-    # 3.2 تحويل إلى تدرج رمادي
+    if image_input is None:
+        raise ValueError("لم يتم إدخال أي صورة!")
+
+    # التعامل مع مدخلات Sketchpad (تكون Dictionary في الإصدارات الحديثة)
+    if isinstance(image_input, dict):
+        image = image_input.get('composite', None)
+        if image is None:
+            image = image_input.get('background', list(image_input.values())[0])
+    else:
+        image = image_input
+
+    # تحويل الصورة إلى RGB إذا كانت تحتوي على قناة Alpha (RGBA)
+    if image.shape[-1] == 4:
+        image = cv2.cvtColor(image, cv2.COLOR_RGBA2RGB)
+
+    # تحويل إلى تدرج رمادي Gray Scale
     if len(image.shape) == 3:
         gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
     else:
-        gray = image
-    
-    # 3.3 تغيير الحجم إلى 28x28
+        gray = image.copy()
+
+    # تغيير الحجم إلى 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)
-    
-    # حساب متوسط البيكسلات البيضاء
+
+    # جعل الخلفية سوداء (0) والرسم أبيض (255) كما في MNIST
     white_pixels = np.sum(binary == 255)
     black_pixels = np.sum(binary == 0)
-    
-    # إذا كان عدد البيكسلات البيضاء > السوداء، هذا يعني أن الخلفية بيضاء
-    # نقلب الألوان لجعل الخلفية سوداء
     if white_pixels > black_pixels:
         binary = 255 - binary
-    
-    # تطبيع إلى [0,1]
+
+    # تطبيع القيم بين 0 و 1
     normalized = binary.astype('float32') / 255.0
-    
-    # إعادة التشكيل
     reshaped = normalized.reshape(1, 28, 28, 1)
-    
+
     return normalized, reshaped
 
 # ============================================
-# 4. دالة التنبؤ (مع عرض الصورة المعالجة)
+# 4. دالة التنبؤ
 # ============================================
 @spaces.GPU
 def predict_sketch(image):
     try:
-        # 4.1 معالجة الصورة
+        if image is None:
+            return {}, None, "⚠️ يرجى الرسم أولاً!"
+
+        # معالجة الصورة
         normalized, reshaped = process_image_for_mnist(image)
-        
-        # 4.2 التنبؤ
+
+        # التنبؤ بواسطة النموذج
         pred = model.predict(reshaped, verbose=0)[0]
         predicted_class = int(np.argmax(pred))
         confidence = float(np.max(pred))
-        
-        # 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 بناء معلومات التصحيح
+
+        # تحضير نص التصحيح Debug Info
         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)])
+        top3_str = "\n".join([f"   {i+1}. الرقم {idx}: {pred[idx]:.2%}" for i, idx in enumerate(top3_idx)])
         
-        debug_info = f"""
-📊 معلومات المعالجة:
+        debug_info = f"""📊 معلومات التوقع:
 - الفئة المتوقعة: {predicted_class}
 - نسبة الثقة: {confidence:.2%}
-- أعلى 3 احتمالات:
+
+🔝 أعلى 3 احتمالات:
 {top3_str}
-- توزيع الاحتمالات الكامل:
-{', '.join([f'{i}: {pred[i]:.2%}' for i in range(10)])}
-"""
-        
-        # 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
-        }
-    
+
+🔢 جميع الاحتمالات:
+{', '.join([f'{i}: {pred[i]:.1%}' for i in range(10)])}"""
+
+        # تحويل صورة المعالجة لمصفوفة 3D لعرضها في Gradio بشكل مريح
+        display_img = (normalized * 255).astype(np.uint8)
+        display_img = cv2.resize(display_img, (140, 140), interpolation=cv2.INTER_NEAREST)
+
+        # إرجاع المخرجات الثلاثة مباشرة بالتفصيل
+        predictions_dict = {str(i): float(pred[i]) for i in range(10)}
+        return predictions_dict, display_img, debug_info
+
     except Exception as e:
-        return {
-            'prediction': {"خطأ": 1.0},
-            'processed_image': '',
-            'debug_info': f"❌ خطأ: {str(e)}"
-        }
+        return {}, None, f"❌ حدث خطأ أثناء التوقع: {str(e)}"
 
 # ============================================
 # 5. دالة المثال العشوائي
@@ -150,56 +135,43 @@ def predict_sketch(image):
 def random_example():
     idx = np.random.randint(0, len(test_images))
     img = test_images[idx].reshape(28, 28)
-    # تكبير الصورة لـ Sketchpad
-    img_large = cv2.resize(img, (280, 280))
+    img_large = cv2.resize(img, (280, 280), interpolation=cv2.INTER_NEAREST)
     img_rgb = np.stack([img_large] * 3, axis=2)
-    return img_rgb, f"الرقم الحقيقي: {test_labels[idx]}"
-
-# ============================================
-# 6. دالة تحديث الواجهة بعد التنبؤ
-# ============================================
-def update_outputs(image):
-    result = predict_sketch(image)
-    return (
-        result['prediction'],
-        result['processed_image'],
-        result['debug_info']
-    )
+    return img_rgb, f"🎲 تم اختيار رقم عشوائي (الرقم الحقيقي: {test_labels[idx]})"
 
 # ============================================
-# 7. بناء واجهة Gradio
+# 6. بناء واجهة Gradio
 # ============================================
-with gr.Blocks(title="MNIST Recognizer") as demo:
-    gr.Markdown("# 🧠 التعرف على الأرقام المكتوبة بخط اليد")
-    gr.Markdown("ارسم رقماً (0-9) في المربع، أو اضغط على زر **مثال عشوائي**.")
+with gr.Blocks(title="MNIST Digit Recognizer") as demo:
+    gr.Markdown("# 🧠 التعرف على الأرقام المكتوبة بخط اليد (MNIST)")
+    gr.Markdown("ارسم رقماً (من 0 إلى 9) في المربع الأيسر، ثم اضغط على زر **توقع**.")
     
     with gr.Row():
         with gr.Column(scale=1):
-            sketch = gr.Sketchpad(label="✏️ ارسم هنا")
+            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=12)
-        
+            info = gr.Textbox(label="📌 معلومات التصحيح (Debug Info)", interactive=False, lines=10)
+            
         with gr.Column(scale=1):
-            output = gr.Label(num_top_classes=3, label="📊 الاحتمالات")
-            processed_img = gr.Image(label="🖼️ الصورة بعد المعالجة (ما يراه النموذج)", height=150)
-    
-    # ربط الأزرار
+            output = gr.Label(num_top_classes=3, label="📊 احتمالات التوقع")
+            processed_img = gr.Image(label="🖼️ الصورة بعد المعالجة (ما يراه النموذج)", image_mode="L")
+
+    # ربط الأحداث والأزرار
     submit_btn.click(
-        fn=update_outputs,
+        fn=predict_sketch,
         inputs=sketch,
         outputs=[output, processed_img, info]
     )
+    
     random_btn.click(
         fn=random_example,
         inputs=[],
         outputs=[sketch, info]
     )
-# اختبار النموذج على 100 صورة من MNIST
-test_loss, test_acc = model.evaluate(test_images, test_labels, verbose=0)
-print(f"✅ دقة النموذج على MNIST: {test_acc:.2%}")
+
 # ============================================
-# 8. تشغيل التطبيق
+# 7. تشغيل التطبيق
 # ============================================
 demo.launch()