app.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import os
import sys

# Set UTF-8 encoding for Windows
if sys.platform == 'win32':
    import codecs
    sys.stdout = codecs.getwriter('utf-8')(sys.stdout.detach())
    sys.stderr = codecs.getwriter('utf-8')(sys.stderr.detach())

# Load environment variables from .env file (optimized for HF Spaces)
try:
    # Only load .env in local development, skip in production
    if not os.environ.get("SPACE_ID") and not os.environ.get("HF_SPACE_ID"):
        from dotenv import load_dotenv
        load_dotenv()
        print("✅ Environment variables loaded from .env file")
    else:
        print("🏭 Production environment - using system environment variables")
except ImportError:
    print("⚠️  python-dotenv not installed. Using system environment variables only.")
except Exception as e:
    print(f"⚠️  Error loading .env file: {e}")

# Essential imports for HF Spaces
import numpy as np
import gradio as gr

# Try to import google-generativeai with fallback
try:
    import google.generativeai as genai
    GENAI_AVAILABLE = True
except ImportError as e:
    print(f"⚠️ google-generativeai not available: {e}")
    GENAI_AVAILABLE = False
    genai = None

try:
    from gtts import gTTS, lang
    GTTS_AVAILABLE = True
except ImportError as e:
    print(f"⚠️ gtts not available: {e}")
    GTTS_AVAILABLE = False

import tempfile
# import soundfile as sf  # Import locally to avoid startup overhead
# Kokoro not used - removed for performance
import time
import base64

# Try to import optional dependencies
try:
    import edge_tts
    EDGE_TTS_AVAILABLE = True
except ImportError as e:
    print(f"⚠️ edge-tts not available: {e}")
    EDGE_TTS_AVAILABLE = False

import asyncio
import io

try:
    import PyPDF2
    PDF_AVAILABLE = True
except ImportError:
    PDF_AVAILABLE = False

try:
    import docx
    DOCX_AVAILABLE = True
except ImportError:
    DOCX_AVAILABLE = False

import shutil
import atexit
import glob
import datetime

# Librosa not used - removed for performance

# === RECORD DATA MANAGEMENT ===
RECORD_DATA_DIR = "record_data"

def create_record_data_directory():
    """Create record_data directory if it doesn't exist"""
    if not os.path.exists(RECORD_DATA_DIR):
        os.makedirs(RECORD_DATA_DIR)
        print(f"✅ Created directory: {RECORD_DATA_DIR}")
    return RECORD_DATA_DIR

def cleanup_record_data():
    """Clean up record_data directory when app closes (disabled for production)"""
    try:
        # Disable cleanup for HF Spaces and production environments
        if os.environ.get("SPACE_ID") or os.environ.get("HF_SPACE_ID"):
            print(f"🏭 Production environment detected - keeping {RECORD_DATA_DIR} directory")
            return
            
        # Only cleanup in local development
        if os.path.exists(RECORD_DATA_DIR):
            shutil.rmtree(RECORD_DATA_DIR)
            print(f"🧹 Cleaned up {RECORD_DATA_DIR} directory")
    except Exception as e:
        print(f"⚠️ Error cleaning up {RECORD_DATA_DIR}: {e}")

def save_recorded_audio(audio_data, original_filename=None):
    """Save audio data to record_data directory"""
    try:
        # Create directory if needed
        create_record_data_directory()
        
        # Generate filename with timestamp
        timestamp = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
        if original_filename:
            name_part = os.path.splitext(os.path.basename(original_filename))[0]
            filename = f"recorded_{name_part}_{timestamp}.wav"
        else:
            filename = f"recorded_{timestamp}.wav"
        
        filepath = os.path.join(RECORD_DATA_DIR, filename)
        
        # Handle different audio data types
        if isinstance(audio_data, str) and os.path.exists(audio_data):
            # File path - copy the file
            shutil.copy2(audio_data, filepath)
        elif isinstance(audio_data, tuple) and len(audio_data) == 2:
            # Numpy array format (sample_rate, audio_array)
            sample_rate, audio_array = audio_data
            import soundfile as sf
            sf.write(filepath, audio_array, sample_rate)
            print(f"📊 Saved numpy audio: sr={sample_rate}, shape={audio_array.shape}")
        else:
            # Raw data
            with open(filepath, 'wb') as f:
                f.write(audio_data)
        
        print(f"✅ Saved recorded audio: {filepath}")
        return filepath
        
    except Exception as e:
        print(f"❌ Error saving recorded audio: {e}")
        import traceback
        traceback.print_exc()
        return None

def get_recorded_files():
    """Get list of recorded audio files"""
    try:
        if not os.path.exists(RECORD_DATA_DIR):
            print(f"📁 Record directory does not exist: {RECORD_DATA_DIR}")
            return []
        
        # Get all audio files in record_data
        pattern = os.path.join(RECORD_DATA_DIR, "*.wav")
        files = glob.glob(pattern)
        print(f"🔍 Found {len(files)} files in {RECORD_DATA_DIR}")
        
        # Sort by modification time (newest first)
        files.sort(key=os.path.getmtime, reverse=True)
        
        # Return just filenames for display
        filenames = [os.path.basename(f) for f in files]
        print(f"📂 Returning filenames: {filenames}")
        return filenames
        
    except Exception as e:
        print(f"❌ Error getting recorded files: {e}")
        return []

def get_recorded_file_path(filename):
    """Get full path of recorded file"""
    return os.path.join(RECORD_DATA_DIR, filename)


def delete_recorded_file(filename):
    """Delete recorded file from record_data directory"""
    try:
        if not filename or not filename.strip():
            return "❌ Không có file nào được chọn để xóa"
            
        file_path = get_recorded_file_path(filename)
        print(f"🗑️ Attempting to delete: {file_path}")
        
        if os.path.exists(file_path):
            os.remove(file_path)
            print(f"✅ Successfully deleted: {filename}")
            return f"✅ Đã xóa file: {filename}"
        else:
            print(f"❌ File not found: {file_path}")
            return f"❌ Không tìm thấy file: {filename}"
            
    except Exception as e:
        print(f"❌ Error deleting file: {e}")
        return f"❌ Lỗi khi xóa file: {str(e)}"

# Register cleanup function to run when app exits (disabled for stability)
# atexit.register(cleanup_record_data)  # Disabled to prevent data loss on deployment

# DOCX support already checked above

# Configure Gemini API - Delayed configuration for faster startup
GEMINI_API_KEY = None

def configure_gemini_api():
    """Configure Gemini API on first use to speed up startup"""
    global GEMINI_API_KEY
    if not GENAI_AVAILABLE:
        print("❌ google-generativeai not available")
        return None
        
    if GEMINI_API_KEY is None:
        GEMINI_API_KEY = os.getenv("GEMINI_API_KEY") or os.getenv("GOOGLE_API_KEY")
        if GEMINI_API_KEY:
            genai.configure(api_key=GEMINI_API_KEY)
            print("✅ Gemini API configured successfully")
        else:
            print("⚠️  GEMINI_API_KEY or GOOGLE_API_KEY not found in environment variables")
    return GEMINI_API_KEY

# Language configurations for Audio Translation (simplified)
if GTTS_AVAILABLE:
    GTTS_LANGUAGES = lang.tts_langs()
    GTTS_LANGUAGES['ja'] = 'Japanese'
else:
    GTTS_LANGUAGES = {'en': 'English', 'vi': 'Vietnamese'}

SUPPORTED_LANGUAGES = sorted(list(GTTS_LANGUAGES.values()))

# Voice mapping for Edge TTS - defined once for performance
VOICE_MAP = {
    "🇻🇳 HoaiMy - Nữ Việt Chuẩn": "vi-VN-HoaiMyNeural",
    "🇻🇳 NamMinh - Nam Việt Chuẩn": "vi-VN-NamMinhNeural",
    "🇺🇸 Aria - Nữ Mỹ": "en-US-AriaNeural",
    "🇺🇸 Guy - Nam Mỹ": "en-US-GuyNeural",
    "🇬🇧 Sonia - Nữ Anh": "en-GB-SoniaNeural",
    "🇬🇧 Ryan - Nam Anh": "en-GB-RyanNeural",
    "🇩🇪 Katja - Deutsche Frau": "de-DE-KatjaNeural",
    "🇩🇪 Conrad - Deutscher Mann": "de-DE-ConradNeural",
    "🇫🇷 Denise - Française": "fr-FR-DeniseNeural",
    "🇫🇷 Henri - Français": "fr-FR-HenriNeural",
    "🇪🇸 Elvira - Española": "es-ES-ElviraNeural",
    "🇪🇸 Alvaro - Español": "es-ES-AlvaroNeural",
    "🇮🇹 Elsa - Italiana": "it-IT-ElsaNeural",
    "🇮🇹 Diego - Italiano": "it-IT-DiegoNeural",
    "🇯🇵 Nanami - 日本女性": "ja-JP-NanamiNeural",
    "🇯🇵 Keita - 日本男性": "ja-JP-KeitaNeural",
    "🇰🇷 SunHi - 한국 여성": "ko-KR-SunHiNeural",
    "🇰🇷 BongJin - 한국 남성": "ko-KR-BongJinNeural",
    "🇨🇳 Xiaoxiao - 中文女声": "zh-CN-XiaoxiaoNeural",
    "🇨🇳 Yunxi - 中文男声": "zh-CN-YunxiNeural",
    "🇷🇺 Svetlana - Русская": "ru-RU-SvetlanaNeural",
    "🇷🇺 Dmitry - Русский": "ru-RU-DmitryNeural",
    "🇵🇹 Francisca - Portuguesa": "pt-BR-FranciscaNeural",
    "🇵🇹 Antonio - Português": "pt-BR-AntonioNeural",
    "🇸🇦 Zariyah - عربية": "ar-SA-ZariyahNeural",
    "🇸🇦 Hamed - عربي": "ar-SA-HamedNeural"
}

# Voice RAG Functions (Tích hợp từ hf_Voice_Audio_Translation)
def read_pdf(file_path):
    """Extract text from PDF file"""
    try:
        with open(file_path, 'rb') as file:
            reader = PyPDF2.PdfReader(file)
            text = ""
            for page in reader.pages:
                text += page.extract_text()
        return text
    except Exception as e:
        return f"Error reading PDF: {str(e)}"

def read_docx(file_path):
    """Extract text from Word document"""
    try:
        if not DOCX_AVAILABLE:
            return "❌ python-docx not available"
        doc = docx.Document(file_path)
        text = ""
        for paragraph in doc.paragraphs:
            text += paragraph.text + "\n"
        return text
    except Exception as e:
        return f"Error reading DOCX: {str(e)}"

def read_txt(file_path):
    """Extract text from TXT file"""
    try:
        with open(file_path, 'r', encoding='utf-8') as file:
            return file.read()
    except Exception as e:
        return f"Error reading TXT: {str(e)}"

def extract_text_from_file(file_path):
    """Extract text from various file formats"""
    if file_path is None:
        return "No file uploaded"
    
    file_extension = os.path.splitext(file_path)[1].lower()
    
    if file_extension == '.pdf':
        return read_pdf(file_path)
    elif file_extension == '.docx':
        return read_docx(file_path)
    elif file_extension == '.txt':
        return read_txt(file_path)
    else:
        return f"Unsupported file format: {file_extension}"

def detect_language_from_text(text):
    """Detect language from text content"""
    # Vietnamese detection
    vietnamese_chars = 'àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđ'
    if any(char in text.lower() for char in vietnamese_chars):
        return "Vietnamese"
    
    # Chinese detection
    chinese_chars = '中文汉字學習语言'
    if any(char in text for char in chinese_chars):
        return "Chinese"
    
    # Japanese detection
    japanese_chars = 'ひらがなカタカナ日本語'
    if any(char in text for char in japanese_chars):
        return "Japanese"
    
    # Korean detection
    korean_chars = '한국어문자'
    if any(char in text for char in korean_chars):
        return "Korean"
    
    # French detection
    french_words = ['le', 'la', 'les', 'de', 'et', 'à', 'un', 'une', 'ce', 'qui', 'que']
    french_chars = 'àâäéèêëïîôöùûüÿç'
    if any(word in text.lower() for word in french_words) or any(char in text.lower() for char in french_chars):
        return "French"
    
    # German detection
    german_words = ['der', 'die', 'das', 'und', 'ist', 'ich', 'bin', 'haben', 'sein', 'werden']
    german_chars = 'äöüß'
    if any(word in text.lower() for word in german_words) or any(char in text.lower() for char in german_chars):
        return "German"
    
    # Spanish detection
    spanish_words = ['el', 'la', 'de', 'que', 'y', 'a', 'en', 'un', 'es', 'se', 'no', 'te', 'lo']
    spanish_chars = 'ñáéíóúü'
    if any(word in text.lower() for word in spanish_words) or any(char in text.lower() for char in spanish_chars):
        return "Spanish"
    
    # English detection (default)
    english_words = ['the', 'and', 'is', 'are', 'have', 'has', 'will', 'would', 'can', 'could']
    if any(word in text.lower() for word in english_words):
        return "English"
    
    return "English"  # Default fallback

