Update app.py

app.py

@@ -567,8 +567,6 @@ home</p>""")
   # gr.Image(detail).style(height=400, width=1200)
   with gr.Accordion("Generate Prompt",open=False):
     gr.Markdown("**Generate Prompt**")   
-    gr.Markdown("**Refer to the example below**")   
-    gr.HTML(value="<img src='https://i.ibb.co/hm1hGsP/503e7730-b23c-401a-a73a-3fef2eb074d9.jpg' alt='Generate Prompt' width='1200' height='300'/>")  
     print('DEBUG: FIRST WITH')
     gr.Markdown("**Generate Prompt from the face description for image generation**")
     
@@ -590,13 +588,15 @@ home</p>""")
         # seed = gr.Text(label="Input Phrase")
         text2 = gr.Text(label="Generated Phrase")
         print(text2,'-------------')
+  gr.Markdown("**Refer to the example below**")   
+  gr.HTML(value="<img id='generate_phrase' src='https://i.ibb.co/hm1hGsP/503e7730-b23c-401a-a73a-3fef2eb074d9.jpg' alt='Generate Prompt' width='1200' height='300'style='border: 2px solid #000;'/>")  
+  gr.HTML(value="<style>#generate_phrase:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")                 
+            
   abtn = gr.Button("Generate mugshot phrase")
   abtn.click(generate_prompt, inputs=[text1_1,text1_2,text1_3,text1_4], outputs=text2)
   with gr.Accordion("Generate MugShot",open=False):
     gr.Markdown("**Generate MugShot from the input prompt using StableDiffusion**")
     gr.Markdown("**Use StableDiffusion Image Generation for text to image**")
-    gr.Markdown("**Refer to the example below**")   
-    gr.HTML(value="<img src='https://i.ibb.co/9WsBLD0/21aa355d-5005-4fbb-bf50-4ded05e6075e.jpg' alt='Genrate image from prompt' style='height:500px;width:1200px'>")  
     # model = gr.Radio(["StableDiffusion"])
     with gr.Row():  
       with gr.Column():
@@ -605,6 +605,10 @@ home</p>""")
       with gr.Column():
         # seed = gr.Text(label="Input Phrase")
         im1 = gr.Image()
+    gr.Markdown("**Refer to the example below**")   
+    gr.HTML(value="<img id='genrate_mugshot'  src='https://i.ibb.co/9WsBLD0/21aa355d-5005-4fbb-bf50-4ded05e6075e.jpg' alt='Genrate image from prompt' style='height:500px;width:1200px;border: 2px solid #000;'/>")  
+      gr.HTML(value="<style>#genrate_mugshot:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")    
+          
     bbtn = gr.Button("Image from description")
     bbtn.click(generate, inputs=[text3], outputs=im1)
 
@@ -613,8 +617,6 @@ home</p>""")
     with gr.Accordion("Pre-drawn Sketch",open=False):
       gr.Markdown("**Generate Colorful Image from pre drawn sketch**")
       gr.Markdown("**Use StableDiffusion Depth2Image for Image to Image transformation**")
-      gr.Markdown("**Refer to the example below**") 
-      gr.HTML(value="<img src='https://i.ibb.co/H4k0B7k/c58db90d-9479-411d-aaff-15863d2479a0.jpg' alt='Generate Image from sketch' style='height:500px;width:1200px'>")  
       with gr.Row():  
         with gr.Column():
           # seed = gr.Text(label="Input Phrase")
@@ -624,6 +626,9 @@ home</p>""")
         with gr.Column():
           # seed = gr.Text(label="Input Phrase")
           im3 = gr.Image()
+      gr.Markdown("**Refer to the example below**") 
+      gr.HTML(value="<img id='image_to_image' src='https://i.ibb.co/H4k0B7k/c58db90d-9479-411d-aaff-15863d2479a0.jpg' alt='Generate Image from sketch' style='height:500px;width:1200px;border: 2px solid #000;'/>")  
+      gr.HTML(value="<style>#image_to_image:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")          
       cbtn = gr.Button("Sketch to color")
       cbtn.click(transform, inputs=[im2,text4,text5], outputs=im3)
     with gr.Accordion("Draw Sketch",open=False):
@@ -645,8 +650,6 @@ home</p>""")
   with gr.Accordion("Check Database",open=False):
     gr.Markdown("**Check if the image matches any image in our database using face recognition**")
     gr.Markdown("**Use Face Recognition, Face Detection and Computer Vision to match images**")
