Machine Learning for Web Developers: Building Intelligent Web Applicationsh1

import * as tf from '@tensorflow/tfjs'

// Sentiment analysis model
class SentimentAnalyzer {
  private model: tf.LayersModel | null = null

  async loadModel(): Promise<void> {
    this.model = await tf.loadLayersModel('/models/sentiment-model/model.json')
  }

  async analyzeSentiment(text: string): Promise<{ score: number; label: string }> {
    if (!this.model) {
      await this.loadModel()
    }

    // Preprocess text
    const tokens = this.tokenize(text)
    const encoded = this.encode(tokens)

    // Make prediction
    const prediction = this.model!.predict(encoded) as tf.Tensor
    const score = (await prediction.data())[0]

    // Cleanup
    prediction.dispose()

    return {
      score,
      label: score > 0.5 ? 'positive' : 'negative'
    }
  }

  private tokenize(text: string): string[] {
    return text.toLowerCase()
      .replace(/[^\w\s]/g, ' ')
      .split(/\s+/)
      .filter(token => token.length > 0)
  }

  private encode(tokens: string[]): tf.Tensor {
    // Simple encoding - in production, use proper tokenization
    const maxLength = 100
    const encoded = new Float32Array(maxLength).fill(0)

    for (let i = 0; i < Math.min(tokens.length, maxLength); i++) {
      // Simple hash-based encoding
      const hash = this.simpleHash(tokens[i])
      encoded[i] = hash / 1000 // Normalize
    }

    return tf.tensor([encoded])
  }

  private simpleHash(str: string): number {
    let hash = 0
    for (let i = 0; i < str.length; i++) {
      const char = str.charCodeAt(i)
      hash = ((hash << 5) - hash) + char
      hash = hash & hash // Convert to 32-bit integer
    }
    return Math.abs(hash)
  }
}

// Image classification with webcam
class ImageClassifier {
  private model: tm.ImageClassifier | null = null
  private webcam: tm.Webcam | null = null

  async initialize(): Promise<void> {
    // Load custom Teachable Machine model
    const modelURL = '/models/image-classifier/model.json'
    const metadataURL = '/models/image-classifier/metadata.json'

    this.model = await tm.imageClassifier(modelURL, metadataURL)

    // Setup webcam
    this.webcam = new tm.Webcam(400, 400, true) // width, height, flip
    await this.webcam.setup()
    await this.webcam.play()
  }

  async classifyImage(): Promise<Array<{ className: string; probability: number }>> {
    if (!this.model || !this.webcam) {
      throw new Error('Model not initialized')
    }

    // Get image from webcam
    const img = this.webcam.canvas
    const prediction = await this.model.predict(img)

    return prediction.sort((a, b) => b.probability - a.probability)
  }

  dispose(): void {
    this.webcam?.stop()
    this.model?.dispose()
  }
}