def process_with_gemini(text, question, answer_language="Vietnamese"):
    """Process text and question using Gemini with multi-language support"""
    try:
        api_key = configure_gemini_api()
        if not api_key:
            return "❌ Lỗi: Chưa cấu hình GEMINI_API_KEY hoặc GOOGLE_API_KEY trong environment variables"
            
        model = genai.GenerativeModel("gemini-2.0-flash")
        
        # Detect document language
        detected_doc_language = detect_language_from_text(text)
        
        prompt = f"""

        Based on the following document content, please answer the question in {answer_language}:

        

        Document Content (detected language: {detected_doc_language}):

        {text}

        

        Question: {question}

        

        Please provide a comprehensive and accurate answer in {answer_language}. 

        If the document is in a different language than the question, please still answer in {answer_language}.

        Maintain the factual accuracy while adapting cultural context appropriately.

        """
        
        response = model.generate_content(prompt)
        return response.text
        
    except Exception as e:
        return f"Error processing with Gemini: {str(e)}"

def text_to_speech_rag(text, voice_selection):
    """Convert text to speech using Edge TTS for RAG results"""
    try:
        if not text or text.startswith("Error"):
            return None
        
        # Use global VOICE_MAP for performance
        voice_name = VOICE_MAP.get(voice_selection, "vi-VN-HoaiMyNeural")
        text_limited = text[:2000] if len(text) > 2000 else text
        
        # Generate speech using Edge TTS
        audio_data = asyncio.run(generate_speech(text_limited, voice_name, 0.0))
        
        # Save to temporary file
        fd, temp_output_path = tempfile.mkstemp(suffix=".wav", prefix="voice_rag_audio_")
        os.close(fd)
        
        # Write raw audio data to temporary file
        with open(temp_output_path, 'wb') as f:
            f.write(audio_data)
        
        return temp_output_path
        
    except Exception as e:
        print(f"TTS Error: {str(e)}")
        return None

def voice_rag_pipeline(uploaded_file, question, answer_language="Vietnamese", voice_selection="🇻🇳 HoaiMy - Nữ Việt Chuẩn", text_format="txt"):
    """Complete Voice RAG pipeline with multi-language support and downloadable text"""
    if uploaded_file is None:
        return "Please upload a document first.", "N/A", None, None
    
    if not question.strip():
        return "Please enter a question.", "N/A", None, None
    
    # Extract text from uploaded file
    extracted_text = extract_text_from_file(uploaded_file)
    
    if extracted_text.startswith("Error"):
        return extracted_text, "Error", None, None
    
    # Detect document language
    detected_doc_language = detect_language_from_text(extracted_text)
    
    # Process with Gemini using selected answer language
    answer = process_with_gemini(extracted_text, question, answer_language)
    
    # Generate speech using selected voice
    audio_file = text_to_speech_rag(answer, voice_selection)
    
    # Create formatted content for download
    if text_format.lower() == "md":
        # Create beautiful Markdown format
        formatted_content = format_voice_rag_response(
            question, answer, detected_doc_language, voice_selection
        )
        text_file_path = create_text_file(formatted_content, "md", "voice_rag_response")
    else:
        # Create standard text file
        text_file_path = create_text_file(answer, text_format, "voice_rag_answer")
    
    return answer, detected_doc_language, audio_file, text_file_path

def detect_language(text):
    """Detect language of input text with improved accuracy"""
    if not text.strip():
        return "unknown"
    
    text_lower = text.lower()
    
    # Vietnamese detection (more comprehensive)
    vietnamese_chars = 'àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđ'
    vietnamese_words = ['và', 'của', 'là', 'có', 'này', 'được', 'cho', 'từ', 'một', 'những', 'tôi', 'bạn']
    vietnamese_score = sum(1 for char in text if char in vietnamese_chars) + sum(2 for word in vietnamese_words if word in text_lower)
    
    # English detection (more comprehensive)
    english_words = ['the', 'and', 'is', 'are', 'have', 'has', 'will', 'would', 'can', 'could', 'that', 'this', 'with', 'for', 'you', 'he', 'she', 'it', 'they', 'we']
    english_score = sum(1 for word in english_words if word in text_lower)
    
    # German detection
    german_words = ['der', 'die', 'das', 'und', 'ist', 'ich', 'bin', 'haben', 'sein', 'werden', 'mit', 'auf', 'für', 'von']
    german_chars = 'äöüß'
    german_score = sum(1 for word in german_words if word in text_lower) + sum(1 for char in text if char in german_chars)
    
    # French detection
    french_words = ['le', 'la', 'les', 'de', 'et', 'à', 'un', 'une', 'ce', 'qui', 'que', 'avec', 'pour', 'dans']
    french_chars = 'àâäéèêëïîôöùûüÿç'
    french_score = sum(1 for word in french_words if word in text_lower) + sum(0.5 for char in text if char in french_chars)
    
    # Spanish detection
    spanish_words = ['el', 'la', 'de', 'que', 'y', 'a', 'en', 'un', 'es', 'se', 'no', 'te', 'lo', 'con', 'para']
    spanish_chars = 'ñáéíóúü'
    spanish_score = sum(1 for word in spanish_words if word in text_lower) + sum(0.5 for char in text if char in spanish_chars)
    
    # Score-based detection
    scores = {
        'Vietnamese': vietnamese_score,
        'English': english_score,
        'German': german_score,
        'French': french_score,
        'Spanish': spanish_score
    }
    
    # Find the language with highest score
    max_score = max(scores.values())
    if max_score > 0:
        detected = max(scores, key=scores.get)
        print(f"🔍 Language detection scores: {scores}")
        print(f"🎯 Detected language: {detected} (score: {max_score})")
        return detected
    
    # Default fallback
    print(f"⚠️ Could not detect language, defaulting to English")
    return "English"

async def generate_speech(text, voice_name, rate):
    """Generate speech using Edge TTS"""
    communicate = edge_tts.Communicate(text, voice_name, rate=f"{rate:+.0%}")
    
    # Create in-memory buffer
    audio_buffer = io.BytesIO()
    
    async for chunk in communicate.stream():
        if chunk["type"] == "audio":
            audio_buffer.write(chunk["data"])
    
    audio_buffer.seek(0)
    return audio_buffer.getvalue()

def create_text_file(content, file_format="txt", filename_prefix="translated_text"):
    """

    Create a downloadable text file from content in TXT, DOCX, or MD format

    """
    if not content or content.startswith("Lỗi:") or content.startswith("❌"):
        return None
    
    try:
        if file_format.lower() == "docx" and DOCX_AVAILABLE:
            # Create Word document
            fd, temp_file_path = tempfile.mkstemp(suffix=".docx", prefix=f"{filename_prefix}_")
            os.close(fd)
            
            if not DOCX_AVAILABLE:
                return None
            from docx import Document
            doc = Document()
            doc.add_heading('Nội dung đã dịch', 0)
            doc.add_paragraph(content)
            doc.save(temp_file_path)
            
            return temp_file_path
        elif file_format.lower() == "md":
            # Create Markdown file
            fd, temp_file_path = tempfile.mkstemp(suffix=".md", prefix=f"{filename_prefix}_")
            os.close(fd)
            
            with open(temp_file_path, 'w', encoding='utf-8') as f:
                f.write(content)
            
            return temp_file_path
        else:
            # Create TXT file (default)
            fd, temp_file_path = tempfile.mkstemp(suffix=".txt", prefix=f"{filename_prefix}_")
            os.close(fd)
            
            with open(temp_file_path, 'w', encoding='utf-8') as f:
                f.write(content)
            
            return temp_file_path
    except Exception as e:
        return None

def format_voice_rag_response(question, answer, detected_language, voice_selection, timestamp=None):
    """

    Format Voice RAG response as beautiful Markdown

    """
    if timestamp is None:
        timestamp = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
    
    # Clean and format the answer
    formatted_answer = answer.strip()
    
    # Create beautiful Markdown document
    markdown_content = f"""# 📚 Voice RAG - Intelligent Document Q&A



---



## 📄 **Session Information**



| **Field** | **Details** |

|-----------|-------------|

| 🕒 **Timestamp** | {timestamp} |

| 🌍 **Document Language** | {detected_language} |

| 🎭 **Voice Selection** | {voice_selection} |

| 🤖 **AI Model** | Google Gemini 2.0 Flash |



---



## ❓ **Question**



> {question}



---



## 💬 **AI Response**



{formatted_answer}



---





---



## 📱 **Generated by**



**🎙️ Voice AI Platform** - Digitized Brains  

*Powered by Claude Code & Google Gemini 2.0 Flash*



> 🌐 **Voice RAG Technology** - Combining document intelligence with premium voice synthesis



---



*Generated on {timestamp} | Voice: {voice_selection} | Language: {detected_language}*

"""
    
    return markdown_content

def format_voice_studio_response(text, voice_selection, speed, detected_language="Auto-detected", timestamp=None):
    """

    Format Voice Studio response as simple Markdown

    """
    if timestamp is None:
        timestamp = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
    
    # Clean and format the text
    formatted_text = text.strip()
    
    # Create simple Markdown document
    markdown_content = f"""# Voice Studio Result



## Input Text ({detected_language})



{formatted_text}



---



*Generated on {timestamp} | Voice: {voice_selection} | Speed: {speed:.1f}x*

"""
    
    return markdown_content

def format_audio_translation_response(original_text, translated_text, source_language, target_language, voice_selection, timestamp=None):
    """

    Format Audio Translation response as simple Markdown

    """
    if timestamp is None:
        timestamp = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
    
    # Clean and format the texts
    formatted_original = original_text.strip()
    formatted_translated = translated_text.strip()
    
    # Create simple Markdown document
    markdown_content = f"""# Audio Translation Result



## Original Text ({source_language})



{formatted_original}



## Translated Text ({target_language})



{formatted_translated}



---



*Generated on {timestamp} | {source_language} → {target_language} | Voice: {voice_selection}*

"""
    
    return markdown_content

def create_audio_voice_studio(text, voice_selection, speed, text_format="txt"):
    """Voice Studio functionality with text file generation"""
    if not text.strip():
        return "❌ Vui lòng nhập văn bản / Please enter text / Bitte Text eingeben", None
    
    try:
        # Use global VOICE_MAP for performance (avoiding recreation on each call)
        voice_name = VOICE_MAP.get(voice_selection, "vi-VN-HoaiMyNeural")
        text_limited = text[:1000] if len(text) > 1000 else text
        
        # Convert speed (0.5-2.0) to rate percentage (-50% to +100%)
        rate_percent = (speed - 1.0)
        
        # Generate speech using Edge TTS
        audio_data = asyncio.run(generate_speech(text_limited, voice_name, rate_percent))
        
        # Convert to base64
        audio_base64 = base64.b64encode(audio_data).decode('utf-8')
        
        timestamp = int(time.time())
        filename = f"voice_{voice_name}_{speed}x_{timestamp}.mp3"
        
        # Detect language
        detected_lang = detect_language(text_limited)
        
        # Mobile-optimized HTML player
        html_player = f'''

            <div style="

                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

                border-radius: 20px; 

                padding: 20px; 

                margin: 10px 0; 

                box-shadow: 0 8px 32px rgba(0,0,0,0.2);

                color: white;

                text-align: center;

            ">

                <div style="margin-bottom: 20px;">

                    <h3 style="color: #fff; margin: 0 0 15px 0; font-size: 1.3em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">

                        🎵 Âm thanh hoàn thành!

                    </h3>

                    <div style="

                        background: rgba(255,255,255,0.2); 

                        border-radius: 12px; 

                        padding: 12px; 

                        font-size: 0.9em; 

                        line-height: 1.5;

                        backdrop-filter: blur(10px);

                    ">

                        <div><strong>🎭 Giọng:</strong> {voice_selection}</div>

                        <div><strong>⚡ Tốc độ:</strong> {speed:.1f}x | <strong>🌍 Ngôn ngữ:</strong> {detected_lang.title()}</div>

                        <div><strong>📝 Độ dài:</strong> {len(text_limited)} ký tự</div>

                    </div>

                </div>

                

                <audio controls style="

                    width: 100%; 

                    max-width: 100%;

                    height: 50px;

                    margin: 20px 0; 

                    border-radius: 25px;

                    background: rgba(255,255,255,0.95);

                    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

                ">

                    <source src="data:audio/mpeg;base64,{audio_base64}" type="audio/mpeg">

                    Trình duyệt không hỗ trợ audio.

                </audio>

                

                <div style="

                    display: flex; 

                    justify-content: center;

                    margin-top: 20px;

                ">

                    <a href="data:audio/mpeg;base64,{audio_base64}" download="{filename}"

                       style="

                           background: linear-gradient(45deg, #28a745, #20c997);

                           color: white; 

                           padding: 15px 30px; 

                           text-decoration: none;

                           border-radius: 25px; 

                           font-weight: 700; 

                           font-size: 1.1em;

                           display: flex;

                           align-items: center;

                           justify-content: center;

                           box-shadow: 0 4px 15px rgba(40,167,69,0.3);

                           transition: all 0.3s ease;

                           min-height: 48px;

                           min-width: 200px;

                       "

                       ontouchstart=""

                       onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(40,167,69,0.4)'"

                       onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(40,167,69,0.3)'">

                        📥 TẢI XUỐNG MP3

                    </a>

                </div>

            </div>

            '''
        
        # Create text file based on format
        text_file_path = None
        if text_format == "md":
            # Use Markdown formatting function
            detected_language = detect_language(text_limited)
            markdown_content = format_voice_studio_response(text_limited, voice_selection, speed, detected_language)
            text_file_path = create_text_file(markdown_content, "md", "voice_studio")
        elif text_format == "docx":
            # Create Word document with Voice Studio formatting
            detected_language = detect_language(text_limited)
            markdown_content = format_voice_studio_response(text_limited, voice_selection, speed, detected_language)
            text_file_path = create_text_file(markdown_content, "docx", "voice_studio")
        elif text_format == "txt":
            # Create simple text file
            text_file_path = create_text_file(text_limited, "txt", "voice_studio")
            
        return html_player, text_file_path
            
    except Exception as e:
        return f"❌ Error: {str(e)}", None

