Update app.py

app.py

@@ -329,7 +329,7 @@ def launch_mission(role, context, launch_command, state):
             {"role": "assistant", "content": orbit_response}
         ]
         
-        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f})"
+        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f}%)"
         
         return orbit_response, state, orbit_system.orbit_state, orbit_system.fuel, fuel_status
     
@@ -422,7 +422,7 @@ def launch_mission(role, context, launch_command, state):
             "hallucination_score": quality_assessment["hallucination_score"]
         })
         
-        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f})"
+        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f}%)"
         
         return formatted_response, state, orbit_system.orbit_state, orbit_system.fuel, fuel_status
         
@@ -474,7 +474,7 @@ def course_correction(correction, state):
         state["trajectory"].append({"role": "user", "content": correction})
         state["trajectory"].append({"role": "assistant", "content": demo_response})
         
-        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f})"
+        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f}%)"
         
         return demo_response, state, orbit_system.orbit_state, orbit_system.fuel, fuel_status
     
@@ -524,7 +524,7 @@ def course_correction(correction, state):
         
         state["trajectory"].append({"role": "assistant", "content": orbit_response})
         
-        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f})"
+        fuel_status = f"⛽ {orbit_system.fuel:.1f}% متبقي (استهلك: {fuel_cost:.1f}%)"
         
         return formatted_response, state, orbit_system.orbit_state, orbit_system.fuel, fuel_status
         
@@ -550,6 +550,51 @@ def get_api_status():
     else:
         return "🟡 الوضع التجريبي (أضف API Key)"
 
+# ==============================
+# تحديث مقياس الوقود
+# ==============================
+def update_fuel_gauge(fuel_level):
+    """تحديث مقياس الوقود بشكل صحيح"""
+    fuel_percent = max(0, min(100, fuel_level))
+    
+    # تحديد اللون بناءً على النسبة
+    if fuel_percent > 70:
+        gradient = "linear-gradient(90deg, #4CAF50, #8BC34A)"
+        emoji = "🟢"
+        status = "ممتاز"
+    elif fuel_percent > 30:
+        gradient = "linear-gradient(90deg, #FF9800, #FFB74D)"
+        emoji = "🟡"
+        status = "متوسط"
+    else:
+        gradient = "linear-gradient(90deg, #F44336, #EF5350)"
+        emoji = "🔴"
+        status = "منخفض"
+    
+    return f"""
+    <div style="margin: 15px 0;">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
+            <span style="color: #cfd6b5; font-weight: bold;">{emoji} حالة الوقود: {status}</span>
+            <span style="color: #cfd6b5; font-weight: bold;">{fuel_percent:.1f}%</span>
+        </div>
+        
+        <div style="width: 100%; height: 25px; background: rgba(40, 40, 40, 0.5); border-radius: 15px; overflow: hidden; position: relative;">
+            <div class="fuel-fill" style="width: {fuel_percent}%; height: 100%; background: {gradient}; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);"></div>
+            
+            <!-- علامات النسبة -->
+            <div style="position: absolute; left: 30%; top: 0; height: 100%; width: 2px; background: rgba(255,255,255,0.2);"></div>
+            <div style="position: absolute; left: 70%; top: 0; height: 100%; width: 2px; background: rgba(255,255,255,0.2);"></div>
+        </div>
+        
+        <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.8em; color: #aaa;">
+            <span>0%</span>
+            <span>30%</span>
+            <span>70%</span>
+            <span>100%</span>
+        </div>
+    </div>
+    """
+
 # ==============================
 # CSS فضائي محسن
 # ==============================
@@ -683,12 +728,40 @@ button:hover {
     backdrop-filter: blur(10px);
 }
 
