1 Click Story

Introduction

The "1 Click Story" project aims to develop an intuitive platform that allows users to generate short stories and accompanying visuals with minimal effort. The platform will enable users to create engaging short videos with animations, voiceovers, and captions in multiple languages, all through a streamlined, one-click process.

System Overview

The "1 Click Story" platform will provide users with the ability to input a story idea or a brief narrative. Based on this input, the system will generate a short story and create a series of images in either 9:16 or 16:9 aspect ratios. These images will be animated into a short video clip, complete with voiceovers and captions in Bengali, Hindi, and English. Users will have the flexibility to select their preferences for animations, voiceovers, and captions, ensuring a personalized storytelling experience.

Functional Requirements as Story Points

• As a User, I should be able to input a short story idea or narrative.
• As a User, I should be able to generate a short story based on my input.
• As a User, I should be able to create 8 to 10 images based on the generated story.
• As a User, I should be able to choose the aspect ratio (9:16 or 16:9) for the images.
• As a User, I should be able to animate the images with zoom in, zoom out, or other effects.
• As a User, I should be able to compile the images into a short video of 30 seconds to 1 minute.
• As a User, I should be able to add voiceovers in Bengali, Hindi, and English.
• As a User, I should be able to add captions in Bengali, Hindi, and English.
• As a User, I should be able to select which features (animations, voiceovers, captions) to include in the final video.

User Personas

• Story Creator: Individuals who want to quickly generate and share short stories with visuals and animations.
• Language Enthusiast: Users who prefer content in specific languages (Bengali, Hindi, English) and want to customize voiceovers and captions accordingly.

Core User Flows

1. Story Creation Flow:

   • User inputs a story idea -> System generates a short story -> User reviews and confirms the story.

2. Image and Video Generation Flow:

   • System creates images based on the story -> User selects image aspect ratio -> User chooses animation effects -> System compiles images into a video.

3. Customization Flow:

   • User selects language for voiceovers and captions -> User chooses which features to include -> System generates the final video.

Visuals Colors and Theme

• primary: #4A90E2 (a vibrant blue for brand identity)
• primary_light: #A6C8F0 (a lighter blue for hover states)
• secondary: #E94E77 (a bold pink for emphasis and links)
• accent: #F5A623 (a bright orange for call-to-action elements)
• highlight: #F8E71C (a warm yellow for notifications and active states)
• bg: #FFFFFF (a clean white for the background)
• surface: rgba(74, 144, 226, 0.1) (a subtle blue tint for panels)
• text: #333333 (a dark grey for primary text)
• text_muted: #777777 (a softer grey for secondary text)
• border: rgba(74, 144, 226, 0.2) (a light blue for borders)

Signature Design Concept

The homepage of "1 Click Story" will feature an interactive "Story Galaxy" concept. Users will be greeted with a dynamic 3D galaxy map where each star represents a different story idea or genre. By clicking on a star, users can explore story themes and initiate the story creation process. The galaxy will rotate and zoom as users navigate, creating an immersive experience. This concept will be built using @react-three/fiber and @react-three/drei for the 3D interactions, ensuring a captivating and engaging user experience.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, providing a layered depth effect as users scroll through the content. Atmospheric elements will move at different speeds, creating a sense of immersion and storytelling. The internal pages, such as the story creation and customization interfaces, will use a "static" model to prioritize clarity and ease of use.

Non-Functional Requirements

• The system should support high-quality image and video rendering.
• The platform must be responsive and accessible across various devices and screen sizes.
• The system should ensure data privacy and secure user inputs.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MongoDB
• AI Models: Google Nano banana for image generation
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The system assumes users have basic internet connectivity to access the platform.
• The platform will primarily target users in India, supporting Bengali, Hindi, and English languages.
• The system will be designed to handle a moderate volume of concurrent users.

Glossary

• Aspect Ratio: The proportional relationship between the width and height of an image or video.
• Voiceover: A production technique where a voice is used in a video or presentation.
• Caption: Text displayed on a screen to provide additional information or translation.

This document outlines the comprehensive requirements and design considerations for the "1 Click Story" project, ensuring a seamless and engaging user experience.