// React component using ML
function SentimentAnalysis() {
  const [text, setText] = useState('')
  const [result, setResult] = useState<{ score: number; label: string } | null>(null)
  const [loading, setLoading] = useState(false)

  const analyzer = useRef<SentimentAnalyzer | null>(null)

  useEffect(() => {
    analyzer.current = new SentimentAnalyzer()
    analyzer.current.loadModel()

    return () => {
      analyzer.current = null
    }
  }, [])

  const analyzeText = async () => {
    if (!analyzer.current || !text.trim()) return

    setLoading(true)
    try {
      const analysis = await analyzer.current.analyzeSentiment(text)
      setResult(analysis)
    } catch (error) {
      console.error('Analysis failed:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="sentiment-analyzer">
      <h2>Sentiment Analysis</h2>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter text to analyze..."
        rows={4}
        cols={50}
      />
      <button onClick={analyzeText} disabled={loading}>
        {loading ? 'Analyzing...' : 'Analyze'}
      </button>

      {result && (
        <div className="result">
          <p>Sentiment: <strong>{result.label}</strong></p>
          <p>Confidence: <strong>{(result.score * 100).toFixed(1)}%</strong></p>
        </div>
      )}
    </div>
  )
}

// Object detection with COCO-SSD model
class ObjectDetector {
  private model: cocoSsd.MobileNet | null = null

  async loadModel(): Promise<void> {
    this.model = await cocoSsd.load()
  }

  async detectObjects(imageElement: HTMLImageElement): Promise<cocoSsd.DetectedObject[]> {
    if (!this.model) {
      await this.loadModel()
    }

    return await this.model!.detect(imageElement)
  }
}

// Interactive drawing app with ML
class AIDrawingApp {
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D
  private isDrawing = false
  private detector: ObjectDetector

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')!
    this.detector = new ObjectDetector()

    this.setupCanvas()
    this.setupEventListeners()
    this.loadModel()
  }

  private setupCanvas(): void {
    this.canvas.width = 800
    this.canvas.height = 600

    this.ctx.strokeStyle = '#000000'
    this.ctx.lineWidth = 2
    this.ctx.lineCap = 'round'
    this.ctx.lineJoin = 'round'
  }

  private setupEventListeners(): void {
    this.canvas.addEventListener('mousedown', (e) => {
      this.isDrawing = true
      this.draw(e)
    })

    this.canvas.addEventListener('mousemove', (e) => {
      if (this.isDrawing) {
        this.draw(e)
      }
    })

    this.canvas.addEventListener('mouseup', () => {
      this.isDrawing = false
      this.analyzeDrawing()
    })

    this.canvas.addEventListener('mouseleave', () => {
      this.isDrawing = false
    })
  }

  private draw(e: MouseEvent): void {
    if (!this.isDrawing) return

    this.ctx.lineTo(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop)
    this.ctx.stroke()
    this.ctx.beginPath()
    this.ctx.moveTo(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop)
  }

  private async loadModel(): Promise<void> {
    try {
      await this.detector.loadModel()
      console.log('Object detection model loaded')
    } catch (error) {
      console.error('Failed to load model:', error)
    }
  }

  private async analyzeDrawing(): Promise<void> {
    try {
      const detections = await this.detector.detectObjects(this.canvas)

      // Clear previous overlays
      this.clearOverlays()

      // Draw bounding boxes
      detections.forEach((detection) => {
        if (detection.score > 0.5) {
          // Confidence threshold
          this.drawBoundingBox(detection)
        }
      })

      // Show results
      if (detections.length > 0) {
        const topDetection = detections[0]
        this.showResult(`Detected: ${topDetection.class} (${(topDetection.score * 100).toFixed(1)}%)`)
      } else {
        this.showResult('No objects detected')
      }
    } catch (error) {
      console.error('Analysis failed:', error)
      this.showResult('Analysis failed')
    }
  }

  private drawBoundingBox(detection: cocoSsd.DetectedObject): void {
    const [x, y, width, height] = detection.bbox

    this.ctx.strokeStyle = '#00ff00'
    this.ctx.lineWidth = 3
    this.ctx.strokeRect(x, y, width, height)

    // Draw label
    this.ctx.fillStyle = '#00ff00'
    this.ctx.font = '16px Arial'
    this.ctx.fillText(`${detection.class} ${(detection.score * 100).toFixed(1)}%`, x, y - 5)
  }

  private clearOverlays(): void {
    // This is a simplified version - in practice, you'd track overlay elements
    const resultsDiv = document.getElementById('results')
    if (resultsDiv) {
      resultsDiv.innerHTML = ''
    }
  }

  private showResult(message: string): void {
    const resultsDiv = document.getElementById('results') || document.createElement('div')
    resultsDiv.id = 'results'
    resultsDiv.textContent = message

    if (!document.getElementById('results')) {
      document.body.appendChild(resultsDiv)
    }
  }
}

// ML service client
class MLServiceClient {
  private baseURL: string

  constructor(baseURL: string = '/api/ml') {
    this.baseURL = baseURL
  }

  async analyzeSentiment(text: string): Promise<SentimentResult> {
    const response = await fetch(`${this.baseURL}/sentiment`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text })
    })

    if (!response.ok) {
      throw new Error(`ML service error: ${response.status}`)
    }

    return response.json()
  }

  async classifyImage(imageFile: File): Promise<ImageClassificationResult> {
    const formData = new FormData()
    formData.append('image', imageFile)

    const response = await fetch(`${this.baseURL}/image`, {
      method: 'POST',
      body: formData
    })

    if (!response.ok) {
      throw new Error(`ML service error: ${response.status}`)
    }

    return response.json()
  }

  async getRecommendations(userId: string, context: any): Promise<RecommendationResult> {
    const response = await fetch(`${this.baseURL}/recommend`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId, context })
    })

    if (!response.ok) {
      throw new Error(`ML service error: ${response.status}`)
    }

    return response.json()
  }
}

