Refactor

.eslintrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true },
+  globals: {
+    process: 'readonly',
+    tf: 'readonly'
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'react/prop-types': 'off',
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    'no-console': 'warn',
+    'prefer-const': 'error',
+    'no-var': 'error',
+    'react/jsx-key': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/no-unescaped-entities': 'off',
+    'react/display-name': 'off'
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}

.github/workflows/deploy.yml

@@ -2,40 +2,62 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches:
-      - main
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
 
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
-  build-and-deploy:
+  # Build job
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
+        
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '18'
-
+          cache: 'npm'
+
       - name: Install dependencies
-        run: npm install
-
-      - name: Build
+        run: npm ci
+
+      - name: Lint code
+        run: npm run lint
+
+      - name: Build for production
         run: npm run build
-
+        
       - name: Setup Pages
         uses: actions/configure-pages@v5
-
+        
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './dist'
-
+          path: ./dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    steps:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.gitignore

@@ -1 +1,101 @@
-node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Vite build output
+dist
+dist-ssr
+*.local
+
+# Rollup build output
+build/
+
+# Webpack build output
+/dist/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS generated files
+Thumbs.db
+.DS_Store?
+ehthumbs.db
+Icon?
+
+# Temporary files
+tmp/
+temp/
+
+# IDE files
+*.swp
+*.swo
+*~
+
+# Storybook build outputs
+storybook-static

index.html

@@ -3,10 +3,48 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Explorador de Espacio Latente de Caracteres</title>
+
+    <!-- SEO Meta Tags -->
+    <title>Explorador de Espacio Latente - Autoencoder Interactivo</title>
+    <meta name="description" content="Explora interactivamente el espacio latente de un autoencoder neural. Genera caracteres únicos navegando por representaciones multidimensionales." />
+    <meta name="keywords" content="autoencoder, espacio latente, redes neuronales, inteligencia artificial, machine learning, tensorflow, interactive" />
+    <meta name="author" content="CAE Project" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://opablon.github.io/cae/" />
+    <meta property="og:title" content="Explorador de Espacio Latente - Autoencoder Interactivo" />
+    <meta property="og:description" content="Explora interactivamente el espacio latente de un autoencoder neural. Genera caracteres únicos navegando por representaciones multidimensionales." />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://opablon.github.io/cae/" />
+    <meta property="twitter:title" content="Explorador de Espacio Latente - Autoencoder Interactivo" />
+    <meta property="twitter:description" content="Explora interactivamente el espacio latente de un autoencoder neural. Genera caracteres únicos navegando por representaciones multidimensionales." />
+
+    <!-- Performance optimizations -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Theme color for mobile browsers -->
+    <meta name="theme-color" content="#1d4ed8" />
+
+    <!-- Disable zoom on mobile for better UX -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="./src/main.jsx"></script>
+
+    <!-- Fallback for browsers without JavaScript -->
+    <noscript>
+      <div style="text-align: center; padding: 50px; font-family: Arial, sans-serif;">
+        <h1>JavaScript Requerido</h1>
+        <p>Esta aplicación requiere JavaScript para funcionar. Por favor, habilita JavaScript en tu navegador.</p>
+      </div>
+    </noscript>
   </body>
 </html>

package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "preview": "vite preview",
+    "analyze": "npm run build && npx vite-bundle-analyzer dist/stats.html"
   },
   "dependencies": {
     "@tensorflow/tfjs": "^4.11.0",
@@ -25,6 +27,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
+    "terser": "^5.43.1",
     "vite": "^7.0.6"
   }
 }

postcss.config.js

@@ -1,5 +1,3 @@
-import postcss from 'postcss';
-
 export default {
   plugins: {
     tailwindcss: {},