Upload folder using huggingface_hub

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.12-slim
+
+# Install Node.js for frontend build
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends curl && \
+    curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \
+    apt-get install -y --no-install-recommends nodejs && \
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Build frontend
+COPY frontend/package.json frontend/package-lock.json ./frontend/
+RUN cd frontend && npm ci
+
+COPY frontend/ ./frontend/
+RUN cd frontend && npm run build
+
+# Copy backend and example data
+COPY app/ ./app/
+COPY example_data/ ./example_data/
+
+# HF Spaces expects port 7860
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,28 @@
 ---
-title: OpenAlphaDiffract UI
-emoji: 🌍
-colorFrom: indigo
-colorTo: red
+title: OpenAlphaDiffract
+emoji: 🔬
+colorFrom: blue
+colorTo: purple
 sdk: docker
+app_port: 7860
+license: bsd-3-clause
+models:
+- linked-liszt/OpenAlphaDiffract
+tags:
+- materials-science
+- crystallography
+- x-ray-diffraction
+- pxrd
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# OpenAlphaDiffract
+
+Automated crystallographic analysis of powder X-ray diffraction (PXRD) data.
+
+Upload a `.dif` file or use one of the built-in examples to predict crystal system,
+space group, and lattice parameters from a PXRD pattern.
+
+**Paper:** [arXiv:2603.23367](https://arxiv.org/abs/2603.23367)
+**Model:** [linked-liszt/OpenAlphaDiffract](https://huggingface.co/linked-liszt/OpenAlphaDiffract)
+**Code:** [GitHub](https://github.com/AdvancedPhotonSource/OpenAlphaDiffract)

app/__init__.py

@@ -0,0 +1,4 @@
+"""OpenAlphaDiffract — XRD Analysis API"""
+from .main import app
+
+__all__ = ["app"]

app/main.py

@@ -0,0 +1,207 @@
+"""
+FastAPI main application for XRD Analysis Tool.
+Serves both the API endpoints and the static React frontend.
+"""
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse, PlainTextResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pathlib import Path
+from typing import Dict, List
+import re
+
+from .model_inference import XRDModelInference
+
+# Initialize FastAPI app
+app = FastAPI(
+    title="OpenAlphaDiffract",
+    description="Automated crystallographic analysis of powder X-ray diffraction data",
+    version="1.0.0",
+)
+
+# CORS — allow all origins (same-origin on HF Spaces, open for embeds)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Initialize model inference
+model_inference = XRDModelInference()
+
+
+@app.on_event("startup")
+async def startup_event():
+    """Load model on startup"""
+    model_inference.load_model()
+
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "model_loaded": model_inference.is_loaded()}
+
+
+@app.post("/api/predict")
+async def predict(data: dict):
+    """
+    Predict XRD analysis from preprocessed data.
+
+    Expects JSON payload: {"x": [2theta values], "y": [intensity values], "metadata": {...}}
+    """
+    import time
+
+    request_start = time.time()
+
+    try:
+        metadata = data.get("metadata", {})
+        request_id = metadata.get("timestamp", "unknown")
+        filename = metadata.get("filename", "unknown")
+        analysis_count = metadata.get("analysisCount", "unknown")
+
+        x = data.get("x", [])
+        y = data.get("y", [])
+
+        if not x or not y:
+            return JSONResponse(status_code=400, content={"error": "Missing x or y data"})
+
+        if len(x) != len(y):
+            return JSONResponse(
+                status_code=400,
+                content={"error": "x and y arrays must have the same length"},
+            )
+
+        results = model_inference.predict(x, y)
+
+        request_time = (time.time() - request_start) * 1000
+
+        if isinstance(results, dict):
+            results["request_metadata"] = {
+                "request_id": request_id,
+                "filename": filename,
+                "analysis_count": analysis_count,
+                "processing_time_ms": request_time,
+            }
+
+        return JSONResponse(
+            content=results,
+            headers={
+                "Cache-Control": "no-cache, no-store, must-revalidate, private",
+                "Pragma": "no-cache",
+                "Expires": "0",
+                "X-Request-ID": str(request_id),
+            },
+        )
+
+    except Exception as e:
+        return JSONResponse(
+            status_code=500,
+            content={"error": f"Prediction failed: {str(e)}"},
+        )
+
+
+# ---------------------------------------------------------------------------
+# Example data endpoints
+# ---------------------------------------------------------------------------
+EXAMPLE_DATA_DIR = Path(__file__).parent.parent / "example_data"
+
+CRYSTAL_SYSTEM_NAMES = {
+    "1": "Triclinic",
+    "2": "Monoclinic",
+    "3": "Orthorhombic",
+    "4": "Tetragonal",
+    "5": "Trigonal",
+    "6": "Hexagonal",
+    "7": "Cubic",
+}
+
+
+def _parse_example_metadata(filepath: Path) -> dict:
+    """Extract metadata from the header lines of a .dif file."""
+    meta = {
+        "filename": filepath.name,
+        "material_id": None,
+        "crystal_system": None,
+        "crystal_system_name": None,
+        "space_group": None,
+        "wavelength": None,
+    }
+    with open(filepath, "r") as f:
+        for line in f:
+            line = line.strip()
+            if (
+                line
+                and not line.startswith("#")
+                and not line.startswith("CELL")
+                and not line.startswith("SPACE")
+                and not line.lower().startswith("wavelength")
+            ):
+                break
+
+            if m := re.search(r"Material ID:\s*(\S+)", line):
+                meta["material_id"] = m.group(1)
+            if m := re.search(r"Crystal System:\s*(\d+)", line):
+                num = m.group(1)
+                meta["crystal_system"] = num
+                meta["crystal_system_name"] = CRYSTAL_SYSTEM_NAMES.get(
+                    num, f"Unknown ({num})"
+                )
+            if m := re.search(r"SPACE GROUP:\s*(\d+)", line):
+                meta["space_group"] = m.group(1)
+            if m := re.search(r"wavelength:\s*([\d.]+)", line, re.IGNORECASE):
+                meta["wavelength"] = m.group(1)
+    return meta
+
+
+@app.get("/api/examples")
+async def list_examples():
+    """List available example data files with metadata."""
+    if not EXAMPLE_DATA_DIR.exists():
+        return []
+
+    examples = []
+    for fp in sorted(EXAMPLE_DATA_DIR.glob("*.dif")):
+        examples.append(_parse_example_metadata(fp))
+    return examples
+
+
+@app.get("/api/examples/{filename}")
+async def get_example(filename: str):
+    """Return the raw text content of an example data file."""
+    if "/" in filename or "\\" in filename or ".." in filename:
+        raise HTTPException(status_code=400, detail="Invalid filename")
+
+    filepath = EXAMPLE_DATA_DIR / filename
+    if not filepath.exists() or not filepath.is_file():
+        raise HTTPException(status_code=404, detail="Example file not found")
+
+    return PlainTextResponse(filepath.read_text())
+
+
+# ---------------------------------------------------------------------------
+# Static files and SPA support
+# ---------------------------------------------------------------------------
+frontend_dist = Path(__file__).parent.parent / "frontend" / "dist"
+
+if frontend_dist.exists():
+    app.mount(
+        "/assets",
+        StaticFiles(directory=str(frontend_dist / "assets")),
+        name="assets",
+    )
+
+    @app.get("/{path:path}")
+    async def serve_spa(path: str):
+        """Serve React SPA"""
+        file_path = frontend_dist / path
+        if file_path.is_file():
+            return FileResponse(file_path)
+        return FileResponse(frontend_dist / "index.html")
+
+else:
+
+    @app.get("/")
+    async def root():
+        return {"message": "Frontend not built. Run 'npm run build' in frontend/"}

app/model_inference.py

@@ -0,0 +1,272 @@
+"""
+Model inference logic for XRD pattern analysis.
+Loads the pretrained model from HuggingFace Hub and runs predictions.
+"""
+import sys
+from pathlib import Path
+from typing import Dict, List, Optional
+
+import numpy as np
+import spglib
+import torch
+
+
+class XRDModelInference:
+    """Handles loading and inference for the XRD analysis model"""
+
+    # Build a lookup table mapping space group number (1-230) to the
+    # corresponding Hall number.  spglib.get_spacegroup_type() is indexed
+    # by Hall number (1-530), NOT by space group number.  We pick the
+    # first (standard-setting) Hall number for each space group.
+    _sg_to_hall: Dict[int, int] = {}
+    for _hall in range(1, 531):
+        _sg_type = spglib.get_spacegroup_type(_hall)
+        _sg_num = _sg_type.number if hasattr(_sg_type, "number") else _sg_type["number"]
+        if _sg_num not in _sg_to_hall:
+            _sg_to_hall[_sg_num] = _hall
+
+    HF_REPO_ID = "linked-liszt/OpenAlphaDiffract"
+
+    def __init__(self):
+        self.model = None
+        self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+    def is_loaded(self) -> bool:
+        """Check if model is loaded"""
+        return self.model is not None
+
+    def load_model(self):
+        """Download and load the pretrained model from HuggingFace Hub."""
+        try:
+            from huggingface_hub import snapshot_download
+
+            print(f"Downloading model from {self.HF_REPO_ID}...")
+            model_dir = snapshot_download(self.HF_REPO_ID)
+            print(f"Model downloaded to {model_dir}")
+
+            # Import the pure-PyTorch model class from the downloaded repo
+            sys.path.insert(0, model_dir)
+            from model import AlphaDiffract
+
+            self.model = AlphaDiffract.from_pretrained(
+                model_dir, device=str(self.device)
+            )
+
+            print(f"Model loaded successfully on {self.device}")
+
+        except Exception as e:
+            print(f"Error loading model: {e}")
+            import traceback
+            traceback.print_exc()
+            self.model = None
+
+    def preprocess_data(self, x: List[float], y: List[float]) -> torch.Tensor:
+        """
+        Preprocess XRD data for model input.
+
+        Args:
+            x: 2theta values
+            y: Intensity values
+
+        Returns:
+            Preprocessed tensor ready for model input
+        """
+        y_array = np.array(y, dtype=np.float32)
+
+        # Floor at zero (remove any negative values)
+        y_array = np.maximum(y_array, 0.0)
+
+        # Rescale intensity values to [0, 100] range (matching training preprocessing)
+        y_min = np.min(y_array)
+        y_max = np.max(y_array)
+
+        if y_max - y_min < 1e-10:
+            y_scaled = np.zeros_like(y_array, dtype=np.float32)
+        else:
+            y_normalized = (y_array - y_min) / (y_max - y_min)
+            y_scaled = y_normalized * 100.0
+
+        tensor = torch.from_numpy(y_scaled).unsqueeze(0)
+        return tensor.to(self.device)
+
+    def predict(self, x: List[float], y: List[float]) -> Dict:
+        """
+        Run inference on XRD data.
+
+        Args:
+            x: 2theta values
+            y: Intensity values
+
+        Returns:
+            Dictionary with predictions and confidence scores
+        """
+        if self.model is None:
+            return {
+                "status": "error",
+                "error": "Model not loaded.",
+                "http_status": 503,
+            }
+
+        try:
+            input_tensor = self.preprocess_data(x, y)
+
+            with torch.no_grad():
+                output = self.model(input_tensor)
+
+            processed = self._process_model_output(output)
+            overall_confidence = self._compute_overall_confidence(processed)
+
+            predictions = {
+                "status": "success",
+                "predictions": processed,
+                "model_info": {
+                    "type": "AlphaDiffract",
+                    "device": str(self.device),
+                },
+            }
+            if overall_confidence is not None:
+                predictions["confidence"] = overall_confidence
+
+            return predictions
+
+        except Exception as e:
+            return {
+                "status": "error",
+                "error": str(e),
+                "http_status": 500,
+            }
+
+    def _process_model_output(self, output) -> Dict:
+        """Process raw model output into readable predictions"""
+        if isinstance(output, dict):
+            predictions = []
+
+            # Crystal System prediction (7 classes)
+            if "cs_logits" in output:
+                cs_logits = output["cs_logits"].cpu()
+                cs_probs = torch.softmax(cs_logits, dim=-1)
+                cs_prob, cs_idx = torch.max(cs_probs, dim=-1)
+
+                cs_names = [
+                    "Triclinic", "Monoclinic", "Orthorhombic", "Tetragonal",
+                    "Trigonal", "Hexagonal", "Cubic",
+                ]
+
+                cs_all_probs = [
+                    {
+                        "class_name": cs_names[i],
+                        "probability": float(cs_probs[0, i].item()),
+                    }
+                    for i in range(len(cs_names))
+                ]
+                cs_all_probs.sort(key=lambda x: x["probability"], reverse=True)
+
+                predictions.append({
+                    "phase": "Crystal System",
+                    "predicted_class": cs_names[cs_idx.item()],
+                    "confidence": float(cs_prob.item()),
+                    "all_probabilities": cs_all_probs,
+                })
+
+            # Space Group prediction (230 classes)
+            if "sg_logits" in output:
+                sg_logits = output["sg_logits"].cpu()
+                sg_probs = torch.softmax(sg_logits, dim=-1)
+                sg_prob, sg_idx = torch.max(sg_probs, dim=-1)
+
+                sg_number = sg_idx.item() + 1
+
+                top_k = min(10, sg_probs.shape[-1])
+                top_probs, top_indices = torch.topk(sg_probs[0], top_k)
+
+                sg_top_probs = [
+                    {
+                        "space_group_number": int(idx.item()) + 1,
+                        "space_group_symbol": self._get_space_group_symbol(int(idx.item()) + 1),
+                        "probability": float(prob.item()),
+                    }
+                    for prob, idx in zip(top_probs, top_indices)
+                ]
+
+                predictions.append({
+                    "phase": "Space Group",
+                    "predicted_class": f"#{sg_number}",
+                    "space_group_symbol": self._get_space_group_symbol(sg_number),
+                    "confidence": float(sg_prob.item()),
+                    "top_probabilities": sg_top_probs,
+                })
+
+            # Lattice Parameters
+            if "lp" in output:
+                lp_raw = output["lp"].cpu()
+                if lp_raw.shape[0] == 1:
+                    lp = lp_raw[0].numpy()
+                else:
+                    lp = lp_raw.squeeze().numpy()
+
+                lp_labels = ["a", "b", "c", "\u03b1", "\u03b2", "\u03b3"]
+
+                predictions.append({
+                    "phase": "Lattice Parameters",
+                    "lattice_params": {
+                        label: float(val) for label, val in zip(lp_labels, lp)
+                    },
+                    "is_lattice": True,
+                })
+
+            return {
+                "phase_predictions": predictions,
+                "intensity_profile": [],
+            }
+
+        elif isinstance(output, torch.Tensor):
+            probs = output.cpu().numpy()
+            confidence = None
+            if output.ndim >= 1 and output.shape[-1] > 1:
+                prob_tensor = torch.softmax(output, dim=-1)
+                confidence = float(prob_tensor.max().item())
+
+            predictions = [{"phase": "Predicted Phase", "details": f"Output shape: {probs.shape}"}]
+            if confidence is not None:
+                predictions[0]["confidence"] = confidence
+
+            return {
+                "phase_predictions": predictions,
+                "intensity_profile": probs.tolist() if len(probs.shape) == 1 else [],
+            }
+
+        return {"phase_predictions": [], "intensity_profile": []}
+
+    def _get_space_group_symbol(self, sg_number: int) -> str:
+        """Get space group symbol from number using spglib."""
+        if sg_number < 1 or sg_number > 230:
+            return f"SG{sg_number}"
+        try:
+            hall_number = self._sg_to_hall.get(sg_number)
+            if hall_number is None:
+                return f"SG{sg_number}"
+            sg_type = spglib.get_spacegroup_type(hall_number)
+            if sg_type is not None:
+                symbol = (
+                    sg_type.international_short
+                    if hasattr(sg_type, "international_short")
+                    else sg_type["international_short"]
+                )
+                return symbol
+            return f"SG{sg_number}"
+        except Exception:
+            return f"SG{sg_number}"
+
+    def _compute_overall_confidence(self, processed: Dict) -> Optional[float]:
+        """Compute overall confidence from available per-phase confidences."""
+        phase_predictions = (
+            processed.get("phase_predictions", []) if isinstance(processed, dict) else []
+        )
+        confidences = [
+            float(p["confidence"])
+            for p in phase_predictions
+            if isinstance(p, dict) and "confidence" in p and p["confidence"] is not None
+        ]
+        if not confidences:
+            return None
+        return float(np.mean(confidences))

frontend/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'react/prop-types': 'off',
+  },
+}

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>XRD Analysis Tool</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "xrd-analysis-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@mantine/core": "^8.3.10",
+    "@mantine/hooks": "^8.3.10",
+    "@tabler/icons-react": "^3.36.0",
+    "react-plotly.js": "^2.6.0",
+    "plotly.js": "^3.3.1",
+    "ml-savitzky-golay": "^5.0.0",
+    "mathjs": "^15.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "vite": "^7.3.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Box, Paper, Stack } from '@mantine/core'
+import { XRDProvider } from './context/XRDContext'
+import Header from './components/Header'
+import ResultsHero from './components/ResultsHero'
+import XRDGraph from './components/XRDGraph'
+import Controls from './components/Controls'
+import LogitDrawer from './components/LogitDrawer'
+
+function App() {
+  return (
+    <XRDProvider>
+      <Box style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        {/* Header - Full Width */}
+        <Header />
+        
+        {/* Main Content Area - T-Shape Layout */}
+        <Box style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+          {/* Sidebar - Controls Only */}
+          <Box
+            style={{
+              width: '350px',
+              flexShrink: 0,
+              borderRight: '1px solid #e9ecef',
+              overflowY: 'auto',
+              backgroundColor: 'white',
+            }}
+          >
+            <Box p="lg" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
+              <Controls />
+            </Box>
+          </Box>
+          
+          {/* Main Panel - Results + Visualization */}
+          <Box
+            style={{
+              flex: 1,
+              overflowY: 'auto',
+              background: 'linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%)',
+              padding: '2rem',
+            }}
+          >
+            <Stack gap="xl">
+              {/* Results Hero Section */}
+              <ResultsHero />
+              
+              {/* Visualization Section */}
+              <Paper shadow="lg" p="lg" withBorder radius="md" style={{ backgroundColor: 'white' }}>
+                <XRDGraph />
+              </Paper>
+            </Stack>
+          </Box>
+        </Box>
+        
+        {/* Logit Inspector Drawer */}
+        <LogitDrawer />
+      </Box>
+    </XRDProvider>
+  )
+}
+
+export default App

