Taylor Swift Eras Image Generator

/** @jsxImportSource https://esm.sh/react */ import { createFalClient } from "https://esm.sh/@fal-ai/client"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const swiftEras = [ { name: "Debut", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/1.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361917469-1.png", themeColor1: "#A9CBAA", themeColor2: "#0C1A0C", }, { name: "Fearless", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/landing-images/1678544276252-2-v2.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361934058-2.png", themeColor1: "#FDDAA6", themeColor2: "#1E151A", }, { name: "Speak Now", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/3.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361938785-3.png", themeColor1: "#D6BADC", themeColor2: "#000000", }, { name: "Red", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/4.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361944562-4.png", themeColor1: "#72333C", themeColor2: "#C7B2A2", }, { name: "1989", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/5.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361948489-5.png", themeColor1: "#034A62", themeColor2: "#D1F3FF", }, { name: "Reputation", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/6.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361951894-6.png", themeColor1: "#2A2628", themeColor2: "#CACACA", }, { name: "Lover", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/7.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361917469-1.png", themeColor1: "#FBB3D1", themeColor2: "#3D2D34", }, { name: "Folklore", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/8.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361955371-7.png", themeColor1: "#D5D5D5", themeColor2: "#000000", }, { name: "Evermore", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/landing-images/1678544281122-9-v2.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361958514-8.png", themeColor1: "#E0C9AF", themeColor2: "#2E2327", }, { name: "Midnights", image: "https://assets.dmi.umgapps.com/assets/ts/ttpd/1715195830303-new-midnights.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/taylor-swift/logosv2/1682361961823-9.png", themeColor1: "#E0EDFD", themeColor2: "#1F2E43", }, { name: "TTPD", image: "https://assets.dmi.umgapps.com/assets/ts/ttpd/1715168073245-ttpd.jpg", logoUrl: "https://assets.dmi.umgapps.com/assets/ts/ttpd/1715168828695-10.png", themeColor1: "#9E958B", themeColor2: "#EEEDEB", }, ]; function Header({ logoUrl, themeColor1, themeColor2 }) { return (

); } function EraSelector({ activeEra, onSelectEra }) { return (

{swiftEras.map((era) => ( ))}

); } function truncatePrompt(prompt, maxLength = 50) { if (prompt.length <= maxLength) return prompt; return prompt.substring(0, maxLength - 3) + "..."; } function ImageGallery({ images, activeEra, onLike, onDelete }) { const downloadImage = async (url, filename) => { try { const response = await fetch(url); const blob = await response.blob(); const blobUrl = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = blobUrl; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(blobUrl); } catch (error) { console.error("Error downloading image:", error); } }; return (

Generated Images Gallery

{images.map((image) => (

${image.original_prompt}$

{truncatePrompt(image.original_prompt)}

Likes: {image.likes}

downloadImage(image.url, `taylor-swift-${image.era}-${image.id}.jpg`)} >

{truncatePrompt(image.original_prompt, 100)}

Click to Download

))}

); } function App() { const [prompt, setPrompt] = useState(""); const [imageUrl, setImageUrl] = useState(""); const [loading, setLoading] = useState(false); const [activeEra, setActiveEra] = useState(swiftEras[10]); const [galleryImages, setGalleryImages] = useState([]); const [enhancedPrompt, setEnhancedPrompt] = useState(""); useEffect(() => { fetchImages(); }, []); const fetchImages = async () => { try { const response = await fetch("/api/images"); const images = await response.json(); setGalleryImages(images); } catch (error) { console.error("Error fetching images:", error); } }; const generateImage = async (e?: React.FormEvent) => { e?.preventDefault(); setLoading(true); try { // Enhance the prompt using the server-side endpoint const enhancedPromptResponse = await fetch("/api/enhance-prompt", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, era: activeEra.name }), }); const { enhancedPrompt } = await enhancedPromptResponse.json(); setEnhancedPrompt(enhancedPrompt); // Log the enhanced prompt to the console console.log("Enhanced Prompt:", enhancedPrompt); const fal = createFalClient({ proxyUrl: "/api/fal/proxy", }); const result = await fal.run("fal-ai/flux/schnell", { input: { prompt: enhancedPrompt, image_size: "landscape_4_3", num_inference_steps: 4, num_images: 1, enable_safety_checker: true, sync_mode: true, }, }); const generatedImageUrl = result.data.images[0].url; setImageUrl(generatedImageUrl); } catch (error) { console.error("Error generating image:", error); } finally { setLoading(false); } }; const handleEraSelect = (era) => { setActiveEra(era); }; const likeImage = async (imageId) => { try { await fetch(`/api/images/${imageId}/like`, { method: "POST" }); fetchImages(); // Refresh the gallery after liking } catch (error) { console.error("Error liking image:", error); } }; const deleteImage = async (imageId) => { try { await fetch(`/api/images/${imageId}`, { method: "DELETE" }); fetchImages(); // Refresh the gallery after deleting } catch (error) { console.error("Error deleting image:", error); } }; const addToGallery = async () => { try { await fetch("/api/images", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: imageUrl, original_prompt: prompt, enhanced_prompt: enhancedPrompt, era: activeEra.name, }), }); fetchImages(); // Refresh the gallery after adding setImageUrl(""); // Clear the generated image } catch (error) { console.error("Error adding image to feed:", error); } }; return (

{imageUrl && (

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { falProxyRequest } = await import("https://esm.town/v/stevekrouse/falProxyRequest"); const { OpenAI } = await import("https://esm.town/v/std/openai"); const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_images_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT NOT NULL, original_prompt TEXT NOT NULL, enhanced_prompt TEXT NOT NULL, era TEXT NOT NULL, likes INTEGER DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); const url = new URL(req.url); if (url.pathname === "/") { return new Response( ` Taylor Swift Eras Image Generator

`, { headers: { "content-type": "text/html" }, }, ); } if (url.pathname === "/api/fal/proxy") { return falProxyRequest(req); } if (url.pathname === "/api/enhance-prompt") { if (req.method === "POST") { const { prompt, era } = await req.json(); const openai = new OpenAI(); const enhancedPromptResponse = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are an expert in Taylor Swift's music and eras. Your task is to enhance the given prompt to create a more detailed and vivid description for image generation. Focus 80% on enhancing the user's input and 20% on incorporating elements from the specified era's aesthetic, themes, and iconic elements. Fulfill the user's prompt as best as possible, ensuring that any additional details like who Taylor is with or where she is are accounted for in the enhanced prompt. Make sure the user's prompt stays on topic, and act as a moderator if the user prompts something inappropriate.", }, { role: "user", content: `Enhance this prompt for image generation, focusing mainly on the user's input with a slight touch of Taylor Swift's ${era} era: ${prompt}`, }, ], model: "gpt-4o-mini", max_tokens: 100, }); const enhancedPrompt = enhancedPromptResponse.choices[0].message.content; return new Response(JSON.stringify({ enhancedPrompt }), { headers: { "Content-Type": "application/json" }, }); } } if (url.pathname === "/api/images") { if (req.method === "GET") { const images = await sqlite.execute(` SELECT id, url, original_prompt, enhanced_prompt, era, likes, created_at FROM ${KEY}_images_${SCHEMA_VERSION} ORDER BY likes DESC, created_at DESC `); return new Response(JSON.stringify(images.rows), { headers: { "Content-Type": "application/json" }, }); } else if (req.method === "POST") { const { url, original_prompt, enhanced_prompt, era } = await req.json(); await sqlite.execute( ` INSERT INTO ${KEY}_images_${SCHEMA_VERSION} (url, original_prompt, enhanced_prompt, era) VALUES (?, ?, ?, ?) `, [url, original_prompt, enhanced_prompt, era], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } } if (url.pathname.startsWith("/api/images/")) { const id = url.pathname.split("/")[3]; if (url.pathname.endsWith("/like") && req.method === "POST") { await sqlite.execute( ` UPDATE ${KEY}_images_${SCHEMA_VERSION} SET likes = likes + 1 WHERE id = ? `, [id], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } else if (req.method === "DELETE") { await sqlite.execute( ` DELETE FROM ${KEY}_images_${SCHEMA_VERSION} WHERE id = ? `, [id], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } } return new Response("Not Found", { status: 404 }); }

TaylorSwiftMoments