from dotenv import load_dotenv
load_dotenv()
 
import os
import gradio as gr
 
from brain_of_the_doctor import encode_image, analyze_image_with_query
from voice_of_the_patient import transcribe_with_groq
from voice_of_the_doctor import text_to_speech_with_gtts, text_to_speech_with_elevenlabs
 
system_prompt = """You have to act as a professional doctor, i know you are not but this is for learning purpose. 
            What's in this image?. Do you find anything wrong with it medically? 
            If you make a differential, suggest some remedies for them. Donot add any numbers or special characters in 
            your response. Your response should be in one long paragraph. Also always answer as if you are answering to a real person.
            Donot say 'In the image I see' but say 'With what I see, I think you have ....'
            Dont respond as an AI model in markdown, your answer should mimic that of an actual doctor not an AI bot, 
            Keep your answer concise (max 2 sentences). No preamble, start your answer right away please"""
 
 
def process_inputs(audio_filepath, image_filepath):
    speech_to_text_output = ""
    if audio_filepath:
        try:
            speech_to_text_output = transcribe_with_groq(
                GROQ_API_KEY=os.environ.get("GROQ_API_KEY"),
                audio_filepath=audio_filepath,
                stt_model="whisper-large-v3"
            )
        except Exception as e:
            speech_to_text_output = f"Error transcribing audio: {str(e)}"
 
    if image_filepath:
        try:
            doctor_response = analyze_image_with_query(
                query=system_prompt + " " + speech_to_text_output,
                encoded_image=encode_image(image_filepath),
                model="meta-llama/llama-4-scout-17b-16e-instruct"
            )
        except Exception as e:
            doctor_response = f"Error analyzing image: {str(e)}"
    else:
        doctor_response = "No image provided for me to analyze."
 
    output_filepath = "final.mp3"
    try:
        elevenlabs_key = os.environ.get("ELEVENLABS_API_KEY")
        if elevenlabs_key:
            text_to_speech_with_elevenlabs(input_text=doctor_response, output_filepath=output_filepath)
        else:
            text_to_speech_with_gtts(input_text=doctor_response, output_filepath=output_filepath)
    except Exception as e:
        print(f"ElevenLabs TTS failed, falling back to gTTS: {e}")
        try:
            text_to_speech_with_gtts(input_text=doctor_response, output_filepath=output_filepath)
        except Exception as e2:
            print(f"gTTS also failed: {e2}")
            output_filepath = None
 
    return speech_to_text_output, doctor_response, output_filepath
 
 

