Update app.py

app.py

@@ -59,9 +59,22 @@ with gr.Blocks(
     with gr.Sidebar(visible=False):
         gr.HTML("<div style='text-align:center;overflow:hidden;'><h3>&#128211; PDF Summarizer &#128211;</h3></div>")
         gr.HTML("<br>")
-        gr.HTML("<div style='text-align:center;overflow:hidden;'")
-        info_btn = gr.Button("Info")
-        gr.HTML("</div>")
+        gr.HTML("""
+        <script src='https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js'></script>
+        <link href='https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css' rel='stylesheet'>
+        """)
+        
+        # Button with JS Event
+        gr.HTML("""
+        <button onclick="Swal.fire({
+            title: 'How To Use',
+            text: 'Enter your Gemini API key, upload PDF document, select summary kind, then hit the summarize button',
+            icon: 'info'
+        });" style="padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">
+            Info
+        </button>
+        """) 
+        
         gr.HTML("<div style='text-align:center;overflow:hidden;'><h4>Gemini API Key</h4></div>")
         api_key = gr.Text(label = "",placeholder="Enter your Google Gemini API key here")