app.py

import gradio as gr
import os
import requests
import time

# Daftar model dengan deskripsi
MODELS_INFO = {
    "anthropic/claude-opus-4": {"name": "Claude Opus 4", "description": "Model AI paling canggih Anthropic untuk tugas kompleks"},
    "anthropic/claude-sonnet-4": {"name": "Claude Sonnet 4", "description": "Keseimbangan antara kemampuan dan kecepatan"},
    "deepseek/deepseek-r1-0528": {"name": "DeepSeek R1", "description": "Model bahasa open-source khusus untuk reasoning"},
    "deepseek/deepseek-chat-v3-0324": {"name": "DeepSeek Chat v3", "description": "Dioptimalkan untuk dialog general"},
    "openai/gpt-4.1": {"name": "GPT-4.1", "description": "Generasi penyusun teks OpenAI terbaru"},
    "openai/gpt-4.1-mini": {"name": "GPT-4.1 Mini", "description": "Versi lebih kecil dan cepat dari GPT-4.1"},
    "google/gemini-2.5-pro-preview": {"name": "Gemini 2.5 Pro", "description": "Model Google terbaru untuk pemahaman kompleks"},
    "microsoft/phi-4-reasoning-plus": {"name": "Phi-4 Reasoning", "description": "Pakar penalaran matematika dan logika"},
    "qwen/qwen3-30b-a3b": {"name": "Qwen 30B", "description": "Model bahasa besar dari China"},
    "meta-llama/llama-guard-4-12b": {"name": "Llama Guard 4", "description": "Model khusus untuk moderasi konten"},
    "meta-llama/llama-4-maverick": {"name": "Llama 4 Maverick", "description": "Model kreatif untuk penulisan"},  
    "meta-llama/llama-4-scout": {"name": "Llama 4 Scout", "description": "Direncanakan sebagai penerus Gemini ini"},
    "x-ai/grok-2-vision-1212": {"name": "Grok-2 Vision", "description": "Model multimodal X-AI untuk teks dan gambar"}}
}

# Default models list
MODELS = list(MODELS_INFO.keys())

def chat_with_openrouter(prompt, system_prompt, model):
    try:
        # Konfigurasi API OpenRouter
        api_url = "https://openrouter.ai/api/v1/chat/completions"
        api_key = os.environ.get("OPENROUTER_API_KEY")
        
        # Header untuk autentikasi
        headers = {
            "Authorization": f"Bearer {api_key}",
            "HTTP-Referer": "https://huggingface.co",
            "X-Title": "OpenRouter Space",
        }
        
        # Bangun pesan dengan sistem prompt
        messages = []
        if system_prompt.strip():
            messages.append({"role": "system", "content": system_prompt})
        messages.append({"role": "user", "content": prompt})
        
        # Body request
        data = {
            "model": model,
            "messages": messages,
            "max_tokens": 2048
        }
        
        start_time = time.time()
        
        # Kirim request ke OpenRouter
        response = requests.post(api_url, headers=headers, json=data, timeout=90)
        response.raise_for_status()
        
        # Ekstrak dan kembalikan respons
        result = response.json()
        
        end_time = time.time()
        processing_time = f"\n\n🕒 Waktu pemrosesan: {end_time - start_time:.2f} detik"
        
        return result["choices"][0]["message"]["content"] + processing_time
    
    except Exception as e:
        error_detail = f"{str(e)}"
        if hasattr(e, 'response') and e.response:
            try:
                error_resp = e.response.json()
                error_detail += f"\nError: {error_resp.get('error', {}).get('message', 'Unknown error')}"
            except:
                error_detail += f"\nStatus: {e.response.status_code}\nResponse: {e.response.text[:500]}"
        return f"🚨 Error: {error_detail}"

# CSS Styles
with open("style.css", "r") as f:
    css_content = f.read()