# white/grey backgrounds from every Gradio wrapper div.
# ─────────────────────────────────────────────────────────────────────────────
ANIMATED_BG = """
<style>
  /* ── Step 1: force dark navy on root elements ── */
  html, body {
    background-color: #07111e !important;
    background: #07111e !important;
    margin: 0; padding: 0;
  }
 
  /* ── Step 2: make every Gradio shell transparent ── */
  gradio-app,
  gradio-app > div,
  .gradio-container,
  .gradio-container > div,
  .main, .contain, .app,
  #component-0, .tabs, .tabitem,
  .form, .wrap, .gap, .svelte-1gfkn6j {
    background: transparent !important;
    background-color: transparent !important;
  }
 
  /* ── Step 3: pin canvas behind everything ── */
  #med-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
  }
 
  /* ── Step 4: lift Gradio content above canvas ── */
  gradio-app {
    position: relative;
    z-index: 1;
  }
</style>
 
<canvas id="med-canvas"></canvas>
 
<script>
(function () {
  const canvas = document.getElementById('med-canvas');
  const ctx    = canvas.getContext('2d');
 
  function resize() {
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener('resize', resize);
 
  /* ---------- Background gradient ---------- */
  function drawBg() {
    const g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    g.addColorStop(0,    '#07111e');
    g.addColorStop(0.5,  '#0c2040');
    g.addColorStop(1,    '#061520');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
 
  /* ---------- Neural network ---------- */
  const nodes = Array.from({ length: 44 }, () => ({
    x:  Math.random() * window.innerWidth,
    y:  Math.random() * window.innerHeight,
    vx: (Math.random() - 0.5) * 0.28,
    vy: (Math.random() - 0.5) * 0.28,
    r:  1.6 + Math.random() * 2.4,
    t:  Math.random() * Math.PI * 2,
  }));
 
  function stepNodes() {
    nodes.forEach(n => {
      n.x += n.vx; n.y += n.vy; n.t += 0.015;
      if (n.x < 0 || n.x > canvas.width)  n.vx *= -1;
      if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
    });
  }
 
  function drawNetwork() {
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        const dx = nodes[i].x - nodes[j].x;
        const dy = nodes[i].y - nodes[j].y;
        const d  = Math.hypot(dx, dy);
        if (d < 155) {
          ctx.beginPath();
          ctx.moveTo(nodes[i].x, nodes[i].y);
          ctx.lineTo(nodes[j].x, nodes[j].y);
          ctx.strokeStyle = `rgba(65,160,205,${0.10 * (1 - d / 155)})`;
          ctx.lineWidth   = 0.7;
          ctx.stroke();
        }
      }
    }
    nodes.forEach(n => {
      const a = 0.38 + 0.24 * Math.sin(n.t);
      ctx.beginPath();
      ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(88,182,222,${a})`;
      ctx.fill();
    });
  }
 
  /* ---------- Floating medical crosses ---------- */
  const crosses = Array.from({ length: 9 }, () => ({
    x:     Math.random() * window.innerWidth,
    y:     Math.random() * window.innerHeight,
    size:  10 + Math.random() * 18,
    vy:    0.14 + Math.random() * 0.18,
    alpha: 0.07 + Math.random() * 0.10,
    angle: Math.random() * Math.PI * 2,
    da:    (Math.random() - 0.5) * 0.003,
  }));
 
  function drawCrosses() {
    crosses.forEach(c => {
      c.y -= c.vy; c.angle += c.da;
      if (c.y + c.size < 0) {
        c.y = canvas.height + c.size;
        c.x = Math.random() * canvas.width;
      }
      ctx.save();
      ctx.translate(c.x, c.y);
      ctx.rotate(c.angle);
      ctx.strokeStyle = `rgba(100,188,226,${c.alpha})`;
      ctx.lineWidth   = c.size * 0.20;
      ctx.lineCap     = 'round';
      ctx.beginPath(); ctx.moveTo(-c.size/2, 0); ctx.lineTo(c.size/2, 0); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(0, -c.size/2); ctx.lineTo(0, c.size/2); ctx.stroke();
      ctx.restore();
    });
  }
 
  /* ---------- DNA helices ---------- */
  let dnaT = 0;
  function drawDNA(cx) {
    const amp = 26, steps = 22;
    for (let i = 0; i < steps; i++) {
      const y  = (i / steps) * canvas.height;
      const ph = dnaT + i * 0.52;
      const x1 = cx + amp * Math.sin(ph);
      const x2 = cx - amp * Math.sin(ph);
      ctx.beginPath(); ctx.arc(x1, y, 2.1, 0, Math.PI*2);
      ctx.fillStyle = 'rgba(82,178,218,0.26)'; ctx.fill();
      ctx.beginPath(); ctx.arc(x2, y, 2.1, 0, Math.PI*2);
      ctx.fillStyle = 'rgba(82,178,218,0.26)'; ctx.fill();
      if (i % 2 === 0) {
        ctx.beginPath(); ctx.moveTo(x1, y); ctx.lineTo(x2, y);
        ctx.strokeStyle = 'rgba(82,178,218,0.11)'; ctx.lineWidth = 1; ctx.stroke();
      }
    }
    dnaT += 0.009;
  }
 
  /* ---------- ECG heartbeat line ---------- */
  let ecgOff = 0;
  function ecgY(x) {
    const t    = (x + ecgOff) * 0.040;
    const base = Math.sin(t * 0.60) * 5;
    const mod  = x % 128;
    const spike = mod < 8 ? (mod < 4 ? mod * 7 : (8 - mod) * 7) - 4 : 0;
    return base + spike * 2.8;
  }
  function drawECG() {
    ecgOff += 1.0;
    const y0 = canvas.height * 0.91;
    ctx.beginPath();
    for (let x = 0; x <= canvas.width; x++) {
      const y = y0 + ecgY(x);
      x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
    }
    ctx.strokeStyle = 'rgba(100,196,232,0.26)';
    ctx.lineWidth   = 1.4;
    ctx.stroke();
  }
 
  /* ---------- Expanding pulse rings ---------- */
  const rings = [0, 0.33, 0.66].map(p => ({ p }));
  function drawRings() {
    const cx = canvas.width * 0.5, cy = canvas.height * 0.44;
    rings.forEach(r => {
      r.p = (r.p + 0.0033) % 1;
      ctx.beginPath();
      ctx.arc(cx, cy, 70 + 265 * r.p, 0, Math.PI * 2);
      ctx.strokeStyle = `rgba(92,188,226,${0.046 * (1 - r.p)})`;
      ctx.lineWidth   = 1.1;
      ctx.stroke();
    });
  }
 
  /* ---------- Main loop ---------- */
  function loop() {
    drawBg();
    drawRings();
    drawDNA(46);
    drawDNA(canvas.width - 46);
    stepNodes();
    drawNetwork();
    drawCrosses();
    drawECG();
    requestAnimationFrame(loop);
  }
 
  // Small delay lets Gradio finish mounting before we start
  setTimeout(loop, 150);
})();
</script>
"""
 
