import gradio as gr
import requests
import os

# Hugging Face API configuration
API_URL = "https://api-inference.huggingface.co/models/nlpconnect/vit-gpt2-image-captioning"
API_KEY = os.getenv("HF_API_KEY")  # Fetch the API key from Hugging Face secrets

headers = {"Authorization": f"Bearer {API_KEY}"}

def generate_caption(image_path):
    """Queries the Hugging Face API to generate an image caption."""
    if not API_KEY:
        return "API key is missing! Please set it in Hugging Face secrets."
    
    try:
        with open(image_path, "rb") as image_file:
            response = requests.post(API_URL, headers=headers, files={"file": image_file})
            response.raise_for_status()  # Raise an error for bad responses
            result = response.json()
            return result[0].get("generated_text", "No caption generated.")
    except requests.exceptions.RequestException as e:
        return f"Error: {str(e)}"
    except Exception as e:
        return f"Error: {str(e)}"

# Gradio UI components
title = "✨ Captionator_X ✨"
description = """
Upload an image, and let AI describe it for you in a creative and accurate way!  
This application uses Hugging Face's state-of-the-art image captioning model.
"""
theme = gr.themes.Monochrome()

with gr.Blocks(theme=theme) as app:
    gr.Markdown(f"<h1 style='text-align: center; color: #4A90E2;'>{title}</h1>")
    gr.Markdown(f"<p style='text-align: center; font-size: 1.2rem;'>{description}</p>")
    
    with gr.Row():
        with gr.Column():
            image_input = gr.Image(type="filepath", label="Upload Your Image", elem_id="image-uploader")
        with gr.Column():
            output_text = gr.Textbox(label="Generated Caption", lines=4, interactive=False, elem_id="output-text", placeholder="Your caption will appear here...")
    
    submit_button = gr.Button("✨ Generate Caption ✨", elem_id="submit-btn")
    submit_button.click(generate_caption, inputs=image_input, outputs=output_text)
    
    gr.Markdown("<p style='text-align: center; font-size: 0.9rem; color: #888;'>Powered by Hugging Face 🤗 and Gradio 🚀</p>")

app.launch()