Update app.py

app.py

@@ -189,3 +189,201 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     """)
 
 demo.launch()
+
+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()
+