# ── CSS ───────────────────────────────────────────────────────────────────────
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Exo+2:wght@300;400;500;600&display=swap');
 
:root {
  --panel-bg:    rgba(8, 26, 52, 0.74);
  --border-soft: rgba(90, 180, 220, 0.22);
  --text-main:   #ddf0fa;
  --text-muted:  #7ab8d4;
}
 
/* Ensure dark base at CSS level too */
html { background: #07111e !important; }
body { background: #07111e !important; }
 
gradio-app, gradio-app > div,
.gradio-container, .gradio-container > div,
.main, .contain, .app, #component-0,
.tabs, .tabitem, .form, .wrap, .gap {
  background: transparent !important;
  background-color: transparent !important;
}
 
body, gradio-app {
  font-family: 'Exo 2', sans-serif !important;
  color: var(--text-main) !important;
}
 
/* Title */
h1 {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: clamp(1.3rem, 2.6vw, 2rem) !important;
  letter-spacing: 0.10em !important;
  text-align: center !important;
  color: #8dd8f0 !important;
  padding: 1.4rem 0 0.2rem !important;
}
h1::after {
  content: '';
  display: block;
  margin: 0.45rem auto 0;
  width: 200px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #5ab4dc, #4ecdc4, transparent);
  border-radius: 2px;
}
 
/* Cards */
.block, .gr-block, .gr-box, .gr-panel, .panel {
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.55) !important;
  transition: border-color 0.3s !important;
}
.block:hover { border-color: rgba(90,180,220,0.42) !important; }
 
/* Labels */
label span, .gr-label, label {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: #7ecfe8 !important;
  text-transform: uppercase !important;
}
 
/* Inputs */
textarea, input[type="text"] {
  background: rgba(4,16,36,0.82) !important;
  border: 1px solid rgba(90,180,220,0.20) !important;
  border-radius: 8px !important;
  color: var(--text-main) !important;
  font-family: 'Exo 2', sans-serif !important;
  font-size: 0.90rem !important;
  transition: border-color 0.2s !important;
}
textarea:focus, input[type="text"]:focus {
  border-color: rgba(90,180,220,0.50) !important;
  outline: none !important;
}
 
/* Primary button */
button.primary, .gr-button-primary, button[variant="primary"] {
  font-family: 'Orbitron', monospace !important;
  font-weight: 600 !important;
  font-size: 0.73rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #0d4a6e 0%, #1a7aab 100%) !important;
  color: #ddf0fa !important;
  border: 1px solid rgba(90,180,220,0.36) !important;
  border-radius: 8px !important;
  padding: 0.6rem 1.5rem !important;
  transition: background 0.25s, transform 0.15s !important;
}
button.primary:hover {
  background: linear-gradient(135deg, #115880, #2192cc) !important;
  transform: translateY(-1px) !important;
}
button.secondary, .gr-button-secondary {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 0.77rem !important;
  background: rgba(90,180,220,0.07) !important;
  color: #7ecfe8 !important;
  border: 1px solid rgba(90,180,220,0.22) !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
}
button.secondary:hover { background: rgba(90,180,220,0.16) !important; }
 
/* Audio */
.waveform-container, audio {
  background: rgba(4,16,36,0.65) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(90,180,220,0.16) !important;
}
 
/* Image upload */
.image-container, .upload-container {
  border: 1.5px dashed rgba(90,180,220,0.25) !important;
  border-radius: 10px !important;
  background: rgba(4,16,36,0.50) !important;
  transition: border-color 0.3s !important;
}
.image-container:hover { border-color: rgba(90,180,220,0.50) !important; }
 
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(0,16,32,0.4); }
::-webkit-scrollbar-thumb { background: #2a6e96; border-radius: 3px; }
 
footer { display: none !important; }
"""
 
# ── Gradio theme ──────────────────────────────────────────────────────────────
theme = gr.themes.Base(
    primary_hue=gr.themes.colors.cyan,
    secondary_hue=gr.themes.colors.blue,
    neutral_hue=gr.themes.colors.slate,
    font=[gr.themes.GoogleFont("Exo 2"), "sans-serif"],
    font_mono=[gr.themes.GoogleFont("Orbitron"), "monospace"],
).set(
    body_background_fill="transparent",
    body_background_fill_dark="transparent",
    block_background_fill="rgba(8,26,52,0.74)",
    block_background_fill_dark="rgba(8,26,52,0.74)",
    block_border_color="rgba(90,180,220,0.22)",
    block_border_color_dark="rgba(90,180,220,0.22)",
    block_label_text_color="#7ecfe8",
    block_label_text_color_dark="#7ecfe8",
    input_background_fill="rgba(4,16,36,0.82)",
    input_background_fill_dark="rgba(4,16,36,0.82)",
    input_border_color="rgba(90,180,220,0.20)",
    input_border_color_dark="rgba(90,180,220,0.20)",
    button_primary_background_fill="linear-gradient(135deg,#0d4a6e,#1a7aab)",
    button_primary_background_fill_dark="linear-gradient(135deg,#0d4a6e,#1a7aab)",
    button_primary_text_color="#ddf0fa",
    button_primary_text_color_dark="#ddf0fa",
)
 
# ── UI ────────────────────────────────────────────────────────────────────────
with gr.Blocks(theme=theme, css=custom_css, title="AI Doctor — Vision & Voice") as iface:
 
    gr.HTML(ANIMATED_BG)
 
    gr.Markdown("""
<h1>⚕ Healio-AI Doctor Vision &amp; Voice</h1>
<p style='text-align:center;color:#7ab8d4;font-family:Exo 2,sans-serif;
font-size:0.91rem;letter-spacing:0.03em;margin-bottom:0.6rem;'>
Upload a medical image and describe your symptoms via microphone.<br>
The AI doctor will analyze and respond with a diagnosis.
</p>
""")
 
    # Cute animated AI doctor robot in the bottom-right corner
    gr.HTML("""
    <style>
      #ai-doc-robot {
        position: fixed;
        bottom: 18px;
        right: 22px;
        z-index: 999;
        width: 80px;
        cursor: pointer;
        filter: drop-shadow(0 4px 12px rgba(0,180,220,0.35));
        animation: robot-float 3.2s ease-in-out infinite;
      }
      @keyframes robot-float {
        0%,100% { transform: translateY(0px);   }
        50%      { transform: translateY(-10px); }
      }
      #ai-doc-robot:hover { animation: robot-wiggle 0.5s ease-in-out; }
      @keyframes robot-wiggle {
        0%,100% { transform: rotate(0deg);   }
        25%     { transform: rotate(-8deg);  }
        75%     { transform: rotate(8deg);   }
      }
    </style>
    <svg id="ai-doc-robot" viewBox="0 0 80 100" xmlns="http://www.w3.org/2000/svg">
      <!-- Antenna -->
      <line x1="40" y1="8" x2="40" y2="18" stroke="#5ab4dc" stroke-width="2.5" stroke-linecap="round"/>
      <circle cx="40" cy="6" r="4" fill="#4ecdc4" opacity="0.9">
        <animate attributeName="opacity" values="0.9;0.4;0.9" dur="1.4s" repeatCount="indefinite"/>
        <animate attributeName="r" values="4;5.5;4" dur="1.4s" repeatCount="indefinite"/>
      </circle>
      <!-- Head -->
      <rect x="20" y="18" width="40" height="32" rx="9" fill="#0d3a58" stroke="#5ab4dc" stroke-width="1.5"/>
      <!-- Eyes -->
      <ellipse cx="31" cy="31" rx="6" ry="6" fill="#07111e"/>
      <ellipse cx="49" cy="31" rx="6" ry="6" fill="#07111e"/>
      <circle cx="31" cy="31" r="3.5" fill="#4ecdc4">
        <animate attributeName="r" values="3.5;2;3.5" dur="3s" repeatCount="indefinite"/>
      </circle>
      <circle cx="49" cy="31" r="3.5" fill="#4ecdc4">
        <animate attributeName="r" values="3.5;2;3.5" dur="3s" begin="0.3s" repeatCount="indefinite"/>
      </circle>
      <!-- Eye shine -->
      <circle cx="33" cy="29" r="1.2" fill="white" opacity="0.7"/>
      <circle cx="51" cy="29" r="1.2" fill="white" opacity="0.7"/>
      <!-- Mouth / display bar -->
      <rect x="27" y="41" width="26" height="5" rx="2.5" fill="#07111e" stroke="#5ab4dc" stroke-width="0.8"/>
      <rect x="29" y="42.5" width="6" height="2" rx="1" fill="#4ecdc4">
        <animate attributeName="width" values="6;14;6" dur="1.2s" repeatCount="indefinite"/>
      </rect>
      <!-- Neck -->
      <rect x="36" y="50" width="8" height="6" rx="2" fill="#0a2e48"/>
      <!-- Body -->
      <rect x="16" y="56" width="48" height="34" rx="10" fill="#0d3a58" stroke="#5ab4dc" stroke-width="1.5"/>
      <!-- Chest cross / medical -->
      <rect x="37" y="63" width="6" height="14" rx="2" fill="#4ecdc4" opacity="0.85"/>
      <rect x="33" y="67" width="14" height="6" rx="2" fill="#4ecdc4" opacity="0.85"/>
      <!-- Side panel dots -->
      <circle cx="23" cy="67" r="2.5" fill="#5ab4dc" opacity="0.6">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" repeatCount="indefinite"/>
      </circle>
      <circle cx="23" cy="75" r="2.5" fill="#5ab4dc" opacity="0.6">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" begin="0.6s" repeatCount="indefinite"/>
      </circle>
      <circle cx="57" cy="67" r="2.5" fill="#5ab4dc" opacity="0.6">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
      </circle>
      <circle cx="57" cy="75" r="2.5" fill="#5ab4dc" opacity="0.6">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" begin="0.9s" repeatCount="indefinite"/>
      </circle>
      <!-- Arms -->
      <rect x="2" y="58" width="14" height="8" rx="4" fill="#0d3a58" stroke="#5ab4dc" stroke-width="1.2">
        <animateTransform attributeName="transform" type="rotate" values="0 9 62; 15 9 62; 0 9 62" dur="3.2s" repeatCount="indefinite"/>
      </rect>
      <rect x="64" y="58" width="14" height="8" rx="4" fill="#0d3a58" stroke="#5ab4dc" stroke-width="1.2">
        <animateTransform attributeName="transform" type="rotate" values="0 71 62; -15 71 62; 0 71 62" dur="3.2s" repeatCount="indefinite"/>
      </rect>
      <!-- Legs -->
      <rect x="25" y="90" width="12" height="8" rx="4" fill="#0a2e48" stroke="#5ab4dc" stroke-width="1"/>
      <rect x="43" y="90" width="12" height="8" rx="4" fill="#0a2e48" stroke="#5ab4dc" stroke-width="1"/>
    </svg>
    """)
 
    with gr.Row():
        with gr.Column(scale=1):
            audio_input = gr.Audio(sources=["microphone"], type="filepath",
                                   label="🎙  Patient Audio Input")
            image_input = gr.Image(type="filepath",
                                   label="🩻  Medical Image Upload")
            with gr.Row():
                submit_btn = gr.Button("🩺  Analyze", variant="primary")
                clear_btn  = gr.Button("🗑  Clear",   variant="secondary")
 
        with gr.Column(scale=1):
            text_out  = gr.Textbox(label="📝  Speech Transcription", lines=2)
            doc_out   = gr.Textbox(label="🩺  Doctor's Diagnosis",   lines=5)
            audio_out = gr.Audio(label="🔊  Doctor's Voice Response", type="filepath")
 
    submit_btn.click(
        fn=process_inputs,
        inputs=[audio_input, image_input],
        outputs=[text_out, doc_out, audio_out],
    )
 
    clear_btn.click(
        fn=lambda: (None, None, "", "", None),
        inputs=[],
        outputs=[audio_input, image_input, text_out, doc_out, audio_out],
    )
 
iface.launch(server_name="0.0.0.0",server_port=7860, allowed_paths=["."])