Implement Machine Learning in Your React App for Better UX

const AdaptiveNavigation = ({ userBehaviorData }) => {
  // Derive navigation preferences from user behavior
  const { frequentSections, preferredLayout } = useMemo(() =>
    analyzeUserBehavior(userBehaviorData),
    [userBehaviorData]
  );

  return (
    <nav className={`main-nav ${preferredLayout}`}>
      {frequentSections.map(section => (
        <NavItem
          key={section.id}
          {...section}
          isHighlighted={section.frequency > 0.6} // Highlight frequently used items
          aria-label={`${section.name} navigation item`} // Accessibility enhancement
        />
      ))}
    </nav>
  );
};

const PredictiveSearch = () => {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  // Use debounce to prevent excessive API calls
  const debouncedQuery = useDebounce(query, 300);

  // Fetch suggestions from ML-powered API
  useEffect(() => {
    if (debouncedQuery.length > 2) {
      setIsLoading(true);
      fetchPredictions(debouncedQuery)
        .then(results => {
          setSuggestions(results);
          setIsLoading(false);
        })
        .catch(err => {
          console.error('Prediction error:', err);
          setIsLoading(false);
        });
    } else {
      setSuggestions([]);
    }
  }, [debouncedQuery]);

  return (
    <div className="search-container">
      <label htmlFor="search-input" className="sr-only">Search products</label>
      <input
        id="search-input"
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Search products..."
        aria-autocomplete="list"
        aria-controls="search-suggestions"
        aria-expanded={suggestions.length > 0}
      />

      {isLoading && <span className="loading-indicator" aria-live="polite">Loading suggestions...</span>}

      {suggestions.length > 0 && (
        <ul id="search-suggestions" className="suggestion-list" role="listbox">
          {suggestions.map(suggestion => (
            <li
              key={suggestion.id}
              onClick={() => setQuery(suggestion.text)}
              role="option"
              aria-selected={false}
            >
              {suggestion.text}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

const FeedbackAnalyzer = ({ feedbackText }) => {
  const [sentiment, setSentiment] = useState(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);

  useEffect(() => {
    if (feedbackText && feedbackText.length > 10) {
      setIsAnalyzing(true);

      // Analyze sentiment with ML model
      analyzeSentiment(feedbackText)
        .then(result => {
          setSentiment(result);
          setIsAnalyzing(false);

          // Log critical feedback for immediate attention
          if (result.score < 0.3) {
            logCriticalFeedback(feedbackText, result);
          }
        })
        .catch(err => {
          console.error('Sentiment analysis error:', err);
          setIsAnalyzing(false);
        });
    }
  }, [feedbackText]);

  // Display appropriate response based on sentiment
  const renderResponse = () => {
    if (!sentiment) return null;

    if (sentiment.score < 0.3) {
      return <p className="negative-response">We're sorry to hear that. A customer service representative will reach out shortly.</p>;
    } else if (sentiment.score >= 0.3 && sentiment.score < 0.7) {
      return <p className="neutral-response">Thank you for your feedback. We're always working to improve.</p>;
    } else {
      return <p className="positive-response">We're glad you're enjoying our service! Thank you for the feedback.</p>;
    }
  };

  return (
    <div className="feedback-analyzer">
      {isAnalyzing ? (
        <p>Analyzing your feedback...</p>
      ) : (
        renderResponse()
      )}
    </div>
  );
};

npm install @tensorflow/tfjs react-query

// src/utils/modelLoader.js
import * as tf from '@tensorflow/tfjs';

// Memoize model to prevent reloading
let cachedModel = null;

const loadModel = async () => {
  if (cachedModel) {
    return cachedModel;
  }

  try {
    // Load model from public folder
    // For production, consider hosting on a CDN
    const model = await tf.loadLayersModel('/models/recommendation/model.json');

    // Simple model warm-up
    const dummyData = tf.zeros([1, 10]);
    model.predict(dummyData);
    dummyData.dispose();

    cachedModel = model;
    return model;
  } catch (error) {
    console.error('Failed to load model:', error);
    throw new Error('Model loading failed');
  }
};

// Utility to process user history into feature vector
export const processUserHistory = (history) => {
  // Convert user history into features the model can understand
  // This is a simplified example - real implementation would depend on your model
  const features = new Array(10).fill(0);

  history.forEach(item => {
    const categoryIndex = getCategoryIndex(item.category);
    if (categoryIndex >= 0 && categoryIndex < 10) {
      features[categoryIndex] += 1;
    }
  });

  // Normalize features for better prediction
  const sum = features.reduce((a, b) => a + b, 0);
  return sum > 0 ? features.map(f => f / sum) : features;
};

// Helper function to get category index
const getCategoryIndex = (category) => {
  const categories = ['electronics', 'books', 'clothing', 'home', 'sports',
                     'beauty', 'toys', 'grocery', 'office', 'other'];
  return categories.indexOf(category.toLowerCase());
};

export default loadModel;

// src/hooks/useMLRecommendations.js
import { useState, useEffect } from 'react';
import * as tf from '@tensorflow/tfjs';
import loadModel, { processUserHistory } from '../utils/modelLoader';

const useMLRecommendations = (userHistory, availableProducts, options = {}) => {
  const [recommendations, setRecommendations] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // Optional configuration
  const { limit = 5, threshold = 0.1 } = options;

  useEffect(() => {
    const getRecommendations = async () => {
      if (!userHistory || userHistory.length === 0 || !availableProducts) {
        setRecommendations([]);
        setIsLoading(false);
        return;
      }

      try {
        setIsLoading(true);

        // Start performance measurement
        const startTime = performance.now();

        // Load the model
        const model = await loadModel();

        // Process user history into feature vector
        const features = processUserHistory(userHistory);

        // Convert to tensor
        const inputTensor = tf.tensor2d([features]);

        // Make prediction
        const outputTensor = model.predict(inputTensor);
        const predictionScores = Array.from(outputTensor.dataSync());

        // Clean up tensors to prevent memory leaks
        inputTensor.dispose();
        outputTensor.dispose();

        // End performance measurement
        const inferenceTime = performance.now() - startTime;
        console.log(`Model inference took ${inferenceTime.toFixed(2)}ms`);

        // Map prediction scores to products
        const productsWithScores = predictionScores
          .map((score, index) => ({
            score,
            productId: index,
            product: availableProducts.find(p => p.id === index.toString())
          }))
          .filter(item =>
            item.product && // Product exists
            item.score > threshold // Score is above threshold
          )
          .sort((a, b) => b.score - a.score)
          .slice(0, limit);

        setRecommendations(productsWithScores);
        setIsLoading(false);

        // Log performance metrics
        logMLMetrics('product_recommender', {
          inferenceTime,
          inputSize: features.length,
          resultsCount: productsWithScores.length
        });

      } catch (err) {
        console.error('Recommendation error:', err);
        setError(err.message || 'Failed to generate recommendations');
        setIsLoading(false);
      }
    };

    getRecommendations();
  }, [userHistory, availableProducts, limit, threshold]);

  return { recommendations, isLoading, error };
};

// Helper function to log metrics
const logMLMetrics = (modelName, metrics) => {
  // In a real app, send this to your analytics service
  console.log(`ML Metrics [${modelName}]:`, metrics);
};

export default useMLRecommendations;

// src/components/ProductRecommendations.jsx
import React, { useState } from 'react';
import useMLRecommendations from '../hooks/useMLRecommendations';
import FeedbackWidget from './FeedbackWidget';

const ProductRecommendations = ({
  userHistory,
  products,
  isExperimental = false
}) => {
  const [feedbackProvided, setFeedbackProvided] = useState([]);

  // Configure recommendations
  const config = {
    limit: 5,
    threshold: isExperimental ? 0.05 : 0.1 // Different threshold based on experiment
  };

  // Get predictions from ML model
  const { recommendations, isLoading, error } = useMLRecommendations(
    userHistory,
    products,
    config
  );

  // Handle user feedback
  const handleFeedback = (productId, isRelevant) => {
    setFeedbackProvided(prev => [...prev, productId]);

    // In a real app, send this to your backend to improve the model
    fetch('/api/recommendation-feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId,
        isRelevant,
        timestamp: new Date().toISOString()
      })
    });
  };

  if (isLoading) {
    return (
      <div className="recommendations-loading" aria-live="polite">
        <div className="loading-spinner"></div>
        <p>Finding products you might like...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="recommendations-error" role="alert">
        <p>Sorry, we couldn't load recommendations right now.</p>
        <small>Error: {error}</small>
      </div>
    );
  }

  return (
    <section className="recommendations-container" aria-labelledby="recommendations-heading">
      <h2 id="recommendations-heading">Recommended for You</h2>

      {recommendations.length === 0 ? (
        <p>We don't have enough data to make personalized recommendations yet. Browse more products to get started!</p>
      ) : (
        <div className="product-grid">
          {recommendations.map(({ product, score }) => (
            <div key={product.id} className="product-card">
              <img
                src={product.image}
                alt={`${product.name} product`}
                loading="lazy"
              />
              <h3>{product.name}</h3>
              <p className="product-price">${product.price.toFixed(2)}</p>

              {!feedbackProvided.includes(product.id) && (
                <FeedbackWidget
                  productId={product.id}
                  onFeedback={(isRelevant) => handleFeedback(product.id, isRelevant)}
                />
              )}
            </div>
          ))}
        </div>
      )}

      <div className="recommendations-explainer">
        <details>
          <summary>How are these recommendations generated?</summary>
          <p>We use machine learning to analyze your browsing and purchase history to find products that match your interests. Your data is processed locally in your browser for privacy.</p>
        </details>
      </div>
    </section>
  );
};

export default ProductRecommendations;

// src/components/FeedbackWidget.jsx
import React from 'react';

const FeedbackWidget = ({ productId, onFeedback }) => {
  return (
    <div className="feedback-controls" aria-labelledby={`feedback-heading-${productId}`}>
      <p id={`feedback-heading-${productId}`}>Is this recommendation relevant to you?</p>
      <div className="feedback-buttons">
        <button
          onClick={() => onFeedback(true)}
          aria-label="Yes, this recommendation is relevant"
          className="feedback-button feedback-yes"
        >
          👍 Yes
        </button>
        <button
          onClick={() => onFeedback(false)}
          aria-label="No, this recommendation is not relevant"
          className="feedback-button feedback-no"
        >
          👎 No
        </button>
      </div>
    </div>
  );
};

export default FeedbackWidget;

// src/services/cloudML.js
const API_ENDPOINT = process.env.REACT_APP_ML_API_ENDPOINT;
const API_KEY = process.env.REACT_APP_ML_API_KEY;

export const predictUserPreferences = async (userData) => {
  try {
    // Start performance timer
    const startTime = performance.now();

    const response = await fetch(`${API_ENDPOINT}/predictions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        userData,
        // Include model configuration
        config: {
          version: 'v2', // API version
          confidence_threshold: 0.65, // Only return high-confidence predictions
          limit: 10 // Number of results to return
        }
      })
    });

    // Calculate API latency
    const latency = performance.now() - startTime;

    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      throw new Error(errorData.message || `API error: ${response.status}`);
    }

    const data = await response.json();

    // Log performance metrics
    console.log(`Cloud ML API latency: ${latency.toFixed(2)}ms`);

    return {
      predictions: data.predictions,
      metadata: {
        latency,
        modelVersion: data.model_version,
        timestamp: data.timestamp
      }
    };
  } catch (error) {
    console.error('ML API error:', error);
    throw error;
  }
};

// During model conversion (server-side)
// tfjs-converter --input_format=keras --output_format=tfjs_graph_model
// --signature_name=serving_default --saved_model_tags=serve
// --quantize_uint8 /path/to/model /path/to/output

import React, { lazy, Suspense, useState } from 'react';

// Lazy load ML-powered components
const MLRecommendations = lazy(() => import('./MLRecommendations'));

const ProductPage = () => {
  const [showRecommendations, setShowRecommendations] = useState(false);

  return (
    <div className="product-page">
      {/* Core content loads immediately */}
      <ProductDetails />
      <ProductGallery />

      {/* Load recommendations only when user scrolls to this section */}
      <div className="recommendations-section">
        {!showRecommendations ? (
          <button
            onClick={() => setShowRecommendations(true)}
            className="load-recommendations-btn"
          >
            Show Personalized Recommendations
          </button>
        ) : (
          <Suspense fallback={<div className="loading-skeleton">Loading recommendations...</div>}>
            <MLRecommendations />
          </Suspense>
        )}
      </div>
    </div>
  );
};

// src/workers/ml-worker.js
importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js');

// Handle messages from main thread
self.onmessage = async function(event) {
  const { inputData, modelPath } = event.data;

  try {
    // Load model
    const model = await tf.loadLayersModel(modelPath);

    // Prepare input data
    const inputTensor = tf.tensor2d([inputData]);

    // Run prediction
    const outputTensor = model.predict(inputTensor);
    const predictions = Array.from(outputTensor.dataSync());

    // Clean up
    inputTensor.dispose();
    outputTensor.dispose();
    model.dispose();

    // Send results back to main thread
    self.postMessage({ success: true, predictions });
  } catch (error) {
    self.postMessage({
      success: false,
      error: error.message || 'Unknown error in ML worker'
    });
  }
};

// src/hooks/useMLWorker.js
import { useState, useEffect } from 'react';

const useMLWorker = (inputData, modelPath) => {
  const [result, setResult] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!inputData || !modelPath) return;

    setIsProcessing(true);

    // Create a worker
    const worker = new Worker('/ml-worker.js');

    // Handle worker messages
    worker.onmessage = (event) => {
      const { success, predictions, error } = event.data;

      if (success) {
        setResult(predictions);
      } else {
        setError(error);
      }

      setIsProcessing(false);
      worker.terminate();
    };

    worker.onerror = (error) => {
      setError(`Worker error: ${error.message}`);
      setIsProcessing(false);
      worker.terminate();
    };

    // Send data to worker
    worker.postMessage({ inputData, modelPath });

    // Clean up
    return () => worker.terminate();
  }, [inputData, modelPath]);

  return { result, isProcessing, error };
};

export default useMLWorker;

const FeatureImportanceVisualization = ({ modelOutput }) => {
  // Memoize expensive data transformation
  const processedData = useMemo(() => {
    // This calculation might be expensive, so we only run it when modelOutput changes
    if (!modelOutput || modelOutput.length === 0) return [];

    return modelOutput.map((feature, index) => ({
      name: `Feature ${index + 1}`,
      importance: feature * 100, // Convert to percentage
      color: feature > 0.5 ? '#34a853' : '#e94235'
    })).sort((a, b) => b.importance - a.importance);
  }, [modelOutput]); // Only recalculate when modelOutput changes

  return (
    <div className="feature-importance">
      <h3>Feature Importance</h3>
      <div className="chart-container">
        {processedData.map(feature => (
          <div key={feature.name} className="feature-bar">
            <div className="feature-name">{feature.name}</div>
            <div
              className="feature-value"
              style={{
                width: `${feature.importance}%`,
                backgroundColor: feature.color
              }}
            >
              {feature.importance.toFixed(1)}%
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// src/components/RecommendationWidget.js
import React, { useCallback } from 'react';
import { useQuery } from 'react-query';
import { useExperimentVariant, logExperimentEvent } from '../services/experiments';

const RecommendationWidget = ({ userId }) => {
  // Determine which experiment variant to show
  const experimentVariant = useExperimentVariant('recommendation_algorithm', userId);

  // Use different recommendation algorithms based on variant
  const getRecommendations = useCallback(() => {
    switch (experimentVariant) {
      case 'control':
        return fetchBasicRecommendations(userId);
      case 'variant_a':
        return fetchMLRecommendations(userId, 'collaborative');
      case 'variant_b':
        return fetchMLRecommendations(userId, 'content-based');
      default:
        return fetchBasicRecommendations(userId);
    }
  }, [experimentVariant, userId]);

  // Fetch recommendations based on experiment variant
  const { data, isLoading, error } = useQuery(
    ['recommendations', userId, experimentVariant],
    getRecommendations,
    {
      staleTime: 5 * 60 * 1000, // 5 minutes
      retry: 2
    }
  );

  // Track impression when recommendations are viewed
  React.useEffect(() => {
    if (data && data.recommendations) {
      logExperimentEvent({
        experimentId: 'recommendation_algorithm',
        variantId: experimentVariant,
        userId,
        eventType: 'impression',
        metadata: {
          recommendationCount: data.recommendations.length
        }
      });
    }
  }, [data, experimentVariant, userId]);

  // Track user interactions
  const trackInteraction = (recommendationId, action) => {
    logExperimentEvent({
      experimentId: 'recommendation_algorithm',
      variantId: experimentVariant,
      userId,
      eventType: action,
      recommendationId,
      timestamp: new Date().toISOString()
    });
  };

  if (isLoading) {
    return <div className="loading-recommendations">Loading recommendations for you...</div>;
  }

  if (error) {
    // Fallback to a non-ML recommendation system
    return <GenericRecommendations />;
  }

  return (
    <div className="recommendation-container">
      <h3>Recommended for You</h3>
      <div className="recommendation-grid">
        {data.recommendations.map(item => (
          <div
            key={item.id}
            className="recommendation-item"
            onClick={() => trackInteraction(item.id, 'click')}
          >
            <img src={item.image} alt={item.title} />
            <h4>{item.title}</h4>
            <p>{item.description}</p>
            <button
              className="save-button"
              onClick={(e) => {
                e.stopPropagation();
                trackInteraction(item.id, 'save');
              }}
            >
              Save for Later
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecommendationWidget;

// src/hooks/usePrivacyAwareML.js
import { useState, useEffect } from 'react';
import * as tf from '@tensorflow/tfjs';

const usePrivacyAwareML = (inputData, modelPath, privacyOptions = {}) => {
  const [predictions, setPredictions] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState(null);

  // Privacy configuration
  const {
    applyDifferentialPrivacy = true,
    noiseLevel = 0.05,
    storeLocallyOnly = true,
    anonymizeData = true
  } = privacyOptions;

  useEffect(() => {
    if (!inputData) return;

    const processPrediction = async () => {
      setIsProcessing(true);

      try {
        // Load model
        const model = await tf.loadLayersModel(modelPath);

        // Prepare input - anonymize if configured
        let processedInput = inputData;
        if (anonymizeData) {
          processedInput = anonymizeInputData(inputData);
        }

        const inputTensor = tf.tensor2d([processedInput]);

        // Generate prediction
        const outputTensor = model.predict(inputTensor);
        let predictions = Array.from(outputTensor.dataSync());

        // Apply differential privacy if enabled
        if (applyDifferentialPrivacy) {
          predictions = addNoise(predictions, noiseLevel);
        }

        // Clean up
        inputTensor.dispose();
        outputTensor.dispose();

        setPredictions(predictions);

        // Store results according to privacy settings
        if (storeLocallyOnly) {
          // Only store in browser, not on server
          localStorage.setItem(
            'ml_predictions',
            JSON.stringify({
              timestamp: new Date().toISOString(),
              predictions: predictions
            })
          );
        } else {
          // Send to server with privacy notice
          await fetch('/api/ml-results', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-Privacy-Aware': 'true'
            },
            body: JSON.stringify({
              predictions,
              isAnonymized: anonymizeData,
              hasDifferentialPrivacy: applyDifferentialPrivacy
            })
          });
        }
      } catch (err) {
        console.error('Privacy-aware ML error:', err);
        setError(err.message);
      } finally {
        setIsProcessing(false);
      }
    };

    processPrediction();
  }, [inputData, modelPath, applyDifferentialPrivacy, noiseLevel, storeLocallyOnly, anonymizeData]);

  // Helper function to add noise for differential privacy
  const addNoise = (predictions, level) => {
    return predictions.map(prediction => {
      const noise = (Math.random() - 0.5) * level;
      return Math.max(0, Math.min(1, prediction + noise));
    });
  };

  // Helper function to anonymize user data
  const anonymizeInputData = (data) => {
    // Remove personally identifiable information
    // This is a simplified example - real implementation would depend on your data
    return data.map(value => {
      // Apply transformation to obscure original values while preserving patterns
      return Math.round(value * 100) / 100;
    });
  };

  return { predictions, isProcessing, error };
};

export default usePrivacyAwareML;

// src/components/PrivacyAwareFeature.jsx
import React, { useState } from 'react';
import usePrivacyAwareML from '../hooks/usePrivacyAwareML';

const PrivacyAwareFeature = ({ userData }) => {
  const [privacyConsent, setPrivacyConsent] = useState(false);
  const [privacySettings, setPrivacySettings] = useState({
    applyDifferentialPrivacy: true,
    noiseLevel: 0.05,
    storeLocallyOnly: true,
    anonymizeData: true
  });

  const { predictions, isProcessing, error } = usePrivacyAwareML(
    privacyConsent ? userData : null,
    '/models/privacy/model.json',
    privacySettings
  );

  if (!privacyConsent) {
    return (
      <div className="privacy-consent">
        <h3>Enhanced Experience with ML</h3>
        <p>
          We can provide personalized recommendations using machine learning. Your data will be processed
          securely with privacy-preserving techniques.
        </p>
        <details>
          <summary>Privacy Options</summary>
          <div className="privacy-options">
            <label>
              <input
                type="checkbox"
                checked={privacySettings.anonymizeData}
                onChange={e => setPrivacySettings(prev => ({
                  ...prev,
                  anonymizeData: e.target.checked
                }))}
              />
              Anonymize my data
            </label>
            <label>
              <input
                type="checkbox"
                checked={privacySettings.storeLocallyOnly}
                onChange={e => setPrivacySettings(prev => ({
                  ...prev,
                  storeLocallyOnly: e.target.checked
                }))}
              />
              Process on my device only
            </label>
          </div>
        </details>
        <div className="consent-buttons">
          <button onClick={() => setPrivacyConsent(true)}>
            Enable Personalization
          </button>
          <button className="text-button">
            No Thanks
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="ml-feature">
      {isProcessing ? (
        <div className="processing-indicator">
          Processing your preferences...
        </div>
      ) : error ? (
        <div className="error-message">
          There was an error: {error}
        </div>
      ) : (
        <div className="personalized-content">
          <h3>Your Personalized Results</h3>
          {/* Render personalized content based on predictions */}
        </div>
      )}
    </div>
  );
};

export default PrivacyAwareFeature;

// src/utils/mlMonitoring.js
/**
 * Logs ML model metrics for monitoring performance
 * @param {string} modelName - Name of the ML model
 * @param {any} prediction - Model prediction
 * @param {any} actual - Actual value (if available)
 * @param {object} metadata - Additional context data
 */
export const logMLMetrics = (modelName, prediction, actual, metadata = {}) => {
  // Calculate accuracy metrics if actual value is available
  const metrics = {
    modelName,
    timestamp: new Date().toISOString(),
    prediction,
    ...metadata
  };

  if (actual !== undefined) {
    // For classification tasks
    if (typeof actual === 'string' || typeof actual === 'number') {
      metrics.actual = actual;
      metrics.correct = prediction === actual;
    }

    // For regression tasks
    if (typeof actual === 'number' && typeof prediction === 'number') {
      metrics.error = Math.abs(prediction - actual);
      metrics.squaredError = Math.pow(prediction - actual, 2);
    }
  }

  // Send telemetry via beacon API (non-blocking)
  if (navigator.sendBeacon) {
    navigator.sendBeacon(
      '/api/ml-telemetry',
      JSON.stringify(metrics)
    );
  } else {
    // Fallback to fetch for older browsers
    fetch('/api/ml-telemetry', {
      method: 'POST',
      keepalive: true, // Allow request to complete after page navigation
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(metrics)
    }).catch(err => console.error('Failed to log ML metrics:', err));
  }

  // Also log critical issues to application monitoring
  if (metrics.error && metrics.error > 0.5) {
    console.warn(`High error detected in ${modelName}: ${metrics.error}`);
    // Could integrate with error monitoring services here
  }
};

/**
 * Creates a dashboard component for real-time ML metrics
 */
export const MLMetricsDashboard = ({ modelName }) => {
  const [metrics, setMetrics] = useState({
    requests: 0,
    avgLatency: 0,
    accuracy: 0,
    lastUpdated: null
  });

  useEffect(() => {
    const fetchMetrics = async () => {
      try {
        const response = await fetch(`/api/ml-metrics?model=${modelName}`);
        const data = await response.json();
        setMetrics(data);
      } catch (error) {
        console.error('Failed to fetch ML metrics:', error);
      }
    };

    fetchMetrics();
    const interval = setInterval(fetchMetrics, 60000); // Refresh every minute

    return () => clearInterval(interval);
  }, [modelName]);

  return (
    <div className="ml-metrics-dashboard">
      <h3>ML Model Performance</h3>
      <div className="metrics-grid">
        <div className="metric-card">
          <h4>Requests</h4>
          <p>{metrics.requests.toLocaleString()}</p>
        </div>
        <div className="metric-card">
          <h4>Avg. Latency</h4>
          <p>{metrics.avgLatency.toFixed(2)}ms</p>
        </div>
        <div className="metric-card">
          <h4>Accuracy</h4>
          <p>{(metrics.accuracy * 100).toFixed(1)}%</p>
        </div>
      </div>
      <p className="last-updated">
        Last updated: {metrics.lastUpdated ? new Date(metrics.lastUpdated).toLocaleString() : 'Never'}
      </p>
    </div>
  );
};

// src/components/AccessibleMLFeature.jsx
import React, { useState, useRef } from 'react';
import { useMLPredictions } from '../hooks/useMLPredictions';

const AccessibleMLFeature = ({ inputData }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [userFeedback, setUserFeedback] = useState(null);
  const resultRef = useRef(null);

  // Get ML predictions
  const { predictions, isLoading, error } = useMLPredictions(inputData);

  // Handle UI expansion
  const handleToggleExpand = () => {
    setIsExpanded(!isExpanded);

    // Focus on results when expanded for screen readers
    if (!isExpanded && resultRef.current) {
      setTimeout(() => resultRef.current.focus(), 100);
    }
  };

  return (
    <div className="accessible-ml-feature">
      <button
        className="expand-button"
        onClick={handleToggleExpand}
        aria-expanded={isExpanded}
        aria-controls="ml-results"
      >
        {isExpanded ? 'Hide Recommendations' : 'Show Personalized Recommendations'}
      </button>

      {isExpanded && (
        <div
          id="ml-results"
          ref={resultRef}
          className="ml-results"
          tabIndex={-1}
          aria-live="polite"
          aria-atomic="true"
        >
          <h3>Recommendations Based on Your Preferences</h3>

          {isLoading ? (
            <div className="loading-state" aria-busy="true">
              <span className="sr-only">Loading recommendations</span>
              <div className="loading-animation" aria-hidden="true"></div>
            </div>
          ) : error ? (
            <div className="error-state" role="alert">
              We encountered a problem generating recommendations. Please try again later.
            </div>
          ) : (
            <>
              <p className="results-explanation">
                These recommendations are generated using machine learning based on your preferences.
                You can provide feedback to improve future recommendations.
              </p>

              <ul className="predictions-list">
                {predictions.map((prediction, index) => (
                  <li key={index} className="prediction-item">
                    <div className="prediction-content">
                      <h4>{prediction.title}</h4>
                      <p>{prediction.description}</p>
                    </div>

                    <div className="feedback-controls">
                      <span id={`feedback-heading-${index}`} className="sr-only">
                        Is this recommendation helpful?
                      </span>
                      <div
                        className="button-group"
                        role="group"
                        aria-labelledby={`feedback-heading-${index}`}
                      >
                        <button
                          onClick={() => setUserFeedback({ id: index, value: 'helpful' })}
                          aria-pressed={userFeedback?.id === index && userFeedback?.value === 'helpful'}
                          className="helpful-button"
                        >
                          Helpful
                        </button>
                        <button
                          onClick={() => setUserFeedback({ id: index, value: 'not-helpful' })}
                          aria-pressed={userFeedback?.id === index && userFeedback?.value === 'not-helpful'}
                          className="not-helpful-button"
                        >
                          Not Helpful
                        </button>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>

              {userFeedback && (
                <div className="feedback-confirmation" aria-live="polite">
                  Thank you for your feedback! We'll use it to improve future recommendations.
                </div>
              )}
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default AccessibleMLFeature;