Spaces:
Running
Running
| <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> |