# # import gradio as gr

# # gr.load("models/vm24bho/net_dfm_myimg").launch()


# import gradio as gr

# # Load your model (this is a placeholder; replace with your actual model loading code)
# demo = gr.load("models/vm24bho/net_dfm_myimg")

# # Customize the interface
# css = """
#     body { 
#         background-color: #f5f5f5;
#         font-family: 'Arial', sans-serif;
#     }
#     .container { 
#         max-width: 800px; 
#         margin: 0 auto; 
#         padding: 20px; 
#         background-color: #ffffff; 
#         border-radius: 10px; 
#         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
#     }
#     .header { 
#         text-align: center; 
#         padding-bottom: 20px; 
#     }
#     h1 { 
#         color: #333333; 
#     }
#     p { 
#         color: #666666; 
#     }
#     .gradio-container { 
#         display: flex; 
#         flex-direction: column; 
#         gap: 20px; 
#     }
#     button { 
#         background-color: #007bff; 
#         color: white; 
#         border: none; 
#         padding: 10px 20px; 
#         border-radius: 5px; 
#         cursor: pointer; 
#         font-size: 16px; 
#     }
#     button:hover { 
#         background-color: #0056b3; 
#     }
# """

# demo.launch(
#     title="Deepfake Detection",
#     description="A interface for interacting with the VM24BHO model.",
#     article="""
#         <div class="container">
#             <div class="header">
#                 <h1>Welcome to the VM24BHO Model Interface</h1>
#                 <p>Use this interface to interact with the deep learning model.</p>
#             </div>
#             <div class="gradio-container">
#                 <!-- Gradio interface elements will be inserted here -->
#             </div>
#         </div>
#     """,
#     css=css
# )






import gradio as gr

# Load your model (assuming the path is correct)
demo = gr.load("models/vm24bho/net_dfm_myimg")

# Custom CSS styling
css = """
    body { 
        background-color: #f5f5f5;
        font-family: 'Arial', sans-serif;
    }
    .container { 
        max-width: 800px; 
        margin: 0 auto; 
        padding: 20px; 
        background-color: #ffffff; 
        border-radius: 10px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    }
    .header { 
        text-align: center; 
        padding-bottom: 20px; 
    }
    h1 { 
        color: #333333; 
    }
    p { 
        color: #666666; 
    }
    .gradio-container { 
        display: flex; 
        flex-direction: column; 
        gap: 20px; 
    }
    button { 
        background-color: #007bff; 
        color: white; 
        border: none; 
        padding: 10px 20px; 
        border-radius: 5px; 
        cursor: pointer; 
        font-size: 16px; 
    }
    button:hover { 
        background-color: #0056b3; 
    }
"""

# Creating the Gradio interface
with gr.Blocks(css=css) as demo:
    gr.Markdown(
        """
        <div class="container">
            <div class="header">
                <h1>Welcome to the Deepfake detection Model Interface</h1>
                <p>Use this interface to interact with the deep learning model.</p>
            </div>
            <div class="gradio-container">
                <!-- Gradio interface elements will be inserted here -->
            </div>
        </div>
        """
    )

    # Assuming your model has a specific input/output interface
    # Adjust this part according to your actual model's input/output
    gr.Interface.load("models/vm24bho/net_dfm_myimg")

# Launch the Gradio interface
demo.launch()