fix: remove hardcoded secrets from docker-compose, use env vars + profiles

- Remove hardcoded OpenRouter API key and URL from docker-compose.yml
- App service now reads OPENAI_* vars from .env file (env_file) and
  falls back to http://ollama:11434/v1 defaults
- Ollama and model-init moved to 'ollama' Docker Compose profile,
  so they only start when explicitly requested:
    docker compose --profile ollama up      # with local Ollama
    docker compose up                         # cloud provider only
- Port mapping uses 5656 from .env
- .env.docker updated with documented options for Ollama vs OpenRouter

Dockerfile

@@ -3,8 +3,8 @@ FROM node:22-alpine AS build
 
 WORKDIR /app
 
-COPY package.json package-lock.json ./
+COPY package.json ./
-RUN npm ci
+RUN npm i
 
 COPY . .
 RUN npm run build

docker-compose.yml

@@ -1,6 +1,8 @@
 services:
   ollama:
     image: ollama/ollama:latest
+    profiles:
+      - ollama
     container_name: english-styler-ollama
     ports:
       - "11434:11434"
@@ -16,6 +18,8 @@ services:
 
   model-init:
     image: ollama/ollama:latest
+    profiles:
+      - ollama
     container_name: english-styler-model-init
     depends_on:
       ollama:
@@ -34,14 +38,14 @@ services:
     build: .
     container_name: english-styler-app
     ports:
-      - "3000:3000"
+      - "${APP_PORT:-5656}:3000"
-    depends_on:
+    env_file:
-      model-init:
+      - path: .env
-        condition: service_completed_successfully
+        required: false
     environment:
