Update app.py

app.py

@@ -1,5 +1,4 @@
-# app.py - النسخة الآمنة بدون elem_classes
-# app.py - النسخة النهائية والمعدلة
+# app.py - النسخة النهائية والمحسّنة
 
 import os
 import json
@@ -33,7 +32,6 @@ def base64_to_image(b64_string):
     return Image.open(io.BytesIO(img_data))
 
 def start_new_session():
-    """يبدأ جلسة جديدة على الخادم ويعيد معرف الجلسة وأمر إظهار الواجهة."""
     print("Requesting to start a new session...")
     try:
         response = requests.post(API_START_SESSION_URL, timeout=30)
@@ -42,7 +40,6 @@ def start_new_session():
         session_id = session_data.get("session_id")
         if not session_id:
             raise gr.Error("لم يتمكن الخادم من بدء جلسة جديدة.")
-        
         status_message = f"✅ تم بدء جلسة جديدة بنجاح. أنت الآن متصل بالخادم."
         print(f"Session started successfully: {session_id}")
         return session_id, status_message, gr.update(visible=True)
@@ -52,15 +49,12 @@ def start_new_session():
         raise gr.Error(error_message)
 
 def handle_end_session(session_id):
-    """ينهي الجلسة الحالية على الخادم."""
     if not session_id:
         return "لا توجد جلسة نشطة لإنهائها.", None, gr.update(visible=False)
-    
     print(f"Requesting to end session: {session_id}")
     try:
         response = requests.post(f"{API_END_SESSION_URL}?session_id={session_id}", timeout=30)
         response.raise_for_status()
-        
         status_message = f"🔌 تم إنهاء الجلسة بنجاح. انقطع الاتصال بالخادم."
         print(status_message)
         return status_message, None, gr.update(visible=False)
@@ -79,10 +73,8 @@ def run_single_frame_via_api(session_id, rgb_image_path, measurements_path):
         with open(measurements_path, 'r') as f:
             measurements_dict = json.load(f)
         image_b64 = image_to_base64(rgb_image_pil)
-        
         payload = {
-            "session_id": session_id,
-            "image_b64": image_b64,
+            "session_id": session_id, "image_b64": image_b64,
             "measurements": {
                 "pos_global": measurements_dict.get('pos_global', [0.0, 0.0]),
                 "theta": measurements_dict.get('theta', 0.0),
@@ -90,7 +82,6 @@ def run_single_frame_via_api(session_id, rgb_image_path, measurements_path):
                 "target_point": measurements_dict.get('target_point', [0.0, 100.0])
             }
         }
-        
         print(f"Sending run_step request for session: {session_id}")
         response = requests.post(API_RUN_STEP_URL, json=payload, timeout=60)
         response.raise_for_status()
@@ -105,35 +96,31 @@ def run_single_frame_via_api(session_id, rgb_image_path, measurements_path):
         raise gr.Error(f"حدث خطأ أثناء الاتصال بالـ API: {e}")
     except Exception as e:
         raise gr.Error(f"حدث خطأ غير متوقع: {e}")
+
 # ==============================================================================
 #           4. تعريف واجهة Gradio
 # ==============================================================================
 
-# --- الخطوة 1: تعريف متغير CSS مع المحددات الصحيحة ---
 CUSTOM_CSS = """
-/* القاعدة الأساسية لتوسيع الواجهة */
 .gradio-container {max-width: 100% !important;}
-
-/* استهداف الجدول داخل الحاوية التي أعطيناها المعرف 'examples-container' */
 #examples-container .gradio-table {
-    table-layout: fixed; /* ضروري للتحكم الدقيق في العرض */
-    width: 100%;
+    table-layout: fixed !important;
+    width: 100% !important;
 }
-
-/* العمود الثاني (ملف القياسات): عرض ثابت وصغير */
+/* تصحيح: تنسيق العمود الأول (الصورة) ليشمل الرأس والبيانات */
 #examples-container .gradio-table th:nth-child(1),
-#examples-container .gradio-table th:nth-child(1){
-width:100px !important;
+#examples-container .gradio-table td:nth-child(1) {
+    width: 120px !important;
 }
-/* إخفاء العمود الثاني بالكامل */
+/* إخفاء العمود الثاني (ملف القياسات) */
 #examples-container .gradio-table th:nth-child(2),
 #examples-container .gradio-table td:nth-child(2) {
     display: none !important;
 }
-/* الأعمدة من الثالث فصاعداً (البيانات الرقمية): عرض أصغر ومحاذاة للمنتصف */
+/* تنسيق الأعمدة الرقمية المتبقية */
 #examples-container .gradio-table th:nth-child(n+3),
 #examples-container .gradio-table td:nth-child(n+3) {
-    width:100px !important; /* يمكنك تعديل هذه القيمة */
+    width: 110px !important;
     text-align: center !important;
 }
 """