// Main ML-powered application
function MLWebApp() {
  const [activeTab, setActiveTab] = useState<'sentiment' | 'image' | 'recommend'>('sentiment')
  const [sentimentResult, setSentimentResult] = useState<SentimentResult | null>(null)
  const [imageResult, setImageResult] = useState<ImageClassificationResult | null>(null)
  const [recommendations, setRecommendations] = useState<RecommendationResult | null>(null)

  const mlClient = useMemo(() => new MLServiceClient(), [])

  const analyzeText = async (text: string) => {
    try {
      const result = await mlClient.analyzeSentiment(text)
      setSentimentResult(result)
    } catch (error) {
      console.error('Sentiment analysis failed:', error)
    }
  }

  const classifyImage = async (file: File) => {
    try {
      const result = await mlClient.classifyImage(file)
      setImageResult(result)
    } catch (error) {
      console.error('Image classification failed:', error)
    }
  }

  const getRecommendations = async (userId: string, context: any) => {
    try {
      const result = await mlClient.getRecommendations(userId, context)
      setRecommendations(result)
    } catch (error) {
      console.error('Recommendation failed:', error)
    }
  }

  return (
    <div className="ml-web-app">
      <header>
        <h1>AI-Powered Web Application</h1>
        <nav>
          <button
            className={activeTab === 'sentiment' ? 'active' : ''}
            onClick={() => setActiveTab('sentiment')}
          >
            Sentiment Analysis
          </button>
          <button
            className={activeTab === 'image' ? 'active' : ''}
            onClick={() => setActiveTab('image')}
          >
            Image Classification
          </button>
          <button
            className={activeTab === 'recommend' ? 'active' : ''}
            onClick={() => setActiveTab('recommend')}
          >
            Recommendations
          </button>
        </nav>
      </header>

      <main>
        {activeTab === 'sentiment' && (
          <SentimentAnalyzer onAnalyze={analyzeText} result={sentimentResult} />
        )}

        {activeTab === 'image' && (
          <ImageClassifier onClassify={classifyImage} result={imageResult} />
        )}

        {activeTab === 'recommend' && (
          <RecommendationEngine
            onGetRecommendations={getRecommendations}
            result={recommendations}
          />
        )}
      </main>
    </div>
  )
}

// Data collection service
class DataCollectionService {
  async collectUserInteractions(): Promise<void> {
    // Track user behavior
    const interactions = {
      userId: getCurrentUserId(),
      timestamp: new Date(),
      page: window.location.pathname,
      action: 'page_view',
      duration: getTimeOnPage(),
      referrer: document.referrer,
      userAgent: navigator.userAgent,
      screenSize: `${screen.width}x${screen.height}`,
      sessionId: getSessionId(),
    }

    await this.sendToDataPipeline(interactions)
  }

