app.py

import gradio as gr
from huggingface_hub import InferenceClient
import os

# Get HF token from environment variable
HF_TOKEN = os.getenv("HF_TOKEN")

# Initialize client with proper error handling
def get_client():
    if HF_TOKEN:
        try:
            # Try with the preferred model first
            return InferenceClient("HuggingFaceH4/zephyr-7b-beta", token=HF_TOKEN)
        except Exception as e:
            print(f"Failed to initialize zephyr model: {e}")
            # Fallback to mistral with token
            try:
                return InferenceClient("mistralai/Mistral-7B-Instruct-v0.1", token=HF_TOKEN)
            except Exception as e2:
                print(f"Failed to initialize mistral model: {e2}")
                return None
    else:
        print("No HF_TOKEN found. Please set your Hugging Face token.")
        return None

client = get_client()

# Dynamic prompt builder based on CEFR level
def level_to_prompt(level):
    return {
        "A1": "You are a friendly French tutor. Speak mostly in English, use simple French, and explain everything.",
        "A2": "You are a patient French tutor. Use short French phrases and explain them in English.",
        "B1": "You are a helpful French tutor. Speak mostly in French but clarify in English when needed.",
        "B2": "You are a French tutor. Speak primarily in French with rare English support.",
        "C1": "You are a native French tutor. Speak entirely in French, clearly and professionally.",
        "C2": "You are a native French professor. Speak in rich, complex French. Avoid English."
    }.get(level, "You are a helpful French tutor.")

# Custom background CSS
css = """
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Playfair+Display&display=swap');
body {
  background-image: url('https://cdn-uploads.huggingface.co/production/uploads/67351c643fe51cb1aa28f2e5/wuyd5UYTh9jPrMJGmV9yC.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gradio-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
}  
#chat-panel {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 12px;
  max-width: 700px;
  height: 70vh;
  margin: auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}
.gradio-container .chatbot h1 {
  color: var(--custom-title-color) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 5rem !important;
  font-weight: bold !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  width: 100%;
}
"""

# Chat logic with proper error handling
def respond(message, history, level, max_tokens, temperature, top_p):
    # Check if client is available
    if client is None:
        yield "❌ Désolé! The AI service is not available. Please check your Hugging Face token configuration."
        return
    
    system_message = level_to_prompt(level)
    
    # Generate response
    response = ""
    try:
        # Create a proper prompt format for instruction-following models
        prompt = f"<|system|>\n{system_message}\n\n"
        
        # Add conversation history
        if history:
            for turn in history:
                if isinstance(turn, dict):
                    if turn.get("role") == "user":
                        prompt += f"<|user|>\n{turn['content']}\n\n"
                    elif turn.get("role") == "assistant":
                        prompt += f"<|assistant|>\n{turn['content']}\n\n"
                else:
                    # Handle tuple format (user, assistant)
                    user_msg, bot_msg = turn
                    if user_msg:
                        prompt += f"<|user|>\n{user_msg}\n\n"
                    if bot_msg:
                        prompt += f"<|assistant|>\n{bot_msg}\n\n"
        
        # Add current user message
        prompt += f"<|user|>\n{message}\n\n<|assistant|>\n"
        
        # Generate response with streaming
        for token in client.text_generation(
            prompt, 
            max_new_tokens=max_tokens, 
            stream=True, 
            temperature=temperature, 
            top_p=top_p,
            do_sample=True,
            return_full_text=False,
            stop_sequences=["<|user|>", "<|system|>"]  # Stop if model tries to continue conversation
        ):
            if token:  # Handle None tokens
                # Clean up any unwanted tokens
                token = token.replace("<|user|>", "").replace("<|system|>", "").replace("<|assistant|>", "")
                if token.strip():  # Only add non-empty tokens
                    response += token
                    yield response
                
    except Exception as e:
        error_msg = str(e)
        print(f"Error in chat completion: {e}")
        
        if "401" in error_msg or "Unauthorized" in error_msg:
            yield "🔑 Authentication Error: Please check your Hugging Face token. Make sure it's valid and has the correct permissions."
        elif "429" in error_msg or "rate limit" in error_msg.lower():
            yield "⏰ Rate limit exceeded. Please wait a moment before trying again."
        elif "503" in error_msg or "Service Unavailable" in error_msg:
            yield "🔧 The AI service is temporarily unavailable. Please try again later."
        else:
            yield f"❌ Désolé! There was an error: {error_msg}"

# UI layout
with gr.Blocks(css=css, title="French Tutor") as demo:
    gr.Markdown("# 🇫🇷 French Tutor", elem_id="custom-title")
    
    # Add status indicator
    if client is None:
        gr.Markdown("⚠️ **Warning**: No Hugging Face token found. Please set your HF_TOKEN environment variable.")
    else:
        gr.Markdown("✅ **Status**: Connected to AI service")
    
    with gr.Column(elem_id="chat-panel"):
        gr.Markdown("""
        
        with gr.Accordion("⚙️ Advanced Settings", open=False):
            level = gr.Dropdown(
                choices=["A1", "A2", "B1", "B2", "C1", "C2"],
                value="A1",
                label="Your French Level (CEFR)",
                info="Choose your current French proficiency level"
            )
            max_tokens = gr.Slider(
                1, 2048, 
                value=512, 
                step=1, 
                label="Response Length",
                info="Maximum number of tokens in the response"
            )
            temperature = gr.Slider(
                0.1, 2.0, 
                value=0.7, 
                step=0.1, 
                label="Creativity",
                info="Higher values make responses more creative"
            )
            top_p = gr.Slider(
                0.1, 1.0, 
                value=0.95, 
                step=0.05, 
                label="Dynamic Text",
                info="Controls text diversity"
            )
        
        gr.ChatInterface(
            fn=respond,
            additional_inputs=[level, max_tokens, temperature, top_p],
            type="messages",
            title="Chat with your French Tutor",
            description="Ask questions, practice conversation, or get help with French grammar!"
        )
""")
if __name__ == "__main__":
    demo.launch()