Update app.py

app.py

@@ -162,37 +162,83 @@ 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
-iface.launch()
+# Define the sections as Markdown content
+intro_text = """
+# Introduction
+Welcome to this Gradio app. This section provides an introduction to the app.
+"""
+method_text = """
+# Method
+This section describes the methodology used in this app.
+"""
+demo_text = """
+# Demo
+Below is the interactive demo of the app.
+"""
+conclusion_text = """
+# Conclusion
+This section provides conclusions and future directions.
+"""
+
+# Define the main content display area
+content = gr.Markdown(intro_text)
+
+# Define the update function for the main content area
+def update_content(section):
+    if section == "Introduction":
+        return gr.Markdown.update(value=intro_text)
+    elif section == "Method":
+        return gr.Markdown.update(value=method_text)
+    elif section == "Demo":
+        return gr.Markdown.update(value=demo_text)
+    elif section == "Conclusion":
+        return gr.Markdown.update(value=conclusion_text)
+
+# Define the Gradio interface with a sidebar for navigation
+with gr.Blocks(theme=MPGPoster()) as demo:
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("## Navigation")
+            sections = ["Introduction", "Method", "Demo", "Conclusion"]
+            section_buttons = [gr.Button(section) for section in sections]
+            
+            for button, section in zip(section_buttons, sections):
+                button.click(fn=update_content, inputs=gr.Button(label=section), outputs=content)
+        
+        with gr.Column(scale=4):
+            content
+
+    with gr.Row():
+        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,
+        )
+        iface.render()
+
+# Launch the app
+demo.launch()