app redesign

app.py

@@ -9,7 +9,7 @@ classifier = pipeline("text-classification", model="simonschoe/TransformationTra
 explainer = SequenceClassificationExplainer(classifier.model, classifier.tokenizer)
 
 legend = """
-<div style="text-align: center; display: block; margin-left: auto; margin-right: auto; border-top: 1px solid; margin-top: 5px; padding-top: 5px;"><b>Legend: </b><span style="display: inline-block; width: 10px; height: 10px; border: 1px solid; background-color: hsl(0, 75%, 60%)"></span> Generic  <span style="display: inline-block; width: 10px; height: 10px; border: 1px solid; background-color: hsl(120, 75%, 50%)"></span> Transformation  </div>
+<div style="text-align: left; display: block; margin-left: auto; margin-right: auto; border-top: 1px solid; margin-top: 5px; padding-top: 5px;"><b>Legend:&emsp;</b><span style="display: inline-block; width: 10px; height: 10px; border: 1px solid; background-color: hsl(0, 75%, 60%)"></span> No Transformation Talk&emsp;<span style="display: inline-block; width: 10px; height: 10px; border: 1px solid; background-color: hsl(120, 75%, 50%)"></span> Transformation Talk</div>
 """
 
 def classify(_input):
@@ -22,7 +22,7 @@ def classify(_input):
         score = 1 - score
 
     # getting visualization
-    attributions = explainer(_input)
+    attributions = explainer(_input, class_name='LABEL_1')
     html = explainer.visualize().__html__()
 
     soup = BeautifulSoup(html, 'html.parser')
@@ -32,42 +32,39 @@ def classify(_input):
     result_html = explanation + legend
     return round(score, 4), result_html
 
-app = gr.Blocks()
+app = gr.Blocks(theme=gr.themes.Default(), css='#component-0 {max-width: 730px; margin: auto; padding-top: 1.5rem}')
 
 with app:
     gr.Markdown(
         """
-        # Transformation Talk Classifier
+        # Transformation Talk
         ## Detect Transformation-Related Sentences in Quarterly Earnings Calls
         """
     )
-    with gr.Row():
-        with gr.Column():
-            text_in = gr.Textbox(lines=1, placeholder="Insert text", label="Input Sentence")
+    
+    with gr.Tabs() as tabs:
+        with gr.TabItem("🔍 Model", id=0):
             with gr.Row():
-                compute_bt = gr.Button("Classify")
-            score_out = gr.Number(label="Score", interactive=False)
-            html_out = gr.HTML(label="Explanation")
-            gr.Examples(
-                examples=[
-                    ["If we look at the plans for 2018, it is to introduce 650 new products, which is an absolute all- time high."],
-                    ["We have been doing kind of an integrated campaign, so it's TV, online, we do the Google Ad Words - all those different elements together."],
-                    ["So that turned out to be beneficial for us, and I think, we'll just see how the market and interest rates move over the course of the year,"]
-                ],
-                label="Examples (click to start detection)",
-                inputs=[text_in],
-                outputs=[score_out, html_out],
-                fn=classify,
-                run_on_click=True,
-                cache_examples=False
-            )
-        with gr.Column():
-            gr.Markdown(
-                """
-                #### Project Description
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                """
-            )
+                with gr.Column():
+                    text_in = gr.Textbox(lines=1, placeholder="Insert text here", label="Input Sentence")
+                    with gr.Row():
+                        compute_bt = gr.Button("Classify")
+                    score_out = gr.Number(label="Score", interactive=False)
+                    html_out = gr.HTML(label="Explanation")
+                    gr.Examples(
+                        examples=[
+                            ["If we look at the plans for 2018, it is to introduce 650 new products, which is an absolute all- time high."],
+                            ["We have been doing kind of an integrated campaign, so it's TV, online, we do the Google Ad Words - all those different elements together."],
+                            ["So that turned out to be beneficial for us, and I think, we'll just see how the market and interest rates move over the course of the year,"]
+                        ],
+                        label="Examples (click to start detection)",
+                        inputs=[text_in],
+                        outputs=[score_out, html_out],
+                        fn=classify,
+                        run_on_click=True,
+                        cache_examples=False
+                    )
+        with gr.TabItem("📝 Usage", id=1):
             gr.Markdown(
                 """
                 #### App usage
@@ -75,16 +72,24 @@ with app:
                 It returns a confidence score that indicates the probability of the sentence containing a discussion on transformation activities. A value of 1 (0) signals a high confidence of the sentence being transformation-related (generic). A score in the range of [0.25; 0.75] implies that the model is rather undecided about the correct label.
                 In addition, the app returns the tokenized version of the sentence, alongside word importances that are indicated by color codes. Those visuals illustrates the ability of the context-aware classifier to simultaneously pay attention to various parts in the input sentence to derive a final label.                
                 """
+            )     
+        with gr.TabItem("📖 About", id=2):
+             gr.Markdown(
+                """
+                #### Project Description
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                """
             )
-    gr.Markdown(
-        """
-        <p style="text-align: center;">
-            TIClassifier by X and Y
-            <br>
-            <img id="visitor-badge" alt="visitor badge" src="https://visitor-badge.glitch.me/badge?page_id=simonschoe.TIC&left_color=green&right_color=blue" style="display: block; margin-left: auto; margin-right: auto;"/>
-        </p>
-        """
-    )
+     
+            
+    with gr.Accordion("📙 Citation", open=False):
+        citation_button = gr.Textbox(
+            value='Placeholder',
+            label='Copy to cite these results.',
+            show_copy_button=True
+        )
+        
+
     compute_bt.click(classify, inputs=[text_in], outputs=[score_out, html_out])