/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const PRESET_PODCASTS = [ { personality1: "a Silicon Valley CEO", personality2: "a migrant farm worker", topic: "California: 200,000 homeless, 2 million unregistered citizens, 40% all financially burdened. 3.5 million homes needed by 2025", }, { personality1: "a city mayor", personality2: "a college student", topic: "California: 200,000 homeless, 2 million unregistered citizens, 40% all financially burdened. 3.5 million homes needed by 2025s", }, { personality1: "a venture capitalist", personality2: "an architect", topic: "California: 200,000 homeless, 2 million unregistered citizens, 40% all financially burdened. 3.5 million homes needed by 2025", }, ]; function App() { const [personality1, setPersonality1] = useState(PRESET_PODCASTS[0].personality1); const [personality2, setPersonality2] = useState(PRESET_PODCASTS[0].personality2); const [topic, setTopic] = useState(PRESET_PODCASTS[0].topic); const [messageLimit, setMessageLimit] = useState(20); const [conversation, setConversation] = useState([]); const [loading, setLoading] = useState(false); const [isGenerating, setIsGenerating] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [conversation]); const generateNextMessage = async () => { const currentSpeaker = conversation.length % 2 === 0 ? 1 : 2; const res = await fetch("?nextMessage=true", { method: "POST", body: JSON.stringify({ personality1, personality2, topic, conversation, currentSpeaker, }), }); const data = await res.json(); setConversation(prev => [...prev, data.message]); }; const startNewConversation = async () => { setConversation([]); setIsGenerating(true); await generateNextMessage(); }; const handleKeyPress = (e) => { if (e.key === "Enter") { startNewConversation(); } }; const setPresetPodcast = (preset) => { setPersonality1(preset.personality1); setPersonality2(preset.personality2); setTopic(preset.topic); }; const clearConversation = () => { setConversation([]); setIsGenerating(false); }; const copyToClipboard = () => { const text = conversation.map(msg => `${msg.speaker === 1 ? personality1 : personality2}: ${msg.text}`).join( "\n\n", ); navigator.clipboard.writeText(text); }; const toggleTone = () => { if (personality1.includes("Silicon Valley CEO")) { setPersonality1("a compassionate tech industry leader"); setPersonality2("a community advocate with farming background"); } else { setPersonality1("a Silicon Valley CEO"); setPersonality2("a migrant farm worker"); } }; const regenerateLastMessage = async () => { if (conversation.length > 0) { const newConversation = conversation.slice(0, -1); setConversation(newConversation); setIsGenerating(true); } }; const exportScript = () => { let script = `Podcast Topic: ${topic}\n\n`; script += `Host 1: ${personality1}\n`; script += `Host 2: ${personality2}\n\n`; script += `=== Script ===\n\n`; conversation.forEach(msg => { script += `${msg.speaker === 1 ? "Host 1" : "Host 2"}: ${msg.text}\n\n`; }); const blob = new Blob([script], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `podcast-script-${topic.slice(0, 30)}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; useEffect(() => { if (isGenerating && conversation.length < messageLimit) { const timer = setTimeout(() => { generateNextMessage(); }, 250); return () => clearTimeout(timer); } else { setIsGenerating(false); } }, [conversation, isGenerating, messageLimit]); return (

🎙️ Podcast Script Generator

setPersonality1(e.target.value)} onKeyPress={handleKeyPress} placeholder="First host personality" /> setPersonality2(e.target.value)} onKeyPress={handleKeyPress} placeholder="Second host personality" /> setMessageLimit(Number(e.target.value))} min="1" max="50" className="w-20 bg-gray-800 text-white rounded-lg px-4 py-2 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" title="Number of exchanges" />

setTopic(e.target.value)} onKeyPress={handleKeyPress} placeholder="What's the podcast topic?" /> {!isGenerating ? ( ) : ( )}

{PRESET_PODCASTS.map((preset, i) => ( ))}

🎙️ {personality1}

{personality2} 🎙️

{conversation.map((msg, i) => (

{msg.text}

))} {isGenerating && (

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { const url = new URL(req.url); if (url.searchParams.has("nextMessage")) { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const { personality1, personality2, topic, conversation, currentSpeaker } = await req.json(); let currentContext = `You're generating a podcast script. The topic is: ${topic}\n\n`; conversation.forEach(msg => { currentContext += `${msg.speaker === 1 ? personality1 : personality2}: ${msg.text}\n`; }); const currentPersonality = currentSpeaker === 1 ? personality1 : personality2; const response = await openai.chat.completions.create({ messages: [ { role: "system", content: `You are ${currentPersonality} co-hosting a podcast. Respond naturally as this character would speak in a podcast setting, with their unique perspective and conversational style. Keep responses concise but engaging (2-3 sentences). Include natural podcast elements like agreeing/disagreeing with co-host, asking questions, or building on previous points.`, }, { role: "user", content: currentContext, }, ], model: "gpt-4-mini", max_tokens: 150, }); const message = { speaker: currentSpeaker, text: response.choices[0].message.content, }; return new Response(JSON.stringify({ message }), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Podcast Script Generator

`, { headers: { "Content-Type": "text/html" }, }, ); }