import gradio as gr
from gradio_client import Client, handle_file
from deep_translator import GoogleTranslator  # Import GoogleTranslator dari deep_translator
from themes import IndonesiaTheme_2  # Pastikan tema ini telah dibuat atau diimpor dengan benar

# Inisialisasi client untuk API Oryx
client = Client("THUdyh/Oryx")

# Fungsi untuk memanggil API /predict dan menerjemahkan hasilnya
def oryx_inference(multimodal):
    try:
        # Jika terdapat file yang diunggah, siapkan dengan handle_file()
        files = [handle_file(file) for file in multimodal["files"]]
        
        # Panggilan ke API /predict dengan parameter multimodal
        result = client.predict(
            multimodal={"text": multimodal["text"], "files": files},
            api_name="/predict"
        )
        
        # Menerjemahkan hasil ke dalam bahasa Indonesia menggunakan deep_translator
        translated_result = GoogleTranslator(source='auto', target='id').translate(result)
        return translated_result
    except Exception as e:
        return f"Terjadi kesalahan: {str(e)}"

# CSS untuk styling antarmuka
css = """
#col-left, #col-mid {
    margin: 0 auto;
    max-width: 400px;
    padding: 15px;
    border-radius: 10px;
    background-color: #FFFFFF; /* Use a white background for clean look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer shadow */
}

#col-right {
    margin: 0 auto;
    max-width: 400px;
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(180deg, #C5CAE9, #E8EAF6); /* Subtle gradient */
    color: #37474F; /* Dark gray text for better contrast */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#col-bott {
    margin: 0 auto;
    padding: 15px;
    border-radius: 10px;
    background-color: #FFFFFF; /* Same as other columns for consistency */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#banner {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

#run-button {
    background-color: #00796B; /* Teal color for buttons */
    color: white;
    font-weight: bold;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for modern touch */
}

#footer {
    text-align: center;
    margin-top: 20px;
    color: #607D8B; /* Slightly darker text color */
}

#markdown-silver {
    color: #B0BEC5; /* Lighter gray for markdown text */
}

"""

# Interface Gradio menggunakan gr.Blocks
with gr.Blocks(css=css, theme=IndonesiaTheme_2()) as app:
# Tambahkan banner
    gr.HTML("""
        <div style='text-align: center;'>
            <img src='https://i.ibb.co.com/rmXq4Jn/banner03.jpg' alt='Banner' style='width: 100%; height: auto;'/>
        </div>
    """)
    gr.HTML("<h2 style='text-align: center;'>On-Demand Spatial-Temporal Understanding at Arbitrary Resolution</h2>")
    
    # Kolom untuk Input Multimodal dan Tombol Submit
    with gr.Row():
        with gr.Column(elem_id="col-left"):
            # Input teks dan file
            multimodal_input = gr.MultimodalTextbox(
                file_types=[".mp4", "image"],
                placeholder="Masukkan pesan atau unggah file..."
            )
            # Tombol untuk memulai inferensi
            submit_button = gr.Button("Proses", elem_id="run-button")
        
        # Output area untuk hasil terjemahan
        output_text = gr.Textbox(label="Hasil Prediksi AI")

    # Menghubungkan tombol submit ke fungsi inferensi
    submit_button.click(
        fn=oryx_inference,
        inputs=multimodal_input,
        outputs=output_text
    )
    
    # Footer atau Artikel tambahan
    gr.Markdown("""
    <footer id='footer'>
    ### Citation
    ```
    @article{liu2024oryx,
      title={Oryx MLLM: On-Demand Spatial-Temporal Understanding at Arbitrary Resolution},
      author={Liu, Zuyan dan lain-lain},
      journal={arXiv preprint arXiv:2409.12961},
      year={2024}
    }
    ```
    </footer>
    """)

    # Bagian bawah: footer
    gr.Markdown("<footer id='footer'>Integrasi Oryx API dengan Gradio © 2024 | 🇮🇩 Untuk Indonesia Jaya!</footer>")

# Meluncurkan aplikasi
if __name__ == "__main__":
    app.launch(show_error=True)  # Mengaktifkan pelaporan error secara rinci