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,95 @@
+---
+title: "💡 EmpathyInsights Pro – Advanced Empathy Map Guide Generator"
+emoji: "💡"
+colorFrom: "red"
+colorTo: "green"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 💡 EmpathyInsights Pro – Advanced Empathy Map Guide Generator  
+**Developed by Shift Mind AI Labs**
+
+EmpathyInsights Pro is an open-source, privacy-first platform for generating comprehensive, professional empathy map guides—tailored to your user research or design context. Instantly create deeply structured, multilingual, and visually engaging explanations for all six core components of the Empathy Map—across 90+ languages, with full local privacy and advanced cache management.
+
+---
+
+## 🚀 Features
+
+- **Full Empathy Map Structure:**  
+  In-depth explanations for *Says, Thinks, Does, Feels, Pain Points, Gains*—with practical examples, data strategies, and best practices.
+- **Context-Aware:**  
+  Output is tailored to your research context, audience, and scenario description.
+- **Professional HTML Output:**  
+  Clean, responsive, color-themed output with inline CSS—ready for reports, presentations, or team sharing.
+- **Multilingual UI & Output:**  
+  90+ languages supported (OpenAI API key required, used only locally).
+- **Instant Translation Cache:**  
+  Revisit any language instantly; control cache from the UI.
+- **No Data Sharing:**  
+  API key and content never leave your device.
+- **Accessibility:**  
+  RTL/LTR support, keyboard shortcuts, mobile responsive.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** in your browser or on Hugging Face Spaces.
+2. **Select your preferred language** and enter your OpenAI API key (private, never sent to a server).
+3. **Describe your user research scenario or context** (min 50 characters).
+4. **Click “🧠 Generate Empathy Map Guide”** (or press Ctrl+Enter).
+5. **View, copy, and use** your structured empathy map explanation—ready for sharing, reports, or design workshops.
+6. **Switch languages or clear translation cache** anytime for instant, private access.
+
+---
+
+## 👩‍🏫 For Educators & Design Teams
+
+- **Model research-based empathy:** Instantly generate examples for UX, marketing, or product courses.
+- **Multilingual training:** Perfect for international teams, students, or ELL support.
+- **Workshop facilitation:** Use as a live empathy map explainer or template in user interviews.
+- **Portfolio and reflection:** Output is professional and editable—use in e-portfolios or peer reviews.
+
+---
+
+## 👨‍💼 For UX, Product, and Business Teams
+
+- **Accelerate research analysis:** Get context-specific empathy map guides in any language.
+- **Support design thinking:** Use as a workshop resource or stakeholder explainer.
+- **Privacy & compliance:** All input/output and keys stay on your device—safe for NDA or client work.
+
+---
+
+## 🔐 Data Privacy
+
+- Your OpenAI API key and all research data **never leave your browser**.
+- No data is sent 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 creates open-source, ethical AI tools for global education, research, and digital empowerment.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Feedback, feature ideas, and partnerships are welcome!  
+For pilots, integrations, or collaboration: **info@shiftmind.io**
+
+---
+
+*Bringing deep user empathy to every research team, class, and organization—instantly, securely, and in any language.*

index.html

