DEV Community

sourav maji
sourav maji

Posted on • Edited on

Made AI-Powered Interactive Storybook Generator with Next.js, Gemini and Elevenlabs ️‍🔥

#elevenlabs #storybook #nextjs #ai

Hey there, fellow developers! 👋 Today, I'm excited to share how I built CrazyStory, an interactive storybook generator that combines the power of AI for story generation, text-to-speech, and image generation. This project showcases how to create an engaging web application that turns simple prompts into full-fledged illustrated stories with audio narration.

Image description

Tech Stack

Frontend Framework: Next.js with React
UI Components: shadcn/ui
Styling: Tailwind CSS
AI Services:

Google's Gemini AI for story generation
ElevenLabs API for text-to-speech
GetImg.ai for image generation

Additional Libraries:
jsPDF for PDF generation
Lucide React for icons
React Hooks for state management

Key Features
AI-powered story generation based on user prompts
Automatic illustration generation for each story page
Text-to-speech narration
Interactive page navigation
PDF and audio download capabilities
Responsive design with a modern UI

Step-by-Step Implementation Guide

  1. Project Setup First, create a new Next.js project with Tailwind CSS:

npx create-next-app@latest story-wizard-pro --typescript --tailwind
cd story-wizard-pro

Install required dependencies:
npm install @google/generative-ai jspdf lucide-react
npm install @radix-ui/react-dialog @radix-ui/react-slot

  1. UI Components Setup The application uses shadcn/ui components for a polished look. Install the core components:

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input dialog

  1. Core Functionality Implementation Story Generation with Gemini AI The story generation uses Google's Gemini AI model. Here's the key implementation: 
const initializeChatSession = async () => { const genAI = new GoogleGenerativeAI(process.env.NEXT_PUBLIC_GEMINI_API_KEY); const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", }); const generationConfig = { temperature: 1, topP: 0.95, topK: 64, maxOutputTokens: 8192, }; const chatSession = model.startChat({ generationConfig, safetySettings, }); return chatSession; };
Enter fullscreen mode Exit fullscreen mode

Image Generation Integration
The application uses GetImg.ai for generating illustrations:

const generateImageForPage = async (pageContent) => { const response = await fetch('https://api.getimg.ai/v1/flux-schnell/text-to-image', { method: 'POST', headers: { 'Authorization': `Bearer ${YOUR_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: pageContent.join(' '), width: 1200, height: 1200, steps: 2, output_format: 'png', response_format: 'url', }), }); const data = await response.json(); return data.url; };
Enter fullscreen mode Exit fullscreen mode

Text-to-Speech Implementation
ElevenLabs API is used for generating natural-sounding narration:

const generateAudio = async (text) => { const response = await fetch("https://api.elevenlabs.io/v1/text-to-speech/21m00Tcm4TlvDq8ikWAM", { method: 'POST', headers: { "Accept": "audio/mpeg", "Content-Type": "application/json", "xi-api-key": YOUR_API_KEY }, body: JSON.stringify({ text: text, model_id: "eleven_monolingual_v1", voice_settings: { stability: 0.5, similarity_boost: 0.5 } }) }); const blob = await response.blob(); return URL.createObjectURL(blob); };
Enter fullscreen mode Exit fullscreen mode
  1. User Interface Design The UI is built with a combination of Tailwind CSS and shadcn/ui components. Here's the main layout structure: 
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"> <NavigationBar /> <main className="container mx-auto px-4 py-8"> {/* Story Input Section */} <div className="max-w-2xl mx-auto space-y-4 mb-12"> <Input type="text" value={storyType} onChange={(e) => setStoryType(e.target.value)} placeholder="What's your story about?" className="w-full pl-12 pr-4 py-3" /> <Button onClick={generateStory}> Generate Story </Button> </div> {/* Story Display Section */} <Card className="bg-slate-800/50 border-slate-700"> {/* Navigation Controls */} {/* Story Content */} {/* Audio Controls */} </Card> </main> </div>
Enter fullscreen mode Exit fullscreen mode
  1. PDF Generation The PDF download feature uses jsPDF: 
const downloadPDF = () => { const pdf = new jsPDF(); let y = 20; // Add title pdf.setFont("helvetica", "bold"); pdf.setFontSize(16); pdf.text(`A Story About ${storyType}`, 105, y, { align: "center" }); // Add content storyPages.forEach((page, index) => { if (pageImages[index]) { pdf.addImage(pageImages[index], 'JPEG', 20, y, 170, 100); } // Add text content page.forEach(paragraph => { const lines = pdf.splitTextToSize(paragraph, 170); lines.forEach(line => { pdf.text(line, 20, y); y += 7; }); }); }); pdf.save("storybook.pdf"); };
Enter fullscreen mode Exit fullscreen mode

Conclusion
Building Story Wizard Pro was an exciting journey into combining multiple AI services into a cohesive web application. The project demonstrates how modern web technologies can be used to create engaging, interactive experiences.

Top comments (0)