Update app.py

app.py

@@ -1,196 +1,185 @@
 import gradio as gr
+from transformers import pipeline
 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())
+# Daftar model yang tersedia
+MODELS = {
+    "anthropic/claude-opus-4": "Claude Opus (Anthropic)",
+    "anthropic/claude-sonnet-4": "Claude Sonnet (Anthropic)",
+    "deepseek/deepseek-r1-0528": "DeepSeek R1",
+    "deepseek/deepseek-chat-v3-0324": "DeepSeek Chat",
+    "openai/gpt-4.1": "GPT-4.1 (OpenAI)",
+    "openai/gpt-4.1-mini": "GPT-4.1 Mini (OpenAI)",
+    "google/gemini-2.5-pro-preview": "Gemini 2.5 Pro (Google)",
+    "microsoft/phi-4-reasoning-plus": "Phi-4 Reasoning+ (Microsoft)",
+    "qwen/qwen3-30b-a3b": "Qwen 30B (Alibaba)",
+    "meta-llama/llama-guard-4-12b": "Llama Guard 4 (Meta)",
+    "meta-llama/llama-4-maverick": "Llama 4 Maverick (Meta)",
+    "meta-llama/llama-4-scout": "Llama 4 Scout (Meta)",
+    "x-ai/grok-2-vision-1212": "Grok-2 Vision (xAI)"
+}
 
-def chat_with_openrouter(prompt, system_prompt, model):
+def predict(model_name, prompt):
     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()
+        # Inisialisasi pipeline berdasarkan model yang dipilih
+        pipe = pipeline(
+            "text-generation", 
+            model=model_name,
+            device_map="auto"
+        )
         
-        end_time = time.time()
-        processing_time = f"\n\n🕒 Waktu pemrosesan: {end_time - start_time:.2f} detik"
+        # Generate respons
+        outputs = pipe(
+            prompt,
+            max_new_tokens=256,
+            temperature=0.7,
+            top_p=0.9
+        )
         
-        return result["choices"][0]["message"]["content"] + processing_time
-    
+        return outputs[0]['generated_text']
     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
-        """)
+        return f"Error: {str(e)}"
+
+# CSS kustom untuk antarmuka modern
+custom_css = """
+:root {
+    --primary: #4f46e5;
+    --secondary: #f9fafb;
+    --accent: #8b5cf6;
+    --text: #1f2937;
+    --border: #e5e7eb;
+}
+
+body {
+    background: linear-gradient(135deg, #f0f4ff 0%, #fdf2f8 100%);
+    font-family: 'Inter', sans-serif;
+}
+
+.gr-block {
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    border: 1px solid var(--border);
+}
+
+.dark .gr-block {
+    background-color: #1a1a2e;
+}
+
+h1 {
+    text-align: center;
+    background: linear-gradient(90deg, var(--primary), var(--accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: 800;
+    margin-bottom: 20px;
+}
+
+.model-selector {
+    padding: 20px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.model-selector:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.model-btn {
+    background: white;
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 20px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+
+.model-btn:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.model-btn.active {
+    background: var(--primary);
+    color: white;
+    border-color: var(--primary);
+    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
+}
+
+footer {
+    text-align: center;
+    margin-top: 20px;
+    color: #6b7280;
+    font-size: 0.9em;
+}
+"""
+
+# Buat komponen Gradio
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🤖 Multi-Model AI Playground")
+    gr.Markdown("Pilih model AI dan masukkan prompt untuk menghasilkan teks")
     
-    # 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
-                """)
+    with gr.Row():
+        with gr.Column(scale=3):
+            model_selector = gr.Dropdown(
+                label="Pilih Model",
+                choices=list(MODELS.values()),
+                value="Claude Sonnet (Anthropic)"
+            )
+            prompt = gr.Textbox(
+                label="Input Prompt",
+                placeholder="Ketik pertanyaan atau instruksi di sini...",
+                lines=5
+            )
+            with gr.Row():
+                clear_btn = gr.Button("Hapus")
+                submit_btn = gr.Button("Generate", variant="primary")
         
-        # 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
-                    )
+        with gr.Column(scale=2):
+            output = gr.Textbox(label="Output", 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"
-        )
+    # Tombol model cepat
+    gr.Markdown("### Model Populer:")
+    with gr.Row(elem_classes="centered"):
+        for model_id, model_name in list(MODELS.items())[:5]:
+            gr.Button(
+                model_name.split("(")[0].strip(), 
+                elem_classes="model-btn"
+            ).click(
+                fn=lambda m=model_name: m,
+                inputs=[],
+                outputs=model_selector
+            )
     
-    # 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">""")
+    gr.Markdown("---")
+    gr.Markdown("""
+    <div style="text-align: center">
+    <small>Powered by Hugging Face Spaces | Model tersedia melalui API</small>
+    </div>
+    """)
     
     # Event handlers
     submit_btn.click(
-        fn=chat_with_openrouter,
-        inputs=[prompt, system_prompt, selected_model],
+        fn=lambda m, p: predict(list(MODELS.keys())[list(MODELS.values()).index(m)], p),
+        inputs=[model_selector, prompt],
         outputs=output
     )
     
-    clear_btn.click(lambda: ["", ""], outputs=[prompt, output])
-    
-    prompt.submit(
-        fn=chat_with_openrouter,
-        inputs=[prompt, system_prompt, selected_model],
-        outputs=output
+    clear_btn.click(
+        fn=lambda: ["", ""],
+        inputs=[],
+        outputs=[prompt, output]
     )
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()