frontend/src/components/Controls.jsx

@@ -0,0 +1,227 @@
+import React, { useRef, useState } from 'react'
+import {
+  Title,
+  Text,
+  Button,
+  Anchor,
+  Slider,
+  Switch,
+  Divider,
+  Stack,
+  Box,
+  Loader,
+  Select,
+  NumberInput,
+  Badge,
+  Alert,
+  Group,
+} from '@mantine/core'
+import { IconCloudUpload, IconChartBar, IconAlertCircle } from '@tabler/icons-react'
+import { useXRD } from '../context/XRDContext'
+import ExampleDataPanel from './ExampleDataPanel'
+
+const Controls = () => {
+  const {
+    rawData,
+    isLoading,
+    detectedWavelength,
+    userWavelength,
+    setUserWavelength,
+    wavelengthSource,
+    dataWarnings,
+    baselineCorrection,
+    setBaselineCorrection,
+    interpolationEnabled,
+    setInterpolationEnabled,
+    scalingEnabled,
+    setScalingEnabled,
+    interpolationStrategy,
+    setInterpolationStrategy,
+    handleFileUpload,
+    runInference,
+    MODEL_WAVELENGTH,
+    MODEL_MIN_2THETA,
+    MODEL_MAX_2THETA,
+  } = useXRD()
+  
+  const fileInputRef = useRef(null)
+  const [showExamples, setShowExamples] = useState(true)
+  
+  const handleFileChange = async (event) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const success = await handleFileUpload(file)
+      if (success) setShowExamples(false)
+      // Reset file input so the same file can be uploaded again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+  }
+  
+  const handleUploadClick = () => {
+    fileInputRef.current?.click()
+  }
+  
+  return (
+    <Stack gap="md">
+      {/* File Upload */}
+      <Box>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".xy,.csv,.txt,.cif,.dif"
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+        <Button
+          fullWidth
+          leftSection={<IconCloudUpload size={20} />}
+          onClick={handleUploadClick}
+          size="md"
+        >
+          Upload XRD Data
+        </Button>
+        <Group justify="space-between" mt="xs">
+          <Text size="sm" c="dimmed">
+            Formats: .xy, .cif, .dif
+          </Text>
+          <Anchor
+            size="sm"
+            component="button"
+            type="button"
+            onClick={() => setShowExamples((v) => !v)}
+          >
+            {showExamples ? 'Hide samples' : 'Try samples'}
+          </Anchor>
+        </Group>
+      </Box>
+
+      {showExamples && <ExampleDataPanel onSelect={() => setShowExamples(false)} />}
+      
+      {rawData && (
+        <>
+          <Divider />
+          
+          {/* Data Info */}
+          <Box p="md" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
+            <Stack gap="xs">
+              <Text size="sm" c="dimmed">
+                Data Points: {rawData.x.length}
+              </Text>
+              <Text size="sm" c="dimmed">
+                Range: {Math.min(...rawData.x).toFixed(2)}° - {Math.max(...rawData.x).toFixed(2)}°
+              </Text>
+            </Stack>
+          </Box>
+          
+          {/* Warnings */}
+          {dataWarnings.length > 0 && (
+            <Alert icon={<IconAlertCircle size={16} />} color="yellow" variant="light">
+              <Stack gap="xs">
+                {dataWarnings.map((warning, idx) => (
+                  <Text key={idx} size="xs">{warning}</Text>
+                ))}
+              </Stack>
+            </Alert>
+          )}
+          
+          <Divider />
+          
+          {/* Wavelength Configuration */}
+          <Title order={4}>Wavelength</Title>
+          
+          {detectedWavelength && (
+            <Badge color="blue" variant="light" size="sm" mb="xs">
+              Detected: {detectedWavelength.toFixed(4)} Å
+            </Badge>
+          )}
+          
+          <NumberInput
+            label="Wavelength (Å)"
+            description="Cu Kα=1.5406, Mo Kα=0.7107, Synch=0.6199"
+            value={userWavelength}
+            onChange={(value) => setUserWavelength(value || MODEL_WAVELENGTH)}
+            min={0.1}
+            max={3.0}
+            step={0.0001}
+            precision={4}
+            size="sm"
+            decimalScale={4}
+          />
+          
+          <Group gap="xs" mt="xs">
+            <Button size="xs" variant="light" onClick={() => setUserWavelength(1.5406)}>Cu Kα</Button>
+            <Button size="xs" variant="light" onClick={() => setUserWavelength(0.7107)}>Mo Kα</Button>
+            <Button size="xs" variant="light" onClick={() => setUserWavelength(0.6199)}>Synch</Button>
+          </Group>
+          
+          <Box mt="md" p="md" style={{ backgroundColor: '#e7f5ff', borderRadius: '8px', border: '1px solid #91a7ff' }}>
+            <Text size="sm" fw={600} c="#1864ab" mb={4}>
+             Training Data Specs:
+            </Text>
+            <Text size="sm" c="#364fc7" style={{ lineHeight: 1.6 }}>
+              • λ: {MODEL_WAVELENGTH} Å (20 keV)<br/>
+              • 2θ: {MODEL_MIN_2THETA}°-{MODEL_MAX_2THETA}° (8192 pts)<br/>
+              • Intensity: 0-100 scaled
+            </Text>
+          </Box>
+          
+          <Divider />
+          
+          {/* Preprocessing Controls */}
+          <Title order={4}>Preprocessing</Title>
+          
+          <Switch
+            label="Baseline Correction"
+            checked={baselineCorrection}
+            onChange={(event) => setBaselineCorrection(event.currentTarget.checked)}
+          />
+          
+          <Switch
+            label="Signal Scaling (0-100)"
+            description="Normalize to model input range"
+            checked={scalingEnabled}
+            onChange={(event) => setScalingEnabled(event.currentTarget.checked)}
+          />
+          
+          <Select
+            label="Interpolation Strategy"
+            description="Resampling method for 8192 points"
+            value={interpolationStrategy}
+            onChange={(value) => {
+              if (value) setInterpolationStrategy(value)
+            }}
+            data={[
+              { value: 'linear', label: 'Linear' },
+              { value: 'cubic', label: 'Cubic Spline' },
+            ]}
+            size="sm"
+            allowDeselect={false}
+          />
+          
+          <Divider />
+        </>
+      )}
+      
+      {/* Analysis Button - Always visible when data loaded */}
+      {rawData && (
+        <Button
+          fullWidth
+          color="violet"
+          leftSection={isLoading ? <Loader size={18} color="white" /> : <IconChartBar size={20} />}
+          onClick={runInference}
+          disabled={isLoading}
+          size="lg"
+          style={{ marginTop: 'auto' }}
+        >
+          {isLoading ? 'Analyzing...' : 'Run Analysis'}
+        </Button>
+      )}
+      
+
+    </Stack>
+  )
+}
+
+export default Controls

