(FEAT)[Refactor Confidence Visualization and Update CSS]: Remove legacy confidence progress HTML function, enhance softmax confidence calculation, and implement theme-aware custom styles for better UI consistency.

(FEAT)[Revise Sidebar and Input Column UI]: Update sidebar header and app description.
- Enhance modality selection with help text
- Improve layout for model comparison and input handling.

(FEAT)[Enhance Dataset Preparation Guidance]: Add detailed instructions for dataset structure, file naming, and public data sources in the training UI and README.

(FEAT)[Enhance Input Column with Action Buttons]: Refactor input column to use side-by-side layout for action buttons, adding a "Reset All" button and improving user interaction.

modules/TRAINING_MODELS_README.md

@@ -28,7 +28,50 @@ This unified architecture ensures that any improvements to the training process
 
 ---
 
-## 🛠️ How to Train Models
+## � Acquiring and Preparing Datasets
+
+To train a model, you need a dataset of polymer spectra organized in a specific way. The training engine expects a directory containing two subdirectories:
+
+- `stable/`: Contains spectra for unweathered, stable polymers.
+- `weathered/`: Contains spectra for weathered, degraded polymers.
+
+**Example Directory Structure:**
+
+```
+/my_dataset
+├── /stable
+│   ├── sample_01.txt
+│   ├── sample_02.csv
+│   └── ...
+└── /weathered
+    ├── sample_101.txt
+    ├── sample_102.json
+    └── ...
+```
+
+### Data Format
+
+Each file inside the `stable` and `weathered` folders should be a two-column text-based format representing a single spectrum:
+
+- **Column 1**: Wavenumber (in cm⁻¹)
+- **Column 2**: Intensity / Absorbance
+- **Supported File Types**: `.txt`, `.csv`, `.json`
+- **Separators**: Comma, space, or tab.
+
+### Finding Public Datasets
+
+If you don't have your own data, you can find public datasets from various sources. Here are some starting points and keywords for your search:
+
+- **Open Specy**: A fantastic community-driven library for Raman and FTIR spectra. You can search for specific polymers and download data.
+- **RRUFF™ Project**: An integrated database of Raman spectra, X-ray diffraction, and chemistry data for minerals. While not polymer-focused, it's a great example of a spectral database.
+- **NIST Chemistry WebBook**: Contains FTIR spectra for many chemical compounds.
+- **GitHub & Kaggle**: Search for "polymer spectroscopy dataset", "Raman spectra plastic", or "FTIR microplastics".
+
+When using public data, you may need to manually classify and organize the files into the `stable`/`weathered` structure based on the sample descriptions provided with the dataset.
+
+---
+
+## �🛠️ How to Train Models
 
 With the new unified architecture, you can train models using either the command line or the interactive web UI, depending on your needs.
 

modules/training_ui.py

@@ -113,6 +113,32 @@ def render_dataset_selection():
 
 def render_dataset_upload():
     """Render dataset upload interface"""