@@ -155,101 +142,54 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), cs
     gr.Markdown("")
 
     with gr.Group(visible=False) as main_controls_group:
-        with gr.Row(equal_height=True):
+        with gr.Row(equal_height=False):
+            # --- العمود الأيسر: للمدخلات والأمثلة ---
             with gr.Column(scale=2):
                 with gr.Group():
                     gr.Markdown("### 🗂️ ارفع ملفات السيناريو")
                     api_rgb_image_path = gr.Image(type="filepath", label="(RGB)")
                     api_measurements_path = gr.File(label="(JSON)", type="filepath")
                     api_run_button = gr.Button("🚀 أرسل البيانات للمعالجة", variant="primary")
-
-
-        # with gr.Row():
-            # --- التعديل: إضافة elem_id إلى حاوية الأمثلة ---
+                
                 with gr.Group(elem_id="examples-container"):            
                     gr.Markdown("### ✨ أمثلة جاهزة")
-                    if os.path.isdir(EXAMPLES_DIR) and \
-                       os.path.exists(os.path.join(EXAMPLES_DIR, "sample1", "measurements.json")) and \
-                       os.path.exists(os.path.join(EXAMPLES_DIR, "sample2", "measurements.json")) and \
-                       os.path.exists(os.path.join(EXAMPLES_DIR, "sample3", "measurements.json")):
-                        
-                        with open(os.path.join(EXAMPLES_DIR, "sample1", "measurements.json"), 'r') as f:
-                            data1 = json.load(f)
-                        with open(os.path.join(EXAMPLES_DIR, "sample2", "measurements.json"), 'r') as f:
-                            data2 = json.load(f)
-                        with open(os.path.join(EXAMPLES_DIR, "sample3", "measurements.json"), 'r') as f:
-                            data3 = json.load(f)
-                        
-                        with gr.Column(visible=False):
-                            example_speed = gr.Textbox(label="السرع")
-                            example_theta = gr.Textbox(label="الاتجاه")
-                            example_pos = gr.Textbox(label="الموقع العام")
-                            example_target = gr.Textbox(label="النقطة المستهدفة")
-                        # --- التعديل: إزالة elem_classes من هنا ---
-                        gr.Examples(
-                            examples=[
-                                [
-                                    os.path.join(EXAMPLES_DIR, "sample1", "rgb.jpg"), 
-                                    os.path.join(EXAMPLES_DIR, "sample1", "measurements.json"),
-                                    f"{data1.get('speed', 0.0):.2f}",
-                                    f"{data1.get('theta', 0.0):.2f}",
-                                    str(data1.get('pos_global', 'N/A')),
-                                    str(data1.get('target_point', 'N/A'))
+                    if os.path.isdir(EXAMPLES_DIR):
+                        try:
+                            with open(os.path.join(EXAMPLES_DIR, "sample1", "measurements.json"), 'r') as f: data1 = json.load(f)
+                            with open(os.path.join(EXAMPLES_DIR, "sample2", "measurements.json"), 'r') as f: data2 = json.load(f)
+                            with open(os.path.join(EXAMPLES_DIR, "sample3", "measurements.json"), 'r') as f: data3 = json.load(f)
+                            
+                            with gr.Column(visible=False):
+                                example_speed = gr.Textbox()
+                                example_theta = gr.Textbox()
+                                example_pos = gr.Textbox()
+                                example_target = gr.Textbox()
+                            
+                            gr.Examples(
+                                examples=[
+                                    [os.path.join(EXAMPLES_DIR, "sample1", "rgb.jpg"), os.path.join(EXAMPLES_DIR, "sample1", "measurements.json"), f"{data1.get('speed', 0.0):.2f}", f"{data1.get('theta', 0.0):.2f}", str(data1.get('pos_global', 'N/A')), str(data1.get('target_point', 'N/A'))],
+                                    [os.path.join(EXAMPLES_DIR, "sample2", "rgb.jpg"), os.path.join(EXAMPLES_DIR, "sample2", "measurements.json"), f"{data2.get('speed', 0.0):.2f}", f"{data2.get('theta', 0.0):.2f}", str(data2.get('pos_global', 'N/A')), str(data2.get('target_point', 'N/A'))],
+                                    [os.path.join(EXAMPLES_DIR, "sample3", "rgb.jpg"), os.path.join(EXAMPLES_DIR, "sample3", "measurements.json"), f"{data3.get('speed', 0.0):.2f}", f"{data3.get('theta', 0.0):.2f}", str(data3.get('pos_global', 'N/A')), str(data3.get('target_point', 'N/A'))]
                                 ],
-                                [
-                                    os.path.join(EXAMPLES_DIR, "sample2", "rgb.jpg"),
-                                    os.path.join(EXAMPLES_DIR, "sample2", "measurements.json"),
-                                    f"{data2.get('speed', 0.0):.2f}",
-                                    f"{data2.get('theta', 0.0):.2f}",
-                                    str(data2.get('pos_global', 'N/A')),
-                                    str(data2.get('target_point', 'N/A'))
-                                ],
-                                [   os.path.join(EXAMPLES_DIR, "sample3", "rgb.jpg"),
-                                    os.path.join(EXAMPLES_DIR, "sample3", "measurements.json"),
-                                    f"{data3.get('speed', 0.0):.2f}",
-                                    f"{data3.get('theta', 0.0):.2f}",
-                                    str(data3.get('pos_global', 'N/A')),
-                                    str(data3.get('target_point', 'N/A'))
-                                ]
-                            ],
-                            inputs=[
-                                api_rgb_image_path,
-                                api_measurements_path,
-                                example_speed,
-                                example_theta,
-                                example_pos,
-                                example_target
-                            ],
-                            label="اختر سيناريو اختبار"
-                        )
+                                inputs=[api_rgb_image_path, api_measurements_path, example_speed, example_theta, example_pos, example_target],
+                                label="اختر سيناريو اختبار"
+                            )
+                        except FileNotFoundError:
+                             gr.Markdown("لم يتم العثور على ملفات الأمثلة داخل مجلد `examples`.")
                     else:
-                        gr.Markdown("لم يتم العثور على مجلد الأمثلة (`examples`) أو محتوياته.")
+                        gr.Markdown("لم يتم العثور على مجلد الأمثلة (`examples`).")
            
+            # --- العمود الأيمن: للمخرجات ---
             with gr.Column(scale=3):
                 with gr.Group():
                     gr.Markdown("### 📊 النتائج من الخادم")
                     api_output_image = gr.Image(label="لوحة التحكم المرئية (من الـ API)", type="pil", interactive=False, height=600)
                     api_control_json = gr.JSON(label="أوامر التحكم (من الـ API)")
         
-
     # --- ربط منطق الواجهة ---
-    start_session_button.click(
-        fn=start_new_session,
-        inputs=None,
-        outputs=[session_id_state, status_textbox, main_controls_group]
-    )
-    
-    end_session_button.click(
-        fn=handle_end_session,
-        inputs=[session_id_state],
-        outputs=[status_textbox, session_id_state, main_controls_group]
-    )
-
-    api_run_button.click(
-        fn=run_single_frame_via_api,
-        inputs=[session_id_state, api_rgb_image_path, api_measurements_path],
-        outputs=[api_output_image, api_control_json],
-    )
+    start_session_button.click(fn=start_new_session, inputs=None, outputs=[session_id_state, status_textbox, main_controls_group])
+    end_session_button.click(fn=handle_end_session, inputs=[session_id_state], outputs=[status_textbox, session_id_state, main_controls_group])
+    api_run_button.click(fn=run_single_frame_via_api, inputs=[session_id_state, api_rgb_image_path, api_measurements_path], outputs=[api_output_image, api_control_json])
 
 if __name__ == "__main__":
     demo.queue().launch(debug=True)