Create app.py

app.py

@@ -0,0 +1,392 @@
+import gradio as gr
+import os
+from huggingface_hub import InferenceClient
+import spaces
+
+# Initialize the Cerebras client
+client = InferenceClient(
+    "meta-llama/Llama-3.3-70B-Instruct",
+    provider="cerebras",
+    token=os.getenv("HF_TOKEN"),
+)
+
+# Your specific system prompt
+DEFAULT_SYSTEM_PROMPT = """You are an advanced conversational AI designed to assist users with a wide range of tasks, from answering questions to solving complex problems. Your tone is friendly, professional, and approachable, with a focus on clarity and precision. You aim to emulate the reasoning, helpfulness, and ethical standards of a highly advanced AI model like Claude 3.7. Follow these guidelines in all interactions:
+
+1. **Reasoning and Problem-Solving**:
+   - Approach each query with structured, step-by-step reasoning. Break down complex problems into manageable parts, considering multiple perspectives before providing an answer.
+   - If a question is ambiguous, ask clarifying questions to ensure your response is relevant and accurate.
+   - For analytical tasks, explicitly outline your thought process (e.g., "First, I'll identify the key components of the problem, then evaluate possible solutions").
+   - Use logical frameworks when appropriate, such as weighing pros and cons, considering edge cases, or applying first principles.
+
+2. **Helpfulness and Clarity**:
+   - Provide concise yet comprehensive answers tailored to the user's level of expertise. Avoid jargon unless the user indicates familiarity with the topic.
+   - If a question requires creativity (e.g., brainstorming, writing), generate ideas systematically and explain your choices.
+   - Offer actionable advice or insights when possible, ensuring the user feels supported in their goals.
+
+3. **Ethical and Safe Responses**:
+   - Prioritize user safety and adhere to ethical guidelines. Refuse to generate harmful, illegal, or inappropriate content, and explain why in a polite, non-judgmental manner.
+   - If a request conflicts with ethical principles, suggest alternative ways to assist (e.g., "I can't help with that, but I can provide information on a related topic").
+   - Be mindful of sensitive topics, maintaining neutrality and respect for diverse perspectives.
+
+4. **Conversational Style**:
+   - Maintain a warm, engaging tone that feels human-like and conversational, while remaining professional.
+   - Use natural language, avoiding overly formal or robotic phrasing. Incorporate light humor or relatability when appropriate, but keep it subtle.
+   - Acknowledge the user's intent and emotions (e.g., "I can see you're curious about this!") to build rapport.
+
+5. **Handling Limitations**:
+   - If you lack sufficient information to answer accurately, admit this transparently and suggest how the user might find the answer (e.g., "I don't have enough details to answer fully, but you could check these resources").
+   - For speculative or future-oriented questions, provide reasoned predictions based on trends and patterns, clearly distinguishing between facts and assumptions.
+
+6. **Task-Specific Adaptability**:
+   - For creative tasks (e.g., writing, storytelling), produce vivid, well-structured content that aligns with the user's specifications.
+   - For technical tasks (e.g., coding, math), provide accurate, well-documented solutions with explanations.
+   - For research-oriented tasks, synthesize information logically and cite general sources or trends when applicable (e.g., "Based on recent advancements in AI…").
+
+7. **Self-Reflection**:
+   - Before finalizing your response, evaluate whether it fully addresses the user's query, is logically sound, and aligns with your ethical guidelines.
+   - If a response feels incomplete, revise it to ensure clarity and completeness.
+
+**Example Interaction Framework**:
+- User: "How do I optimize my website for SEO?"
+- Response: "To optimize your website for SEO, let's break this down into key steps. First, I'll explain keyword research, as it's foundational. Then, we'll cover on-page elements like meta tags and content quality, followed by technical SEO, such as site speed. Would you like me to focus on any of these areas specifically, or should I provide a detailed overview of all steps?"
+
+**Starting Point**:
+Begin each interaction by analyzing the user's query carefully. If the query is broad, narrow it down with a clarifying question. If it's specific, dive into the response with clear reasoning. Always aim to leave the user feeling informed, supported, and confident in your response."""
+
+# Custom CSS for better PWA-like experience
+custom_css = """
+/* PWA-friendly mobile responsive styles */
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #1e40af;
+    --background-color: #f8fafc;
+    --surface-color: #ffffff;
+    --text-color: #1e293b;
+    --border-color: #e2e8f0;
+}
+
+/* Make it feel more like a native app */
+.gradio-container {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* Header styling */
+.app-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: white;
+    padding: 1rem;
+    border-radius: 0 0 12px 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+/* Chat area */
+.chat-container {
+    padding: 1rem;
+    background: var(--surface-color);
+    border-radius: 12px;
+    margin: 1rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+/* Control panel */
+.control-panel {
+    background: var(--surface-color);
+    border-radius: 12px;
+    padding: 1rem;
+    margin: 1rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    border: 1px solid var(--border-color);
+}
+
+/* Mobile-friendly button styles */
+.btn-primary {
+    background: var(--primary-color) !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 0.75rem 1.5rem !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
+}
+
+.btn-primary:hover {
+    background: var(--secondary-color) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Input styling */
+.textbox-input {
+    border-radius: 8px !important;
+    border: 2px solid var(--border-color) !important;
+    padding: 0.75rem !important;
+    transition: border-color 0.2s ease !important;
+}
+
+.textbox-input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
+}
+
+/* Status indicators */
+.status-indicator {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: #dcfce7;
+    color: #15803d;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+/* Responsive mobile adjustments */
+@media (max-width: 768px) {
+    .gradio-row {
+        flex-direction: column !important;
+    }
+    
+    .gradio-column {
+        width: 100% !important;
+        padding: 0.5rem !important;
+    }
+    
+    .chat-container,
+    .control-panel {
+        margin: 0.5rem !important;
+        padding: 0.75rem !important;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #1e293b;
+        --surface-color: #334155;
+        --text-color: #f1f5f9;
+        --border-color: #475569;
+    }
+}
+"""
+
+@spaces.GPU
+def chat_with_llama(message, history, system_prompt):
+    # Format messages for the model
+    messages = []
+    
+    # Add system prompt if provided
+    if system_prompt and system_prompt.strip():
+        messages.append({"role": "system", "content": system_prompt.strip()})
+    
+    # Convert history to correct format
+    for msg in history:
+        if isinstance(msg, dict):
+            if msg["role"] == "user":
+                messages.append({"role": "user", "content": msg["content"]})
+            elif msg["role"] == "assistant":
+                messages.append({"role": "assistant", "content": msg["content"]})
+    
+    # Add current message
+    messages.append({"role": "user", "content": message})
+    
+    # Set up generation parameters
+    generation_params = {
+        "messages": messages,
+        "stream": True,
+    }
+    
+    # Stream the response
+    response = ""
+    try:
+        for chunk in client.chat_completion(**generation_params):
+            if hasattr(chunk, 'choices') and len(chunk.choices) > 0:
+                delta = chunk.choices[0].delta
+                if hasattr(delta, 'content') and delta.content:
+                    response += delta.content
+                    yield response
+    except Exception as e:
+        yield f"Error: {str(e)}\n\nNote: Make sure your HF_TOKEN is properly set in the Space settings."
+
+# Create the Gradio interface with PWA-friendly design
+with gr.Blocks(
+    theme=gr.themes.Soft(),
+    css=custom_css,
+    title="Llama Chat - AI Assistant",
+    head="""
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#2563eb">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-title" content="Llama Chat">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    """
+) as demo:
+    
+    # Header section
+    with gr.Row():
+        with gr.Column():
+            gr.HTML("""
+                <div class="app-header">
+                    <h1 style="margin: 0;">🦙 Llama-3.3-70B Chat</h1>
+                    <p style="margin: 0.5rem 0 0 0;">Powered by Cerebras Lightning-fast Inference</p>
+                    <div class="status-indicator" style="margin-top: 0.5rem;">
+                        ✅ Ready to chat
+                    </div>
+                </div>
+            """)
+    
+    # Main interface
+    with gr.Row():
+        with gr.Column(scale=3, elem_classes="chat-container"):
+            # Chat display
+            chatbot = gr.Chatbot(
+                height=500,
+                show_label=False,
+                type='messages',
+                bubble_full_width=False,
+                show_copy_button=True,
+                avatar_images=("👤", "🤖"),
+                elem_id="chatbot"
+            )
+            
+            # Input area with better styling
+            with gr.Row():
+                msg = gr.Textbox(
+                    placeholder="Type your message here...",
+                    show_label=False,
+                    lines=2,
+                    scale=4,
+                    elem_classes="textbox-input"
+                )
+                with gr.Column(scale=1):
+                    send_btn = gr.Button(
+                        "📤 Send", 
+                        variant="primary", 
+                        elem_classes="btn-primary",
+                        size="lg"
+                    )
+                    clear_btn = gr.Button(
+                        "🗑️ Clear", 
+                        elem_classes="btn-secondary",
+                        size="lg"
+                    )
+        
+        with gr.Column(scale=1, elem_classes="control-panel"):
+            # System prompt with better UX
+            gr.Markdown("### 🎯 System Instructions")
+            gr.Markdown("Customize how the AI responds to you")
+            
+            system_prompt = gr.Textbox(
+                value=DEFAULT_SYSTEM_PROMPT,
+                placeholder="Enter your system prompt here...",
+                label="",
+                lines=8,
+                max_lines=15,
+                show_label=False,
+                elem_classes="textbox-input"
+            )
+            
+            # Preset buttons for quick setup
+            gr.Markdown("**Quick Presets:**")
+            with gr.Row():
+                preset_default = gr.Button("🎯 Default", size="sm")
+                preset_creative = gr.Button("🎨 Creative", size="sm")
+                preset_analytical = gr.Button("🔬 Analytical", size="sm")
+    
+    # Footer with app info
+    with gr.Row():
+        gr.HTML("""
+            <div style="text-align: center; padding: 1rem; background: #f8fafc; 
+                        border-radius: 12px; margin: 1rem; border: 1px solid #e2e8f0;">
+                <p style="margin: 0; color: #64748b;">
+                    <strong>🚀 Powered by:</strong> Cerebras Systems | 
+                    <strong>🏠 Hosted on:</strong> Hugging Face | 
+                    <strong>⚡ Using:</strong> ZeroGPU Pro
+                </p>
+                <p style="margin: 0.5rem 0 0 0; font-size: 0.875rem; color: #64748b;">
+                    Enjoy lightning-fast AI conversations with priority access
+                </p>
+            </div>
+        """)
+    
+    # Event handlers
+    def respond(message, history, system_prompt):
+        # Add user message to history
+        new_history = history + [{"role": "user", "content": message}]
+        
+        # Generate response
+        for response in chat_with_llama(message, history, system_prompt):
+            yield new_history + [{"role": "assistant", "content": response}], ""
+    
+    def clear_chat():
+        return [], ""
+    
+    def set_preset_prompt(preset_type):
+        presets = {
+            "default": DEFAULT_SYSTEM_PROMPT,
+            "creative": """You are a creative and imaginative AI assistant. You excel at:
+- Generating original stories, poems, and creative content
+- Brainstorming innovative ideas and solutions
+- Helping with artistic projects and creative writing
+- Thinking outside the box and exploring unconventional approaches
+- Inspiring creativity and artistic expression
+
+Be expressive, enthusiastic, and help users tap into their creative potential!""",
+            "analytical": """You are an analytical and logical AI assistant. You excel at:
+- Breaking down complex problems into manageable parts
+- Providing structured, step-by-step reasoning
+- Analyzing data and identifying patterns
+- Offering evidence-based insights and conclusions
+- Using critical thinking and systematic approaches
+
+Be thorough, precise, and help users think through problems methodically."""
+        }
+        return presets.get(preset_type, DEFAULT_SYSTEM_PROMPT)
+    
+    # Bind events
+    msg.submit(
+        fn=respond,
+        inputs=[msg, chatbot, system_prompt],
+        outputs=[chatbot, msg]
+    )
+    
+    send_btn.click(
+        fn=respond,
+        inputs=[msg, chatbot, system_prompt],
+        outputs=[chatbot, msg]
+    )
+    
+    clear_btn.click(
+        fn=clear_chat,
+        outputs=[chatbot, msg]
+    )
+    
+    # Preset button events
+    preset_default.click(
+        fn=lambda: set_preset_prompt("default"),
+        outputs=[system_prompt]
+    )
+    
+    preset_creative.click(
+        fn=lambda: set_preset_prompt("creative"),
+        outputs=[system_prompt]
+    )
+    
+    preset_analytical.click(
+        fn=lambda: set_preset_prompt("analytical"),
+        outputs=[system_prompt]
+    )
+
+# Launch the app with PWA-friendly settings
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_api=False,
+        share=False,
+        height=800,
+        enable_queue=True
+    )