  async collectFeedback(rating: number, feedback: string): Promise<void> {
    const feedbackData = {
      userId: getCurrentUserId(),
      rating,
      feedback,
      timestamp: new Date(),
      context: {
        page: window.location.pathname,
        userAgent: navigator.userAgent,
      },
    }

    await this.sendToDataPipeline(feedbackData, 'feedback')
  }

  private async sendToDataPipeline(data: any, stream: string = 'interactions'): Promise<void> {
    try {
      await fetch('/api/data-collection', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ stream, data }),
      })
    } catch (error) {
      console.error('Failed to send data to pipeline:', error)
    }
  }
}

// Data preprocessing pipeline
class DataPreprocessingPipeline {
  async processRawData(rawData: any[]): Promise<ProcessedData[]> {
    const processed = []

    for (const item of rawData) {
      const processedItem = {
        features: await this.extractFeatures(item),
        label: await this.extractLabel(item),
        metadata: {
          id: item.id,
          timestamp: item.timestamp,
          source: item.source,
        },
      }

      processed.push(processedItem)
    }

    return processed
  }

  private async extractFeatures(item: any): Promise<number[]> {
    // Feature engineering based on data type
    switch (item.type) {
      case 'user_interaction':
        return this.extractInteractionFeatures(item)
      case 'feedback':
        return this.extractFeedbackFeatures(item)
      case 'purchase':
        return this.extractPurchaseFeatures(item)
      default:
        return []
    }
  }

  private extractInteractionFeatures(interaction: any): number[] {
    return [
      // Time-based features
      new Date(interaction.timestamp).getHours(),
      new Date(interaction.timestamp).getDay(),

      // Page-based features
      this.categoricalEncode(interaction.page),

      // Duration features (normalized)
      Math.min(interaction.duration / 300, 1), // Cap at 5 minutes

      // Device features
      this.encodeUserAgent(interaction.userAgent),

      // Session features
      this.sessionFeatures(interaction.sessionId),
    ]
  }

  private extractLabel(item: any): string {
    // Determine label based on business logic
    if (item.type === 'feedback') {
      return item.rating >= 4 ? 'positive' : 'negative'
    }

    if (item.type === 'purchase') {
      return 'converted'
    }

    return 'neutral'
  }
}

// Recommendation engine
class RecommendationEngine {
  private userPreferences: Map<string, UserPreferences> = new Map()
  private productCatalog: Product[] = []
  private interactionHistory: UserInteraction[] = []

  async getPersonalizedRecommendations(
    userId: string,
    context: RecommendationContext
  ): Promise<Product[]> {
    // Get user preferences
    const preferences = await this.getUserPreferences(userId)

    // Get recent interactions
    const recentInteractions = await this.getRecentInteractions(userId)

    // Calculate similarity scores
    const candidates = await this.findSimilarProducts(preferences, context)

    // Apply business rules
    const filtered = await this.applyBusinessRules(candidates, context)

    // Re-rank based on multiple factors
    const ranked = await this.rankRecommendations(filtered, preferences, recentInteractions)

    return ranked.slice(0, 10) // Return top 10
  }

  private async getUserPreferences(userId: string): Promise<UserPreferences> {
    let preferences = this.userPreferences.get(userId)

    if (!preferences) {
      // Load from database or calculate from history
      preferences = await this.calculateUserPreferences(userId)
      this.userPreferences.set(userId, preferences)
    }

    return preferences
  }

  private async calculateUserPreferences(userId: string): Promise<UserPreferences> {
    // Analyze user behavior patterns
    const interactions = await this.getUserInteractions(userId)

    // Extract preferences from interactions
    const categoryPreferences = this.extractCategoryPreferences(interactions)
    const pricePreferences = this.extractPricePreferences(interactions)
    const brandPreferences = this.extractBrandPreferences(interactions)

    return {
      categories: categoryPreferences,
      priceRange: pricePreferences,
      brands: brandPreferences,
      stylePreferences: await this.extractStylePreferences(interactions)
    }
  }

