Update app.py

app.py

@@ -114,10 +114,19 @@ css = '''
   border: 2px solid #000;
   border-radius: 10px;
   padding: 10px;
+  margin-top: 15px;
   margin-left: 5%;
   width: 90%;
+}
+
+.even_bubble{
   background: pink;
 }
+
+.odd_bubble{
+  background: navy;
+}
+
 .bubble textarea {
   border: none;
   box-shadow: none;
@@ -185,6 +194,9 @@ with gr.Blocks(theme=gr.themes.Default(), css=css) as demo:
     #             btn.click(reset_new_model, [global_state])
     
     with gr.Blocks():
+        gr.Markdwon('''
+        Here are some examples of prompts we can analyze their internal representations
+        ''')
         with gr.Tab('Memory Recall'):
             pass
         with gr.Tab('Physics Understanding'):
@@ -223,7 +235,8 @@ with gr.Blocks(theme=gr.themes.Default(), css=css) as demo:
                 top_p = gr.Slider(0., 1., value=0.95, label='top p')
 
     with gr.Group('Output'):
-        interpretation_bubbles = [gr.Textbox('', container=False, visible=False, elem_classes=['bubble'])
+        interpretation_bubbles = [gr.Textbox('', container=False, visible=False, elem_classes=['bubble', 
+                                                                                               'even_bubble' if i % 2 == 0 else 'odd_bubble'])
                                  for i in range(model.config.num_hidden_layers)]
         
     for i, btn in enumerate(tokens_container):