# Language mapping for voices - defined once for performance
VOICE_TO_LANGUAGE = {
    # Vietnamese
    "🇻🇳 HoaiMy - Nữ Việt Chuẩn": "Vietnamese",
    "🇻🇳 NamMinh - Nam Việt Chuẩn": "Vietnamese",
    # English
    "🇺🇸 Aria - Nữ Mỹ": "English",
    "🇺🇸 Guy - Nam Mỹ": "English", 
    "🇬🇧 Sonia - Nữ Anh": "English",
    "🇬🇧 Ryan - Nam Anh": "English",
    # German
    "🇩🇪 Katja - Deutsche Frau": "German",
    "🇩🇪 Conrad - Deutscher Mann": "German",
    # French
    "🇫🇷 Denise - Française": "French",
    "🇫🇷 Henri - Français": "French",
    # Spanish
    "🇪🇸 Elvira - Española": "Spanish",
    "🇪🇸 Alvaro - Español": "Spanish",
    # Italian
    "🇮🇹 Elsa - Italiana": "Italian",
    "🇮🇹 Diego - Italiano": "Italian",
    # Japanese
    "🇯🇵 Nanami - 日本女性": "Japanese",
    "🇯🇵 Keita - 日本男性": "Japanese",
    # Korean
    "🇰🇷 SunHi - 한국 여성": "Korean",
    "🇰🇷 BongJin - 한국 남성": "Korean",
    # Chinese
    "🇨🇳 Xiaoxiao - 中文女声": "Chinese",
    "🇨🇳 Yunxi - 中文男声": "Chinese",
    # Russian
    "🇷🇺 Svetlana - Русская": "Russian",
    "🇷🇺 Dmitry - Русский": "Russian",
    # Portuguese
    "🇵🇹 Francisca - Portuguesa": "Portuguese",
    "🇵🇹 Antonio - Português": "Portuguese",
    # Arabic
    "🇸🇦 Zariyah - عربية": "Arabic",
    "🇸🇦 Hamed - عربي": "Arabic"
}

def get_target_language_from_voice(voice_selection):
    """Map voice selection to target language for translation"""
    return VOICE_TO_LANGUAGE.get(voice_selection, "Vietnamese")

def translate_text_with_gemini(text, target_language):
    """Translate text using Gemini API"""
    try:
        api_key = configure_gemini_api()
        if not api_key:
            return f"❌ Lỗi: Chưa cấu hình GEMINI_API_KEY hoặc GOOGLE_API_KEY trong environment variables"
            
        if not text.strip():
            return ""
            
        model = genai.GenerativeModel("gemini-2.0-flash")
        
        prompt = f"""Translate the following text to {target_language}. Return ONLY the translated text, nothing else:



{text}"""

        response = model.generate_content(prompt)
        translated_text = response.text.strip()
        
        # Clean up any unwanted text that might be included
        if translated_text.lower().startswith("translation:"):
            translated_text = translated_text[12:].strip()
        if translated_text.lower().startswith("here is"):
            lines = translated_text.split('\n')
            if len(lines) > 1:
                translated_text = '\n'.join(lines[1:]).strip()
        
        return translated_text
        
    except Exception as e:
        return f"Lỗi dịch thuật: {str(e)}"

def translate_audio(audio_file, target_country, voice_selection, text_format="txt"):
    """

    Transcribe, translate and synthesize audio to target language with Voice Studio integration

    """
    try:
        api_key = configure_gemini_api()
        if not api_key:
            return "❌ Lỗi: Chưa cấu hình GEMINI_API_KEY hoặc GOOGLE_API_KEY trong environment variables", "Không xác định", "", target_country, None, None, "", "", None
            
        if audio_file is None:
            return "Lỗi: Vui lòng tải lên file audio", "Không xác định", "", target_country, None, None, "", "", None
        
        # Save recorded audio to record_data directory
        print(f"🔍 Processing audio file type: {type(audio_file)}")
        saved_audio_path = save_recorded_audio(audio_file)
        if saved_audio_path:
            print(f"🎤 Audio saved to record_data: {os.path.basename(saved_audio_path)}")
            # Debug: check if file really exists
            if os.path.exists(saved_audio_path):
                file_size = os.path.getsize(saved_audio_path)
                print(f"✅ File confirmed: {saved_audio_path} ({file_size} bytes)")
            else:
                print(f"❌ File not found after save: {saved_audio_path}")
                return "❌ Lỗi: Không thể lưu file audio", "Không xác định", "", target_country, None, None, "", "", None
        else:
            print("❌ Failed to save audio file")
            return "❌ Lỗi: Không thể lưu file audio", "Không xác định", "", target_country, None, None, "", "", None
            
        # Get target language from voice selection
        target_language = get_target_language_from_voice(voice_selection)
            
        # Transcribe audio using Gemini
        model = genai.GenerativeModel("gemini-2.0-flash")
        
        # Read audio file using saved path
        with open(saved_audio_path, 'rb') as f:
            audio_data = f.read()
        
        # Create audio blob
        audio_blob = {
            'mime_type': 'audio/wav',
            'data': audio_data
        }

        # Step 1: Transcribe audio only first
        transcribe_prompt = """Transcribe this audio accurately in its original language. Return only the transcribed text, nothing else."""
        
        response = model.generate_content([transcribe_prompt, audio_blob])
        transcription = response.text.strip()
        
        # Step 2: Detect language of transcription
        detected_lang = detect_language(transcription)
        
        # Step 3: Translate if needed (only if source is different from target)
        if detected_lang.lower() != target_language.lower():
            print(f"🔄 Translating from {detected_lang} to {target_language}")
            translated_text = translate_text_with_gemini(transcription, target_language)
            
            # Check if translation was successful
            if translated_text.startswith("❌") or translated_text.startswith("Lỗi"):
                print(f"❌ Translation failed: {translated_text}")
                # Use original transcription if translation fails
                translated_text = transcription
            else:
                print(f"✅ Translation successful")
        else:
            print(f"ℹ️ No translation needed - same language ({detected_lang})")
            translated_text = transcription
        
        # Generate audio using Edge TTS (use global VOICE_MAP for performance)
        edge_voice = VOICE_MAP.get(voice_selection, "vi-VN-HoaiMyNeural")
        print(f"🎙️ Generating audio with voice: {edge_voice}")
        audio_data = asyncio.run(generate_speech(translated_text, edge_voice, 0.0))
        print(f"🎵 Generated audio data: {len(audio_data)} bytes")
        
        # Save audio file
        fd, temp_output_path = tempfile.mkstemp(suffix=".wav", prefix="translated_audio_")
        os.close(fd)
        print(f"📁 Created temp audio file: {temp_output_path}")
        
        # Write raw audio data to temporary file
        with open(temp_output_path, 'wb') as f:
            f.write(audio_data)
        
        # Verify file was created
        if os.path.exists(temp_output_path):
            file_size = os.path.getsize(temp_output_path)
            print(f"✅ Audio file created successfully: {file_size} bytes")
        else:
            print(f"❌ Failed to create audio file: {temp_output_path}")
        
        # Create text file for download with proper formatting
        text_file_path = None
        if text_format == "md":
            # Use Markdown formatting function for Audio Translation
            markdown_content = format_audio_translation_response(
                transcription, translated_text, detected_lang, target_language, voice_selection
            )
            text_file_path = create_text_file(markdown_content, "md", "audio_translation")
        elif text_format == "docx":
            # Create Word document with Audio Translation formatting
            markdown_content = format_audio_translation_response(
                transcription, translated_text, detected_lang, target_language, voice_selection
            )
            text_file_path = create_text_file(markdown_content, "docx", "audio_translation")
        else:
            # Create simple text file
            text_file_path = create_text_file(translated_text, "txt", "audio_translation")
        
        return transcription, detected_lang, translated_text, target_language, temp_output_path, temp_output_path, transcription, translated_text, text_file_path
        
    except Exception as e:
        # Get target language for error response
        target_language = get_target_language_from_voice(voice_selection) if 'voice_selection' in locals() else "Vietnamese"
        return f"Lỗi: {str(e)}", "Lỗi", "", target_language, None, None, "", "", None

# Voice choices organized by country - ONLY OFFICIAL VOICES  
voice_choices_by_country = {
    "🇻🇳 Việt Nam": [
        "🇻🇳 HoaiMy - Nữ Việt Chuẩn",
        "🇻🇳 NamMinh - Nam Việt Chuẩn"
    ],
    "🇺🇸 Hoa Kỳ": [
        "🇺🇸 Aria - Nữ Mỹ",
        "🇺🇸 Guy - Nam Mỹ"
    ],
    "🇬🇧 Anh": [
        "🇬🇧 Sonia - Nữ Anh",
        "🇬🇧 Ryan - Nam Anh"
    ],
    "🇩🇪 Đức": [
        "🇩🇪 Katja - Deutsche Frau",
        "🇩🇪 Conrad - Deutscher Mann"
    ],
    "🇫🇷 Pháp": [
        "🇫🇷 Denise - Française",
        "🇫🇷 Henri - Français"
    ],
    "🇪🇸 Tây Ban Nha": [
        "🇪🇸 Elvira - Española",
        "🇪🇸 Alvaro - Español"
    ],
    "🇮🇹 Ý": [
        "🇮🇹 Elsa - Italiana",
        "🇮🇹 Diego - Italiano"
    ],
    "🇯🇵 Nhật Bản": [
        "🇯🇵 Nanami - 日本女性",
        "🇯🇵 Keita - 日本男性"
    ],
    "🇰🇷 Hàn Quốc": [
        "🇰🇷 SunHi - 한국 여성",
        "🇰🇷 BongJin - 한국 남성"
    ],
    "🇨🇳 Trung Quốc": [
        "🇨🇳 Xiaoxiao - 中文女声",
        "🇨🇳 Yunxi - 中文男声"
    ],
    "🇷🇺 Nga": [
        "🇷🇺 Svetlana - Русская",
        "🇷🇺 Dmitry - Русский"
    ],
    "🇵🇹 Bồ Đào Nha": [
        "🇵🇹 Francisca - Portuguesa",
        "🇵🇹 Antonio - Português"
    ],
    "🇸🇦 Ả Rập": [
        "🇸🇦 Zariyah - عربية",
        "🇸🇦 Hamed - عربي"
    ]
}

def update_voices(country):
    """Update voice choices based on selected country"""
    if country in voice_choices_by_country:
        voices = voice_choices_by_country[country]
        return gr.Dropdown(choices=voices, value=voices[0])
    else:
        # Default to Vietnamese voices
        default_voices = voice_choices_by_country["🇻🇳 Việt Nam"]
        return gr.Dropdown(choices=default_voices, value=default_voices[0])

