Update app.py

app.py

@@ -1,125 +1,190 @@
 import gradio as gr
-import json
-import os
 from defrag_engine import DefragDeepCompute
+import datetime
 
-# Initialize Engine
+# --- INITIALIZATION ---
 engine = DefragDeepCompute()
 
-# --- THE LOGIC ---
-def process_defrag(name, dob, time, city, user_input):
-    # 1. Package Birth Data correctly for the new Engine API
-    birth_data = {
-        "name": name,
-        "dob": dob,  # Format: YYYY-MM-DD
-        "year": int(dob.split('-')[0]),
-        "month": int(dob.split('-')[1]),
-        "day": int(dob.split('-')[2]),
-        "hour": int(time.split(':')[0]),
-        "minute": int(time.split(':')[1]),
-        "city": city,
-        "nation": "US" # Defaulting for prototype
+# --- THE TRANSLATION LAYER (Logic) ---
+def run_alignment(user_input, name="User", dob="1990-01-01", time="12:00", city="Los Angeles"):
+    # 1. Background Compute (Deep Engine)
+    # Note: In a full production app, these hardcoded values come from the user's saved profile.
+    birth_data = { 
+        "name": name, 
+        "date": dob, 
+        "time": time, 
+        "city": city, 
+        "country_code": "US" 
     }
     
-    # 2. Run the Deep Compute Engine
-    # FIXED: Calling the correct method 'execute_defrag' with dictionary
+    # Execute the Core Physics Engine
     soul_log = engine.execute_defrag(birth_data, user_input)
+    vector = soul_log['computed_vector']
     
-    # 3. Extract Data for Visuals
-    numerology = soul_log.get('numerology', {})
-    astrology = soul_log.get('astrology', {})
-    iching = soul_log.get('iching', {})
-    stability = soul_log.get('stability_score', 75)
+    # 2. The "Premium" UI Translation
+    # We convert raw data (Friction/Elements) into consumer-facing "Context"
     
-    # 4. Generate "System Admin" Response
-    life_path = numerology.get('life_path', 0)
-    personal_day = numerology.get('personal_day', 0)
-    sun_sign = astrology.get('sun_sign', 'Unknown')
-    hexagram_lines = iching.get('hexagram_lines', [])
+    friction = vector['friction_level']
+    p_day = soul_log['hardware']['numerology']['personal_day']
+    element = soul_log['weather']['astro']['dominant_element'].title()
     
-    system_status = f"SYSTEM STATUS: Stability {stability}%"
-    
-    mechanics_text = f"""    > LOG_ID: {soul_log.get('timestamp', 'N/A')}
-    > ASTRO_WEATHER: {sun_sign} Sun
-    > NUMEROLOGY: Life Path {life_path}, Personal Day {personal_day}
-    > HEXAGRAM: {len(hexagram_lines)} lines cast
-    
-    ANALYSIS:
-    User is operating at {stability}% system stability.
-    Mechanical patterns detected in {user_input or 'normal'} mode.
+    if friction == "CRITICAL":
+        status_header = "⚠️ HIGH INTERFERENCE"
+        status_color = "#FF5F00" # Safety Orange
+        context_msg = f"We have detected a **Resistance Pattern** in your immediate field. You are navigating a **High-Velocity Cycle (Day {p_day})** that is currently opposing the environmental flow."
+        directive = "DIRECTIVE: PAUSE. Do not initiate action. Allow the signal to clear."
+    else:
+        status_header = "✓ SIGNAL CLEAR"
+        status_color = "#00F0FF" # Electric Cyan
+        context_msg = f"Your internal rhythm is coherent with the environment. You are currently supported by **{element} Energy**, providing a stable foundation for action."
+        directive = "DIRECTIVE: PROCEED WITH INTENT."
+
+    # 3. Construct the "Insight Card" (Markdown)
+    insight_html = f"""
+    <div style="background: #111; border: 1px solid #333; border-radius: 16px; padding: 24px; margin-top: 20px; animation: fadeIn 1s ease;">
+        <h2 style="color: {status_color}; margin: 0 0 10px 0; font-size: 18px; letter-spacing: 1px; text-transform: uppercase;">{status_header}</h2>
+        <p style="color: #CCC; font-size: 15px; line-height: 1.5; margin-bottom: 20px;">{context_msg}</p>
+        <div style="border-top: 1px solid #333; padding-top: 15px;">
+            <strong style="color: #FFF; font-size: 14px; letter-spacing: 0.5px;">{directive}</strong>
+        </div>
+    </div>
     """
     
-    vector_text = f"VECTOR: Maintain {sun_sign} balance. Life Path {life_path} optimization active."
-    
-    # 5. Return: Visual Data (for JS), Status, Mechanics, Vector
-    # We pass the JS update arguments as a list
+    # 4. Visual Parameters for the Mandala (passed to JS)
     visual_args = [
-        hexagram_lines[:6] if hexagram_lines else ["Yang", "Yin", "Yang", "Yin", "Yang", "Yin"],  # Hexagram Array
-        personal_day or 1,       # Petal Count
-        sun_sign or "Fire",    # Element Color
-        stability / 100.0 # Stability (0-1)
+        vector['visual_code'],       # Hexagram Rings
+        vector['visual_seed'],       # Numerology Petals
+        vector['visual_element'],    # Element Color
+        0.3 if friction == "CRITICAL" else 1.0 # Stability Score
     ]
     
-    return visual_args, system_status, mechanics_text, vector_text
+    return visual_args, insight_html
 
-# --- THE INTERFACE ---
-with gr.Blocks(theme=gr.themes.Monochrome(), title="DEFRAG // OMNI-NODE") as demo:
-    
-    # HEADER
-    gr.Markdown("# DEFRAG // OMNI-NODE")
-    gr.Markdown("> DETERMINISTIC CONSCIOUSNESS ENGINE v1.0")
+# --- THE PREMIUM VISUAL LAYER (CSS) ---
+premium_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
+
+body, .gradio-container { 
+    background-color: #000000 !important; 
+    color: #F0F0F0 !important; 
+    font-family: 'Inter', sans-serif !important; 
+}
+
+/* Mobile-First App Container */
+.gradio-container { 
+    max-width: 420px !important; 
+    margin: 0 auto !important; 
+    padding: 20px !important;
+}
+
+/* The Monitor (Mandala) */
+#monitor-frame {
+    width: 280px;
+    height: 280px;
+    margin: 20px auto;
+    border-radius: 50%;
+    border: 1px solid #222;
+    box-shadow: 0 0 40px rgba(0, 240, 255, 0.05); /* Subtle Cyan Glow */
+    overflow: hidden;
+    background: #000;
+    transition: all 0.5s ease;
+}
+
+/* Input Field - Stealth Mode */
+.stealth-input textarea {
+    background: #111 !important;
+    border: 1px solid #222 !important;
+    color: #FFF !important;
+    font-size: 16px !important;
+    padding: 16px !important;
+    border-radius: 12px !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.stealth-input textarea::placeholder { color: #555 !important; }
+
+/* The Action Button */
+.align-btn {
+    background: #FFFFFF !important;
+    color: #000000 !important;
+    border: none !important;
+    border-radius: 30px !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    letter-spacing: 2px !important;
+    height: 50px !important;
+    margin-top: 15px !important;
+    transition: transform 0.2s ease !important;
+}
+.align-btn:hover {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
+    transform: scale(1.02);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+"""
+
+# --- THE APPLICATION BLOCKS ---
+with gr.Blocks(theme=gr.themes.Base(), css=premium_css, title="DEFRAG") as demo:
     
-    with gr.Row():
-        # LEFT COLUMN: INPUTS
-        with gr.Column(scale=1):
-            gr.Markdown("### // SYSTEM PROFILE")
-            with gr.Row():
-                name_in = gr.Textbox(label="User ID", value="User_01")
-                dob_in = gr.Textbox(label="DOB (YYYY-MM-DD)", value="1990-01-01")
-            with gr.Row():
-                time_in = gr.Textbox(label="Time (HH:MM)", value="12:00")
-                city_in = gr.Textbox(label="Location", value="Los Angeles")
-            
-            gr.Markdown("### // DIAGNOSTIC INPUT")
-            input_text = gr.Textbox(label="Input System Status", placeholder="Describe the interference...", lines=4)
-            
-            btn_scan = gr.Button("EXECUTE DEFRAG", variant="primary")
-            
-        # RIGHT COLUMN: VISUALS & OUTPUT
-        with gr.Column(scale=1):
-            # HTML COMPONENT FOR MANDALA
-            # We load the file content directly
-            with open("mandala_component.html", "r") as f:
-                html_code = f.read()
-            
-            mandala_display = gr.HTML(value=html_code)
-            
-            # JS Bridge to update the canvas
-            js_bridge = """
-            (args) => {
-                if (window.hexa) {
-                    window.hexa.updateParams(args[0], args[1], args[2], args[3]);
-                }
-                return args;
-            }
-            """
-            
-            # OUTPUT MONITORS
-            status_out = gr.Textbox(label="SYSTEM STATUS", interactive=False)
-            mech_out = gr.TextArea(label="MECHANICS LOG", interactive=False)
-            vector_out = gr.Textbox(label="VECTOR DIRECTIVE", interactive=False)
+    # 1. HIDDEN STATE (Profile Data)
+    # In a real app, this is persistent. Here we hardcode for the prototype.
+    with gr.Row(visible=False):
+        name_in = gr.Textbox(value="User")
+        dob_in = gr.Textbox(value="1990-01-01")
+        time_in = gr.Textbox(value="12:00")
+        city_in = gr.Textbox(value="Los Angeles")
+
+    # 2. THE INTERFACE
+    with gr.Column():
+        
+        # A. THE MONITOR
+        # Loads the HexaMandala HTML and frames it
+        with open("mandala_component.html", "r") as f:
+            html_content = f.read().replace("500px", "100%") # Ensure fit
             
-            # Hidden component to pass data to JS
-            visual_data = gr.JSON(visible=False)
+        gr.HTML(f"<div id='monitor-frame'>{html_content}</div>")
+        
+        # B. THE INPUT
+        user_input = gr.Textbox(
+            placeholder="Type your state...", 
+            show_label=False, 
+            lines=2, 
+            elem_classes="stealth-input"
+        )
+        
+        # C. THE TRIGGER
+        btn_align = gr.Button("ALIGN", elem_classes="align-btn")
+        
+        # D. THE INSIGHT CARD (Output)
+        output_card = gr.HTML(label=None)
 
-    # WIRING
-    btn_scan.click(
-        fn=process_defrag,
-        inputs=[name_in, dob_in, time_in, city_in, input_text],
-        outputs=[visual_data, status_out, mech_out, vector_out]
+    # 3. WIRING & DATA BRIDGE
+    # Hidden JSON component to pass data to JavaScript
+    visual_data = gr.JSON(visible=False)
+    
+    # JavaScript Bridge: Listens for changes in 'visual_data' and updates the canvas
+    js_bridge = """
+    (args) => {
+        if (window.hexa) {
+            window.hexa.updateParams(args[0], args[1], args[2], args[3]);
+        }
+        return args;
+    }
+    """
+    
+    # Event Listener
+    btn_align.click(
+        fn=run_alignment,
+        inputs=[user_input, name_in, dob_in, time_in, city_in],
+        outputs=[visual_data, output_card]
     )
     
-    # Trigger JS update when visual_data changes
+    # Trigger JS when data returns
     visual_data.change(None, [visual_data], None, js=js_bridge)
 
 if __name__ == "__main__":