/** * Arsova Caption Generator - React Application */ const { useState, useRef, useEffect } = React; /* ═══════════════════════════════════════════════════════════════ CONSTANTS ═══════════════════════════════════════════════════════════════ */ const PLATFORMS = ["Instagram", "TikTok", "Facebook", "Other"]; const POST_TYPES = ["Transformation", "Promotion", "Educational", "Behind-the-scenes", "Testimonial", "Humor", "Motivational"]; const SERVICES = ["Balayage", "Highlights", "Haircut", "Blowout", "Color Correction", "Extensions", "Gloss/Toner", "Keratin Treatment", "Vivid/Fashion Color", "Root Melt", "Money Piece", "Silk Press", "Bob/Lob Cut", "Curtain Bangs", "Bond Repair", "Other"]; const TONES = ["Fun & Playful", "Luxurious & Elegant", "Edgy & Bold", "Warm & Friendly", "Professional & Polished"]; /* ═══════════════════════════════════════════════════════════════ SHARED STYLES ═══════════════════════════════════════════════════════════════ */ const BG = "linear-gradient(170deg, #f7f5f0 0%, #f0ece4 40%, #eae5db 70%, #f4f1eb 100%)"; const GOLD = "#8b7d52"; const DARK = "#2d2d2b"; const chipStyle = (active) => ({ padding: "10px 20px", borderRadius: 100, cursor: "pointer", transition: "all 0.25s ease", border: active ? "2px solid " + GOLD : "1.5px solid rgba(139,125,82,0.3)", background: active ? GOLD : "rgba(255,255,255,0.6)", color: active ? "#fff" : DARK, fontFamily: "'Roboto', sans-serif", fontSize: 15, fontWeight: active ? 600 : 400, letterSpacing: "0.02em", whiteSpace: "nowrap", }); const labelStyle = { fontFamily: "'Roboto', sans-serif", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.12em", color: GOLD, marginBottom: 10, display: "block", }; const inputStyle = { width: "100%", padding: "14px 18px", borderRadius: 12, border: "1.5px solid rgba(139,125,82,0.25)", background: "rgba(255,255,255,0.6)", fontFamily: "'Roboto', sans-serif", fontSize: 14, color: DARK, outline: "none", transition: "border 0.2s ease", boxSizing: "border-box", }; const selectStyle = { ...inputStyle, appearance: "none", backgroundImage: `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='%238b7d52' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`, backgroundRepeat: "no-repeat", backgroundPosition: "right 16px center", paddingRight: 40, }; const sectionTitle = { fontFamily: "'Roboto', sans-serif", fontSize: 15, fontWeight: 600, color: DARK, marginBottom: 0, letterSpacing: "0.02em", }; const stepBadge = { background: GOLD, color: "#fff", borderRadius: 100, width: 22, height: 22, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, flexShrink: 0, }; const goldBtn = (enabled) => ({ padding: "16px 32px", borderRadius: 14, border: "none", background: enabled ? "linear-gradient(135deg, #8b7d52, #6b5f3a)" : "rgba(139,125,82,0.2)", color: enabled ? "#fff" : "#9b9b96", fontFamily: "'Roboto', sans-serif", fontSize: 14, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", cursor: enabled ? "pointer" : "not-allowed", transition: "all 0.3s ease", boxShadow: enabled ? "0 4px 20px rgba(139,125,82,0.3)" : "none", }); const spinner = (size = 18) => ({ width: size, height: size, border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "#fff", borderRadius: "50%", display: "inline-block", animation: "spin 0.8s linear infinite", }); const navLink = (active) => ({ padding: "8px 20px", borderRadius: 100, cursor: "pointer", transition: "all 0.2s ease", background: active ? GOLD : "transparent", color: active ? "#fff" : GOLD, border: active ? "none" : "1.5px solid rgba(139,125,82,0.3)", fontFamily: "'Roboto', sans-serif", fontSize: 12, fontWeight: 500, letterSpacing: "0.05em", textTransform: "uppercase", textDecoration: "none", }); /* ═══════════════════════════════════════════════════════════════ LOADING OVERLAY ═══════════════════════════════════════════════════════════════ */ function LoadingOverlay() { return (
✨

Creating Your Captions

This may take a moment...

); } /* ═══════════════════════════════════════════════════════════════ CAPTION CARD (for generator results) ═══════════════════════════════════════════════════════════════ */ function CaptionCard({ text, tone, onCopy }) { const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); if (onCopy) onCopy(); }; return (
{ e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 32px rgba(45,45,43,0.08)"; }} onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}> {tone && (
{tone}
)}
{text}
); } /* ═══════════════════════════════════════════════════════════════ HISTORY CAPTION CARD (with voting) ═══════════════════════════════════════════════════════════════ */ function HistoryCaptionCard({ caption, onVote, onDelete, isAdmin }) { const [copied, setCopied] = useState(false); const [voting, setVoting] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(caption.caption_text); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const handleVote = async (dir) => { if (voting) return; setVoting(true); await onVote(caption.id, dir); setVoting(false); }; return (
{/* Meta info */}
{caption.platform && {caption.platform}} {caption.post_type && {caption.post_type}} {caption.tone_group && {caption.tone_group.replace(/\s*\(Preferred\)/i, '')}}
{/* Caption text */}
{caption.caption_text}
{/* Actions row */}
{/* Voting */}
0 ? "#2a7d2a" : caption.votes < 0 ? "#8a3030" : DARK, minWidth: 24, textAlign: "center" }}> {caption.votes > 0 ? "+" : ""}{caption.votes}
{/* Copy & Delete */}
{isAdmin && ( )}
); } /* ═══════════════════════════════════════════════════════════════ PARSE RESPONSE ═══════════════════════════════════════════════════════════════ */ function parseResponse(text) { const sections = []; const re = /###\s*(.+)/g; let m, starts = []; while ((m = re.exec(text)) !== null) starts.push({ title: m[1].trim(), index: m.index }); for (let i = 0; i < starts.length; i++) { const chunk = text.substring(starts[i].index, i + 1 < starts.length ? starts[i + 1].index : text.length); const opts = [], optRe = /\*\*Option\s*\d+\*\*/g; let om, os = []; while ((om = optRe.exec(chunk)) !== null) os.push(om.index + om[0].length); for (let j = 0; j < os.length; j++) { const t = chunk.substring(os[j], j + 1 < os.length ? chunk.lastIndexOf("**Option", os[j + 1]) : chunk.length).trim(); if (t.length > 10) opts.push(t); } if (opts.length) sections.push({ title: starts[i].title, options: opts }); } return sections; } /* ═══════════════════════════════════════════════════════════════ LOGIN SCREEN ═══════════════════════════════════════════════════════════════ */ function LoginScreen({ onSuccess }) { const [pw, setPw] = useState(""); const [err, setErr] = useState(""); const [busy, setBusy] = useState(false); const submit = async () => { if (!pw.trim()) return; setBusy(true); setErr(""); try { const r = await fetch("/api/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ password: pw }) }); const d = await r.json(); if (r.ok) onSuccess(d.role); else setErr(d.error || "Incorrect password."); } catch { setErr("Connection error."); } finally { setBusy(false); } }; return (
Team Access

Arsova Caption

Generator

Enter the team password to continue.

{ setPw(e.target.value); setErr(""); }} onKeyDown={e => e.key === "Enter" && submit()} style={{ ...inputStyle, textAlign: "center", fontSize: 15, padding: "16px 20px", marginBottom: 8, border: err ? "1.5px solid rgba(200,70,70,0.5)" : inputStyle.border }} /> {err &&

{err}

}
); } /* ═══════════════════════════════════════════════════════════════ MAIN APP ═══════════════════════════════════════════════════════════════ */ function App() { const [authed, setAuthed] = useState(false); const [role, setRole] = useState(null); const [checking, setChecking] = useState(true); const [page, setPage] = useState("generator"); useEffect(() => { fetch("/api/session").then(r => r.json()).then(d => { if (d.authenticated) { setAuthed(true); setRole(d.role); } }).catch(() => {}).finally(() => setChecking(false)); }, []); const handleLogin = (userRole) => { setAuthed(true); setRole(userRole); }; const handleLogout = () => { setAuthed(false); setRole(null); }; if (checking) return (
); if (!authed) return ; const doLogout = async () => { await fetch("/api/logout", { method: "POST" }).catch(() => {}); handleLogout(); }; return (
{/* Navigation */} {page === "generator" ? : }
); } /* ═══════════════════════════════════════════════════════════════ GENERATOR PAGE ═══════════════════════════════════════════════════════════════ */ function Generator() { const [platform, setPlatform] = useState(""); const [postType, setPostType] = useState(""); const [services, setServices] = useState([]); const [customService, setCustomService] = useState(""); const [clientStory, setClientStory] = useState(""); const [products, setProducts] = useState(""); const [seasonalTheme, setSeasonalTheme] = useState(""); const [specialOffer, setSpecialOffer] = useState(""); const [city, setCity] = useState(""); const [salonName, setSalonName] = useState(""); const [stylistName, setStylistName] = useState(""); const [stylistUsername, setStylistUsername] = useState(""); const [tone, setTone] = useState(""); const [additionalNotes, setAdditionalNotes] = useState(""); const [loading, setLoading] = useState(false); const [rawResponse, setRawResponse] = useState(""); const [sections, setSections] = useState([]); const [error, setError] = useState(""); const [generationId, setGenerationId] = useState(null); const [saved, setSaved] = useState(false); const resultsRef = useRef(null); const toggle = (s) => setServices(p => p.includes(s) ? p.filter(x => x !== s) : [...p, s]); const canSubmit = platform && postType && services.length > 0; const buildPrompt = () => { const all = [...services]; if (customService.trim()) all.push(customService.trim()); let p = "Generate 9 social media captions for a hair salon post.\n\n"; p += "**Platform:** " + platform + "\n"; p += "**Post Type:** " + postType + "\n"; p += "**Service/Style:** " + all.join(", ") + "\n"; if (salonName) p += "**Salon Name:** " + salonName + "\n"; if (stylistName) p += "**Stylist Name:** " + stylistName + "\n"; if (stylistUsername) { const h = stylistUsername.startsWith("@") ? stylistUsername : "@" + stylistUsername; p += "**Stylist Username:** " + h + "\n"; } if (city) p += "**City/Location:** " + city + "\n"; if (clientStory) p += "**Client Story/Inspiration:** " + clientStory + "\n"; if (products) p += "**Products Used:** " + products + "\n"; if (seasonalTheme) p += "**Seasonal Theme:** " + seasonalTheme + "\n"; if (specialOffer) p += "**Special Offer/Promotion:** " + specialOffer + "\n"; if (additionalNotes) p += "**Additional Notes:** " + additionalNotes + "\n"; if (tone) { p += "\n**PREFERRED TONE:** " + tone + "\n"; p += "Generate 5 captions in " + tone + " tone, plus 1 caption in each of the other 4 tones (9 total)."; } else { p += "\nGenerate 9 captions distributed across all 5 tones (Fun & Playful, Luxurious & Elegant, Edgy & Bold, Warm & Friendly, Professional & Polished)."; } return p; }; const handleGenerate = async () => { if (!canSubmit) return; setLoading(true); setError(""); setRawResponse(""); setSections([]); setGenerationId(null); setSaved(false); const metadata = { platform, postType, services: services.join(", "), tone, salonName, stylistName, city }; try { const res = await fetch("/api/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [{ role: "user", content: buildPrompt() }], metadata }), }); if (res.status === 401) { window.location.reload(); return; } const data = await res.json(); if (!res.ok) throw new Error(data.error || "Generation failed."); const text = (data.content || []).map(b => b.type === "text" ? b.text : "").join("\n"); if (!text) throw new Error("Empty response."); setRawResponse(text); const parsed = parseResponse(text); setSections(parsed); if (data.generationId) { setGenerationId(data.generationId); // Auto-save captions to database const captions = []; parsed.forEach(sec => { sec.options.forEach(opt => { captions.push({ toneGroup: sec.title.replace(/\s*\(Preferred\)/i, ''), text: opt }); }); }); if (captions.length > 0) { fetch("/api/captions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ generationId: data.generationId, captions }), }).then(res => { if (res.ok) setSaved(true); }).catch(() => {}); } } setTimeout(() => resultsRef.current?.scrollIntoView({ behavior: "smooth" }), 300); } catch (err) { setError(err.message || "Something went wrong."); } finally { setLoading(false); } }; const handleSaveCaptions = async () => { if (!generationId || sections.length === 0) return; const captions = []; sections.forEach(sec => { sec.options.forEach(opt => { captions.push({ toneGroup: sec.title.replace(/\s*\(Preferred\)/i, ''), text: opt }); }); }); try { const res = await fetch("/api/captions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ generationId, captions }), }); if (res.ok) setSaved(true); } catch (err) { console.error("Save error:", err); } }; const reset = () => { setPlatform(""); setPostType(""); setServices([]); setCustomService(""); setClientStory(""); setProducts(""); setSeasonalTheme(""); setSpecialOffer(""); setCity(""); setSalonName(""); setStylistName(""); setStylistUsername(""); setTone(""); setAdditionalNotes(""); setRawResponse(""); setSections([]); setError(""); setGenerationId(null); setSaved(false); }; return ( <> {/* Loading Overlay */} {loading && } {/* Header */}

Arsova Caption Generator

Create scroll-stopping captions. Fill in the details and get 9 options across 3 tones.

{/* Form */}
{/* Row 1: Platform & Post Type */}
{/* Step 1: Platform */}
1Platform Required
{PLATFORMS.map(p => )}
{/* Step 2: Post Type */}
2Post Type Required
{POST_TYPES.map(t => )}
{/* Row 2: Service & Details */}
{/* Step 3: Service */}
3Service or Style Select at least 1
{SERVICES.map(s => )}
setCustomService(e.target.value)} style={inputStyle} />
{/* Step 4: Details */}
4Details Optional
setSalonName(e.target.value)} style={inputStyle} />
setCity(e.target.value)} style={inputStyle} />
setStylistName(e.target.value)} style={inputStyle} />
setStylistUsername(e.target.value)} style={inputStyle} />