+    with st.expander("ℹ️ How to Prepare Your Dataset for Training"):
+        st.markdown(
+            """
+            For the model to train correctly, your dataset needs to be structured properly.
+
+            **1. File Naming & Labeling:**
+            The system can infer the class (`stable` or `weathered`) from the filename. For example, a file named `stable_polymer_1.txt` or `weathered_sample.csv` will be automatically categorized.
+
+            Alternatively, you can upload all your files regardless of name and use the labeling tool that appears below to manually assign each file to a class.
+
+            **2. File Format:**
+            - Each file should contain a single spectrum.
+            - The format should be two columns: **Wavenumber** and **Intensity**.
+            - Supported file types: `.txt`, `.csv`, `.json`.
+
+            **3. Finding Data:**
+            If you need data, here are some great public resources to get started:
+            - **Open Specy**: A large, community-driven library for Raman and FTIR spectra.
+            - **RRUFF™ Project**: An integrated database of Raman spectra, X-ray diffraction, and chemistry data for minerals.
+            - **NIST Chemistry WebBook**: Contains FTIR spectra for many chemical compounds.
+            - **GitHub & Kaggle**: Search for "polymer spectroscopy dataset", "Raman spectra plastic", or "FTIR microplastics".
+
+            When using public data, you may need to manually classify and organize the files into the `stable`/`weathered` structure based on the sample descriptions provided with the dataset.
+            """
+        )
+
     st.markdown("##### Upload Dataset")
 
     uploaded_files = st.file_uploader(

modules/ui_components.py

@@ -67,51 +67,6 @@ def create_spectrum_plot(x_raw, y_raw, x_resampled, y_resampled, _cache_key=None
     return Image.open(buf)
 
 
-def render_confidence_progress(
-    probs: np.ndarray,
-    labels: list[str] = ["Stable", "Weathered"],
-    highlight_idx: Union[int, None] = None,
-    side_by_side: bool = True,
-):
-    """Render Streamlit native progress bars with scientific formatting."""
-    p = np.asarray(probs, dtype=float)
-    p = np.clip(p, 0.0, 1.0)
-
-    if side_by_side:
-        cols = st.columns(len(labels))
-        for i, (lbl, val, col) in enumerate(zip(labels, p, cols)):
-            with col:
-                is_highlighted = highlight_idx is not None and i == highlight_idx
-                label_text = f"**{lbl}**" if is_highlighted else lbl
-                st.markdown(f"{label_text}: {val*100:.1f}%")
-                st.progress(int(round(val * 100)))
-    else:
-        # Vertical layout for better readability
-        for i, (lbl, val) in enumerate(zip(labels, p)):
-            is_highlighted = highlight_idx is not None and i == highlight_idx
-
-            # Create a container for each probability
-            with st.container():
-                col1, col2 = st.columns([3, 1])
-                with col1:
-                    if is_highlighted:
-                        st.markdown(f"**{lbl}** ← Predicted")
-                    else:
-                        st.markdown(f"{lbl}")
-                with col2:
-                    st.metric(label="", value=f"{val*100:.1f}%", delta=None)
-
-                # Progress bar with conditional styling
-                if is_highlighted:
-                    st.progress(int(round(val * 100)))
-                    st.caption("🎯 **Model Prediction**")
-                else:
-                    st.progress(int(round(val * 100)))
-
-                if i < len(labels) - 1:  # Add spacing between items
-                    st.markdown("")
-
-
 from typing import Optional
 
 
@@ -161,25 +116,9 @@ def render_sidebar():
         # Header
         st.header("AI-Driven Polymer Classification")
         st.caption(
-            "Predict polymer degradation (Stable vs Weathered) from Raman/FTIR spectra using validated CNN models. — v0.01"
+            "Analyze and classify polymer degradation with a suite of explainable AI models for Raman & FTIR spectroscopy. — v0.02"
         )
 
-        # Modality Selection
-        st.markdown("##### Spectroscopy Modality")
-        modality = st.selectbox(
-            "Choose Modality",
-            ["raman", "ftir"],
-            index=0,
-            key="modality_select",
-            format_func=lambda x: f"{'Raman' if x == 'raman' else 'FTIR'}",
-        )
-
-        # Display modality info
-        if modality == "ftir":
-            st.info("FTIR mode: 400-4000 cm-1 range with atmospheric correction")
-        else:
-            st.info("Raman mode: 200-4000 cm-1 range with standard preprocessing")
-
         # Model selection
         st.markdown("##### AI Model Selection")
 
@@ -202,6 +141,7 @@ def render_sidebar():
             model_labels,
             key="model_select",
             on_change=on_model_change,
+            width="stretch",
         )
         model_choice = selected_label.split(" ", 1)[1]
 
@@ -212,37 +152,51 @@ def render_sidebar():
         with st.expander("About This App", icon=":material/info:", expanded=False):
             st.markdown(
                 """
-            **AI-Driven Polymer Aging Prediction and Classification**
-
-            **Purpose**: Classify polymer degradation using AI<br>
-            **Input**: Raman spectroscopy .txt files<br>
-            **Models**: CNN architectures for classification<br>
-            **Modalities**: Raman and FTIR spectroscopy support<br>
-            **Features**: Multi-model comparison and analysis<br>
+            **AI-Driven Polymer Analysis Platform**
 
+            **Purpose**: Classify, analyze, and understand polymer degradation using explainable AI.
 
-            **Contributors**<br>
-            - Dr. Sanmukh Kuppannagari (Mentor)<br>
-            - Dr. Metin Karailyan (Mentor)<br>
-            - Jaser Hasan (Author)<br>
+            **Input**: Raman & FTIR spectra in `.txt`, `.csv`, or `.json` formats.
 
+            **Features**:
+            - Single & Batch Spectrum Analysis
+            - Multi-Model Performance Comparison
+            - Interactive Model Training Hub
+            - Explainable AI (XAI) with feature importance
+            - Modality-Aware Preprocessing
 
-            **Links**<br>
-            [HF Space](https://huggingface.co/spaces/dev-jas/polymer-aging-ml)<br>
+            **Links**  
+            [HF Space](https://huggingface.co/spaces/dev-jas/polymer-aging-ml)  
             [GitHub Repository](https://github.com/KLab-AI3/ml-polymer-recycling)
 
+            **Contributors**
+            - Dr. Sanmukh Kuppannagari (Mentor)
+            - Dr. Metin Karailyan (Mentor)
+            - Jaser Hasan (Author)
+
 
-            **Citation Figure2CNN (baseline)**
+            **Citation (Baseline Model)**
             Neo et al., 2023, *Resour. Conserv. Recycl.*, 188, 106718.
-            [https://doi.org/10.1016/j.resconrec.2022.106718](https://doi.org/10.1016/j.resconrec.2022.106718)
-            """,
-                unsafe_allow_html=True,
+            https://doi.org/10.1016/j.resconrec.2022.106718
+            """
             )
 
 
 def render_input_column():
     st.markdown("##### Data Input")
 
+    # Modality Selection - Moved from sidebar to be the primary context setter
+    st.markdown("###### 1. Choose Spectroscopy Modality")
+    modality = st.selectbox(
+        "Choose Modality",
+        ["raman", "ftir"],
+        index=0,
+        key="modality_select",
+        format_func=lambda x: f"{'Raman' if x == 'raman' else 'FTIR'}",
+        help="Select the type of spectroscopy data you are analyzing. This choice affects preprocessing steps.",
+        width=325,
+    )
+
     mode = st.radio(
         "Input mode",
         ["Upload File", "Batch Upload", "Sample Data"],
@@ -332,6 +286,7 @@ def render_input_column():
                 options,
                 key="sample_select",
                 on_change=on_sample_change,
+                width=350,
             )
             if sel != "-- Select Sample --":
                 st.session_state["status_message"] = (
@@ -365,19 +320,21 @@ def render_input_column():
     # Store for other modules to access
     st.session_state["inference_ready"] = inference_ready
 
-    # Render buttons
-    with st.form("analysis_form", clear_on_submit=False):
-        submitted = st.form_submit_button(
-            "Run Analysis", type="primary", disabled=not inference_ready
+    # --- Action Buttons ---
+    # Using columns for a side-by-side layout
+    col1, col2 = st.columns(2)
+    with col1:
+        submitted = st.button(
+            "Run Analysis",
+            type="primary",
+            disabled=not inference_ready,
+            use_container_width=True,
         )
-    st.button(
-        "Reset All",
-        on_click=reset_ephemeral_state,
-        help="Clear all uploaded files and results.",
-    )
+    with col2:
+        st.button("Reset All", on_click=reset_ephemeral_state, use_container_width=True)
 
     # Handle form submission
-    if submitted and inference_ready:
+    if submitted:
         st.session_state["run_uuid"] = uuid.uuid4().hex[:8]
         if st.session_state.get("batch_mode"):
             batch_files = st.session_state.get("batch_files", [])
@@ -604,16 +561,10 @@ def render_results_column():
                         return -sum(p * math.log(p) for p in ps)
 
                     def _badge(text, kind="info"):
-                        palette = {
-                            "info": ("#334155", "#e2e8f0"),
-                            "warn": ("#7c2d12", "#fde68a"),
-                            "good": ("#064e3b", "#bbf7d0"),
-                            "bad": ("#7f1d1d", "#fecaca"),
-                        }
-                        bg, fg = palette.get(kind, palette["info"])
+                        # This function now relies on CSS classes defined in style.css
+                        # for better separation of concerns and maintainability.
                         st.markdown(
-                            f"<span style='background:{bg};color:{fg};padding:4px 8px;"
-                            f"border-radius:6px;font-size:0.80rem;white-space:nowrap'>{text}</span>",
+                            f"<span class='badge badge-{kind}'>{text}</span>",
                             unsafe_allow_html=True,
                         )
 
@@ -935,18 +886,17 @@ def render_results_column():
                 with st.container():
                     st.markdown("### 🔍 Methodology & Interpretation")
 
-                    # Process explanation
-                    st.markdown("Analysis Pipeline")
+                    st.markdown("#### Analysis Pipeline")
                     process_steps = [
-                        "📁 **Data Upload**: Raman spectrum file loaded and validated",
-                        "🔍 **Preprocessing**: Spectrum parsed and resampled to 500 data points using linear interpolation",
-                        "🧠 **AI Inference**: Convolutional Neural Network analyzes spectral patterns and molecular signatures",
-                        "📊 **Classification**: Binary prediction with confidence scoring using softmax probabilities",
-                        "✅ **Validation**: Ground truth comparison (when available from filename)",
+                        "📁 **Data Input**: Upload a spectrum file (`.txt`, `.csv`, `.json`) and select the spectroscopy modality (Raman or FTIR).",
+                        "🔬 **Modality-Aware Preprocessing**: The spectrum is automatically processed with steps tailored to the selected modality, including baseline correction, smoothing, normalization, and resampling to a fixed length (500 points).",
+                        "🧠 **AI Inference**: A selected model from the registry (e.g., `Figure2CNN`, `ResNet`, `EnhancedCNN`) analyzes the processed spectrum to identify key patterns.",
+                        "📊 **Classification & Confidence**: The model outputs a binary prediction (Stable vs. Weathered) along with a detailed probability breakdown and confidence score.",
+                        "✅ **Validation & Explainability**: Results are presented with technical diagnostics, and where possible, explainability metrics to interpret the model's decision.",
                     ]
 
                     for step in process_steps:
-                        st.markdown(step)
+                        st.markdown(f"- {step}")
 
                     st.markdown("---")
 
@@ -959,11 +909,10 @@ def render_results_column():
                         st.markdown("**Stable (Unweathered) Polymers:**")
                         st.info(
                             """
-                        - Well-preserved molecular structure
-                        - Minimal oxidative degradation
-                        - Characteristic Raman peaks intact
-                        - 
-                        itable for recycling applications
+                        - **Spectral Signature**: Sharp, well-defined peaks corresponding to the polymer's known vibrational modes.
+                        - **Chemical State**: Minimal evidence of oxidation or chain scission. The polymer backbone is intact.
+                        - **Model Behavior**: The AI identifies a strong match with the spectral fingerprint of a non-degraded reference material.
+                        - **Implication**: Suitable for high-quality recycling applications.
                         """
                         )
 
@@ -971,49 +920,47 @@ def render_results_column():
                         st.markdown("**Weathered (Degraded) Polymers:**")
                         st.warning(
                             """
-                        - Oxidized molecular bonds
-                        - Surface degradation present
-                        - Altered spectral signatures
-                        - May require additional processing
+                        - **Spectral Signature**: Peak broadening, baseline shifts, and the emergence of new peaks (e.g., carbonyl group at ~1715 cm⁻¹).
+                        - **Chemical State**: Evidence of oxidation, hydrolysis, or other degradation pathways.
+                        - **Model Behavior**: The AI detects features that deviate significantly from the reference fingerprint, indicating chemical alteration.
+                        - **Implication**: May require more intensive processing or be unsuitable for certain recycling streams.
                         """
                         )
 
                     st.markdown("---")
 
                     # Applications
-                    st.markdown("#### Research Applications")
+                    st.markdown("#### Research & Industrial Applications")
 
                     applications = [
-                        "🔬 **Material Science**: Polymer degradation studies",
-                        "♻️ **Recycling Research**: Viability assessment for circular economy",
-                        "🌱 **Environmental Science**: Microplastic weathering analysis",
-                        "🏭 **Quality Control**: Manufacturing process monitoring",
-                        "📈 **Longevity Studies**: Material aging prediction",
+                        " **Material Science**: Quantify degradation rates and study aging mechanisms in novel polymers.",
+                        "♻️ **Circular Economy**: Automate the quality control and sorting of post-consumer plastics for recycling.",
+                        "🌱 **Environmental Science**: Analyze the weathering of microplastics in various environmental conditions.",
+                        "🏭 **Industrial QC**: Monitor material integrity and predict product lifetime in manufacturing processes.",
+                        "🤖 **AI-Driven Discovery**: Use explainability features to generate new hypotheses about material behavior.",
                     ]
 
                     for app in applications:
-                        st.markdown(app)
+                        st.markdown(f"- {app}")
 
                     # Technical details
-                    # MODIFIED: Wrap the expander in a div with the 'expander-advanced' class
-                    with st.expander("🔧 Technical Details", expanded=False):
+                    with st.expander(
+                        "🔧 Technical Architecture Details", expanded=False
+                    ):
                         st.markdown(
                             """
-                        **Model Architecture:**
-                        - Convolutional layers for feature extraction
-                        - Residual connections for gradient flow
-                        - Fully connected layers for classification
-                        - Softmax activation for probability distribution
-
-                        **Performance Metrics:**
-                        - Accuracy: 94.8-96.2% on validation set
-                        - F1-Score: 94.3-95.9% across classes
-                        - Robust to spectral noise and baseline variations
-
-                        **Data Processing:**
-                        - Input: Raman spectra (any length)
-                        - Resampling: Linear interpolation to 500 points
-                        - Normalization: None (preserves intensity relationships)
+                        **Model Architectures:**
+                        - The app features a registry of models, including the `Figure2CNN` baseline, `ResNet` variants, and more advanced custom architectures like `EnhancedCNN` and `HybridSpectralNet`.
+                        - Each model is trained on a comprehensive dataset of stable and weathered polymer spectra.
+
+                        **Unified Training Engine:**
+                        - A central `TrainingEngine` ensures that all models are trained and validated using a consistent, reproducible 10-fold cross-validation strategy.
+                        - This engine can be accessed via the **CLI** (`scripts/train_model.py`) for automated experiments or the **UI** ("Model Training Hub") for interactive use.
+
+                        **Explainability & Transparency (XAI):**
+                        - **Feature Importance**: The system is designed to incorporate SHAP and gradient-based methods to highlight which spectral regions most influence a prediction.
+                        - **Uncertainty Quantification**: Advanced models can estimate both model (epistemic) and data (aleatoric) uncertainty.
+                        - **Data Provenance**: The enhanced data pipeline tracks every preprocessing step, ensuring full traceability from raw data to final prediction.
                         """
                         )
 
@@ -1023,7 +970,8 @@ def render_results_column():
                     )
 
             with st.expander("Spectrum Preprocessing Results", expanded=False):
-                st.caption("<br>Spectral Analysis", unsafe_allow_html=True)
+                st.markdown("---")
+                st.markdown("##### Spectral Analysis")
 
                 # Add some context about the preprocessing
                 st.markdown(
@@ -1071,6 +1019,7 @@ def render_results_column():
             -   **Content:** Must contain two columns: `wavenumber` and `intensity`.
             -   **Separators:** Values can be separated by spaces or commas.
             -   **Preprocessing:** Your spectrum will be automatically resampled to 500 data points to match the model's input requirements.
+            -   **Examples:** Use the "Sample Data" input mode to see examples, or find public data on sites like Open Specy.
             """
             )
     else:
@@ -1094,6 +1043,7 @@ def render_results_column():
         -   **Content:** Must contain two columns: `wavenumber` and `intensity`.
         -   **Separators:** Values can be separated by spaces or commas.
         -   **Preprocessing:** Your spectrum will be automatically resampled to 500 data points to match the model's input requirements.
+        -   **Examples:** Use the "Sample Data" input mode to see examples, or find public data on sites like Open Specy.
         """
         )
 
@@ -1120,27 +1070,16 @@ def render_comparison_tab():
         "Compare predictions across different AI models for comprehensive analysis."
     )
 
-    # Modality selector - Use independant state for comparison tab
-    col_mod1, col_mod2 = st.columns([1, 2])
-    with col_mod1:
-        # Get the current sidebar modality but don't try to sync back
-        current_modality = st.session_state.get("modality_select", "raman")
-        modality = st.selectbox(
-            "Select Modality",
-            ["raman", "ftir"],
-            index=0 if current_modality == "raman" else 1,
-            help="Choose the spectroscopy modality for analysis",
-            key="comparison_tab_modality",  # Independant key for session state to avoid duplication of UI elements
-        )  # Note: Intentially not synching back to avoid state conflicts
-
-    with col_mod2:
-        # Filter models by modality
-        compatible_models = models_for_modality(modality)
-        if not compatible_models:
-            st.error(f"No models available for {modality.upper()} modality")
-            return
-
-        st.info(f"📊 {len(compatible_models)} models available for {modality.upper()}")
+    # Use the global modality selector from the main page
+    modality = st.session_state.get("modality_select", "raman")
+    st.info(
+        f"Comparing models using **{modality.upper()}** preprocessing parameters. You can change this on the 'Upload and Run' page."
+    )
+
+    compatible_models = models_for_modality(modality)
+    if not compatible_models:
+        st.error(f"No models available for {modality.upper()} modality")
+        return
 
     # Enhanced model selection with metadata
     st.markdown("##### Select Models for Comparison")

static/style.css

@@ -1,13 +1,14 @@
-/*  THEME-AWARE CUSTOM CSS
-
-    This CSS block has been refactored to use Streamlit's internal theme
-    variables. This ensures that all custom components will automatically adapt
-    to both light and dark themes selected by the user in the settings menu.
-*/
-/* ====== Font Imports (Optional but Recommended) ====== */
+/* ==========================================================================
+   POLYMEROS - THEME-AWARE CUSTOM STYLESHEET
+   ==========================================================================
+   This file uses Streamlit's theme variables (e.g., var(--text-color))
+   to ensure all custom components adapt to both light and dark themes.
+   ========================================================================== */
+
+/* --- Font Imports --- */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400&display=swap');
 
-/* ====== Base & Typography ====== */
+/* --- Base & Typography --- */
 .stApp,
 section[data-testid="stSidebar"],
 div[data-testid="stMetricValue"],
@@ -21,7 +22,7 @@ div[data-testid="stMetricLabel"] {
     font-family: 'Fira Code', monospace;
 }
 
-/* ====== Custom Containers: Tabs & Info Boxes ====== */
+/* --- Custom Containers: Tabs & Info Boxes --- */
 div[data-testid="stTabs"]>div[role="tablist"]+div {
     min-height: 400px;
     /* Uses the secondary background color, which is different in light and dark modes */
@@ -41,7 +42,7 @@ div[data-testid="stTabs"]>div[role="tablist"]+div {
     background-color: var(--secondary-background-color);
 }
 
-/* ====== Key-Value Pair Styling ====== */
+/* --- Key-Value Pair Styling --- */
 .kv-row {
     display: flex;
     justify-content: space-between;
@@ -66,7 +67,44 @@ div[data-testid="stTabs"]>div[role="tablist"]+div {
     text-align: right;
 }
 
-/* ====== Custom Expander Styling ====== */
+/* --- Custom Badges (replaces inline styles) --- */
+.badge {
+    display: inline-block;
+    padding: 4px 8px;
+    font-size: 0.80rem;
+    font-weight: 500;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 6px;
+    font-family: 'Inter', sans-serif;
+}
+
+.badge-info {
+    color: #e2e8f0;
+    background-color: #334155;
+}
+
+.badge-warn {
+    color: #7c2d12;
+    background-color: #fde68a;
+}
+
+.badge-good {
+    color: #064e3b;
+    background-color: #bbf7d0;
+}
+
+.badge-bad {
+    color: #7f1d1d;
+    background-color: #fecaca;
+}
+
+
+/* --- Custom Expander Styling --- */
+
+/* Hide default expander arrow */
 div.stExpander>details>summary::-webkit-details-marker,
 div.stExpander>details>summary::marker,
 div[data-testid="stExpander"] summary svg {
@@ -74,6 +112,7 @@ div[data-testid="stExpander"] summary svg {
 }
 
 div.stExpander>details>summary::after {
+    /* Custom indicator */
     content: '↓';
     font-size: 0.75rem;
     font-weight: 900;
@@ -82,39 +121,21 @@ div.stExpander>details>summary::after {
     border-radius: 999px;
     /* The primary color is set in config.toml and adapted by Streamlit */
     background-color: var(--primary);
-    color: var(--text-color);
-    /* Text on the primary color needs high contrast. White works well for our chosen purple. */
-
+    color: white;
+    /* Assuming primary color is dark enough for white text */
     transition: background-color 0.2s ease-in-out;
 }
 
 div.stExpander>details>summary:hover::after {
-    /* Using a fixed darker shade on hover. A more advanced solution could use color-mix() in CSS. */
     filter: brightness(90%);
 }
 
-/* Specialized Expander Labels */
-.expander-results div[data-testid="stExpander"] summary::after {
-    content: "RESULTS";
-    background-color: #16A34A;
-    /* Green is universal for success */
-
-}
-
 div[data-testid="stExpander"] details {
-    content: "RESULTS";
     background-color: var(--primary);
     border-radius: 10px;
     padding: 10px
 }
 
-.expander-advanced div[data-testid="stExpander"] summary::after {
-    content: "ADVANCED";
-    background-color: #D97706;
-    /* Amber is universal for warning/technical */
-
-}
-
 [data-testid="stExpanderDetails"] {
     padding: 16px 4px 4px 4px;
     background-color: transparent;
@@ -122,7 +143,7 @@ div[data-testid="stExpander"] details {
     margin-top: 12px;
 }
 
-/* ====== Sidebar & Metrics ====== */
+/* --- Sidebar & Metrics --- */
 section[data-testid="stSidebar"]>div:first-child {
     background-color: var(--secondary-background-color);
     border-right: 1px solid rgba(128, 128, 128, 0.2);
@@ -138,52 +159,10 @@ div[data-testid="stMetricLabel"] {
     opacity: 0.8;
 }
 
-/* ====== Interactivity & Accessibility ====== */
+/* --- Interactivity & Accessibility --- */
 :focus-visible {
     /* The focus outline now uses the theme's primary color */
-    outline: 20px solid var(--primary);
+    outline: 2px solid var(--primary);
     outline-offset: 2px;
     border-radius: 8px;
-}
-
-.st-key-csv-button,
-.st-key-json-button,
-.st-key-clearall-button {
-    display: block;
-    border: 1px double #1a1a1a98;
-    max-width: 100%;
-    border-radius: 8px;
-
-
-
-}
-
-.st-key-page-link-container {
-    padding: 5px;
-    display: inline-block;
-    justify-items: center;
-    align-self: center;
-    align-content: center;
-    border: 1px double #1a1a1a98;
-    border-radius: 8px;
-    background-color: var(--secondary-background-color);
-    max-width: 100%;
-
-}
-
-.st-key-buttons-container {
-    display: flex;
-    max-width: 100%;
-}
-
-
-
-/* .st-key-csv-button:hover,
-.st-key-json-button:hover,
-.st-key-clearall-button:hover {
-    padding: .25px;
-}
-.st-key-page-link {
-    color: var(--text-color);
-    text-decoration: none;
-}*/
+}

utils/confidence.py

@@ -1,12 +1,15 @@
 """Confidence calculation and visualization utilities.
 Provides normalized softmax confidence and color-coded badges"""
+
 from typing import Tuple, List
 import numpy as np
 import torch
 import torch.nn.functional as F
 
 
-def calculate_softmax_confidence(logits: torch.Tensor) -> Tuple[np.ndarray, float, str, str]:
+def calculate_softmax_confidence(
+    logits: torch.Tensor,
+) -> Tuple[np.ndarray, float, str, str]:
     """Calculate normalized confidence using softmax
     Args:
         logits: Raw model logits tensor
@@ -63,75 +66,6 @@ def format_confidence_display(confidence: float, level: str, emoji: str) -> str:
     return f"{emoji} **{level}** ({confidence:.1%})"
 
 
-def create_confidence_progress_html(
-    probabilities: np.ndarray,
-    labels: List[str],
-    highlight_idx: int
-) -> str:
-    """
-    Create HTML for confidence progress bars
-
-    Args:
-        probabilities: Array of class probabilities
-        labels: List of class labels
-        highlight_idx: Index of predicted class to highlight
-
-    Returns:
-        HTML string for progress bars
-    """
-    if len(probabilities) == 0 or len(labels) == 0:
-        return "<p>No confidence data available</p>"
-
-    html_parts = []
-
-    for i, (prob, label) in enumerate(zip(probabilities, labels)):
-        # ===Color based on whether this is the predicted class===
-        if i == highlight_idx:
-            if prob >= 0.80:
-                color = "#22c55e"  # green-500
-                text_color = "#ffffff"
-            elif prob >= 0.60:
-                color = "#eab308"  # yellow-500
-                text_color = "#000000"
-            else:
-                color = "#ef4444"  # red-500
-                text_color = "#ffffff"
-        else:
-            color = "#e5e7eb"  # gray-200
-            text_color = "#6b7280"  # gray-500
-
-        percentage = prob * 100
-
-        html_parts.append(f"""
-        <div style="margin-bottom: 8px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
-                <span style="font-size: 0.875rem; font-weight: 500; color: #374151;">{label}</span>
-                <span style="font-size: 0.875rem; color: #6b7280;">{percentage:.1f}%</span>
-            </div>
-            <div style="width: 100%; background-color: #f3f4f6; border-radius: 0.375rem; height: 20px; overflow: hidden;">
-                <div style="
-                    width: {percentage}%; 
-                    height: 100%; 
-                    background-color: {color}; 
-                    display: flex; 
-                    align-items: center; 
-                    justify-content: center;
-                    transition: width 0.3s ease;
-                ">
-                    {f'<span style="color: {text_color}; font-size: 0.75rem; font-weight: 600;">{percentage:.1f}%</span>' if percentage > 20 else ''}
-                </div>
-            </div>
-        </div>
-        """)
-
-    return f""" 
-    <div style="padding: 16px; background-color: #f9fafb; border-radius: 0.5rem; border: 1px solid #e5e7eb;">
-        <h4 style="margin: 0 0 12px 0; font-size: 1rem; color: #374151;">Confidence Breakdown</h4>
-        {''.join(html_parts)}
-    </div>
-    """
-
-
 def calculate_legacy_confidence(logits_list: List[float]) -> Tuple[float, str, str]:
     """
     Calculate confidence using legacy logit margin method for backward compatibility