Feature: EN/HR language toggle on login + full app i18n

backend/api.py

@@ -70,7 +70,8 @@ AVAILABLE_MODELS = {
     },
 }
 
-SYSTEM_PROMPT = """Ti si "Learn Pathophysiology AI", strucni asistent za ucenje patofiziologije
+SYSTEM_PROMPTS = {
+    "hr": """Ti si "Learn Pathophysiology AI", strucni asistent za ucenje patofiziologije
 za studente medicine.
 
 ULOGA:
@@ -87,7 +88,30 @@ PRAVILA:
 2. Ako nisi siguran, reci to otvoreno
 3. Koristi medicinsku terminologiju, ali objasni kompleksne termine
 4. Budi koncizan ali potpun u odgovorima
-5. Odgovaraj na hrvatskom jeziku"""
+5. Odgovaraj na hrvatskom jeziku""",
+
+    "en": """You are "Learn Pathophysiology AI", an expert assistant for learning pathophysiology
+for medical students.
+
+ROLE:
+- Explain pathophysiological concepts clearly and precisely
+- Use examples and analogies when possible
+- Connect concepts to clinical practice
+- Respond in English
+
+KNOWLEDGE BASE CONTEXT:
+{rag_context}
+
+RULES:
+1. Always cite the source when using information from the context
+2. If you are unsure, say so openly
+3. Use medical terminology but explain complex terms
+4. Be concise but thorough in your answers
+5. Respond in English""",
+}
+
+def get_system_prompt(lang: str = "hr") -> str:
+    return SYSTEM_PROMPTS.get(lang, SYSTEM_PROMPTS["hr"])
 
 # =============================================================================
 # SINGLETONS
@@ -215,23 +239,26 @@ def query_rag(query_text: str, top_k: int = RAG_TOP_K):
         return "Nema dostupnog konteksta.", []
 
 
-def generate_chat_response(message: str, history: list, model_name: str = ""):
+def generate_chat_response(message: str, history: list, model_name: str = "", lang: str = "hr"):
     model_name = model_name or DEFAULT_MODEL
     if model_name not in AVAILABLE_MODELS:
         model_name = DEFAULT_MODEL
 
     c = get_client()
     rag_context, citations = query_rag(message)
-    system_prompt = SYSTEM_PROMPT.format(rag_context=rag_context)
+    system_prompt = get_system_prompt(lang).format(rag_context=rag_context)
+
+    student_label = "Student" if lang == "hr" else "Student"
+    assistant_label = "Asistent" if lang == "hr" else "Assistant"
 
     contents = [system_prompt]
     for msg in (history or [])[-10:]:
         role = msg.get("role", "user")
         content = msg.get("content", "")
         if role == "user":
-            contents.append(f"Student: {content}")
+            contents.append(f"{student_label}: {content}")
         else:
-            contents.append(f"Asistent: {content}")
+            contents.append(f"{assistant_label}: {content}")
     contents.append(f"Student: {message}")
 
     response = c.models.generate_content(
@@ -313,6 +340,7 @@ app.add_middleware(
 class ChatRequest(BaseModel):
     message: str
     model: str = ""
+    lang: str = "hr"
     history: list = []
 
 
@@ -402,7 +430,7 @@ async def stats():
 async def chat(req: ChatRequest, user=Depends(require_auth)):
     try:
         model = req.model or DEFAULT_MODEL
-        reply, citations = generate_chat_response(req.message, req.history, model)
+        reply, citations = generate_chat_response(req.message, req.history, model, req.lang)
         return {"reply": reply, "citations": citations, "model_used": model}
     except Exception as e:
         logger.error(f"Chat error: {e}")

backend/static/assets/index-BVDvGT2M.css

@@ -1 +0,0 @@
-@charset "UTF-8";.btn{width:100%;height:100%;position:relative;background:var(--v854fa1ce) no-repeat;background-size:100% 100%;color:var(--v548a9e4c);-webkit-user-select:none;user-select:none;-webkit-mask-image:var(--v854fa1ce);-webkit-mask-size:100% 100%}.btn__capt{width:100%;position:absolute;text-align:center;bottom:0}.btn--d{font-size:14px;letter-spacing:.5px;line-height:180%}.btn--s{height:32px;line-height:32px;min-width:100px}.btn--m{height:48px;line-height:48px;min-width:200px}*:not([disabled])+.btn:hover:before{content:"";position:absolute;width:100%;height:100%;background:var(--ba36690e) no-repeat;background-size:100% 100%;left:0;top:0;mix-blend-mode:screen}*:not([disabled])+.btn:active{background-image:var(--v4e4c04fa)}*:not([disabled])+.btn:active .btn__capt{left:3px;bottom:-2px}[disabled]+.btn{background-image:var(--v512606b8);pointer-events:all!important;color:#646464}.cursored,.cursored *{cursor:none}.cursor{position:relative;width:32px;height:32px;background:var(--v7b062dde) no-repeat}.cursor__container{top:0;left:0;position:fixed;z-index:99;pointer-events:none}.cursor--default-active{animation:cursor-active .5s steps(8) infinite}.cursor--pointer{background-position:-32px -96px}.cursor--pointer-active{animation:cursor-pointer .5s steps(8) infinite}.cursor--pointer-denied{background-position:-64px -96px}.cursor--hold{background-position:-128px -96px}.cursor--arrow-top{animation:cursor-arrow .1s steps(3) infinite;transform:rotate(-90deg)}.cursor--arrow-right{animation:cursor-arrow .1s steps(3) infinite}.cursor--arrow-bottom{animation:cursor-arrow .1s steps(3) infinite;transform:rotate(90deg)}.cursor--arrow-left{animation:cursor-arrow .1s steps(3) infinite;transform:rotate(-180deg)}@keyframes cursor-active{0%{background-position:0 0}to{background-position:-256px 0}}@keyframes cursor-pointer{0%{background-position:0 -64px}to{background-position:-256px -64px}}@keyframes cursor-arrow{0%{background-position:-160px -96px}to{background-position:-256px -96px}}.chat-area[data-v-b84b5170]{flex:1;overflow:hidden;display:flex;flex-direction:column}.messages-container[data-v-b84b5170]{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}.login-page{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#12122a,#0a0a16,#050510)}.login-card{width:100%;max-width:480px;padding:2rem}.login-frame{background:linear-gradient(180deg,#13132a,#0d0d1f);border:2px solid var(--wc3-gold-dim, #8b7b4f);border-radius:6px;padding:2.5rem 2rem;text-align:center;box-shadow:0 0 40px #c8aa6e14,inset 0 1px #c8aa6e1a}.login-icon{font-size:3rem;margin-bottom:.75rem;filter:drop-shadow(0 0 10px rgba(200,170,110,.4))}.login-frame h1{font-family:var(--font-display, "Cinzel Decorative", serif);font-size:1.5rem;font-weight:900;background:linear-gradient(180deg,#f0d060,#c8aa6e,#8b7b4f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;margin-bottom:.25rem;word-break:keep-all}.login-frame .subtitle{font-family:var(--font-body, "Crimson Text", serif);color:var(--wc3-text-dim, #7a6e5a);font-style:italic;font-size:.95rem}.login-prompt{font-family:var(--font-heading, "Cinzel", serif);color:var(--wc3-gold, #c8aa6e);font-size:.9rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1.25rem}.g-btn-container{display:flex;justify-content:center;min-height:44px;margin-bottom:.5rem}.login-loading{color:var(--wc3-gold, #c8aa6e);font-size:.85rem;margin-top:.75rem;animation:pulse 1.5s ease-in-out infinite}.login-error{color:#f66;font-size:.85rem;margin-top:.75rem}.iframe-hint{color:var(--wc3-text-dim, #7a6e5a);font-size:.78rem;margin-top:1rem;line-height:1.6}.direct-link{color:var(--wc3-gold, #c8aa6e);text-decoration:underline;text-underline-offset:2px;word-break:break-all}.direct-link:hover{color:var(--wc3-gold-bright, #f0d060)}.login-footer{font-size:.8rem;color:var(--wc3-text-dim, #7a6e5a);font-style:italic;line-height:1.6}.login-footer-dim{color:var(--wc3-text-muted, #555060);font-size:.75rem}:root{--wc3-bg: #0a0a0f;--wc3-bg-panel: #0f0f1a;--wc3-gold: #c8aa6e;--wc3-gold-bright: #f0d060;--wc3-gold-dim: #8b7b4f;--wc3-text: #d4c4a0;--wc3-text-light: #f0e6d0;--wc3-text-dim: #7a6e5a;--wc3-text-muted: #555060;--wc3-border: #5a4a2a;--wc3-border-dim: #3a2e1e;--wc3-red-soft: rgba(140, 40, 40, .25);--wc3-blue-soft: rgba(30, 50, 90, .35);--font-heading: "Cinzel", serif;--font-display: "Cinzel Decorative", "Cinzel", serif;--font-body: "Crimson Text", serif;--sidebar-w: 270px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--wc3-bg);color:var(--wc3-text);font-family:var(--font-body);line-height:1.6}#app{height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--wc3-gold-dim),#4a3a20);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--wc3-gold)}.app-shell{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:linear-gradient(180deg,#0f0f22,#0a0a18);border-right:2px solid var(--wc3-border);display:flex;flex-direction:column;overflow-y:auto;padding:1rem;box-shadow:2px 0 20px #00000080}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at top center,#12122a,#0a0a16 60%,#070710)}.app-header{text-align:center;padding:1.25rem 1rem .5rem;flex-shrink:0}.header-frame h1{font-family:var(--font-display);font-size:2rem;font-weight:900;background:linear-gradient(180deg,#f0d060,#c8aa6e,#8b7b4f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}.header-frame .subtitle{font-family:var(--font-body);color:var(--wc3-text-dim);font-style:italic;font-size:.95rem;margin-top:.15rem}.gold-divider{height:1px;background:linear-gradient(90deg,transparent,var(--wc3-gold-dim),transparent);margin:.75rem 0;border:none}.tab-bar{display:flex;gap:.5rem;padding:.35rem 1.5rem;border-bottom:1px solid var(--wc3-border-dim);flex-shrink:0}.tab-btn-wrap{height:32px;min-width:120px}.tab-trigger.active{filter:brightness(1.3)}.msg{max-width:85%;padding:.85rem 1.15rem;border-radius:6px;line-height:1.65;font-size:1rem;border:1px solid transparent;animation:fadeSlide .25s ease}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.msg.user{align-self:flex-end;background:linear-gradient(135deg,#8c282859,#5a191940);border-color:#c850504d;color:var(--wc3-text-light)}.msg.assistant{align-self:flex-start;background:linear-gradient(135deg,#141e4173,#0f14324d);border-color:#6482c840;color:var(--wc3-text-light)}.msg h1,.msg h2,.msg h3,.msg h4{font-family:var(--font-heading);color:var(--wc3-gold);margin:.75rem 0 .35rem}.msg h1{font-size:1.3rem}.msg h2{font-size:1.15rem}.msg h3{font-size:1.05rem}.msg p{margin:.4rem 0}.msg strong{color:var(--wc3-gold-bright)}.msg em{font-style:italic}.msg ul,.msg ol{padding-left:1.25rem;margin:.4rem 0}.msg li{margin:.2rem 0}.msg code{background:#c8aa6e14;border:1px solid var(--wc3-border-dim);padding:.1rem .4rem;border-radius:3px;font-size:.9em;color:var(--wc3-gold)}.msg pre{background:#0000004d;border:1px solid var(--wc3-border-dim);border-radius:4px;padding:.75rem;overflow-x:auto;margin:.5rem 0}.msg pre code{background:none;border:none;padding:0}.msg blockquote{border-left:3px solid var(--wc3-gold-dim);padding-left:.75rem;margin:.5rem 0;color:var(--wc3-text);font-style:italic}.msg hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--wc3-gold-dim),transparent);margin:.75rem 0}.msg-meta{font-size:.8rem;color:var(--wc3-text-dim);font-style:italic;margin-top:.4rem}.wc3-select{width:100%;padding:.5rem .75rem;font-family:var(--font-body);font-size:.95rem;color:var(--wc3-text-light);background:linear-gradient(180deg,#1a1a32,#13132a);border:1px solid var(--wc3-gold-dim);border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c8aa6e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.wc3-select:hover{border-color:var(--wc3-gold)}.wc3-select:focus{border-color:var(--wc3-gold);box-shadow:0 0 8px #c8aa6e33}.wc3-select option{background:var(--wc3-bg-panel);color:var(--wc3-text)}.wc3-input{width:100%;padding:.6rem .85rem;font-family:var(--font-body);font-size:1rem;color:var(--wc3-text-light);background:linear-gradient(180deg,#12122a,#0f0f24);border:1px solid var(--wc3-border);border-radius:2px;outline:none;box-shadow:inset 0 2px 6px #0000004d;transition:border-color .15s}.wc3-input:focus{border-color:var(--wc3-gold);box-shadow:inset 0 2px 6px #0000004d,0 0 8px #c8aa6e26}.wc3-input::placeholder{color:var(--wc3-text-muted)}.wc3-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-family:var(--font-body);color:var(--wc3-text);font-size:.95rem}.wc3-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#13132a;border:1px solid var(--wc3-gold-dim);border-radius:2px;cursor:pointer;position:relative}.wc3-checkbox input[type=checkbox]:checked{border-color:var(--wc3-gold)}.wc3-checkbox input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-1px;left:2px;color:var(--wc3-gold-bright);font-size:14px;font-weight:700}.loading{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;color:var(--wc3-gold);font-family:var(--font-heading);font-size:.85rem;font-style:italic;animation:fadeSlide .3s ease}.dot-pulse{display:inline-flex;gap:4px}.dot-pulse span{width:6px;height:6px;border-radius:50%;background:var(--wc3-gold);animation:pulse 1.2s infinite ease-in-out}.dot-pulse span:nth-child(2){animation-delay:.2s}.dot-pulse span:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}.error-msg{background:#b4282826;border:1px solid #cc3333;color:#f88;padding:.6rem .85rem;border-radius:4px;font-size:.9rem}.resource-bar{background:linear-gradient(180deg,#1a1a30,#112);border:1px solid var(--wc3-border);border-radius:3px;padding:.45rem .75rem;text-align:center;font-family:var(--font-heading);font-size:.8rem;color:var(--wc3-gold);letter-spacing:1px}.sidebar h2{font-family:var(--font-heading);color:var(--wc3-gold);font-size:.85rem;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px rgba(200,170,110,.2);padding-bottom:.4rem;border-bottom:1px solid var(--wc3-border-dim);margin-top:.75rem;margin-bottom:.5rem}.sidebar h2:first-child{margin-top:0}.model-caption{font-size:.85rem;color:var(--wc3-text-dim);font-style:italic;margin-top:.25rem}.sidebar-footer{margin-top:auto;padding-top:.75rem;text-align:center;font-size:.75rem;color:var(--wc3-text-muted);font-style:italic;line-height:1.6}.chat-input-bar{display:flex;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(180deg,var(--wc3-bg-panel),var(--wc3-bg));border-top:1px solid var(--wc3-border);flex-shrink:0;align-items:center}.chat-input-bar .wc3-input{flex:1}.chat-send-btn{height:38px;min-width:100px}.citations-toggle{font-family:var(--font-heading);font-size:.8rem;color:var(--wc3-gold-dim);background:none;border:1px solid var(--wc3-border-dim);border-radius:3px;padding:.35rem .75rem;cursor:pointer;margin-top:.5rem;transition:all .15s}.citations-toggle:hover{border-color:var(--wc3-gold);color:var(--wc3-gold)}.citations-panel{margin-top:.5rem;border:1px solid var(--wc3-border-dim);border-radius:4px;background:#0003;padding:.75rem;animation:fadeSlide .2s ease}.citation-item{padding:.5rem 0;border-bottom:1px solid var(--wc3-border-dim)}.citation-item:last-child{border-bottom:none}.citation-header{font-family:var(--font-heading);font-size:.8rem;color:var(--wc3-gold);margin-bottom:.25rem;display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}.citation-text{font-size:.85rem;color:var(--wc3-text);font-style:italic;border-left:2px solid var(--wc3-gold-dim);padding-left:.6rem;margin-top:.25rem;line-height:1.5}.image-tab{flex:1;overflow-y:auto;padding:1.5rem}.upload-zone{border:2px dashed var(--wc3-border);border-radius:6px;padding:2rem;text-align:center;cursor:pointer;transition:all .15s;background:#00000026;margin-bottom:1rem}.upload-zone:hover{border-color:var(--wc3-gold);background:#c8aa6e08}.upload-zone input[type=file]{display:none}.upload-zone .icon{font-size:2.5rem;margin-bottom:.5rem}.upload-zone p{color:var(--wc3-text-dim);font-size:.95rem}.image-preview{max-width:100%;max-height:300px;border:1px solid var(--wc3-border);border-radius:4px;margin-bottom:1rem}.analysis-result{background:linear-gradient(135deg,#141e4173,#0f14324d);border:1px solid rgba(100,130,200,.25);border-radius:6px;padding:1rem 1.25rem;line-height:1.65}.loading-splash{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#12122a,#0a0a16,#050510);color:var(--wc3-gold, #c8aa6e)}.loading-splash__icon{font-size:3rem;margin-bottom:1rem;animation:pulse 1.5s ease-in-out infinite}.loading-splash__text{font-family:var(--font-heading, "Cinzel", serif);font-size:1rem;letter-spacing:3px;text-transform:uppercase}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.user-badge{display:flex;align-items:center;gap:.6rem;padding:.4rem 0}.user-avatar{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--wc3-gold-dim, #8b7b4f);flex-shrink:0}.user-info{display:flex;flex-direction:column;min-width:0}.user-name{font-family:var(--font-heading, "Cinzel", serif);color:var(--wc3-gold, #c8aa6e);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-btn{background:none;border:none;color:var(--wc3-text-dim, #7a6e5a);font-size:.65rem;cursor:pointer;text-align:left;padding:0;font-family:var(--font-body, "Crimson Text", serif);text-decoration:underline;text-underline-offset:2px}.logout-btn:hover{color:var(--wc3-gold, #c8aa6e)}@media(max-width:768px){.sidebar{display:none}:root{--sidebar-w: 0px}.header-frame h1{font-size:1.4rem}}

backend/static/assets/index-CfN_TOmj.css

@@ -0,0 +1 @@
+@charset "UTF-8";.btn{width:100%;height:100%;position:relative;background:var(--v854fa1ce) no-repeat;background-size:100% 100%;color:var(--v548a9e4c);-webkit-user-select:none;user-select:none;-webkit-mask-image:var(--v854fa1ce);-webkit-mask-size:100% 100%}.btn__capt{width:100%;position:absolute;text-align:center;bottom:0}.btn--d{font-size:14px;letter-spacing:.5px;line-height:180%}.btn--s{height:32px;line-height:32px;min-width:100px}.btn--m{height:48px;line-height:48px;min-width:200px}*:not([disabled])+.btn:hover:before{content:"";position:absolute;width:100%;height:100%;background:var(--ba36690e) no-repeat;background-size:100% 100%;left:0;top:0;mix-blend-mode:screen}*:not([disabled])+.btn:active{background-image:var(--v4e4c04fa)}*:not([disabled])+.btn:active .btn__capt{left:3px;bottom:-2px}[disabled]+.btn{background-image:var(--v512606b8);pointer-events:all!important;color:#646464}.cursored,.cursored *{cursor:none}.cursor{position:relative;width:32px;height:32px;background:var(--v7b062dde) no-repeat}.cursor__container{top:0;left:0;position:fixed;z-index:99;pointer-events:none}.cursor--default-active{animation:cursor-active .5s steps(8) infinite}.cursor--pointer{background-position:-32px -96px}.cursor--pointer-active{animation:cursor-pointer .5s steps(8) infinite}.cursor--pointer-denied{background-position:-64px -96px}.cursor--hold{background-position:-128px -96px}.cursor--arrow-top{animation:cursor-arrow .1s steps(3) infinite;transform:rotate(-90deg)}.cursor--arrow-right{animation:cursor-arrow .1s steps(3) infinite}.cursor--arrow-bottom{animation:cursor-arrow .1s steps(3) infinite;transform:rotate(90deg)}.cursor--arrow-left{animation:cursor-arrow .1s steps(3) infinite;transform:rotate(-180deg)}@keyframes cursor-active{0%{background-position:0 0}to{background-position:-256px 0}}@keyframes cursor-pointer{0%{background-position:0 -64px}to{background-position:-256px -64px}}@keyframes cursor-arrow{0%{background-position:-160px -96px}to{background-position:-256px -96px}}.lang-switch[data-v-7718b16c]{display:flex;gap:.4rem}.lang-switch-btn[data-v-7718b16c]{flex:1;background:linear-gradient(180deg,#1a1a32,#13132a);border:1px solid var(--wc3-border-dim, #3a2e1e);border-radius:3px;color:var(--wc3-text-dim, #7a6e5a);font-family:var(--font-body, "Crimson Text", serif);font-size:.85rem;padding:.4rem .5rem;cursor:pointer;transition:all .15s}.lang-switch-btn[data-v-7718b16c]:hover{border-color:var(--wc3-gold-dim, #8b7b4f);color:var(--wc3-text, #d4c4a0)}.lang-switch-btn.active[data-v-7718b16c]{border-color:var(--wc3-gold, #c8aa6e);color:var(--wc3-gold, #c8aa6e);background:#c8aa6e14}.chat-area[data-v-5539d8f7]{flex:1;overflow:hidden;display:flex;flex-direction:column}.messages-container[data-v-5539d8f7]{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}.login-page{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#12122a,#0a0a16,#050510)}.login-card{width:100%;max-width:480px;padding:2rem;position:relative}.lang-toggle{display:flex;align-items:center;justify-content:center;gap:.25rem;margin-bottom:.75rem}.lang-btn{background:none;border:1px solid transparent;color:var(--wc3-text-dim, #7a6e5a);font-family:var(--font-heading, "Cinzel", serif);font-size:.8rem;letter-spacing:1.5px;padding:.3rem .75rem;cursor:pointer;border-radius:3px;transition:all .15s}.lang-btn:hover{color:var(--wc3-gold, #c8aa6e);border-color:var(--wc3-gold-dim, #8b7b4f)}.lang-btn.active{color:var(--wc3-gold-bright, #f0d060);border-color:var(--wc3-gold, #c8aa6e);background:#c8aa6e14;text-shadow:0 0 8px rgba(200,170,110,.3)}.lang-sep{color:var(--wc3-border, #5a4a2a);font-size:.8rem}.login-frame{background:linear-gradient(180deg,#13132a,#0d0d1f);border:2px solid var(--wc3-gold-dim, #8b7b4f);border-radius:6px;padding:2.5rem 2rem;text-align:center;box-shadow:0 0 40px #c8aa6e14,inset 0 1px #c8aa6e1a}.login-icon{font-size:3rem;margin-bottom:.75rem;filter:drop-shadow(0 0 10px rgba(200,170,110,.4))}.login-frame h1{font-family:var(--font-display, "Cinzel Decorative", serif);font-size:1.5rem;font-weight:900;background:linear-gradient(180deg,#f0d060,#c8aa6e,#8b7b4f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;margin-bottom:.25rem;word-break:keep-all}.login-frame .subtitle{font-family:var(--font-body, "Crimson Text", serif);color:var(--wc3-text-dim, #7a6e5a);font-style:italic;font-size:.95rem}.login-prompt{font-family:var(--font-heading, "Cinzel", serif);color:var(--wc3-gold, #c8aa6e);font-size:.9rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1.25rem}.g-btn-container{display:flex;justify-content:center;min-height:44px;margin-bottom:.5rem}.login-loading{color:var(--wc3-gold, #c8aa6e);font-size:.85rem;margin-top:.75rem;animation:pulse 1.5s ease-in-out infinite}.login-error{color:#f66;font-size:.85rem;margin-top:.75rem}.iframe-hint{color:var(--wc3-text-dim, #7a6e5a);font-size:.78rem;margin-top:1rem;line-height:1.6}.direct-link{color:var(--wc3-gold, #c8aa6e);text-decoration:underline;text-underline-offset:2px;word-break:break-all}.direct-link:hover{color:var(--wc3-gold-bright, #f0d060)}.login-footer{font-size:.8rem;color:var(--wc3-text-dim, #7a6e5a);font-style:italic;line-height:1.6}.login-footer-dim{color:var(--wc3-text-muted, #555060);font-size:.75rem}:root{--wc3-bg: #0a0a0f;--wc3-bg-panel: #0f0f1a;--wc3-gold: #c8aa6e;--wc3-gold-bright: #f0d060;--wc3-gold-dim: #8b7b4f;--wc3-text: #d4c4a0;--wc3-text-light: #f0e6d0;--wc3-text-dim: #7a6e5a;--wc3-text-muted: #555060;--wc3-border: #5a4a2a;--wc3-border-dim: #3a2e1e;--wc3-red-soft: rgba(140, 40, 40, .25);--wc3-blue-soft: rgba(30, 50, 90, .35);--font-heading: "Cinzel", serif;--font-display: "Cinzel Decorative", "Cinzel", serif;--font-body: "Crimson Text", serif;--sidebar-w: 270px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--wc3-bg);color:var(--wc3-text);font-family:var(--font-body);line-height:1.6}#app{height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--wc3-gold-dim),#4a3a20);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--wc3-gold)}.app-shell{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:linear-gradient(180deg,#0f0f22,#0a0a18);border-right:2px solid var(--wc3-border);display:flex;flex-direction:column;overflow-y:auto;padding:1rem;box-shadow:2px 0 20px #00000080}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at top center,#12122a,#0a0a16 60%,#070710)}.app-header{text-align:center;padding:1.25rem 1rem .5rem;flex-shrink:0}.header-frame h1{font-family:var(--font-display);font-size:2rem;font-weight:900;background:linear-gradient(180deg,#f0d060,#c8aa6e,#8b7b4f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}.header-frame .subtitle{font-family:var(--font-body);color:var(--wc3-text-dim);font-style:italic;font-size:.95rem;margin-top:.15rem}.gold-divider{height:1px;background:linear-gradient(90deg,transparent,var(--wc3-gold-dim),transparent);margin:.75rem 0;border:none}.tab-bar{display:flex;gap:.5rem;padding:.35rem 1.5rem;border-bottom:1px solid var(--wc3-border-dim);flex-shrink:0}.tab-btn-wrap{height:32px;min-width:120px}.tab-trigger.active{filter:brightness(1.3)}.msg{max-width:85%;padding:.85rem 1.15rem;border-radius:6px;line-height:1.65;font-size:1rem;border:1px solid transparent;animation:fadeSlide .25s ease}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.msg.user{align-self:flex-end;background:linear-gradient(135deg,#8c282859,#5a191940);border-color:#c850504d;color:var(--wc3-text-light)}.msg.assistant{align-self:flex-start;background:linear-gradient(135deg,#141e4173,#0f14324d);border-color:#6482c840;color:var(--wc3-text-light)}.msg h1,.msg h2,.msg h3,.msg h4{font-family:var(--font-heading);color:var(--wc3-gold);margin:.75rem 0 .35rem}.msg h1{font-size:1.3rem}.msg h2{font-size:1.15rem}.msg h3{font-size:1.05rem}.msg p{margin:.4rem 0}.msg strong{color:var(--wc3-gold-bright)}.msg em{font-style:italic}.msg ul,.msg ol{padding-left:1.25rem;margin:.4rem 0}.msg li{margin:.2rem 0}.msg code{background:#c8aa6e14;border:1px solid var(--wc3-border-dim);padding:.1rem .4rem;border-radius:3px;font-size:.9em;color:var(--wc3-gold)}.msg pre{background:#0000004d;border:1px solid var(--wc3-border-dim);border-radius:4px;padding:.75rem;overflow-x:auto;margin:.5rem 0}.msg pre code{background:none;border:none;padding:0}.msg blockquote{border-left:3px solid var(--wc3-gold-dim);padding-left:.75rem;margin:.5rem 0;color:var(--wc3-text);font-style:italic}.msg hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--wc3-gold-dim),transparent);margin:.75rem 0}.msg-meta{font-size:.8rem;color:var(--wc3-text-dim);font-style:italic;margin-top:.4rem}.wc3-select{width:100%;padding:.5rem .75rem;font-family:var(--font-body);font-size:.95rem;color:var(--wc3-text-light);background:linear-gradient(180deg,#1a1a32,#13132a);border:1px solid var(--wc3-gold-dim);border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c8aa6e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.wc3-select:hover{border-color:var(--wc3-gold)}.wc3-select:focus{border-color:var(--wc3-gold);box-shadow:0 0 8px #c8aa6e33}.wc3-select option{background:var(--wc3-bg-panel);color:var(--wc3-text)}.wc3-input{width:100%;padding:.6rem .85rem;font-family:var(--font-body);font-size:1rem;color:var(--wc3-text-light);background:linear-gradient(180deg,#12122a,#0f0f24);border:1px solid var(--wc3-border);border-radius:2px;outline:none;box-shadow:inset 0 2px 6px #0000004d;transition:border-color .15s}.wc3-input:focus{border-color:var(--wc3-gold);box-shadow:inset 0 2px 6px #0000004d,0 0 8px #c8aa6e26}.wc3-input::placeholder{color:var(--wc3-text-muted)}.wc3-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-family:var(--font-body);color:var(--wc3-text);font-size:.95rem}.wc3-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#13132a;border:1px solid var(--wc3-gold-dim);border-radius:2px;cursor:pointer;position:relative}.wc3-checkbox input[type=checkbox]:checked{border-color:var(--wc3-gold)}.wc3-checkbox input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-1px;left:2px;color:var(--wc3-gold-bright);font-size:14px;font-weight:700}.loading{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;color:var(--wc3-gold);font-family:var(--font-heading);font-size:.85rem;font-style:italic;animation:fadeSlide .3s ease}.dot-pulse{display:inline-flex;gap:4px}.dot-pulse span{width:6px;height:6px;border-radius:50%;background:var(--wc3-gold);animation:pulse 1.2s infinite ease-in-out}.dot-pulse span:nth-child(2){animation-delay:.2s}.dot-pulse span:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}.error-msg{background:#b4282826;border:1px solid #cc3333;color:#f88;padding:.6rem .85rem;border-radius:4px;font-size:.9rem}.resource-bar{background:linear-gradient(180deg,#1a1a30,#112);border:1px solid var(--wc3-border);border-radius:3px;padding:.45rem .75rem;text-align:center;font-family:var(--font-heading);font-size:.8rem;color:var(--wc3-gold);letter-spacing:1px}.sidebar h2{font-family:var(--font-heading);color:var(--wc3-gold);font-size:.85rem;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px rgba(200,170,110,.2);padding-bottom:.4rem;border-bottom:1px solid var(--wc3-border-dim);margin-top:.75rem;margin-bottom:.5rem}.sidebar h2:first-child{margin-top:0}.model-caption{font-size:.85rem;color:var(--wc3-text-dim);font-style:italic;margin-top:.25rem}.sidebar-footer{margin-top:auto;padding-top:.75rem;text-align:center;font-size:.75rem;color:var(--wc3-text-muted);font-style:italic;line-height:1.6}.chat-input-bar{display:flex;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(180deg,var(--wc3-bg-panel),var(--wc3-bg));border-top:1px solid var(--wc3-border);flex-shrink:0;align-items:center}.chat-input-bar .wc3-input{flex:1}.chat-send-btn{height:38px;min-width:100px}.citations-toggle{font-family:var(--font-heading);font-size:.8rem;color:var(--wc3-gold-dim);background:none;border:1px solid var(--wc3-border-dim);border-radius:3px;padding:.35rem .75rem;cursor:pointer;margin-top:.5rem;transition:all .15s}.citations-toggle:hover{border-color:var(--wc3-gold);color:var(--wc3-gold)}.citations-panel{margin-top:.5rem;border:1px solid var(--wc3-border-dim);border-radius:4px;background:#0003;padding:.75rem;animation:fadeSlide .2s ease}.citation-item{padding:.5rem 0;border-bottom:1px solid var(--wc3-border-dim)}.citation-item:last-child{border-bottom:none}.citation-header{font-family:var(--font-heading);font-size:.8rem;color:var(--wc3-gold);margin-bottom:.25rem;display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}.citation-text{font-size:.85rem;color:var(--wc3-text);font-style:italic;border-left:2px solid var(--wc3-gold-dim);padding-left:.6rem;margin-top:.25rem;line-height:1.5}.image-tab{flex:1;overflow-y:auto;padding:1.5rem}.upload-zone{border:2px dashed var(--wc3-border);border-radius:6px;padding:2rem;text-align:center;cursor:pointer;transition:all .15s;background:#00000026;margin-bottom:1rem}.upload-zone:hover{border-color:var(--wc3-gold);background:#c8aa6e08}.upload-zone input[type=file]{display:none}.upload-zone .icon{font-size:2.5rem;margin-bottom:.5rem}.upload-zone p{color:var(--wc3-text-dim);font-size:.95rem}.image-preview{max-width:100%;max-height:300px;border:1px solid var(--wc3-border);border-radius:4px;margin-bottom:1rem}.analysis-result{background:linear-gradient(135deg,#141e4173,#0f14324d);border:1px solid rgba(100,130,200,.25);border-radius:6px;padding:1rem 1.25rem;line-height:1.65}.loading-splash{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#12122a,#0a0a16,#050510);color:var(--wc3-gold, #c8aa6e)}.loading-splash__icon{font-size:3rem;margin-bottom:1rem;animation:pulse 1.5s ease-in-out infinite}.loading-splash__text{font-family:var(--font-heading, "Cinzel", serif);font-size:1rem;letter-spacing:3px;text-transform:uppercase}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.user-badge{display:flex;align-items:center;gap:.6rem;padding:.4rem 0}.user-avatar{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--wc3-gold-dim, #8b7b4f);flex-shrink:0}.user-info{display:flex;flex-direction:column;min-width:0}.user-name{font-family:var(--font-heading, "Cinzel", serif);color:var(--wc3-gold, #c8aa6e);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-btn{background:none;border:none;color:var(--wc3-text-dim, #7a6e5a);font-size:.65rem;cursor:pointer;text-align:left;padding:0;font-family:var(--font-body, "Crimson Text", serif);text-decoration:underline;text-underline-offset:2px}.logout-btn:hover{color:var(--wc3-gold, #c8aa6e)}@media(max-width:768px){.sidebar{display:none}:root{--sidebar-w: 0px}.header-frame h1{font-size:1.4rem}}

backend/static/index.html

@@ -8,8 +8,8 @@
   <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=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
-  <script type="module" crossorigin src="/assets/index-D8b5zKM1.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-BVDvGT2M.css">
+  <script type="module" crossorigin src="/assets/index-BAvZzacE.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CfN_TOmj.css">
 </head>
 <body>
   <div id="app"></div>

frontend/src/App.vue

@@ -5,6 +5,8 @@ import {
   getModels, getStats, getAuthConfig, loginWithGoogle, getMe,
   setToken, clearToken, getToken,
 } from './api'
+import { t, getStoredLang, storeLang } from './i18n'
+import type { Lang } from './i18n'
 import ConfigProvider from './wc3/ConfigProvider'
 import Wc3Button from './wc3/base/Button.vue'
 import Wc3Cursor from './wc3/base/Cursor.vue'
@@ -14,6 +16,14 @@ import ChatView from './components/ChatView.vue'
 import ImageView from './components/ImageView.vue'
 import LoginPage from './components/LoginPage.vue'
 
+// Language state
+const lang = ref<Lang>(getStoredLang())
+
+function setLang(newLang: Lang) {
+  lang.value = newLang
+  storeLang(newLang)
+}
+
 // Auth state
 const authLoading = ref(true)
 const authEnabled = ref(false)
@@ -99,14 +109,16 @@ function clearChat() {
   <!-- Loading splash -->
   <div v-if="authLoading" class="loading-splash">
     <div class="loading-splash__icon">⚔️</div>
-    <div class="loading-splash__text">Loading...</div>
+    <div class="loading-splash__text">{{ t('app.loading', lang) }}</div>
   </div>
 
   <!-- Login page (when auth is required and user not logged in) -->
   <LoginPage
     v-else-if="authEnabled && !isLoggedIn"
     :googleClientId="googleClientId"
+    :lang="lang"
     @google-login="handleGoogleLogin"
+    @update:lang="setLang"
   />
 
   <!-- Main app -->
@@ -122,8 +134,10 @@ function clearChat() {
           :models="models"
           :stats="stats"
           :user="currentUser"
+          :lang="lang"
           @clear-chat="clearChat"
           @logout="handleLogout"
+          @update:lang="setLang"
         />
       </aside>
 
@@ -132,8 +146,8 @@ function clearChat() {
         <!-- Header Bar (styled like WC3 top bar) -->
         <header class="app-header">
           <div class="header-frame">
-            <h1>Learn Pathophysiology</h1>
-            <p class="subtitle">AI asistent za ucenje patofiziologije</p>
+            <h1>{{ t('app.title', lang) }}</h1>
+            <p class="subtitle">{{ t('app.subtitle', lang) }}</p>
           </div>
         </header>
 
@@ -145,7 +159,7 @@ function clearChat() {
               :class="['tab-trigger', { active: activeTab === 'chat' }]"
               @click="activeTab = 'chat'"
             >
-              Chat
+              {{ t('tab.chat', lang) }}
             </Wc3Button>
           </div>
           <div class="tab-btn-wrap">
@@ -154,7 +168,7 @@ function clearChat() {
               :class="['tab-trigger', { active: activeTab === 'image' }]"
               @click="activeTab = 'image'"
             >
-              Analiza slike
+              {{ t('tab.image', lang) }}
             </Wc3Button>
           </div>
         </nav>
@@ -165,11 +179,13 @@ function clearChat() {
           v-model:history="chatHistory"
           :model="selectedModel"
           :showCitations="showCitations"
+          :lang="lang"
         />
         <ImageView
           v-else
           :model="selectedModel"
           :showCitations="showCitations"
+          :lang="lang"
         />
       </main>
     </div>

frontend/src/api.ts

@@ -94,12 +94,14 @@ export async function sendChat(
   message: string,
   model: string,
   history: ChatMessage[],
+  lang: string = 'hr',
 ): Promise<ChatResponse> {
   return request('/chat', {
     method: 'POST',
     body: JSON.stringify({
       message,
       model,
+      lang,
       history: history.map((m) => ({ role: m.role, content: m.content })),
     }),
   })

frontend/src/components/ChatView.vue

@@ -2,6 +2,8 @@
 import { ref, nextTick, watch } from 'vue'
 import { marked } from 'marked'
 import type { ChatMessage } from '../types'
+import type { Lang } from '../i18n'
+import { t } from '../i18n'
 import { sendChat } from '../api'
 import Wc3Button from '../wc3/base/Button.vue'
 import CitationPanel from './CitationPanel.vue'
@@ -9,6 +11,7 @@ import CitationPanel from './CitationPanel.vue'
 const props = defineProps<{
   model: string
   showCitations: boolean
+  lang: Lang
 }>()
 
 const history = defineModel<ChatMessage[]>('history', { required: true })
@@ -45,7 +48,7 @@ async function handleSend() {
 
   isLoading.value = true
   try {
-    const res = await sendChat(text, props.model, history.value)
+    const res = await sendChat(text, props.model, history.value, props.lang)
     history.value.push({
       role: 'assistant',
       content: res.reply,
@@ -53,7 +56,7 @@ async function handleSend() {
       model_used: res.model_used,
     })
   } catch (e: any) {
-    error.value = e.message || 'Greska pri slanju poruke'
+    error.value = e.message || t('chat.error', props.lang)
   } finally {
     isLoading.value = false
     await scrollToBottom()
@@ -76,10 +79,10 @@ function handleKeydown(e: KeyboardEvent) {
       <div v-if="history.length === 0" style="text-align: center; margin-top: 3rem;">
         <div style="font-size: 3rem; margin-bottom: 0.75rem;">📜</div>
         <p style="font-family: var(--font-heading); color: var(--wc3-gold); font-size: 1rem;">
-          Dobrodosli!
+          {{ t('chat.welcome', lang) }}
         </p>
         <p style="color: var(--wc3-text-dim); font-size: 0.9rem; max-width: 400px; margin: 0.5rem auto;">
-          Postavi pitanje o patofiziologiji.
+          {{ t('chat.welcomeHint', lang) }}
         </p>
       </div>
 
@@ -92,12 +95,13 @@ function handleKeydown(e: KeyboardEvent) {
           <CitationPanel
             v-if="msg.role === 'assistant' && showCitations && msg.citations?.length"
             :citations="msg.citations"
+            :lang="lang"
           />
         </div>
       </template>
 
       <div v-if="isLoading" class="loading">
-        <span>Generiranje odgovora</span>
+        <span>{{ t('chat.generating', lang) }}</span>
         <span class="dot-pulse"><span></span><span></span><span></span></span>
       </div>
 
@@ -110,12 +114,12 @@ function handleKeydown(e: KeyboardEvent) {
         class="wc3-input"
         v-model="inputText"
         @keydown="handleKeydown"
-        placeholder="Postavi pitanje o patofiziologiji..."
+        :placeholder="t('chat.placeholder', lang)"
         :disabled="isLoading"
       />
       <div class="chat-send-btn">
         <Wc3Button size="s" @click="handleSend" :disabled="isLoading || !inputText.trim()">
-          Posalji
+          {{ t('chat.send', lang) }}
         </Wc3Button>
       </div>
     </div>

frontend/src/components/CitationPanel.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { Citation } from '../types'
+import type { Lang } from '../i18n'
+import { t } from '../i18n'
 
-defineProps<{ citations: Citation[] }>()
+defineProps<{
+  citations: Citation[]
+  lang: Lang
+}>()
 
 const isOpen = ref(false)
 
@@ -20,7 +25,7 @@ function scoreBar(score: number): string {
 <template>
   <div>
     <button class="citations-toggle" @click="isOpen = !isOpen">
-      📜 Izvori ({{ citations.length }})
+      📜 {{ t('citations.sources', lang) }} ({{ citations.length }})
       {{ isOpen ? '▲' : '▼' }}
     </button>
 
@@ -33,7 +38,7 @@ function scoreBar(score: number): string {
         <div class="citation-header">
           <span>#{{ c.rank }}</span>
           <span style="margin-left: 0.75rem;">
-            📄 {{ c.source }} — str. {{ c.page_num }}
+            📄 {{ c.source }} — {{ t('citations.page', lang) }} {{ c.page_num }}
           </span>
           <span style="margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;">
             <span

frontend/src/components/ImageView.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import { marked } from 'marked'
 import type { Citation } from '../types'
+import type { Lang } from '../i18n'
+import { t } from '../i18n'
 import { analyzeImage } from '../api'
 import Wc3Button from '../wc3/base/Button.vue'
 import CitationPanel from './CitationPanel.vue'
@@ -9,6 +11,7 @@ import CitationPanel from './CitationPanel.vue'
 const props = defineProps<{
   model: string
   showCitations: boolean
+  lang: Lang
 }>()
 
 const selectedFile = ref<File | null>(null)
@@ -58,7 +61,7 @@ async function handleAnalyze() {
     analysis.value = res.analysis
     citations.value = res.citations
   } catch (e: any) {
-    error.value = e.message || 'Greska pri analizi slike'
+    error.value = e.message || t('image.error', props.lang)
   } finally {
     isLoading.value = false
   }
@@ -76,9 +79,9 @@ async function handleAnalyze() {
       <input ref="fileInput" type="file" accept="image/*" @change="handleFileSelect" />
       <div v-if="!imagePreview">
         <div class="icon">📄</div>
-        <p>Klikni ili povuci sliku ovdje</p>
+        <p>{{ t('image.dropHint', lang) }}</p>
         <p style="font-size: 0.8rem; color: var(--wc3-text-muted);">
-          Uploadaj stranicu za analizu
+          {{ t('image.uploadHint', lang) }}
         </p>
       </div>
       <img v-else :src="imagePreview" class="image-preview" alt="Preview" />
@@ -88,18 +91,18 @@ async function handleAnalyze() {
       <input
         class="wc3-input"
         v-model="question"
-        placeholder="Postavi pitanje o slici (opcionalno)..."
+        :placeholder="t('image.questionPlaceholder', lang)"
       />
     </div>
 
     <div v-if="selectedFile" style="margin-bottom: 1.5rem; height: 38px; min-width: 160px; display: inline-block;">
       <Wc3Button size="s" @click="handleAnalyze" :disabled="isLoading">
-        {{ isLoading ? 'Analiziram...' : 'Analiziraj sliku' }}
+        {{ isLoading ? t('image.analyzing', lang) : t('image.analyze', lang) }}
       </Wc3Button>
     </div>
 
     <div v-if="isLoading" class="loading">
-      <span>Analiziranje</span>
+      <span>{{ t('image.analyzingStatus', lang) }}</span>
       <span class="dot-pulse"><span></span><span></span><span></span></span>
     </div>
 
@@ -110,6 +113,7 @@ async function handleAnalyze() {
       <CitationPanel
         v-if="showCitations && citations.length"
         :citations="citations"
+        :lang="lang"
         style="margin-top: 0.75rem;"
       />
     </div>

frontend/src/components/LoginPage.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { t, getStoredLang, storeLang } from '../i18n'
+import type { Lang } from '../i18n'
 
 const props = defineProps<{
   googleClientId: string
+  lang: Lang
 }>()
 
 const emit = defineEmits<{
   'google-login': [credential: string]
+  'update:lang': [lang: Lang]
 }>()
 
 const error = ref('')
@@ -24,7 +28,6 @@ try {
 
 // Build the direct .hf.space URL from the current page
 if (isInIframe.value) {
-  // Inside HF iframe at huggingface.co/spaces/User/Space → direct URL is user-space.hf.space
   const match = window.location.href.match(/spaces\/([^/]+)\/([^/?#]+)/)
   if (match) {
     directUrl.value = `https://${match[1].toLowerCase()}-${match[2].toLowerCase().replace(/_/g, '-')}.hf.space`
@@ -33,11 +36,14 @@ if (isInIframe.value) {
   }
 }
 
+function switchLang(lang: Lang) {
+  storeLang(lang)
+  emit('update:lang', lang)
+}
+
 onMounted(() => {
-  // Check for credential in URL hash (returned from redirect flow)
   checkRedirectResult()
 
-  // Load Google Identity Services script dynamically
   if (document.getElementById('gsi-script')) {
     initGsi()
     return
@@ -50,14 +56,13 @@ onMounted(() => {
   script.defer = true
   script.onload = initGsi
   script.onerror = () => {
-    error.value = 'Failed to load Google Sign-In. Check your internet connection.'
+    error.value = t('login.error.gsi', props.lang)
   }
   document.head.appendChild(script)
 })
 
 function checkRedirectResult() {
   // After Google redirect, the credential comes back as a POST to the current page
-  // We handle this via the callback in initialize()
 }
 
 function initGsi() {
@@ -71,7 +76,6 @@ function initGsi() {
     client_id: props.googleClientId,
     callback: handleCredentialResponse,
     auto_select: false,
-    // Use redirect mode inside iframes (popups are blocked)
     ux_mode: isInIframe.value ? 'redirect' : 'popup',
     login_uri: isInIframe.value ? (directUrl.value || window.location.origin) + '/' : undefined,
   })
@@ -93,7 +97,7 @@ function handleCredentialResponse(response: { credential: string }) {
     loading.value = true
     emit('google-login', response.credential)
   } else {
-    error.value = 'Google sign-in failed. Please try again.'
+    error.value = t('login.error.failed', props.lang)
   }
 }
 </script>
@@ -101,33 +105,46 @@ function handleCredentialResponse(response: { credential: string }) {
 <template>
   <div class="login-page">
     <div class="login-card">
+      <!-- Language toggle (top-right of card) -->
+      <div class="lang-toggle">
+        <button
+          :class="['lang-btn', { active: lang === 'en' }]"
+          @click="switchLang('en')"
+        >EN</button>
+        <span class="lang-sep">|</span>
+        <button
+          :class="['lang-btn', { active: lang === 'hr' }]"
+          @click="switchLang('hr')"
+        >HR</button>
+      </div>
+
       <!-- WC3-style frame -->
       <div class="login-frame">
         <div class="login-icon">⚔️</div>
-        <h1>Learn Pathophysiology</h1>
-        <p class="subtitle">AI asistent za učenje patofiziologije</p>
+        <h1>{{ t('login.title', lang) }}</h1>
+        <p class="subtitle">{{ t('login.subtitle', lang) }}</p>
 
         <div class="gold-divider"></div>
 
-        <p class="login-prompt">Prijavi se za pristup</p>
+        <p class="login-prompt">{{ t('login.prompt', lang) }}</p>
 
         <!-- Google Sign-In button renders here -->
         <div id="g-signin-btn" class="g-btn-container"></div>
 
-        <p v-if="loading" class="login-loading">Prijava u tijeku...</p>
+        <p v-if="loading" class="login-loading">{{ t('login.loading', lang) }}</p>
         <p v-if="error" class="login-error">{{ error }}</p>
 
-        <!-- Iframe hint: if popups are blocked, offer direct link -->
+        <!-- Iframe hint -->
         <p v-if="isInIframe" class="iframe-hint">
-          Ako prijava ne radi, otvori aplikaciju direktno:<br>
+          {{ t('login.iframe.hint', lang) }}<br>
           <a :href="directUrl" target="_top" class="direct-link">{{ directUrl }}</a>
         </p>
 
         <div class="gold-divider"></div>
 
         <p class="login-footer">
-          Powered by Gemini AI<br>
-          <span class="login-footer-dim">WC3 Edition</span>
+          {{ t('login.footer.powered', lang) }}<br>
+          <span class="login-footer-dim">{{ t('login.footer.edition', lang) }}</span>
         </p>
       </div>
     </div>
@@ -148,6 +165,46 @@ function handleCredentialResponse(response: { credential: string }) {
   width: 100%;
   max-width: 480px;
   padding: 2rem;
+  position: relative;
+}
+
+/* ---- Language Toggle ---- */
+.lang-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.lang-btn {
+  background: none;
+  border: 1px solid transparent;
+  color: var(--wc3-text-dim, #7a6e5a);
+  font-family: var(--font-heading, 'Cinzel', serif);
+  font-size: 0.8rem;
+  letter-spacing: 1.5px;
+  padding: 0.3rem 0.75rem;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.lang-btn:hover {
+  color: var(--wc3-gold, #c8aa6e);
+  border-color: var(--wc3-gold-dim, #8b7b4f);
+}
+
+.lang-btn.active {
+  color: var(--wc3-gold-bright, #f0d060);
+  border-color: var(--wc3-gold, #c8aa6e);
+  background: rgba(200, 170, 110, 0.08);
+  text-shadow: 0 0 8px rgba(200, 170, 110, 0.3);
+}
+
+.lang-sep {
+  color: var(--wc3-border, #5a4a2a);
+  font-size: 0.8rem;
 }
 
 .login-frame {

frontend/src/components/SidePanel.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { ModelInfo, StatsResponse, AuthUser } from '../types'
+import type { Lang } from '../i18n'
+import { t, storeLang } from '../i18n'
 import Wc3Button from '../wc3/base/Button.vue'
 import { RACE_KEY } from '../wc3/consts'
 
@@ -7,6 +9,7 @@ defineProps<{
   models: Record<string, ModelInfo>
   stats: StatsResponse
   user: AuthUser | null
+  lang: Lang
 }>()
 
 const model = defineModel<string>('model', { required: true })
@@ -16,6 +19,7 @@ const race = defineModel<RACE_KEY>('race', { required: true })
 const emit = defineEmits<{
   'clear-chat': []
   'logout': []
+  'update:lang': [lang: Lang]
 }>()
 
 const races = [
@@ -24,6 +28,11 @@ const races = [
   { key: RACE_KEY.NIGHT_ELF, label: 'Night Elf' },
   { key: RACE_KEY.UNDEAD, label: 'Undead' },
 ]
+
+function switchLang(newLang: Lang) {
+  storeLang(newLang)
+  emit('update:lang', newLang)
+}
 </script>
 
 <template>
@@ -33,14 +42,29 @@ const races = [
       <img v-if="user.picture" :src="user.picture" class="user-avatar" referrerpolicy="no-referrer" alt="" />
       <div class="user-info">
         <span class="user-name">{{ user.name }}</span>
-        <button class="logout-btn" @click="emit('logout')">Odjavi se</button>
+        <button class="logout-btn" @click="emit('logout')">{{ t('sidebar.logout', lang) }}</button>
       </div>
     </div>
 
     <div v-if="user" class="gold-divider"></div>
 
+    <!-- Language -->
+    <h2>{{ t('sidebar.language', lang) }}</h2>
+    <div class="lang-switch">
+      <button
+        :class="['lang-switch-btn', { active: lang === 'en' }]"
+        @click="switchLang('en')"
+      >🇬🇧 English</button>
+      <button
+        :class="['lang-switch-btn', { active: lang === 'hr' }]"
+        @click="switchLang('hr')"
+      >🇭🇷 Hrvatski</button>
+    </div>
+
+    <div class="gold-divider"></div>
+
     <!-- Model -->
-    <h2>Odaberi model</h2>
+    <h2>{{ t('sidebar.selectModel', lang) }}</h2>
     <select class="wc3-select" :value="model" @change="model = ($event.target as HTMLSelectElement).value">
       <option v-for="(info, key) in models" :key="key" :value="key">
         {{ info.name }}
@@ -53,7 +77,7 @@ const races = [
     <div class="gold-divider"></div>
 
     <!-- Theme -->
-    <h2>Tema</h2>
+    <h2>{{ t('sidebar.theme', lang) }}</h2>
     <select class="wc3-select" :value="race" @change="race = ($event.target as HTMLSelectElement).value as RACE_KEY">
       <option v-for="r in races" :key="r.key" :value="r.key">
         {{ r.label }}
@@ -63,24 +87,24 @@ const races = [
     <div class="gold-divider"></div>
 
     <!-- Options -->
-    <h2>Opcije</h2>
+    <h2>{{ t('sidebar.options', lang) }}</h2>
     <label class="wc3-checkbox">
       <input type="checkbox" :checked="showCitations" @change="showCitations = ($event.target as HTMLInputElement).checked" />
-      Prikazi izvore
+      {{ t('sidebar.showSources', lang) }}
     </label>
 
     <div style="margin-top: 0.75rem; height: 32px; min-width: 100%;">
       <Wc3Button size="s" @click="emit('clear-chat')">
-        Novi razgovor
+        {{ t('sidebar.newChat', lang) }}
       </Wc3Button>
     </div>
 
     <div class="gold-divider"></div>
 
     <!-- Stats -->
-    <h2>Baza znanja</h2>
+    <h2>{{ t('sidebar.knowledgeBase', lang) }}</h2>
     <div class="resource-bar">
-      {{ stats.documents.toLocaleString() }} dokumenata
+      {{ stats.documents.toLocaleString() }} {{ t('sidebar.documents', lang) }}
     </div>
 
     <!-- Footer -->
@@ -91,3 +115,34 @@ const races = [
     </div>
   </div>
 </template>
+
+<style scoped>
+.lang-switch {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.lang-switch-btn {
+  flex: 1;
+  background: linear-gradient(180deg, #1a1a32, #13132a);
+  border: 1px solid var(--wc3-border-dim, #3a2e1e);
+  border-radius: 3px;
+  color: var(--wc3-text-dim, #7a6e5a);
+  font-family: var(--font-body, 'Crimson Text', serif);
+  font-size: 0.85rem;
+  padding: 0.4rem 0.5rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.lang-switch-btn:hover {
+  border-color: var(--wc3-gold-dim, #8b7b4f);
+  color: var(--wc3-text, #d4c4a0);
+}
+
+.lang-switch-btn.active {
+  border-color: var(--wc3-gold, #c8aa6e);
+  color: var(--wc3-gold, #c8aa6e);
+  background: rgba(200, 170, 110, 0.08);
+}
+</style>

frontend/src/i18n.ts

@@ -0,0 +1,194 @@
+/**
+ * Simple i18n system for Learn Pathophysiology
+ * Supports: English (en) and Croatian (hr)
+ */
+
+export type Lang = 'en' | 'hr'
+
+export const LANG_STORAGE_KEY = 'lp_lang'
+
+export function getStoredLang(): Lang {
+  const stored = localStorage.getItem(LANG_STORAGE_KEY)
+  if (stored === 'en' || stored === 'hr') return stored
+  return 'hr' // default to Croatian
+}
+
+export function storeLang(lang: Lang) {
+  localStorage.setItem(LANG_STORAGE_KEY, lang)
+}
+
+const translations = {
+  // ---- Login Page ----
+  'login.title': {
+    en: 'Learn Pathophysiology',
+    hr: 'Learn Pathophysiology',
+  },
+  'login.subtitle': {
+    en: 'AI assistant for learning pathophysiology',
+    hr: 'AI asistent za učenje patofiziologije',
+  },
+  'login.prompt': {
+    en: 'Sign in to continue',
+    hr: 'Prijavi se za pristup',
+  },
+  'login.loading': {
+    en: 'Signing in...',
+    hr: 'Prijava u tijeku...',
+  },
+  'login.error.gsi': {
+    en: 'Failed to load Google Sign-In. Check your internet connection.',
+    hr: 'Greška pri učitavanju Google prijave. Provjeri internet vezu.',
+  },
+  'login.error.failed': {
+    en: 'Google sign-in failed. Please try again.',
+    hr: 'Google prijava nije uspjela. Pokušaj ponovo.',
+  },
+  'login.iframe.hint': {
+    en: 'If login doesn\'t work, open the app directly:',
+    hr: 'Ako prijava ne radi, otvori aplikaciju direktno:',
+  },
+  'login.footer.powered': {
+    en: 'Powered by Gemini AI',
+    hr: 'Powered by Gemini AI',
+  },
+  'login.footer.edition': {
+    en: 'WC3 Edition',
+    hr: 'WC3 Edition',
+  },
+
+  // ---- App Header ----
+  'app.title': {
+    en: 'Learn Pathophysiology',
+    hr: 'Learn Pathophysiology',
+  },
+  'app.subtitle': {
+    en: 'AI assistant for learning pathophysiology',
+    hr: 'AI asistent za ucenje patofiziologije',
+  },
+  'app.loading': {
+    en: 'Loading...',
+    hr: 'Učitavanje...',
+  },
+
+  // ---- Tabs ----
+  'tab.chat': {
+    en: 'Chat',
+    hr: 'Chat',
+  },
+  'tab.image': {
+    en: 'Image Analysis',
+    hr: 'Analiza slike',
+  },
+
+  // ---- Sidebar ----
+  'sidebar.selectModel': {
+    en: 'Select model',
+    hr: 'Odaberi model',
+  },
+  'sidebar.theme': {
+    en: 'Theme',
+    hr: 'Tema',
+  },
+  'sidebar.options': {
+    en: 'Options',
+    hr: 'Opcije',
+  },
+  'sidebar.showSources': {
+    en: 'Show sources',
+    hr: 'Prikazi izvore',
+  },
+  'sidebar.newChat': {
+    en: 'New conversation',
+    hr: 'Novi razgovor',
+  },
+  'sidebar.knowledgeBase': {
+    en: 'Knowledge Base',
+    hr: 'Baza znanja',
+  },
+  'sidebar.documents': {
+    en: 'documents',
+    hr: 'dokumenata',
+  },
+  'sidebar.logout': {
+    en: 'Sign out',
+    hr: 'Odjavi se',
+  },
+  'sidebar.language': {
+    en: 'Language',
+    hr: 'Jezik',
+  },
+
+  // ---- Chat ----
+  'chat.welcome': {
+    en: 'Welcome!',
+    hr: 'Dobrodosli!',
+  },
+  'chat.welcomeHint': {
+    en: 'Ask a question about pathophysiology.',
+    hr: 'Postavi pitanje o patofiziologiji.',
+  },
+  'chat.placeholder': {
+    en: 'Ask a question about pathophysiology...',
+    hr: 'Postavi pitanje o patofiziologiji...',
+  },
+  'chat.send': {
+    en: 'Send',
+    hr: 'Posalji',
+  },
+  'chat.generating': {
+    en: 'Generating response',
+    hr: 'Generiranje odgovora',
+  },
+  'chat.error': {
+    en: 'Error sending message',
+    hr: 'Greska pri slanju poruke',
+  },
+
+  // ---- Image ----
+  'image.dropHint': {
+    en: 'Click or drag an image here',
+    hr: 'Klikni ili povuci sliku ovdje',
+  },
+  'image.uploadHint': {
+    en: 'Upload a page for analysis',
+    hr: 'Uploadaj stranicu za analizu',
+  },
+  'image.questionPlaceholder': {
+    en: 'Ask a question about the image (optional)...',
+    hr: 'Postavi pitanje o slici (opcionalno)...',
+  },
+  'image.analyze': {
+    en: 'Analyze image',
+    hr: 'Analiziraj sliku',
+  },
+  'image.analyzing': {
+    en: 'Analyzing...',
+    hr: 'Analiziram...',
+  },
+  'image.analyzingStatus': {
+    en: 'Analyzing',
+    hr: 'Analiziranje',
+  },
+  'image.error': {
+    en: 'Error analyzing image',
+    hr: 'Greska pri analizi slike',
+  },
+
+  // ---- Citations ----
+  'citations.sources': {
+    en: 'Sources',
+    hr: 'Izvori',
+  },
+  'citations.page': {
+    en: 'p.',
+    hr: 'str.',
+  },
+} as const
+
+export type TranslationKey = keyof typeof translations
+
+export function t(key: TranslationKey, lang: Lang): string {
+  const entry = translations[key]
+  if (!entry) return key
+  return entry[lang] || entry['en'] || key
+}

frontend/src/types.ts

@@ -63,4 +63,6 @@ export interface AuthUser {
 export interface AuthResponse {
   token: string
   user: AuthUser
-}
+}
+
+export type { Lang } from './i18n'