Update app.py

app.py

@@ -104,12 +104,39 @@ 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
 # ==============================================================================
 
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), css=".gradio-container {max-width: 100% !important;}") as demo:
+# --- الخطوة 1: تعريف متغير CSS للتحكم في الأعمدة ---
+CUSTOM_CSS = """
+/* القاعدة الأساسية لتوسيع الواجهة */
+.gradio-container {max-width: 100% !important;}
+
+/* استهداف الجدول الذي أعطيناه اسم 'examples-table' */
+.examples-table .gradio-table {
+    table-layout: fixed; /* ضروري للتحكم الدقيق في العرض */
+    width: 100%;
+}
+
+/* العمود الثاني (ملف القياسات): عرض ثابت وصغير */
+.examples-table .gradio-table th:nth-child(2),
+.examples-table .gradio-table td:nth-child(2) {
+    width: 200px !important; /* يمكنك تعديل هذه القيمة */
+    white-space: nowrap;     /* لمنع التفاف اسم الملف الطويل */
+    overflow: hidden;        /* إخفاء النص الزائد */
+    text-overflow: ellipsis; /* إضافة "..." للنص المقطوع */
+}
+
+/* الأعمدة من الثالث فصاعداً (البيانات الرقمية): عرض أصغر ومحاذاة للمنتصف */
+.examples-table .gradio-table th:nth-child(n+3),
+.examples-table .gradio-table td:nth-child(n+3) {
+    width: 160px !important; /* يمكنك تعديل هذه القيمة */
+    text-align: center !important;
+}
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), css=CUSTOM_CSS) as demo:
     session_id_state = gr.State(value=None)
     
     gr.Markdown("# 🚗 واجهة التحكم لنظام Baseer للقيادة الذاتية")
@@ -126,39 +153,44 @@ 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=True):
             with gr.Column(scale=2):
                 with gr.Group():
                     gr.Markdown("### 🗂️ ارفع ملفات السيناريو")
                     api_rgb_image_path = gr.Image(type="filepath", label="صورة الكاميرا الأمامية (RGB)")
-                    # api_rgb_image_path = gr.Image(type="filepath", label="صورة الكاميرا الأمامية (RGB)",height=500)
                     api_measurements_path = gr.File(label="ملف القياسات (JSON)", type="filepath")
                     api_run_button = gr.Button("🚀 أرسل البيانات للمعالجة", variant="primary")
 
-                gr.Markdown("")
             with gr.Column(scale=3):
                 with gr.Group():
                     gr.Markdown("### 📊 النتائج من الخادم")
-                    api_output_image = gr.Image(label="لوحة التحكم المرئية (من الـ API)", type="pil", interactive=False,height=600)
+                    api_output_image = gr.Image(label="لوحة التحكم المرئية (من الـ API)", type="pil", interactive=False, height=600)
                     api_control_json = gr.JSON(label="أوامر التحكم (من الـ API)")
+        
         with gr.Row():
             with gr.Group():            
-                gr.Markdown("## ✨ أمثلة جاهزة")
+                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, "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="السرعة (m/s)")
                         example_theta = gr.Textbox(label="الاتجاه (Theta)")
                         example_pos = gr.Textbox(label="الموقع العام")
                         example_target = gr.Textbox(label="النقطة المستهدفة")
+
+                    # --- إضافة 'elem_classes' هنا ---
                     gr.Examples(
                         examples=[
                             [
@@ -194,13 +226,11 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), cs
                             example_target
                         ],
                         label="اختر سيناريو اختبار",
-                        # تم حذف elem_classes من هنا
+                        elem_classes="examples-table"
                     )
                 else:
                     gr.Markdown("لم يتم العثور على مجلد الأمثلة (`examples`) أو محتوياته.")
 
-
-
     # --- ربط منطق الواجهة ---
     start_session_button.click(
         fn=start_new_session,