Update app.py

app.py

@@ -162,37 +162,111 @@ examples = [
             ["You know, this conversation reminded me of an incredible experience I had at a music festival in college. I'll never forget it. It was a rainy day, but we didn't care, and the band that was playing was my absolute favorite. Even though we were all soaked, the crowd kept on dancing and singing along. The energy was incredible, and I remember feeling so connected to everyone around me. It was as if the rain made the whole experience even more magical. I was surrounded by friends, and we all shared this special moment together. It was one of the best moments of my life, and I still get goosebumps when I think about it. Sometimes, it's the unexpected things that create the most amazing memories, you know?"],
            ]
 
-# Define Gradio interface
-iface = gr.Interface(
-    fn=all,
-    inputs=gr.Textbox(lines=5, label="Input Text",placeholder="Write about how your breakfast went or anything else that happend or might happen to you ..."),
-    outputs=[
-        gr.HighlightedText(label="Binary Sequence Classification",
-                           color_map={
-                               "External": "#6ad5bcff",
-                               "Internal": "#ee8bacff"}
-                          ),
-        gr.HighlightedText(label="Extended Sequence Classification",
-                           color_map={
-                               "INTemothou": "#c27ba0",
-                               "INTpercept": "#cc4125",
-                               "INTtime": "#e06f66",
-                               "INTplace": "#e69138",
-                               "INTevent": "#ee8bacff",
-                               "EXTsemantic": "#6ad5bc",
-                               "EXTrepetition": "#11aeb8",
-                               "EXTother": "#24aaad",
-                           }
-                          ),
-        gr.Label(label="Internal Detail Count"),
-        gr.Label(label="External Detail Count"),
-        gr.Label(label="Approximated Internal Detail Ratio")
-    ],
-    title="Scoring Demo",
-    description="Autobiographical Memory Analysis: This demo combines two text - and two sequence classification models to showcase our automated Autobiographical Interview scoring method. Submit a narrative to see the results.",
-    examples =examples,
-    theme= mpg_poster #"soft" #monochrome
-)
-
-# Launch the combined interface
+import gradio as gr
+
+# Define content for each section
+intro_content = """
+# Introduction
+This section provides an overview of the project...
+"""
+
+method_content = """
+# Method
+This section describes the methodology used in the project...
+"""
+
+demo_content = """
+# Demo
+Here, you can interact with the demo...
+"""
+
+conclusion_content = """
+# Conclusion
+This section summarizes the findings and conclusions...
+"""
+
+# Define the demo function
+def all(input_text):
+    # Simulated processing for the demo
+    binary_classification = [("Some text", "External")]
+    extended_classification = [("More text", "INTevent")]
+    internal_count = 3
+    external_count = 2
+    internal_ratio = 0.6
+    return binary_classification, extended_classification, internal_count, external_count, internal_ratio
+
+# Create the interface using Blocks
+with gr.Blocks() as iface:
+    # Custom CSS for styling
+    gr.Markdown("""
+    <style>
+    .navbar {
+        overflow: hidden;
+        background-color: #333;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+    }
+    .navbar a {
+        float: left;
+        display: block;
+        color: #f2f2f2;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+    }
+    .navbar a:hover {
+        background-color: #ddd;
+        color: black;
+    }
+    .section {
+        padding: 16px;
+        margin-top: 50px;
+    }
+    </style>
+    """)
+    
+    # Navbar
+    gr.Markdown("""
+    <div class="navbar">
+        <a href="#intro">Intro</a>
+        <a href="#method">Method</a>
+        <a href="#demo">Demo</a>
+        <a href="#conclusion">Conclusion</a>
+    </div>
+    """)
+    
+    # Sections
+    with gr.Column():
+        gr.Markdown('<div id="intro" class="section">' + intro_content + '</div>')
+        gr.Markdown('<div id="method" class="section">' + method_content + '</div>')
+        gr.Markdown('<div id="demo" class="section">' + demo_content + '</div>')
+        
+        with gr.Row():
+            input_text = gr.Textbox(lines=5, label="Input Text", placeholder="Write about how your breakfast went or anything else that happened or might happen to you ...")
+            binary_output = gr.HighlightedText(label="Binary Sequence Classification", color_map={"External": "#6ad5bcff", "Internal": "#ee8bacff"})
+            extended_output = gr.HighlightedText(label="Extended Sequence Classification", color_map={
+                "INTemothou": "#c27ba0",
+                "INTpercept": "#cc4125",
+                "INTtime": "#e06f66",
+                "INTplace": "#e69138",
+                "INTevent": "#ee8bacff",
+                "EXTsemantic": "#6ad5bc",
+                "EXTrepetition": "#11aeb8",
+                "EXTother": "#24aaad",
+            })
+            internal_count_output = gr.Label(label="Internal Detail Count")
+            external_count_output = gr.Label(label="External Detail Count")
+            internal_ratio_output = gr.Label(label="Approximated Internal Detail Ratio")
+            
+            submit_button = gr.Button("Submit")
+            
+        submit_button.click(all, inputs=[input_text], outputs=[binary_output, extended_output, internal_count_output, external_count_output, internal_ratio_output])
+        
+        gr.Markdown('<div id="conclusion" class="section">' + conclusion_content + '</div>')
+
+# Launch the interface
 iface.launch()
+