-    gr.Markdown("**Refer to the example below**") 
-    gr.HTML(value="<img src='https://i.ibb.co/bBnDxqT/c5d2fe61-4b99-4cbc-934c-1ae9edfa4386.png' alt='Check Database' width='1200' height='300'/>")    
     with gr.Row():  
       with gr.Column():
         # seed = gr.Text(label="Input Phrase")
@@ -654,14 +657,19 @@ home</p>""")
       with gr.Column():
         # seed = gr.Text(label="Input Phrase")
         text8 = gr.Text(label="Identified Name")
+
+    gr.Markdown("**Refer to the example below**") 
+    gr.HTML(value="<img id='search_database' src='https://i.ibb.co/bBnDxqT/c5d2fe61-4b99-4cbc-934c-1ae9edfa4386.png' alt='Check Database' width='1200' height='300' style='border: 2px solid #000;'/>")  
+    gr.HTML(value="<style>#search_database:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")               
+          
     fbtn = gr.Button("Find the Name")
     fbtn.click(check_database, inputs=im6, outputs=text8)
 
   with gr.Accordion("Search Google",open=False):
     gr.Markdown("**Check if the image is present on the Internet**")
     gr.Markdown("**Using Google search api to search the image on Web**")
-    gr.Markdown("**Refer to the example below**") 
-    gr.HTML(value="<img src='https://i.ibb.co/9v7vwVF/58f827cc-e24a-4df8-ab0f-40204d0940ec.jpg' alt='Check Google' width='1200' height='300'/>")    
+     
+    
     with gr.Row():  
       with gr.Column():
         # seed = gr.Text(label="Input Phrase")
@@ -669,31 +677,42 @@ home</p>""")
       with gr.Column():
         text9 = gr.Text(label="Identified Title")
         im8 = gr.Image()
+          
+    gr.Markdown("**Refer to the example below**")      
+    gr.HTML(value="<img id='search_google' src='https://i.ibb.co/9v7vwVF/58f827cc-e24a-4df8-ab0f-40204d0940ec.jpg' alt='Check Google' width='1200' height='300' style='border: 2px solid #000;'/>")  
+    gr.HTML(value="<style>#search_google:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")           
     gbtn = gr.Button("Find the Name")
     gbtn.click(google_search, inputs=im7, outputs=[text9,im8])
 
   with gr.Accordion("Search in CCTV footage",open=False):
     gr.Markdown("**Upload a video to identify missing person in the footage**")
-    gr.Markdown("**Refer to the example below**") 
-    gr.HTML(value="<img src='https://i.ibb.co/H7t0R5C/bb71faf0-f86f-4064-b796-7a4dea6efdc7.jpg' alt='Check cctv' width='1200' height='300'/>")  
+    gr.Markdown("**This feature need GPU to run**")  
+     
+      
     with gr.Row(): 
       with gr.Column():
         fil1 = gr.File(type="file")
       with gr.Column():
         vid2 = gr.Video()
           # video_name = gr.Text(label="Video Upload")
+    gr.Markdown("**Refer to the example below**")      
+    gr.HTML(value="<img id='cctv' src='https://i.ibb.co/H7t0R5C/bb71faf0-f86f-4064-b796-7a4dea6efdc7.jpg' alt='Check cctv' width='1200' height='300' style='border: 2px solid #000;'/>")  
+    gr.HTML(value="<style>#cctv:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")  
     hbtn = gr.Button("Video")
     hbtn.click(video, inputs=fil1, outputs=vid2)
       
   with gr.Accordion("Generate Knowledge Graph",open=False):
     gr.Markdown("**Genrate Knowledge Graph**")
-    gr.Markdown("**Refer to the example below**")  
+      
     with gr.Row():
       with gr.Column():
         prompt_to_generate_graph = gr.Text()
       with gr.Column():
         generated_graph_pic = gr.Image()
-    gr.HTML(value="<img src='https://i.ibb.co/j3j5Y3Q/4f4f9ed9-b52d-4ed9-a5e8-5864bffd4718.jpg' alt='Generate knowlwdge graph' width='1200' height='300' style='border: 2px solid #000;'/>")   
+    gr.Markdown("**Refer to the example below on how generated knowledge graph**")      
+    gr.HTML(value="<img id='knowledge_generate_graph' src='https://i.ibb.co/j3j5Y3Q/4f4f9ed9-b52d-4ed9-a5e8-5864bffd4718.jpg' alt='Generate knowlwdge graph' width='1200' height='300' style='border: 2px solid #000;'/>")   
+    gr.HTML(value="<style>#knowledge_generate_graph:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}</style>")  
+      
     
 
     generate_knowledge_graph = gr.Button("Generate Knowledge Graph")