# Lightweight CSS - optimized for performance  
css = """

* {

    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

}



.gradio-container {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



/* Critical fix for dropdown interaction */

.gradio-container * {

    pointer-events: auto;

}



/* Hide Gradio footer */

.footer {

    display: none !important;

}



/* Pulsing animation for processing status */

@keyframes pulse-processing {

    0% {

        opacity: 1;

        transform: scale(1);

        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);

    }

    50% {

        opacity: 0.8;

        transform: scale(1.02);

        box-shadow: 0 6px 25px rgba(255, 193, 7, 0.6);

    }

    100% {

        opacity: 1;

        transform: scale(1);

        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);

    }

}



.status-processing {

    animation: pulse-processing 1.5s ease-in-out infinite;

    background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%) !important;

}



/* Success status animation */

@keyframes pulse-success {

    0% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.9;

        transform: scale(1.01);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}



.status-success {

    animation: pulse-success 2s ease-in-out 3;

    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%) !important;

}



/* Custom footer to cover Gradio attribution */

.custom-footer {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(135deg, #4A90E2 0%, #2E86AB 70%, #FF8A65 85%, #FF6B9D 100%);

    color: white;

    padding: 15px;

    text-align: center;

    font-weight: bold;

    z-index: 1000;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

}



/* Add padding to body to account for fixed footer */

body {

    padding-bottom: 60px;

}



/* Mobile-first responsive design */

.input-card {

    background: rgba(255,255,255,0.95);

    border-radius: 16px;

    padding: 16px;

    margin: 10px 0;

    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

    backdrop-filter: blur(10px);

}



.output-area {

    background: rgba(255,255,255,0.95);

    border-radius: 16px;

    padding: 16px;

    margin: 15px 0;

    min-height: 200px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

}



.examples-section {

    background: rgba(255,255,255,0.9);

    border-radius: 16px;

    padding: 16px;

    margin: 20px 0;

}



.main-header {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    padding: 20px;

    border-radius: 10px;

    margin-bottom: 20px;

    text-align: center;

}



.feature-box {

    background: #f8f9fa;

    padding: 15px;

    border-radius: 8px;

    margin: 10px 0;

    border-left: 4px solid #667eea;

}



.status-indicator {

    display: inline-block;

    padding: 5px 10px;

    border-radius: 15px;

    font-size: 12px;

    font-weight: bold;

    margin: 5px;

}



.status-success {

    background-color: #d4edda;

    color: #155724;

}



.status-processing {

    background-color: #fff3cd;

    color: #856404;

}



.comparison-section {

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 15px;

    margin: 10px 0;

    background: #fafafa;

}



.language-label {

    font-weight: bold;

    color: #667eea;

    padding: 5px 10px;

    background: #f0f2ff;

    border-radius: 15px;

    display: inline-block;

    margin-bottom: 10px;

    font-size: 14px;

}



.content-compare {

    background: white;

    border: 1px solid #ddd;

    border-radius: 6px;

    padding: 12px;

    min-height: 120px;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.5;

}



/* Reset any problematic dropdown styles */

.gradio-container * {

    pointer-events: auto;

}



/* Remove any potential blocking overlays */

.gradio-container::before,

.gradio-container::after {

    display: none;

}



/* Ensure all interactive elements work */

button, select, input, textarea, .gr-dropdown {

    pointer-events: auto !important;

    position: relative !important;

}



/* Simple dropdown fix without complex selectors */

[class*="dropdown"] {

    position: relative !important;

    z-index: 999 !important;

}



[class*="dropdown"] * {

    pointer-events: auto !important;

}



/* Make sure no overlay blocks clicks */

.gradio-container .gr-form {

    position: relative;

    z-index: 1;

}



.gradio-container .gr-block {

    position: relative;

    z-index: 1;

}



.mobile-button {

    width: 100% !important;

    padding: 15px !important;

    font-size: 1.1em !important;

    margin: 20px 0 !important;

    border-radius: 12px !important;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;

    border: none !important;

    color: white !important;

    font-weight: bold !important;

    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;

    transition: all 0.3s ease !important;

    cursor: pointer !important;

    position: relative !important;

    overflow: hidden !important;

}



.mobile-button:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;

    background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%) !important;

}



.mobile-button:active {

    transform: translateY(0px) !important;

    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3) !important;

}



/* Ripple effect for button */

.mobile-button::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



.mobile-button:active::before {

    width: 300px;

    height: 300px;

}



/* Loading spinner animation */

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.loading-spinner {

    display: inline-block;

    width: 20px;

    height: 20px;

    border: 3px solid rgba(255,255,255,0.3);

    border-radius: 50%;

    border-top-color: white;

    animation: spin 1s ease-in-out infinite;

    margin-right: 10px;

}



/* Button pulse effect when processing */

@keyframes pulse {

    0% {

        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

    }

    50% {

        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);

    }

    100% {

        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

    }

}



.button-processing {

    animation: pulse 2s ease-in-out infinite;

    background: linear-gradient(135deg, #FF8E53 0%, #FF6B6B 100%) !important;

}



.mobile-textbox textarea {

    border-radius: 10px !important;

    border: 2px solid #e0e0e0 !important;

    padding: 12px !important;

    font-size: 1em !important;

    line-height: 1.5 !important;

}



.mobile-compare textarea {

    border-radius: 8px !important;

    border: 1px solid #ddd !important;

    padding: 10px !important;

    background: #fafafa !important;

    font-size: 0.95em !important;

}



.mobile-audio {

    margin: 10px 0 !important;

    border-radius: 10px !important;

}



.mobile-file {

    margin: 10px 0 !important;

    border-radius: 10px !important;

}



/* Beautiful Markdown styling for Voice RAG responses */

.markdown-response {

    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);

    border-radius: 12px;

    padding: 20px;

    margin: 15px 0;

    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

    border-left: 4px solid #4CAF50;

}



.markdown-response h1 {

    color: #2e7d32;

    border-bottom: 2px solid #4CAF50;

    padding-bottom: 10px;

    margin-bottom: 20px;

    font-size: 1.8em;

}



.markdown-response h2 {

    color: #388E3C;

    margin-top: 25px;

    margin-bottom: 15px;

    font-size: 1.4em;

    border-left: 3px solid #4CAF50;

    padding-left: 15px;

}



.markdown-response h3 {

    color: #43A047;

    margin-top: 20px;

    margin-bottom: 12px;

    font-size: 1.2em;

}



.markdown-response p {

    line-height: 1.6;

    margin-bottom: 12px;

    color: #333;

}



.markdown-response blockquote {

    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);

    border-left: 4px solid #4CAF50;

    padding: 15px 20px;

    margin: 15px 0;

    border-radius: 8px;

    font-style: italic;

    color: #2e7d32;

}



.markdown-response table {

    width: 100%;

    border-collapse: collapse;

    margin: 15px 0;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    border-radius: 8px;

    overflow: hidden;

}



.markdown-response table th {

    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);

    color: white;

    padding: 12px 15px;

    text-align: left;

    font-weight: bold;

}



.markdown-response table td {

    padding: 12px 15px;

    border-bottom: 1px solid #e0e0e0;

    background: white;

}



.markdown-response table tr:nth-child(even) td {

    background: #f8fffe;

}



.markdown-response table tr:hover td {

    background: #e8f5e8;

    transition: background 0.3s ease;

}



.markdown-response ul, .markdown-response ol {

    margin: 15px 0;

    padding-left: 25px;

}



.markdown-response li {

    margin-bottom: 8px;

    line-height: 1.5;

}



.markdown-response code {

    background: #f5f5f5;

    border: 1px solid #e0e0e0;

    border-radius: 4px;

    padding: 2px 6px;

    font-family: 'Courier New', monospace;

    color: #d32f2f;

}



.markdown-response pre {

    background: #f5f5f5;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 15px;

    overflow-x: auto;

    margin: 15px 0;

}



.markdown-response pre code {

    background: none;

    border: none;

    padding: 0;

    color: #333;

}



.markdown-response hr {

    border: none;

    height: 2px;

    background: linear-gradient(90deg, transparent, #4CAF50, transparent);

    margin: 25px 0;

}



.markdown-response strong {

    color: #2e7d32;

    font-weight: bold;

}



.markdown-response em {

    color: #388E3C;

    font-style: italic;

}



/* Responsive design for markdown */

@media (max-width: 768px) {

    .markdown-response {

        padding: 15px;

        margin: 10px 0;

    }

    

    .markdown-response table {

        font-size: 0.9em;

    }

    

    .markdown-response h1 {

        font-size: 1.6em;

    }

    

    .markdown-response h2 {

        font-size: 1.3em;

    }

}



/* Mobile responsive breakpoints */

@media (max-width: 768px) {

    .gradio-container {

        padding: 10px !important;

    }

    

    .input-card {

        padding: 12px !important;

        margin: 8px 0 !important;

    }

    

    .output-area {

        padding: 12px !important;

        margin: 10px 0 !important;

    }

    

    .examples-section {

        padding: 12px !important;

    }

    

    .main-header h2 {

        font-size: 1.5em !important;

    }

    

    .main-header p {

        font-size: 1em !important;

    }

    

    /* Mobile layout adjustments - less aggressive */

    .gr-row {

        flex-direction: column;

    }

    

    .gr-column {

        width: 100%;

        margin-bottom: 15px;

    }

}



@media (max-width: 480px) {

    .gradio-container {

        padding: 5px !important;

    }

    

    .input-card {

        padding: 10px !important;

        margin: 5px 0 !important;

    }

    

    .main-header {

        padding: 15px !important;

    }

    

    .main-header h2 {

        font-size: 1.3em !important;

    }

    

    .mobile-button {

        padding: 12px !important;

        font-size: 1em !important;

    }

}



/* JavaScript for button interactions */

"""

# Add JavaScript for button effects
js_code = """

<script>

function addButtonEffects() {

    // Find button by class since Gradio might change IDs

    const buttons = document.querySelectorAll('.mobile-button');

    

    buttons.forEach(button => {

        // Remove existing listeners to avoid duplicates

        button.removeEventListener('click', handleClick);

        

        // Add enhanced click effect

        button.addEventListener('click', handleClick);

        

        // Add hover effects for better interaction

        button.addEventListener('mouseenter', function() {

            if (!this.disabled) {

                this.style.transform = 'translateY(-2px) scale(1.02)';

            }

        });

        

        button.addEventListener('mouseleave', function() {

            if (!this.disabled) {

                this.style.transform = 'translateY(0) scale(1)';

            }

        });

    });

}



function handleClick(e) {

    const button = e.target;

    

    // Immediate visual feedback

    button.style.transform = 'scale(0.98)';

    button.style.transition = 'all 0.1s ease';

    

    setTimeout(() => {

        button.style.transform = 'scale(1)';

        button.style.transition = 'all 0.3s ease';

    }, 100);

    

    // Add processing state

    const originalText = button.innerHTML;

    button.innerHTML = '<span class="loading-spinner"></span>⏳ ĐANG XỬ LÝ...';

    button.classList.add('button-processing');

    button.disabled = true;

    

    // Monitor for completion and reset

    let checkCount = 0;

    const checkInterval = setInterval(() => {

        checkCount++;

        

        // Reset after 15 seconds max or if status changes

        const statusElements = document.querySelectorAll('[style*="Hoàn thành"]');

        if (statusElements.length > 0 || checkCount > 50) {

            clearInterval(checkInterval);

            button.innerHTML = originalText;

            button.classList.remove('button-processing');

            button.disabled = false;

            button.style.transform = 'scale(1)';

        }

    }, 300);

}



// Initialize when DOM is ready

if (document.readyState === 'loading') {

    document.addEventListener('DOMContentLoaded', addButtonEffects);

} else {

    addButtonEffects();

}



// Re-initialize periodically for Gradio updates

setInterval(addButtonEffects, 2000);

</script>

"""

