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,89 @@
+---
+title: "🐟 CauseMap Pro – Advanced Root Cause Analysis"
+emoji: "🎯"
+colorFrom: "purple"
+colorTo: "red"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 🐟 CauseMap Pro – Advanced Root Cause Analysis  
+**Developed by Shift Mind AI Labs**
+
+CauseMap Pro is an open-source, browser-based tool for advanced root cause analysis using the fishbone (Ishikawa) methodology. Designed for professionals, educators, and students, it enables comprehensive, multilingual analysis of problems in quality, operations, service, learning, and more—supported by AI-powered, context-aware guidance.
+
+---
+
+## 🚀 Features
+
+- **Fishbone Diagram Analysis**: Input any problem or issue and generate a complete, structured fishbone analysis with root causes and actionable solutions.
+- **Six Major Cause Categories**: Analyze People, Process, Equipment, Materials, Environment, and Measurement factors in detail.
+- **Multilingual Support**: Instantly translate the full interface and outputs into 80+ languages.
+- **AI-Powered Guidance**: Enter your OpenAI API key to unlock detailed, tailored analysis and professional recommendations.
+- **Professional Formatting**: Output is clean HTML with inline CSS—ready for reports, presentations, and portfolios.
+- **Privacy-First**: All processing and keys stay in your browser. No logins, no data collection.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the app** in your browser (no installation or account required).
+2. **Select your language** (80+ supported, instantly translated with your API key).
+3. **Enter your OpenAI API key** (never leaves your device; needed for AI features).
+4. **Describe your problem or issue**—be as specific and detailed as possible.
+5. **Click “Generate Fishbone Analysis”** to receive a professional root cause analysis covering all fishbone diagram categories.
+6. **Review or copy the output** for reports, meetings, or improvement projects.
+7. **Clear your translation cache** at any time for privacy and updated translations.
+
+---
+
+## 👩‍🏫 For Educators: How It Supports Teaching
+
+- **Scaffolded Root Cause Analysis**: Guides students through systematic problem-solving in science, engineering, business, or everyday contexts.
+- **Multilingual Accessibility**: Use in any language classroom, bilingual environment, or international program.
+- **Inquiry & PBL**: Integrate in project-based learning, inquiry cycles, or quality improvement projects.
+- **Portfolio Evidence**: Output is ready for digital portfolios, assessment, or collaborative review.
+
+---
+
+## 👨‍🎓 For Students: Benefits & Outcomes
+
+- **Real-World Critical Thinking**: Practice structured analysis of real problems from school, work, or life.
+- **Collaboration**: Work in teams to build shared understanding and co-create solutions.
+- **Practical Application**: Use in competitions, innovation challenges, or community projects.
+- **Ownership & Reflection**: Develop agency as a problem-solver—see your impact clearly.
+
+---
+
+## 🔐 Data Privacy
+
+- Your API key and analysis data are stored only on your device (browser local storage).
+- No user data 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 and practical innovation.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Pull requests, feature suggestions, and collaborations welcome!  
+For school pilots, consulting, or research: **info@shiftmind.io**
+
+---
+
+*Empowering every learner and professional to solve problems at the root.*

index.html