-.fuel-gauge {
-    background: linear-gradient(90deg, #4CAF50, #FF9800, #F44336);
-    height: 20px;
-    border-radius: 10px;
-    margin: 10px 0;
-    transition: width 0.5s ease;
+.fuel-fill {
+    position: relative;
+    overflow: hidden;
+}
+
+.fuel-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 50%,
+        transparent 100%
+    );
+    animation: fuelShine 3s infinite;
+}
+
+@keyframes fuelShine {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.fuel-warning {
+    animation: fuelPulse 2s infinite;
+}
+
+@keyframes fuelPulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
 }
 
 .api-status {
@@ -747,7 +820,7 @@ button:hover {
 
 .state-launch { background: rgba(255, 152, 0, 0.2); color: #ffcc80; }
 .state-orbit { background: rgba(76, 175, 80, 0.2); color: #c8e6c9; }
--state-warning { background: rgba(255, 193, 7, 0.2); color: #fff59d; }
+.state-warning { background: rgba(255, 193, 7, 0.2); color: #fff59d; }
 .state-blackhole { 
     background: linear-gradient(135deg, #4a1a1a, #8b0000);
     color: #ffcccc;
@@ -757,6 +830,60 @@ button:hover {
     background: linear-gradient(135deg, #1a5276, #3498db);
     color: #d6eaf8;
 }
+
+.response-box {
+    background: linear-gradient(135deg, rgba(20, 25, 20, 0.9), rgba(10, 15, 10, 0.95));
+    border-left: 4px solid #7a8450;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 10px 0;
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.rocket-launch {
+    position: relative;
+    overflow: hidden;
+}
+
+.rocket-launch::after {
+    content: "🚀";
+    position: absolute;
+    right: -50px;
+    animation: rocketFly 2s ease-out;
+}
+
+@keyframes rocketFly {
+    0% { transform: translateX(0) translateY(0); opacity: 1; }
+    100% { transform: translateX(-100vw) translateY(-100vh); opacity: 0; }
+}
+
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px;
+    }
+    
+    h1 {
+        font-size: 1.5em;
+    }
+    
+    button {
+        padding: 15px !important;
+        font-size: 1.1em;
+    }
+    
+    textarea {
+        font-size: 16px;
+    }
+    
+    .planet-1, .planet-2 {
+        display: none;
+    }
+}
 """
 
 # ==============================
@@ -840,19 +967,12 @@ with gr.Blocks(css=css, title="🛰️ مدار الذكاء الاصطناعي
                     
                     fuel_display = gr.Textbox(
                         label="⛽ مستوى الوقود",
-                        value="100%",
+                        value="⛽ 100% (ممتلئ)",
                         interactive=False
                     )
                 
                 # مقياس الوقود الديناميكي
-                fuel_html = gr.HTML("""
-                <div class="fuel-gauge" style="width: 100%;"></div>
-                <div style="text-align: center; color: #cfd6b5; margin-top: 5px;">
-                    <span>🟢 ممتاز (70-100%)</span> | 
-                    <span>🟡 متوسط (30-70%)</span> | 
-                    <span>🔴 منخفض (0-30%)</span>
-                </div>
-                """)
+                fuel_html = gr.HTML(update_fuel_gauge(100))
             
             # عرض المدار
             orbit_display = gr.Markdown(
@@ -900,48 +1020,35 @@ with gr.Blocks(css=css, title="🛰️ مدار الذكاء الاصطناعي
 
     # حالة النظام
     state = gr.State({})
-    
-    # وظيفة لتحديث مقياس الوقود
-    def update_fuel_gauge(fuel_level):
-        fuel_percent = max(0, min(100, fuel_level))
-        color = "#4CAF50" if fuel_percent > 70 else "#FF9800" if fuel_percent > 30 else "#F44336"
-        
-        return f"""
-        <div class="fuel-gauge" style="width: {fuel_percent}%; background: linear-gradient(90deg, {color}, {color});"></div>
-        <div style="text-align: center; color: #cfd6b5; margin-top: 5px;">
-            <span>🟢 ممتاز (70-100%)</span> | 
-            <span>🟡 متوسط (30-70%)</span> | 
-            <span>🔴 منخفض (0-30%)</span>
-        </div>
-        """
+    current_fuel = gr.State(100)  # متغير لحفظ الوقود الحالي
     
     # ربط الأحداث
     launch_btn.click(
         launch_mission,
         inputs=[role, context, launch_command, state],
-        outputs=[orbit_display, state, orbit_status, gr.Number(visible=False), fuel_display]
+        outputs=[orbit_display, state, orbit_status, current_fuel, fuel_display]
     ).then(
-        lambda fuel: (f"⛽ {fuel:.1f}%", update_fuel_gauge(fuel)),
-        inputs=[gr.Number(visible=False)],
-        outputs=[fuel_display, fuel_html]
+        lambda fuel: update_fuel_gauge(fuel),
+        inputs=[current_fuel],
+        outputs=[fuel_html]
     )
     
     refine_btn.click(
         course_correction,
         inputs=[correction, state],
-        outputs=[orbit_display, state, orbit_status, gr.Number(visible=False), fuel_display]
+        outputs=[orbit_display, state, orbit_status, current_fuel, fuel_display]
     ).then(
-        lambda fuel: (f"⛽ {fuel:.1f}%", update_fuel_gauge(fuel)),
-        inputs=[gr.Number(visible=False)],
-        outputs=[fuel_display, fuel_html]
+        lambda fuel: update_fuel_gauge(fuel),
+        inputs=[current_fuel],
+        outputs=[fuel_html]
     )
     
     reset_btn.click(
-        reset_system,
-        outputs=[orbit_display, state, orbit_status, gr.Number(visible=False), fuel_display]
+        lambda: (reset_system(), 100),
+        outputs=[orbit_display, state, orbit_status, current_fuel, fuel_display]
     ).then(
-        lambda: ("🚀 على منصة الإطلاق", "⛽ 100%", update_fuel_gauge(100)),
-        outputs=[orbit_status, fuel_display, fuel_html]
+        lambda: (update_fuel_gauge(100), "⛽ 100% (ممتلئ)"),
+        outputs=[fuel_html, fuel_display]
     )
 
 # ==============================