feat: update space styles (#2)

- feat: update space styles (6b4a796ff0a746e3279f07366a81b09872641249)


Co-authored-by: Coin W <CoinW@users.noreply.huggingface.co>

app.py

@@ -8,20 +8,23 @@ from relative_tester import RelativeTester
 
 def run_test(input_text):
     if not input_text:
-        return "Now that you've built a demo, you'll probably want to share it with others. Gradio demos can be shared in two ways: using a temporary share link or permanent hosting on Spaces."
+        return "Please enter some text to test."
     # return two_sample_tester.test(input_text.strip())
     return relative_tester.test(input_text.strip())
     return f"Prediction: Human (Mocked for {input_text})"
 
 
 css = """
-#header { text-align: center; font-size: 3em; margin-bottom: 20px; color: #black; font-weight: bold;}
-#output-text { font-weight: bold; font-size: 1.2em; border-radius: 10px; padding: 10px; background-color: #f4f4f4;}
+#header { text-align: center; margin-bottom: 5px; color: #black; font-weight: bold; font-weight: bold;}
+#header_bigger { font-size: 2.5em; }
+#header_smaller { font-size: 2em; }
 .links {
     display: flex;
     justify-content: flex-end;
-    gap: 10px;
+    gap: 5px;
     margin-right: 10px;
+    margin-top: -10px;
+    margin-bottom: -20px !important;
     align-items: center;
     font-size: 0.9em;
     color: #ADD8E6;
@@ -30,28 +33,18 @@ css = """
     margin: 0 5px;
     color: #000;
 }
-
 /* Adjusting layout for Input Text and Inference Result */
 .input-row {
     display: flex;
     width: 100%;
 }
-
 .input-text {
     flex: 3;  /* 4 parts of the row */
     margin-right: 1px;
     border-radius: 8px;
     padding: 12px;
-    border: 2px soild #d1d1d1;
-}
-
-.output-text {
-    flex: 1;  /* 1 part of the row */
-    border-radius: 8px;
-    padding: 12px;
-    border: 2px soild #d1d1d1;
+    border: 2px solid #d1d1d1;
 }
-
 /* Set button widths to match the Select Model width */
 .button {
     width: 250px;  /* Same as the select box width */
@@ -61,31 +54,24 @@ css = """
     font-weight: bold;
     border-radius: 8px;
 }
-
 .button:hover {
     background-color: #0000FF;
 }
-
 /* 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 */
+    max-height: auto;  /* Set a auto-height for accordion */
     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 */
+    max-height: auto;  /* auto the height of the content */
 }
-
 .demo-banner {
     background-color: #f3f4f6;
     padding: 20px;
@@ -96,12 +82,35 @@ css = """
     margin-bottom: 20px;
     color: #ff5722;
 }
+/* Green for Human text */
+.highlighted-human {
+    background-color: #d4edda;
+    color: #155724;
+    border: 2px solid #28a745;
+}
+/* Red for AI text */
+.highlighted-ai {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 2px solid #dc3545;
+}
+/* Yellow for errors */
+.highlighted-error {
+    background-color: #fff3cd;
+    color: #856404;
+    border: 2px solid #ffc107;
+}
+#output-text textarea {
+    font-family: 'Impact', sans-serif;
+}
 """
 
 # Gradio App
 with gr.Blocks(css=css) as app:
     with gr.Row():
-        gr.HTML('<div id="header">R-detect On HuggingFace</div>')
+        gr.HTML(
+            '<div id="header"><span id="header_bigger">R-Detect: </span><span id="header_smaller">Human-Rewritten or AI-Generated</span></div>'
+        )
     with gr.Row():
         gr.HTML(
             """
@@ -110,14 +119,14 @@ with gr.Blocks(css=css) as app:
             <span class="separator">|</span>
             <a href="https://github.com/xLearn-AU/R-Detect" target="_blank">Code</a>
             <span class="separator">|</span>
-            <a href="mailto:1730421718@qq.com" target="_blank">Contact</a>
+            <a href="mailto:yiliao.song@gmail.com" target="_blank">Contact</a>
         </div>
         """
         )
 
     with gr.Row():
         gr.HTML(
-            '<div class="demo-banner">This is a demo. For the full version, please refer to the <a href="https://github.com/xLearn-AU/R-Detect" target="_blank">GitHub</a> or the <a href="https://openreview.net/forum?id=z9j7wctoGV" target="_blank">Paper</a>.</div>'
+            '<div class="demo-banner">This is a demo running on CPU only. For the full version, please refer to the <a href="https://github.com/xLearn-AU/R-Detect" target="_blank">GitHub</a> or the <a href="https://openreview.net/forum?id=z9j7wctoGV" target="_blank">Paper</a>.</div>'
         )
 
     with gr.Row():
@@ -132,38 +141,47 @@ with gr.Blocks(css=css) as app:
             label="Inference Result",
             placeholder="Made by Human or AI",
             elem_id="output-text",
-            lines=8,
-            elem_classes=["output-text"],
+            lines=2,  # Keep it compact
+            interactive=False,  # Make it read-only
         )
+
     with gr.Row():
         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, inputs=[input_text], outputs=output)
+    submit_button.click(run_test, inputs=[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=True, elem_classes=["accordion"]):
         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.
-        """
+                - **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("Cite Our Work", open=True, elem_classes=["accordion"]):
         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}
-        }
-        ```
-        """
+            ```
+                @inproceedings{song2025deep,
+                    title     = {Deep Kernel Relative Test for Machine-generated Text Detection},
+                    author    = {Yiliao Song and Zhenqiao Yuan and Shuhai Zhang and Zhen Fang and Jun Yu and Feng Liu},
+                    booktitle = {The Twelfth International Conference on Learning Representations},
+                    year      = {2025},
+                    url       = {https://openreview.net/pdf?id=z9j7wctoGV}
+                }
+            ```
+            """
+        )
+
+    with gr.Accordion("Acknowledgement", open=True, elem_classes=["accordion"]):
+        gr.Markdown(
+            """
+                We Thanks Jinqian Wang and Jerry Ye for their help in the development of this space.,
+            """
         )
 
 

relative_tester.py

@@ -73,4 +73,8 @@ class RelativeTester:
         print("DEBUG: power:", power)
         print("DEBUG: power list:", h_u_list)
         # Return the result
-        return "Human" if power <= threshold else "AI"
+        return (
+            "Most likely Human Write"
+            if power <= threshold
+            else "Most likely Machine Generated"
+        )