Initial commit: Leopost Full — merge di Leopost, Post Generator e Autopilot OS
- Backend FastAPI con multi-LLM (Claude/OpenAI/Gemini) - Publishing su Facebook, Instagram, YouTube, TikTok - Calendario editoriale con awareness levels (PAS, AIDA, BAB...) - Design system Editorial Fresh (Fraunces + DM Sans) - Scheduler automatico, gestione commenti AI, affiliate links Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michele
287
frontend/src/components/SettingsPage.jsx
Normal file
287
frontend/src/components/SettingsPage.jsx
Normal file
@@ -0,0 +1,287 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { api } from '../api'
|
||||
|
||||
const LLM_PROVIDERS = [
|
||||
{ value: 'claude', label: 'Claude (Anthropic)' },
|
||||
{ value: 'openai', label: 'OpenAI' },
|
||||
{ value: 'gemini', label: 'Gemini (Google)' },
|
||||
]
|
||||
|
||||
const IMAGE_PROVIDERS = [
|
||||
{ value: 'dalle', label: 'DALL-E (OpenAI)' },
|
||||
{ value: 'replicate', label: 'Replicate' },
|
||||
]
|
||||
|
||||
const LLM_DEFAULTS = {
|
||||
claude: 'claude-sonnet-4-20250514',
|
||||
openai: 'gpt-4o',
|
||||
gemini: 'gemini-2.0-flash',
|
||||
}
|
||||
|
||||
const cardStyle = {
|
||||
backgroundColor: 'var(--surface)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '0.75rem',
|
||||
padding: '1.5rem',
|
||||
}
|
||||
|
||||
const inputStyle = {
|
||||
width: '100%',
|
||||
padding: '0.625rem 1rem',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
color: 'var(--ink)',
|
||||
backgroundColor: 'var(--cream)',
|
||||
outline: 'none',
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [settings, setSettings] = useState({})
|
||||
const [providerStatus, setProviderStatus] = useState({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [sectionSaving, setSectionSaving] = useState({})
|
||||
const [sectionSuccess, setSectionSuccess] = useState({})
|
||||
const [sectionError, setSectionError] = useState({})
|
||||
|
||||
const [llmForm, setLlmForm] = useState({
|
||||
llm_provider: 'claude',
|
||||
llm_api_key: '',
|
||||
llm_model: '',
|
||||
})
|
||||
const [imageForm, setImageForm] = useState({
|
||||
image_provider: 'dalle',
|
||||
image_api_key: '',
|
||||
})
|
||||
const [voiceForm, setVoiceForm] = useState({
|
||||
elevenlabs_api_key: '',
|
||||
elevenlabs_voice_id: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings()
|
||||
}, [])
|
||||
|
||||
const loadSettings = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [settingsData, statusData] = await Promise.all([
|
||||
api.get('/settings/').catch(() => ({})),
|
||||
api.get('/settings/providers/status').catch(() => ({})),
|
||||
])
|
||||
|
||||
let normalizedSettings = {}
|
||||
if (Array.isArray(settingsData)) {
|
||||
settingsData.forEach((s) => { normalizedSettings[s.key] = s.value })
|
||||
} else {
|
||||
normalizedSettings = settingsData || {}
|
||||
}
|
||||
|
||||
setSettings(normalizedSettings)
|
||||
setProviderStatus(statusData || {})
|
||||
|
||||
setLlmForm({
|
||||
llm_provider: normalizedSettings.llm_provider || 'claude',
|
||||
llm_api_key: normalizedSettings.llm_api_key || '',
|
||||
llm_model: normalizedSettings.llm_model || '',
|
||||
})
|
||||
setImageForm({
|
||||
image_provider: normalizedSettings.image_provider || 'dalle',
|
||||
image_api_key: normalizedSettings.image_api_key || '',
|
||||
})
|
||||
setVoiceForm({
|
||||
elevenlabs_api_key: normalizedSettings.elevenlabs_api_key || '',
|
||||
elevenlabs_voice_id: normalizedSettings.elevenlabs_voice_id || '',
|
||||
})
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const saveSection = async (section, data) => {
|
||||
setSectionSaving((prev) => ({ ...prev, [section]: true }))
|
||||
setSectionSuccess((prev) => ({ ...prev, [section]: false }))
|
||||
setSectionError((prev) => ({ ...prev, [section]: '' }))
|
||||
|
||||
try {
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
await api.put(`/settings/${key}`, { value })
|
||||
}
|
||||
setSectionSuccess((prev) => ({ ...prev, [section]: true }))
|
||||
setTimeout(() => {
|
||||
setSectionSuccess((prev) => ({ ...prev, [section]: false }))
|
||||
}, 3000)
|
||||
const statusData = await api.get('/settings/providers/status').catch(() => ({}))
|
||||
setProviderStatus(statusData || {})
|
||||
} catch (err) {
|
||||
setSectionError((prev) => ({ ...prev, [section]: err.message || 'Errore nel salvataggio' }))
|
||||
} finally {
|
||||
setSectionSaving((prev) => ({ ...prev, [section]: false }))
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-1" style={{ color: 'var(--ink)' }}>Impostazioni</h2>
|
||||
<div className="flex justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-2 border-t-transparent" style={{ borderColor: 'var(--coral)' }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold" style={{ color: 'var(--ink)' }}>Impostazioni</h2>
|
||||
<p className="mt-1 text-sm" style={{ color: 'var(--muted)' }}>
|
||||
Configurazione dei provider AI e dei servizi esterni
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-2xl space-y-6">
|
||||
{/* LLM Provider */}
|
||||
<div style={cardStyle} className="space-y-4">
|
||||
<h3 className="font-semibold text-sm uppercase tracking-wider" style={{ color: 'var(--muted)' }}>
|
||||
Provider LLM
|
||||
</h3>
|
||||
{sectionError.llm && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">{sectionError.llm}</div>}
|
||||
{sectionSuccess.llm && <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-lg text-emerald-600 text-sm">Salvato con successo</div>}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>Provider</label>
|
||||
<select
|
||||
value={llmForm.llm_provider}
|
||||
onChange={(e) => setLlmForm((prev) => ({ ...prev, llm_provider: e.target.value }))}
|
||||
style={inputStyle}
|
||||
>
|
||||
{LLM_PROVIDERS.map((p) => (
|
||||
<option key={p.value} value={p.value}>{p.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>API Key</label>
|
||||
<input
|
||||
type="password"
|
||||
value={llmForm.llm_api_key}
|
||||
onChange={(e) => setLlmForm((prev) => ({ ...prev, llm_api_key: e.target.value }))}
|
||||
placeholder="sk-..."
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>
|
||||
Modello <span className="font-normal ml-1" style={{ color: 'var(--muted)' }}>(default: {LLM_DEFAULTS[llmForm.llm_provider]})</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={llmForm.llm_model}
|
||||
onChange={(e) => setLlmForm((prev) => ({ ...prev, llm_model: e.target.value }))}
|
||||
placeholder={LLM_DEFAULTS[llmForm.llm_provider]}
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => saveSection('llm', llmForm)}
|
||||
disabled={sectionSaving.llm}
|
||||
className="px-4 py-2 text-white text-sm font-medium rounded-lg transition-opacity"
|
||||
style={{ backgroundColor: 'var(--coral)', opacity: sectionSaving.llm ? 0.7 : 1 }}
|
||||
>
|
||||
{sectionSaving.llm ? 'Salvataggio...' : 'Salva'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Image Provider */}
|
||||
<div style={cardStyle} className="space-y-4">
|
||||
<h3 className="font-semibold text-sm uppercase tracking-wider" style={{ color: 'var(--muted)' }}>
|
||||
Generazione Immagini
|
||||
</h3>
|
||||
{sectionError.image && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">{sectionError.image}</div>}
|
||||
{sectionSuccess.image && <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-lg text-emerald-600 text-sm">Salvato con successo</div>}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>Provider</label>
|
||||
<select
|
||||
value={imageForm.image_provider}
|
||||
onChange={(e) => setImageForm((prev) => ({ ...prev, image_provider: e.target.value }))}
|
||||
style={inputStyle}
|
||||
>
|
||||
{IMAGE_PROVIDERS.map((p) => (
|
||||
<option key={p.value} value={p.value}>{p.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>API Key</label>
|
||||
<input
|
||||
type="password"
|
||||
value={imageForm.image_api_key}
|
||||
onChange={(e) => setImageForm((prev) => ({ ...prev, image_api_key: e.target.value }))}
|
||||
placeholder="API key del provider immagini"
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => saveSection('image', imageForm)}
|
||||
disabled={sectionSaving.image}
|
||||
className="px-4 py-2 text-white text-sm font-medium rounded-lg transition-opacity"
|
||||
style={{ backgroundColor: 'var(--coral)', opacity: sectionSaving.image ? 0.7 : 1 }}
|
||||
>
|
||||
{sectionSaving.image ? 'Salvataggio...' : 'Salva'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Voiceover */}
|
||||
<div style={cardStyle} className="space-y-4">
|
||||
<h3 className="font-semibold text-sm uppercase tracking-wider" style={{ color: 'var(--muted)' }}>
|
||||
Voiceover (ElevenLabs)
|
||||
</h3>
|
||||
{sectionError.voice && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">{sectionError.voice}</div>}
|
||||
{sectionSuccess.voice && <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-lg text-emerald-600 text-sm">Salvato con successo</div>}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>API Key</label>
|
||||
<input
|
||||
type="password"
|
||||
value={voiceForm.elevenlabs_api_key}
|
||||
onChange={(e) => setVoiceForm((prev) => ({ ...prev, elevenlabs_api_key: e.target.value }))}
|
||||
placeholder="ElevenLabs API key"
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>
|
||||
Voice ID <span className="font-normal ml-1" style={{ color: 'var(--muted)' }}>(opzionale)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={voiceForm.elevenlabs_voice_id}
|
||||
onChange={(e) => setVoiceForm((prev) => ({ ...prev, elevenlabs_voice_id: e.target.value }))}
|
||||
placeholder="ID della voce ElevenLabs"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => saveSection('voice', voiceForm)}
|
||||
disabled={sectionSaving.voice}
|
||||
className="px-4 py-2 text-white text-sm font-medium rounded-lg transition-opacity"
|
||||
style={{ backgroundColor: 'var(--coral)', opacity: sectionSaving.voice ? 0.7 : 1 }}
|
||||
>
|
||||
{sectionSaving.voice ? 'Salvataggio...' : 'Salva'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user