# Create interface with tabs
with gr.Blocks(css=css, title="🎙️ Voice AI Platform - Voice RAG & Audio Translation") as demo:
    # Simplified header for faster loading on HF Spaces
    if not (os.environ.get("SPACE_ID") or os.environ.get("HF_SPACE_ID")):
        # Only load complex microphone permissions in local development
        gr.HTML("""

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="Permissions-Policy" content="microphone=*, camera=*, display-capture=*, autoplay=*">

        <meta http-equiv="Feature-Policy" content="microphone 'self' *; camera 'self' *; autoplay 'self' *">

        <meta name="theme-color" content="#4A90E2">

    

    <script>

    // Global microphone management

    window.microphoneStatus = {

        granted: false,

        requested: false,

        supported: false

    };

    

    // Enhanced microphone permission request for iframe and main window

    function initializeMicrophoneSupport() {

        console.log('🎤 Initializing microphone support...');

        

        // Check browser support

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

            window.microphoneStatus.supported = true;

            console.log('✅ Browser supports microphone');

            

            // Check current permission status

            if (navigator.permissions) {

                navigator.permissions.query({name: 'microphone'}).then(function(result) {

                    console.log('🔐 Current microphone permission:', result.state);

                    window.microphoneStatus.granted = (result.state === 'granted');

                    

                    // Update UI based on permission status

                    updateMicrophoneUI(result.state);

                    

                    // Listen for permission changes

                    result.onchange = function() {

                        console.log('🔄 Microphone permission changed to:', this.state);

                        window.microphoneStatus.granted = (this.state === 'granted');

                        updateMicrophoneUI(this.state);

                    };

                }).catch(function(err) {

                    console.log('⚠️ Permission query failed:', err);

                });

            }

            

            // Auto-request permissions if we're in iframe (with user gesture simulation)

            if (window.location !== window.parent.location && !window.microphoneStatus.requested) {

                console.log('🖼️ Running in iframe - preparing microphone access');

                window.microphoneStatus.requested = true;

                

                // Add a global click listener to request permissions on first interaction

                document.addEventListener('click', function requestOnFirstClick() {

                    if (!window.microphoneStatus.granted) {

                        console.log('👆 First click detected - requesting microphone access');

                        requestMicrophonePermission();

                        document.removeEventListener('click', requestOnFirstClick);

                    }

                }, { once: true });

            }

        } else {

            console.log('❌ Browser does not support microphone');

            window.microphoneStatus.supported = false;

            updateMicrophoneUI('unsupported');

        }

    }

    

    function requestMicrophonePermission() {

        console.log('🎤 Requesting microphone permission...');

        

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

            navigator.mediaDevices.getUserMedia({ 

                audio: {

                    echoCancellation: true,

                    noiseSuppression: true,

                    autoGainControl: true,

                    sampleRate: 44100

                } 

            })

            .then(function(stream) {

                console.log('✅ Microphone access granted');

                window.microphoneStatus.granted = true;

                

                // Stop the stream immediately (we just wanted permission)

                stream.getTracks().forEach(track => track.stop());

                

                updateMicrophoneUI('granted');

                

                // Notify other parts of the app

                window.dispatchEvent(new CustomEvent('microphoneGranted'));

                

            })

            .catch(function(err) {

                console.log('❌ Microphone access denied:', err);

                window.microphoneStatus.granted = false;

                updateMicrophoneUI('denied', err.message);

            });

        }

    }

    

    function updateMicrophoneUI(status, errorMessage = '') {

        // This will be called by the specific UI components

        console.log('🎛️ Updating microphone UI for status:', status);

        window.dispatchEvent(new CustomEvent('microphoneStatusChanged', { 

            detail: { status, errorMessage } 

        }));

    }

    

    // Initialize when DOM is ready

    if (document.readyState === 'loading') {

        document.addEventListener('DOMContentLoaded', initializeMicrophoneSupport);

    } else {

        initializeMicrophoneSupport();

    }

    

    // Also initialize on any dynamic content changes (for Gradio updates)

    if (window.MutationObserver) {

        const observer = new MutationObserver(function(mutations) {

            mutations.forEach(function(mutation) {

                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {

                    // Check if audio components were added

                    const hasAudioComponent = Array.from(mutation.addedNodes).some(node => 

                        node.nodeType === 1 && (

                            node.querySelector && (

                                node.querySelector('audio') || 

                                node.querySelector('[data-testid*="audio"]') ||

                                node.classList.contains('audio')

                            )

                        )

                    );

                    

                    if (hasAudioComponent) {

                        console.log('🔄 Audio component detected, re-initializing microphone');

                        setTimeout(initializeMicrophoneSupport, 500);

                    }

                }

            });

        });

        

        observer.observe(document.body, {

            childList: true,

            subtree: true

        });

    }

    </script>

    

    <div style="text-align: center; background: linear-gradient(135deg, #4A90E2 0%, #FF6B9D 100%); color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">

        <h1>🎙️ Voice AI Platform</h1>

        <p>Voice RAG, Audio Translation và Voice Studio - Nền tảng AI giọng nói toàn diện</p>

        <div style="margin-top: 10px; font-size: 14px; opacity: 0.9;">

            ✨ Tính năng mới: Voice RAG với 24 giọng nói đa ngôn ngữ

        </div>

        <div style="margin-top: 8px;">🧠 <strong>Digitized Brains</strong></div>

    </div>

    """)
    else:
        # Production mode - minimal header
        gr.HTML('<div style="text-align:center;"><h1>🎙️ Voice AI Platform</h1></div>')
    
    with gr.Tabs():
        # Tab 1: Voice RAG
        with gr.TabItem("📚 Voice RAG"):
            # Header section with hf_voice style
            gr.HTML("""

            <div style="display: flex; justify-content: center; gap: 15px; margin: 20px 0; flex-wrap: wrap;">

                <div style="background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 140px;">

                    <h4>📚 Voice RAG</h4>

                    <p style="margin: 0; font-size: 12px;">Hỏi đáp tài liệu thông minh</p>

                </div>

                <div style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 140px;">

                    <h4>🌍 Multi-Language</h4>

                    <p style="margin: 0; font-size: 12px;">13 ngôn ngữ trả lời</p>

                </div>

                <div style="background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 140px;">

                    <h4>🎤 Voice Output</h4>

                    <p style="margin: 0; font-size: 12px;">24 giọng nói đa dạng</p>

                </div>

                <div style="background: linear-gradient(135deg, #A8E6CF 0%, #88D8A3 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 140px;">

                    <h4>🔄 AI Gemini</h4>

                    <p style="margin: 0; font-size: 12px;">Gemini 2.0 Flash</p>

                </div>

            </div>

            """)
            
            gr.Markdown("### 📝 Upload tài liệu và đặt câu hỏi")
            
            # Input section - Mobile optimized
            with gr.Column():
                # Document upload
                with gr.Row():
                    file_upload_rag = gr.File(
                        label="📎 Tải lên tài liệu (PDF, DOCX, TXT)", 
                        file_types=[".pdf", ".docx", ".txt"]
                    )
                
                # Question input
                with gr.Row():
                    question_input_rag = gr.Textbox(
                        label="❓ Câu hỏi của bạn",
                        placeholder="Hãy đặt câu hỏi về nội dung tài liệu...",
                        lines=3
                    )
                
                # Language selection for answer
                with gr.Row():
                    answer_language_dropdown_rag = gr.Dropdown(
                        choices=SUPPORTED_LANGUAGES,
                        value="Vietnamese",
                        label="🌍 Ngôn ngữ trả lời"
                    )
                
                # Voice selection từ Voice Studio
                with gr.Row():
                    with gr.Column(scale=1):
                        rag_country_dropdown = gr.Dropdown(
                            choices=list(voice_choices_by_country.keys()),
                            value="🇻🇳 Việt Nam",
                            label="🌍 Chọn quốc gia giọng nói"
                        )
                    
                    with gr.Column(scale=1):
                        rag_voice_dropdown = gr.Dropdown(
                            choices=voice_choices_by_country["🇻🇳 Việt Nam"],
                            value="🇻🇳 HoaiMy - Nữ Việt Chuẩn",
                            label="🎭 Chọn giọng nói"
                        )
                
                # Format selection for download
                with gr.Row():
                    rag_text_format_dropdown = gr.Dropdown(
                        choices=["Markdown (.md)", "TXT (.txt)", "Word (.docx)"] if DOCX_AVAILABLE else ["Markdown (.md)", "TXT (.txt)"],
                        value="Markdown (.md)",
                        label="📄 Định dạng file trả lời"
                    )
                
                # Process button
                with gr.Row():
                    submit_btn_rag = gr.Button(
                        "🚀 Xử lý tài liệu và trả lời", 
                        variant="primary",
                        size="lg"
                    )
            
            # Results section - Mobile optimized
            with gr.Column():
                # Document info section
                with gr.Accordion("📄 Thông tin tài liệu", open=True):
                    detected_doc_language_rag = gr.Textbox(
                        label="🌐 Ngôn ngữ tài liệu được phát hiện",
                        lines=1,
                        interactive=False,
                        placeholder="Tự động nhận diện ngôn ngữ tài liệu..."
                    )
                
                # Text answer section
                with gr.Accordion("💬 Câu trả lời", open=True):
                    gr.HTML("""

                    <div style="

                        background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);

                        padding: 15px;

                        border-radius: 12px;

                        margin: 15px 0;

                        border-left: 4px solid #4CAF50;

                        text-align: center;

                    ">

                        <h4 style="margin: 0 0 10px 0; color: #2e7d32;">💬 AI Response with Markdown Formatting</h4>

                        <p style="color: #388E3C; margin: 0; font-style: italic;">

                            Formatted response with tables, headers, and beautiful layout

                        </p>

                    </div>

                    """)
                    
                    answer_output_rag = gr.Markdown(
                        value="**Câu trả lời sẽ xuất hiện ở đây sau khi xử lý...**\n\n*Hỗ trợ format Markdown với tables, headers, lists và nhiều style khác*",
                        label="",
                        show_label=False,
                        elem_classes=["markdown-response"]
                    )
                
                # Downloads section - Mobile optimized
                with gr.Accordion("💾 Tải xuống kết quả", open=True):
                    gr.HTML("""

                    <div style="text-align: center; margin-bottom: 15px;">

                        <p style="color: #666; font-style: italic;">Tải xuống câu trả lời dưới dạng file và audio</p>

                    </div>

                    """)
                    
                    # Stack vertically on mobile
                    with gr.Column():
                        # Audio download section
                        with gr.Row():
                            audio_output_rag = gr.Audio(
                                label="🔊 Audio câu trả lời",
                                type="filepath"
                            )
                        
                        # Text download section  
                        with gr.Row():
                            text_output_rag = gr.File(
                                label="📄 Văn bản câu trả lời",
                                file_count="single",
                                file_types=[".md", ".txt", ".docx"]
                            )
            
            # Status indicator for RAG
            rag_status_text = gr.HTML("""

            <div style="text-align: center; margin: 20px 0;">

                <div style="

                    background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);

                    color: white;

                    padding: 15px;

                    border-radius: 12px;

                    box-shadow: 0 4px 15px rgba(78,205,196,0.3);

                ">

                    <span style="font-weight: bold; font-size: 1.1em;">✅ Sẵn sàng xử lý tài liệu</span>

                </div>

            </div>

            """)
            
            # Helper function for RAG format
            def get_rag_format_from_dropdown(format_choice):
                if "Word" in format_choice or "docx" in format_choice:
                    return "docx"
                elif "Markdown" in format_choice or "md" in format_choice:
                    return "md"
                return "txt"
            
            # RAG processing function
            def update_rag_status_processing():
                return """

                <div style="text-align: center; margin: 20px 0;">

                    <div style="

                        background: linear-gradient(135deg, #FF8E53 0%, #FF6B6B 100%);

                        color: white;

                        padding: 15px;

                        border-radius: 12px;

                        box-shadow: 0 4px 15px rgba(255,142,83,0.3);

                    ">

                        <span style="font-weight: bold; font-size: 1.1em;">⏳ Đang xử lý tài liệu...</span>

                    </div>

                </div>

                """
            
            def update_rag_status_complete():
                return """

                <div style="text-align: center; margin: 20px 0;">

                    <div style="

                        background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);

                        color: white;

                        padding: 15px;

                        border-radius: 12px;

                        box-shadow: 0 4px 15px rgba(78,205,196,0.3);

                    ">

                        <span style="font-weight: bold; font-size: 1.1em;">✅ Xử lý hoàn thành!</span>

                    </div>

                </div>

                """
            
            # Event handlers for Voice RAG
            rag_country_dropdown.change(
                fn=update_voices,
                inputs=[rag_country_dropdown],
                outputs=[rag_voice_dropdown]
            )
            
            submit_btn_rag.click(
                fn=lambda: update_rag_status_processing(),
                outputs=[rag_status_text]
            ).then(
                fn=lambda file, question, lang, voice, fmt: voice_rag_pipeline(file, question, lang, voice, get_rag_format_from_dropdown(fmt)),
                inputs=[file_upload_rag, question_input_rag, answer_language_dropdown_rag, rag_voice_dropdown, rag_text_format_dropdown],
                outputs=[answer_output_rag, detected_doc_language_rag, audio_output_rag, text_output_rag]
            ).then(
                fn=lambda: update_rag_status_complete(),
                outputs=[rag_status_text]
            )
        
        # Voice Studio Tab
        with gr.TabItem("🎤 Voice Studio"):
            gr.HTML("""

            <div style="display: flex; justify-content: center; gap: 15px; margin: 20px 0; flex-wrap: wrap;">

                <div style="background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>🇻🇳 Tiếng Việt</h4>

                    <p style="margin: 0; font-size: 12px;">2 giọng chuẩn</p>

                    <p style="margin: 0; font-size: 10px;">HoaiMy • NamMinh</p>

                </div>

                <div style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>🇺🇸🇬🇧 English</h4>

                    <p style="margin: 0; font-size: 12px;">4 giọng chuẩn</p>

                    <p style="margin: 0; font-size: 10px;">US • UK</p>

                </div>

                <div style="background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>🌍 Đa ngôn ngữ</h4>

                    <p style="margin: 0; font-size: 12px;">20 giọng chuẩn</p>

                    <p style="margin: 0; font-size: 10px;">10 ngôn ngữ</p>

                </div>

            </div>

            """)
            
            gr.Markdown("### 📝 Nhập nội dung và chọn giọng nói")
            
            with gr.Row():
                text_input = gr.Textbox(
                    placeholder="Nhập văn bản cần chuyển thành giọng nói...",
                    lines=4,
                    label="Văn bản",
                    scale=2
                )
            
            with gr.Row():
                with gr.Column(scale=1):
                    country_dropdown = gr.Dropdown(
                        choices=list(voice_choices_by_country.keys()),
                        value="🇻🇳 Việt Nam",
                        label="🌍 Chọn quốc gia"
                    )
                
                with gr.Column(scale=1):
                    voice_dropdown = gr.Dropdown(
                        choices=voice_choices_by_country["🇻🇳 Việt Nam"],
                        value="🇻🇳 HoaiMy - Nữ Việt Chuẩn",
                        label="🎭 Chọn giọng nói"
                    )
            
            with gr.Row():
                with gr.Column(scale=2):
                    speed_slider = gr.Slider(
                        minimum=0.5,
                        maximum=2.0,
                        value=1.0,
                        step=0.1,
                        label="⚡ Tốc độ phát"
                    )
                with gr.Column(scale=1):
                    voice_studio_format_dropdown = gr.Dropdown(
                        choices=["Markdown (.md)", "TXT (.txt)", "Word (.docx)"] if DOCX_AVAILABLE else ["Markdown (.md)", "TXT (.txt)"],
                        value="Markdown (.md)",
                        label="📄 Định dạng file tải xuống"
                    )
            
            # Translation feature
            with gr.Row():
                with gr.Column(scale=1):
                    translate_checkbox = gr.Checkbox(
                        label="🌍 Dịch văn bản trước khi tạo giọng nói",
                        value=False
                    )
                with gr.Column(scale=2):
                    translate_btn = gr.Button("🔄 DỊCH VĂN BẢN", variant="secondary", size="lg", visible=False)
                
            # Show translated text when translation is enabled
            translated_text_output = gr.Textbox(
                label="📝 Văn bản đã dịch",
                lines=3,
                interactive=True,
                visible=False,
                placeholder="Văn bản sau khi dịch sẽ hiển thị ở đây..."
            )
                
            generate_btn = gr.Button("🎵 TẠO GIỌNG NÓI", variant="primary", size="lg")
            
            # Status indicator for Voice Studio
            studio_status_text = gr.HTML("""

            <div style="text-align: center; margin: 20px 0;">

                <div style="

                    background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);

                    color: white;

                    padding: 15px;

                    border-radius: 12px;

                    box-shadow: 0 4px 15px rgba(78,205,196,0.3);

                ">

                    <span style="font-weight: bold; font-size: 1.1em;">⚡ Sẵn sàng tạo giọng nói</span>

                </div>

            </div>

            """)
            
            gr.Markdown("### 🎧 Kết quả âm thanh")
            audio_output_vs = gr.HTML(
                value="<p style='text-align: center; color: #666; padding: 40px;'>Nhấn 'TẠO GIỌNG NÓI' để bắt đầu 🎤</p>"
            )
            
            # Download section for Voice Studio
            with gr.Accordion("💾 Tải xuống kết quả", open=False):
                gr.HTML("""

                <div style="

                    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);

                    padding: 15px;

                    border-radius: 12px;

                    margin: 15px 0;

                    border-left: 4px solid #2196F3;

                    text-align: center;

                ">

                    <h4 style="margin: 0 0 10px 0; color: #1976D2;">📄 Tải xuống văn bản với Markdown formatting</h4>

                    <p style="color: #1565C0; margin: 0; font-style: italic;">

                        File chứa thông tin session, cấu hình giọng nói và technical details

                    </p>

                </div>

                """)
                
                voice_studio_text_output = gr.File(
                    label="📄 Văn bản với thông tin chi tiết",
                    file_count="single",
                    file_types=[".md", ".txt", ".docx"]
                )
            
            # Examples section
            gr.Markdown("### 📚 Ví dụ nhanh")
            with gr.Row():
                example_vn = gr.Button("🇻🇳 Tiếng Việt", size="sm")
                example_en = gr.Button("🇺🇸 English", size="sm") 
                example_de = gr.Button("🇩🇪 Deutsch", size="sm")
                example_translate = gr.Button("🌍 Dịch thuật", size="sm")
            
            # Example button functions
            def load_vn_example():
                return "Xin chào! Chào mừng bạn đến với studio giọng nói.", "🇻🇳 Việt Nam"
            
            def load_en_example():
                return "Hello! Welcome to our voice studio.", "🇺🇸 Hoa Kỳ"
                
            def load_de_example():
                return "Hallo! Willkommen in unserem Sprachstudio.", "🇩🇪 Đức"
            
            def load_translate_example():
                return "Hello! This is an example text for translation.", "🇺🇸 Hoa Kỳ", True
            
            # Translation functions
            def toggle_translation_ui(translate_enabled):
                """Show/hide translation UI elements"""
                return (
                    gr.update(visible=translate_enabled),  # translate_btn
                    gr.update(visible=translate_enabled)   # translated_text_output
                )
            
            def translate_text_interface(text, voice_selection):
                """Translate text for Voice Studio"""
                if not text.strip():
                    return "Vui lòng nhập văn bản trước khi dịch"
                
                target_language = get_target_language_from_voice(voice_selection)
                translated = translate_text_with_gemini(text, target_language)
                return translated
            
            def create_voice_with_translation(original_text, translated_text, translate_enabled, voice_selection, speed, text_format="txt"):
                """Create voice using original or translated text"""
                if translate_enabled and translated_text.strip() and not translated_text.startswith("Lỗi"):
                    # Use translated text
                    return create_audio_voice_studio(translated_text, voice_selection, speed, text_format)
                else:
                    # Use original text
                    return create_audio_voice_studio(original_text, voice_selection, speed, text_format)
                
            # Event handlers for Voice Studio
            country_dropdown.change(
                fn=update_voices,
                inputs=[country_dropdown],
                outputs=[voice_dropdown]
            )
            
            example_vn.click(
                fn=load_vn_example,
                outputs=[text_input, country_dropdown]
            )
            
            example_en.click(
                fn=load_en_example,
                outputs=[text_input, country_dropdown]
            )
            
            example_de.click(
                fn=load_de_example,
                outputs=[text_input, country_dropdown]
            )
            
            example_translate.click(
                fn=load_translate_example,
                outputs=[text_input, country_dropdown, translate_checkbox]
            )
            
            # Translation UI toggle
            translate_checkbox.change(
                fn=toggle_translation_ui,
                inputs=[translate_checkbox],
                outputs=[translate_btn, translated_text_output]
            )
            
            # Translation button
            translate_btn.click(
                fn=translate_text_interface,
                inputs=[text_input, voice_dropdown],
                outputs=[translated_text_output]
            )
            
            # Helper function to extract format and process Voice Studio
            def process_voice_studio(original_text, translated_text, translate_enabled, voice_selection, speed, format_choice):
                """Process Voice Studio with format support"""
                # Extract format from dropdown
                if "Markdown" in format_choice:
                    text_format = "md"
                elif "Word" in format_choice:
                    text_format = "docx"
                else:
                    text_format = "txt"
                
                return create_voice_with_translation(original_text, translated_text, translate_enabled, voice_selection, speed, text_format)
            
            # Generate voice with translation support
            generate_btn.click(
                fn=process_voice_studio,
                inputs=[text_input, translated_text_output, translate_checkbox, voice_dropdown, speed_slider, voice_studio_format_dropdown],
                outputs=[audio_output_vs, voice_studio_text_output]
            )
        
        # Audio Translation Tab
        with gr.TabItem("🎙️ Audio Translation"):
            # Colorful feature cards like Voice Studio
            gr.HTML("""

            <div style="display: flex; justify-content: center; gap: 15px; margin: 20px 0; flex-wrap: wrap;">

                <div style="background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>🎤 Ghi âm</h4>

                    <p style="margin: 0; font-size: 12px;">Microphone</p>

                    <p style="margin: 0; font-size: 10px;">Real-time</p>

                </div>

                <div style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>📁 Upload</h4>

                    <p style="margin: 0; font-size: 12px;">Audio Files</p>

                    <p style="margin: 0; font-size: 10px;">WAV • MP3</p>

                </div>

                <div style="background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>🔄 AI Dịch</h4>

                    <p style="margin: 0; font-size: 12px;">13 ngôn ngữ</p>

                    <p style="margin: 0; font-size: 10px;">Gemini 2.0</p>

                </div>

                <div style="background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%); padding: 15px; border-radius: 10px; color: white; text-align: center; min-width: 150px;">

                    <h4>🎵 Tổng hợp</h4>

                    <p style="margin: 0; font-size: 12px;">Neural TTS</p>

                    <p style="margin: 0; font-size: 10px;">26 giọng</p>

                </div>

            </div>

            """)
            
            # Input section with colorful design
            gr.HTML("""

            <div style="

                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

                color: white;

                padding: 20px;

                border-radius: 15px;

                margin: 20px 0;

                text-align: center;

                box-shadow: 0 8px 32px rgba(0,0,0,0.2);

            ">

                <h3 style="margin: 0 0 10px 0;">🎤 Tải lên file audio hoặc ghi âm trực tiếp</h3>

                <p style="margin: 0; opacity: 0.9; font-size: 0.95em;">

                    Hỗ trợ file WAV, MP3 hoặc ghi âm real-time qua microphone

                </p>

            </div>

            """)
            
            # Enhanced microphone permission notice and controls
            if not (os.environ.get("SPACE_ID") or os.environ.get("HF_SPACE_ID")):
                gr.HTML("""

                <div id="microphone-section" style="margin: 15px 0;">

                    <!-- Microphone Status Indicator -->

                    <div id="mic-status" style="

                    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);

                    color: #2e7d32;

                    padding: 12px;

                    border-radius: 8px;

                    margin-bottom: 10px;

                    text-align: center;

                    border: 1px solid #4caf50;

                    display: none;

                ">

                    <strong>🎤 Microphone Ready</strong> - Bạn có thể ghi âm trực tiếp

                </div>

                

                <!-- Microphone Error/Permission Notice -->

                <div id="microphone-notice" style="

                    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);

                    color: #856404;

                    padding: 15px;

                    border-radius: 10px;

                    border: 1px solid #ffeaa7;

                    text-align: center;

                    display: none;

                ">

                    <strong>🎤 Microphone Access Required</strong><br>

                    Để sử dụng ghi âm, vui lòng cho phép truy cập microphone.<br>

                    <button onclick="requestMicrophoneAccess()" style="

                        background: #4caf50; 

                        color: white; 

                        padding: 8px 16px; 

                        border: none;

                        border-radius: 6px;

                        cursor: pointer;

                        margin: 8px 4px;

                    ">🎤 Kích hoạt Microphone</button>

                    <a href="#" onclick="window.open(window.location.href, '_blank')" style="

                        background: #667eea; 

                        color: white; 

                        padding: 8px 16px; 

                        text-decoration: none; 

                        border-radius: 6px;

                        display: inline-block;

                        margin: 8px 4px;

                    ">🔗 Mở cửa sổ mới</a>

                </div>

                

                <!-- Iframe Warning -->

                <div id="iframe-warning" style="

                    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);

                    color: #c62828;

                    padding: 12px;

                    border-radius: 8px;

                    border: 1px solid #f44336;

                    text-align: center;

                    display: none;

                ">

                    <strong>⚠️ Iframe Restriction</strong><br>

                    Microphone có thể bị hạn chế trong iframe. 

                    <a href="#" onclick="window.open(window.location.href, '_blank')" style="color: #c62828; text-decoration: underline;">

                        Mở trong cửa sổ mới

                    </a> để sử dụng đầy đủ tính năng.

                </div>

            </div>

            

            <script>

            // Enhanced microphone permission handling

            let microphoneAccess = false;

            

            function requestMicrophoneAccess() {

                console.log('🎤 Audio Translation: Requesting microphone access...');

                

                // Use global microphone function if available

                if (window.requestMicrophonePermission) {

                    window.requestMicrophonePermission();

                    return;

                }

                

                // Fallback to local implementation

                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

                    navigator.mediaDevices.getUserMedia({ 

                        audio: {

                            echoCancellation: true,

                            noiseSuppression: true,

                            autoGainControl: true,

                            sampleRate: 44100

                        } 

                    })

                    .then(function(stream) {

                        console.log('✅ Audio Translation: Microphone access granted');

                        microphoneAccess = true;

                        

                        // Show success status

                        updateLocalMicrophoneUI('granted');

                        

                        // Stop the stream (we just wanted permission)

                        stream.getTracks().forEach(track => track.stop());

                        

                        // Trigger Gradio audio component refresh

                        setTimeout(() => {

                            const audioComponents = document.querySelectorAll('[data-testid*="audio"]');

                            audioComponents.forEach(comp => {

                                // Try to trigger a refresh or re-initialization

                                if (comp.click) comp.click();

                            });

                        }, 500);

                        

                        // Update global status if available

                        if (window.microphoneStatus) {

                            window.microphoneStatus.granted = true;

                        }

                        

                    })

                    .catch(function(err) {

                        console.log('❌ Audio Translation: Microphone access denied:', err);

                        updateLocalMicrophoneUI('denied', err.message);

                    });

                } else {

                    console.log('❌ getUserMedia not supported');

                    updateLocalMicrophoneUI('unsupported');

                }

            }

            

            function updateLocalMicrophoneUI(status, errorMessage = '') {

                const micStatus = document.getElementById('mic-status');

                const micNotice = document.getElementById('microphone-notice');

                

                switch(status) {

                    case 'granted':

                        if (micStatus) micStatus.style.display = 'block';

                        if (micNotice) micNotice.style.display = 'none';

                        microphoneAccess = true;

                        break;

                        

                    case 'denied':

                        if (micNotice) {

                            micNotice.style.display = 'block';

                            micNotice.innerHTML = `

                                <strong>❌ Microphone Access Denied</strong><br>

                                Lỗi: ${errorMessage}<br>

                                Vui lòng kiểm tra cài đặt trình duyệt và cho phép microphone.

                                <br><br>

                                <button onclick="requestMicrophoneAccess()" style="

                                    background: #ff9800; 

                                    color: white; 

                                    padding: 8px 16px; 

                                    border: none;

                                    border-radius: 6px;

                                    cursor: pointer;

                                    margin: 4px;

                                ">🔄 Thử lại</button>

                                <button onclick="window.open(window.location.href, '_blank')" style="

                                    background: #2196f3; 

                                    color: white; 

                                    padding: 8px 16px; 

                                    border: none;

                                    border-radius: 6px;

                                    cursor: pointer;

                                    margin: 4px;

                                ">🔗 Mở cửa sổ mới</button>

                            `;

                        }

                        break;

                        

                    case 'unsupported':

                        if (micNotice) {

                            micNotice.style.display = 'block';

                            micNotice.innerHTML = `

                                <strong>❌ Microphone Not Supported</strong><br>

                                Trình duyệt của bạn không hỗ trợ ghi âm.<br>

                                Vui lòng sử dụng Chrome, Firefox, Safari hoặc Edge phiên bản mới.

                                <br><br>

                                <a href="https://caniuse.com/stream" target="_blank" style="

                                    color: #856404;

                                    text-decoration: underline;

                                ">Kiểm tra tương thích trình duyệt</a>

                            `;

                        }

                        break;

                        

                    default:

                        if (micNotice) {

                            micNotice.style.display = 'block';

                        }

                        break;

                }

            }

            

            // Listen for global microphone events

            window.addEventListener('microphoneStatusChanged', function(event) {

                console.log('🔄 Audio Translation: Received microphone status update:', event.detail);

                updateLocalMicrophoneUI(event.detail.status, event.detail.errorMessage);

            });

            

            window.addEventListener('microphoneGranted', function() {

                console.log('✅ Audio Translation: Global microphone granted');

                updateLocalMicrophoneUI('granted');

            });

            

            // Check microphone availability on load

            function checkMicrophoneAvailability() {

                console.log('🔍 Audio Translation: Checking microphone availability...');

                

                // Check global status first

                if (window.microphoneStatus) {

                    if (window.microphoneStatus.granted) {

                        updateLocalMicrophoneUI('granted');

                        return;

                    } else if (!window.microphoneStatus.supported) {

                        updateLocalMicrophoneUI('unsupported');

                        return;

                    }

                }

                

                // Check if we're in an iframe

                if (window.location !== window.parent.location) {

                    console.log('Running in iframe');

                    const iframeWarning = document.getElementById('iframe-warning');

                    if (iframeWarning) {

                        setTimeout(() => {

                            iframeWarning.style.display = 'block';

                        }, 1000);

                    }

                }

                

                // Try to get microphone permissions

                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

                    // Check if we already have permission

                    navigator.permissions.query({name: 'microphone'}).then(function(result) {

                        console.log('Microphone permission status:', result.state);

                        

                        if (result.state === 'granted') {

                            const micStatus = document.getElementById('mic-status');

                            if (micStatus) micStatus.style.display = 'block';

                            microphoneAccess = true;

                        } else if (result.state === 'prompt' || result.state === 'denied') {

                            const micNotice = document.getElementById('microphone-notice');

                            if (micNotice) {

                                setTimeout(() => {

                                    micNotice.style.display = 'block';

                                }, 1500);

                            }

                        }

                        

                        // Listen for permission changes

                        result.onchange = function() {

                            console.log('Microphone permission changed to:', this.state);

                            if (this.state === 'granted') {

                                const micStatus = document.getElementById('mic-status');

                                const micNotice = document.getElementById('microphone-notice');

                                if (micStatus) micStatus.style.display = 'block';

                                if (micNotice) micNotice.style.display = 'none';

                                microphoneAccess = true;

                            }

                        };

                    }).catch(function(err) {

                        console.log('Permission query failed:', err);

                        // Fallback to showing the notice

                        setTimeout(() => {

                            const micNotice = document.getElementById('microphone-notice');

                            if (micNotice) micNotice.style.display = 'block';

                        }, 2000);

                    });

                } else {

                    // Browser doesn't support getUserMedia

                    setTimeout(() => {

                        const micNotice = document.getElementById('microphone-notice');

                        if (micNotice) {

                            micNotice.style.display = 'block';

                            micNotice.innerHTML = `

                                <strong>❌ Microphone Not Supported</strong><br>

                                Trình duyệt không hỗ trợ ghi âm. Vui lòng cập nhật trình duyệt.

                            `;

                        }

                    }, 1000);

                }

            }

            

            // Initialize when DOM is ready

            if (document.readyState === 'loading') {

                document.addEventListener('DOMContentLoaded', checkMicrophoneAvailability);

            } else {

                checkMicrophoneAvailability();

            }

            

            // Re-check periodically for dynamic content

            setInterval(checkMicrophoneAvailability, 5000);

            </script>

            """)
            else:
                # Production mode - simple microphone notice
                gr.HTML('<div style="text-align:center;color:#666;padding:10px;">📎 Upload audio file or use microphone</div>')
            
            audio_input = gr.Audio(
                label="📎 Tải lên file audio hoặc ghi âm trực tiếp",
                type="numpy",  # Use numpy to avoid temp file issues
                sources=["upload", "microphone"],
                show_label=True,
                interactive=True,
                elem_id="audio-input-translation"
            )
            
            # Audio Recording Control Buttons
            with gr.Row():
                save_recording_btn = gr.Button(
                    "💾 Save Recording",
                    variant="secondary",
                    size="sm"
                )
                new_recording_btn = gr.Button(
                    "🎙️ New Record", 
                    variant="primary",
                    size="sm"
                )
            
            # Button descriptions
            gr.HTML("""

            <div style="display: flex; justify-content: space-between; margin: 5px 0 15px 0; font-size: 0.8em; color: #666;">

                <span>💾 Lưu file audio hiện tại vào record_data</span>

                <span>🎙️ Xóa audio hiện tại để ghi âm mới</span>

            </div>

            """)
            
            # Status for recording actions
            recording_status = gr.HTML(
                value="<p style='text-align: center; color: #666; font-style: italic;'>Sẵn sàng ghi âm hoặc tải lên file</p>"
            )
            
            # === RECORDED FILES FUNCTIONS ===
            def refresh_recorded_files():
                """Refresh the list of recorded files"""
                files = get_recorded_files()
                print(f"🔄 Refreshing dropdown - found files: {files}")
                return gr.Dropdown(choices=files, value=None)
            
            def load_recorded_file(filename):
                """Load selected recorded file for playback"""
                print(f"🎵 Loading recorded file: {filename}")
                if filename and filename.strip():
                    file_path = get_recorded_file_path(filename)
                    print(f"📁 Full path: {file_path}")
                    if os.path.exists(file_path):
                        file_size = os.path.getsize(file_path)
                        print(f"✅ File exists, size: {file_size} bytes")
                        
                        try:
                            # Load audio as numpy array for Gradio compatibility
                            import soundfile as sf
                            audio_data, sample_rate = sf.read(file_path)
                            print(f"🎵 Loaded audio: shape={audio_data.shape}, sr={sample_rate}")
                            # Return tuple (sample_rate, audio_data) for Gradio numpy type
                            return (sample_rate, audio_data)
                        except Exception as e:
                            print(f"❌ Error loading audio: {e}")
                            return None
                    else:
                        print(f"❌ File not found: {file_path}")
                        print(f"📁 Directory contents: {os.listdir(os.path.dirname(file_path)) if os.path.exists(os.path.dirname(file_path)) else 'Directory not found'}")
                else:
                    print("❌ No filename provided")
                return None
            
            def use_recorded_for_translation(filename, country, voice, fmt):
                """Use selected recorded file for translation"""
                print(f"🔄 Using recorded file for translation: {filename}")
                if filename and filename.strip():
                    file_path = get_recorded_file_path(filename)
                    print(f"📁 Translation file path: {file_path}")
                    if os.path.exists(file_path):
                        print(f"✅ Starting translation for: {filename}")
                        # Use the same translation function
                        return translate_audio(file_path, country, voice, get_format_from_dropdown(fmt))
                    else:
                        print(f"❌ File not found for translation: {file_path}")
                # Return empty results if no file selected
                print("❌ No file selected for translation")
                return "", "", "", "", None, "", "", None
            
            def prepare_recorded_file_download(filename):
                """Prepare recorded file for download"""
                print(f"📥 Preparing download for: {filename}")
                if filename and filename.strip():
                    file_path = get_recorded_file_path(filename)
                    print(f"📁 Download file path: {file_path}")
                    if os.path.exists(file_path):
                        print(f"✅ File ready for download: {filename}")
                        return file_path
                    else:
                        print(f"❌ Download file not found: {file_path}")
                print("❌ No file selected for download")
                return None
            
            def save_current_recording(audio_file):
                """Save current audio recording to record_data"""
                if audio_file is None:
                    current_files = get_recorded_files()
                    return (
                        "<p style='color: #e74c3c; text-align: center;'>❌ Không có file audio để lưu</p>",
                        gr.Dropdown(choices=current_files, value=None)
                    )
                
                try:
                    saved_path = save_recorded_audio(audio_file)
                    if saved_path:
                        saved_filename = os.path.basename(saved_path)
                        # Get updated file list after saving
                        updated_files = get_recorded_files()
                        print(f"🔄 After save - updated files: {updated_files}")
                        return (
                            f"<p style='color: #27ae60; text-align: center;'>✅ Đã lưu: {saved_filename}</p>",
                            gr.Dropdown(choices=updated_files, value=saved_filename)
                        )
                    else:
                        current_files = get_recorded_files()
                        return (
                            "<p style='color: #e74c3c; text-align: center;'>❌ Lỗi khi lưu file</p>",
                            gr.Dropdown(choices=current_files, value=None)
                        )
                except Exception as e:
                    current_files = get_recorded_files()
                    return (
                        f"<p style='color: #e74c3c; text-align: center;'>❌ Lỗi: {str(e)}</p>",
                        gr.Dropdown(choices=current_files, value=None)
                    )
            
            def clear_audio_for_new_recording():
                """Clear audio input for new recording"""
                return (
                    None,  # Clear audio input
                    "<p style='color: #3498db; text-align: center;'>🎙️ Sẵn sàng ghi âm mới</p>"
                )
            
            def delete_selected_file(filename):
                """Delete selected file and refresh dropdown"""
                if not filename or not filename.strip():
                    current_files = get_recorded_files()
                    return (
                        "<p style='color: #e74c3c; text-align: center;'>❌ Vui lòng chọn file để xóa</p>",
                        gr.Dropdown(choices=current_files, value=None),
                        None  # Clear audio player
                    )
                
                # Delete the file
                delete_result = delete_recorded_file(filename)
                
                # Refresh file list
                updated_files = get_recorded_files()
                
                # Determine status color based on result
                if "✅" in delete_result:
                    status_html = f"<p style='color: #27ae60; text-align: center;'>{delete_result}</p>"
                else:
                    status_html = f"<p style='color: #e74c3c; text-align: center;'>{delete_result}</p>"
                
                return (
                    status_html,
                    gr.Dropdown(choices=updated_files, value=None),
                    None  # Clear audio player
                )
            
            # Recorded Files Management Section
            with gr.Accordion("🎤 File đã ghi âm", open=False):
                gr.HTML("""

                <div style="

                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

                    color: white;

                    padding: 15px;

                    border-radius: 12px;

                    margin: 15px 0;

                    text-align: center;

                ">

                    <h4 style="margin: 0 0 8px 0;">📁 Quản lý file đã ghi</h4>

                    <p style="margin: 0; opacity: 0.9; font-size: 0.9em;">

                        Chọn file từ danh sách để phát lại hoặc dịch thuật

                    </p>

                </div>

                """)
                
                # Refresh button for recorded files
                refresh_files_btn = gr.Button(
                    "🔄 Làm mới danh sách",
                    variant="secondary",
                    size="sm"
                )
                
                # Status display for file operations
                file_operation_status = gr.HTML(
                    value="<p style='text-align: center; color: #666; font-style: italic;'>Chọn file để thực hiện thao tác</p>"
                )
                
                # Dropdown for recorded files  
                initial_files = get_recorded_files()
                print(f"🔍 Initial recorded files: {initial_files}")
                recorded_files_dropdown = gr.Dropdown(
                    choices=initial_files,
                    label="📂 Chọn file đã ghi",
                    info="Các file audio đã được ghi âm trước đó"
                )
                
                # Preview and controls for selected file
                with gr.Row():
                    with gr.Column():
                        # Audio player for selected file
                        recorded_audio_player = gr.Audio(
                            label="🎵 Phát lại file đã chọn",
                            interactive=False,
                            show_label=True,
                            type="numpy"  # Use numpy for better compatibility
                        )
                    
                    with gr.Column():
                        # Action buttons
                        use_for_translation_btn = gr.Button(
                            "🔄 Sử dụng để dịch thuật",
                            variant="primary",
                            size="sm"
                        )
                        
                        with gr.Row():
                            download_recorded_btn = gr.Button(
                                "📥 Tải xuống",
                                variant="secondary", 
                                size="sm"
                            )
                            
                            delete_recorded_btn = gr.Button(
                                "🗑️ Xóa file",
                                variant="stop",
                                size="sm"
                            )
                        
                        # Download link for recorded file
                        download_recorded_file = gr.File(
                            label="📥 File tải xuống",
                            visible=True,
                            file_count="single"
                        )
            
            # Settings section with gradient header
            gr.HTML("""

            <div style="

                background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);

                color: white;

                padding: 18px;

                border-radius: 12px;

                margin: 25px 0 20px 0;

                text-align: center;

                box-shadow: 0 6px 24px rgba(255,107,107,0.3);

            ">

                <h3 style="margin: 0 0 8px 0;">🌍 Cài đặt dịch thuật</h3>

                <p style="margin: 0; opacity: 0.9; font-size: 0.9em;">

                    Chọn ngôn ngữ đích và giọng nói cho kết quả dịch thuật

                </p>

            </div>

            """)
                
            # Separate dropdowns without complex wrappers to avoid CSS conflicts
            target_country_dropdown = gr.Dropdown(
                choices=list(voice_choices_by_country.keys()),
                value="🇻🇳 Việt Nam",
                label="🌍 Chọn quốc gia đích"
            )
            
            target_voice_dropdown = gr.Dropdown(
                choices=voice_choices_by_country["🇻🇳 Việt Nam"],
                value="🇻🇳 HoaiMy - Nữ Việt Chuẩn",
                label="🎭 Chọn giọng nói đích"
            )
            
            text_format_dropdown = gr.Dropdown(
                choices=["Markdown (.md)", "TXT (.txt)", "Word (.docx)"] if DOCX_AVAILABLE else ["Markdown (.md)", "TXT (.txt)"],
                value="Markdown (.md)",
                label="📄 Định dạng file văn bản"
            )
            
            # Colorful action button
            gr.HTML("""

            """)
            
            # Auto-translate on audio upload - no manual button needed
            
            # Results section with colorful headers
            gr.HTML("""

            <div style="

                background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%);

                color: white;

                padding: 18px;

                border-radius: 12px;

                margin: 30px 0 20px 0;

                text-align: center;

                box-shadow: 0 6px 24px rgba(69,183,209,0.3);

            ">

                <h3 style="margin: 0 0 8px 0;">📊 Kết quả xử lý</h3>

                <p style="margin: 0; opacity: 0.9; font-size: 0.9em;">

                    Phiên âm, dịch thuật và tổng hợp giọng nói

                </p>

            </div>

            """)
            
            # Dynamic status indicator
            status_text = gr.HTML("")
            
            # Card-based layout for mobile
            with gr.Column(elem_classes=["output-area"]):
                # Original content card
                gr.HTML("""

                <div style="

                    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);

                    padding: 15px;

                    border-radius: 12px;

                    margin: 15px 0;

                    border-left: 4px solid #2196F3;

                ">

                    <h4 style="margin: 0 0 10px 0; color: #1976D2;">📝 Nội dung gốc từ audio</h4>

                </div>

                """)
                
                transcription_output = gr.Textbox(
                    label="🎯 Phiên âm từ audio",
                    lines=4,
                    interactive=False,
                    placeholder="Nội dung phiên âm từ file audio sẽ hiển thị ở đây...",
                    elem_classes=["mobile-textbox"]
                )
                
                detected_language = gr.Textbox(
                    label="🌐 Ngôn ngữ được phát hiện",
                    lines=1,
                    interactive=False,
                    placeholder="Tự động nhận diện...",
                    elem_classes=["mobile-textbox"]
                )
                            
                
                # Translation result card
                gr.HTML("""

                <div style="

                    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);

                    padding: 15px;

                    border-radius: 12px;

                    margin: 15px 0;

                    border-left: 4px solid #4CAF50;

                ">

                    <h4 style="margin: 0 0 10px 0; color: #388E3C;">✨ Kết quả dịch thuật</h4>

                </div>

                """)
                
                translation_output = gr.Textbox(
                    label="🔄 Nội dung đã dịch",
                    lines=4,
                    interactive=False,
                    placeholder="Bản dịch sẽ hiển thị ở đây...",
                    elem_classes=["mobile-textbox"]
                )
                
                target_language_display = gr.Textbox(
                    label="🎯 Ngôn ngữ đích",
                    lines=1,
                    interactive=False,
                    placeholder="Chưa chọn...",
                    elem_classes=["mobile-textbox"]
                )
                
                # Mobile-friendly comparison section
                with gr.Accordion("🔍 So sánh nội dung", open=False):
                    gr.HTML("""

                    <div style="

                        text-align: center; 

                        margin-bottom: 15px;

                        padding: 10px;

                        background: #f5f5f5;

                        border-radius: 8px;

                    ">

                        <p style="color: #666; font-style: italic; margin: 0;">

                            Xem nội dung gốc và bản dịch để so sánh

                        </p>

                    </div>

                    """)
                    
                    # Stack vertically on mobile for better readability
                    with gr.Column():
                        gr.HTML("""

                        <div style="

                            background: #e3f2fd;

                            padding: 10px;

                            border-radius: 8px;

                            margin: 10px 0;

                            text-align: center;

                            font-weight: bold;

                            color: #1976D2;

                        ">📝 Ngôn ngữ gốc</div>

                        """)
                        original_compare = gr.Textbox(
                            label="",
                            lines=4,
                            interactive=False,
                            show_label=False,
                            placeholder="Nội dung phiên âm từ audio sẽ hiển thị ở đây...",
                            elem_classes=["mobile-compare"]
                        )
                        
                        gr.HTML("""

                        <div style="

                            background: #e8f5e8;

                            padding: 10px;

                            border-radius: 8px;

                            margin: 15px 0 5px 0;

                            text-align: center;

                            font-weight: bold;

                            color: #388E3C;

                        ">✨ Sau khi dịch</div>

                        """)
                        translated_compare = gr.Textbox(
                            label="",
                            lines=4,
                            interactive=False,
                            show_label=False,
                            placeholder="Nội dung sau khi dịch sẽ hiển thị ở đây...",
                            elem_classes=["mobile-compare"]
                        )
                
                # Mobile-optimized download section
                with gr.Accordion("💾 Tải xuống kết quả", open=True):
                    gr.HTML("""

                    <div style="

                        background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);

                        padding: 15px;

                        border-radius: 12px;

                        margin: 15px 0;

                        border-left: 4px solid #FF9800;

                        text-align: center;

                    ">

                        <h4 style="margin: 0 0 10px 0; color: #E65100;">💾 Tải xuống kết quả</h4>

                        <p style="color: #BF360C; margin: 0; font-style: italic;">

                            File audio và văn bản đã dịch

                        </p>

                    </div>

                    """)
                    
                    # Stack downloads vertically for mobile
                    with gr.Column():
                        gr.HTML("""

                        <div style="

                            background: #e3f2fd;

                            padding: 12px;

                            border-radius: 8px;

                            margin: 15px 0 10px 0;

                            text-align: center;

                            font-weight: bold;

                            color: #1976D2;

                        ">🔊 Audio đã dịch</div>

                        """)
                        audio_output_at = gr.Audio(
                            label="🎵 Audio đã dịch",
                            type="filepath",
                            show_label=True,
                            elem_classes=["mobile-audio"],
                            format="wav"  # Specify format explicitly
                        )
                        
                        # Explicit download component for translated audio
                        audio_download_at = gr.File(
                            label="📥 Tải xuống audio đã dịch",
                            file_count="single",
                            file_types=[".wav"],
                            visible=True
                        )
                        
                        gr.HTML("""

                        <div style="

                            background: #e8f5e8;

                            padding: 12px;

                            border-radius: 8px;

                            margin: 25px 0 10px 0;

                            text-align: center;

                            font-weight: bold;

                            color: #388E3C;

                        ">📄 Văn bản đã dịch</div>

                        """)
                        text_output = gr.File(
                            label="",
                            file_count="single",
                            file_types=[".txt", ".docx"],
                            show_label=False,
                            elem_classes=["mobile-file"]
                        )
            
            # Event handlers for Audio Translation with colorful status
            def update_status_processing():
                return """

                <div class="status-processing" style="

                    text-align: center; 

                    margin: 20px 0;

                    padding: 15px;

                    border-radius: 12px;

                    color: white;

                    transition: all 0.3s ease;

                ">

                    <span style="font-weight: bold; font-size: 1.1em;">

                        ⚡ Đang tự động dịch thuật...

                    </span>

                </div>

                """
            
            def update_status_complete():
                return """

                <div class="status-success" style="

                    text-align: center; 

                    margin: 20px 0;

                    padding: 15px;

                    border-radius: 12px;

                    color: white;

                    transition: all 0.3s ease;

                ">

                    <span style="font-weight: bold; font-size: 1.1em;">

                        ✅ Dịch thuật hoàn thành!

                    </span>

                </div>

                """
            
            target_country_dropdown.change(
                fn=update_voices,
                inputs=[target_country_dropdown],
                outputs=[target_voice_dropdown]
            )
            
            # Update target language display when dropdown changes
            target_voice_dropdown.change(
                fn=lambda voice: voice,
                inputs=[target_voice_dropdown],
                outputs=[target_language_display]
            )
            
            # Helper function to extract format
            def get_format_from_dropdown(format_choice):
                if "Markdown" in format_choice:
                    return "md"
                elif "Word" in format_choice:
                    return "docx"
                return "txt"
            
            # Auto-translate when audio is uploaded or changed
            audio_input.change(
                fn=lambda: update_status_processing(),
                outputs=[status_text]
            ).then(
                fn=lambda audio, country, voice, fmt: translate_audio(audio, country, voice, get_format_from_dropdown(fmt)) if audio is not None else ("", "", "📎 Vui lòng tải lên file audio hoặc ghi âm", country, None, "", "", None),
                inputs=[audio_input, target_country_dropdown, target_voice_dropdown, text_format_dropdown],
                outputs=[
                    transcription_output, 
                    detected_language, 
                    translation_output, 
                    target_language_display, 
                    audio_output_at,
                    audio_download_at,
                    original_compare,
                    translated_compare,
                    text_output
                ]
            ).then(
                fn=lambda: update_status_complete(),
                outputs=[status_text]
            ).then(
                fn=refresh_recorded_files,
                outputs=[recorded_files_dropdown]
            )
            
            # === RECORDED FILES EVENT HANDLERS ===
            
            # Save current recording
            save_recording_btn.click(
                fn=save_current_recording,
                inputs=[audio_input],
                outputs=[recording_status, recorded_files_dropdown]
            )
            
            # New recording (clear audio)
            new_recording_btn.click(
                fn=clear_audio_for_new_recording,
                outputs=[audio_input, recording_status]
            )
            
            refresh_files_btn.click(
                fn=refresh_recorded_files,
                outputs=[recorded_files_dropdown]
            )
            
            recorded_files_dropdown.change(
                fn=load_recorded_file,
                inputs=[recorded_files_dropdown],
                outputs=[recorded_audio_player]
            )
            
            use_for_translation_btn.click(
                fn=lambda: update_status_processing(),
                outputs=[status_text]
            ).then(
                fn=use_recorded_for_translation,
                inputs=[recorded_files_dropdown, target_country_dropdown, target_voice_dropdown, text_format_dropdown],
                outputs=[
                    transcription_output, 
                    detected_language, 
                    translation_output, 
                    target_language_display, 
                    audio_output_at,
                    audio_download_at,
                    original_compare,
                    translated_compare,
                    text_output
                ]
            ).then(
                fn=lambda: update_status_complete(),
                outputs=[status_text]
            ).then(
                fn=refresh_recorded_files,
                outputs=[recorded_files_dropdown]
            )
            
            download_recorded_btn.click(
                fn=prepare_recorded_file_download,
                inputs=[recorded_files_dropdown],
                outputs=[download_recorded_file]
            )
            
            delete_recorded_btn.click(
                fn=delete_selected_file,
                inputs=[recorded_files_dropdown],
                outputs=[file_operation_status, recorded_files_dropdown, recorded_audio_player]
            )
    
    # Features section cho Voice RAG
    gr.Markdown("### 📚 Tính năng chính")
    
    with gr.Row():
        with gr.Column():
            gr.HTML("""

            <div style="background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); padding: 20px; border-radius: 15px; color: white; text-align: center; margin: 10px;">

                <h3>📚 Voice RAG</h3>

                <p>Upload tài liệu và đặt câu hỏi. Nhận trả lời bằng giọng nói đa ngôn ngữ.</p>

                <div style="margin-top: 15px;">

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ Hỗ trợ PDF, DOCX, TXT

                    </div>

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ AI Gemini 2.0 Flash

                    </div>

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ 24 giọng nói đa quốc gia

                    </div>

                </div>

            </div>

            """)
        
        with gr.Column():
            gr.HTML("""

            <div style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%); padding: 20px; border-radius: 15px; color: white; text-align: center; margin: 10px;">

                <h3>🌍 Audio Translation</h3>

                <p>Dịch thuật âm thanh sang nhiều ngôn ngữ với giọng nói tự nhiên.</p>

                <div style="margin-top: 15px;">

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ Ghi âm real-time

                    </div>

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ 13 ngôn ngữ chính

                    </div>

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ Edge TTS Neural

                    </div>

                </div>

            </div>

            """)
    
    with gr.Row():
        with gr.Column():
            gr.HTML("""

            <div style="background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%); padding: 20px; border-radius: 15px; color: white; text-align: center; margin: 10px;">

                <h3>🎤 Voice Studio</h3>

                <p>Chuyển văn bản thành giọng nói với nhiều lựa chọn quốc gia và giọng nói.</p>

                <div style="margin-top: 15px;">

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ 13 quốc gia

                    </div>

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ Tích hợp dịch thuật

                    </div>

                    <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px; margin: 5px 0;">

                        ✓ Điều chỉnh tốc độ

                    </div>

                </div>

            </div>

            """)
    
    
    # Footer
    gr.HTML("""

    <div class="custom-footer">

        <div style="display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap;">

            <div style="display: flex; align-items: center; gap: 8px;">

                <div style="background: rgba(255,255,255,0.2); padding: 8px 15px; border-radius: 20px; font-size: 16px;">

                    🧠 DB

                </div>

                <span style="font-size: 18px; font-weight: bold;">Digitized Brains</span>

            </div>

            <div style="font-size: 14px; opacity: 0.9;">

                Voice Studio - AI Powered

            </div>

        </div>

    </div>

    """)
    
    # Add JavaScript for button effects
    gr.HTML(js_code)