  private async findSimilarProducts(
    preferences: UserPreferences,
    context: RecommendationContext
  ): Promise<Product[]> {
    // Use collaborative filtering
    const similarUsers = await this.findSimilarUsers(preferences)

    // Get products liked by similar users
    const candidateProducts = new Set<Product>()

    for (const user of similarUsers) {
      const likedProducts = await this.getUserLikedProducts(user.id)
      likedProducts.forEach(product => candidateProducts.add(product))
    }

    // Filter based on context (category, price range, etc.)
    return Array.from(candidateProducts).filter(product =>
      this.matchesContext(product, context)
    )
  }
}

// React component for recommendations
function ProductRecommendations({ userId }: { userId: string }) {
  const [recommendations, setRecommendations] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [context, setContext] = useState<RecommendationContext>({
    category: null,
    priceRange: null,
    occasion: null
  })

  const recommendationEngine = useRef(new RecommendationEngine())

  useEffect(() => {
    loadRecommendations()
  }, [userId, context])

  const loadRecommendations = async () => {
    try {
      setLoading(true)
      const recs = await recommendationEngine.current.getPersonalizedRecommendations(
        userId,
        context
      )
      setRecommendations(recs)
    } catch (error) {
      console.error('Failed to load recommendations:', error)
    } finally {
      setLoading(false)
    }
  }

  const updateContext = (newContext: Partial<RecommendationContext>) => {
    setContext(prev => ({ ...prev, ...newContext }))
  }

  if (loading) {
    return <div className="loading">Finding perfect products for you...</div>
  }

  return (
    <div className="recommendations">
      <div className="filters">
        <select onChange={(e) => updateContext({ category: e.target.value || null })}>
          <option value="">All Categories</option>
          <option value="electronics">Electronics</option>
          <option value="clothing">Clothing</option>
          <option value="books">Books</option>
        </select>

        <select onChange={(e) => updateContext({ priceRange: e.target.value || null })}>
          <option value="">Any Price</option>
          <option value="budget">Budget ($0-50)</option>
          <option value="mid">Mid-range ($50-200)</option>
          <option value="premium">Premium ($200+)</option>
        </select>
      </div>

      <div className="products-grid">
        {recommendations.map((product) => (
          <ProductCard
            key={product.id}
            product={product}
            onPurchase={() => handlePurchase(product)}
          />
        ))}
      </div>

      {recommendations.length === 0 && (
        <div className="no-recommendations">
          <p>No recommendations found. Try adjusting your filters or browse our categories.</p>
        </div>
      )}
    </div>
  )
}

// Model quantization for smaller size
def quantize_model(model_path: str, output_path: str) -> None:
    """Convert model to quantized version for faster inference"""
    model = tf.keras.models.load_model(model_path)

    # Convert to TensorFlow Lite
    converter = tf.lite.TFLiteConverter.from_keras_model(model)

    # Enable optimization
    converter.optimizations = [tf.lite.Optimize.DEFAULT]

    # Set data types for quantization
    converter.target_spec.supported_types = [tf.float16]

    # Convert model
    tflite_model = converter.convert()

    # Save quantized model
    with open(output_path, 'wb') as f:
        f.write(tflite_model)

# Model caching for faster loading
class ModelCache:
    def __init__(self):
        self.cache: Dict[str, Any] = {}
        self.cache_timestamps: Dict[str, datetime] = {}

    def get_model(self, model_name: str, max_age: timedelta = timedelta(hours=1)):
        """Get cached model or load fresh"""
        cache_key = f"model:{model_name}"

        # Check if model is in cache and not expired
        if (cache_key in self.cache and
            datetime.now() - self.cache_timestamps[cache_key] < max_age):
            return self.cache[cache_key]

        # Load model
        model = self.load_model_from_disk(model_name)

        # Cache model
        self.cache[cache_key] = model
        self.cache_timestamps[cache_key] = datetime.now()

        return model

    def load_model_from_disk(self, model_name: str):
        """Load model from disk with error handling"""
        try:
            if model_name == 'sentiment':
                return tf.keras.models.load_model('models/sentiment_model.h5')
            elif model_name == 'image_classifier':
                return tf.keras.models.load_model('models/image_classifier.h5')
            else:
                raise ValueError(f"Unknown model: {model_name}")
        except Exception as e:
            logging.error(f"Failed to load model {model_name}: {str(e)}")
            raise

