Ichitux
112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Cpu, Save, Globe } from 'lucide-react';
|
|
|
|
export default function SettingsPage() {
|
|
const [selectedModel] = useState('gpt-4o-mini');
|
|
const [imageModel] = useState('stable-diffusion-v1-6');
|
|
const { t, i18n } = useTranslation();
|
|
|
|
const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
i18n.changeLanguage(e.target.value);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
// Settings are now fixed to cloud models
|
|
alert('Cloud AI models are configured automatically!');
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto space-y-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900">{t('settings.title')}</h2>
|
|
<p className="text-gray-500 mt-1">
|
|
Cloud AI configuration and application preferences
|
|
</p>
|
|
</div>
|
|
|
|
{/* Language Configuration */}
|
|
<div className="card">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<Globe className="w-5 h-5" />
|
|
{t('settings.language')}
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="label">{t('settings.languageSelect')}</label>
|
|
<select
|
|
value={i18n.language}
|
|
onChange={handleLanguageChange}
|
|
className="input bg-white"
|
|
>
|
|
<option value="en">{t('settings.english')}</option>
|
|
<option value="es">{t('settings.spanish')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cloud AI Configuration */}
|
|
<div className="card">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<Cpu className="w-5 h-5" />
|
|
Cloud AI Settings
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="label">Text Generation Model</label>
|
|
<select
|
|
value={selectedModel}
|
|
disabled
|
|
className="input bg-gray-100"
|
|
>
|
|
<option value="gpt-4o-mini">OpenAI GPT-4o Mini (via OpenRouter)</option>
|
|
</select>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Used for book outlines, chapters, and text generation (free tier)
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="label">Image Generation Model</label>
|
|
<select
|
|
value={imageModel}
|
|
disabled
|
|
className="input bg-gray-100"
|
|
>
|
|
<option value="stable-diffusion-v1-6">Stability AI Stable Diffusion v1.6</option>
|
|
</select>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Used for AI book cover generation (free credits available)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* API Setup Help */}
|
|
<div className="card bg-blue-50 border-blue-200">
|
|
<h3 className="font-medium text-blue-900 mb-2">API Key Setup</h3>
|
|
<p className="text-sm text-blue-700 mb-3">
|
|
Configure your API key in the server/.env file:
|
|
</p>
|
|
<code className="block bg-white rounded p-3 text-sm font-mono text-blue-800">
|
|
OPENROUTER_API_KEY=your_openrouter_api_key_here
|
|
</code>
|
|
<p className="text-sm text-blue-700 mt-2">
|
|
Get a free API key from: <a href="https://openrouter.ai/keys" className="underline" target="_blank" rel="noopener noreferrer">OpenRouter</a>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Save Button */}
|
|
<div className="flex justify-end">
|
|
<button onClick={handleSave} className="btn-primary flex items-center gap-2">
|
|
<Save className="w-4 h-4" />
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|