import gradio as gr
import main

# Custom CSS for black and red modern theme
custom_css = """
body, .gradio-container {
        background: linear-gradient(135deg, #181818 60%, #b71c1c 100%) !important;
        color: #fff !important;
        font-family: 'Segoe UI', 'Roboto', Arial, sans-serif !important;
        min-height: 100vh;
}
.gradio-container .input_box, .gradio-container .output_box, .gradio-container .form, .gradio-container .block, .gradio-container .panel {
        background: rgba(34, 34, 34, 0.85) !important;
        border-radius: 18px !important;
        border: 1.5px solid #b71c1c !important;
        box-shadow: 0 8px 32px 0 rgba(183,28,28,0.25);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s, border 0.3s;
}
.gradio-container label, .gradio-container .label, .gradio-container .title, .gradio-container .description {
        color: #ff5252 !important;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 8px rgba(183,28,28,0.15);
}
.gradio-container .btn, .gradio-container button, .gradio-container .primary {
        background: linear-gradient(90deg, #b71c1c 60%, #ff5252 100%) !important;
        color: #fff !important;
        border-radius: 12px !important;
        border: none !important;
        font-weight: bold;
        font-size: 1.05em;
        box-shadow: 0 2px 8px rgba(183,28,28,0.15);
        transition: background 0.2s, transform 0.2s;
}
.gradio-container .btn:hover, .gradio-container button:hover, .gradio-container .primary:hover {
        background: linear-gradient(90deg, #ff5252 60%, #b71c1c 100%) !important;
        color: #fff !important;
        transform: scale(1.04);
}
.gradio-container input, .gradio-container textarea, .gradio-container select {
        background: rgba(24,24,24,0.95) !important;
        color: #fff !important;
        border: 1.5px solid #b71c1c !important;
        border-radius: 8px !important;
        font-size: 1em;
        padding: 8px 12px;
        transition: border 0.2s;
}
.gradio-container input:focus, .gradio-container textarea:focus, .gradio-container select:focus {
        border: 1.5px solid #ff5252 !important;
        outline: none !important;
}
.gradio-container .file-preview, .gradio-container .image-preview {
        background: rgba(34,34,34,0.85) !important;
        border: 1.5px solid #b71c1c !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(183,28,28,0.15);
}
.gradio-container .block-title {
        font-size: 2em !important;
        color: #ff5252 !important;
        margin-bottom: 12px !important;
        text-shadow: 0 2px 8px rgba(183,28,28,0.15);
}
.gradio-container .block-description {
        font-size: 1.1em !important;
        color: #fff !important;
        margin-bottom: 18px !important;
        opacity: 0.85;
}
"""

app = gr.Interface(
        fn=main.ask_agent,
        inputs=[
                gr.Textbox(label="Question"),
                gr.File(label="Upload Dataset")
        ],
        outputs=[
                gr.Textbox(label="Agent Response"),
                gr.Image(label="Generated Graph")
        ],
        title="Personal Data Assistant",
        description="Ask questions about your dataset and visualize it with bar charts.",
        stop_btn="Stop Conversation",
        css=custom_css
)

if __name__ == "__main__":
        app.launch()