frontend/src/HuggingfaceTokenContext.js

import React, { createContext, useState, useEffect } from 'react';

export const HuggingfaceTokenContext = createContext();

export const HuggingfaceTokenProvider = ({ children }) => {
  const [token, setToken] = useState(() => {
    // Try to get token from localStorage on initial load
    return localStorage.getItem('huggingfaceToken') || '';
  });

  // Update localStorage when token changes
  useEffect(() => {
    if (token) {
      localStorage.setItem('huggingfaceToken', token);
    } else {
      localStorage.removeItem('huggingfaceToken');
    }
  }, [token]);

  return (
    <HuggingfaceTokenContext.Provider value={{ token, setToken }}>
      {children}
    </HuggingfaceTokenContext.Provider>
  );
};