import gradio as gr
import spaces

# Define Gradio theme
theme = gr.themes.Soft(
    primary_hue="indigo",
    secondary_hue="emerald",
    neutral_hue="gray",
    font="Rubik"  # Make sure "Rubik" is a valid font
)

# Create Gradio blocks with custom CSS for enhanced UI
with gr.Blocks(
    css="""
        .gradio-container {background-color: #f0f4f8; padding: 20px;}
        h1, h2, h3, h4, h5, h6 {color: #4a5568;}
        .chat-message {background-color: #edf2f7; border-radius: 8px; padding: 10px;}
        .gradio-container .avatar-container {height: 40px; width: 40px; border-radius: 50%; overflow: hidden;}
        #duplicate-button {margin: auto; color: white; background: #2d3748; border-radius: 100vh; padding: 8px 16px;}
        .tab-nav-button {background-color: #e2e8f0; border-radius: 8px;}
        .tab-nav-button.selected {background-color: #cbd5e0;}
    """,
) as chat:
    gr.Markdown("### Please note that only one image can be created at a time. To generate multiple images, consider using an Image Generator tool.")
    gr.ChatInterface(
        fn=model_inference,
        chatbot=chatbot,
        examples=EXAMPLES,
        multimodal=True,
        cache_examples=False,
        autofocus=False,
        concurrency_limit=10,
    )

# Create Gradio blocks with custom CSS for enhanced UI
with gr.Blocks(theme=theme, title="RocketGPT - AI-Powered Chatbot") as demo:
    # Define individual tabs
    with gr.Blocks() as chat:
        gr.Markdown("### 💬 SuperChat")
        gr.HTML("<iframe src='https://Qwen-QwQ-32B-preview.hf.space' width='100%' height='800px' style='border-radius: 8px;'></iframe>")

    with gr.Blocks() as voice:
        gr.Markdown("### 🎙️ Speech Generator")
        gr.HTML("<iframe src='https://wifix199-Text-to-speech-LuminaIQ.hf.space' width='100%' height='800px' style='border-radius: 8px;'></iframe>")

    with gr.Blocks() as image:
        gr.Markdown("### 🖼️ Image Generator")
        gr.HTML("<iframe src='https://wifix199-Text-to-image-LuminaIQ.hf.space' width='100%' height='800px' style='border-radius: 8px;'></iframe>")

    with gr.Blocks() as video:
        gr.Markdown("### 📹 Video Engine")
        gr.HTML("<iframe src='https://kingnish-instant-video.hf.space' width='100%' height='800px' style='border-radius: 8px;'></iframe>")

    with gr.Blocks() as tryon:
        gr.Markdown("### 🖼️ Finegrain")
        gr.HTML("<iframe src='https://finegrain-finegrain-object-cutter.hf.space' width='100%' height='800px' style='border-radius: 8px;'></iframe>")

    # Create a tabbed interface
    gr.TabbedInterface(
        interface_list=[chat, voice, image, video, tryon], 
        tab_names=["💬 SuperChat", "🗣️ Speech Generator", "🖼️ Image Generator", "🎥 Video Generator", "🖼️ Finegrain"]
    )

# Launch the app
demo.queue(max_size=300)
demo.launch()