|
|
<!DOCTYPE html> |
|
|
<html lang="en" dir="ltr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Cognitive Strategy Generator - Enhanced Learning & Critical Thinking</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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
|
|
|
*, *::before, *::after { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
|
|
|
:root { |
|
|
|
|
|
--color-primary: #2563eb; |
|
|
--color-primary-hover: #1d4ed8; |
|
|
--color-secondary: #7c3aed; |
|
|
--color-accent: #a855f7; |
|
|
--color-success: #059669; |
|
|
--color-warning: #d97706; |
|
|
--color-error: #dc2626; |
|
|
|
|
|
|
|
|
--color-background: #f8fafc; |
|
|
--color-surface: #ffffff; |
|
|
--color-surface-elevated: #ffffff; |
|
|
--color-border: #e2e8f0; |
|
|
--color-border-focus: #3b82f6; |
|
|
--color-text-primary: #1e293b; |
|
|
--color-text-secondary: #64748b; |
|
|
--color-text-muted: #94a3b8; |
|
|
|
|
|
|
|
|
--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
|
|
--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; |
|
|
|
|
|
|
|
|
--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; |
|
|
|
|
|
|
|
|
--radius-sm: 0.375rem; |
|
|
--radius-md: 0.5rem; |
|
|
--radius-lg: 0.75rem; |
|
|
--radius-xl: 1rem; |
|
|
|
|
|
|
|
|
--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); |
|
|
|
|
|
|
|
|
--transition-fast: 150ms ease-in-out; |
|
|
--transition-normal: 250ms ease-in-out; |
|
|
--transition-slow: 350ms ease-in-out; |
|
|
|
|
|
|
|
|
--container-max-width: 1400px; |
|
|
--content-max-width: 1200px; |
|
|
} |
|
|
|
|
|
|
|
|
[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); |
|
|
} |
|
|
|
|
|
|
|
|
@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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
html { |
|
|
font-size: 16px; |
|
|
line-height: 1.5; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: var(--font-family-primary); |
|
|
background-color: var(--color-background); |
|
|
color: var(--color-text-primary); |
|
|
line-height: 1.5; |
|
|
-webkit-font-smoothing: antialiased; |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
min-height: 100vh; |
|
|
transition: all 0.3s ease; |
|
|
padding: 15px; |
|
|
} |
|
|
|
|
|
|
|
|
.progress-bar { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
height: 4px; |
|
|
background: var(--color-primary); |
|
|
transition: width 0.3s ease; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
|
|
|
.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(59, 130, 246, 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(59, 130, 246, 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(37, 99, 235, 0.4); |
|
|
} |
|
|
|
|
|
.start-btn:disabled { |
|
|
opacity: 0.7; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
|
|
|
.cache-management { |
|
|
background: rgba(37, 99, 235, 0.05); |
|
|
border: 1px solid rgba(37, 99, 235, 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(5, 150, 105, 0.1); |
|
|
border: 1px solid rgba(5, 150, 105, 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%, #d97706 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(217, 119, 6, 0.4); |
|
|
} |
|
|
|
|
|
.clear-cache-btn:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
|
|
|
.cache-status { |
|
|
background: rgba(5, 150, 105, 0.1); |
|
|
border: 1px solid rgba(5, 150, 105, 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(37, 99, 235, 0.1); |
|
|
border-color: rgba(37, 99, 235, 0.2); |
|
|
color: var(--color-primary); |
|
|
} |
|
|
|
|
|
|
|
|
.translation-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(37, 99, 235, 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-app { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.app-container { |
|
|
min-height: 100vh; |
|
|
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 { |
|
|
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(37, 99, 235, 0.05); |
|
|
border: 1px solid rgba(37, 99, 235, 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(37, 99, 235, 0.1); |
|
|
} |
|
|
|
|
|
.mini-clear-cache { |
|
|
background: rgba(217, 119, 6, 0.1); |
|
|
border: 1px solid rgba(217, 119, 6, 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(217, 119, 6, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.api-key-compact { |
|
|
position: absolute; |
|
|
top: var(--spacing-lg); |
|
|
left: var(--spacing-lg); |
|
|
z-index: 10; |
|
|
background: rgba(37, 99, 235, 0.05); |
|
|
border: 1px solid rgba(37, 99, 235, 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(37, 99, 235, 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: var(--font-family-mono); |
|
|
} |
|
|
|
|
|
.api-key-compact-input:focus { |
|
|
outline: none; |
|
|
border-color: var(--color-border-focus); |
|
|
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.1); |
|
|
} |
|
|
|
|
|
.api-key-compact-input::placeholder { |
|
|
color: var(--color-text-muted); |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
|
|
|
|
|
|
.app-main { |
|
|
max-width: var(--content-max-width); |
|
|
margin: 0 auto; |
|
|
padding: 20px 30px 30px; |
|
|
padding-top: 80px; |
|
|
} |
|
|
|
|
|
.app-header { |
|
|
text-align: center; |
|
|
margin-bottom: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.app-title { |
|
|
font-size: 2.25rem; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
margin-bottom: var(--spacing-md); |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.app-subtitle { |
|
|
font-size: 1rem; |
|
|
color: var(--color-text-secondary); |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
|
|
|
.input-section { |
|
|
margin-bottom: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.input-label { |
|
|
display: block; |
|
|
font-weight: 600; |
|
|
color: var(--color-text-primary); |
|
|
margin-bottom: var(--spacing-md); |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.input-container { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.prompt-textarea { |
|
|
width: 100%; |
|
|
min-height: 120px; |
|
|
padding: var(--spacing-lg); |
|
|
border: 2px solid var(--color-border); |
|
|
border-radius: var(--radius-lg); |
|
|
font-size: 1rem; |
|
|
font-family: var(--font-family-primary); |
|
|
background: var(--color-surface); |
|
|
color: var(--color-text-primary); |
|
|
resize: vertical; |
|
|
transition: all var(--transition-fast); |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.prompt-textarea:focus { |
|
|
outline: none; |
|
|
border-color: var(--color-border-focus); |
|
|
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1); |
|
|
} |
|
|
|
|
|
.prompt-textarea::placeholder { |
|
|
color: var(--color-text-muted); |
|
|
} |
|
|
|
|
|
.character-counter { |
|
|
position: absolute; |
|
|
bottom: var(--spacing-sm); |
|
|
right: var(--spacing-md); |
|
|
font-size: 0.75rem; |
|
|
color: var(--color-text-muted); |
|
|
background: var(--color-surface); |
|
|
padding: var(--spacing-xs) var(--spacing-sm); |
|
|
border-radius: var(--radius-sm); |
|
|
} |
|
|
|
|
|
|
|
|
.action-section { |
|
|
text-align: center; |
|
|
margin-bottom: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.generate-button { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
padding: var(--spacing-md) var(--spacing-xl); |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
color: white; |
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); |
|
|
border: none; |
|
|
border-radius: var(--radius-lg); |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-normal); |
|
|
box-shadow: var(--shadow-md); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.generate-button:hover:not(:disabled) { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.generate-button:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.generate-button:disabled { |
|
|
opacity: 0.7; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
.button-text { |
|
|
transition: opacity var(--transition-fast); |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
display: none; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
border: 2px solid rgba(255, 255, 255, 0.3); |
|
|
border-top: 2px solid white; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.output-section { |
|
|
margin-bottom: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.output-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.output-title { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 600; |
|
|
color: var(--color-text-primary); |
|
|
} |
|
|
|
|
|
.copy-button { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-xs); |
|
|
padding: var(--spacing-sm) var(--spacing-md); |
|
|
font-size: 0.875rem; |
|
|
font-weight: 500; |
|
|
color: var(--color-primary); |
|
|
background: transparent; |
|
|
border: 1px solid var(--color-primary); |
|
|
border-radius: var(--radius-md); |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-fast); |
|
|
} |
|
|
|
|
|
.copy-button:hover { |
|
|
background: var(--color-primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.output-container { |
|
|
background: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: var(--spacing-lg); |
|
|
box-shadow: var(--shadow-sm); |
|
|
transition: all var(--transition-normal); |
|
|
} |
|
|
|
|
|
.output-container:hover { |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.output-content { |
|
|
font-family: var(--font-family-primary); |
|
|
line-height: 1.6; |
|
|
color: var(--color-text-primary); |
|
|
white-space: pre-wrap; |
|
|
word-wrap: break-word; |
|
|
} |
|
|
|
|
|
.output-content h1, |
|
|
.output-content h2, |
|
|
.output-content h3 { |
|
|
color: var(--color-text-primary); |
|
|
margin-top: var(--spacing-lg); |
|
|
margin-bottom: var(--spacing-md); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.output-content h1 { |
|
|
font-size: 1.375rem; |
|
|
border-bottom: 2px solid var(--color-border); |
|
|
padding-bottom: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.output-content h2 { |
|
|
font-size: 1.125rem; |
|
|
color: var(--color-primary); |
|
|
} |
|
|
|
|
|
.output-content h3 { |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.output-content p { |
|
|
margin-bottom: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.output-content ul, |
|
|
.output-content ol { |
|
|
margin-left: var(--spacing-lg); |
|
|
margin-bottom: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.output-content li { |
|
|
margin-bottom: var(--spacing-xs); |
|
|
} |
|
|
|
|
|
.empty-state { |
|
|
text-align: center; |
|
|
padding: var(--spacing-2xl); |
|
|
color: var(--color-text-muted); |
|
|
} |
|
|
|
|
|
.empty-state-icon { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: var(--spacing-md); |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.empty-state-text { |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.error-message { |
|
|
background: #fef2f2; |
|
|
border: 1px solid #fecaca; |
|
|
color: #dc2626; |
|
|
padding: var(--spacing-md); |
|
|
border-radius: var(--radius-md); |
|
|
margin-bottom: var(--spacing-md); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.error-icon { |
|
|
font-size: 1.125rem; |
|
|
} |
|
|
|
|
|
.error-dismiss { |
|
|
margin-left: auto; |
|
|
background: none; |
|
|
border: none; |
|
|
color: #dc2626; |
|
|
cursor: pointer; |
|
|
font-size: 1.125rem; |
|
|
padding: var(--spacing-xs); |
|
|
} |
|
|
|
|
|
|
|
|
.app-footer { |
|
|
text-align: center; |
|
|
padding: var(--spacing-lg) 0; |
|
|
color: var(--color-text-muted); |
|
|
font-size: 0.875rem; |
|
|
border-top: 1px solid var(--color-border); |
|
|
margin-top: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
|
|
|
.hidden { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
|
|
|
@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; |
|
|
} |
|
|
|
|
|
.app-main { |
|
|
padding: 15px 20px 20px; |
|
|
padding-top: 20px; |
|
|
} |
|
|
|
|
|
.app-title { |
|
|
font-size: 1.875rem; |
|
|
} |
|
|
|
|
|
.app-subtitle { |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.prompt-textarea { |
|
|
min-height: 100px; |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.generate-button { |
|
|
width: 100%; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.output-header { |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.empty-state { |
|
|
padding: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.empty-state-icon { |
|
|
font-size: 2rem; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.language-landing h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.app-title { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
.generate-button:focus, |
|
|
.copy-button:focus, |
|
|
.api-key-compact-input:focus, |
|
|
.prompt-textarea:focus { |
|
|
outline: 2px solid var(--color-primary); |
|
|
outline-offset: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
@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> |
|
|
|
|
|
<div class="progress-bar" id="progressBar"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="language-landing" id="languageLanding"> |
|
|
<h1 data-translate="app_title">AI Cognitive Strategy Generator</h1> |
|
|
<p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with enhanced learning and critical thinking strategy generation.</p> |
|
|
|
|
|
|
|
|
<div class="cache-status" id="cacheStatus"> |
|
|
💾 Translations cached - instant loading! |
|
|
</div> |
|
|
|
|
|
|
|
|
<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 AI Cognitive Strategy Generator</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-app" id="mainApp"> |
|
|
<div class="app-container"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<main class="app-main"> |
|
|
<header class="app-header"> |
|
|
<h1 class="app-title" data-translate="app_title">AI Cognitive Strategy Generator</h1> |
|
|
<p class="app-subtitle" data-translate="app_subtitle"> |
|
|
Generate tailored strategies to enhance cognitive abilities and boost confidence, |
|
|
plus learn how to mitigate potential negative impacts of generative AI on cognitive skills. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<section class="input-section"> |
|
|
<label for="userPrompt" class="input-label" data-translate="input_label">Enter Your Prompt</label> |
|
|
<div class="input-container"> |
|
|
<textarea |
|
|
id="userPrompt" |
|
|
class="prompt-textarea" |
|
|
data-translate-placeholder="input_placeholder" |
|
|
required |
|
|
maxlength="2000" |
|
|
></textarea> |
|
|
<div class="character-counter" id="characterCounter">0 / 2000</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="action-section"> |
|
|
<button id="generateBtn" class="generate-button"> |
|
|
<span class="button-text" data-translate="generate_button">Generate Strategies</span> |
|
|
<div class="loading-spinner" id="loadingSpinner"></div> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
<section class="output-section"> |
|
|
<div class="output-header"> |
|
|
<h2 class="output-title" data-translate="output_title">Enhanced Strategy Output</h2> |
|
|
<button id="copyBtn" class="copy-button" style="display: none;"> |
|
|
<span>📋</span> |
|
|
<span data-translate="copy_button">Copy to Clipboard</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="output-container"> |
|
|
<div id="outputArea" class="output-content"> |
|
|
<div class="empty-state"> |
|
|
<div class="empty-state-icon">🧠</div> |
|
|
<div class="empty-state-text" data-translate="empty_state">Your AI-generated cognitive strategies will appear here</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer class="app-footer"> |
|
|
<p>Created By <strong>Shift Mind AI Labs</strong></p> |
|
|
</footer> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku']; |
|
|
|
|
|
|
|
|
let currentLanguage = 'en'; |
|
|
let currentApiKey = ''; |
|
|
|
|
|
|
|
|
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' |
|
|
}; |
|
|
|
|
|
|
|
|
const CACHE_PREFIX = 'aicognitive_translations_'; |
|
|
const CACHE_VERSION = '1.0'; |
|
|
|
|
|
|
|
|
const AppConfig = { |
|
|
API_BASE_URL: 'https://api.openai.com/v1/chat/completions', |
|
|
MODEL: 'gpt-4o-mini', |
|
|
MAX_TOKENS: 3000, |
|
|
TEMPERATURE: 0.7, |
|
|
MAX_PROMPT_LENGTH: 2000 |
|
|
}; |
|
|
|
|
|
|
|
|
const AppState = { |
|
|
apiKey: '', |
|
|
isLoading: false, |
|
|
currentPrompt: '', |
|
|
lastResult: '', |
|
|
|
|
|
setApiKey(key) { |
|
|
this.apiKey = key; |
|
|
this.saveToLocalStorage(); |
|
|
}, |
|
|
|
|
|
setLoading(loading) { |
|
|
this.isLoading = loading; |
|
|
UIController.updateLoadingState(loading); |
|
|
}, |
|
|
|
|
|
saveToLocalStorage() { |
|
|
try { |
|
|
localStorage.setItem('aiCognitiveStrategy_apiKey', this.apiKey); |
|
|
} catch (e) { |
|
|
console.warn('Could not save to localStorage:', e); |
|
|
} |
|
|
}, |
|
|
|
|
|
loadFromLocalStorage() { |
|
|
try { |
|
|
this.apiKey = localStorage.getItem('aiCognitiveStrategy_apiKey') || ''; |
|
|
} catch (e) { |
|
|
console.warn('Could not load from localStorage:', e); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
function isLanguageCached(language) { |
|
|
const cacheKey = CACHE_PREFIX + language; |
|
|
const cached = localStorage.getItem(cacheKey); |
|
|
return cached !== null; |
|
|
} |
|
|
|
|
|
|
|
|
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}`); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
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)) { |
|
|
|
|
|
cachedLanguages.forEach(language => { |
|
|
const cacheKey = CACHE_PREFIX + language; |
|
|
localStorage.removeItem(cacheKey); |
|
|
}); |
|
|
|
|
|
|
|
|
updateCacheStatus(currentLanguage); |
|
|
updateCacheStatusDisplay(); |
|
|
|
|
|
alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`); |
|
|
|
|
|
|
|
|
if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) { |
|
|
if (confirm('Would you like to reload the current language translations?')) { |
|
|
applyLanguage(currentLanguage); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initializeApp() { |
|
|
|
|
|
const savedLanguage = localStorage.getItem('aicognitive_language') || 'en'; |
|
|
const savedApiKey = localStorage.getItem('aiCognitiveStrategy_apiKey') || ''; |
|
|
|
|
|
currentLanguage = savedLanguage; |
|
|
currentApiKey = savedApiKey; |
|
|
|
|
|
|
|
|
document.getElementById('languageSelect').value = currentLanguage; |
|
|
document.getElementById('apiKeyLanding').value = currentApiKey; |
|
|
|
|
|
|
|
|
applyDirection(currentLanguage); |
|
|
|
|
|
|
|
|
updateCacheStatus(currentLanguage); |
|
|
updateCacheStatusDisplay(); |
|
|
|
|
|
|
|
|
if (currentApiKey && currentLanguage) { |
|
|
showMainApp(); |
|
|
} else { |
|
|
showLanguageLanding(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function applyDirection(language) { |
|
|
currentLanguage = language; |
|
|
|
|
|
|
|
|
document.documentElement.lang = language; |
|
|
document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr'; |
|
|
|
|
|
|
|
|
localStorage.setItem('aicognitive_language', language); |
|
|
|
|
|
|
|
|
updateCacheStatus(language); |
|
|
} |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
function applyCachedTranslations(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; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function translateInterface(targetLanguage) { |
|
|
if (targetLanguage === 'en') { |
|
|
|
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const cachedTranslations = loadTranslationsFromCache(targetLanguage); |
|
|
if (cachedTranslations) { |
|
|
|
|
|
console.log('Using cached translations for', targetLanguage); |
|
|
applyCachedTranslations(cachedTranslations); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
showTranslationOverlay(); |
|
|
|
|
|
try { |
|
|
|
|
|
const elements = document.querySelectorAll('[data-translate]'); |
|
|
const placeholderElements = document.querySelectorAll('[data-translate-placeholder]'); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
const translationsCache = { |
|
|
texts: {}, |
|
|
placeholders: {} |
|
|
}; |
|
|
|
|
|
|
|
|
const batchSize = 10; |
|
|
const allTexts = [...textsToTranslate, ...placeholdersToTranslate]; |
|
|
|
|
|
for (let i = 0; i < allTexts.length; i += batchSize) { |
|
|
const batch = allTexts.slice(i, i + batchSize); |
|
|
|
|
|
|
|
|
updateTranslationProgress(i, allTexts.length); |
|
|
|
|
|
|
|
|
const translations = await Promise.all( |
|
|
batch.map(text => translateText(text, targetLanguage)) |
|
|
); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
saveTranslationsToCache(targetLanguage, translationsCache); |
|
|
|
|
|
|
|
|
updateCacheStatus(targetLanguage); |
|
|
updateCacheStatusDisplay(); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Translation error:', error); |
|
|
UIController.showError('Translation failed: ' + error.message); |
|
|
} finally { |
|
|
hideTranslationOverlay(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showTranslationOverlay() { |
|
|
document.getElementById('translationOverlay').style.display = 'flex'; |
|
|
} |
|
|
|
|
|
|
|
|
function hideTranslationOverlay() { |
|
|
document.getElementById('translationOverlay').style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
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)`; |
|
|
} |
|
|
|
|
|
|
|
|
async function applyLanguage(language) { |
|
|
applyDirection(language); |
|
|
|
|
|
if (language !== 'en') { |
|
|
await translateInterface(language); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showLanguageLanding() { |
|
|
document.getElementById('languageLanding').style.display = 'block'; |
|
|
document.getElementById('mainApp').style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
function showMainApp() { |
|
|
document.getElementById('languageLanding').style.display = 'none'; |
|
|
document.getElementById('mainApp').style.display = 'block'; |
|
|
|
|
|
|
|
|
document.getElementById('apiKey').value = currentApiKey; |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
localStorage.setItem('aiCognitiveStrategy_apiKey', apiKey); |
|
|
|
|
|
|
|
|
await applyLanguage(selectedLanguage); |
|
|
|
|
|
|
|
|
showMainApp(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('languageSelect').addEventListener('change', async function() { |
|
|
const selectedLanguage = this.value; |
|
|
updateCacheStatus(selectedLanguage); |
|
|
|
|
|
if (currentApiKey) { |
|
|
await applyLanguage(selectedLanguage); |
|
|
} else { |
|
|
applyDirection(selectedLanguage); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache); |
|
|
|
|
|
|
|
|
document.getElementById('apiKeyLanding').addEventListener('input', function() { |
|
|
currentApiKey = this.value; |
|
|
localStorage.setItem('aiCognitiveStrategy_apiKey', this.value); |
|
|
document.getElementById('apiKey').value = this.value; |
|
|
}); |
|
|
|
|
|
document.getElementById('apiKey').addEventListener('input', function() { |
|
|
currentApiKey = this.value; |
|
|
localStorage.setItem('aiCognitiveStrategy_apiKey', this.value); |
|
|
document.getElementById('apiKeyLanding').value = this.value; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const { scrollTop, scrollHeight } = document.documentElement; |
|
|
const scrolled = (scrollTop / (scrollHeight - window.innerHeight)) * 100; |
|
|
document.getElementById('progressBar').style.width = `${scrolled}%`; |
|
|
}); |
|
|
|
|
|
|
|
|
const APIService = { |
|
|
async callOpenAI(prompt, apiKey) { |
|
|
const payload = { |
|
|
model: AppConfig.MODEL, |
|
|
messages: [{ role: 'user', content: prompt }], |
|
|
max_tokens: AppConfig.MAX_TOKENS, |
|
|
temperature: AppConfig.TEMPERATURE |
|
|
}; |
|
|
|
|
|
const response = await fetch(AppConfig.API_BASE_URL, { |
|
|
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 || `HTTP ${response.status}: ${response.statusText}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
return data.choices[0].message.content; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const PromptBuilder = { |
|
|
buildCompositePrompt(userPrompt) { |
|
|
const languageName = languageNames[currentLanguage] || 'English'; |
|
|
|
|
|
return `**Important: Generate the entire response in ${languageName}. All content, headings, explanations, and strategy elements must be written in ${languageName}.** |
|
|
|
|
|
You are a professional educational strategist and cognitive scientist specializing in AI integration in learning. Based on the prompt provided below, generate two distinct sections in your response: |
|
|
|
|
|
Section 1: Critical Thinking Strategies |
|
|
- Describe innovative ways in which AI can enhance cognitive abilities and boost learner confidence. |
|
|
- Provide actionable recommendations and examples. |
|
|
|
|
|
Section 2: Mitigation Strategies |
|
|
- Suggest methods to minimize the negative impacts of generative AI on cognitive skills. |
|
|
- Provide practical recommendations and safeguards to protect cognitive development. |
|
|
|
|
|
Your response must be tailored to the prompt and presented in a clear, structured format with appropriate headings in ${languageName}. |
|
|
|
|
|
Prompt: |
|
|
<<<BEGIN PROMPT>>> |
|
|
${userPrompt} |
|
|
<<<END PROMPT>>> |
|
|
|
|
|
Output only the final enhanced prompt in ${languageName}. |
|
|
`.trim(); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const UIController = { |
|
|
elements: {}, |
|
|
|
|
|
init() { |
|
|
this.elements = { |
|
|
apiKeyInput: document.getElementById('apiKey'), |
|
|
promptTextarea: document.getElementById('userPrompt'), |
|
|
generateBtn: document.getElementById('generateBtn'), |
|
|
loadingSpinner: document.getElementById('loadingSpinner'), |
|
|
buttonText: document.querySelector('.button-text'), |
|
|
outputArea: document.getElementById('outputArea'), |
|
|
copyBtn: document.getElementById('copyBtn'), |
|
|
characterCounter: document.getElementById('characterCounter') |
|
|
}; |
|
|
|
|
|
this.setupEventListeners(); |
|
|
this.updateCharacterCounter(); |
|
|
}, |
|
|
|
|
|
setupEventListeners() { |
|
|
this.elements.apiKeyInput.addEventListener('input', (e) => { |
|
|
AppState.setApiKey(e.target.value.trim()); |
|
|
}); |
|
|
|
|
|
this.elements.promptTextarea.addEventListener('input', () => { |
|
|
this.updateCharacterCounter(); |
|
|
}); |
|
|
|
|
|
this.elements.generateBtn.addEventListener('click', () => { |
|
|
App.handleSubmit(); |
|
|
}); |
|
|
|
|
|
this.elements.copyBtn.addEventListener('click', () => { |
|
|
this.copyToClipboard(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { |
|
|
e.preventDefault(); |
|
|
App.handleSubmit(); |
|
|
} |
|
|
}); |
|
|
}, |
|
|
|
|
|
updateCharacterCounter() { |
|
|
const length = this.elements.promptTextarea.value.length; |
|
|
const maxLength = AppConfig.MAX_PROMPT_LENGTH; |
|
|
this.elements.characterCounter.textContent = `${length} / ${maxLength}`; |
|
|
|
|
|
if (length > maxLength * 0.9) { |
|
|
this.elements.characterCounter.style.color = 'var(--color-warning)'; |
|
|
} else { |
|
|
this.elements.characterCounter.style.color = 'var(--color-text-muted)'; |
|
|
} |
|
|
}, |
|
|
|
|
|
updateLoadingState(isLoading) { |
|
|
if (isLoading) { |
|
|
this.elements.generateBtn.disabled = true; |
|
|
this.elements.buttonText.style.opacity = '0'; |
|
|
this.elements.loadingSpinner.style.display = 'block'; |
|
|
} else { |
|
|
this.elements.generateBtn.disabled = false; |
|
|
this.elements.buttonText.style.opacity = '1'; |
|
|
this.elements.loadingSpinner.style.display = 'none'; |
|
|
} |
|
|
}, |
|
|
|
|
|
displayResults(content) { |
|
|
this.elements.outputArea.innerHTML = this.formatOutput(content); |
|
|
this.elements.copyBtn.style.display = 'inline-flex'; |
|
|
AppState.lastResult = content; |
|
|
|
|
|
|
|
|
this.announceToScreenReader('Strategy generation completed. Results are now available.'); |
|
|
}, |
|
|
|
|
|
formatOutput(content) { |
|
|
|
|
|
return content |
|
|
.replace(/^# (.*$)/gm, '<h1>$1</h1>') |
|
|
.replace(/^## (.*$)/gm, '<h2>$1</h2>') |
|
|
.replace(/^### (.*$)/gm, '<h3>$1</h3>') |
|
|
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') |
|
|
.replace(/\*(.*?)\*/g, '<em>$1</em>') |
|
|
.replace(/\n\n/g, '</p><p>') |
|
|
.replace(/^(.*)$/gm, '<p>$1</p>') |
|
|
.replace(/<p><\/p>/g, '') |
|
|
.replace(/<p>(<h[1-6]>.*?<\/h[1-6]>)<\/p>/g, '$1'); |
|
|
}, |
|
|
|
|
|
showError(message) { |
|
|
const errorHtml = ` |
|
|
<div class="error-message"> |
|
|
<span class="error-icon">⚠️</span> |
|
|
<span class="error-text">${message}</span> |
|
|
<button class="error-dismiss" onclick="this.parentElement.remove()">×</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
this.elements.outputArea.innerHTML = errorHtml + this.elements.outputArea.innerHTML; |
|
|
this.announceToScreenReader(`Error: ${message}`); |
|
|
}, |
|
|
|
|
|
async copyToClipboard() { |
|
|
try { |
|
|
await navigator.clipboard.writeText(AppState.lastResult); |
|
|
|
|
|
|
|
|
const originalText = this.elements.copyBtn.innerHTML; |
|
|
this.elements.copyBtn.innerHTML = '<span>✅</span> Copied!'; |
|
|
|
|
|
setTimeout(() => { |
|
|
this.elements.copyBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
|
|
|
this.announceToScreenReader('Content copied to clipboard'); |
|
|
} catch (err) { |
|
|
console.error('Failed to copy:', err); |
|
|
this.announceToScreenReader('Failed to copy content'); |
|
|
} |
|
|
}, |
|
|
|
|
|
announceToScreenReader(message) { |
|
|
const announcement = document.createElement('div'); |
|
|
announcement.setAttribute('aria-live', 'polite'); |
|
|
announcement.setAttribute('aria-atomic', 'true'); |
|
|
announcement.className = 'sr-only'; |
|
|
announcement.textContent = message; |
|
|
document.body.appendChild(announcement); |
|
|
|
|
|
setTimeout(() => { |
|
|
document.body.removeChild(announcement); |
|
|
}, 1000); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const ErrorHandler = { |
|
|
handleError(error) { |
|
|
console.error('Application error:', error); |
|
|
|
|
|
let userMessage = 'An unexpected error occurred. Please try again.'; |
|
|
|
|
|
if (error.message.includes('API key')) { |
|
|
userMessage = 'Invalid API key. Please check your OpenAI API key and try again.'; |
|
|
} else if (error.message.includes('network') || error.message.includes('fetch')) { |
|
|
userMessage = 'Network error. Please check your internet connection and try again.'; |
|
|
} else if (error.message.includes('rate limit')) { |
|
|
userMessage = 'Rate limit exceeded. Please wait a moment before trying again.'; |
|
|
} else if (error.message.includes('quota')) { |
|
|
userMessage = 'API quota exceeded. Please check your OpenAI account usage.'; |
|
|
} |
|
|
|
|
|
UIController.showError(userMessage); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const InputValidator = { |
|
|
validateApiKey(apiKey) { |
|
|
if (!apiKey || apiKey.length < 10) { |
|
|
throw new Error('Please enter a valid OpenAI API key.'); |
|
|
} |
|
|
|
|
|
if (!apiKey.startsWith('sk-')) { |
|
|
throw new Error('OpenAI API key should start with "sk-".'); |
|
|
} |
|
|
|
|
|
return true; |
|
|
}, |
|
|
|
|
|
validatePrompt(prompt) { |
|
|
if (!prompt || prompt.trim().length === 0) { |
|
|
throw new Error('Please enter a prompt before generating strategies.'); |
|
|
} |
|
|
|
|
|
if (prompt.length > AppConfig.MAX_PROMPT_LENGTH) { |
|
|
throw new Error(`Prompt is too long. Maximum ${AppConfig.MAX_PROMPT_LENGTH} characters allowed.`); |
|
|
} |
|
|
|
|
|
return true; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const App = { |
|
|
init() { |
|
|
AppState.loadFromLocalStorage(); |
|
|
UIController.init(); |
|
|
|
|
|
|
|
|
if (AppState.apiKey) { |
|
|
UIController.elements.apiKeyInput.value = AppState.apiKey; |
|
|
} |
|
|
|
|
|
console.log('AI Cognitive Strategy Generator initialized'); |
|
|
}, |
|
|
|
|
|
async handleSubmit() { |
|
|
if (AppState.isLoading) return; |
|
|
|
|
|
try { |
|
|
const apiKey = UIController.elements.apiKeyInput.value.trim(); |
|
|
const userPrompt = UIController.elements.promptTextarea.value.trim(); |
|
|
|
|
|
|
|
|
InputValidator.validateApiKey(apiKey); |
|
|
InputValidator.validatePrompt(userPrompt); |
|
|
|
|
|
|
|
|
AppState.setApiKey(apiKey); |
|
|
AppState.currentPrompt = userPrompt; |
|
|
AppState.setLoading(true); |
|
|
|
|
|
|
|
|
const compositePrompt = PromptBuilder.buildCompositePrompt(userPrompt); |
|
|
console.log('Composite Prompt:', compositePrompt); |
|
|
|
|
|
|
|
|
const result = await APIService.callOpenAI(compositePrompt, apiKey); |
|
|
|
|
|
|
|
|
UIController.displayResults(result); |
|
|
|
|
|
} catch (error) { |
|
|
ErrorHandler.handleError(error); |
|
|
} finally { |
|
|
AppState.setLoading(false); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
initializeApp(); |
|
|
App.init(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