# Buat antarmuka Gradio dengan CSS
with gr.Blocks(css=css_content, theme=gr.themes.Soft()) as demo:
    gr.Markdown("#app-container", visible=False)
    
    # Header Section
    with gr.Column(elem_classes="header"):
        gr.Markdown("""
        # 🤖 Advanced AI Chat Assistant
        Eksplorasi model AI terbaik melalui OpenRouter
        """)
    
    # Main Content
    with gr.Row(elem_classes="content"):
        # Left Controls Panel
        with gr.Column(elem_classes="controls"):
            with gr.Group(elem_classes="model-selector"):
                selected_model = gr.Dropdown(
                    label="Pilih Model AI",
                    choices=MODELS,
                    value="anthropic/claude-opus-4",
                    interactive=True,
                    elem_id="model-dropdown"
                )
                
            # Preview model info cards
            with gr.Group():
                gr.Markdown("### Info Model")
                with gr.Row():
                    for model_id in MODELS:
                        info = MODELS_INFO[model_id]
                        with gr.Column(min_width=250):
                            card = gr.Checkbox(
                                label=f"**{info['name']}**\n{info['description']}",
                                value=(model_id == "anthropic/claude-opus-4"),
                                elem_classes="model-card",
                                elem_id=f"model-card-{model_id}"
                            )
                            card.change(lambda x,m=model_id: m, inputs=[card], outputs=[selected_model])
            
            with gr.Group(elem_classes="system-prompt-area"):
                system_prompt = gr.Textbox(
                    label="Sistem Prompt (Opsional)",
                    placeholder="Contoh: 'Anda adalah ahli bahasa Indonesia yang ramah dan membantu'",
                    lines=5,
                    max_lines=10
                )
            
            with gr.Group(elem_classes="tips"):
                gr.Markdown("### 🚀 Tips Penggunaan")
                gr.Markdown("""
                - Claude Opus: Terbaik untuk tugas kompleks
                - Gemini 2.5: Penalaran kuat dan detail
                - GPT-4.1: Kreativi tinggi dan fleksibel
                - Llama 4: Variasi fungsi khusus
                - **Ctrl+Enter** untuk mengirim prompt
                - Gunakan contoh di bawah untuk memulai
                """)
        
        # Right Chat Panel
        with gr.Column(elem_classes="chat-container"):
            with gr.Column(elem_classes="chat-area"):
                with gr.Group(elem_classes="chat-input"):
                    prompt = gr.Textbox(
                        label="Pertanyaan/Permintaan",
                        placeholder="Tulis pesan untuk AI di sini...",
                        lines=6
                    )
                    with gr.Row():
                        clear_btn = gr.Button("Hapus")
                        submit_btn = gr.Button("Kirim ke AI", elem_classes="btn-submit")
                
                with gr.Group(elem_classes="chat-output"):
                    output = gr.Textbox(
                        label="Respon AI",
                        lines=15,
                        interactive=False
                    )
    
    # Kwamples Section
    with gr.Group(elem_classes="examples"):
        gr.Examples(
            examples=[
                ["Terjemahkan artikel ilmiah ini ke bahasa Indonesia: [...teks ilmiah...]", "", "openai/gpt-4.1"],
                ["Tulis puisi tentang budaya Indonesia dalam gaya Chairil Anwar", "Pakai bahasa Indonesia dengan gaya puisi modern", "anthropic/claude-sonnet-4"],
                ["Jelaskan black hole dalam konsep relativitas umum secara sederhana", "Anda adalah profesor astrofisika yang ramah", "google/gemini-2.5-pro-preview"],
                ["Ubahlah kode ini menjadi lebih efisien: [contoh kode Python]", "Fokus pada penggunaan memori dan kompleksitas algoritma", "microsoft/phi-4-reasoning-plus"]
            ],
            inputs=[prompt, system_prompt, selected_model],
            label="Contoh Permintaan AI"
        )
    
    # Footer
    with gr.Column(elem_classes="footer"):
        gr.Markdown(""" 
        ### Dibangun dengan 🤗
        Powered by [OpenRouter](https://openrouter.ai) | 
        [Sumber Daya API](https://openrouter.ai/docs) | 
        [Statistik Penggunaan](https://openrouter.ai/activity)
        """)
        gr.HTML("""<img src="https://cdn.myportfolio.com/45200424-090f-478b-9be0-85ca9dee2b39/f3a8a7fb-b385-4a7a-8bee-e325c4b9cf9b_rw_600.png?h=fe0a7278654a29de048391005c6d748f" width="200">""")
    
    # Event handlers
    submit_btn.click(
        fn=chat_with_openrouter,
        inputs=[prompt, system_prompt, selected_model],
        outputs=output
    )
    
    clear_btn.click(lambda: ["", ""], outputs=[prompt, output])
    
    prompt.submit(
        fn=chat_with_openrouter,
        inputs=[prompt, system_prompt, selected_model],
        outputs=output
    )

demo.launch()