Almost there, just a moment...

); } return (

{!showResults ? ( <>

FREE YouTube Title Generator

What is your video about? setFormData({ ...formData, topic: e.target.value }) } /> </div> <div> <label className="text-lg font-semibold mb-2 block"> Who is your target audience? </label> <input type="text" className="w-full p-4 rounded-2xl bg-gray-50 border border-gray-100" placeholder="e.g., Small business owners, marketing managers" value={formData.targetAudience} onChange={(e) => setFormData({ ...formData, targetAudience: e.target.value, }) } /> </div> <div> <label className="text-lg font-semibold mb-2 block"> Your email </label> <input type="email" className="w-full p-4 rounded-2xl bg-gray-50 border border-gray-100" placeholder="name@company.com" value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value }) } /> </div> </div> {error && ( <div className="mt-4 text-red-500 text-center">{error}</div> )} <div className="mt-5"> <button className="w-full bg-[#2D2D2D] text-white rounded-full p-[10px] text-[19px] font-semibold hover:bg-black transition-colors" onClick={handleSubmit} > Generate my Titles → </button> </div> </> ) : ( <div className="pt-2"> <div className="flex items-center justify-between mb-6"> <h2 className="text-2xl font-bold">Your Generated Titles:</h2> <button onClick={() => onRegenerate(formData)} className="w-10 h-10 flex items-center justify-center bg-gray-50 rounded-full hover:bg-gray-100 transition-colors" disabled={loading} > <i className={`fas fa-sync-alt text-gray-600 ${loading ? "animate-spin" : ""}`} /> </button> </div> <div className="space-y-4 mb-8"> {titles.map((item, index) => ( <div key={index} className="bg-gray-50 rounded-2xl p-6 space-y-2" > <div className="font-semibold text-lg">{item.title}</div> <div className="text-gray-600 text-sm"> {item.explanation} </div> </div> ))} </div> <div className="bg-gray-50 rounded-2xl p-8 text-center"> <h3 className="text-xl font-semibold mb-4"> Want to get even better YouTube title suggestions? </h3> <p className="text-gray-600 mb-6"> Sign up for SummarAIze and automatically generate optimized titles, descriptions, tags, chapters, and more—directly from your YouTube videos. </p> <button className="bg-[#2D2D2D] text-white rounded-full py-4 px-8 text-lg font-semibold hover:bg-black transition-colors"> Create Account </button> </div> </div> )} </div> </div> </div> ); } function StoryComponent() { const [titles, setTitles] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [showResults, setShowResults] = useState(false); const generateTitles = async (formData) => { setLoading(true); setError(null); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a YouTube title expert. Generate 5 engaging, clickable titles that follow YouTube best practices. Make them catchy and optimized for the algorithm.", }, { role: "user", content: `Generate 5 YouTube titles for a video about ${formData.topic}. Target audience: ${formData.targetAudience}.`, }, ], json_schema: { name: "youtube_titles", schema: { type: "object", properties: { titles: { type: "array", items: { type: "object", properties: { title: { type: "string" }, explanation: { type: "string" }, }, required: ["title", "explanation"], additionalProperties: false, }, }, }, required: ["titles"], additionalProperties: false, }, }, }), }); if (!response.ok) { throw new Error("Failed to generate titles"); } const data = await response.json(); const generatedTitles = JSON.parse(data.choices[0].message.content); setTitles(generatedTitles.titles); setShowResults(true); } catch (err) { setError("Something went wrong. Please try again."); console.error(err); } finally { setLoading(false); } }; return ( <div> <MainComponent onSubmit={generateTitles} titles={titles} loading={loading} error={error} showResults={showResults} onReset={() => { setShowResults(false); setTitles([]); }} onRegenerate={generateTitles} /> </div> ); } </article></body></html>