Upload 4 files

Apache License.txt

@@ -0,0 +1,17 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2025 Shift Mind AI Labs
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,97 @@
+---
+title: "🟩 CompareMatrix Pro – Intelligent Content Analysis & Comparison"
+emoji: "🟩"
+colorFrom: "green"
+colorTo: "red"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 🟩 CompareMatrix Pro – Intelligent Content Analysis & Comparison  
+**Developed by Shift Mind AI Labs**
+
+CompareMatrix Pro is an open-source, privacy-first platform for deep, professional content comparison and analysis. Instantly generate a visually rich, multi-aspect comparison matrix (with inline HTML/CSS) between any two texts—across 90+ languages—using your own API key for complete privacy.
+
+---
+
+## 🚀 Features
+
+- **Multi-Aspect Comparison Matrix:**  
+  Instantly analyzes two pieces of content and generates a comprehensive comparison table (theme, audience, strengths, weaknesses, structure, etc.).
+- **Professional Visuals:**  
+  Outputs a fully styled, readable HTML table for copy/paste, reports, or LMS integration.
+- **Any Language, Any Content:**  
+  Works with essays, reports, articles, student work, business docs—supports 90+ languages.
+- **Instant Translation:**  
+  Full multilingual UI and output (OpenAI API required, never leaves your device).
+- **Privacy-First:**  
+  API keys and content never leave your device; no accounts, no server, no tracking.
+- **Responsive, Accessible UI:**  
+  Clean, modern design, keyboard shortcuts, and RTL support.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** in your browser (no installation or login).
+2. **Choose your language** and enter your OpenAI API key (used only locally).
+3. **Paste or type Content A and Content B** (minimum 50 characters each).
+4. **Click “Generate Intelligent Comparison Matrix”** (or press Ctrl+Enter).
+5. **View and copy** the full HTML comparison table for your needs.
+6. **Switch language** or clear translation cache at any time.
+
+---
+
+## 👩‍🏫 For Educators: Classroom & PD Applications
+
+- **Compare student assignments, drafts, or model answers.**
+- **Support formative assessment** and feedback—show differences in arguments, style, evidence, and clarity.
+- **Use as a collaborative activity**—students compare sources, news, or projects.
+- **Professional development:** Analyze lesson plans, emails, or communications.
+- **Multilingual feedback:** Instantly translate for ELLs or international programs.
+
+---
+
+## 👨‍🎓 For Students: Learning Benefits
+
+- **Critical Thinking:**  
+  See strengths/weaknesses, organization, and unique features side by side.
+- **Self-Assessment:**  
+  Compare your work with exemplars or peers and reflect on improvements.
+- **Cross-Language Comparison:**  
+  Supports native language and English—great for bilingual classes.
+
+---
+
+## 🔐 Data Privacy
+
+- Your API key and all content remain **only in your browser**.
+- Nothing is transmitted to Shift Mind AI Labs, Hugging Face, or any third party.
+
+---
+
+## 📄 License
+
+Licensed under the [Apache License 2.0](./LICENSE).
+
+---
+
+## 🧠 About Shift Mind AI Labs
+
+Shift Mind AI Labs builds open-source, ethical AI tools for global education, analysis, and lifelong learning.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Pull requests, suggestions, and partnerships are welcome!  
+For school pilots, integrations, or research: **info@shiftmind.io**
+
+---
+
+*Transforming content comparison for education, research, and professional analysis—securely and accessibly.*

index.html

