Update app.py

app.py

@@ -5,13 +5,15 @@ 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)),
@@ -28,36 +30,87 @@ else:
     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. دالة التنبؤ
+# ==========================================
+# 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):
     try:
-        # إذا كانت الصورة قادمة من ImageEditor كـ dict
+        # صورة من ImageEditor تأتي بصيغة dict
         if isinstance(image, dict):
             image = image['composite']
+        
+        # تحويل إلى تدرج رمادي
         gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
+        # تغيير الحجم
         resized = cv2.resize(gray, (28, 28))
+        # قلب الألوان (MNIST تدربت على كتابة بيضاء بخلفية سوداء)
         inverted = 255 - resized
+        # تطبيع
         normalized = inverted.astype('float32') / 255.0
+        # تهيئة للشبكة
         reshaped = normalized.reshape(1, 28, 28, 1)
-        pred = model.predict(reshaped, verbose=0)[0]
-        return {str(i): float(pred[i]) for i in range(10)}
+        
+        # التنبؤ
+        prediction = model.predict(reshaped, verbose=0)[0]
+        # تحويل إلى قاموس لعرضه في Label
+        return {str(i): float(prediction[i]) for i in range(10)}
     except Exception as e:
-        return {"error": str(e)}
-
-# 3. إنشاء الواجهة باستخدام gr.Interface (الأكثر استقراراً)
-demo = gr.Interface(
-    fn=predict_image,
-    inputs=gr.ImageEditor(
-        label="ارسم أو ارفع صورة",
-        type="numpy",
-        canvas_size=(280, 280)
-    ),
-    outputs=gr.Label(num_top_classes=3, label="الاحتمالات"),
-    title="🧠 التعرف على الأرقام المكتوبة بخط اليد",
-    description="ارسم رقماً (0-9) في المربع، أو ارفع صورة، واضغط Submit."
-)
-
-# 4. التشغيل (بدون أي معاملات إضافية)
-demo.launch()
+        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 يتوقع ذلك
+    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
+
+# ==========================================
+# 5. بناء الواجهة المتكاملة (Blocks)
+# ==========================================
+with gr.Blocks(title="MNIST Recognizer", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🧠 التعرف على الأرقام المكتوبة بخط اليد")
+    gr.Markdown("ارسم رقماً في المربع الأسود، أو ارفع صورة، أو جرب أحد الأمثلة العشوائية.")
+
+    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)
+            )
+            with gr.Row():
+                submit_btn = gr.Button("🔮 توقع", variant="primary")
+                random_btn = gr.Button("🎲 مثال عشوائي", variant="secondary")
+            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)
+    random_btn.click(fn=random_example, inputs=[], outputs=[sketch, info])
+
+# ==========================================
+# 6. 🔥 التشغيل لـ Hugging Face Spaces
+# ==========================================
+# لا تستخدم demo.launch() هنا! Spaces يدير التشغيل بنفسه.
+# فقط اجعل المتغير 'demo' هو الواجهة النهائية.