app.py

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

# Load the model and tokenizer
model_id = "vikhyatk/moondream2"
revision = "2024-05-20"
model = AutoModelForCausalLM.from_pretrained(
    model_id, trust_remote_code=True, revision=revision
)
tokenizer = AutoTokenizer.from_pretrained(model_id, revision=revision)

def analyze_image_direct(image, question):
    # This is a placeholder function. You need to implement the logic based on your model's capabilities.
    # For demonstration, it returns a static response.
    return "This is a placeholder answer."

# Define custom CSS to make the interface purple
custom_css = """
/* General background */
body {
    background-color: #6a0dad; /* Rich purple background */
    color: #EDE7F6; /* Light purple text for contrast */
}

/* Buttons */
button {
    background-color: #9c27b0; /* Vibrant purple */
    color: #FFFFFF; /* White text */
    border: none;
    border-radius: 5px; /* Rounded corners for buttons */
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #7b1fa2; /* Darker purple on hover */
}

/* Text inputs and text areas */
input[type="text"], textarea {
    background-color: #9575cd; /* Soft purple */
    color: #FFFFFF; /* White text */
    border: none;
    padding: 10px;
    border-radius: 5px; /* Rounded corners for text inputs */
}

/* Gradio interface container for a more centered look */
.gradio_container {
    max-width: 800px; /* Adjust based on preference */
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

/* Titles and descriptions */
h1, h2, h3, p {
    color: #EDE7F6; /* Light purple text for readability */
}
"""


# Create Gradio interface with custom CSS for a purple theme
iface = gr.Interface(fn=analyze_image_direct,
                     inputs=[gr.Image(type="pil"), gr.Textbox(lines=2, placeholder="Enter your question here...")],
                     outputs='text',
                     title="Direct Image Question Answering",
                     description="Upload an image and ask a question about it directly using the model.",
                     theme="dark",  # Use the dark theme as a base
                     css=custom_css)  # Apply custom CSS

# Launch the interface
iface.launch()