@@ -0,0 +1,1753 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>EmpathyInsights Pro - Advanced User Understanding</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  
+  <style>
+    /* CSS Reset and Base Styles */
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* CSS Custom Properties */
+    :root {
+      /* Color System - Empathy/Understanding theme */
+      --color-primary: #0891b2;
+      --color-primary-hover: #0e7490;
+      --color-secondary: #06b6d4;
+      --color-accent: #67e8f9;
+      --color-success: #10b981;
+      --color-warning: #f59e0b;
+      --color-error: #ef4444;
+      
+      /* Neutral Colors - Light Mode */
+      --color-background: #f8fafc;
+      --color-surface: #ffffff;
+      --color-surface-elevated: #ffffff;
+      --color-border: #e2e8f0;
+      --color-border-focus: #0891b2;
+      --color-text-primary: #1e293b;
+      --color-text-secondary: #64748b;
+      --color-text-muted: #94a3b8;
+      
+      /* Typography */
+      --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      
+      /* Optimized Spacing System */
+      --spacing-xs: 0.25rem;
+      --spacing-sm: 0.5rem;
+      --spacing-md: 0.75rem;
+      --spacing-lg: 1rem;
+      --spacing-xl: 1.25rem;
+      --spacing-2xl: 1.5rem;
+      --spacing-3xl: 2rem;
+      
+      /* Border Radius */
+      --radius-sm: 0.375rem;
+      --radius-md: 0.5rem;
+      --radius-lg: 0.75rem;
+      --radius-xl: 1rem;
+      
+      /* Shadows */
+      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+      
+      /* Transitions */
+      --transition-fast: 150ms ease-in-out;
+      --transition-normal: 250ms ease-in-out;
+      --transition-slow: 350ms ease-in-out;
+      
+      /* Layout */
+      --container-max-width: 1000px;
+      --content-max-width: 900px;
+    }
+
+    /* RTL Support */
+    [dir="rtl"] {
+      text-align: right;
+    }
+
+    [dir="rtl"] .app-container {
+      direction: rtl;
+    }
+
+    [dir="rtl"] .api-key-compact {
+      left: auto;
+      right: var(--spacing-lg);
+    }
+
+    [dir="rtl"] .language-switcher {
+      right: auto;
+      left: var(--spacing-lg);
+    }
+
+    /* Dark Mode Support */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-background: #0f172a;
+        --color-surface: #1e293b;
+        --color-surface-elevated: #334155;
+        --color-border: #334155;
+        --color-text-primary: #f1f5f9;
+        --color-text-secondary: #cbd5e1;
+        --color-text-muted: #94a3b8;
+      }
+    }
+
+    /* Base Styles */
+    html {
+      font-size: 16px;
+      line-height: 1.5;
+      scroll-behavior: smooth;
+    }
+
+    body {
+      font-family: var(--font-family-primary);
+      background: linear-gradient(135deg, var(--color-background) 0%, #e2e8f0 100%);
+      color: var(--color-text-primary);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      min-height: 100vh;
+      transition: all 0.3s ease;
+      padding: 15px;
+    }
+
+    /* Language Selection Landing */
+    .language-landing {
+      display: block;
+      max-width: 600px;
+      margin: 50px auto;
+      background: var(--color-surface);
+      border-radius: var(--radius-xl);
+      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(--color-primary) 0%, var(--color-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(--color-text-secondary);
+      margin-bottom: 30px;
+    }
+
+    .language-selector {
+      margin-bottom: 25px;
+    }
+
+    .language-selector label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      font-size: 1.1rem;
+    }
+
+    .language-selector select {
+      width: 100%;
+      padding: 15px 20px;
+      border: 2px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      font-size: 1.1rem;
+      font-family: inherit;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      margin-bottom: 20px;
+    }
+
+    .language-selector select:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
+    }
+
+    .api-key-landing {
+      margin-bottom: 25px;
+    }
+
+    .api-key-landing label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      font-size: 1.1rem;
+    }
+
+    .api-key-landing input {
+      width: 100%;
+      padding: 15px 20px;
+      border: 2px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      font-size: 1.1rem;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      font-family: 'Courier New', monospace;
+    }
+
+    .api-key-landing input:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
+    }
+
+    .start-btn {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+      color: white;
+      padding: 18px 40px;
+      border: none;
+      border-radius: var(--radius-lg);
+      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(8, 145, 178, 0.4);
+    }
+
+    .start-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Management Section */
+    .cache-management {
+      background: rgba(8, 145, 178, 0.05);
+      border: 1px solid rgba(8, 145, 178, 0.1);
+      border-radius: var(--radius-lg);
+      padding: 20px;
+      margin-bottom: 25px;
+      text-align: center;
+    }
+
+    .cache-management h3 {
+      color: var(--color-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(--color-success);
+      padding: 12px 16px;
+      border-radius: var(--radius-md);
+      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(--color-text-secondary);
+    }
+
+    .clear-cache-btn {
+      background: linear-gradient(135deg, var(--color-warning) 0%, #f59e0b 100%);
+      color: white;
+      padding: 12px 24px;
+      border: none;
+      border-radius: var(--radius-md);
+      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(--color-success);
+      padding: 8px 12px;
+      border-radius: var(--radius-sm);
+      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(8, 145, 178, 0.1);
+      border-color: rgba(8, 145, 178, 0.2);
+      color: var(--color-primary);
+    }
+
+    /* Translation Loading Overlay */
+    .translation-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(8, 145, 178, 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: var(--radius-xl);
+      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;
+    }
+
+    /* Layout Components */
+    .app-container {
+      max-width: var(--container-max-width);
+      margin: 0 auto;
+      background: var(--color-surface);
+      border-radius: 16px;
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Language Switcher in Main App */
+    .language-switcher {
+      position: absolute;
+      top: var(--spacing-lg);
+      right: var(--spacing-lg);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      z-index: 10;
+    }
+
+    .language-switch-btn {
+      background: rgba(8, 145, 178, 0.05);
+      border: 1px solid rgba(8, 145, 178, 0.1);
+      border-radius: var(--radius-md);
+      padding: 8px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      color: var(--color-primary);
+      font-weight: 500;
+    }
+
+    .language-switch-btn:hover {
+      background: rgba(8, 145, 178, 0.1);
+    }
+
+    .mini-clear-cache {
+      background: rgba(245, 158, 11, 0.1);
+      border: 1px solid rgba(245, 158, 11, 0.2);
+      color: var(--color-warning);
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-weight: 500;
+    }
+
+    .mini-clear-cache:hover {
+      background: rgba(245, 158, 11, 0.2);
+    }
+
+    /* Compact API Key in Top-Left */
+    .api-key-compact {
+      position: absolute;
+      top: var(--spacing-lg);
+      left: var(--spacing-lg);
+      z-index: 10;
+      background: rgba(8, 145, 178, 0.05);
+      border: 1px solid rgba(8, 145, 178, 0.1);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-md) var(--spacing-lg);
+      transition: all var(--transition-normal);
+      max-width: 280px;
+    }
+
+    .api-key-compact:hover {
+      background: rgba(8, 145, 178, 0.08);
+    }
+
+    .api-key-compact-label {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--color-primary);
+      margin-bottom: var(--spacing-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .api-key-compact-input {
+      width: 100%;
+      padding: var(--spacing-sm) var(--spacing-md);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-sm);
+      font-size: 0.875rem;
+      background: var(--color-surface);
+      color: var(--color-text-primary);
+      transition: all var(--transition-fast);
+      font-family: 'Courier New', monospace;
+    }
+
+    .api-key-compact-input:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 2px rgb(8 145 178 / 0.1);
+    }
+
+    .api-key-compact-input::placeholder {
+      color: var(--color-text-muted);
+      font-size: 0.75rem;
+    }
+
+    /* Main Content */
+    .main-content {
+      padding: 20px 30px 30px;
+    }
+
+    /* Header */
+    .header {
+      text-align: center;
+      margin-bottom: 25px;
+      padding-bottom: 20px;
+      border-bottom: 2px solid var(--color-border);
+    }
+
+    .header h1 {
+      font-size: 2.5rem;
+      font-weight: 800;
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-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(--color-text-secondary);
+      font-weight: 500;
+    }
+
+    .header .description {
+      font-size: 1rem;
+      color: var(--color-text-secondary);
+      margin-top: 12px;
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    /* Empathy Map Components Overview */
+    .empathy-components {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    .component-card {
+      background: rgba(8, 145, 178, 0.05);
+      border: 1px solid rgba(8, 145, 178, 0.1);
+      border-radius: 8px;
+      padding: 12px;
+      text-align: center;
+    }
+
+    .component-card h4 {
+      color: var(--color-primary);
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .component-card p {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+    }
+
+    /* Input Section */
+    .input-section {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 20px;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .input-section:hover {
+      border-color: var(--color-primary);
+      box-shadow: 0 8px 25px -8px rgba(8, 145, 178, 0.3);
+    }
+
+    .input-section h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--color-primary);
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .input-section .description {
+      font-size: 0.9rem;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+    }
+
+    /* Form Elements */
+    label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      font-size: 0.95rem;
+    }
+
+    textarea {
+      width: 100%;
+      padding: 12px 16px;
+      border: 2px solid var(--color-border);
+      border-radius: 8px;
+      font-size: 1rem;
+      font-family: inherit;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      resize: vertical;
+      min-height: 120px;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
+    }
+
+    /* Character Counter */
+    .char-counter {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      text-align: right;
+      margin-top: 4px;
+    }
+
+    /* Generate Button */
+    .generate-btn {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-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(8, 145, 178, 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(--color-primary);
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .output-area {
+      background: var(--color-surface);
+      border: 2px solid var(--color-border);
+      border-radius: 12px;
+      padding: 20px;
+      min-height: 300px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow-x: auto;
+    }
+
+    .output-area:empty::before {
+      content: "Your comprehensive empathy map explanation will appear here...";
+      color: var(--color-text-secondary);
+      font-style: italic;
+    }
+
+    /* Enhanced output styling */
+    .output-area h3 {
+      color: var(--color-primary);
+      border-bottom: 2px solid var(--color-primary);
+      padding-bottom: 8px;
+      margin: 20px 0 15px 0;
+      font-size: 1.2rem;
+    }
+
+    .output-area h4 {
+      color: var(--color-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(--color-primary);
+    }
+
+    /* Error Messages */
+    .error-message {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.2);
+      color: var(--color-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(8, 145, 178, 0.05);
+      border-top: 1px solid var(--color-border);
+      color: var(--color-text-secondary);
+      font-size: 0.9rem;
+    }
+
+    /* Hidden sections */
+    .hidden {
+      display: none !important;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      body {
+        padding: 10px;
+      }
+
+      .language-landing {
+        margin: 20px auto;
+        padding: 30px 20px;
+      }
+
+      .api-key-compact {
+        position: static;
+        margin-bottom: var(--spacing-xl);
+        max-width: none;
+      }
+
+      .language-switcher {
+        position: relative;
+        top: auto;
+        right: auto;
+        margin-bottom: var(--spacing-xl);
+        justify-content: center;
+      }
+
+      .main-content {
+        padding: 15px 20px 20px;
+      }
+
+      .header h1 {
+        font-size: 2rem;
+      }
+
+      .input-section {
+        padding: 15px;
+      }
+
+      .empathy-components {
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      }
+
+      .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;
+      }
+
+      .input-section {
+        padding: 12px;
+      }
+
+      .empathy-components {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    /* Accessibility */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Focus styles for keyboard navigation */
+    .generate-btn:focus,
+    .api-key-compact-input:focus,
+    textarea:focus {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
+  </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">EmpathyInsights Pro</h1>
+    <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with advanced empathy map analysis and user understanding insights.</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 Empathy Analysis</button>
+  </div>
+
+  <!-- Main Application -->
+  <div class="main-app" id="mainApp">
+    <div class="app-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>
+
+      <!-- Compact API Key in Top-Left -->
+      <div class="api-key-compact">
+        <label for="apiKey" class="api-key-compact-label" data-translate="api_key_short">API Key</label>
+        <input 
+          type="password" 
+          id="apiKey" 
+          class="api-key-compact-input" 
+          data-translate-placeholder="api_key_placeholder"
+          autocomplete="off"
+        >
+      </div>
+
+      <div class="main-content">
+        <!-- Header -->
+        <div class="header">
+          <h1 data-translate="app_title">EmpathyInsights Pro</h1>
+          <p class="subtitle" data-translate="app_subtitle">Advanced User Understanding & Experience Design</p>
+          <p class="description" data-translate="app_description">Generate comprehensive empathy map explanations tailored to your specific context and user research needs</p>
+        </div>
+
+        <!-- Empathy Map Components Overview -->
+        <div class="empathy-components">
+          <div class="component-card">
+            <h4 data-translate="component_says">💬 Says</h4>
+            <p data-translate="component_says_desc">Quotes & Statements</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component_thinks">💭 Thinks</h4>
+            <p data-translate="component_thinks_desc">Thoughts & Beliefs</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component_does">🎯 Does</h4>
+            <p data-translate="component_does_desc">Actions & Behaviors</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component_feels">❤️ Feels</h4>
+            <p data-translate="component_feels_desc">Emotions & Feelings</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component_pain">😰 Pain Points</h4>
+            <p data-translate="component_pain_desc">Frustrations & Obstacles</p>
+          </div>
+          <div class="component-card">
+            <h4 data-translate="component_gains">🎁 Gains</h4>
+            <p data-translate="component_gains_desc">Goals & Aspirations</p>
+          </div>
+        </div>
+
+        <!-- Input Section -->
+        <div class="input-section">
+          <h3 data-translate="input_title">📝 Context & User Research Input</h3>
+          <p class="description" data-translate="input_description">Describe your user research context, target audience, product/service, or specific empathy mapping scenario</p>
+          <textarea id="textInput" data-translate-placeholder="input_placeholder" required></textarea>
+          <div class="char-counter" id="charCounter">0 characters</div>
+        </div>
+
+        <!-- Error Message -->
+        <div class="error-message" id="errorMessage"></div>
+
+        <!-- Generate Button -->
+        <button class="generate-btn" id="generateEmpathyBtn">
+          <span class="spinner" id="spinner"></span>
+          <span id="buttonText" data-translate="generate_button">🧠 Generate Empathy Map Guide</span>
+        </button>
+
+        <!-- Output Section -->
+        <div class="output-section">
+          <h2 data-translate="output_title">🗺️ Your Personalized Empathy Map Guide</h2>
+          <div class="output-area" id="apiOutput"></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 = 'empathy_insights_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('empathy_insights_language') || 'en';
+      const savedApiKey = localStorage.getItem('empathy_insights_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('empathy_insights_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('empathy_insights_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);
+
+    // API key sync between landing and main app
+    document.getElementById('apiKeyLanding').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('empathy_insights_api_key', this.value);
+      document.getElementById('apiKey').value = this.value;
+    });
+
+    document.getElementById('apiKey').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('empathy_insights_api_key', this.value);
+      document.getElementById('apiKeyLanding').value = this.value;
+    });
+
+    // Character counter
+    const textInput = document.getElementById('textInput');
+    const charCounter = document.getElementById('charCounter');
+    
+    textInput.addEventListener('input', function() {
+      const count = this.value.length;
+      charCounter.textContent = `${count} characters`;
+      
+      if (count > 5000) {
+        charCounter.style.color = 'var(--color-warning)';
+      } else {
+        charCounter.style.color = 'var(--color-text-secondary)';
+      }
+    });
+
+    // 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 - Updated to use current language
+    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 empathy map prompt - Updated to use current language dynamically
+    function buildEmpathyMapPrompt() {
+      const textInput = document.getElementById('textInput').value.trim();
+      const languageName = languageNames[currentLanguage] || 'English';
+
+      return `Based on the following user research context and input:
+
+---------------------
+${textInput}
+---------------------
+
+Please generate a comprehensive, structured, and professionally formatted explanation of the Empathy Map Tool that directly reflects and addresses the specific context provided above. The output should be tailored to the user's scenario and formatted as clean HTML with inline CSS for professional presentation.
+
+**Required Structure (in ${languageName}):**
+
+1. **Concept & Overview**
+   - Provide an in-depth description of the Empathy Map Tool
+   - Explain its purpose, origins, and role in user experience design
+   - Connect the explanation to the specific context provided in the input
+   - Discuss its importance as a collaborative tool for gathering qualitative insights
+
+2. **Contextual Application**
+   - Explain how the empathy map applies to the specific scenario described in the input
+   - Reference relevant aspects of the user research context
+   - Provide personalized insights based on the target audience or product mentioned
+
+3. **The Six Core Components (Detailed Analysis)**
+   - **Says:** Direct quotes, statements, and verbal expressions
+   - **Thinks:** Internal thoughts, beliefs, and mental models
+   - **Does:** Observable actions, behaviors, and activities
+   - **Feels:** Emotions, feelings, and emotional states
+   - **Pain Points:** Frustrations, obstacles, and challenges
+   - **Gains:** Goals, aspirations, and desired outcomes
+
+   For each component, provide:
+   - Clear definition and purpose
+   - Specific examples relevant to the user's context
+   - Data collection strategies and techniques
+   - Best practices for accurate representation
+
+4. **Step-by-Step Process**
+   - Detailed methodology for creating an empathy map
+   - Data collection techniques (interviews, observations, surveys)
+   - Workshop facilitation guidelines
+   - Synthesis and analysis methods
+   - Validation and iteration processes
+
+5. **Benefits & Strategic Value**
+   - Enhanced customer empathy and understanding
+   - Improved product/service design decisions
+   - Better team alignment and shared understanding
+   - More effective user-centered design processes
+   - Specific benefits for the context provided
+
+6. **Implementation Best Practices**
+   - Tips for successful empathy mapping sessions
+   - Common pitfalls and how to avoid them
+   - Integration with other UX research methods
+   - Scaling empathy maps across organizations
+   - Maintaining accuracy and avoiding assumptions
+
+7. **Advanced Strategies & Insights**
+   - Digital vs. physical empathy mapping approaches
+   - Using empathy maps in different project phases
+   - Combining with personas, journey maps, and other tools
+   - Measuring the impact of empathy mapping
+   - Continuous improvement and updates
+
+**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 (blues/teals for empathy themes)
+- Ensure responsive design and readability
+- Make the content scannable with clear visual hierarchy
+
+**Language:** Generate the entire response in ${languageName}.
+
+**Tone:** Professional, educational, and directly relevant to the user's specific context. Focus on practical, actionable guidance that can be immediately applied to their empathy mapping needs.
+
+Return only the complete HTML content with inline CSS - no additional text or explanations outside the HTML.`;
+    }
+
+    // Validation function
+    function validateInputs() {
+      const textInput = document.getElementById('textInput').value.trim();
+
+      if (!textInput) {
+        document.getElementById('textInput').focus();
+        throw new Error('Please enter your user research context or scenario');
+      }
+
+      if (textInput.length < 50) {
+        document.getElementById('textInput').focus();
+        throw new Error('Please provide at least 50 characters for meaningful analysis');
+      }
+    }
+
+    // Generate empathy map explanation
+    document.getElementById('generateEmpathyBtn').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 = 'Generating Guide...';
+        
+        // Clear previous output
+        outputArea.innerHTML = '';
+        
+        // Build prompt and call API
+        const prompt = buildEmpathyMapPrompt();
+        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 Empathy Map Guide';
+      }
+    });
+
+    // Keyboard shortcut for generation
+    document.addEventListener('keydown', function(e) {
+      if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        document.getElementById('generateEmpathyBtn').click();
+      }
+    });
+
+    // Initialize app when DOM is loaded
+    document.addEventListener('DOMContentLoaded', function() {
+      initializeApp();
+    });
+  </script>
+</body>
+</html>
+

📘 Teacher & Student Guide EmpathyI.txt

@@ -0,0 +1,135 @@
+📘 Teacher & Student Guide: EmpathyInsights Pro
+1. Purpose & Classroom Impact
+EmpathyInsights Pro enables teachers and students to create deep, structured empathy maps for any project, character study, social issue, or real-world case. This builds empathy, critical thinking, and perspective-taking—key skills for 21st-century learners across subjects.
+
+2. How Teachers Can Use the Tool
+A. Lesson Integration Ideas
+Literature & Social Studies:
+
+Analyze literary characters or historical figures using empathy maps.
+
+Deepen discussions about motives, perspectives, and experiences.
+
+SEL (Social-Emotional Learning):
+
+Foster understanding of classmates’ feelings and points of view.
+
+Explore empathy in conflict resolution or anti-bullying programs.
+
+PBL/Inquiry Projects:
+
+Map stakeholders in real-world problems (e.g., environmental, community, or civic issues).
+
+Scaffold group work—students use empathy maps to assign roles or understand different interests.
+
+Language Learning:
+
+Practice cultural empathy by mapping experiences of people from different backgrounds.
+
+B. Teaching Workflow
+Introduce Empathy Mapping:
+
+Explain the six core components: Says, Thinks, Does, Feels, Pain Points, Gains.
+
+Discuss why understanding others’ experiences is essential.
+
+Scenario/Character Selection:
+
+Assign or let students choose a scenario, character, or real person to analyze.
+
+Guide Input:
+
+Support students in writing a specific, detailed context for the tool (minimum 50 characters).
+
+Generate & Discuss:
+
+Use EmpathyInsights Pro to generate a full empathy map guide.
+
+Review each section together—highlighting nuanced findings.
+
+Class Activities:
+
+Group Work: Have groups use the guide to create posters, presentations, or skits.
+
+Compare Perspectives: Different groups can map different stakeholders or characters and compare.
+
+Reflection:
+
+Ask students to reflect on how their understanding or feelings changed.
+
+Use reflective journals or class discussions to deepen learning.
+
+3. How Students Can Use the Tool
+A. Independent & Group Projects
+Literature Analysis:
+
+Map a main character’s journey across a novel or play.
+
+Current Events:
+
+Analyze the perspectives of different groups in a news story.
+
+Personal Growth:
+
+Reflect on a time you experienced strong feelings; map your own empathy map.
+
+STEAM/Design Thinking:
+
+For innovation projects, map the “user” (real or imagined) to improve product design or solutions.
+
+B. Step-by-Step Student Instructions
+Access the Tool:
+
+Open the HTML file or Hugging Face Space.
+
+Select Language:
+
+Choose your preferred language for both the UI and output.
+
+Enter Scenario:
+
+Type a detailed description of the person, group, or character you’re mapping.
+
+Example: “A teenage refugee starting a new school in a different country.”
+
+Generate Empathy Map:
+
+Click “🧠 Generate Empathy Map Guide”.
+
+Read & Apply:
+
+Review each of the six sections.
+
+Use them to write, present, or discuss your analysis.
+
+Reflect:
+
+What did you learn about perspective? What surprised you?
+
+How does this help you understand or communicate better?
+
+4. Sample Classroom Activities
+Activity Type	How to Use EmpathyInsights Pro
+Literature Circles	Each group maps a character’s feelings/thoughts/actions.
+History Debates	Map perspectives of different historical figures or nations.
+SEL Check-ins	Students map their own or peers’ experiences during an event.
+Design Projects	Teams map user needs for product or app development.
+Group Reflection	Compare maps—what patterns or surprises do you see?
+
+5. Best Practices & Tips
+Be specific: The richer your input, the more insightful the empathy map.
+
+Encourage discussion: Use output as a springboard, not just a final answer.
+
+Privacy-first: No student data leaves the browser—safe for all ages.
+
+Use multilingual support: Great for ELLs or global classrooms.
+
+6. Troubleshooting & Support
+If the output is generic, revise your scenario for more detail.
+
+Check API key if there’s an error or missing translation.
+
+For technical help: info@shiftmind.io | www.shiftmind.io
+
+EmpathyInsights Pro turns empathy from a buzzword into a practical, visible skill—empowering every classroom to build understanding and perspective, one map at a time.