MagicBook.AI

An AI-powered Canva App creates children's books, blending writing, illustration, animation, voice, and music for seamless Canva editing and crafting unique storybooks with lasting memories.

Comment 5

Inspiration

Product Background

As a leading design platform, Canva is advancing AI technology with a strong focus on educational applications. Canva's AI strategy aims to make learning more personalized and interactive while supporting educators. Tools like Magic Write and Magic Design tailor student learning experiences, boost creativity, and enhance productivity. Since 2019, Canva for Education has provided free, cutting-edge technology to students and educators worldwide, reinforcing Canva's mission to make design accessible to all.

Current Challenges

  1. Child Book Market Challenges: The children's picture book market struggles with declining sales, market saturation, and demographic shifts, driving a need for more personalized and innovative content.

  2. Opinions on AI in Education: AI integration in K-12 education offers significant benefits but faces challenges such as infrastructure needs, educator training, and ethical concerns. Despite these hurdles, many educators and students recognize the potential of AI to enhance learning.

  3. Competition in AI-Driven Design: Beyond Canva, competition in AI-driven design tools is intensifying, with Figma, Photoshop, and CapCut leading the way. These platforms leverage AI to streamline content creation, offering features like automated editing, AI-generated designs, and efficient video production.

Our Solution

To address these challenges, we designed MagicBook.AI, an AI-powered Canva App for creating children's books. This app offers features like story writing, illustration, animation, voice interaction, and music composition, all seamlessly integrated with Canva for easy editing. Aligned with Canva's AI education strategy, MagicBook.AI enables personalized book creation, helps families create lasting memories, makes teaching more engaging, and introduces children to the fun and convenience of AI technology.

Why It Works

Comprehensive Product Workflow

Our project builds on Canva app and powerful AI open-source models, offering a complete workflow from script generation to audiobook production. It simplifies complex tasks, meets user needs, and explores the future potential of AI applications.

Broad Application and Social Value

MagicBook.AI is ideal for customizing children's books for families, integrating them into classroom teaching, and allowing children to experience the fun and positive impact of AI technology. It also empowers children in underserved areas and those with disabilities to create their own stories using AI, aligning with Canva's commitment to "technology for good."

New Business Model and Educational Development

Our project expands Canva's K12 education business into the children's book market, creating new commercial opportunities. By combining education and technology, it promotes smart education development and supports Canva's long-term growth and expansion.

How We Built It

Market and User Research

We began by researching AI design applications and identified the children's book market as a direction combining commercial value and human-centered care. We reviewed numerous Canva blogs and AI apps to ensure our product aligns with Canva's values and strategic direction—creating an all-in-one Canva app for generating children's books with ease and practicality. Finally, we studied various AI-generated product workflows to design and plan our app's features.

Product Design

Based on our research, we designed 6 main functional pages for seamless integration within the Canva app:

  1. HomePage features "Discover" and "Generate" subpages. In "Discover," users can view and import generated stories, images, videos, audio, and text into Canva for editing. "Generate" initiates the story creation process.

  2. ScriptPage generates a story script by filling in details like description, target age, style, teaching content, and chapter length. After generation, the outline with background, characters, and chapter content is displayed, with options to regenerate or proceed.

  3. DesignPage lets users select art style and dimensions to generate illustrations, which can be converted into animated videos. Afterward, they can proceed to the voiceover stage.

  4. VoiceoverPage (optional) can choose language, voice style, gender, and age range for the voiceover. Once generated, they move on to the music stage.

  5. MusicPage (optional) define music style, content, and whether it should be instrumental. After generation, they proceed to the summary stage.

  6. SummaryPage displays all generated content—images, videos, text, dialogues, narration, and music—chapter by chapter, allowing users to review and apply them within Canva's design interface.

Technical Implementation

We implemented an efficient development plan by leveraging our team's expertise. To ensure all components like tabs and buttons follow Canva Guidelines, we used Canva UI for consistency and streamlined feature implementation. The front-end was developed using React, TypeScript, and JavaScript, while the back-end was powered by Flask. We deployed six AI models from Hugging Face on Google Colab, including ChatGPT API (text2Text), Stable Diffusion (text2Img, img2Img), LoRA (fine-tuning), AnimateDiffusion (text2Animation, img2Animation), ChatTTS (text2Speech), and MusicGen (text2Music).

Testing and Optimization

In the final phase, we conducted thorough testing, hosted the back-end, launched the Canva app, deployed code on GitHub, and produced detailed reports and demo videos. This process ensured seamless functionality and clearly demonstrated our product concept.

What We Learned

Product Development

We successfully navigated the entire development lifecycle within one month, deepening our understanding of the process, Canva's values, and AI strategies. This allowed us to explore new features for Canva AI apps.

Team Collaboration

As the team leader, I focused on balancing challenges with effective implementation. We prioritized tasks, and the team's active learning and problem-solving were crucial to our success.

Skills Enhancement

Despite this being our third hackathon, we continued to push ourselves beyond simple projects or standard solutions. We aligned our work with Canva's strengths and future strategy, aiming to create a meaningful AI application that could excel in the AI for Design global competition.

Conclusion

In conclusion, we are grateful for the opportunity to learn more about Canva, complete our first Canva app, and contribute to the development of the Canva AI apps ecosystem. This experience helped us gain valuable knowledge and skills, and we hope our efforts lead to a positive outcome in the competition.

+ 10 more
Share this project:

Updates