frontend/src/components/ExampleDataPanel.jsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Text,
+  Stack,
+  Box,
+  UnstyledButton,
+  Loader,
+  Group,
+} from '@mantine/core'
+import { IconDatabase, IconFlask } from '@tabler/icons-react'
+import { useXRD } from '../context/XRDContext'
+
+const ExampleDataPanel = ({ onSelect }) => {
+  const { loadExampleFile } = useXRD()
+  const [examples, setExamples] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [loadingFile, setLoadingFile] = useState(null)
+
+  useEffect(() => {
+    const fetchExamples = async () => {
+      try {
+        const response = await fetch('/api/examples')
+        if (response.ok) {
+          const data = await response.json()
+          setExamples(data)
+        }
+      } catch (err) {
+        console.error('Failed to fetch examples:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchExamples()
+  }, [])
+
+  const handleSelect = async (filename) => {
+    setLoadingFile(filename)
+    const success = await loadExampleFile(filename)
+    setLoadingFile(null)
+    if (success && onSelect) onSelect()
+  }
+
+  if (loading) {
+    return (
+      <Box p="md" style={{ textAlign: 'center' }}>
+        <Loader size="sm" />
+      </Box>
+    )
+  }
+
+  if (examples.length === 0) return null
+
+  return (
+    <Box>
+      <Group gap="xs" mb="xs">
+        <IconDatabase size={16} color="#868e96" />
+        <Text size="sm" fw={600} c="dimmed">
+          Example Data
+        </Text>
+      </Group>
+
+      <Stack gap={8}>
+        {examples.map((ex) => (
+          <UnstyledButton
+            key={ex.filename}
+            onClick={() => handleSelect(ex.filename)}
+            disabled={loadingFile !== null}
+            style={{
+              padding: '10px 12px',
+              borderRadius: '8px',
+              border: '1px solid #dee2e6',
+              backgroundColor: loadingFile === ex.filename ? '#f1f3f5' : '#fff',
+              cursor: loadingFile !== null ? 'wait' : 'pointer',
+              transition: 'background-color 150ms ease',
+            }}
+            onMouseEnter={(e) => {
+              if (!loadingFile) e.currentTarget.style.backgroundColor = '#f8f9fa'
+            }}
+            onMouseLeave={(e) => {
+              if (loadingFile !== ex.filename) e.currentTarget.style.backgroundColor = '#fff'
+            }}
+          >
+            <Group justify="space-between" align="center" wrap="nowrap">
+              <Group gap={6}>
+                <IconFlask size={14} color="#7950f2" />
+                <Text size="sm" fw={500} truncate>
+                  {ex.material_id || ex.filename}
+                </Text>
+              </Group>
+              {loadingFile === ex.filename && <Loader size={16} />}
+            </Group>
+          </UnstyledButton>
+        ))}
+      </Stack>
+    </Box>
+  )
+}
+
+export default ExampleDataPanel

frontend/src/components/Header.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Group, Title, Badge, Button, Text, Box } from '@mantine/core'
+import { IconRefresh } from '@tabler/icons-react'
+import { useXRD } from '../context/XRDContext'
+
+const Header = () => {
+  const { filename, analysisStatus, handleReset } = useXRD()
+  
+  const getStatusBadge = () => {
+    switch (analysisStatus) {
+      case 'PROCESSING':
+        return (
+          <Badge color="blue" variant="light" size="lg">
+            Analyzing...
+          </Badge>
+        )
+      case 'COMPLETE':
+        return (
+          <Badge color="green" variant="light" size="lg">
+            Analysis Complete
+          </Badge>
+        )
+      default:
+        return (
+          <Badge color="gray" variant="light" size="lg">
+            Ready
+          </Badge>
+        )
+    }
+  }
+  
+  return (
+    <Box
+      style={{
+        borderBottom: '1px solid #e9ecef',
+        backgroundColor: 'white',
+        padding: '1rem 2rem',
+      }}
+    >
+      <Group justify="space-between" align="center">
+        {/* Left: Logo/App Name */}
+        <Title 
+          order={2} 
+          style={{ 
+            fontWeight: 700, 
+            letterSpacing: '-0.02em',
+            background: 'linear-gradient(135deg, #9775fa 0%, #1e88e5 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text'
+          }}
+        >
+          Open AlphaDiffract Demo
+        </Title>
+        
+        {/* Center: Filename and Status */}
+        <Group gap="md">
+          <Text size="sm" c="dimmed" style={{ fontFamily: 'monospace' }}>
+            {filename || 'No File Loaded'}
+          </Text>
+          {getStatusBadge()}
+        </Group>
+        
+        {/* Right: Action Toolbar */}
+        <Group gap="sm">
+          <Button
+            variant="subtle"
+            leftSection={<IconRefresh size={16} />}
+            size="sm"
+            onClick={handleReset}
+          >
+            Reset
+          </Button>
+        </Group>
+      </Group>
+    </Box>
+  )
+}
+
+export default Header

frontend/src/components/LogitDrawer.jsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { Drawer, Title, Text, Stack, Box, Progress, Table, ScrollArea } from '@mantine/core'
+import { useXRD } from '../context/XRDContext'
+
+const LogitDrawer = () => {
+  const { isLogitDrawerOpen, setIsLogitDrawerOpen, modelResults } = useXRD()
+  
+  if (!modelResults?.predictions?.phase_predictions) {
+    return null
+  }
+  
+  // Get classification predictions (not lattice parameters)
+  const classificationPredictions = modelResults.predictions.phase_predictions
+    .filter(p => !p.is_lattice && p.confidence)
+  
+  const getColorForProbability = (prob) => {
+    if (prob >= 0.8) return 'green'
+    if (prob >= 0.5) return 'yellow'
+    return 'orange'
+  }
+  
+  return (
+    <Drawer
+      opened={isLogitDrawerOpen}
+      onClose={() => setIsLogitDrawerOpen(false)}
+      position="right"
+      size="xl"
+      title={
+        <Title order={3}>Class Logit Distributions</Title>
+      }
+      padding="xl"
+    >
+      <Stack gap="xl">
+        <Text size="sm" c="dimmed">
+          Detailed logit scores for each classification task. Note: Logits have been normalized with softmax.
+        </Text>
+        
+        {classificationPredictions.map((pred, idx) => (
+          <Box key={idx}>
+            <Title order={4} mb="md">{pred.phase}</Title>
+            <Text size="sm" mb="md" c="dimmed">
+              Top Prediction: <Text span fw={700} c="violet">{pred.predicted_class}</Text> ({(pred.confidence * 100).toFixed(2)}%)
+            </Text>
+            
+            {/* Display all probabilities for Crystal System */}
+            {pred.all_probabilities && (
+              <ScrollArea>
+                <Table highlightOnHover>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Rank</Table.Th>
+                      <Table.Th>Class</Table.Th>
+                      <Table.Th>Logits</Table.Th>
+                      <Table.Th>Distribution</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {pred.all_probabilities.map((item, i) => (
+                      <Table.Tr key={i} style={{ 
+                        backgroundColor: i === 0 ? '#f3f0ff' : 'transparent',
+                        fontWeight: i === 0 ? 600 : 400
+                      }}>
+                        <Table.Td>{i + 1}</Table.Td>
+                        <Table.Td style={{ fontFamily: 'monospace' }}>{item.class_name}</Table.Td>
+                        <Table.Td style={{ fontFamily: 'monospace' }}>
+                          {(item.probability * 100).toFixed(2)}%
+                        </Table.Td>
+                        <Table.Td style={{ width: '40%' }}>
+                          <Progress 
+                            value={item.probability * 100} 
+                            color={getColorForProbability(item.probability)}
+                            size="lg"
+                          />
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </ScrollArea>
+            )}
+            
+            {/* Display top 10 probabilities for Space Group */}
+            {pred.top_probabilities && (
+              <ScrollArea>
+                <Table highlightOnHover>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Rank</Table.Th>
+                      <Table.Th>Space Group</Table.Th>
+                      <Table.Th>Symbol</Table.Th>
+                      <Table.Th>Logits</Table.Th>
+                      <Table.Th>Distribution</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {pred.top_probabilities.map((item, i) => (
+                      <Table.Tr key={i} style={{ 
+                        backgroundColor: i === 0 ? '#f3f0ff' : 'transparent',
+                        fontWeight: i === 0 ? 600 : 400
+                      }}>
+                        <Table.Td>{i + 1}</Table.Td>
+                        <Table.Td style={{ fontFamily: 'monospace' }}>#{item.space_group_number}</Table.Td>
+                        <Table.Td style={{ fontFamily: 'monospace' }}>{item.space_group_symbol}</Table.Td>
+                        <Table.Td style={{ fontFamily: 'monospace' }}>
+                          {(item.probability * 100).toFixed(2)}%
+                        </Table.Td>
+                        <Table.Td style={{ width: '35%' }}>
+                          <Progress 
+                            value={item.probability * 100} 
+                            color={getColorForProbability(item.probability)}
+                            size="lg"
+                          />
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </ScrollArea>
+            )}
+          </Box>
+        ))}
+        
+        <Box mt="md" p="md" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
+          <Text size="xs" c="dimmed">
+            <strong>Note:</strong> The model outputs raw logit scores for each possible class. 
+            These scores are normalized using softmax to show relative confidence. For Crystal System, all 7 
+            classes are shown. For Space Group, the top 10 out of 230 possible groups are displayed.
+          </Text>
+        </Box>
+      </Stack>
+    </Drawer>
+  )
+}
+
+export default LogitDrawer

frontend/src/components/ResultsHero.jsx

@@ -0,0 +1,228 @@
+import React from 'react'
+import { Grid, Card, Text, Title, Group, Box, Button, Stack, Progress } from '@mantine/core'
+import { IconSearch, IconCube, IconGridPattern } from '@tabler/icons-react'
+import { useXRD } from '../context/XRDContext'
+
+const ResultsHero = () => {
+  const { modelResults, setIsLogitDrawerOpen } = useXRD()
+  
+  // Animation styles
+  const cardAnimation = {
+    animation: 'slideIn 0.5s ease-out forwards',
+    opacity: 0,
+  }
+  
+  const keyframes = `
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `
+  
+  if (!modelResults || !modelResults.predictions?.phase_predictions) {
+    return null
+  }
+  
+  const predictions = modelResults.predictions.phase_predictions
+  
+  // Extract predictions by type
+  const crystalSystem = predictions.find(p => p.phase === 'Crystal System')
+  const spaceGroup = predictions.find(p => p.phase === 'Space Group')
+  const latticeParams = predictions.find(p => p.is_lattice)
+  
+  const getConfidenceColor = (confidence) => {
+    if (confidence >= 0.8) return 'green'
+    if (confidence >= 0.5) return 'yellow'
+    return 'orange'
+  }
+  
+  return (
+    <>
+      <style>{keyframes}</style>
+      <Grid gutter="md" mb="lg">
+        {/* Card 1: Crystal System */}
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card 
+            shadow="sm" 
+            padding="lg" 
+            radius="md" 
+            withBorder 
+            h="100%"
+            style={{
+              ...cardAnimation,
+              animationDelay: '0.1s',
+              borderLeft: '4px solid #9775fa',
+              background: 'linear-gradient(135deg, #ffffff 0%, #f8f4ff 100%)'
+            }}
+          >
+            <Stack gap="xs" align="center">
+              <IconCube size={32} color="#9775fa" />
+            <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+              Crystal System
+            </Text>
+            <Title order={3} ta="center" style={{ fontWeight: 700 }}>
+              {crystalSystem?.predicted_class || 'N/A'}
+            </Title>
+          </Stack>
+        </Card>
+      </Grid.Col>
+      
+        {/* Card 2: Space Group */}
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card 
+            shadow="sm" 
+            padding="lg" 
+            radius="md" 
+            withBorder 
+            h="100%"
+            style={{
+              ...cardAnimation,
+              animationDelay: '0.2s',
+              borderLeft: '4px solid #1e88e5',
+              background: 'linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%)'
+            }}
+          >
+            <Stack gap="xs" align="center">
+              <IconGridPattern size={32} color="#1e88e5" />
+            <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+              Space Group
+            </Text>
+            <Title order={3} ta="center" style={{ fontWeight: 700 }}>
+              {spaceGroup?.predicted_class || 'N/A'}
+            </Title>
+            {spaceGroup?.space_group_symbol && (
+              <Text size="sm" c="dimmed" style={{ fontFamily: 'monospace' }}>
+                {spaceGroup.space_group_symbol}
+              </Text>
+            )}
+          </Stack>
+        </Card>
+      </Grid.Col>
+      
+        {/* Card 3: Lattice Parameters */}
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card 
+            shadow="sm" 
+            padding="lg" 
+            radius="md" 
+            withBorder 
+            h="100%"
+            style={{
+              ...cardAnimation,
+              animationDelay: '0.3s',
+              borderLeft: '4px solid #00acc1',
+              background: 'linear-gradient(135deg, #ffffff 0%, #f0fdff 100%)'
+            }}
+          >
+            <Stack gap="xs">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={600} ta="center">
+              Lattice Parameters
+            </Text>
+            {latticeParams?.lattice_params ? (
+              <Box style={{ fontFamily: 'monospace', fontSize: '1.1rem' }}>
+                <Group gap="lg" justify="center">
+                  <Stack gap={4}>
+                    <Text size="md">a = {latticeParams.lattice_params.a?.toFixed(3)} Å</Text>
+                    <Text size="md">b = {latticeParams.lattice_params.b?.toFixed(3)} Å</Text>
+                    <Text size="md">c = {latticeParams.lattice_params.c?.toFixed(3)} Å</Text>
+                  </Stack>
+                  <Stack gap={4}>
+                    <Text size="md">α = {latticeParams.lattice_params['α']?.toFixed(2)}°</Text>
+                    <Text size="md">β = {latticeParams.lattice_params['β']?.toFixed(2)}°</Text>
+                    <Text size="md">γ = {latticeParams.lattice_params['γ']?.toFixed(2)}°</Text>
+                  </Stack>
+                </Group>
+              </Box>
+            ) : (
+              <Text size="sm" c="dimmed" ta="center">N/A</Text>
+            )}
+          </Stack>
+        </Card>
+      </Grid.Col>
+      
+        {/* Card 4: Confidence & Inspection */}
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card 
+            shadow="sm" 
+            padding="lg" 
+            radius="md" 
+            withBorder 
+            h="100%"
+            style={{
+              ...cardAnimation,
+              animationDelay: '0.4s',
+              borderLeft: '4px solid #fb8c00',
+              background: 'linear-gradient(135deg, #ffffff 0%, #fff8f0 100%)'
+            }}
+          >
+            <Stack gap="sm" align="center" justify="center" h="100%">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={600} ta="center">
+              Confidence
+            </Text>
+            
+            {/* CS and SG Confidences - Compact */}
+            <Stack gap="xs" w="100%">
+              {/* Crystal System Confidence */}
+              {crystalSystem?.confidence && (
+                <Box>
+                  <Group justify="space-between" mb={4}>
+                    <Text size="xs" fw={600}>CS</Text>
+                    <Text size="sm" fw={700} c={getConfidenceColor(crystalSystem.confidence)}>
+                      {(crystalSystem.confidence * 100).toFixed(0)}%
+                    </Text>
+                  </Group>
+                  <Progress
+                    value={crystalSystem.confidence * 100}
+                    color={getConfidenceColor(crystalSystem.confidence)}
+                    size="md"
+                    radius="xl"
+                  />
+                </Box>
+              )}
+              
+              {/* Space Group Confidence */}
+              {spaceGroup?.confidence && (
+                <Box>
+                  <Group justify="space-between" mb={4}>
+                    <Text size="xs" fw={600}>SG</Text>
+                    <Text size="sm" fw={700} c={getConfidenceColor(spaceGroup.confidence)}>
+                      {(spaceGroup.confidence * 100).toFixed(0)}%
+                    </Text>
+                  </Group>
+                  <Progress
+                    value={spaceGroup.confidence * 100}
+                    color={getConfidenceColor(spaceGroup.confidence)}
+                    size="md"
+                    radius="xl"
+                  />
+                </Box>
+              )}
+            </Stack>
+            
+            <Button
+              variant="subtle"
+              leftSection={<IconSearch size={16} />}
+              size="sm"
+              onClick={() => setIsLogitDrawerOpen(true)}
+              mt="xs"
+              style={{
+                border: '1px solid #1e88e5'
+              }}
+            >
+              Inspect Logits
+            </Button>
+          </Stack>
+          </Card>
+        </Grid.Col>
+      </Grid>
+    </>
+  )
+}
+
+export default ResultsHero

frontend/src/components/XRDGraph.jsx

@@ -0,0 +1,204 @@
+import React from 'react'
+import Plot from 'react-plotly.js'
+import { Box, Text, Stack, Title, Group, Badge } from '@mantine/core'
+import { useXRD } from '../context/XRDContext'
+
+const XRDGraph = () => {
+  const { rawData, processedData, MODEL_MIN_2THETA, MODEL_MAX_2THETA } = useXRD()
+  
+  if (!rawData) {
+    return (
+      <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 350 }}>
+        <Text size="xl" c="dimmed">
+          No data loaded
+        </Text>
+      </Box>
+    )
+  }
+  
+  // Raw data trace
+  const rawTrace = {
+    x: rawData.x,
+    y: rawData.y,
+    type: 'scattergl',
+    mode: 'lines',
+    name: 'Raw Data',
+    line: {
+      color: 'rgba(128, 128, 128, 1)',
+      width: 1.5,
+    },
+    hovertemplate: '2θ: %{x:.2f}°<br>Intensity: %{y:.2f}<extra></extra>',
+  }
+  
+  // Processed data trace
+  const processedTrace = processedData ? {
+    x: processedData.x,
+    y: processedData.y,
+    type: 'scattergl',
+    mode: 'lines',
+    name: 'Normalized',
+    line: {
+      color: 'rgba(30, 136, 229, 1)',
+      width: 2,
+    },
+    hovertemplate: '2θ: %{x:.2f}°<br>Intensity: %{y:.4f}<extra></extra>',
+  } : null
+  
+  // Layout for raw data graph
+  const rawLayout = {
+    xaxis: {
+      title: {
+        text: '2θ (degrees)',
+        font: {
+          size: 14,
+          color: '#333',
+        },
+        standoff: 10,
+      },
+      gridcolor: 'rgba(128, 128, 128, 0.2)',
+      showline: true,
+      linewidth: 1,
+      linecolor: 'rgba(128, 128, 128, 0.3)',
+      mirror: true,
+      range: [Math.min(...rawData.x) - 0.5, Math.max(...rawData.x) + 0.5],
+    },
+    yaxis: {
+      title: {
+        text: 'Intensity (a.u.)',
+        font: {
+          size: 14,
+          color: '#333',
+        },
+        standoff: 10,
+      },
+      gridcolor: 'rgba(128, 128, 128, 0.2)',
+      showline: true,
+      linewidth: 1,
+      linecolor: 'rgba(128, 128, 128, 0.3)',
+      mirror: true,
+    },
+    hovermode: 'closest',
+    showlegend: false,
+    margin: {
+      l: 60,
+      r: 40,
+      t: 20,
+      b: 60,
+    },
+    paper_bgcolor: 'transparent',
+    plot_bgcolor: 'transparent',
+    height: 280,
+  }
+  
+  // Layout for processed data graph
+  const processedLayout = {
+    xaxis: {
+      title: {
+        text: '2θ (degrees)',
+        font: {
+          size: 14,
+          color: '#333',
+        },
+        standoff: 10,
+      },
+      gridcolor: 'rgba(128, 128, 128, 0.2)',
+      range: [MODEL_MIN_2THETA - 0.5, MODEL_MAX_2THETA + 0.5],
+      showline: true,
+      linewidth: 1,
+      linecolor: 'rgba(128, 128, 128, 0.3)',
+      mirror: true,
+    },
+    yaxis: {
+      title: {
+        text: 'Normalized Intensity',
+        font: {
+          size: 14,
+          color: '#333',
+        },
+        standoff: 10,
+      },
+      gridcolor: 'rgba(128, 128, 128, 0.2)',
+      range: [-5, 105],
+      showline: true,
+      linewidth: 1,
+      linecolor: 'rgba(128, 128, 128, 0.3)',
+      mirror: true,
+    },
+    hovermode: 'closest',
+    showlegend: false,
+    margin: {
+      l: 60,
+      r: 40,
+      t: 20,
+      b: 60,
+    },
+    paper_bgcolor: 'transparent',
+    plot_bgcolor: 'transparent',
+    height: 280,
+    shapes: [
+      {
+        type: 'rect',
+        xref: 'x',
+        yref: 'paper',
+        x0: MODEL_MIN_2THETA,
+        y0: 0,
+        x1: MODEL_MAX_2THETA,
+        y1: 1,
+        fillcolor: 'rgba(147, 51, 234, 0.05)',
+        line: {
+          width: 0,
+        },
+      },
+    ],
+  }
+  
+  // Config for Plotly
+  const config = {
+    responsive: true,
+    displayModeBar: true,
+    displaylogo: false,
+    modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+  }
+  
+  return (
+    <Stack gap="md">
+      {/* Raw Data Graph */}
+      <Box>
+        <Group justify="space-between" mb="xs">
+          <Title order={5}>Original Data</Title>
+          <Badge color="gray" variant="light">
+            {rawData.x.length} points
+          </Badge>
+        </Group>
+        <Plot
+          data={[rawTrace]}
+          layout={rawLayout}
+          config={config}
+          style={{ width: '100%' }}
+          useResizeHandler={true}
+        />
+      </Box>
+      
+      {/* Processed Data Graph */}
+      {processedData && (
+        <Box>
+          <Group justify="space-between" mb="xs">
+            <Title order={5}>Normalized for Model Input</Title>
+            <Badge color="violet" variant="light">
+              {processedData.x.length} points • {MODEL_MIN_2THETA}-{MODEL_MAX_2THETA}°
+            </Badge>
+          </Group>
+          <Plot
+            data={[processedTrace]}
+            layout={processedLayout}
+            config={config}
+            style={{ width: '100%' }}
+            useResizeHandler={true}
+          />
+        </Box>
+      )}
+    </Stack>
+  )
+}
+
+export default XRDGraph

frontend/src/components/ui/button.jsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/src/components/ui/card.jsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

frontend/src/components/ui/slider.jsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "../../lib/utils"
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

frontend/src/components/ui/switch.jsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "../../lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

frontend/src/context/XRDContext.jsx

@@ -0,0 +1,637 @@
+import React, { createContext, useContext, useState, useMemo, useCallback } from 'react'
+
+const XRDContext = createContext()
+
+export const useXRD = () => {
+  const context = useContext(XRDContext)
+  if (!context) {
+    throw new Error('useXRD must be used within XRDProvider')
+  }
+  return context
+}
+
+export const XRDProvider = ({ children }) => {
+  // Model training specifications (from simulator.yaml)
+  const MODEL_INPUT_SIZE = 8192
+  const MODEL_WAVELENGTH = 0.6199  // Ångströms (synchrotron)
+  const MODEL_MIN_2THETA = 5.0     // degrees
+  const MODEL_MAX_2THETA = 20.0    // degrees
+  
+  // Raw data from file upload
+  const [rawData, setRawData] = useState(null)
+  const [filename, setFilename] = useState(null)
+  
+  // Wavelength management
+  const [detectedWavelength, setDetectedWavelength] = useState(null)
+  const [userWavelength, setUserWavelength] = useState(MODEL_WAVELENGTH)
+  const [wavelengthSource, setWavelengthSource] = useState('default') // 'detected', 'user', 'default'
+  
+  // Processing parameters
+  const [baselineCorrection, setBaselineCorrection] = useState(false)
+  const [interpolationEnabled, setInterpolationEnabled] = useState(true)
+  const [scalingEnabled, setScalingEnabled] = useState(true)
+  const [interpolationStrategy, setInterpolationStrategy] = useState('linear') // 'linear' or 'cubic'
+  
+  // Warnings and metadata
+  const [dataWarnings, setDataWarnings] = useState([])
+  
+  // Model results from API
+  const [modelResults, setModelResults] = useState(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [analysisStatus, setAnalysisStatus] = useState('IDLE') // IDLE, PROCESSING, COMPLETE
+  
+  // UI state
+  const [isLogitDrawerOpen, setIsLogitDrawerOpen] = useState(false)
+  
+  // Request tracking - ensure every click creates a new request
+  const [analysisCount, setAnalysisCount] = useState(0)
+  
+  // Convert wavelength using Bragg's law: λ = 2d·sin(θ)
+  // For same d-spacing: sin(θ₂) = (λ₂/λ₁)·sin(θ₁)
+  const convertWavelength = (theta_deg, sourceWavelength, targetWavelength) => {
+    if (Math.abs(sourceWavelength - targetWavelength) < 0.0001) {
+      return theta_deg // No conversion needed
+    }
+    
+    const theta_rad = (theta_deg * Math.PI) / 180
+    const sin_theta2 = (targetWavelength / sourceWavelength) * Math.sin(theta_rad)
+    
+    // Check if conversion is physically possible
+    if (Math.abs(sin_theta2) > 1) {
+      return null // Peak not observable at target wavelength
+    }
+    
+    const theta2_rad = Math.asin(sin_theta2)
+    return (theta2_rad * 180) / Math.PI
+  }
+  
+  // Interpolate data to fixed size for model input
+  const interpolateData = (x, y, targetSize, xMin, xMax, strategy = 'linear') => {
+    if (x.length === targetSize && xMin === undefined) {
+      return { x, y }
+    }
+    
+    const minX = xMin !== undefined ? xMin : Math.min(...x)
+    const maxX = xMax !== undefined ? xMax : Math.max(...x)
+    const step = (maxX - minX) / (targetSize - 1)
+    
+    const newX = Array.from({ length: targetSize }, (_, i) => minX + i * step)
+    const newY = new Array(targetSize)
+    
+    // Get data range bounds
+    const dataMinX = Math.min(...x)
+    const dataMaxX = Math.max(...x)
+    
+    if (strategy === 'linear') {
+      // Linear interpolation
+      for (let i = 0; i < targetSize; i++) {
+        const targetX = newX[i]
+        
+        // Check if out of range - set to 0 instead of extrapolating
+        if (targetX < dataMinX || targetX > dataMaxX) {
+          newY[i] = 0
+          continue
+        }
+        
+        // Find surrounding points
+        let idx = x.findIndex(val => val >= targetX)
+        if (idx === -1) idx = x.length - 1
+        if (idx === 0) idx = 1
+        
+        const x0 = x[idx - 1]
+        const x1 = x[idx]
+        const y0 = y[idx - 1]
+        const y1 = y[idx]
+        
+        // Linear interpolation
+        newY[i] = y0 + ((targetX - x0) * (y1 - y0)) / (x1 - x0)
+      }
+    } else if (strategy === 'cubic') {
+      // Cubic spline interpolation (simplified Catmull-Rom)
+      for (let i = 0; i < targetSize; i++) {
+        const targetX = newX[i]
+        
+        // Check if out of range - set to 0 instead of extrapolating
+        if (targetX < dataMinX || targetX > dataMaxX) {
+          newY[i] = 0
+          continue
+        }
+        
+        // Find surrounding points
+        let idx = x.findIndex(val => val >= targetX)
+        if (idx === -1) idx = x.length - 1
+        if (idx === 0) idx = 1
+        
+        // Get 4 points for cubic interpolation
+        const i0 = Math.max(0, idx - 2)
+        const i1 = Math.max(0, idx - 1)
+        const i2 = Math.min(x.length - 1, idx)
+        const i3 = Math.min(x.length - 1, idx + 1)
+        
+        // Use linear interpolation if we don't have enough points
+        if (i2 === i1) {
+          newY[i] = y[i1]
+        } else {
+          const t = (targetX - x[i1]) / (x[i2] - x[i1])
+          const t2 = t * t
+          const t3 = t2 * t
+          
+          // Catmull-Rom spline coefficients
+          const v0 = y[i0]
+          const v1 = y[i1]
+          const v2 = y[i2]
+          const v3 = y[i3]
+          
+          newY[i] = 0.5 * (
+            2 * v1 +
+            (-v0 + v2) * t +
+            (2 * v0 - 5 * v1 + 4 * v2 - v3) * t2 +
+            (-v0 + 3 * v1 - 3 * v2 + v3) * t3
+          )
+        }
+      }
+    }
+    
+    return { x: newX, y: newY }
+  }
+  
+  // Process data with optional interpolation
+  const processedData = useMemo(() => {
+    if (!rawData) return null
+    
+    try {
+      const warnings = []
+      let processedY = [...rawData.y]
+      let processedX = [...rawData.x]
+      
+      // Step 1: Wavelength conversion (if needed)
+      const sourceWavelength = userWavelength
+      if (sourceWavelength && Math.abs(sourceWavelength - MODEL_WAVELENGTH) > 0.0001) {
+        const convertedData = []
+        for (let i = 0; i < processedX.length; i++) {
+          const convertedTheta = convertWavelength(processedX[i], sourceWavelength, MODEL_WAVELENGTH)
+          if (convertedTheta !== null) {
+            convertedData.push({ x: convertedTheta, y: processedY[i] })
+          }
+        }
+        
+        if (convertedData.length < processedX.length) {
+          warnings.push(`${processedX.length - convertedData.length} points outside physical range after wavelength conversion`)
+        }
+        
+        processedX = convertedData.map(d => d.x)
+        processedY = convertedData.map(d => d.y)
+        
+        warnings.push(`Converted from ${sourceWavelength.toFixed(4)} Å to ${MODEL_WAVELENGTH} Å`)
+      }
+      
+      // Step 2: Apply baseline correction if enabled
+      if (baselineCorrection) {
+        const baseline = Math.min(...processedY)
+        processedY = processedY.map(val => val - baseline)
+      }
+      
+      // Step 3: Crop to model's 2θ range (5-20°)
+      const inRangeData = []
+      for (let i = 0; i < processedX.length; i++) {
+        if (processedX[i] >= MODEL_MIN_2THETA && processedX[i] <= MODEL_MAX_2THETA) {
+          inRangeData.push({ x: processedX[i], y: processedY[i] })
+        }
+      }
+      
+      if (inRangeData.length === 0) {
+        warnings.push(`⚠️ No data points in model range (${MODEL_MIN_2THETA}-${MODEL_MAX_2THETA}°)`)
+        // Use original data but warn
+        inRangeData.push(...processedX.map((x, i) => ({ x, y: processedY[i] })))
+      } else if (inRangeData.length < processedX.length) {
+        const coverage = (inRangeData.length / processedX.length * 100).toFixed(1)
+        warnings.push(`${coverage}% of data in model range (${MODEL_MIN_2THETA}-${MODEL_MAX_2THETA}°)`)
+      }
+      
+      let croppedX = inRangeData.map(d => d.x)
+      let croppedY = inRangeData.map(d => d.y)
+      
+      // Step 4: Apply 0-100 scaling if enabled (matching training data)
+      // NOTE: Scaling happens AFTER cropping so the max peak in the visible range = 100
+      if (scalingEnabled) {
+        const minY = Math.min(...croppedY)
+        const maxY = Math.max(...croppedY)
+        if (maxY - minY > 0) {
+          croppedY = croppedY.map(val => ((val - minY) / (maxY - minY)) * 100)
+        }
+      }
+      
+      // Step 5: Interpolate to model input size with fixed range
+      const interpolated = interpolateData(
+        croppedX, 
+        croppedY, 
+        MODEL_INPUT_SIZE,
+        MODEL_MIN_2THETA,
+        MODEL_MAX_2THETA,
+        interpolationStrategy
+      )
+      
+      // Update warnings
+      setDataWarnings(warnings)
+      
+      return {
+        x: interpolated.x,
+        y: interpolated.y
+      }
+    } catch (error) {
+      console.error('Error processing data:', error)
+      setDataWarnings([`Error: ${error.message}`])
+      return rawData
+    }
+  }, [rawData, baselineCorrection, userWavelength, interpolationStrategy, scalingEnabled])
+  
+  // Extract metadata from CIF/DIF files
+  const extractMetadata = (text) => {
+    const metadata = {
+      wavelength: null,
+      cellParams: null,
+      spaceGroup: null,
+      crystalSystem: null
+    }
+    
+    const lines = text.split('\n')
+    
+    // Common wavelength patterns in headers
+    const wavelengthPatterns = [
+      /wavelength[:\s=]+([0-9.]+)/i,
+      /lambda[:\s=]+([0-9.]+)/i,
+      /wave[:\s=]+([0-9.]+)/i,
+      /_pd_wavelength[:\s]+([0-9.]+)/i,  // CIF format
+      /_diffrn_radiation_wavelength[:\s]+([0-9.]+)/i,  // CIF format
+      /radiation.*?([0-9.]+)\s*[AÅ]/i,
+    ]
+    
+    for (const line of lines) {
+      // Extract wavelength
+      if (!metadata.wavelength) {
+        for (const pattern of wavelengthPatterns) {
+          const match = line.match(pattern)
+          if (match && match[1]) {
+            const wavelength = parseFloat(match[1])
+            if (wavelength > 0.1 && wavelength < 3.0) {  // Reasonable X-ray range
+              metadata.wavelength = wavelength
+              break
+            }
+          }
+        }
+        
+        // Check for common radiation types
+        if (/Cu\s*K[αa]/i.test(line)) metadata.wavelength = 1.5406  // Cu Kα
+        else if (/Mo\s*K[αa]/i.test(line)) metadata.wavelength = 0.7107  // Mo Kα
+        else if (/Co\s*K[αa]/i.test(line)) metadata.wavelength = 1.7889  // Co Kα
+        else if (/Cr\s*K[αa]/i.test(line)) metadata.wavelength = 2.2897  // Cr Kα
+      }
+      
+      // Extract cell parameters (DIF format)
+      if (/CELL PARAMETERS:/i.test(line)) {
+        const match = line.match(/CELL PARAMETERS:\s*([\d.\s]+)/)
+        if (match) {
+          metadata.cellParams = match[1].trim()
+        }
+      }
+      
+      // Extract space group
+      if (/SPACE GROUP:/i.test(line) || /_symmetry_Int_Tables_number/i.test(line)) {
+        const match = line.match(/(?:SPACE GROUP:|_symmetry_Int_Tables_number)[:\s]+(\d+)/)
+        if (match) {
+          metadata.spaceGroup = match[1]
+        }
+      }
+      
+      // Extract crystal system
+      if (/Crystal System:/i.test(line)) {
+        const match = line.match(/Crystal System:\s*(\d+)/)
+        if (match) {
+          metadata.crystalSystem = match[1]
+        }
+      }
+    }
+    
+    return metadata
+  }
+  
+  // Parse CIF format data
+  const parseCIF = (text) => {
+    const lines = text.split('\n')
+    const x = []
+    const y = []
+    let inDataLoop = false
+    let dataColumns = []
+    let thetaIndex = -1
+    let intensityIndex = -1
+    
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim()
+      
+      // Detect start of data loop
+      if (line === 'loop_') {
+        inDataLoop = true
+        dataColumns = []
+        continue
+      }
+      
+      // Collect column names in loop
+      if (inDataLoop && line.startsWith('_')) {
+        dataColumns.push(line)
+        
+        // Identify 2theta column
+        if (/_pd_meas_angle_2theta/i.test(line) || /_pd_calc_angle_2theta/i.test(line)) {
+          thetaIndex = dataColumns.length - 1
+        }
+        
+        // Identify intensity column
+        if (/_pd_proc_intensity/i.test(line) || /_pd_calc_intensity/i.test(line) || /_pd_meas_counts/i.test(line)) {
+          intensityIndex = dataColumns.length - 1
+        }
+        continue
+      }
+      
+      // Parse data lines
+      if (inDataLoop && !line.startsWith('_') && !line.startsWith('loop_') && line.length > 0 && !line.startsWith('#')) {
+        // Check if we've found the data section
+        if (thetaIndex >= 0 && intensityIndex >= 0) {
+          const parts = line.split(/\s+/)
+          
+          if (parts.length >= Math.max(thetaIndex, intensityIndex) + 1) {
+            const xVal = parseFloat(parts[thetaIndex])
+            const yVal = parseFloat(parts[intensityIndex])
+            
+            if (!isNaN(xVal) && !isNaN(yVal)) {
+              x.push(xVal)
+              y.push(yVal)
+            }
+          }
+        } else {
+          // End of loop, no data found
+          inDataLoop = false
+          dataColumns = []
+          thetaIndex = -1
+          intensityIndex = -1
+        }
+      }
+      
+      // Reset if we hit another loop_ or data block
+      if (inDataLoop && (line.startsWith('data_') || (line === 'loop_' && dataColumns.length > 0))) {
+        inDataLoop = false
+      }
+    }
+    
+    return { x, y }
+  }
+  
+  // Parse DIF or XY format (space-separated 2theta intensity)
+  const parseDIF = (text) => {
+    const lines = text.split('\n')
+    const x = []
+    const y = []
+    
+    for (const line of lines) {
+      const trimmed = line.trim()
+      
+      // Skip comment lines, headers, and metadata
+      if (!trimmed || 
+          trimmed.startsWith('#') || 
+          trimmed.startsWith('_') || 
+          trimmed.startsWith('CELL') ||
+          trimmed.startsWith('SPACE') ||
+          /^[a-zA-Z]/.test(trimmed)) {  // Skip lines starting with letters (metadata)
+        continue
+      }
+      
+      // Split by whitespace
+      const parts = trimmed.split(/\s+/)
+      if (parts.length >= 2) {
+        const xVal = parseFloat(parts[0])
+        const yVal = parseFloat(parts[1])
+        
+        if (!isNaN(xVal) && !isNaN(yVal)) {
+          x.push(xVal)
+          y.push(yVal)
+        }
+      }
+    }
+    
+    return { x, y }
+  }
+  
+  // Parse uploaded file
+  const parseFile = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      
+      reader.onload = (e) => {
+        try {
+          const text = e.target.result
+          
+          // Extract metadata (including wavelength)
+          const metadata = extractMetadata(text)
+          if (metadata.wavelength) {
+            setDetectedWavelength(metadata.wavelength)
+            setUserWavelength(metadata.wavelength)
+            setWavelengthSource('detected')
+          } else {
+            setDetectedWavelength(null)
+            setWavelengthSource('default')
+          }
+          
+          // Determine file format and parse accordingly
+          const fileName = file.name.toLowerCase()
+          let data = { x: [], y: [] }
+          
+          if (fileName.endsWith('.cif')) {
+            // CIF format - look for loop_ structures
+            data = parseCIF(text)
+            
+            // Fallback to simple parsing if CIF parsing didn't find data
+            if (data.x.length === 0) {
+              console.log('CIF loop parsing failed, falling back to simple parser')
+              data = parseDIF(text)
+            }
+          } else {
+            // DIF, XY, CSV, TXT - simple space/comma separated
+            data = parseDIF(text)
+          }
+          
+          if (data.x.length === 0 || data.y.length === 0) {
+            reject(new Error('No valid data points found in file'))
+            return
+          }
+          
+          console.log(`Parsed ${data.x.length} data points from ${fileName}`)
+          resolve(data)
+        } catch (error) {
+          reject(error)
+        }
+      }
+      
+      reader.onerror = () => reject(new Error('Failed to read file'))
+      reader.readAsText(file)
+    })
+  }
+  
+  // Upload and parse file
+  const handleFileUpload = async (file) => {
+    try {
+      const data = await parseFile(file)
+      
+      setRawData(data)
+      setFilename(file.name)
+      setModelResults(null) // Clear previous results
+      setAnalysisStatus('IDLE')
+      setIsLogitDrawerOpen(false) // Close logit drawer if open
+      
+      return true
+    } catch (error) {
+      console.error('Error uploading file:', error)
+      alert(`Error loading file: ${error.message}`)
+      return false
+    }
+  }
+  
+  // Send processed data to API for inference
+  const runInference = useCallback(async () => {
+    if (!processedData) {
+      alert('No data to analyze')
+      return
+    }
+    
+    // Increment analysis counter - tracks button clicks
+    const currentCount = analysisCount + 1
+    setAnalysisCount(currentCount)
+    
+    setIsLoading(true)
+    setAnalysisStatus('PROCESSING')
+    
+    try {
+      const requestTimestamp = Date.now()
+      
+      const response = await fetch('/api/predict', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          // Anti-caching headers
+          'Cache-Control': 'no-cache, no-store, must-revalidate',
+          'Pragma': 'no-cache',
+          'Expires': '0',
+          // Request tracking
+          'X-Request-ID': String(requestTimestamp),
+          'X-Filename': filename || 'unknown',
+        },
+        // Explicitly disable caching for this request
+        cache: 'no-store',
+        body: JSON.stringify({
+          x: processedData.x,
+          y: processedData.y,
+          // Include metadata to help track requests
+          metadata: {
+            timestamp: requestTimestamp,
+            filename: filename,
+            analysisCount: currentCount,
+          }
+        }),
+      })
+      
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`)
+      }
+      
+      const results = await response.json()
+      setModelResults(results)
+      setAnalysisStatus('COMPLETE')
+    } catch (error) {
+      console.error('Error running inference:', error)
+      alert(`Inference failed: ${error.message}`)
+      setAnalysisStatus('IDLE')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [processedData, analysisCount, filename])
+  
+  // Load an example data file from the API
+  const loadExampleFile = useCallback(async (filename) => {
+    try {
+      const response = await fetch(`/api/examples/${encodeURIComponent(filename)}`)
+      if (!response.ok) {
+        throw new Error(`Failed to fetch example: ${response.status}`)
+      }
+      const text = await response.text()
+
+      // Extract metadata (including wavelength) — same as normal file upload
+      const metadata = extractMetadata(text)
+      if (metadata.wavelength) {
+        setDetectedWavelength(metadata.wavelength)
+        setUserWavelength(metadata.wavelength)
+        setWavelengthSource('detected')
+      } else {
+        setDetectedWavelength(null)
+        setWavelengthSource('default')
+      }
+
+      // Parse using the DIF parser (all examples are .dif)
+      const data = parseDIF(text)
+      if (data.x.length === 0 || data.y.length === 0) {
+        throw new Error('No valid data points found in example file')
+      }
+
+      setRawData(data)
+      setFilename(filename)
+      setModelResults(null)
+      setAnalysisStatus('IDLE')
+      setIsLogitDrawerOpen(false)
+
+      return true
+    } catch (error) {
+      console.error('Error loading example file:', error)
+      alert(`Error loading example: ${error.message}`)
+      return false
+    }
+  }, [])
+
+  // Reset application state
+  const handleReset = () => {
+    setRawData(null)
+    setFilename(null)
+    setModelResults(null)
+    setAnalysisStatus('IDLE')
+    setIsLogitDrawerOpen(false)
+  }
+  
+  const value = {
+    rawData,
+    processedData,
+    modelResults,
+    isLoading,
+    filename,
+    analysisStatus,
+    detectedWavelength,
+    userWavelength,
+    setUserWavelength,
+    wavelengthSource,
+    dataWarnings,
+    baselineCorrection,
+    setBaselineCorrection,
+    interpolationEnabled,
+    setInterpolationEnabled,
+    scalingEnabled,
+    setScalingEnabled,
+    interpolationStrategy,
+    setInterpolationStrategy,
+    isLogitDrawerOpen,
+    setIsLogitDrawerOpen,
+    handleFileUpload,
+    loadExampleFile,
+    runInference,
+    handleReset,
+    MODEL_WAVELENGTH,
+    MODEL_MIN_2THETA,
+    MODEL_MAX_2THETA,
+    MODEL_INPUT_SIZE,
+  }
+  
+  return <XRDContext.Provider value={value}>{children}</XRDContext.Provider>
+}

frontend/src/index.css

@@ -0,0 +1,23 @@
+/* Basic reset and default styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  height: 100vh;
+  overflow: hidden;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/main.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import { MantineProvider } from '@mantine/core'
+import '@mantine/core/styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <MantineProvider
+      theme={{
+        primaryColor: 'blue',
+        fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
+      }}
+    >
+      <App />
+    </MantineProvider>
+  </React.StrictMode>,
+)

frontend/src/utils/xrd-processing.js

@@ -0,0 +1,225 @@
+/**
+ * Pure utility functions extracted from XRDContext for testability.
+ * These functions contain no React state or side effects.
+ */
+
+/**
+ * Convert wavelength using Bragg's law: lambda = 2d*sin(theta)
+ * For same d-spacing: sin(theta2) = (lambda2/lambda1) * sin(theta1)
+ *
+ * @param {number} theta_deg - 2theta angle in degrees
+ * @param {number} sourceWavelength - Source wavelength in Angstroms
+ * @param {number} targetWavelength - Target wavelength in Angstroms
+ * @returns {number|null} Converted 2theta angle, or null if physically impossible
+ */
+export function convertWavelength(theta_deg, sourceWavelength, targetWavelength) {
+  if (Math.abs(sourceWavelength - targetWavelength) < 0.0001) {
+    return theta_deg
+  }
+
+  const theta_rad = (theta_deg * Math.PI) / 180
+  const sin_theta2 = (targetWavelength / sourceWavelength) * Math.sin(theta_rad)
+
+  if (Math.abs(sin_theta2) > 1) {
+    return null
+  }
+
+  const theta2_rad = Math.asin(sin_theta2)
+  return (theta2_rad * 180) / Math.PI
+}
+
+/**
+ * Interpolate data to fixed size for model input.
+ *
+ * @param {number[]} x - Input x values (2theta)
+ * @param {number[]} y - Input y values (intensity)
+ * @param {number} targetSize - Desired output length
+ * @param {number} [xMin] - Minimum x value for output grid
+ * @param {number} [xMax] - Maximum x value for output grid
+ * @param {string} [strategy='linear'] - Interpolation strategy: 'linear' or 'cubic'
+ * @returns {{x: number[], y: number[]}} Interpolated data
+ */
+export function interpolateData(x, y, targetSize, xMin, xMax, strategy = 'linear') {
+  if (x.length === targetSize && xMin === undefined) {
+    return { x, y }
+  }
+
+  const minX = xMin !== undefined ? xMin : Math.min(...x)
+  const maxX = xMax !== undefined ? xMax : Math.max(...x)
+  const step = (maxX - minX) / (targetSize - 1)
+
+  const newX = Array.from({ length: targetSize }, (_, i) => minX + i * step)
+  const newY = new Array(targetSize)
+
+  const dataMinX = Math.min(...x)
+  const dataMaxX = Math.max(...x)
+
+  if (strategy === 'linear') {
+    for (let i = 0; i < targetSize; i++) {
+      const targetX = newX[i]
+
+      if (targetX < dataMinX || targetX > dataMaxX) {
+        newY[i] = 0
+        continue
+      }
+
+      let idx = x.findIndex(val => val >= targetX)
+      if (idx === -1) idx = x.length - 1
+      if (idx === 0) idx = 1
+
+      const x0 = x[idx - 1]
+      const x1 = x[idx]
+      const y0 = y[idx - 1]
+      const y1 = y[idx]
+
+      newY[i] = y0 + ((targetX - x0) * (y1 - y0)) / (x1 - x0)
+    }
+  } else if (strategy === 'cubic') {
+    for (let i = 0; i < targetSize; i++) {
+      const targetX = newX[i]
+
+      if (targetX < dataMinX || targetX > dataMaxX) {
+        newY[i] = 0
+        continue
+      }
+
+      let idx = x.findIndex(val => val >= targetX)
+      if (idx === -1) idx = x.length - 1
+      if (idx === 0) idx = 1
+
+      const i0 = Math.max(0, idx - 2)
+      const i1 = Math.max(0, idx - 1)
+      const i2 = Math.min(x.length - 1, idx)
+      const i3 = Math.min(x.length - 1, idx + 1)
+
+      if (i2 === i1) {
+        newY[i] = y[i1]
+      } else {
+        const t = (targetX - x[i1]) / (x[i2] - x[i1])
+        const t2 = t * t
+        const t3 = t2 * t
+
+        const v0 = y[i0]
+        const v1 = y[i1]
+        const v2 = y[i2]
+        const v3 = y[i3]
+
+        newY[i] = 0.5 * (
+          2 * v1 +
+          (-v0 + v2) * t +
+          (2 * v0 - 5 * v1 + 4 * v2 - v3) * t2 +
+          (-v0 + 3 * v1 - 3 * v2 + v3) * t3
+        )
+      }
+    }
+  }
+
+  return { x: newX, y: newY }
+}
+
+/**
+ * Parse DIF or XY format (space-separated 2theta intensity).
+ *
+ * @param {string} text - Raw file content
+ * @returns {{x: number[], y: number[]}} Parsed data points
+ */
+export function parseDIF(text) {
+  const lines = text.split('\n')
+  const x = []
+  const y = []
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+
+    if (!trimmed ||
+        trimmed.startsWith('#') ||
+        trimmed.startsWith('_') ||
+        trimmed.startsWith('CELL') ||
+        trimmed.startsWith('SPACE') ||
+        /^[a-zA-Z]/.test(trimmed)) {
+      continue
+    }
+
+    const parts = trimmed.split(/\s+/)
+    if (parts.length >= 2) {
+      const xVal = parseFloat(parts[0])
+      const yVal = parseFloat(parts[1])
+
+      if (!isNaN(xVal) && !isNaN(yVal)) {
+        x.push(xVal)
+        y.push(yVal)
+      }
+    }
+  }
+
+  return { x, y }
+}
+
+/**
+ * Extract metadata from CIF/DIF file text.
+ *
+ * @param {string} text - Raw file content
+ * @returns {{wavelength: number|null, cellParams: string|null, spaceGroup: string|null, crystalSystem: string|null}}
+ */
+export function extractMetadata(text) {
+  const metadata = {
+    wavelength: null,
+    cellParams: null,
+    spaceGroup: null,
+    crystalSystem: null
+  }
+
+  const lines = text.split('\n')
+
+  const wavelengthPatterns = [
+    /wavelength[:\s=]+([0-9.]+)/i,
+    /lambda[:\s=]+([0-9.]+)/i,
+    /wave[:\s=]+([0-9.]+)/i,
+    /_pd_wavelength[:\s]+([0-9.]+)/i,
+    /_diffrn_radiation_wavelength[:\s]+([0-9.]+)/i,
+    /radiation.*?([0-9.]+)\s*[AÅ]/i,
+  ]
+
+  for (const line of lines) {
+    if (!metadata.wavelength) {
+      for (const pattern of wavelengthPatterns) {
+        const match = line.match(pattern)
+        if (match && match[1]) {
+          const wavelength = parseFloat(match[1])
+          if (wavelength > 0.1 && wavelength < 3.0) {
+            metadata.wavelength = wavelength
+            break
+          }
+        }
+      }
+
+      if (/Cu\s*K[αa]/i.test(line)) metadata.wavelength = 1.5406
+      else if (/Mo\s*K[αa]/i.test(line)) metadata.wavelength = 0.7107
+      else if (/Co\s*K[αa]/i.test(line)) metadata.wavelength = 1.7889
+      else if (/Cr\s*K[αa]/i.test(line)) metadata.wavelength = 2.2897
+    }
+
+    if (/CELL PARAMETERS:/i.test(line)) {
+      const match = line.match(/CELL PARAMETERS:\s*([\d.\s]+)/)
+      if (match) {
+        metadata.cellParams = match[1].trim()
+      }
+    }
+
+    if (/SPACE GROUP:/i.test(line) || /_symmetry_Int_Tables_number/i.test(line)) {
+      const match = line.match(/(?:SPACE GROUP:|_symmetry_Int_Tables_number)[:\s]+(\d+)/)
+      if (match) {
+        metadata.spaceGroup = match[1]
+      }
+    }
+
+    if (/Crystal System:/i.test(line)) {
+      const match = line.match(/Crystal System:\s*(\d+)/)
+      if (match) {
+        metadata.crystalSystem = match[1]
+      }
+    }
+  }
+
+  return metadata
+}

frontend/src/utils/xrd-processing.test.js

@@ -0,0 +1,197 @@
+import { describe, it, expect } from 'vitest'
+import {
+  convertWavelength,
+  interpolateData,
+  parseDIF,
+  extractMetadata,
+} from './xrd-processing'
+
+// ---------------------------------------------------------------------------
+// convertWavelength
+// ---------------------------------------------------------------------------
+describe('convertWavelength', () => {
+  it('returns same angle when wavelengths match', () => {
+    const result = convertWavelength(10.0, 0.6199, 0.6199)
+    expect(result).toBeCloseTo(10.0, 5)
+  })
+
+  it('returns null for physically impossible conversion', () => {
+    // Large angle with large wavelength ratio can exceed sin > 1
+    const result = convertWavelength(80.0, 0.5, 2.0)
+    expect(result).toBeNull()
+  })
+
+  it('converts Cu Ka to synchrotron wavelength', () => {
+    const cuKa = 1.5406
+    const synchrotron = 0.6199
+    const theta = 20.0
+
+    const result = convertWavelength(theta, cuKa, synchrotron)
+    expect(result).not.toBeNull()
+    // Shorter wavelength -> smaller 2theta
+    expect(result).toBeLessThan(theta)
+    expect(result).toBeGreaterThan(0)
+  })
+
+  it('converts synchrotron to Cu Ka wavelength', () => {
+    const cuKa = 1.5406
+    const synchrotron = 0.6199
+    const theta = 10.0
+
+    const result = convertWavelength(theta, synchrotron, cuKa)
+    expect(result).not.toBeNull()
+    // Longer wavelength -> larger 2theta
+    expect(result).toBeGreaterThan(theta)
+  })
+
+  it('handles zero angle', () => {
+    const result = convertWavelength(0, 1.0, 2.0)
+    expect(result).toBeCloseTo(0, 5)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// interpolateData
+// ---------------------------------------------------------------------------
+describe('interpolateData', () => {
+  it('returns same data when target size matches', () => {
+    const x = [1, 2, 3]
+    const y = [10, 20, 30]
+    const result = interpolateData(x, y, 3)
+    expect(result.x).toEqual(x)
+    expect(result.y).toEqual(y)
+  })
+
+  it('interpolates to larger size with linear strategy', () => {
+    const x = [0, 10]
+    const y = [0, 100]
+    const result = interpolateData(x, y, 11, 0, 10, 'linear')
+    expect(result.x).toHaveLength(11)
+    expect(result.y).toHaveLength(11)
+    // Midpoint should be ~50
+    expect(result.y[5]).toBeCloseTo(50, 0)
+  })
+
+  it('sets out-of-range values to zero', () => {
+    const x = [5, 10, 15]
+    const y = [100, 200, 300]
+    const result = interpolateData(x, y, 20, 0, 20, 'linear')
+    // Points before x=5 should be 0
+    expect(result.y[0]).toBe(0)
+    // Points after x=15 should be 0
+    expect(result.y[19]).toBe(0)
+  })
+
+  it('supports cubic interpolation', () => {
+    const x = [0, 2, 4, 6, 8, 10]
+    const y = [0, 4, 16, 36, 64, 100]
+    const result = interpolateData(x, y, 11, 0, 10, 'cubic')
+    expect(result.x).toHaveLength(11)
+    expect(result.y).toHaveLength(11)
+  })
+
+  it('handles single point input', () => {
+    const x = [5]
+    const y = [100]
+    const result = interpolateData(x, y, 10, 0, 10, 'linear')
+    expect(result.x).toHaveLength(10)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// parseDIF
+// ---------------------------------------------------------------------------
+describe('parseDIF', () => {
+  it('parses space-separated data', () => {
+    const text = '5.0  100.0\n10.0  200.0\n15.0  300.0\n'
+    const result = parseDIF(text)
+    expect(result.x).toEqual([5.0, 10.0, 15.0])
+    expect(result.y).toEqual([100.0, 200.0, 300.0])
+  })
+
+  it('skips comment lines', () => {
+    const text = '# This is a comment\n5.0  100.0\n10.0  200.0\n'
+    const result = parseDIF(text)
+    expect(result.x).toHaveLength(2)
+  })
+
+  it('skips metadata lines', () => {
+    const text = 'CELL PARAMETERS: 5.0 5.0 5.0 90 90 90\nSPACE GROUP: Fm-3m\n5.0  100.0\n'
+    const result = parseDIF(text)
+    expect(result.x).toEqual([5.0])
+  })
+
+  it('skips lines starting with underscore', () => {
+    const text = '_cell_length_a 5.431\n5.0  100.0\n'
+    const result = parseDIF(text)
+    expect(result.x).toEqual([5.0])
+  })
+
+  it('handles empty input', () => {
+    const result = parseDIF('')
+    expect(result.x).toEqual([])
+    expect(result.y).toEqual([])
+  })
+
+  it('handles tab-separated data', () => {
+    const text = '5.0\t100.0\n10.0\t200.0\n'
+    const result = parseDIF(text)
+    expect(result.x).toEqual([5.0, 10.0])
+    expect(result.y).toEqual([100.0, 200.0])
+  })
+
+  it('skips lines starting with letters', () => {
+    const text = 'Header line\n5.0  100.0\nAnother header\n10.0  200.0\n'
+    const result = parseDIF(text)
+    expect(result.x).toEqual([5.0, 10.0])
+  })
+})
+
+// ---------------------------------------------------------------------------
+// extractMetadata
+// ---------------------------------------------------------------------------
+describe('extractMetadata', () => {
+  it('detects wavelength from numeric pattern', () => {
+    const text = '_diffrn_radiation_wavelength 0.6199\n'
+    const result = extractMetadata(text)
+    expect(result.wavelength).toBeCloseTo(0.6199, 4)
+  })
+
+  it('detects Cu Ka radiation', () => {
+    const text = 'Radiation: Cu Ka\n'
+    const result = extractMetadata(text)
+    expect(result.wavelength).toBeCloseTo(1.5406, 4)
+  })
+
+  it('detects Mo Ka radiation', () => {
+    const text = 'Radiation: Mo Ka\n'
+    const result = extractMetadata(text)
+    expect(result.wavelength).toBeCloseTo(0.7107, 4)
+  })
+
+  it('extracts space group number', () => {
+    const text = '_symmetry_Int_Tables_number 225\n'
+    const result = extractMetadata(text)
+    expect(result.spaceGroup).toBe('225')
+  })
+
+  it('extracts cell parameters', () => {
+    const text = 'CELL PARAMETERS: 5.431 5.431 5.431 90.0 90.0 90.0\n'
+    const result = extractMetadata(text)
+    expect(result.cellParams).not.toBeNull()
+    expect(result.cellParams).toContain('5.431')
+  })
+
+  it('returns null for missing data', () => {
+    const result = extractMetadata('Some random text without metadata\n')
+    expect(result.wavelength).toBeNull()
+    expect(result.spaceGroup).toBeNull()
+    expect(result.cellParams).toBeNull()
+  })
+
+  it('rejects wavelengths outside X-ray range', () => {
+    const text = 'wavelength: 0.001\n'
+    const result = extractMetadata(text)
+    expect(result.wavelength).toBeNull()
+  })
+})

frontend/vite.config.js

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:7286',
+        changeOrigin: true,
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+  }
+})

requirements.txt

@@ -0,0 +1,9 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.24.0
+python-multipart>=0.0.6
+numpy>=1.24.3
+torch>=2.1.0
+safetensors>=0.4.0
+huggingface-hub>=0.20.0
+pydantic>=2.5.0
+spglib>=2.4.0