Update Gradio interface with dynamic accordion behavior and predict button enhancements

- Modify tile 5 to display actual model prediction status
- Add JavaScript to close project accordion on prediction
- Refactor predict button click event to support multiple actions
- Remove commented-out predict button code

app.py

@@ -447,19 +447,19 @@ def generate_results_html(results):
                     <a class="mt-2 text-xs tracking-wide">@cmckinle / more info</a>
                 </div>
             </div>
-            <!-- Tile 5: GOAT -->
+            <!-- Tile 5: Newcomer -->
             <div
                 class="flex flex-col bg-gray-800 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
                 <div
                     class="-m-4 h-24 {get_header_color(results[4][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[4][-1])[4]}">
-                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: {results[4][1]}</span>
+                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: </span>
                     <span
                         class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-1 py-0.5 {get_header_color(results[4][-1])[3]}"
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
                             {'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[4][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
                         </svg>
-                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">SOON</p>
+                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[4][-1]}</p>
                     </span>
                 </div>
                 <div>
@@ -508,18 +508,31 @@ with gr.Blocks() as iface:
     with gr.Row():
         with gr.Column(scale=1):
             image_input = gr.Image(label="Upload Image to Analyze", sources=['upload'], type='pil')
-            with gr.Accordion("Settings", open=False):
+            with gr.Accordion("Settings", open=False, element_id="settings_accordion"):
                 confidence_slider = gr.Slider(0.0, 1.0, value=0.5, step=0.01, label="Confidence Threshold")
             inputs = [image_input, confidence_slider]
         with gr.Column(scale=2):
-            with gr.Accordion("Project OpenSight - Model Evaluations & Playground", open=True):
+            with gr.Accordion("Project OpenSight - Model Evaluations & Playground", open=True, element_id="project_accordion"):
                 gr.Markdown("## OpenSight is a SOTA gen. image detection model, in pre-release prep.\n\nThis HF Space is a temporary home for us and the public to evaluate the shortcomings of current open source models.\n\n<-- Feel free to play around by starting with an image as we prepare our formal announcement.")
             image_output = gr.Image(label="Processed Image", visible=False)
             # Custom HTML component to display results in 5 columns
             results_html = gr.HTML(label="Model Predictions")
             outputs = [image_output, results_html]
     
-    gr.Button("Predict").click(fn=predict_image_with_html, inputs=inputs, outputs=outputs)
+    # gr.Button("Predict").click(fn=predict_image_with_html, inputs=inputs, outputs=outputs)
+    
+    predict_button = gr.Button("Predict")
+    predict_button.click(
+        fn=predict_image_with_html, 
+        inputs=inputs, 
+        outputs=outputs
+    )
+    predict_button.click(
+        fn=None, 
+        _js="() => {document.getElementById('project_accordion').open = false;}",  # Close the project accordion
+        inputs=[], 
+        outputs=[]
+    )
 
 # Launch the interface
 iface.launch()