# Batch processing for efficiency
class BatchProcessor:
    def __init__(self, model_cache: ModelCache):
        self.model_cache = model_cache
        self.batch_size = 32

    async def process_batch(self, items: List[Any], model_name: str) -> List[Any]:
        """Process items in batches for efficiency"""
        model = self.model_cache.get_model(model_name)
        results = []

        # Process in batches
        for i in range(0, len(items), self.batch_size):
            batch = items[i:i + self.batch_size]

            # Convert batch to model input format
            batch_input = self.prepare_batch_input(batch)

            # Run inference
            batch_predictions = model.predict(batch_input)

            # Process results
            batch_results = self.process_batch_results(batch, batch_predictions)
            results.extend(batch_results)

        return results

// Data privacy preservation
class PrivacyPreservingML {
  async anonymizeUserData(userData: UserData): Promise<AnonymizedData> {
    // Remove personally identifiable information
    const anonymized = { ...userData }

    // Hash sensitive fields
    anonymized.email = await this.hashField(userData.email)
    anonymized.userId = await this.hashField(userData.userId)

    // Remove or generalize location data
    if (anonymized.location) {
      anonymized.location = this.generalizeLocation(anonymized.location)
    }

    // Add noise to numerical data
    anonymized.age = this.addNoiseToAge(anonymized.age)

    return anonymized
  }

  async hashField(field: string): Promise<string> {
    const encoder = new TextEncoder()
    const data = encoder.encode(field)
    const hashBuffer = await crypto.subtle.digest('SHA-256', data)
    const hashArray = Array.from(new Uint8Array(hashBuffer))
    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
  }

  private generalizeLocation(location: string): string {
    // Convert specific locations to broader categories
    const locationMap: Record<string, string> = {
      'New York': 'Northeast US',
      'Los Angeles': 'West Coast US',
      'London': 'UK',
      'Tokyo': 'Japan',
    }

    return locationMap[location] || 'Other'
  }

  private addNoiseToAge(age: number): number {
    // Add random noise while preserving statistical properties
    const noise = (Math.random() - 0.5) * 4 // ±2 years
    return Math.max(13, Math.min(100, age + noise))
  }
}

// Model security
class SecureModelManager {
  async validateModel(model: tf.LayersModel): Promise<boolean> {
    // Check model integrity
    const modelHash = await this.calculateModelHash(model)
    const expectedHash = await this.getExpectedModelHash()

    if (modelHash !== expectedHash) {
      throw new SecurityError('Model integrity check failed')
    }

    // Validate model architecture
    const isValidArchitecture = await this.validateArchitecture(model)
    if (!isValidArchitecture) {
      throw new SecurityError('Model architecture validation failed')
    }

    return true
  }

  async calculateModelHash(model: tf.LayersModel): Promise<string> {
    // Calculate hash of model weights and architecture
    const weights = model.getWeights()
    const weightsData = weights.map((w) => w.dataSync())

    const combined = new Float32Array(weightsData.reduce((acc, arr) => acc + arr.length, 0))

    let offset = 0
    for (const arr of weightsData) {
      combined.set(arr, offset)
      offset += arr.length
    }

    const hashBuffer = await crypto.subtle.digest('SHA-256', combined.buffer)
    const hashArray = Array.from(new Uint8Array(hashBuffer))
    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
  }
}