-      OPENAI_BASE_URL: http://ollama:11434/v1
+      OPENAI_BASE_URL: ${OPENAI_BASE_URL:-http://ollama:11434/v1}
-      OPENAI_API_KEY: ollama
+      OPENAI_API_KEY: ${OPENAI_API_KEY:-ollama}
-      OPENAI_MODEL: ${OLLAMA_MODEL:-llama3}
+      OPENAI_MODEL: ${OPENAI_MODEL:-llama3}
     restart: unless-stopped
 
 volumes:

src/routes/+page.svelte

@@ -1,38 +1,75 @@
 <script lang="ts">
-    import {
+	import { categories, getStylesByCategory, getIntensityConfig } from '$lib/styles';
-        categories,
+	import type { ConversionResponse } from '$lib/types';
-        styles,
+	import LoadingModal from '$lib/components/LoadingModal.svelte';
-        getStylesByCategory,
-        getIntensityConfig,
-    } from "$lib/styles";
-    import type { Style, StyleCategory, ConversionResponse } from "$lib/types";
-    import LoadingModal from "$lib/components/LoadingModal.svelte";
 
-    let inputText = $state("");
+	const STORAGE_KEY = 'english-styler-state';
-    let selectedCategoryId = $state("");
+
-    let selectedStyleId = $state("");
+	interface SavedState {
-    let intensity = $state(3);
+		inputText: string;
-    let outputText = $state("");
+		selectedCategoryId: string;
+		selectedStyleId: string;
+		intensity: number;
+		showPrompt: boolean;
+	}
+
+	function loadState(): SavedState | null {
+		try {
+			const raw = localStorage.getItem(STORAGE_KEY);
+			if (!raw) return null;
+			return JSON.parse(raw) as SavedState;
+		} catch {
+			return null;
+		}
+	}
+
+	function saveState() {
+		try {
+			const state: SavedState = {
+				inputText,
+				selectedCategoryId,
+				selectedStyleId,
+				intensity,
+				showPrompt
+			};
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+		} catch {
+			// localStorage may be unavailable (private browsing, etc.)
+		}
+	}
+
+	const saved = loadState();
+
+	let inputText = $state(saved?.inputText ?? '');
+	let selectedCategoryId = $state(saved?.selectedCategoryId ?? '');
+	let selectedStyleId = $state(saved?.selectedStyleId ?? '');
+	let intensity = $state(saved?.intensity ?? 3);
+	let outputText = $state('');
 	let loading = $state(false);
-    let error = $state("");
+	let error = $state('');
-    let systemPrompt = $state("");
+	let systemPrompt = $state('');
-    let userMessage = $state("");
+	let userMessage = $state('');
-    let modelName = $state("");
+	let modelName = $state('');
-    let showPrompt = $state(false);
+	let showPrompt = $state(saved?.showPrompt ?? false);
 	let copied = $state(false);
 
 	let availableStyles = $derived(
-        selectedCategoryId ? getStylesByCategory(selectedCategoryId) : [],
+		selectedCategoryId ? getStylesByCategory(selectedCategoryId) : []
 	);
 
 	let canConvert = $derived(
-        inputText.trim().length > 0 && selectedStyleId.length > 0 && !loading,
+		inputText.trim().length > 0 && selectedStyleId.length > 0 && !loading
 	);
 
-    let intensityLabel = $derived(getIntensityConfig(intensity)?.label ?? "");
+	let intensityLabel = $derived(getIntensityConfig(intensity)?.label ?? '');
+
+	// Persist state whenever it changes
+	$effect(() => {
+		saveState();
+	});
 
 	function onCategoryChange() {
-        selectedStyleId = "";
+		selectedStyleId = '';
 		if (availableStyles.length === 1) {
 			selectedStyleId = availableStyles[0].id;
 		}
@@ -42,28 +79,28 @@
 		if (!canConvert) return;
 
 		loading = true;
-        error = "";
+		error = '';
-        outputText = "";
+		outputText = '';
-        systemPrompt = "";
+		systemPrompt = '';
-        userMessage = "";
+		userMessage = '';
-        modelName = "";
+		modelName = '';
 		showPrompt = false;
 
 		try {
-            const res = await fetch("/api/convert", {
+			const res = await fetch('/api/convert', {
-                method: "POST",
+				method: 'POST',
-                headers: { "Content-Type": "application/json" },
+				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({
 					text: inputText,
 					styleId: selectedStyleId,
-                    intensity,
+					intensity
-                }),
+				})
 			});
 
 			const data = await res.json();
 
 			if (!res.ok) {
-                throw new Error(data.error || "Conversion failed");
+				throw new Error(data.error || 'Conversion failed');
 			}
 
 			const result: ConversionResponse = data;
@@ -72,7 +109,7 @@
 			userMessage = result.userMessage;
 			modelName = result.model;
 		} catch (err) {
-            error = err instanceof Error ? err.message : "Something went wrong";
+			error = err instanceof Error ? err.message : 'Something went wrong';
 		} finally {
 			loading = false;
 		}
@@ -84,11 +121,10 @@
 			copied = true;
 			setTimeout(() => (copied = false), 2000);
 		} catch {
-            // Fallback: select text
+			const el = document.querySelector('.output-text');
-            const textarea = document.querySelector(".output-text");
+			if (el instanceof HTMLElement) {
-            if (textarea instanceof HTMLElement) {
 				const range = document.createRange();
-                range.selectNodeContents(textarea);
+				range.selectNodeContents(el);
 				const sel = window.getSelection();
 				sel?.removeAllRanges();
 				sel?.addRange(range);
@@ -99,9 +135,7 @@
 
 <main class="container">
 	<h1 class="title">English Style Converter</h1>
-    <p class="subtitle">
+	<p class="subtitle">Transform your text into different English styles and tones</p>
-        Transform your text into different English styles and tones
-    </p>
 
 	<div class="card">
 		<div class="form-group">
@@ -109,7 +143,7 @@
 			<textarea
 				id="input-text"
 				bind:value={inputText}
-                placeholder="Enter the English text you want to convert... DO NOT ENTER ANY PERSONAL INFORMATION!!"
+				placeholder="Enter the English text you want to convert..."
 				rows="5"
 				disabled={loading}
 			></textarea>
@@ -133,11 +167,7 @@
 
 			<div class="form-group">
 				<label for="style">Style</label>
-                <select
+				<select id="style" bind:value={selectedStyleId} disabled={loading || !selectedCategoryId}>
-                    id="style"
-                    bind:value={selectedStyleId}
-                    disabled={loading || !selectedCategoryId}
-                >
 					{#if !selectedCategoryId}
 						<option value="">Select a category first...</option>
 					{:else if availableStyles.length === 0}
@@ -154,9 +184,7 @@
 
 		<div class="form-group">
 			<label for="intensity">
-                Intensity: <span class="intensity-label"
+				Intensity: <span class="intensity-label">{intensityLabel || 'Strong'}</span>
-                    >{intensityLabel || "Strong"}</span
-                >
 			</label>
 			<div class="slider-row">
 				<span class="slider-end">Subtle</span>
@@ -173,11 +201,12 @@
 			</div>
 		</div>
 
-        <button
+		<div class="disclaimer">
-            class="convert-btn"
+			<span class="disclaimer-icon">⚡</span>
-            onclick={handleConvert}
+			<span>This tool uses AI to generate styled text. Results may be inaccurate, biased, or unexpected. Do not enter personal or sensitive information. Use at your own discretion — this is a demo and outputs should not be relied upon for important purposes.</span>
-            disabled={!canConvert}
+		</div>
-        >
+
+		<button class="convert-btn" onclick={handleConvert} disabled={!canConvert}>
 			{#if loading}
 				Converting...
 			{:else}
@@ -211,11 +240,8 @@
 		</div>
 
 		<div class="prompt-section">
-            <button
+			<button class="prompt-toggle" onclick={() => (showPrompt = !showPrompt)}>
-                class="prompt-toggle"
+				{showPrompt ? '▼' : '▶'} Show prompt
-                onclick={() => (showPrompt = !showPrompt)}
-            >
-                {showPrompt ? "▼" : "▶"} Show prompt
 			</button>
 			{#if showPrompt}
 				<div class="prompt-content">
@@ -328,10 +354,30 @@
 		white-space: nowrap;
 	}
 
-    input[type="range"] {
+	input[type='range'] {
 		flex: 1;
 	}
 
+	.disclaimer {
+		background: #fff8ed;
+		border: 1px solid #f6c96a;
+		border-radius: 8px;
+		padding: 0.75rem 1rem;
+		margin-bottom: 1.25rem;
+		font-size: 0.82rem;
+		line-height: 1.5;
+		color: #8b6914;
+		display: flex;
+		gap: 0.6rem;
+		align-items: flex-start;
+	}
+
+	.disclaimer-icon {
+		flex-shrink: 0;
+		font-size: 1rem;
+		line-height: 1.5;
+	}
+
 	.convert-btn {
 		width: 100%;
 		padding: 0.85rem;
@@ -342,9 +388,7 @@
 		font-size: 1.05rem;
 		font-weight: 700;
 		cursor: pointer;
-        transition:
+		transition: background 0.2s, opacity 0.2s;
-            background 0.2s,
-            opacity 0.2s;
 	}
 
 	.convert-btn:hover:not(:disabled) {