if __name__ == "__main__":
    import sys
    import locale
    import os
    
    # Ensure UTF-8 encoding
    if sys.platform == 'win32':
        os.environ['PYTHONIOENCODING'] = 'utf-8'
    
    # Optimize startup for HF Spaces
    print(f"===== Application Startup at {datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')} =====")
    
    # Only create record_data directory when actually needed to speed up startup
    if not os.environ.get("SPACE_ID") and not os.environ.get("HF_SPACE_ID"):
        create_record_data_directory()
        print(f"📁 Record data directory ready: {RECORD_DATA_DIR}")
    else:
        print(f"🏭 Production mode - record_data will be created on first use")
    
    # Set environment variables for iframe support
    os.environ['GRADIO_ALLOW_FLAGGING'] = 'never'
    # Disable Gradio temp directory to prevent file serving issues
    # os.environ['GRADIO_TEMP_DIR'] = '/tmp'
    
    # Hugging Face Spaces configuration - Use standard port 7860 for HF
    if os.environ.get("SPACE_ID") or os.environ.get("HF_SPACE_ID"):
        # HF Spaces standard configuration
        port = 7860
        print("🏭 Using HF Spaces standard port 7860")
    else:
        # Local development
        port = int(os.environ.get("GRADIO_SERVER_PORT", 7880))
        print(f"🖥️ Using local development port {port}")
    
    demo.launch(
        server_name="0.0.0.0",
        server_port=port,
        share=False,
        show_error=True,
        ssr_mode=False,  # Disable SSR to prevent timeout issues on HF Spaces
        enable_monitoring=False  # Disable monitoring for faster startup
    )