/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { AlertCircle, Dice5, Loader2, Send } from "https://esm.sh/lucide-react@0.258.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function Alert({ variant, children }) { const variantClasses = { destructive: "bg-red-50 text-red-800 border border-red-200", }; return (

{children}

); } function AlertDescription({ children }) { return

{children}

; } function Message({ type, content }) { const messageClass = type === "user" ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"; return (

{content.split("\n").map((paragraph, index) => (

{paragraph}

))}

); } function App() { const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [topic, setTopic] = useState(""); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(scrollToBottom, [messages]); const generateBlogPost = async (topicToUse = "") => { if (!topicToUse && !topic.trim()) return; setLoading(true); setError(""); if (topicToUse) { setMessages((prev) => [ ...prev, { type: "user", content: `Surprise me with a random topic!` }, ]); } else { setMessages((prev) => [...prev, { type: "user", content: topic }]); } try { const response = await fetch("/generate-blog", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ topic: topicToUse }), }); if (!response.ok) { throw new Error("Failed to generate blog post"); } const data = await response.json(); setMessages((prev) => [ ...prev, { type: "bot", content: data.blogPost }, ]); } catch (error) { setError( "An error occurred while generating the blog post. Please try again.", ); } finally { setLoading(false); setTopic(""); } }; const handleRandomTopic = () => { generateBlogPost("RANDOM"); }; return (

Apple Lamps Blog Generator

{messages.map((message, index) => (

))}

{error && ( {error} )}

setTopic(e.target.value)} onKeyPress={(e) => e.key === "Enter" && generateBlogPost()} />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if ( request.method === "POST" && new URL(request.url).pathname === "/generate-blog" ) { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); try { let { topic } = await request.json(); let topicPrompt = ""; if (topic === "RANDOM") { const randomTopicCompletion = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are a creative assistant that generates interesting blog post topics.", }, { role: "user", content: "Generate a random, interesting, and creative topic.", }, ], model: "gpt-4o-mini", max_tokens: 20, }); topic = randomTopicCompletion.choices[0].message.content; topicPrompt = `Write a brief blog post about ${topic}. Keep it concise and engaging, around 200-300 words.`; } else { topicPrompt = `Write a brief blog post about ${topic}. Keep it concise and engaging, around 200-300 words.`; } const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: `You are a skilled writer. Generate an interesting and engaging blog post. Follow these instructions: - Write in a conversational tone - Divide the content into short paragraphs - Use emphasis sparingly for important points - Ensure the blog post is engaging and well-structured - Do not use any HTML tags in your response`, }, { role: "user", content: topicPrompt }, ], model: "gpt-4o-mini", max_tokens: 500, }); const blogPost = completion.choices[0].message.content; return new Response(JSON.stringify({ blogPost, topic }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error generating blog post:", error); return new Response( JSON.stringify({ error: "Failed to generate blog post" }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } return new Response( ` Apple Lamps Blog Generator

`, { headers: { "content-type": "text/html", }, }, ); }

LampBlogs

Versions

v0