Update demo.py

demo.py

@@ -1,89 +1,72 @@
 import gradio as gr
-import spaces
-
-
-# TOKENIZER = 
-# MINIMUM_TOKENS = 64
-
-# def count_tokens(text):
-#     return len(TOKENIZER(text).input_ids)
-
 
 # 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 */
+}
 
-# Change mode name
-#def change_mode(mode):
-#    if mode == "Faster Model":
-#        .change_mode("t5-small")
-#    elif mode == "Medium Model":
-#        .change_mode("roberta-base-openai-detector")
-#    elif mode == "Powerful Model":
-#        .change_mode("falcon-rw-1b")
-#    else:
-#        gr.Error(f"Invaild mode selected.")
-#    return mode
-
-
+/* 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 */
+}
 
-css = """
-#header { text-align: center; font-size: 3em; margin-bottom: 20px; }
-#output-text { font-weight: bold; font-size: 1.2em; }
-.links { 
-    display: flex; 
-    justify-content: flex-end; 
-    gap: 10px; 
-    margin-right: 10px; 
+.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 and Inference Result */
-.input-row {
-    display: flex;
-    width: 100%;
-}
-
+/* Adjusting layout for Input Text */
 .input-text {
-    flex: 3;  /* 4 parts of the row */
-    margin-right: 1px;
-}
-
-.output-text {
-    flex: 1;  /* 1 part of the row */
-    text-align: center;
+    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 */
+    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 */
+    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 accordion */
-    box-sizing: border-box;  /* Ensure padding is included in width/height */
-}
-
-/* Accordion content max-height */
-.accordion-content {
-    max-height: 200px;  /* Limit the height of the content */
-    overflow-y: auto;  /* Add a scrollbar if content overflows */
+    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 */
 }
 """
 
@@ -108,11 +91,11 @@ with gr.Blocks(css=css) as app:
             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",
-            elem_classes=["output-text"],
         )
     with gr.Row():
         model_name = gr.Dropdown(
@@ -131,13 +114,13 @@ with gr.Blocks(css=css) as app:
     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, elem_classes=["accordion"]):
+    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, elem_classes=["accordion"]):
+    with gr.Accordion("Citations", open=False):
         gr.Markdown("""
         ```
         @inproceedings{zhangs2024MMDMP,
@@ -149,4 +132,4 @@ with gr.Blocks(css=css) as app:
         ```
         """)
 
-app.launch()
+app.launch()