import gradio as gr
import spaces
import torch
from transformers import AutoTokenizer, AutoModelForCausalLM
from PIL import Image

# Load model and tokenizer
model_name = "mistral-community/pixtral-12b-240910"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(
    model_name,
    torch_dtype=torch.float16,
    device_map="auto"
)

@spaces.GPU(duration=120)
def generate_response(image, prompt, max_length, temperature):
    messages = [
        {"role": "system", "content": "You are a helpful assistant that can analyze images and text."},
        {"role": "user", "content": prompt}
    ]
    formatted_prompt = tokenizer.apply_chat_template(messages, add_generation_prompt=True, tokenize=False)

    # Preprocess the image
    if image is not None:
        image = Image.open(image).convert("RGB")
        inputs = tokenizer(formatted_prompt, images=[image], return_tensors="pt", padding=True).to(model.device)
    else:
        inputs = tokenizer(formatted_prompt, return_tensors="pt", padding=True).to(model.device)
    
    # Generate
    with torch.no_grad():
        outputs = model.generate(
            **inputs,
            max_new_tokens=max_length,
            do_sample=True,
            temperature=temperature,
            top_k=100,
            top_p=0.95,
        )
    
    # Decode and return the response
    response = tokenizer.decode(outputs[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True)
    return response

# Custom CSS
css = """
body {
    background-color: #1a1a2e;
    color: #e0e0e0;
    font-family: 'Arial', sans-serif;
}
.container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}
.gradio-container {
    background-color: #16213e;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header {
    background-color: #0f3460;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    text-align: center;
    margin-bottom: 20px;
}
.header h1 {
    color: #e94560;
    font-size: 2.5em;
    margin-bottom: 10px;
}
.header p {
    color: #a0a0a0;
}
.input-group, .output-group {
    background-color: #1a1a2e;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.input-group label, .output-group label {
    color: #e94560;
    font-weight: bold;
}
.generate-btn {
    background-color: #e94560 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}
.generate-btn:hover {
    background-color: #c81e45 !important;
}
.example-prompts {
    background-color: #1f2b47;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.example-prompts h3 {
    color: #e94560;
    margin-bottom: 10px;
}
.example-prompts ul {
    list-style-type: none;
    padding-left: 0;
}
.example-prompts li {
    margin-bottom: 5px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.example-prompts li:hover {
    color: #e94560;
}
"""

# Example prompts
example_prompts = [
    "Describe this image in detail.",
    "What emotions does this image evoke?",
    "Imagine a story based on this image.",
    "What technical aspects of photography are demonstrated in this image?",
    "How might this image be used in advertising?"
]

# Gradio interface
with gr.Blocks(css=css) as iface:
    gr.HTML(
        """
        <div class="header">
            <h1>Pixtral-12B Multimodal Generation</h1>
            <p>Generate text responses based on images and prompts using the powerful Pixtral-12B model.</p>
        </div>
        """
    )

    with gr.Group():
        with gr.Group(elem_classes="example-prompts"):
            gr.HTML("<h3>Example Prompts:</h3>")
            example_buttons = [gr.Button(prompt) for prompt in example_prompts]

        with gr.Group(elem_classes="input-group"):
            image_input = gr.Image(type="filepath", label="Upload an image (optional)")
            prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt here...", lines=5)
            max_length = gr.Slider(minimum=1, maximum=500, value=128, step=1, label="Max Length")
            temperature = gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature")
            generate_btn = gr.Button("Generate", elem_classes="generate-btn")

        with gr.Group(elem_classes="output-group"):
            output = gr.Textbox(label="Generated Text", lines=10)

    generate_btn.click(generate_response, inputs=[image_input, prompt, max_length, temperature], outputs=output)

    # Set up example prompt buttons
    for button in example_buttons:
        button.click(lambda x: x, inputs=[button], outputs=[prompt])

# Launch the app
iface.launch()