@@ -0,0 +1,1524 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CauseMap Pro - Advanced Root Cause Analysis</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <style>
+    :root {
+      --primary: #ea580c;
+      --secondary: #f97316;
+      --accent: #fb923c;
+      --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;
+    }
+
+    /* RTL Support */
+    [dir="rtl"] {
+      text-align: right;
+    }
+
+    [dir="rtl"] .api-key-section {
+      margin: 15px 15px 15px auto;
+    }
+
+    [dir="rtl"] .header h1,
+    [dir="rtl"] .header .subtitle,
+    [dir="rtl"] .header .description {
+      text-align: center;
+    }
+
+    [dir="rtl"] .char-counter {
+      text-align: left;
+    }
+
+    /* Landing Page Styles */
+    .landing-page {
+      max-width: 800px;
+      margin: 0 auto;
+      background: var(--surface);
+      border-radius: 16px;
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+      text-align: center;
+      padding: 40px;
+    }
+
+    .landing-header h1 {
+      font-size: 3rem;
+      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: 12px;
+    }
+
+    .landing-header .subtitle {
+      font-size: 1.3rem;
+      color: var(--text-secondary);
+      font-weight: 500;
+      margin-bottom: 30px;
+    }
+
+    .language-selection {
+      background: rgba(234, 88, 12, 0.05);
+      border: 1px solid rgba(234, 88, 12, 0.1);
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+    }
+
+    .language-selection h3 {
+      color: var(--primary);
+      font-size: 1.4rem;
+      font-weight: 700;
+      margin-bottom: 20px;
+    }
+
+    .language-dropdown {
+      width: 100%;
+      max-width: 400px;
+      padding: 15px 20px;
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      font-size: 1.1rem;
+      background: var(--surface);
+      margin: 0 auto 20px;
+      display: block;
+    }
+
+    .api-key-input {
+      background: rgba(234, 88, 12, 0.05);
+      border: 1px solid rgba(234, 88, 12, 0.1);
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+    }
+
+    .api-key-input h3 {
+      color: var(--primary);
+      font-size: 1.4rem;
+      font-weight: 700;
+      margin-bottom: 20px;
+    }
+
+    .api-input-field {
+      width: 100%;
+      max-width: 400px;
+      padding: 15px 20px;
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      font-size: 1.1rem;
+      background: var(--surface);
+      margin: 0 auto;
+      display: block;
+      font-family: 'Courier New', monospace;
+    }
+
+    .start-button {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      padding: 18px 40px;
+      border: none;
+      border-radius: 12px;
+      font-size: 1.3rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      min-width: 200px;
+    }
+
+    .start-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(234, 88, 12, 0.4);
+    }
+
+    .start-button:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Clear Cache Button */
+    .clear-cache-button {
+      background: linear-gradient(135deg, var(--warning) 0%, #f59e0b 100%);
+      color: white;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      margin-top: 20px;
+      min-width: 180px;
+    }
+
+    .clear-cache-button:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 8px 16px -4px rgba(245, 158, 11, 0.4);
+    }
+
+    .clear-cache-button:active {
+      transform: translateY(0);
+    }
+
+    .cache-info {
+      background: rgba(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      border-radius: 8px;
+      padding: 15px;
+      margin-top: 20px;
+      font-size: 0.9rem;
+      color: var(--success);
+    }
+
+    .cache-info.no-cache {
+      background: rgba(156, 163, 175, 0.1);
+      border: 1px solid rgba(156, 163, 175, 0.2);
+      color: var(--text-secondary);
+    }
+
+    /* Translation Loading Overlay */
+    .translation-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 10000;
+      color: white;
+      text-align: center;
+    }
+
+    .translation-content {
+      background: var(--surface);
+      color: var(--text);
+      padding: 40px;
+      border-radius: 16px;
+      max-width: 400px;
+      width: 90%;
+    }
+
+    .translation-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid var(--border);
+      border-radius: 50%;
+      border-top-color: var(--primary);
+      animation: spin 1s ease-in-out infinite;
+      margin: 0 auto 20px;
+    }
+
+    .translation-progress {
+      background: var(--border);
+      border-radius: 10px;
+      height: 8px;
+      margin: 20px 0;
+      overflow: hidden;
+    }
+
+    .translation-progress-bar {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      height: 100%;
+      width: 0%;
+      transition: width 0.3s ease;
+    }
+
+    /* Main App Styles */
+    .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;
+    }
+
+    /* Language Switcher */
+    .language-switcher {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      z-index: 100;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .language-switcher select {
+      padding: 8px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--surface);
+      font-size: 0.9rem;
+    }
+
+    .clear-cache-mini {
+      background: var(--warning);
+      color: white;
+      border: none;
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .clear-cache-mini:hover {
+      background: #d97706;
+    }
+
+    /* API Key Section - Static Position Top Left */
+    .api-key-section {
+      background: rgba(234, 88, 12, 0.05);
+      border: 1px solid rgba(234, 88, 12, 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(234, 88, 12, 0.1);
+    }
+
+    /* 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;
+    }
+
+    .header .description {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-top: 12px;
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    /* Fishbone Components */
+    .fishbone-components {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 15px;
+      margin-bottom: 25px;
+    }
+
+    .component-card {
+      background: rgba(234, 88, 12, 0.05);
+      border: 1px solid rgba(234, 88, 12, 0.1);
+      border-radius: 8px;
+      padding: 15px;
+      text-align: center;
+    }
+
+    .component-card h4 {
+      color: var(--primary);
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+
+    .component-card p {
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+    }
+
+    /* Input Section */
+    .input-section {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 25px;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow);
+    }
+
+    .input-section:hover {
+      border-color: var(--primary);
+      box-shadow: 0 8px 25px -8px rgba(234, 88, 12, 0.3);
+    }
+
+    .input-section h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .input-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: 150px;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
+    }
+
+    /* Character Counter */
+    .char-counter {
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+      text-align: right;
+      margin-top: 4px;
+    }
+
+    /* 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: 280px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .generate-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(234, 88, 12, 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;
+    }
+
+    @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: 300px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow-x: auto;
+    }
+
+    .output-area:empty::before {
+      content: attr(data-placeholder);
+      color: var(--text-secondary);
+      font-style: italic;
+    }
+
+    /* Enhanced output styling */
+    .output-area h3 {
+      color: var(--primary);
+      border-bottom: 2px solid var(--primary);
+      padding-bottom: 8px;
+      margin: 20px 0 15px 0;
+      font-size: 1.2rem;
+    }
+
+    .output-area h4 {
+      color: var(--secondary);
+      margin: 15px 0 10px 0;
+      font-size: 1.1rem;
+    }
+
+    .output-area ul {
+      margin: 10px 0 15px 20px;
+      line-height: 1.7;
+    }
+
+    .output-area li {
+      margin-bottom: 5px;
+    }
+
+    .output-area p {
+      margin: 12px 0;
+      line-height: 1.7;
+    }
+
+    .output-area strong {
+      color: var(--primary);
+    }
+
+    /* 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(234, 88, 12, 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;
+      }
+
+      .landing-page {
+        padding: 30px 20px;
+      }
+
+      .landing-header h1 {
+        font-size: 2.5rem;
+      }
+
+      .api-key-section {
+        margin: 10px;
+        max-width: none;
+      }
+
+      .main-content {
+        padding: 15px 20px 20px;
+      }
+
+      .header h1 {
+        font-size: 2rem;
+      }
+
+      .input-section {
+        padding: 15px;
+      }
+
+      .fishbone-components {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      }
+
+      .generate-btn {
+        width: 100%;
+        margin: 20px 0;
+      }
+
+      .output-area {
+        padding: 15px;
+      }
+
+      .language-switcher {
+        position: static;
+        text-align: center;
+        margin-bottom: 20px;
+        flex-direction: column;
+        gap: 10px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .landing-header h1 {
+        font-size: 2rem;
+      }
+
+      .header h1 {
+        font-size: 1.8rem;
+      }
+
+      .input-section {
+        padding: 12px;
+      }
+
+      .fishbone-components {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    /* 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>
+      <h3 id="translationTitle">Translating Interface...</h3>
+      <p id="translationStatus">💾 Translations cached - instant loading!</p>
+      <div class="translation-progress">
+        <div class="translation-progress-bar" id="translationProgressBar"></div>
+      </div>
+      <p id="translationProgress">0%</p>
+    </div>
+  </div>
+
+  <!-- Landing Page -->
+  <div class="landing-page" id="landingPage">
+    <div class="landing-header">
+      <h1>CauseMap Pro</h1>
+      <p class="subtitle">Advanced Root Cause Analysis & Problem Solving</p>
+    </div>
+
+    <div class="language-selection">
+      <h3>🌐 Select Your Language</h3>
+      <select class="language-dropdown" 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="it">🇮🇹 Italiano (Italian)</option>
+        <option value="pt">🇵🇹 Português (Portuguese)</option>
+        <option value="ru">🇷🇺 Русский (Russian)</option>
+        <option value="ja">🇯🇵 日本語 (Japanese)</option>
+        <option value="ko">🇰🇷 한국어 (Korean)</option>
+        <option value="zh">🇨🇳 中文 (Chinese)</option>
+        <option value="ar">🇸🇦 العربية (Arabic)</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="cs">🇨🇿 Čeština (Czech)</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="sk">🇸🇰 Slovenčina (Slovak)</option>
+        <option value="sl">🇸🇮 Slovenščina (Slovenian)</option>
+        <option value="et">🇪🇪 Eesti (Estonian)</option>
+        <option value="lv">🇱🇻 Latviešu (Latvian)</option>
+        <option value="lt">🇱🇹 Lietuvių (Lithuanian)</option>
+        <option value="el">🇬🇷 Ελληνικά (Greek)</option>
+        <option value="he">🇮🇱 עברית (Hebrew)</option>
+        <option value="th">🇹🇭 ไทย (Thai)</option>
+        <option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option>
+        <option value="km">🇰🇭 ខ្មែរ (Khmer)</option>
+        <option value="my">🇲🇲 မြန်မာ (Myanmar)</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="ne">🇳🇵 नेपाली (Nepali)</option>
+        <option value="si">🇱🇰 සිංහල (Sinhala)</option>
+        <option value="id">🇮🇩 Bahasa Indonesia</option>
+        <option value="ms">🇲🇾 Bahasa Melayu (Malay)</option>
+        <option value="tl">🇵🇭 Filipino</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="am">🇪🇹 አማርኛ (Amharic)</option>
+        <option value="ha">🇳🇬 Hausa</option>
+        <option value="yo">🇳🇬 Yorùbá (Yoruba)</option>
+        <option value="ig">🇳🇬 Igbo</option>
+        <option value="so">🇸🇴 Soomaali (Somali)</option>
+        <option value="rw">🇷🇼 Kinyarwanda</option>
+        <option value="ny">🇲🇼 Chichewa</option>
+        <option value="mg">🇲🇬 Malagasy</option>
+        <option value="sn">🇿🇼 Shona</option>
+        <option value="st">🇱🇸 Sesotho</option>
+        <option value="tn">🇧🇼 Setswana</option>
+        <option value="ts">🇿🇦 Xitsonga</option>
+        <option value="ve">🇿🇦 Tshivenda</option>
+        <option value="ss">🇸🇿 SiSwati</option>
+        <option value="nr">🇿🇦 isiNdebele</option>
+        <option value="fa">🇮🇷 فارسی (Persian)</option>
+        <option value="ps">🇦🇫 پښتو (Pashto)</option>
+        <option value="ku">🇮🇶 کوردی (Kurdish)</option>
+        <option value="sd">🇵🇰 سنڌي (Sindhi)</option>
+        <option value="ug">🇨🇳 ئۇيغۇرچە (Uyghur)</option>
+        <option value="kk">🇰🇿 Қазақша (Kazakh)</option>
+        <option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option>
+        <option value="uz">🇺🇿 O'zbekcha (Uzbek)</option>
+        <option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option>
+        <option value="tk">🇹🇲 Türkmençe (Turkmen)</option>
+        <option value="mn">🇲🇳 Монгол (Mongolian)</option>
+        <option value="bo">🇨🇳 བོད་ཡིག (Tibetan)</option>
+        <option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option>
+        <option value="lo">🇱🇦 ລາວ (Lao)</option>
+        <option value="ka">🇬🇪 ქართული (Georgian)</option>
+        <option value="hy">🇦🇲 Հայերեն (Armenian)</option>
+        <option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option>
+        <option value="be">🇧🇾 Беларуская (Belarusian)</option>
+        <option value="uk">🇺🇦 Українська (Ukrainian)</option>
+        <option value="mk">🇲🇰 Македонски (Macedonian)</option>
+        <option value="sq">🇦🇱 Shqip (Albanian)</option>
+        <option value="mt">🇲🇹 Malti (Maltese)</option>
+        <option value="is">🇮🇸 Íslenska (Icelandic)</option>
+        <option value="fo">🇫🇴 Føroyskt (Faroese)</option>
+        <option value="ga">🇮🇪 Gaeilge (Irish)</option>
+        <option value="gd">🏴󠁧󠁢󠁳󠁣󠁴󠁿 Gàidhlig (Scottish Gaelic)</option>
+        <option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option>
+        <option value="br">🇫🇷 Brezhoneg (Breton)</option>
+        <option value="eu">🇪🇸 Euskera (Basque)</option>
+        <option value="ca">🇪🇸 Català (Catalan)</option>
+        <option value="gl">🇪🇸 Galego (Galician)</option>
+        <option value="oc">🇫🇷 Occitan</option>
+        <option value="co">🇫🇷 Corsu (Corsican)</option>
+        <option value="sc">🇮🇹 Sardu (Sardinian)</option>
+        <option value="rm">🇨🇭 Rumantsch (Romansh)</option>
+        <option value="lb">🇱🇺 Lëtzebuergesch (Luxembourgish)</option>
+        <option value="fy">🇳🇱 Frysk (Frisian)</option>
+      </select>
+    </div>
+
+    <div class="api-key-input">
+      <h3>🔑 Enter Your OpenAI API Key</h3>
+      <input type="password" class="api-input-field" id="landingApiKey" placeholder="sk-..." autocomplete="off">
+    </div>
+
+    <button class="start-button" id="startButton" onclick="startApp()">
+      🚀 Start CauseMap Pro
+    </button>
+
+    <!-- Cache Management Section -->
+    <div class="cache-info" id="cacheInfo">
+      <div id="cacheStatus">💾 No cached translations found</div>
+      <button class="clear-cache-button" id="clearCacheButton" onclick="clearAllTranslationCache()">
+        🗑️ Clear Translation Cache
+      </button>
+    </div>
+  </div>
+
+  <!-- Main Application -->
+  <div class="main-app" id="mainApp">
+    <div class="container">
+      <!-- Language Switcher -->
+      <div class="language-switcher">
+        <select id="languageSwitcher" onchange="switchLanguage()">
+          <option value="en">🇺🇸 English</option>
+        </select>
+        <button class="clear-cache-mini" onclick="clearAllTranslationCache()" title="Clear Translation Cache">
+          🗑️ Clear Cache
+        </button>
+      </div>
+
+      <!-- API Key Section - Static Position Top Left -->
+      <div class="api-key-section">
+        <label for="apiKey" data-translate="api-key-label">🔑 API Key</label>
+        <input type="password" id="apiKey" data-translate="api-key-placeholder" placeholder="Enter your OpenAI API key" autocomplete="off">
+      </div>
+
+      <div class="main-content">
+        <!-- Header -->
+        <div class="header">
+          <h1 data-translate="main-title">CauseMap Pro</h1>
+          <p class="subtitle" data-translate="main-subtitle">Advanced Root Cause Analysis & Problem Solving</p>
+          <p class="description" data-translate="main-description">Generate comprehensive fishbone diagram explanations tailored to your specific problems and analysis needs</p>
+        </div>
+
+        <!-- Fishbone Components Overview -->
+        <div class="fishbone-components">
+          <div class="component-card">
+            <h4 data-translate="component-1-title">🎯 Problem Statement</h4>
+            <p data-translate="component-1-desc">Main Effect/Issue</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component-2-title">👥 People</h4>
+            <p data-translate="component-2-desc">Human Factors</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component-3-title">⚙️ Process</h4>
+            <p data-translate="component-3-desc">Workflow & Procedures</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component-4-title">🛠️ Equipment</h4>
+            <p data-translate="component-4-desc">Tools & Technology</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component-5-title">📦 Materials</h4>
+            <p data-translate="component-5-desc">Resources & Inputs</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component-6-title">🌍 Environment</h4>
+            <p data-translate="component-6-desc">External Conditions</p>
+          </div>
+        </div>
+
+        <!-- Input Section -->
+        <div class="input-section">
+          <h3 data-translate="input-title">📝 Problem & Context Input</h3>
+          <p class="description" data-translate="input-description">Describe your problem, issue, or situation that needs root cause analysis using the fishbone diagram methodology</p>
+          <textarea id="textInput" data-translate="input-placeholder" placeholder="Enter your problem description, situation analysis, quality issue, process breakdown, or any challenge that requires systematic root cause investigation. For example: describe production defects, service failures, performance issues, or operational problems..." required></textarea>
+          <div class="char-counter" id="charCounter" data-translate="char-counter">0 characters</div>
+        </div>
+
+        <!-- Error Message -->
+        <div class="error-message" id="errorMessage"></div>
+
+        <!-- Generate Button -->
+        <button class="generate-btn" id="generateDiagramBtn">
+          <span class="spinner" id="spinner"></span>
+          <span id="buttonText" data-translate="generate-button">🐟 Generate Fishbone Analysis</span>
+        </button>
+
+        <!-- Output Section -->
+        <div class="output-section">
+          <h2 data-translate="output-title">📊 Your Fishbone Diagram Analysis</h2>
+          <div class="output-area" id="apiOutput" data-translate="output-placeholder" data-placeholder="Your comprehensive fishbone diagram analysis will appear here..."></div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="footer">
+        Created by Shift Mind AI Labs
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Global variables
+    let currentLanguage = 'en';
+    let translationCache = {};
+    let isTranslating = false;
+
+    // RTL languages
+    const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku', 'sd', 'ug'];
+
+    // Language names for AI prompts
+    const languageNames = {
+      'en': 'English', 'es': 'Spanish', 'fr': 'French', 'de': 'German', 'it': 'Italian',
+      'pt': 'Portuguese', 'ru': 'Russian', 'ja': 'Japanese', 'ko': 'Korean', 'zh': 'Chinese',
+      'ar': 'Arabic', 'hi': 'Hindi', 'bn': 'Bengali', 'ur': 'Urdu', 'tr': 'Turkish',
+      'pl': 'Polish', 'nl': 'Dutch', 'sv': 'Swedish', 'da': 'Danish', 'no': 'Norwegian',
+      'fi': 'Finnish', 'cs': 'Czech', 'hu': 'Hungarian', 'ro': 'Romanian', 'bg': 'Bulgarian',
+      'hr': 'Croatian', 'sr': 'Serbian', 'sk': 'Slovak', 'sl': 'Slovenian', 'et': 'Estonian',
+      'lv': 'Latvian', 'lt': 'Lithuanian', 'el': 'Greek', 'he': 'Hebrew', 'th': 'Thai',
+      'vi': 'Vietnamese', 'km': 'Khmer', 'my': 'Myanmar', 'ta': 'Tamil', 'te': 'Telugu',
+      'kn': 'Kannada', 'ml': 'Malayalam', 'gu': 'Gujarati', 'pa': 'Punjabi', 'ne': 'Nepali',
+      'si': 'Sinhala', 'id': 'Indonesian', 'ms': 'Malay', 'tl': 'Filipino', 'sw': 'Swahili',
+      'zu': 'Zulu', 'xh': 'Xhosa', 'af': 'Afrikaans', 'am': 'Amharic', 'ha': 'Hausa',
+      'yo': 'Yoruba', 'ig': 'Igbo', 'so': 'Somali', 'rw': 'Kinyarwanda', 'ny': 'Chichewa',
+      'mg': 'Malagasy', 'sn': 'Shona', 'st': 'Sesotho', 'tn': 'Setswana', 'ts': 'Xitsonga',
+      've': 'Tshivenda', 'ss': 'SiSwati', 'nr': 'isiNdebele', 'fa': 'Persian', 'ps': 'Pashto',
+      'ku': 'Kurdish', 'sd': 'Sindhi', 'ug': 'Uyghur', 'kk': 'Kazakh', 'ky': 'Kyrgyz',
+      'uz': 'Uzbek', 'tg': 'Tajik', 'tk': 'Turkmen', 'mn': 'Mongolian', 'bo': 'Tibetan',
+      'dz': 'Dzongkha', 'lo': 'Lao', 'ka': 'Georgian', 'hy': 'Armenian', 'az': 'Azerbaijani',
+      'be': 'Belarusian', 'uk': 'Ukrainian', 'mk': 'Macedonian', 'sq': 'Albanian', 'mt': 'Maltese',
+      'is': 'Icelandic', 'fo': 'Faroese', 'ga': 'Irish', 'gd': 'Scottish Gaelic', 'cy': 'Welsh',
+      'br': 'Breton', 'eu': 'Basque', 'ca': 'Catalan', 'gl': 'Galician', 'oc': 'Occitan',
+      'co': 'Corsican', 'sc': 'Sardinian', 'rm': 'Romansh', 'lb': 'Luxembourgish', 'fy': 'Frisian'
+    };
+
+    // Initialize app
+    function initializeApp() {
+      // Load saved preferences
+      const savedLanguage = localStorage.getItem('causemap_language') || 'en';
+      const savedApiKey = localStorage.getItem('causemap_api_key') || '';
+      
+      document.getElementById('languageSelect').value = savedLanguage;
+      document.getElementById('landingApiKey').value = savedApiKey;
+      
+      currentLanguage = savedLanguage;
+      
+      // Load translation cache
+      const cached = localStorage.getItem('causemap_translations');
+      if (cached) {
+        translationCache = JSON.parse(cached);
+      }
+      
+      // Update cache status
+      updateCacheStatus();
+    }
+
+    // Update cache status display
+    function updateCacheStatus() {
+      const cacheInfo = document.getElementById('cacheInfo');
+      const cacheStatus = document.getElementById('cacheStatus');
+      const cachedLanguages = Object.keys(translationCache).map(key => key.replace('causemap_', ''));
+      
+      if (cachedLanguages.length > 0) {
+        cacheInfo.classList.remove('no-cache');
+        cacheStatus.textContent = `💾 Cached translations for ${cachedLanguages.length} language(s): ${cachedLanguages.join(', ')}`;
+      } else {
+        cacheInfo.classList.add('no-cache');
+        cacheStatus.textContent = '💾 No cached translations found';
+      }
+    }
+
+    // Clear all translation cache
+    function clearAllTranslationCache() {
+      if (confirm('Are you sure you want to clear all cached translations? This will require re-downloading translations for all languages.')) {
+        translationCache = {};
+        localStorage.removeItem('causemap_translations');
+        updateCacheStatus();
+        
+        // Show confirmation message
+        const originalStatus = document.getElementById('cacheStatus').textContent;
+        document.getElementById('cacheStatus').textContent = '🗑️ Translation cache cleared successfully!';
+        setTimeout(() => {
+          updateCacheStatus();
+        }, 2000);
+        
+        // If currently using a non-English language, offer to reload
+        if (currentLanguage !== 'en') {
+          if (confirm('The current language translations have been cleared. Would you like to reload the translations now?')) {
+            translateInterface(currentLanguage);
+          }
+        }
+      }
+    }
+
+    // Start the application
+    async function startApp() {
+      const selectedLanguage = document.getElementById('languageSelect').value;
+      const apiKey = document.getElementById('landingApiKey').value.trim();
+      
+      if (!apiKey) {
+        alert('Please enter your OpenAI API key');
+        return;
+      }
+      
+      // Save preferences
+      localStorage.setItem('causemap_language', selectedLanguage);
+      localStorage.setItem('causemap_api_key', apiKey);
+      
+      currentLanguage = selectedLanguage;
+      
+      // Set up main app
+      document.getElementById('apiKey').value = apiKey;
+      
+      // Update language switcher
+      const switcher = document.getElementById('languageSwitcher');
+      switcher.innerHTML = '';
+      const allOptions = document.getElementById('languageSelect').innerHTML;
+      switcher.innerHTML = allOptions;
+      switcher.value = selectedLanguage;
+      
+      // Apply RTL if needed
+      applyDirection(selectedLanguage);
+      
+      if (selectedLanguage !== 'en') {
+        await translateInterface(selectedLanguage);
+      }
+      
+      // Show main app
+      document.getElementById('landingPage').style.display = 'none';
+      document.getElementById('mainApp').style.display = 'block';
+    }
+
+    // Switch language
+    async function switchLanguage() {
+      const newLanguage = document.getElementById('languageSwitcher').value;
+      if (newLanguage === currentLanguage) return;
+      
+      currentLanguage = newLanguage;
+      localStorage.setItem('causemap_language', newLanguage);
+      
+      applyDirection(newLanguage);
+      
+      if (newLanguage !== 'en') {
+        await translateInterface(newLanguage);
+      } else {
+        // Reset to English
+        restoreOriginalText();
+      }
+    }
+
+    // Apply text direction
+    function applyDirection(language) {
+      const isRTL = rtlLanguages.includes(language);
+      document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+      document.documentElement.lang = language;
+    }
+
+    // Translate interface
+    async function translateInterface(targetLanguage) {
+      if (isTranslating) return;
+      
+      const cacheKey = `causemap_${targetLanguage}`;
+      
+      // Check if translations are cached
+      if (translationCache[cacheKey]) {
+        showTranslationStatus('💾 Translations cached - instant loading!', false);
+        applyTranslations(translationCache[cacheKey]);
+        return;
+      }
+      
+      // Show first-time translation message
+      showTranslationStatus('🔄 First time translation - will be cached for future use', true);
+      
+      isTranslating = true;
+      
+      try {
+        const apiKey = document.getElementById('apiKey').value || document.getElementById('landingApiKey').value;
+        if (!apiKey) {
+          throw new Error('API key required for translation');
+        }
+        
+        // Get all translatable elements
+        const elements = document.querySelectorAll('[data-translate]');
+        const textsToTranslate = [];
+        const elementMap = {};
+        
+        elements.forEach((element, index) => {
+          const key = element.getAttribute('data-translate');
+          let text = '';
+          
+          if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+            text = element.placeholder;
+          } else {
+            text = element.textContent.trim();
+          }
+          
+          if (text && !elementMap[key]) {
+            elementMap[key] = text;
+            textsToTranslate.push({ key, text });
+          }
+        });
+        
+        // Translate in batches
+        const batchSize = 10;
+        const translations = {};
+        
+        for (let i = 0; i < textsToTranslate.length; i += batchSize) {
+          const batch = textsToTranslate.slice(i, i + batchSize);
+          const progress = Math.round(((i + batch.length) / textsToTranslate.length) * 100);
+          
+          updateTranslationProgress(progress);
+          
+          const batchTexts = batch.map(item => item.text).join('\n---\n');
+          const prompt = `Translate the following text to ${languageNames[targetLanguage]}. Provide ONLY the exact translation without any explanations, additional information, or formatting. Separate each translation with ---:\n\n${batchTexts}`;
+          
+          const response = await fetch('https://api.openai.com/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${apiKey}`
+            },
+            body: JSON.stringify({
+              model: 'gpt-4o-mini',
+              messages: [{ role: 'user', content: prompt }],
+              max_tokens: 2000,
+              temperature: 0.3
+            } )
+          });
+          
+          if (!response.ok) {
+            throw new Error('Translation API request failed');
+          }
+          
+          const data = await response.json();
+          const translatedTexts = data.choices[0].message.content.split('---').map(t => t.trim());
+          
+          batch.forEach((item, index) => {
+            if (translatedTexts[index]) {
+              translations[item.key] = translatedTexts[index];
+            }
+          });
+        }
+        
+        // Cache translations
+        translationCache[cacheKey] = translations;
+        localStorage.setItem('causemap_translations', JSON.stringify(translationCache));
+        
+        // Apply translations
+        applyTranslations(translations);
+        
+        updateTranslationProgress(100);
+        setTimeout(() => {
+          hideTranslationOverlay();
+          showTranslationStatus('💾 Translations cached - instant loading!', false);
+          updateCacheStatus();
+        }, 500);
+        
+      } catch (error) {
+        console.error('Translation error:', error);
+        hideTranslationOverlay();
+        alert('Translation failed. Please check your API key and try again.');
+      } finally {
+        isTranslating = false;
+      }
+    }
+
+    // Apply translations to elements
+    function applyTranslations(translations) {
+      const elements = document.querySelectorAll('[data-translate]');
+      
+      elements.forEach(element => {
+        const key = element.getAttribute('data-translate');
+        if (translations[key]) {
+          if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+            element.placeholder = translations[key];
+          } else {
+            element.textContent = translations[key];
+          }
+          
+          // Update data-placeholder for output area
+          if (element.hasAttribute('data-placeholder')) {
+            element.setAttribute('data-placeholder', translations[key]);
+          }
+        }
+      });
+    }
+
+    // Restore original English text
+    function restoreOriginalText() {
+      const originalTexts = {
+        'api-key-label': '🔑 API Key',
+        'api-key-placeholder': 'Enter your OpenAI API key',
+        'main-title': 'CauseMap Pro',
+        'main-subtitle': 'Advanced Root Cause Analysis & Problem Solving',
+        'main-description': 'Generate comprehensive fishbone diagram explanations tailored to your specific problems and analysis needs',
+        'component-1-title': '🎯 Problem Statement',
+        'component-1-desc': 'Main Effect/Issue',
+        'component-2-title': '👥 People',
+        'component-2-desc': 'Human Factors',
+        'component-3-title': '⚙️ Process',
+        'component-3-desc': 'Workflow & Procedures',
+        'component-4-title': '🛠️ Equipment',
+        'component-4-desc': 'Tools & Technology',
+        'component-5-title': '📦 Materials',
+        'component-5-desc': 'Resources & Inputs',
+        'component-6-title': '🌍 Environment',
+        'component-6-desc': 'External Conditions',
+        'input-title': '📝 Problem & Context Input',
+        'input-description': 'Describe your problem, issue, or situation that needs root cause analysis using the fishbone diagram methodology',
+        'input-placeholder': 'Enter your problem description, situation analysis, quality issue, process breakdown, or any challenge that requires systematic root cause investigation. For example: describe production defects, service failures, performance issues, or operational problems...',
+        'char-counter': '0 characters',
+        'generate-button': '🐟 Generate Fishbone Analysis',
+        'output-title': '📊 Your Fishbone Diagram Analysis',
+        'output-placeholder': 'Your comprehensive fishbone diagram analysis will appear here...'
+      };
+      
+      applyTranslations(originalTexts);
+    }
+
+    // Show translation status
+    function showTranslationStatus(message, showProgress) {
+      const overlay = document.getElementById('translationOverlay');
+      const status = document.getElementById('translationStatus');
+      const progressContainer = overlay.querySelector('.translation-progress');
+      
+      status.textContent = message;
+      progressContainer.style.display = showProgress ? 'block' : 'none';
+      overlay.style.display = 'flex';
+      
+      if (!showProgress) {
+        setTimeout(hideTranslationOverlay, 1500);
+      }
+    }
+
+    // Update translation progress
+    function updateTranslationProgress(percentage) {
+      const progressBar = document.getElementById('translationProgressBar');
+      const progressText = document.getElementById('translationProgress');
+      
+      progressBar.style.width = percentage + '%';
+      progressText.textContent = percentage + '%';
+    }
+
+    // Hide translation overlay
+    function hideTranslationOverlay() {
+      document.getElementById('translationOverlay').style.display = 'none';
+    }
+
+    // Store API key in localStorage
+    const apiKeyInput = document.getElementById('apiKey');
+    if (apiKeyInput) {
+      const storedApiKey = localStorage.getItem('causemap_api_key');
+      if (storedApiKey) {
+        apiKeyInput.value = storedApiKey;
+      }
+
+      apiKeyInput.addEventListener('input', function() {
+        localStorage.setItem('causemap_api_key', this.value);
+      });
+    }
+
+    // Character counter
+    const textInput = document.getElementById('textInput');
+    const charCounter = document.getElementById('charCounter');
+    
+    if (textInput && charCounter) {
+      textInput.addEventListener('input', function() {
+        const count = this.value.length;
+        charCounter.textContent = `${count} characters`;
+        
+        if (count > 5000) {
+          charCounter.style.color = 'var(--warning)';
+        } else {
+          charCounter.style.color = 'var(--text-secondary)';
+        }
+      });
+    }
+
+    // Error handling
+    function showError(message) {
+      const errorDiv = document.getElementById('errorMessage');
+      if (errorDiv) {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+        setTimeout(() => {
+          errorDiv.style.display = 'none';
+        }, 5000);
+      }
+    }
+
+    // API call function
+    async function callAPI(prompt) {
+      const apiKey = document.getElementById('apiKey').value.trim();
+      
+      if (!apiKey) {
+        throw new Error('Please enter your OpenAI API key');
+      }
+
+      const payload = {
+        model: "gpt-4o-mini",
+        messages: [{ role: "user", content: prompt }],
+        max_tokens: 3500,
+        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 fishbone diagram prompt
+    function buildFishbonePrompt() {
+      const inputText = document.getElementById('textInput').value.trim();
+
+      return `Based on the following problem description and context:
+
+---------------------
+${inputText}
+---------------------
+
+Please generate a comprehensive, structured, and professionally formatted fishbone diagram analysis that directly addresses the specific problem described above. The output should be tailored to the user's situation and formatted as clean HTML with inline CSS for professional presentation.
+
+**Output Language: ${languageNames[currentLanguage]}**
+
+**Required Structure:**
+
+1. **Problem Statement & Effect Analysis**
+   - Clearly define the main problem or effect based on the input
+   - Provide context and background information
+   - Explain the significance and impact of this problem
+   - Connect to the specific situation described in the input
+
+2. **Fishbone Diagram Concept Overview**
+   - Define the fishbone diagram (Ishikawa diagram) as a visual tool for root cause analysis
+   - Explain its purpose in systematically identifying potential causes
+   - Describe how it helps teams brainstorm and categorize contributing factors
+   - Highlight its value in problem-solving and quality improvement
+
+3. **Detailed Cause Categories Analysis**
+   Based on the problem described, analyze each relevant category:
+
+   **👥 People (Human Factors)**
+   - Skills, training, and competency issues
+   - Communication problems
+   - Motivation and engagement factors
+   - Specific examples relevant to the input context
+
+   **⚙️ Process (Methods & Procedures)**
+   - Workflow inefficiencies
+   - Standard operating procedures
+   - Decision-making processes
+   - Specific process issues from the input
+
+   **🛠️ Equipment (Tools & Technology)**
+   - Machine malfunctions or limitations
+   - Technology gaps or failures
+   - Maintenance issues
+   - Relevant equipment factors from the context
+
+   **📦 Materials (Resources & Inputs)**
+   - Quality of raw materials or inputs
+   - Availability and supply chain issues
+   - Specifications and standards
+   - Material-related causes from the input
+
+   **🌍 Environment (External Conditions)**
+   - Physical environment factors
+   - Organizational culture and climate
+   - External market or regulatory conditions
+   - Environmental factors relevant to the problem
+
+   **📏 Measurement (Data & Metrics)**
+   - Data collection and analysis issues
+   - Performance measurement problems
+   - Feedback and monitoring gaps
+   - Measurement-related causes from the context
+
+4. **Root Cause Investigation Process**
+   - Step-by-step methodology for using the fishbone diagram
+   - Techniques for effective brainstorming sessions
+   - Methods for validating and prioritizing causes
+   - Data collection strategies for each category
+
+5. **Implementation Strategy**
+   - How to facilitate a fishbone diagram session
+   - Best practices for team collaboration
+   - Tools and templates for documentation
+   - Integration with other problem-solving methods
+
+6. **Action Planning & Next Steps**
+   - Prioritization techniques for identified causes
+   - Development of corrective action plans
+   - Monitoring and validation strategies
+   - Continuous improvement recommendations
+
+7. **Benefits & Applications**
+   - Advantages of systematic root cause analysis
+   - Prevention of problem recurrence
+   - Team alignment and shared understanding
+   - Quality improvement and process optimization
+
+**Formatting Requirements:**
+- Use clean HTML with inline CSS for professional presentation
+- Include proper headings (h3, h4) with attractive styling
+- Use bullet points and numbered lists for clarity
+- Apply consistent color scheme (oranges for analysis themes)
+- Ensure responsive design and readability
+- Make the content scannable with clear visual hierarchy
+- Include specific examples relevant to the user's problem context
+
+**Tone:** Professional, analytical, and directly relevant to the user's specific problem. Focus on practical, actionable guidance that can be immediately applied to their root cause analysis needs.
+
+Return only the complete HTML content with inline CSS - no additional text or explanations outside the HTML.`;
+    }
+
+    // Validation function
+    function validateInputs() {
+      const inputText = document.getElementById('textInput').value.trim();
+
+      if (!inputText) {
+        document.getElementById('textInput').focus();
+        throw new Error('Please enter your problem description or context for analysis');
+      }
+
+      if (inputText.length < 50) {
+        document.getElementById('textInput').focus();
+        throw new Error('Please provide at least 50 characters for meaningful root cause analysis');
+      }
+    }
+
+    // Generate fishbone diagram analysis
+    document.getElementById('generateDiagramBtn').addEventListener('click', async function() {
+      const button = this;
+      const buttonText = document.getElementById('buttonText');
+      const spinner = document.getElementById('spinner');
+      const outputArea = document.getElementById('apiOutput');
+
+      try {
+        // Validate inputs
+        validateInputs();
+
+        // Update button state
+        button.disabled = true;
+        spinner.style.display = 'inline-block';
+        buttonText.textContent = 'Analyzing Problem...';
+        
+        // Clear previous output
+        outputArea.innerHTML = '';
+        
+        // Build prompt and call API
+        const prompt = buildFishbonePrompt();
+        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 Fishbone Analysis';
+      }
+    });
+
+    // Keyboard shortcut for generation
+    document.addEventListener('keydown', function(e) {
+      if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        document.getElementById('generateDiagramBtn').click();
+      }
+    });
+
+    // Initialize the app when page loads
+    document.addEventListener('DOMContentLoaded', initializeApp);
+  </script>
+</body>
+</html>

📘 Educator & Student Guide CauseMa.txt

@@ -0,0 +1,109 @@
+📘 Educator & Student Guide: CauseMap Pro
+1. Introduction
+CauseMap Pro brings advanced root cause analysis into your browser, letting students and professionals create deep, actionable fishbone analyses for any problem. Its multilingual, privacy-first design ensures accessibility everywhere.
+
+2. Step-by-Step Instructions
+A. Getting Started
+Open CauseMap Pro in your browser.
+
+Choose your preferred language from the dropdown (80+ supported).
+
+Enter your OpenAI API key when prompted.
+
+Tip: Your key is stored only in your browser and is never shared externally.
+
+B. Preparing Your Problem Statement
+Be Specific:
+Clearly describe the problem, its background, and context.
+Example: “Our factory is experiencing a 10% increase in defective products over the past two months in Line A. The defects involve surface cracks during the molding process.”
+
+Minimum Input:
+At least 50 characters for meaningful analysis.
+
+C. Generating Your Fishbone Analysis
+Click “Generate Fishbone Analysis”.
+The tool will:
+
+Structure your problem into the six key fishbone categories:
+
+👥 People (human factors)
+
+⚙️ Process (methods & workflow)
+
+🛠️ Equipment (tools & technology)
+
+📦 Materials (inputs/resources)
+
+🌍 Environment (external/contextual)
+
+📏 Measurement (data & metrics)
+
+Analyze each category in detail using your specific context.
+
+Suggest actionable next steps, validation, and improvement strategies.
+
+Review the Professional Output:
+
+Output is in clean, responsive HTML—easy to copy, present, or share.
+
+All cause categories are explained, with practical examples, prioritization, and implementation tips.
+
+D. Using Multilingual Support
+Select your desired language before or after generating analysis.
+
+The interface and all outputs will be instantly translated (requires API key for first-time use).
+
+Clear your translation cache in the app for privacy or updated translations.
+
+3. For Educators: Advanced Classroom Integration
+Project-Based Learning:
+Assign real-world problems for student teams to analyze and solve.
+
+Cross-Curricular Use:
+Integrate in STEM, business, design, and social sciences.
+
+Group Discussion:
+Have students compare, critique, and improve their analyses collaboratively.
+
+Assessment:
+Use student output as evidence of inquiry, analytical reasoning, and communication.
+
+4. For Students: Building Skills
+Critical Thinking:
+Practice breaking down complex problems and seeing all contributing factors.
+
+Communication:
+Learn to describe and present findings clearly and professionally.
+
+Continuous Improvement:
+Use the output to guide real corrective actions or project improvements.
+
+Portfolio Building:
+Save and document your analyses as evidence of your problem-solving abilities.
+
+5. Best Practices
+Use Real Problems:
+The more real and detailed the input, the more actionable the output.
+
+Iterate:
+Regenerate or revise your analysis as you gather more data.
+
+Collaborate:
+Invite feedback from peers, teachers, or colleagues.
+
+6. Support & Troubleshooting
+If you see errors:
+
+Check that your API key is valid.
+
+Ensure your input has enough detail (min 50 characters).
+
+For translation issues, try clearing the cache and reloading.
+
+Need help?
+
+Email info@shiftmind.io
+
+Visit www.shiftmind.io
+
+CauseMap Pro is your AI-powered partner in deep, actionable root cause analysis—empowering learning and results at any level.