🅰️ AngularPracticas - Frontend para Sistema de Machine Learning

"Frontend moderno y escalable para sistema de detección de objetos con Machine Learning"

---

🔗 Repositorios Relacionados

• Backend ML - API FastAPI con TensorFlow

---

🌟 Características Principales

🎨 Interfaz de Usuario Moderna

• ✅ Diseño completamente responsive con CSS3 y Flexbox/Grid
• 🎯 Tema profesional optimizado para usabilidad
• 📱 Compatibilidad móvil perfecta en todos los dispositivos
• ⚡ Carga optimizada con lazy loading y optimizaciones de rendimiento

🔧 Funcionalidades de ML Integradas

• 🖼️ Subida de imágenes con drag & drop y validación
• 🤖 Integración con API de detección de objetos en tiempo real
• 📊 Visualización de resultados con bounding boxes y confianzas
• 💾 Historial de predicciones con persistencia local

🚀 Arquitectura Profesional

graph TB
    A[Componentes Angular] --> B[Servicios HTTP]
    B --> C[API FastAPI ML]
    C --> D[Modelo TensorFlow]
    
    E[RxJS Observables] --> B
    F[TypeScript Models] --> A
    G[Local Storage] --> H[Historial Predicciones]

Loading

---

📁 Estructura del Proyecto

angular-practicas/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── image-upload/          # 🖼️ Componente subida imágenes
│   │   │   ├── prediction-results/    # 📊 Visualización resultados
│   │   │   └── history/               # 💾 Historial de predicciones
│   │   ├── services/
│   │   │   ├── ml-api.service.ts      # 🤖 Servicio API ML
│   │   │   └── storage.service.ts     # 💾 Servicio almacenamiento
│   │   ├── models/
│   │   │   ├── prediction.model.ts    # 📊 Interfaces TypeScript
│   │   │   └── image.model.ts         # 🖼️ Modelos de datos
│   │   └── utils/
│   │       └── constants.ts           # ⚙️ Constantes y configuraciones
│   ├── assets/
│   │   ├── images/                    # 🎨 Recursos estáticos
│   │   └── styles/                    # 🎭 Estilos globales
│   └── environments/                  # 🌍 Configuración por entornos
├── angular.json                       # ⚙️ Configuración Angular CLI
├── package.json                      # 📦 Dependencias y scripts
└── vercel.json                       # 🚀 Configuración Vercel

---

🛠️ Stack Tecnológico Completo

🔧 Frontend Framework

• Angular 19.0.3 - Framework principal
• TypeScript 5.3+ - Lenguaje tipado
• RxJS 7.8+ - Programación reactiva
• Angular CLI 19.0.3 - Herramientas de desarrollo

🎨 Estilos y UI

• CSS3 - Estilos modernos con Grid/Flexbox
• Angular Animations - Transiciones fluidas
• Responsive Design - Mobile-first approach

🔗 Integraciones y APIs

• HTTP Client - Comunicación con backend ML
• FormData API - Manejo de upload de archivos
• Local Storage - Persistencia de datos local

---

🚀 Despliegue y URLs

🌐 URLs de Producción

• Frontend (Vercel): machine-learnig-ro.vercel.app
• Backend API: [URL del API FastAPI] (configurable por environment)

⚙️ Configuración de Entornos

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://tu-api-fastapi.com/api',
  maxFileSize: 5 * 1024 * 1024, // 5MB
  supportedFormats: ['image/jpeg', 'image/png', 'image/jpg']
};

// environment.ts (desarrollo)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:8000',
  maxFileSize: 5 * 1024 * 1024,
  supportedFormats: ['image/jpeg', 'image/png', 'image/jpg']
};

---

🔧 Instalación y Desarrollo

Prerrequisitos

# Node.js 18+ y npm
node --version
npm --version

# Angular CLI global
npm install -g @angular/cli@19

⚡ Configuración Local

# 1. Clonar repositorio
git clone https://github.com/tuusuario/angular-practicas.git
cd angular-practicas

# 2. Instalar dependencias
npm install

# 3. Servidor de desarrollo
ng serve

# 4. Abrir en navegador
# http://localhost:4200

🛠️ Comandos Útiles

# Generar nuevo componente
ng generate component components/nombre-componente

# Build producción
ng build --configuration production

# Ejecutar tests
ng test
ng e2e

---

📊 Modelos de Datos TypeScript

export interface Prediction {
  label: string;
  confidence: number;
  bbox: [number, number, number, number];
}

export interface PredictionResponse {
  success: boolean;
  predictions: Prediction[];
  processing_time: number;
  timestamp?: string;
}

---

🎯 Flujo de Usuario

🔄 Proceso de Detección

sequenceDiagram
    participant U as Usuario
    participant C as Componente
    participant S as Servicio ML
    participant A as API FastAPI

    U->>C: Sube imagen
    C->>S: Llama servicio predict
    S->>A: POST /predict (FormData)
    A->>S: Retorna predicciones JSON
    S->>C: Emite resultados
    C->>U: Muestra detecciones

Loading

💾 Persistencia Local

• Historial de imágenes procesadas
• Resultados de predicciones con timestamp
• Configuraciones de usuario preferidas

---

🎨 Características de UX/UI

✨ Componentes Principales

• Image Upload Component: Drag & drop con preview
• Prediction Results: Visualización con bounding boxes
• Confidence Indicators: Barras de progreso para confianzas
• History Panel: Listado de predicciones anteriores

📱 Diseño Responsive

/* Mobile First Approach */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

---

🔒 Manejo de Errores y Validaciones

⚠️ Validaciones de Entrada

validateImage(file: File): ValidationResult {
  const maxSize = environment.maxFileSize;
  const allowedTypes = environment.supportedFormats;
  
  if (file.size > maxSize) {
    return { valid: false, error: 'File too large' };
  }
  
  if (!allowedTypes.includes(file.type)) {
    return { valid: false, error: 'Invalid file type' };
  }
  
  return { valid: true };
}

🔄 Manejo de Estados

• Loading states durante procesamiento
• Error boundaries para fallos de API
• Empty states para datos vacíos

---

📊 Performance y Optimizaciones

⚡ Estrategias de Rendimiento

• Lazy Loading de módulos
• Change Detection optimizado (OnPush)
• Bundle splitting automático
• Asset optimization en build

📦 Análisis de Bundle

# Analizar tamaño de bundle
ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

---

🤝 Contribución al Proyecto

🔧 Guía de Desarrollo

1. Sigue el style guide de Angular
2. Usa TypeScript estricto
3. Mantén componentes reutilizables
4. Escribe tests para nuevas funcionalidades

📝 Estructura de Commits

feat: agregar componente de historial
fix: corregir upload en móviles
docs: actualizar README
style: ajustes responsive

---

📄 Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

---

🌐 Demo en Vivo

machine-learnig-ro.vercel.app

⭐ ¿Te gusta el proyecto?

¡Dale una estrella en GitHub y contribuye!

Desarrollado con ❤️ por Astharmin

---