Update app.py

app.py

@@ -3,7 +3,6 @@ import numpy as np
 import tensorflow as tf
 from tensorflow.keras.models import load_model
 from tensorflow.keras.utils import to_categorical
-from sklearn.metrics import confusion_matrix
 from tensorflow.keras.datasets import mnist
 import cv2
 
@@ -72,35 +71,176 @@ def gradio_mask(image, steps, increment):
     modified_image, original_label, predicted_label = progressively_mask_image(image, steps, increment)
     return modified_image, f"Original Label: {original_label}, New Label: {predicted_label}"
 
-def create_interface():
-    card_html = """
-    <div style="background-color: #f8f9fa; padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 20px;">
-        <h1 style="font-family: Arial, sans-serif; color: #333;">Attribution Based Confidence Metric for Neural Networks</h1>
-        <h2 style="font-family: Arial, sans-serif; color: #555;">Steven Fernandes, Ph.D.</h2>
-    </div>
-    """
-
-    image_input = gr.Image(image_mode='L', label="Input Image")
-    steps_input = gr.Slider(minimum=1, maximum=100, label="Steps", step=1, value=100)
-    increment_input = gr.Slider(minimum=1, maximum=20, label="Increment", step=1, value=5)
-
-    with gr.Blocks() as demo:
-        gr.HTML(card_html)
-        gr.Interface(
-            fn=gradio_mask,
-            inputs=[image_input, steps_input, increment_input],
-            outputs=[
-                gr.Image(image_mode='L', label="Output Image"),
-                gr.Textbox(label="Prediction Details")
-            ],
-            title="Progressive Masking",
-            description="Upload an image of a digit and observe how masking affects the model's prediction.",
-            examples=mnist_examples,
-            allow_flagging="never"
-        ).launch()
+class GradioInterface:
+    def __init__(self):
+        self.preloaded_examples = self.preload_examples()
+
+    def preload_examples(self):
+        preloaded = {}
+        for model_name, example_dir in Config.EXAMPLES.items():
+            examples = [os.path.join(example_dir, img) for img in os.listdir(example_dir)]
+            preloaded[model_name] = examples
+        return preloaded
+
+    def create_interface(self):
+        app_styles = """
+        <style>
+            /* Global Styles */
+            body, #root {
+                font-family: Helvetica, Arial, sans-serif;
+                background-color: #1a1a1a;
+                color: #fafafa;
+            }
+            /* Header Styles */
+            .app-header {
+                background: linear-gradient(45deg, #1a1a1a 0%, #333333 100%);
+                padding: 24px;
+                border-radius: 8px;
+                margin-bottom: 24px;
+                text-align: center;
+            }
+            .app-title {
+                font-size: 48px;
+                margin: 0;
+                color: #fafafa;
+            }
+            .app-subtitle {
+                font-size: 24px;
+                margin: 8px 0 16px;
+                color: #fafafa;
+            }
+            .app-description {
+                font-size: 16px;
+                line-height: 1.6;
+                opacity: 0.8;
+                margin-bottom: 24px;
+            }
+            /* Button Styles */
+            .publication-links {
+                display: flex;
+                justify-content: center;
+                flex-wrap: wrap;
+                gap: 8px;
+                margin-bottom: 16px;
+            }
+            .publication-link {
+                display: inline-flex;
+                align-items: center;
+                padding: 8px 16px;
+                background-color: #333;
+                color: #fff !important;
+                text-decoration: none !important;
+                border-radius: 20px;
+                font-size: 14px;
+                transition: background-color 0.3s;
+            }
+            .publication-link:hover {
+                background-color: #555;
+            }
+            .publication-link i {
+                margin-right: 8px;
+            }
+            /* Content Styles */
+            .content-container {
+                background-color: #2a2a2a;
+                border-radius: 8px;
+                padding: 24px;
+                margin-bottom: 24px;
+            }
+            /* Image Styles */
+            .image-preview img {
+                max-width: 512px;
+                max-height: 512px;  
+                margin: 0 auto;
+                border-radius: 4px;
+                display: block;
+                object-fit: contain;  
+            }
+            /* Control Styles */
+            .control-panel {
+                background-color: #333;
+                padding: 16px;
+                border-radius: 8px;
+                margin-top: 16px;
+            }
+            /* Gradio Component Overrides */
+            .gr-button {
+                background-color: #4a4a4a;
+                color: #fff;
+                border: none;
+                border-radius: 4px;
+                padding: 8px 16px;
+                cursor: pointer;
+                transition: background-color 0.3s;
+            }
+            .gr-button:hover {
+                background-color: #5a5a5a;
+            }
+            .gr-input, .gr-dropdown {
+                background-color: #3a3a3a;
+                color: #fff;
+                border: 1px solid #4a4a4a;
+                border-radius: 4px;
+                padding: 8px;
+            }
+            .gr-form {
+                background-color: transparent;
+            }
+            .gr-panel {
+                border: none;
+                background-color: transparent;
+            }
+            /* Override any conflicting styles from Bulma */
+            .button.is-normal.is-rounded.is-dark {
+                color: #fff !important;
+                text-decoration: none !important;
+            }
+        </style>
+        """
+
+        header_html = f"""
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+        {app_styles}
+        <div class="app-header">
+            <h1 class="app-title">Attribution Based Confidence Metric for Neural Networks</h1>
+            <h2 class="app-subtitle">Steven Fernandes, Ph.D.</h2>
+        </div>
+        """
+
+        js_func = """
+        function refresh() {
+            const url = new URL(window.location);
+            if (url.searchParams.get('__theme') !== 'dark') {
+                url.searchParams.set('__theme', 'dark');
+                window.location.href = url.href;
+            }
+        }
+        """
+
+        with gr.Blocks(js=js_func, theme=gr.themes.Default()) as demo:
+            gr.HTML(header_html)
+            with gr.Row(elem_classes="content-container"):
+                with gr.Column():
+                    input_image = gr.Image(label="Input Image", type="pil", format="png", elem_classes="image-preview")
+                    steps_input = gr.Slider(minimum=1, maximum=100, label="Steps", step=1, value=100)
+                    increment_input = gr.Slider(minimum=1, maximum=20, label="Increment", step=1, value=5)
+                with gr.Column():
+                    result = gr.Image(label="Result", elem_classes="image-preview")
+                    run_button = gr.Button("Run", elem_classes="gr-button")
+
+            run_button.click(
+                fn=gradio_mask,
+                inputs=[input_image, steps_input, increment_input],
+                outputs=[result, gr.Textbox(label="Prediction Details")],
+            )
+
+        return demo
 
 def main():
-    create_interface()
+    interface = GradioInterface()
+    demo = interface.create_interface()
+    demo.launch(debug=True)
 
 if __name__ == "__main__":
     main()