Update app.py

app.py

@@ -5,15 +5,16 @@ import cv2
 from tensorflow.keras import datasets, layers, models
 import os
 
-# ==========================================
-# 1. تحميل أو بناء النموذج (حل احتياطي)
-# ==========================================
+# ============================================================
+# 1. تحميل أو بناء النموذج (حل احتياطي في حال عدم وجود الملف)
+# ============================================================
 model_path = 'mnist_cnn_model.keras'
+
 if os.path.exists(model_path):
     model = tf.keras.models.load_model(model_path)
     print("✅ تم تحميل النموذج المحفوظ.")
 else:
-    print("⚠️ لم نجد النموذج، جارٍ البناء والتدريب (مرة واحدة فقط)...")
+    print("⚠️ لم يتم العثور على النموذج، جارٍ البناء والتدريب...")
     model = models.Sequential([
         layers.Conv2D(32, (3, 3), activation='relu', input_shape=(28, 28, 1)),
         layers.MaxPooling2D((2, 2)),
@@ -26,91 +27,77 @@ else:
     model.compile(optimizer='adam',
                   loss='sparse_categorical_crossentropy',
                   metrics=['accuracy'])
+    
     (train_images, train_labels), _ = datasets.mnist.load_data()
     train_images = train_images.reshape((60000, 28, 28, 1)).astype('float32') / 255
     model.fit(train_images, train_labels, epochs=3, validation_split=0.1, verbose=1)
     model.save(model_path)
-    print("✅ تم بناء النموذج وحفظه.")
+    print("✅ تم بناء النموذج وتدريبه وحفظه.")
 
-# ==========================================
-# 2. تحميل بيانات MNIST للأمثلة العشوائية
-# ==========================================
+# ============================================================
+# 2. تحميل بيانات MNIST للاستخدام في الأمثلة العشوائية
+# ============================================================
 (_, _), (test_images, test_labels) = datasets.mnist.load_data()
 test_images = test_images.reshape((10000, 28, 28, 1)).astype('float32') / 255
 
-# ==========================================
-# 3. دالة التنبؤ بالصورة (المرسومة أو المرفوعة)
-# ==========================================
-def predict_image(image):
+# ============================================================
+# 3. دالة التنبؤ بالصورة المرسومة
+# ============================================================
+def predict_sketch(image):
+    """
+    تستقبل الصورة من Sketchpad، تعالجها، وتعيد الاحتمالات لكل فئة.
+    """
     try:
-        # صورة من ImageEditor تأتي بصيغة dict
-        if isinstance(image, dict):
-            image = image['composite']
-        
-        # تحويل إلى تدرج رمادي
+        # الصورة قادمة بصيغة (height, width, 3) من نوع numpy array
         gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
-        # تغيير الحجم
         resized = cv2.resize(gray, (28, 28))
-        # قلب الألوان (MNIST تدربت على كتابة بيضاء بخلفية سوداء)
+        # قلب الألوان لأن MNIST تدربت على خلفية سوداء وكتابة بيضاء
         inverted = 255 - resized
-        # تطبيع
         normalized = inverted.astype('float32') / 255.0
-        # تهيئة للشبكة
         reshaped = normalized.reshape(1, 28, 28, 1)
         
-        # التنبؤ
         prediction = model.predict(reshaped, verbose=0)[0]
         # تحويل إلى قاموس لعرضه في Label
         return {str(i): float(prediction[i]) for i in range(10)}
     except Exception as e:
         return {"خطأ": str(e)}
 
-# ==========================================
+# ============================================================
 # 4. دالة جلب مثال عشوائي من بيانات الاختبار
-# ==========================================
+# ============================================================
 def random_example():
     idx = np.random.randint(0, len(test_images))
     img = test_images[idx].reshape(28, 28)
-    # تحويل الصورة إلى 3 قنوات (RGB) لأن ImageEditor يتوقع ذلك
+    # تحويل الصورة إلى 3 قنوات (RGB) لأن Sketchpad يتوقع ذلك
     img_rgb = np.stack([img] * 3, axis=2)
-    # ImageEditor يحتاج إلى هذا الهيكل بالضبط
-    image_dict = {"composite": img_rgb}
     info_text = f"🖼️ رقم العينة: {idx} | الرقم الحقيقي: {test_labels[idx]}"
-    return image_dict, info_text
+    return img_rgb, info_text
 
-# ==========================================
-# 5. بناء الواجهة المتكاملة (Blocks) - بدون theme
-# ==========================================
-with gr.Blocks(title="MNIST Recognizer") as demo:
+# ============================================================
+# 5. بناء واجهة Gradio باستخدام Blocks + Sketchpad
+# ============================================================
+with gr.Blocks(title="MNIST Digit Recognizer") as demo:
     gr.Markdown("# 🧠 التعرف على الأرقام المكتوبة بخط اليد")
-    gr.Markdown("ارسم رقماً في المربع الأسود، أو ارفع صورة، أو جرب أحد الأمثلة العشوائية.")
+    gr.Markdown("ارسم رقماً (0-9) في المربع، أو اضغط على زر **'مثال عشوائي'** لتجربة النموذج.")
 
     with gr.Row():
-        # العمود الأيسر (المدخلات)
+        # العمود الأيسر: لوحة الرسم والأزرار
         with gr.Column(scale=1):
-            # مكون الرسم والتحرير (الأفضل والأحدث)
-            sketch = gr.ImageEditor(
-                label="✏️ ارسم هنا",
-                type="numpy",
-                canvas_size=(280, 280),
-                brush=gr.Brush(colors=["#FFFFFF"], default_color="#FFFFFF"),
-                eraser=gr.Eraser(default_size=20)
-            )
+            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, value="ارسم أو اختر مثالاً.")
+            info = gr.Textbox(label="📌 معلومات", interactive=False, value="ارسم أو اختر مثالاً عشوائياً.")
 
-        # العمود الأيمن (المخرجات)
+        # العمود الأيمن: عرض النتائج
         with gr.Column(scale=1):
             output = gr.Label(num_top_classes=3, label="📊 أعلى 3 احتمالات")
 
     # ربط الأزرار بالدوال
-    submit_btn.click(fn=predict_image, inputs=sketch, outputs=output)
+    submit_btn.click(fn=predict_sketch, inputs=sketch, outputs=output)
     random_btn.click(fn=random_example, inputs=[], outputs=[sketch, info])
 
-# ==========================================
-# 6. 🔥 التشغيل لـ Hugging Face Spaces
-# ==========================================
-# لا تستخدم demo.launch() هنا! Spaces يدير التشغيل بنفسه.
-# فقط اجعل المتغير 'demo' هو الواجهة النهائية.
+# ============================================================
+# 6. 🔥 هذا هو المتغير الذي سيستخدمه Hugging Face Spaces
+ demo.launch() 
+# ============================================================