Update app.py

app.py

@@ -1,190 +1,145 @@
 import gradio as gr
 from defrag_engine import DefragDeepCompute
-import datetime
+import os
+from elevenlabs.client import ElevenLabs
 
-# --- INITIALIZATION ---
+# --- CONFIGURATION ---
+# IMPORTANT: Add ELEVENLABS_API_KEY to your Space's 'Settings > Secrets'
+ELEVEN_KEY = os.getenv("ELEVENLABS_API_KEY")
+client = ElevenLabs(api_key=ELEVEN_KEY) if ELEVEN_KEY else None
+
+# Initialize Defrag Engine
 engine = DefragDeepCompute()
 
-# --- 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" 
-    }
+# --- AUDIO ENGINE ---
+def generate_audio(text):
+    """Generates audio via ElevenLabs and returns the file path."""
+    if not ELEVEN_KEY or not client:
+        return None # Silent mode if no key
     
-    # Execute the Core Physics Engine
-    soul_log = engine.execute_defrag(birth_data, user_input)
-    vector = soul_log['computed_vector']
+    try:
+        # Using a default calm voice (e.g., 'Rachel' or similar stable voice)
+        # You can swap this ID for a specific custom voice
+        audio_stream = client.generate(
+            text=text,
+            voice="Rachel", 
+            model="eleven_monolingual_v1"
+        )
+        # Save to temp file for Gradio
+        save_path = "response.mp3"
+        with open(save_path, "wb") as f:
+            for chunk in audio_stream:
+                if chunk:
+                    f.write(chunk)
+        return save_path
+    except Exception as e:
+        print(f"Audio Error: {e}")
+        return None
+
+# --- CHAT LOGIC ---
+def chat_interaction(user_message, history):
+    """
+    1. Run Deep Compute on user input.
+    2. Generate System Admin response.
+    3. Update Visuals.
+    4. Generate Audio.
+    """
+    # Hardcoded profile for prototype (In prod, fetch from session)
+    birth_data = { "name": "User", "date": "1990-01-01", "time": "12:00", "city": "Los Angeles", "country_code": "US" }
     
-    # 2. The "Premium" UI Translation
-    # We convert raw data (Friction/Elements) into consumer-facing "Context"
+    # 1. RUN DEEP COMPUTE
+    soul_log = engine.execute_defrag(birth_data, user_message)
+    vector = soul_log['computed_vector']
     
+    # 2. CONSTRUCT RESPONSE (The Translation Layer)
     friction = vector['friction_level']
     p_day = soul_log['hardware']['numerology']['personal_day']
     element = soul_log['weather']['astro']['dominant_element'].title()
     
     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."
+        prefix = "⚠️ HIGH INTERFERENCE DETECTED."
+        body = f"You are navigating a Resistance Pattern on Personal Day {p_day}. The {element} energy in your chart is currently blocked."
+        directive = "DIRECTIVE: Pause. Do not initiate. 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>
-    """
+        prefix = "✓ SIGNAL CLEAR."
+        body = f"Your internal rhythm is aligned. Supported by {element} Energy."
+        directive = "DIRECTIVE: Proceed with intent."
+    
+    bot_response = f"{prefix}\n\n{body}\n\n**{directive}**"
+    
+    # 3. GENERATE AUDIO
+    # We speak only the body and directive, not the technical prefix
+    audio_path = generate_audio(f"{body}. {directive}")
     
-    # 4. Visual Parameters for the Mandala (passed to JS)
+    # 4. PREPARE VISUAL DATA
+    # [HexCode, Petals, Element, Stability, IsSpeaking]
     visual_args = [
-        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
+        vector['visual_code'],
+        vector['visual_seed'],
+        vector['visual_element'],
+        0.3 if friction == "CRITICAL" else 1.0,
+        True # Trigger "Speaking" pulse in mandala
     ]
     
-    return visual_args, insight_html
-
-# --- 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;
-}
+    return bot_response, audio_path, visual_args
 
-/* 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 UI ---
+css = """
+body { background-color: #000000; color: #F0F0F0; font-family: 'Helvetica Neue', sans-serif; }
+.gradio-container { max-width: 450px !important; margin: 0 auto !important; padding: 0 !important; }
+#monitor-frame { width: 100%; height: 320px; border-bottom: 1px solid #333; }
+.chat-window { height: 400px !important; overflow-y: scroll; }
+footer { display: none !important; }
 """
 
-# --- THE APPLICATION BLOCKS ---
-with gr.Blocks(theme=gr.themes.Base(), css=premium_css, title="DEFRAG") as demo:
+with gr.Blocks(theme=gr.themes.Base(), css=css, title="DEFRAG NODE") as demo:
+    
+    # 1. VISUAL LAYER (Top)
+    with open("mandala_component.html", "r") as f:
+        html_content = f.read()
+    
+    # Container for the mandala
+    mandala_view = gr.HTML(html_content, elem_id="monitor-frame")
     
-    # 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. AUDIO LAYER (Hidden Player - Autoplay via JS if possible, or manual click)
+    audio_player = gr.Audio(label="System Voice", visible=True, interactive=False)
 
-    # 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
-            
-        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"
-        )
+    # 3. CHAT LAYER (Bottom)
+    chatbot = gr.Chatbot(label="DEFRAG // LOG", type="messages", elem_classes="chat-window")
+    msg = gr.Textbox(placeholder="Input System Status...", show_label=False)
+    
+    # Hidden Data Bridge
+    visual_data = gr.JSON(visible=False)
+    
+    # --- EVENT WIRING ---
+    
+    def respond(message, chat_history):
+        # Run logic
+        bot_msg, audio, viz_data = chat_interaction(message, chat_history)
         
-        # C. THE TRIGGER
-        btn_align = gr.Button("ALIGN", elem_classes="align-btn")
+        # Update history
+        chat_history.append({"role": "user", "content": message})
+        chat_history.append({"role": "assistant", "content": bot_msg})
         
-        # D. THE INSIGHT CARD (Output)
-        output_card = gr.HTML(label=None)
+        return "", chat_history, audio, viz_data
 
-    # 3. WIRING & DATA BRIDGE
-    # Hidden JSON component to pass data to JavaScript
-    visual_data = gr.JSON(visible=False)
+    msg.submit(respond, [msg, chatbot], [msg, chatbot, audio_player, visual_data])
     
-    # JavaScript Bridge: Listens for changes in 'visual_data' and updates the canvas
+    # JS Bridge to update Canvas
     js_bridge = """
     (args) => {
         if (window.hexa) {
-            window.hexa.updateParams(args[0], args[1], args[2], args[3]);
+            // args = [hex, petals, elem, stability, speaking]
+            window.hexa.updateParams(args[0], args[1], args[2], args[3], args[4]);
+            
+            // Stop speaking pulse after 5 seconds
+            setTimeout(() => {
+                 window.hexa.updateParams(args[0], args[1], args[2], args[3], false);
+            }, 5000);
         }
         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 when data returns
     visual_data.change(None, [visual_data], None, js=js_bridge)
 
 if __name__ == "__main__":