Update app.py

app.py

@@ -28,18 +28,20 @@ def run_test(input_text):
 
 
 css = """
-#header { text-align: center; font-size: 3em; margin-bottom: 20px; }
-#output-text { font-weight: bold; font-size: 1.2em; }
+#header { text-align: center; font-size: 3em; margin-bottom: 20px; color: #3b5998; font-weight: bold;}
+#output-text { font-weight: bold; font-size: 1.2em; border-radius: 10px; padding: 10px; background-color: #f4f4f4;}
 .links {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin-right: 10px;
     align-items: center;
+    font-size: 0.9em;
+    color: #5c6bc0;
 }
 .separator {
     margin: 0 5px;
-    color: black;
+    color: #000;
 }
 
 /* Adjusting layout for Input Text and Inference Result */
@@ -51,16 +53,30 @@ css = """
 .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;
 }
 
 /* Set button widths to match the Select Model width */
 .button {
     width: 250px;  /* Same as the select box width */
     height: 100px;  /* Button height */
+    background-color: #3b5998;
+    color: white;
+    font-weight: bold;
+    border-radius: 8px;
+}
+
+.button:hover {
+    background-color: #2d4373;
 }
 
 /* Set height for the Select Model dropdown */
@@ -82,6 +98,17 @@ css = """
     max-height: 200px;  /* Limit the height of the content */
     overflow-y: auto;  /* Add a scrollbar if content overflows */
 }
+
+.demo-banner {
+    background-color: #f3f4f6;
+    padding: 20px;
+    border-radius: 10px;
+    font-size: 1.1em;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #ff5722;
+}
 """
 
 # Gradio App
@@ -100,12 +127,17 @@ with gr.Blocks(css=css) as app:
         </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>')
+
     with gr.Row():
         input_text = gr.Textbox(
             label="Input Text",
             placeholder="Enter Text Here",
             lines=8,
             elem_classes=["input-text"],  # Applying the CSS class
+            value="Archetypes represent universal patterns that define certain events, objects, or people. In literature, they reflect common themes and ideas that resonate across cultures, helping people interpret and relate to stories. However, archetypes are not limited to literature; they also exist in everyday life and play a vital role in shaping how we perceive the world. Specifically, archetypes of people help us understand their character, actions, and motivations. In real life, we can identify certain types of individuals who share common traits shaped by both personal inclinations and their environments. For instance, a modern corporate leader like Elon Musk exemplifies the archetype of a hero or creator. His vision and courage to innovate make him a prime example of this archetype, as others often view him as someone driven by a desire to transform the world. These traits influence not only how he is perceived but also his actions and motivations. Recognizing archetypes in daily life allows for a deeper understanding of people and events. By identifying these characteristics, I can better grasp someone’s motivations and role, making their behavior more predictable. While real-life individuals may exhibit a blend of archetypal traits, the concept still helps me interpret their actions and personalities, which in turn informs how I interact with them. (This is a example from Chatgpt)"
         )
         output = gr.Textbox(
             label="Inference Result",
@@ -157,4 +189,3 @@ with gr.Blocks(css=css) as app:
         )
 
 app.launch()
-