Arquitectura y Funcionalidades del Sistema

Este sistema implementa una plataforma integral para la clasificación de razas de gatos y perros, apoyándose en modelos de detección de objetos de la familia YOLO (versiones v8, v10, v11 y v12) integrados en un backend basado en SpringBoot. La arquitectura sigue un enfoque de separación frontend-backend, donde el frontend proporciona una interfaz web interactiva construida con Vue.js, y el backend expone APIs RESTful para el procesamiento de datos, la inferencia del modelo y la gestión de usuarios. El sistema está diseñado para manejar múltiples modos de entrada: imágenes estáticas, archivos de video y transmisiones en tiempo real desde cámaras web.

Modelos de Detección y Configuración

El motor central utiliza modelos YOLO entrenados en un conjunto de datos especializado que comprende 37 razas (12 de gatos y 25 de perros). Cada versión de YOLO ofrece balances distintos entre precisión y velocidad. Por ejemplo, YOLOv8 introduce una arquitectura sin anclas que mejora la eficiencia en la detección, mientras que YOLOv10 elimina la necesidad de supresión no máxima (NMS) durante la inferencia para reducir la latencia. YOLOv11 optimiza la extracción de características con menos parámetros, y YOLOv12 incorpora mecanismos de atención para una mayor precisión, manteniendo el rendimiento en tiempo real. El backend permite seleccionar dinámicamente entre estos modelos para adaptarse a requisitos específicos de rendimiento.

Integración con Análisis Inteligente

Tras la detección de una raza, el sistema invoca a un modelo de lenguaje de gran escala, como DeepSeek, para generar análisis contextuales detallados. Esto incluye información sobre el origen, características físicas, temperamento y cuidados recomendados de la raza identificada, transformando una simple etiqueta en un informe enriquecido. Esta funcionalidad se expone a través de un endpoint API que recibe el resultado de la detección y devuelve contenido textual generado dinámicamente.

Gestión de Datos y Persistencia

Todas las operaciones de detección y los datos de usuarios se almacenan de forma persistente en una base de datos MySQL. El esquema de la base de datos incluye tablas para usuarios, registros de detección de imágenes, videos y transmisiones de cámara. Esto permite realizar un seguimiento completo de las actividades del sistema, facilitar auditorías y soportar funcionalidades de visualización de datos. El backend implementa un módulo de autenticación y autorización para asegurar el acceso controlado a los recursos.

Ejemplos de Código Reescrito

Entrenamiento de Modelos YOLO (Python)

# Configuración para el entrenamiento de un modelo YOLO
# Se utilizan archivos de configuración YAML para definir la arquitectura del modelo y los datos.

from ultralytics import YOLO

# Ruta al modelo base preentrenado
ruta_modelo = 'weights/yolov8_custom.pt'
# Ruta al archivo de configuración de datos
ruta_datos = 'config/dataset.yaml'

if __name__ == '__main__':
    # Cargar el modelo
    detector = YOLO(ruta_modelo)
    
    # Iniciar el entrenamiento con parámetros personalizados
    resultados_entrenamiento = detector.train(
        data=ruta_datos,
        epochs=300,
        batch=48,
        device='cuda:0',
        workers=4,
        project='experiments',
        name='entrenamiento_v1',
        patience=50,
        imgsz=640
    )

Componente de Frontend para Detección de Imágenes (Vue.js)

<template>
  <div class="app-container">
    <header class="app-header">
      <div class="logo-area">
        <img src="@/assets/logo.png" alt="Logo" class="app-logo">
        <h1>Sistema de Reconocimiento Visual</h1>
      </div>
      <div class="user-controls">
        <img :src="userData.avatar" class="user-avatar">
        <span class="user-name">{{ userData.username }}</span>
      </div>
    </header>

    <main class="content-wrapper">
      <section class="configuration-panel">
        <h2>Parámetros del Modelo</h2>
        <div class="config-group">
          <label for="modelSelect">Arquitectura YOLO:</label>
          <select id="modelSelect" v-model="selectedModel" class="input-field">
            <option v-for="model in availableModels" :key="model.id" :value="model.id">
              {{ model.name }}
            </option>
          </select>
        </div>
        <div class="config-group">
          <label for="confidenceSlider">Umbral de Confianza: {{ confidenceThreshold }}%</label>
          <input type="range" id="confidenceSlider" v-model="confidenceThreshold" min="10" max="95" step="5">
        </div>
        <button @click="startDetection" class="primary-btn">Ejecutar Detección</button>
      </section>

      <section class="upload-area">
        <div class="drop-zone" @dragover.prevent @drop="handleDrop">
          <p v-if="!imagePreview">Arrastre una imagen aquí o haga clic para seleccionar</p>
          <img v-else :src="imagePreview" class="preview-image">
        </div>
        <input type="file" ref="fileInput" @change="handleFileSelect" accept="image/*" style="display: none;">
      </section>

      <section class="results-display" v-if="detectionOutput">
        <h2>Resultados del Análisis</h2>
        <div class="output-summary">
          <p><strong>Raza Identificada:</strong> {{ detectionOutput.breed }}</p>
          <p><strong>Confianza:</strong> {{ detectionOutput.confidence }}%</p>
          <p><strong>Tiempo de Procesamiento:</strong> {{ detectionOutput.processingTime }} ms</p>
        </div>
        <div class="ai-analysis" v-if="detectionOutput.aiInsights">
          <h3>Análisis Contextual por IA</h3>
          <div v-html="detectionOutput.aiInsights" class="insights-content"></div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedModel: 'yolov8',
      confidenceThreshold: 70,
      imagePreview: null,
      detectionOutput: null,
      availableModels: [
        { id: 'yolov8', name: 'YOLOv8 Estándar' },
        { id: 'yolov10', name: 'YOLOv10 Sin NMS' },
        { id: 'yolov11', name: 'YOLOv11 Eficiente' },
        { id: 'yolov12', name: 'YOLOv12 Atención' }
      ],
      userData: {
        username: 'usuario_demo',
        avatar: '/images/default-avatar.png'
      }
    };
  },
  methods: {
    handleFileSelect(event) {
      const file = event.target.files[0];
      if (file) {
        this.imagePreview = URL.createObjectURL(file);
      }
    },
    handleDrop(event) {
      event.preventDefault();
      const file = event.dataTransfer.files[0];
      if (file && file.type.startsWith('image/')) {
        this.imagePreview = URL.createObjectURL(file);
      }
    },
    async startDetection() {
      // Lógica para enviar la imagen al backend y recibir resultados
      // Simulación de una llamada API
      this.detectionOutput = {
        breed: 'Labrador Retriever',
        confidence: 95.2,
        processingTime: 150,
        aiInsights: '<p>El Labrador es conocido por su carácter amigable y energía.</p>'
      };
    }
  }
};
</script>