@@ -0,0 +1,1573 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>CompareMatrix Pro - Intelligent Content Analysis</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <style>
+    :root {
+      --primary: #059669;
+      --secondary: #10b981;
+      --accent: #34d399;
+      --background: #f8fafc;
+      --surface: #ffffff;
+      --text: #1e293b;
+      --text-secondary: #64748b;
+      --border: #e2e8f0;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --error: #ef4444;
+      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+      color: var(--text);
+      line-height: 1.6;
+      min-height: 100vh;
+      padding: 15px;
+      transition: all 0.3s ease;
+    }
+
+    /* RTL Support */
+    [dir="rtl"] {
+      text-align: right;
+    }
+
+    [dir="rtl"] .container {
+      direction: rtl;
+    }
+
+    [dir="rtl"] .api-key-section {
+      margin: 15px 15px 15px auto;
+    }
+
+    [dir="rtl"] .content-grid {
+      direction: rtl;
+    }
+
+    [dir="rtl"] .generate-btn {
+      direction: rtl;
+    }
+
+    /* Language Selection Landing */
+    .language-landing {
+      display: block;
+      max-width: 600px;
+      margin: 50px auto;
+      background: var(--surface);
+      border-radius: 16px;
+      box-shadow: var(--shadow-lg);
+      padding: 40px;
+      text-align: center;
+    }
+
+    .language-landing h1 {
+      font-size: 2.5rem;
+      font-weight: 800;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 15px;
+    }
+
+    .language-landing p {
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      margin-bottom: 30px;
+    }
+
+    .language-selector {
+      margin-bottom: 25px;
+    }
+
+    .language-selector label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--text);
+      font-size: 1.1rem;
+    }
+
+    .language-selector select {
+      width: 100%;
+      padding: 15px 20px;
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      font-size: 1.1rem;
+      font-family: inherit;
+      background: var(--surface);
+      transition: all 0.2s ease;
+      margin-bottom: 20px;
+    }
+
+    .language-selector select:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+    }
+
+    .api-key-landing {
+      margin-bottom: 25px;
+    }
+
+    .api-key-landing label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--text);
+      font-size: 1.1rem;
+    }
+
+    .api-key-landing input {
+      width: 100%;
+      padding: 15px 20px;
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      font-size: 1.1rem;
+      background: var(--surface);
+      transition: all 0.2s ease;
+      font-family: 'Courier New', monospace;
+    }
+
+    .api-key-landing input:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+    }
+
+    .start-btn {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      padding: 18px 40px;
+      border: none;
+      border-radius: 12px;
+      font-size: 1.2rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      width: 100%;
+    }
+
+    .start-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(5, 150, 105, 0.4);
+    }
+
+    .start-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Management Section */
+    .cache-management {
+      background: rgba(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 0.1);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 25px;
+      text-align: center;
+    }
+
+    .cache-management h3 {
+      color: var(--primary);
+      margin-bottom: 15px;
+      font-size: 1.1rem;
+      font-weight: 600;
+    }
+
+    .cache-status-display {
+      background: rgba(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      color: var(--success);
+      padding: 12px 16px;
+      border-radius: 8px;
+      margin-bottom: 15px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    }
+
+    .cache-status-display.no-cache {
+      background: rgba(100, 116, 139, 0.1);
+      border-color: rgba(100, 116, 139, 0.2);
+      color: var(--text-secondary);
+    }
+
+    .clear-cache-btn {
+      background: linear-gradient(135deg, var(--warning) 0%, #f59e0b 100%);
+      color: white;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      font-size: 0.9rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .clear-cache-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 12px -4px rgba(245, 158, 11, 0.4);
+    }
+
+    .clear-cache-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Status Indicator */
+    .cache-status {
+      background: rgba(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      color: var(--success);
+      padding: 8px 12px;
+      border-radius: 6px;
+      margin-bottom: 15px;
+      font-size: 0.85rem;
+      text-align: center;
+      font-weight: 500;
+      display: none;
+    }
+
+    .cache-status.cached {
+      display: block;
+    }
+
+    .cache-status.translating {
+      background: rgba(5, 150, 105, 0.1);
+      border-color: rgba(5, 150, 105, 0.2);
+      color: var(--primary);
+    }
+
+    /* Translation Loading Overlay */
+    .translation-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(5, 150, 105, 0.9);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 10000;
+      color: white;
+      text-align: center;
+    }
+
+    .translation-content {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 40px;
+      border-radius: 16px;
+      backdrop-filter: blur(10px);
+    }
+
+    .translation-spinner {
+      width: 50px;
+      height: 50px;
+      border: 4px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: white;
+      animation: spin 1s ease-in-out infinite;
+      margin: 0 auto 20px;
+    }
+
+    /* Main Application (Hidden Initially) */
+    .main-app {
+      display: none;
+    }
+
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+      background: var(--surface);
+      border-radius: 16px;
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* API Key Section - Static Position Top Left */
+    .api-key-section {
+      background: rgba(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 0.1);
+      border-radius: 8px;
+      padding: 12px;
+      margin: 15px;
+      max-width: 280px;
+    }
+
+    .api-key-section label {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--primary);
+      margin-bottom: 6px;
+      display: block;
+    }
+
+    .api-key-section input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 14px;
+      background: var(--surface);
+      transition: all 0.2s ease;
+      font-family: 'Courier New', monospace;
+    }
+
+    .api-key-section input:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+    }
+
+    /* Language Switcher in Main App */
+    .language-switcher {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    [dir="rtl"] .language-switcher {
+      right: auto;
+      left: 15px;
+    }
+
+    .language-switch-btn {
+      background: rgba(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 0.1);
+      border-radius: 8px;
+      padding: 8px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      color: var(--primary);
+      font-weight: 500;
+    }
+
+    .language-switch-btn:hover {
+      background: rgba(5, 150, 105, 0.1);
+    }
+
+    .mini-clear-cache {
+      background: rgba(245, 158, 11, 0.1);
+      border: 1px solid rgba(245, 158, 11, 0.2);
+      color: var(--warning);
+      padding: 6px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-weight: 500;
+    }
+
+    .mini-clear-cache:hover {
+      background: rgba(245, 158, 11, 0.2);
+    }
+
+    /* Main Content */
+    .main-content {
+      padding: 20px 30px 30px;
+    }
+
+    /* Header */
+    .header {
+      text-align: center;
+      margin-bottom: 25px;
+      padding-bottom: 20px;
+      border-bottom: 2px solid var(--border);
+    }
+
+    .header h1 {
+      font-size: 2.5rem;
+      font-weight: 800;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 8px;
+    }
+
+    .header .subtitle {
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      font-weight: 500;
+    }
+
+    /* Content Input Sections */
+    .content-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      margin-bottom: 25px;
+    }
+
+    .content-section {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow);
+    }
+
+    .content-section:hover {
+      border-color: var(--primary);
+      box-shadow: 0 8px 25px -8px rgba(5, 150, 105, 0.3);
+    }
+
+    .content-section h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .content-section .description {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      margin-bottom: 12px;
+    }
+
+    /* Form Elements */
+    label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: var(--text);
+      font-size: 0.95rem;
+    }
+
+    textarea {
+      width: 100%;
+      padding: 12px 16px;
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      font-size: 1rem;
+      font-family: inherit;
+      background: var(--surface);
+      transition: all 0.2s ease;
+      resize: vertical;
+      min-height: 120px;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+    }
+
+    /* Character Counter */
+    .char-counter {
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+      text-align: right;
+      margin-top: 4px;
+    }
+
+    [dir="rtl"] .char-counter {
+      text-align: left;
+    }
+
+    /* Generate Button */
+    .generate-btn {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      padding: 16px 32px;
+      border: none;
+      border-radius: 12px;
+      font-size: 1.1rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: block;
+      margin: 25px auto;
+      min-width: 250px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .generate-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(5, 150, 105, 0.4);
+    }
+
+    .generate-btn:active {
+      transform: translateY(0);
+    }
+
+    .generate-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Loading Spinner */
+    .spinner {
+      display: none;
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: white;
+      animation: spin 1s ease-in-out infinite;
+      margin-right: 8px;
+    }
+
+    [dir="rtl"] .spinner {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Output Section */
+    .output-section {
+      margin-top: 30px;
+    }
+
+    .output-section h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .output-area {
+      background: var(--surface);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      min-height: 200px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow-x: auto;
+    }
+
+    .output-area:empty::before {
+      content: "Your detailed comparison matrix will appear here...";
+      color: var(--text-secondary);
+      font-style: italic;
+    }
+
+    /* Matrix Table Styling */
+    .output-area table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 0;
+      font-family: inherit;
+    }
+
+    .output-area th,
+    .output-area td {
+      padding: 12px 16px;
+      text-align: left;
+      border: 1px solid var(--border);
+    }
+
+    .output-area th {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      font-weight: 600;
+    }
+
+    .output-area tr:nth-child(even) {
+      background: rgba(5, 150, 105, 0.02);
+    }
+
+    .output-area tr:hover {
+      background: rgba(5, 150, 105, 0.05);
+    }
+
+    /* Error Messages */
+    .error-message {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.2);
+      color: var(--error);
+      padding: 12px 16px;
+      border-radius: 8px;
+      margin: 10px 0;
+      font-size: 0.9rem;
+      display: none;
+    }
+
+    /* Footer */
+    .footer {
+      text-align: center;
+      padding: 20px;
+      background: rgba(5, 150, 105, 0.05);
+      border-top: 1px solid var(--border);
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      body {
+        padding: 10px;
+      }
+
+      .language-landing {
+        margin: 20px auto;
+        padding: 30px 20px;
+      }
+
+      .api-key-section {
+        margin: 10px;
+        max-width: none;
+      }
+
+      .language-switcher {
+        position: relative;
+        top: auto;
+        right: auto;
+        margin-bottom: 15px;
+        justify-content: center;
+      }
+
+      .main-content {
+        padding: 15px 20px 20px;
+      }
+
+      .header h1 {
+        font-size: 2rem;
+      }
+
+      .content-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+      }
+
+      .content-section {
+        padding: 15px;
+      }
+
+      .generate-btn {
+        width: 100%;
+        margin: 20px 0;
+      }
+
+      .output-area {
+        padding: 15px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .language-landing h1 {
+        font-size: 2rem;
+      }
+
+      .header h1 {
+        font-size: 1.8rem;
+      }
+
+      .content-section {
+        padding: 12px;
+      }
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --background: #0f172a;
+        --surface: #1e293b;
+        --text: #f1f5f9;
+        --text-secondary: #94a3b8;
+        --border: #334155;
+      }
+
+      body {
+        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Translation Loading Overlay -->
+  <div class="translation-overlay" id="translationOverlay">
+    <div class="translation-content">
+      <div class="translation-spinner"></div>
+      <h2 id="translationTitle">Translating Interface...</h2>
+      <p id="translationMessage">Please wait while we translate the interface to your selected language.</p>
+    </div>
+  </div>
+
+  <!-- Language Selection Landing Page -->
+  <div class="language-landing" id="languageLanding">
+    <h1 data-translate="app_title">CompareMatrix Pro</h1>
+    <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started.</p>
+    
+    <!-- Cache Status Indicator -->
+    <div class="cache-status" id="cacheStatus">
+      💾 Translations cached - instant loading!
+    </div>
+
+    <!-- Cache Management Section -->
+    <div class="cache-management" id="cacheManagement">
+      <h3 data-translate="cache_management_title">🗂️ Translation Cache Management</h3>
+      <div class="cache-status-display" id="cacheStatusDisplay">
+        <span data-translate="cache_status_checking">Checking cache status...</span>
+      </div>
+      <button class="clear-cache-btn" id="clearCacheBtn" data-translate="clear_cache_button">
+        🗑️ Clear All Cached Translations
+      </button>
+    </div>
+    
+    <div class="language-selector">
+      <label for="languageSelect" data-translate="select_language">🌐 Select Language</label>
+      <select id="languageSelect">
+        <option value="en">🇺🇸 English</option>
+        <option value="es">🇪🇸 Español (Spanish)</option>
+        <option value="fr">🇫🇷 Français (French)</option>
+        <option value="de">🇩🇪 Deutsch (German)</option>
+        <option value="zh">🇨🇳 中文 (Chinese)</option>
+        <option value="ja">🇯🇵 日本語 (Japanese)</option>
+        <option value="ko">🇰🇷 한국어 (Korean)</option>
+        <option value="pt">🇵🇹 Português (Portuguese)</option>
+        <option value="it">🇮🇹 Italiano (Italian)</option>
+        <option value="ar">🇸🇦 العربية (Arabic)</option>
+        <option value="ru">🇷🇺 Русский (Russian)</option>
+        <option value="hi">🇮🇳 हिन्दी (Hindi)</option>
+        <option value="bn">🇧🇩 বাংলা (Bengali)</option>
+        <option value="ur">🇵🇰 اردو (Urdu)</option>
+        <option value="tr">🇹🇷 Türkçe (Turkish)</option>
+        <option value="pl">🇵🇱 Polski (Polish)</option>
+        <option value="nl">🇳🇱 Nederlands (Dutch)</option>
+        <option value="sv">🇸🇪 Svenska (Swedish)</option>
+        <option value="da">🇩🇰 Dansk (Danish)</option>
+        <option value="no">🇳🇴 Norsk (Norwegian)</option>
+        <option value="fi">🇫🇮 Suomi (Finnish)</option>
+        <option value="is">🇮🇸 Íslenska (Icelandic)</option>
+        <option value="cs">🇨🇿 Čeština (Czech)</option>
+        <option value="sk">🇸🇰 Slovenčina (Slovak)</option>
+        <option value="hu">🇭🇺 Magyar (Hungarian)</option>
+        <option value="ro">🇷🇴 Română (Romanian)</option>
+        <option value="bg">🇧🇬 Български (Bulgarian)</option>
+        <option value="hr">🇭🇷 Hrvatski (Croatian)</option>
+        <option value="sr">🇷🇸 Српски (Serbian)</option>
+        <option value="sl">🇸🇮 Slovenščina (Slovenian)</option>
+        <option value="mk">🇲🇰 Македонски (Macedonian)</option>
+        <option value="sq">🇦🇱 Shqip (Albanian)</option>
+        <option value="lv">🇱🇻 Latviešu (Latvian)</option>
+        <option value="lt">🇱🇹 Lietuvių (Lithuanian)</option>
+        <option value="et">🇪🇪 Eesti (Estonian)</option>
+        <option value="mt">🇲🇹 Malti (Maltese)</option>
+        <option value="ga">🇮🇪 Gaeilge (Irish)</option>
+        <option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option>
+        <option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Euskera (Basque)</option>
+        <option value="ca">🏴󠁥󠁳󠁣󠁴󠁿 Català (Catalan)</option>
+        <option value="gl">🏴󠁥󠁳󠁧󠁡󠁿 Galego (Galician)</option>
+        <option value="el">🇬🇷 Ελληνικά (Greek)</option>
+        <option value="he">🇮🇱 עברית (Hebrew)</option>
+        <option value="fa">🇮🇷 فارسی (Persian)</option>
+        <option value="ps">🇦🇫 پښتو (Pashto)</option>
+        <option value="ku">🏴󠁩󠁱󠁫󠁲󠁿 کوردی (Kurdish)</option>
+        <option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option>
+        <option value="kk">🇰🇿 Қазақша (Kazakh)</option>
+        <option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option>
+        <option value="uz">🇺🇿 O'zbek (Uzbek)</option>
+        <option value="tk">🇹🇲 Türkmen (Turkmen)</option>
+        <option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option>
+        <option value="mn">🇲🇳 Монгол (Mongolian)</option>
+        <option value="ka">🇬🇪 ქართული (Georgian)</option>
+        <option value="hy">🇦🇲 Հայերեն (Armenian)</option>
+        <option value="th">🇹🇭 ไทย (Thai)</option>
+        <option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option>
+        <option value="lo">🇱🇦 ລາວ (Lao)</option>
+        <option value="km">🇰🇭 ខ្មែរ (Khmer)</option>
+        <option value="my">🇲🇲 မြန်မာ (Myanmar)</option>
+        <option value="si">🇱🇰 සිංහල (Sinhala)</option>
+        <option value="ta">🇱🇰 தமிழ் (Tamil)</option>
+        <option value="te">🇮🇳 తెలుగు (Telugu)</option>
+        <option value="kn">🇮🇳 ಕನ್ನಡ (Kannada)</option>
+        <option value="ml">🇮🇳 മലയാളം (Malayalam)</option>
+        <option value="gu">🇮🇳 ગુજરાતી (Gujarati)</option>
+        <option value="pa">🇮🇳 ਪੰਜਾਬੀ (Punjabi)</option>
+        <option value="or">🇮🇳 ଓଡ଼ିଆ (Odia)</option>
+        <option value="as">🇮🇳 অসমীয়া (Assamese)</option>
+        <option value="ne">🇳🇵 नेपाली (Nepali)</option>
+        <option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option>
+        <option value="bo">🏔️ བོད་ཡིག (Tibetan)</option>
+        <option value="id">🇮🇩 Bahasa Indonesia</option>
+        <option value="ms">🇲🇾 Bahasa Melayu (Malay)</option>
+        <option value="tl">🇵🇭 Filipino (Tagalog)</option>
+        <option value="ceb">🇵🇭 Cebuano</option>
+        <option value="haw">🏝️ ʻŌlelo Hawaiʻi (Hawaiian)</option>
+        <option value="mi">🇳🇿 Te Reo Māori (Maori)</option>
+        <option value="sm">🇼🇸 Gagana Samoa (Samoan)</option>
+        <option value="to">🇹🇴 Lea Fakatonga (Tongan)</option>
+        <option value="fj">🇫🇯 Na Vosa Vakaviti (Fijian)</option>
+        <option value="mg">🇲🇬 Malagasy</option>
+        <option value="sw">🇰🇪 Kiswahili (Swahili)</option>
+        <option value="zu">🇿🇦 isiZulu (Zulu)</option>
+        <option value="xh">🇿🇦 isiXhosa (Xhosa)</option>
+        <option value="af">🇿🇦 Afrikaans</option>
+        <option value="st">🇱🇸 Sesotho (Southern Sotho)</option>
+        <option value="tn">🇧🇼 Setswana (Tswana)</option>
+        <option value="ss">🇸🇿 siSwati (Swati)</option>
+        <option value="ve">🇿🇦 Tshivenḓa (Venda)</option>
+        <option value="ts">🇿🇦 Xitsonga (Tsonga)</option>
+        <option value="nr">🇿🇦 isiNdebele (Southern Ndebele)</option>
+        <option value="am">🇪🇹 አማርኛ (Amharic)</option>
+        <option value="ti">🇪🇷 ትግርኛ (Tigrinya)</option>
+        <option value="om">🇪🇹 Afaan Oromoo (Oromo)</option>
+        <option value="so">🇸🇴 Soomaali (Somali)</option>
+        <option value="ha">🇳🇬 Hausa</option>
+        <option value="yo">🇳🇬 Yorùbá (Yoruba)</option>
+        <option value="ig">🇳🇬 Igbo</option>
+        <option value="ff">🇸🇳 Fulfulde (Fulani)</option>
+        <option value="wo">🇸🇳 Wolof</option>
+        <option value="bm">🇲🇱 Bamanankan (Bambara)</option>
+        <option value="rn">🇧🇮 Kirundi (Rundi)</option>
+        <option value="rw">🇷🇼 Kinyarwanda (Rwanda)</option>
+        <option value="lg">🇺🇬 Luganda</option>
+        <option value="ny">🇲🇼 Chichewa (Nyanja)</option>
+        <option value="sn">🇿🇼 chiShona (Shona)</option>
+        <option value="nd">🇿🇼 isiNdebele (Northern Ndebele)</option>
+      </select>
+    </div>
+
+    <div class="api-key-landing">
+      <label for="apiKeyLanding" data-translate="api_key_label">🔑 OpenAI API Key</label>
+      <input type="password" id="apiKeyLanding" placeholder="Enter your OpenAI API key" data-translate-placeholder="api_key_placeholder">
+    </div>
+
+    <button class="start-btn" id="startBtn" data-translate="start_button">🚀 Start Content Analysis</button>
+  </div>
+
+  <!-- Main Application -->
+  <div class="main-app" id="mainApp">
+    <div class="container">
+      <!-- Language Switcher -->
+      <div class="language-switcher" id="languageSwitcher">
+        <div class="language-switch-btn" onclick="showLanguageLanding()">
+          <span data-translate="change_language">🌐 Change Language</span>
+        </div>
+        <div class="mini-clear-cache" onclick="clearAllTranslationCache()" title="Clear translation cache">
+          <span data-translate="clear_cache_mini">🗑️ Clear Cache</span>
+        </div>
+      </div>
+
+      <!-- API Key Section - Static Position Top Left -->
+      <div class="api-key-section">
+        <label for="apiKey" data-translate="api_key_short">🔑 API Key</label>
+        <input type="password" id="apiKey" data-translate-placeholder="api_key_placeholder" autocomplete="off">
+      </div>
+
+      <div class="main-content">
+        <!-- Header -->
+        <div class="header">
+          <h1 data-translate="app_title">CompareMatrix Pro</h1>
+          <p class="subtitle" data-translate="app_subtitle">Intelligent Content Analysis & Comparison Platform</p>
+        </div>
+
+        <!-- Content Input Grid -->
+        <div class="content-grid">
+          <div class="content-section">
+            <h3 data-translate="content_a_title">📄 Content A</h3>
+            <p class="description" data-translate="content_a_desc">Enter the first piece of content for comparison</p>
+            <textarea id="content1" data-translate-placeholder="content_a_placeholder" required></textarea>
+            <div class="char-counter" id="counter1">0 <span data-translate="characters">characters</span></div>
+          </div>
+
+          <div class="content-section">
+            <h3 data-translate="content_b_title">📄 Content B</h3>
+            <p class="description" data-translate="content_b_desc">Enter the second piece of content for comparison</p>
+            <textarea id="content2" data-translate-placeholder="content_b_placeholder" required></textarea>
+            <div class="char-counter" id="counter2">0 <span data-translate="characters">characters</span></div>
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div class="error-message" id="errorMessage"></div>
+
+        <!-- Generate Button -->
+        <button class="generate-btn" id="generateMatrixBtn">
+          <span class="spinner" id="spinner"></span>
+          <span id="buttonText" data-translate="generate_button">🔍 Generate Intelligent Comparison Matrix</span>
+        </button>
+
+        <!-- Output Section -->
+        <div class="output-section">
+          <h2 data-translate="output_title">📊 Comparison Matrix Results</h2>
+          <div class="output-area" id="matrixOutput"></div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="footer">
+        Created by Shift Mind AI Labs
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // RTL languages list
+    const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku'];
+
+    // Current language and API key
+    let currentLanguage = 'en';
+    let currentApiKey = '';
+
+    // Language names mapping
+    const languageNames = {
+      en: 'English', es: 'Spanish', fr: 'French', de: 'German', zh: 'Chinese',
+      ja: 'Japanese', ko: 'Korean', pt: 'Portuguese', it: 'Italian', ar: 'Arabic',
+      ru: 'Russian', hi: 'Hindi', bn: 'Bengali', ur: 'Urdu', tr: 'Turkish',
+      pl: 'Polish', nl: 'Dutch', sv: 'Swedish', da: 'Danish', no: 'Norwegian',
+      fi: 'Finnish', is: 'Icelandic', cs: 'Czech', sk: 'Slovak', hu: 'Hungarian',
+      ro: 'Romanian', bg: 'Bulgarian', hr: 'Croatian', sr: 'Serbian', sl: 'Slovenian',
+      mk: 'Macedonian', sq: 'Albanian', lv: 'Latvian', lt: 'Lithuanian', et: 'Estonian',
+      mt: 'Maltese', ga: 'Irish', cy: 'Welsh', eu: 'Basque', ca: 'Catalan',
+      gl: 'Galician', el: 'Greek', he: 'Hebrew', fa: 'Persian', ps: 'Pashto',
+      ku: 'Kurdish', az: 'Azerbaijani', kk: 'Kazakh', ky: 'Kyrgyz', uz: 'Uzbek',
+      tk: 'Turkmen', tg: 'Tajik', mn: 'Mongolian', ka: 'Georgian', hy: 'Armenian',
+      th: 'Thai', vi: 'Vietnamese', lo: 'Lao', km: 'Khmer', my: 'Myanmar',
+      si: 'Sinhala', ta: 'Tamil', te: 'Telugu', kn: 'Kannada', ml: 'Malayalam',
+      gu: 'Gujarati', pa: 'Punjabi', or: 'Odia', as: 'Assamese', ne: 'Nepali',
+      dz: 'Dzongkha', bo: 'Tibetan', id: 'Indonesian', ms: 'Malay', tl: 'Filipino',
+      ceb: 'Cebuano', haw: 'Hawaiian', mi: 'Maori', sm: 'Samoan', to: 'Tongan',
+      fj: 'Fijian', mg: 'Malagasy', sw: 'Swahili', zu: 'Zulu', xh: 'Xhosa',
+      af: 'Afrikaans', st: 'Southern Sotho', tn: 'Tswana', ss: 'Swati', ve: 'Venda',
+      ts: 'Tsonga', nr: 'Southern Ndebele', am: 'Amharic', ti: 'Tigrinya', om: 'Oromo',
+      so: 'Somali', ha: 'Hausa', yo: 'Yoruba', ig: 'Igbo', ff: 'Fulani',
+      wo: 'Wolof', bm: 'Bambara', rn: 'Rundi', rw: 'Rwanda', lg: 'Luganda',
+      ny: 'Chichewa', sn: 'Shona', nd: 'Northern Ndebele'
+    };
+
+    // Translation cache management
+    const CACHE_PREFIX = 'comparematrix_translations_';
+    const CACHE_VERSION = '1.0';
+
+    // Check if translations are cached for a language
+    function isLanguageCached(language) {
+      const cacheKey = CACHE_PREFIX + language;
+      const cached = localStorage.getItem(cacheKey);
+      return cached !== null;
+    }
+
+    // Save translations to cache
+    function saveTranslationsToCache(language, translations) {
+      const cacheKey = CACHE_PREFIX + language;
+      const cacheData = {
+        version: CACHE_VERSION,
+        timestamp: Date.now(),
+        translations: translations
+      };
+      localStorage.setItem(cacheKey, JSON.stringify(cacheData));
+      console.log(`Translations cached for ${language}`);
+    }
+
+    // Load translations from cache
+    function loadTranslationsFromCache(language) {
+      const cacheKey = CACHE_PREFIX + language;
+      const cached = localStorage.getItem(cacheKey);
+      
+      if (cached) {
+        try {
+          const cacheData = JSON.parse(cached);
+          if (cacheData.version === CACHE_VERSION) {
+            console.log(`Translations loaded from cache for ${language}`);
+            return cacheData.translations;
+          }
+        } catch (error) {
+          console.error('Error parsing cached translations:', error);
+        }
+      }
+      return null;
+    }
+
+    // Get all cached languages
+    function getCachedLanguages() {
+      const cachedLanguages = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(CACHE_PREFIX)) {
+          const language = key.replace(CACHE_PREFIX, '');
+          cachedLanguages.push(language);
+        }
+      }
+      return cachedLanguages;
+    }
+
+    // Clear all translation cache
+    function clearAllTranslationCache() {
+      const cachedLanguages = getCachedLanguages();
+      
+      if (cachedLanguages.length === 0) {
+        alert('No cached translations to clear.');
+        return;
+      }
+
+      const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
+      const confirmMessage = `Are you sure you want to clear all cached translations?\n\nCached languages: ${languageList}\n\nThis will require re-downloading translations when switching languages.`;
+      
+      if (confirm(confirmMessage)) {
+        // Clear all translation caches
+        cachedLanguages.forEach(language => {
+          const cacheKey = CACHE_PREFIX + language;
+          localStorage.removeItem(cacheKey);
+        });
+        
+        // Update cache status
+        updateCacheStatus(currentLanguage);
+        updateCacheStatusDisplay();
+        
+        alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`);
+        
+        // Ask if user wants to reload current language translations
+        if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) {
+          if (confirm('Would you like to reload the current language translations?')) {
+            applyLanguage(currentLanguage);
+          }
+        }
+      }
+    }
+
+    // Update cache status indicator
+    function updateCacheStatus(language) {
+      const cacheStatus = document.getElementById('cacheStatus');
+      const isCached = isLanguageCached(language);
+      
+      if (language === 'en') {
+        cacheStatus.classList.remove('cached', 'translating');
+        return;
+      }
+      
+      if (isCached) {
+        cacheStatus.textContent = '💾 Translations cached - instant loading!';
+        cacheStatus.classList.add('cached');
+        cacheStatus.classList.remove('translating');
+      } else {
+        cacheStatus.textContent = '🔄 First time translation - will be cached for future use';
+        cacheStatus.classList.add('translating');
+        cacheStatus.classList.remove('cached');
+      }
+    }
+
+    // Update cache status display in management section
+    function updateCacheStatusDisplay() {
+      const cacheStatusDisplay = document.getElementById('cacheStatusDisplay');
+      const clearCacheBtn = document.getElementById('clearCacheBtn');
+      const cachedLanguages = getCachedLanguages();
+      
+      if (cachedLanguages.length === 0) {
+        cacheStatusDisplay.textContent = '📭 No cached translations';
+        cacheStatusDisplay.className = 'cache-status-display no-cache';
+        clearCacheBtn.disabled = true;
+      } else {
+        const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
+        cacheStatusDisplay.textContent = `💾 ${cachedLanguages.length} language(s) cached: ${languageList}`;
+        cacheStatusDisplay.className = 'cache-status-display';
+        clearCacheBtn.disabled = false;
+      }
+    }
+
+    // Initialize the application
+    function initializeApp() {
+      // Load saved language and API key
+      const savedLanguage = localStorage.getItem('comparematrix_language') || 'en';
+      const savedApiKey = localStorage.getItem('comparematrix_api_key') || '';
+      
+      currentLanguage = savedLanguage;
+      currentApiKey = savedApiKey;
+      
+      // Set language selector
+      document.getElementById('languageSelect').value = currentLanguage;
+      document.getElementById('apiKeyLanding').value = currentApiKey;
+      
+      // Apply direction for current language
+      applyDirection(currentLanguage);
+      
+      // Update cache status
+      updateCacheStatus(currentLanguage);
+      updateCacheStatusDisplay();
+      
+      // Show appropriate screen
+      if (currentApiKey && currentLanguage) {
+        showMainApp();
+      } else {
+        showLanguageLanding();
+      }
+    }
+
+    // Apply language direction
+    function applyDirection(language) {
+      currentLanguage = language;
+      
+      // Set document language and direction
+      document.documentElement.lang = language;
+      document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr';
+      
+      // Save language preference
+      localStorage.setItem('comparematrix_language', language);
+      
+      // Update cache status
+      updateCacheStatus(language);
+    }
+
+    // API call function for translation
+    async function translateText(text, targetLanguage) {
+      if (!currentApiKey) {
+        throw new Error('API key is required for translation');
+      }
+
+      const languageName = languageNames[targetLanguage] || 'English';
+      
+      const prompt = `Translate the following text to ${languageName}. Provide ONLY the exact translation without any explanations, additional information, or formatting:
+
+"${text}"`;
+
+      const payload = {
+        model: "gpt-4o-mini",
+        messages: [{ role: "user", content: prompt }],
+        max_tokens: 500,
+        temperature: 0.1
+      };
+
+      const response = await fetch("https://api.openai.com/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${currentApiKey}`
+        },
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error?.message || "Translation API request failed");
+      }
+
+      const data = await response.json();
+      return data.choices[0].message.content.trim();
+    }
+
+    // Apply cached translations to UI
+    function applyCachedTranslations(translations) {
+      // Apply text translations
+      Object.keys(translations.texts).forEach(originalText => {
+        const translation = translations.texts[originalText];
+        const elements = document.querySelectorAll(`[data-translate]`);
+        
+        elements.forEach(element => {
+          const originalElementText = element.getAttribute('data-original-text') || element.textContent;
+          if (originalElementText === originalText) {
+            element.textContent = translation;
+          }
+        });
+      });
+
+      // Apply placeholder translations
+      Object.keys(translations.placeholders).forEach(originalPlaceholder => {
+        const translation = translations.placeholders[originalPlaceholder];
+        const elements = document.querySelectorAll(`[data-translate-placeholder]`);
+        
+        elements.forEach(element => {
+          const originalElementPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
+          if (originalElementPlaceholder === originalPlaceholder) {
+            element.placeholder = translation;
+          }
+        });
+      });
+    }
+
+    // Translate all UI elements
+    async function translateInterface(targetLanguage) {
+      if (targetLanguage === 'en') {
+        // No translation needed for English
+        return;
+      }
+
+      // Check if translations are cached
+      const cachedTranslations = loadTranslationsFromCache(targetLanguage);
+      if (cachedTranslations) {
+        // Use cached translations
+        console.log('Using cached translations for', targetLanguage);
+        applyCachedTranslations(cachedTranslations);
+        return;
+      }
+
+      // Need to translate via API
+      showTranslationOverlay();
+
+      try {
+        // Get all elements with data-translate attribute
+        const elements = document.querySelectorAll('[data-translate]');
+        const placeholderElements = document.querySelectorAll('[data-translate-placeholder]');
+        
+        // Collect all texts to translate
+        const textsToTranslate = [];
+        const placeholdersToTranslate = [];
+        const elementMap = new Map();
+        
+        elements.forEach(element => {
+          const originalText = element.getAttribute('data-original-text') || element.textContent;
+          if (!element.getAttribute('data-original-text')) {
+            element.setAttribute('data-original-text', originalText);
+          }
+          textsToTranslate.push(originalText);
+          elementMap.set(originalText, element);
+        });
+
+        placeholderElements.forEach(element => {
+          const originalPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
+          if (!element.getAttribute('data-original-placeholder')) {
+            element.setAttribute('data-original-placeholder', originalPlaceholder);
+          }
+          placeholdersToTranslate.push(originalPlaceholder);
+          elementMap.set(originalPlaceholder, element);
+        });
+
+        // Prepare cache structure
+        const translationsCache = {
+          texts: {},
+          placeholders: {}
+        };
+
+        // Translate texts in batches
+        const batchSize = 10;
+        const allTexts = [...textsToTranslate, ...placeholdersToTranslate];
+        
+        for (let i = 0; i < allTexts.length; i += batchSize) {
+          const batch = allTexts.slice(i, i + batchSize);
+          
+          // Update progress
+          updateTranslationProgress(i, allTexts.length);
+          
+          // Translate batch
+          const translations = await Promise.all(
+            batch.map(text => translateText(text, targetLanguage))
+          );
+          
+          // Apply translations and cache them
+          batch.forEach((originalText, index) => {
+            const element = elementMap.get(originalText);
+            const translation = translations[index];
+            
+            if (element.hasAttribute('data-translate')) {
+              element.textContent = translation;
+              translationsCache.texts[originalText] = translation;
+            } else if (element.hasAttribute('data-translate-placeholder')) {
+              element.placeholder = translation;
+              translationsCache.placeholders[originalText] = translation;
+            }
+          });
+        }
+
+        // Save translations to cache
+        saveTranslationsToCache(targetLanguage, translationsCache);
+        
+        // Update cache status
+        updateCacheStatus(targetLanguage);
+        updateCacheStatusDisplay();
+
+      } catch (error) {
+        console.error('Translation error:', error);
+        showError('Translation failed: ' + error.message);
+      } finally {
+        hideTranslationOverlay();
+      }
+    }
+
+    // Show translation overlay
+    function showTranslationOverlay() {
+      document.getElementById('translationOverlay').style.display = 'flex';
+    }
+
+    // Hide translation overlay
+    function hideTranslationOverlay() {
+      document.getElementById('translationOverlay').style.display = 'none';
+    }
+
+    // Update translation progress
+    function updateTranslationProgress(current, total) {
+      const percentage = Math.round((current / total) * 100);
+      document.getElementById('translationMessage').textContent = 
+        `Translating interface... ${percentage}% complete (will be cached for future use)`;
+    }
+
+    // Apply language with API translation or cache
+    async function applyLanguage(language) {
+      applyDirection(language);
+      
+      if (language !== 'en') {
+        await translateInterface(language);
+      }
+    }
+
+    // Show language landing page
+    function showLanguageLanding() {
+      document.getElementById('languageLanding').style.display = 'block';
+      document.getElementById('mainApp').style.display = 'none';
+    }
+
+    // Show main application
+    function showMainApp() {
+      document.getElementById('languageLanding').style.display = 'none';
+      document.getElementById('mainApp').style.display = 'block';
+      
+      // Set API key in main app
+      document.getElementById('apiKey').value = currentApiKey;
+    }
+
+    // Start button click handler
+    document.getElementById('startBtn').addEventListener('click', async function() {
+      const selectedLanguage = document.getElementById('languageSelect').value;
+      const apiKey = document.getElementById('apiKeyLanding').value.trim();
+      
+      if (!apiKey) {
+        alert('Please enter your OpenAI API key');
+        return;
+      }
+      
+      currentLanguage = selectedLanguage;
+      currentApiKey = apiKey;
+      
+      // Save API key
+      localStorage.setItem('comparematrix_api_key', apiKey);
+      
+      // Apply language with translation (cached or API)
+      await applyLanguage(selectedLanguage);
+      
+      // Show main app
+      showMainApp();
+    });
+
+    // Language selector change handler
+    document.getElementById('languageSelect').addEventListener('change', async function() {
+      const selectedLanguage = this.value;
+      updateCacheStatus(selectedLanguage);
+      
+      if (currentApiKey) {
+        await applyLanguage(selectedLanguage);
+      } else {
+        applyDirection(selectedLanguage);
+      }
+    });
+
+    // Clear cache button handler
+    document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache);
+
+    // Character counters
+    function updateCharCounter(textareaId, counterId) {
+      const textarea = document.getElementById(textareaId);
+      const counter = document.getElementById(counterId);
+      
+      textarea.addEventListener('input', function() {
+        const count = this.value.length;
+        const charactersText = counter.querySelector('[data-translate="characters"]')?.textContent || 'characters';
+        counter.innerHTML = `${count} <span data-translate="characters">${charactersText}</span>`;
+        
+        if (count > 5000) {
+          counter.style.color = 'var(--warning)';
+        } else {
+          counter.style.color = 'var(--text-secondary)';
+        }
+      });
+    }
+
+    updateCharCounter('content1', 'counter1');
+    updateCharCounter('content2', 'counter2');
+
+    // Error handling
+    function showError(message) {
+      const errorDiv = document.getElementById('errorMessage');
+      errorDiv.textContent = message;
+      errorDiv.style.display = 'block';
+      setTimeout(() => {
+        errorDiv.style.display = 'none';
+      }, 5000);
+    }
+
+    // API call function for content analysis
+    async function callAPI(prompt) {
+      const apiKey = currentApiKey;
+      
+      if (!apiKey) {
+        throw new Error('Please enter your OpenAI API key');
+      }
+
+      const payload = {
+        model: "gpt-4o-mini",
+        messages: [{ role: "user", content: prompt }],
+        max_tokens: 3000,
+        temperature: 0.3
+      };
+
+      const response = await fetch("https://api.openai.com/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error?.message || "API request failed");
+      }
+
+      const data = await response.json();
+      return data.choices[0].message.content;
+    }
+
+    // Build comparison matrix prompt
+    function buildComparisonPrompt() {
+      const content1 = document.getElementById('content1').value.trim();
+      const content2 = document.getElementById('content2').value.trim();
+      const languageName = languageNames[currentLanguage] || 'English';
+
+      return `You are an expert content analyst tasked with creating a comprehensive comparison matrix between two pieces of content. Please analyze the following content inputs and generate a detailed, professional comparison matrix in ${languageName} language.
+
+**Content A:**
+${content1}
+
+**Content B:**
+${content2}
+
+**Instructions:**
+1. Create a complete HTML table with inline CSS styling that looks professional and appealing
+2. The table should have clear headers: "Comparison Aspect", "Content A", "Content B", and "Analysis Notes"
+3. Include at least 8-12 comparison aspects such as:
+   - Main Theme/Purpose
+   - Target Audience
+   - Tone & Style
+   - Key Arguments/Points
+   - Evidence/Support
+   - Structure & Organization
+   - Strengths
+   - Weaknesses
+   - Unique Features
+   - Practical Applications
+   - Overall Quality
+   - Recommendations
+
+4. Use professional styling with:
+   - Clean borders and spacing
+   - Alternating row colors for readability
+   - Header styling with background colors
+   - Responsive design considerations
+
+5. Provide detailed, insightful analysis in each cell
+6. Do not include any markdown symbols (*, #, etc.) - only clean HTML
+7. Ensure the table is complete and self-contained
+8. Write ENTIRELY in ${languageName} language
+
+Generate only the HTML table with inline CSS - no additional text or explanations.`;
+    }
+
+    // Validation function
+    function validateInputs() {
+      const content1 = document.getElementById('content1').value.trim();
+      const content2 = document.getElementById('content2').value.trim();
+
+      if (!content1) {
+        document.getElementById('content1').focus();
+        throw new Error('Please enter Content A for comparison');
+      }
+
+      if (!content2) {
+        document.getElementById('content2').focus();
+        throw new Error('Please enter Content B for comparison');
+      }
+
+      if (content1.length < 50) {
+        document.getElementById('content1').focus();
+        throw new Error('Content A should be at least 50 characters for meaningful comparison');
+      }
+
+      if (content2.length < 50) {
+        document.getElementById('content2').focus();
+        throw new Error('Content B should be at least 50 characters for meaningful comparison');
+      }
+    }
+
+    // Generate comparison matrix
+    document.getElementById('generateMatrixBtn').addEventListener('click', async function() {
+      const button = this;
+      const buttonText = document.getElementById('buttonText');
+      const spinner = document.getElementById('spinner');
+      const outputArea = document.getElementById('matrixOutput');
+
+      try {
+        // Validate inputs
+        validateInputs();
+
+        // Update button state
+        button.disabled = true;
+        spinner.style.display = 'inline-block';
+        buttonText.textContent = 'Analyzing Content...';
+        
+        // Clear previous output
+        outputArea.innerHTML = '';
+        
+        // Build prompt and call API
+        const prompt = buildComparisonPrompt();
+        const result = await callAPI(prompt);
+        
+        // Display result
+        outputArea.innerHTML = result;
+        
+      } catch (error) {
+        showError(error.message);
+        outputArea.innerHTML = '';
+      } finally {
+        // Reset button state
+        button.disabled = false;
+        spinner.style.display = 'none';
+        buttonText.textContent = '🔍 Generate Intelligent Comparison Matrix';
+      }
+    });
+
+    // Keyboard shortcut for generation
+    document.addEventListener('keydown', function(e) {
+      if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        document.getElementById('generateMatrixBtn').click();
+      }
+    });
+
+    // API key sync between landing and main app
+    document.getElementById('apiKeyLanding').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('comparematrix_api_key', this.value);
+      document.getElementById('apiKey').value = this.value;
+    });
+
+    document.getElementById('apiKey').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('comparematrix_api_key', this.value);
+      document.getElementById('apiKeyLanding').value = this.value;
+    });
+
+    // Initialize the application when page loads
+    document.addEventListener('DOMContentLoaded', initializeApp);
+  </script>
+</body>
+</html>
+

