add legend

app.py

@@ -58,6 +58,7 @@ def molecule(input_pdb):
                 let viewer = $3Dmol.createViewer(element, config);
                 viewer.addModel(pdb, "pdb");
                 viewer.getModel(0).setStyle({}, {cartoon:{color:"spectrum"}});
+                viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity: 0.4, color: "lightblue"});
                 viewer.zoomTo();
                 viewer.render();
                 viewer.zoom(0.8, 2000);
@@ -71,10 +72,12 @@ def molecule(input_pdb):
     allow-scripts allow-same-origin allow-popups 
     allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" 
     allowpaymentrequest="" frameborder="0" srcdoc='{x}'></iframe>
-    <div style="position: absolute; top: 10px; right: 10px; background-color: white; padding: 10px; border: 1px solid black;">
+  <div style="position: absolute; top: 10px; right: 10px; background-color: white; padding: 10px; border: 1px solid black;">
+  <div style="display: flex; justify-content: space-between; margin-top: 5px;">
+        <span>High Energy</span>
+    </div>
   <div style="height: 150px; background: linear-gradient(to bottom, red, yellow, green, blue);"></div>
     <div style="display: flex; justify-content: space-between; margin-top: 5px;">
-        <span>High Energy</span>
         <span>Low Energy</span>
     </div>
     </div>
@@ -123,7 +126,7 @@ h_chain_example = "EVQLVQSGPEVKKPGTSVKVSCKASGFTFMSSAVQWVRQARGQRLEWIGWIVIGSGNTNYA
 l_chain_example = "DVVMTQTPFSLPVSLGDQASISCRSSQSLVHSNGNTYLHWYLQKPGQSPKLLIYKVSNRFSGVPDRFSGSGSGTDFTLKISRVEAEDLGVYFCSQSTHVPYTFGGGTKLEIK"
 
 with gr.Blocks() as demo:
-
+    header = gr.Label('Antibody Structure Prediction')
     h_text = gr.Textbox(lines=5, label="Heavy chain")
     l_text = gr.Textbox(lines=5, label="Light chain")
     btn = gr.Button(value="Submit")