Update app.py

app.py

@@ -8,10 +8,14 @@ import gradio as gr
 
 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 two_sample_tester.test(input_text.strip())
-#     return relative_tester.test(input_text.strip())
-    return f"Prediction: Human (Mocked for {input_text})"
+        return [("Please enter text to analyze.", "error")]
+    result = relative_tester.test(input_text.strip())
+    if "Human" in result:
+        return [(result, "Human")]
+    elif "AI" in result:
+        return [(result, "AI")]
+    else:
+        return [(result, "Please enter a longer text")]
 
 # TODO: Add model selection in the future
 # Change mode name
@@ -63,6 +67,9 @@ css = """
     border-radius: 8px;
     padding: 12px;
     border: 2px solid #d1d1d1;
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
 }
 
 /* Set button widths to match the Select Model width */
@@ -107,6 +114,28 @@ 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;
+}
+
 """
 
 # Gradio App
@@ -135,15 +164,16 @@ with gr.Blocks(css=css) as app:
             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)"
+            value="Hugging Face is a company and community that has become one of the leading platforms in the field of natural language processing (NLP). It is best known for developing and maintaining the Transformers library, which simplifies the use of state-of-the-art machine learning models for tasks such as text classification, language generation, translation, and more."
         )
         output = gr.Textbox(
             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():
         # TODO: Add model selection in the future
         # model_name = gr.Dropdown(
@@ -161,7 +191,7 @@ with gr.Blocks(css=css) as app:
         )
         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=True, elem_classes=["accordion"]):