major(ui): modelscope and antd implementation

app.py

@@ -248,67 +248,65 @@ def predict_image_with_html(img, confidence_threshold, augment_methods, rotate_d
     return img_pil, forensics_images, html_content
 
 with gr.Blocks(css="#post-gallery { overflow: hidden !important;} .grid-wrap{ overflow-y: hidden !important;}") as iface:
-    with gr.Accordion("Project OpenSight - Model Evaluations & Playground", open=False, elem_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.")
-    with gr.Tab("👀 Model Evals / Playground"):
-        gr.Markdown("# AI Generated Image / Deepfake Detection Models Evaluation")
-        
-        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 (Optional)", open=False, elem_id="settings_accordion"):
-                    augment_checkboxgroup = gr.CheckboxGroup(["rotate", "add_noise", "sharpen"], label="Augmentation Methods")
-                    rotate_slider = gr.Slider(0, 45, value=2, step=1, label="Rotate Degrees", visible=False)
-                    noise_slider = gr.Slider(0, 50, value=4, step=1, label="Noise Level", visible=False)
-                    sharpen_slider = gr.Slider(0, 50, value=11, step=1, label="Sharpen Strength", visible=False)
-                    confidence_slider = gr.Slider(0.0, 1.0, value=0.75, step=0.05, label="Confidence Threshold")
-                inputs = [image_input, confidence_slider, augment_checkboxgroup, rotate_slider, noise_slider, sharpen_slider]
-                predict_button = gr.Button("Predict")
-                augment_button = gr.Button("Augment & Predict")
-                image_output = gr.Image(label="Processed Image", visible=False)
-
-
-            with gr.Column(scale=2):
-                # Custom HTML component to display results in 5 columns
-                results_html = gr.HTML(label="Model Predictions")
-                forensics_gallery = gr.Gallery(label="Post Processed Images", visible=True, columns=[5], rows=[1], container=False, height="auto", object_fit="contain", elem_id="post-gallery")
-
-                outputs = [image_output, forensics_gallery, results_html]
-        
-        # Show/hide rotate slider based on selected augmentation method
-        augment_checkboxgroup.change(lambda methods: gr.update(visible="rotate" in methods), inputs=[augment_checkboxgroup], outputs=[rotate_slider])
-        augment_checkboxgroup.change(lambda methods: gr.update(visible="add_noise" in methods), inputs=[augment_checkboxgroup], outputs=[noise_slider])
-        augment_checkboxgroup.change(lambda methods: gr.update(visible="sharpen" in methods), inputs=[augment_checkboxgroup], outputs=[sharpen_slider])
-        
-        predict_button.click(
-            fn=predict_image_with_html, 
-            inputs=inputs, 
-            outputs=outputs
-        )
-        augment_button.click(  # Connect Augment button to the function
-            fn=predict_image_with_html, 
-            inputs=[
-                image_input, 
-                confidence_slider, 
-                gr.CheckboxGroup(["rotate", "add_noise", "sharpen"], value=["rotate", "add_noise", "sharpen"], visible=False),  # Default values
-                rotate_slider, 
-                noise_slider, 
-                sharpen_slider
-            ], 
-            outputs=outputs
-        )
-        predict_button.click(
-            fn=None, 
-            js="() => {document.getElementById('project_accordion').open = false;}",  # Close the project accordion
-            inputs=[], 
-            outputs=[]
-        )
-
-    with gr.Tab("🥇 Leaderboard"):
-        # Add components for the second interface here
-        with ms.Application() as app:
-            with antd.ConfigProvider():
-            # Example: Add a simple text input and output
+    with ms.Application() as app:
+        with antd.ConfigProvider():
+            with gr.Accordion("Project OpenSight - Model Evaluations & Playground", open=False, elem_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.")
+            with gr.Tab("👀 Model Evals / Playground"):
+                gr.Markdown("# AI Generated Image / Deepfake Detection Models Evaluation")
+                
+                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 (Optional)", open=False, elem_id="settings_accordion"):
+                            augment_checkboxgroup = gr.CheckboxGroup(["rotate", "add_noise", "sharpen"], label="Augmentation Methods")
+                            rotate_slider = gr.Slider(0, 45, value=2, step=1, label="Rotate Degrees", visible=False)
+                            noise_slider = gr.Slider(0, 50, value=4, step=1, label="Noise Level", visible=False)
+                            sharpen_slider = gr.Slider(0, 50, value=11, step=1, label="Sharpen Strength", visible=False)
+                            confidence_slider = gr.Slider(0.0, 1.0, value=0.75, step=0.05, label="Confidence Threshold")
+                        inputs = [image_input, confidence_slider, augment_checkboxgroup, rotate_slider, noise_slider, sharpen_slider]
+                        predict_button = gr.Button("Predict")
+                        augment_button = gr.Button("Augment & Predict")
+                        image_output = gr.Image(label="Processed Image", visible=False)
+
+
+                    with gr.Column(scale=2):
+                        # Custom HTML component to display results in 5 columns
+                        results_html = gr.HTML(label="Model Predictions")
+                        forensics_gallery = gr.Gallery(label="Post Processed Images", visible=True, columns=[5], rows=[1], container=False, height="auto", object_fit="contain", elem_id="post-gallery")
+
+                        outputs = [image_output, forensics_gallery, results_html]
+                
+                # Show/hide rotate slider based on selected augmentation method
+                augment_checkboxgroup.change(lambda methods: gr.update(visible="rotate" in methods), inputs=[augment_checkboxgroup], outputs=[rotate_slider])
+                augment_checkboxgroup.change(lambda methods: gr.update(visible="add_noise" in methods), inputs=[augment_checkboxgroup], outputs=[noise_slider])
+                augment_checkboxgroup.change(lambda methods: gr.update(visible="sharpen" in methods), inputs=[augment_checkboxgroup], outputs=[sharpen_slider])
+                
+                predict_button.click(
+                    fn=predict_image_with_html, 
+                    inputs=inputs, 
+                    outputs=outputs
+                )
+                augment_button.click(  # Connect Augment button to the function
+                    fn=predict_image_with_html, 
+                    inputs=[
+                        image_input, 
+                        confidence_slider, 
+                        gr.CheckboxGroup(["rotate", "add_noise", "sharpen"], value=["rotate", "add_noise", "sharpen"], visible=False),  # Default values
+                        rotate_slider, 
+                        noise_slider, 
+                        sharpen_slider
+                    ], 
+                    outputs=outputs
+                )
+                predict_button.click(
+                    fn=None, 
+                    js="() => {document.getElementById('project_accordion').open = false;}",  # Close the project accordion
+                    inputs=[], 
+                    outputs=[]
+                )
+
+            with gr.Tab("🥇 Leaderboard"):
                 text_input = gr.Textbox(label="Enter Text")
                 text_output = gr.Textbox(label="Processed Text")
                 text_button = gr.Button("Process Text")