📘 Educator & Student Guide Compare.txt

@@ -0,0 +1,76 @@
+📘 Educator & Student Guide: CompareMatrix Pro
+1. Purpose & Impact
+CompareMatrix Pro empowers learners and teachers to critically analyze any two pieces of content—from essays to business documents—through a detailed, multi-aspect matrix. Output is visually rich, professional, and instantly available in 90+ languages.
+
+2. Step-by-Step Instructions
+A. Setup
+Open the tool (locally or via Hugging Face Space).
+
+Select your preferred language (RTL/LTR supported).
+
+Enter your OpenAI API key (used only in your browser).
+
+B. Input Content
+Paste/type Content A and Content B (minimum 50 characters each for robust analysis).
+
+For best results, use full essays, reports, student work, or project documents.
+
+C. Generate Comparison Matrix
+Click “Generate Intelligent Comparison Matrix”
+(or press Ctrl+Enter for quick access).
+
+The tool will:
+
+Build a professional HTML table (no markdown, no extra code).
+
+Analyze 8–12 aspects: Theme, Purpose, Audience, Tone, Arguments, Evidence, Strengths, Weaknesses, Structure, Applications, Recommendations, Overall Quality, and more.
+
+Output is styled for readability (colors, headers, alternating rows, etc.).
+
+D. Review, Copy, and Share
+Read the matrix directly in the browser.
+
+Copy/paste into documents, LMS, or reports as HTML (retains full styling).
+
+Switch UI/output language for instant bilingual analysis.
+
+3. For Educators: Lesson Ideas
+Model Analysis: Compare student vs. model answers, or two student drafts.
+
+Peer Review: Have students use the tool to compare and critique each other's work.
+
+Source Evaluation: Analyze two news articles, essays, or scientific abstracts.
+
+Differentiation: Output can be instantly translated, supporting all learners.
+
+Professional Use: PD workshops—compare lesson plans, policies, or feedback letters.
+
+4. For Students: Self-Improvement Tasks
+Draft Comparison: Compare your first and final drafts for writing growth.
+
+Research: Analyze two sources for bias, coverage, or reliability.
+
+Group Work: Use as a consensus-building tool for project writing.
+
+Bilingual Analysis: See strengths and gaps in both your languages.
+
+5. Best Practices & Tips
+Be detailed: The more complete your inputs, the more robust the matrix.
+
+Use for all content types: Essays, code explanations, technical docs, reports, letters, or presentations.
+
+Leverage the multilingual UI: Great for ELLs, IB, or international classrooms.
+
+Privacy first: All data is processed in-browser; nothing leaves your device.
+
+6. Troubleshooting & Support
+If output is empty or short, increase input length/detail.
+
+API errors? Double-check your OpenAI API key and usage limits.
+
+Translation slow? First use in a language may take time (caches for next time).
+
+For help or new features: info@shiftmind.io | www.shiftmind.io
+
+With CompareMatrix Pro, everyone can become a skilled content analyst—securely, accessibly, and in any language.
+