demo.py

import gradio as gr

# Mock function for testing layout
def run_test_power(model_name, real_text, generated_text, N=10):
    return f"Prediction: Human (Mocked for {model_name})"

# CSS to adjust layout for the text boxes and dropdown
css = """
#header {
    text-align: center;
    font-size: 3em;
    margin-bottom: 20px;
}

#output-text {
    font-weight: bold;
    font-size: 1.2em;
    text-align: center; /* Center the text inside the box */
}

/* Flex container for centering output-text */
.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px; /* Set a fixed height for the container */
    margin-top: 20px; /* Add some space above the container */
    margin-bottom: 20px; /* Add some space below the container */
}

.links {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-right: 10px;
    align-items: center;
}

.separator {
    margin: 0 5px;
    color: black;
}

/* Adjusting layout for Input Text */
.input-text {
    width: 100%;
    height: 100px;
    font-size: 1em;
}

/* Set button widths to match the Select Model width */
.button {
    width: 250px; /* Same as the select box width */
    height: 100px; /* Button height */
}

/* Set height for the Select Model dropdown */
.select {
    height: 100px; /* Set height to 100px */
}

/* Accordion Styling */
.accordion {
    width: 100%; /* Set the width of the accordion to match the parent */
    max-height: 200px; /* Set a max-height for accordion */
    overflow-y: auto; /* Allow scrolling if the content exceeds max height */
    margin-bottom: 10px; /* Add space below the accordion */
    box-sizing: border-box; /* Ensure padding is included in width/height */
}
"""

# Gradio App
with gr.Blocks(css=css) as app:
    with gr.Row():
        gr.HTML('<div id="header">R-detect On HuggingFace</div>')
    with gr.Row():
        gr.HTML("""
        <div class="links">
            <a href="https://openreview.net/forum?id=z9j7wctoGV" target="_blank">Paper</a>
            <span class="separator">|</span>
            <a href="https://github.com/xLearn-AU/R-Detect" target="_blank">Code</a>
            <span class="separator">|</span>
            <a href="mailto:[email protected]" target="_blank">Contact</a>
        </div>
        """)
    with gr.Row():
        input_text = gr.Textbox(
            label="Input Text",
            placeholder="Enter Text Here",
            lines=8,
            elem_classes=["input-text"],  # Applying the CSS class
        )
    with gr.Row(elem_classes=["center-container"]):  # Parent container for centering
        output = gr.Textbox(
            label="Inference Result",
            placeholder="Made by Human or AI",
            elem_id="output-text",
        )
    with gr.Row():
        model_name = gr.Dropdown(
            [
                "Faster Model",
                "Medium Model",
                "Powerful Model",
            ],
            label="Select Model",
            value="Medium Model",
            elem_classes=["select"],
        )
        submit_button = gr.Button("Run Detection", variant="primary", elem_classes=["button"])
        clear_button = gr.Button("Clear", variant="secondary", elem_classes=["button"])
    
    submit_button.click(run_test_power, inputs=[model_name, input_text, input_text], outputs=output)
    clear_button.click(lambda: ("", ""), inputs=[], outputs=[input_text, output])

    with gr.Accordion("Disclaimer", open=False):
        gr.Markdown("""
        - **Disclaimer**: This tool is for demonstration purposes only. It is not a foolproof AI detector.
        - **Accuracy**: Results may vary based on input length and quality.
        """)

    with gr.Accordion("Citations", open=False):
        gr.Markdown("""
        ```
        @inproceedings{zhangs2024MMDMP,
            title={Detecting Machine-Generated Texts by Multi-Population Aware Optimization for Maximum Mean Discrepancy},
            author={Zhang, Shuhai and Song, Yiliao and Yang, Jiahao and Li, Yuanqing and Han, Bo and Tan, Mingkui},
            booktitle = {International Conference on Learning Representations (ICLR)},
            year={2024}
        }
        ```
        """)

app.launch()