VisionCraft AI

AI-powered image generation and story-to-video studio with Hindi, English and Hinglish neural narration.

🚀 Open Live Demo  •  API Status  •  Source Code

Overview

VisionCraft AI is a full-stack creative media platform that converts text prompts into AI-generated images and transforms complete stories into vertical short videos.

The application combines scene planning, dual-keyframe image generation, 2.5D camera motion, subtitles, background music, neural narration and FFmpeg-based video rendering in one workflow. It supports Hindi, English and Hinglish with selectable male and female voices.

Live Project

Service	URL
Live Frontend	visioncraft-ai-vishal.netlify.app
Backend API	visioncraft-ai-api-3g4r.onrender.com
Health Check	API Health Status
Source Code	GitHub Repository

The backend uses a free Render instance. The first request after inactivity may take some time while the service wakes up.

Why VisionCraft AI?

Most basic AI image tools stop after generating one image. VisionCraft AI provides a complete content-production workflow:

flowchart LR
    A[Story or Prompt] --> B[Language Detection]
    B --> C[Scene Planning]
    C --> D[Dual AI Keyframes]
    D --> E[2.5D Scene Animation]
    E --> F[Voice, Music and Captions]
    F --> G[Final MP4 Video]

Loading

• Generates AI images from custom prompts.
• Converts stories into multiple visual scenes.
• Supports Hindi, English and Hinglish narration.
• Creates vertical MP4 videos with two animated keyframes per scene.
• Mixes neural narration, selectable background music and smart subtitles.
• Shows live job progress while cloud rendering continues asynchronously.
• Adds a custom watermark to generated videos.
• Provides downloadable images and videos.
• Includes dependency health checks for production deployment.

Key Features

AI Image Studio

• Prompt-based AI image generation.
• Multiple styles including Photorealistic, Cinematic, 3D Render, Anime, Digital Art and Minimal.
• Square, landscape and vertical aspect ratios.
• Regenerate, save and download actions.
• Recent creation gallery.

Story-to-Video Studio

• Converts a complete story into a multi-scene video.
• Supports 15, 30, 45, 60, 90 and 120-second durations.
• Creates two character-consistent visual keyframes for every scene.
• Generates cinematic zoom, pan, crossfade and action-progression effects.
• Provides low, medium and high animation intensity.
• Exports in 720p or 1080p with optional burned-in subtitles.
• Offers Cinematic Pulse, Calm Ambient, Uplifting or no background music.
• Produces downloadable MP4 videos.
• Displays a generated storyboard.

Neural Narration

• Hindi voices: hi-IN-SwaraNeural and hi-IN-MadhurNeural
• English voices: en-IN-NeerjaNeural and en-IN-PrabhatNeural
• Hinglish support using Hindi neural narration
• Automatic Hindi-script detection
• Edge TTS retry handling
• Audio and video duration synchronization

Portfolio-Ready Interface

• Modern dark SaaS-style design.
• Responsive desktop and mobile layout.
• Custom VisionCraft AI branding.
• Profile image support using browser storage.
• Local video history, download and remove controls.
• Professional profile photo and portfolio links.
• Live frontend and backend deployment.

Screenshots

Create a docs/screenshots folder and add the following project screenshots using these exact file names.

AI Image Studio

Story-to-Video Studio

Generated Storyboard and Video Preview

Mobile Responsive View

Technology Stack

Layer	Technologies
Frontend	React, Vite, JavaScript, Lucide React, responsive CSS
Backend	Node.js, Express.js, CORS
Image Generation	Configurable prompt-based image endpoint
Voice Generation	Python, Edge TTS
Video Processing	FFmpeg, FFprobe
Deployment	Netlify, Render, Docker
Storage	Local generated and temporary media directories
Version Control	Git and GitHub

System Architecture

flowchart TB
    subgraph Client[React Client]
        UI[Creation Studio]
        IMG[AI Image Generator]
        SHORTS[Story-to-Video Form]
        LIBRARY[Creation Library]
    end

    subgraph API[Express API]
        HEALTH[Dependency Health Check]
        IMAGE[Image Generation Route]
        VIDEO[Video Creation Route]
        LANG[Language Detection]
        SCENES[Scene Planner]
    end

    subgraph Media[Media Engine]
        TTS[Edge TTS]
        FFMPEG[FFmpeg and FFprobe]
        FILES[Generated Media]
    end

    UI --> IMAGE
    UI --> VIDEO
    IMAGE --> FILES
    VIDEO --> LANG
    LANG --> SCENES
    SCENES --> TTS
    SCENES --> FFMPEG
    TTS --> FFMPEG
    FFMPEG --> FILES
    HEALTH --> TTS
    HEALTH --> FFMPEG

Loading

Project Structure

VisionCraft-AI/
├── client/
│   ├── src/
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── styles.css
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── server/
│   ├── generated/
│   ├── temp/
│   ├── server.js
│   ├── .env.example
│   └── package.json
├── docs/
│   └── screenshots/
│       ├── image-studio.png
│       ├── story-video-studio.png
│       ├── generated-storyboard.png
│       └── mobile-view.png
├── .dockerignore
├── .gitignore
├── Dockerfile
├── package.json
└── README.md

Local Installation

Prerequisites

• Node.js 18 or newer
• npm
• Python 3
• FFmpeg and FFprobe available in the system PATH
• Internet connection for AI image generation and Edge TTS

1. Clone the repository

git clone https://github.com/Vishal619-dubey/VisionCraft-AI.git
cd VisionCraft-AI

2. Install project dependencies

npm run install:all

Or install separately:

cd server
npm install

cd ../client
npm install

3. Install Edge TTS

py -m pip install --upgrade edge-tts

Verify:

py -m edge_tts --list-voices

4. Verify FFmpeg

ffmpeg -version
ffprobe -version

5. Configure environment variables

cd server
Copy-Item .env.example .env

Example configuration:

PORT=5000
CLIENT_URL=http://localhost:5173
IMAGE_API_BASE=https://image.pollinations.ai/prompt

6. Run the project

From the project root:

npm run dev

Or run both applications separately.

Backend:

cd server
node server.js

Frontend:

cd client
npm run dev

Open:

• Frontend: http://localhost:5173
• API health check: http://localhost:5000/api/health

API Summary

Method	Endpoint	Purpose
GET	/api/health	Check backend, FFmpeg, FFprobe and Edge TTS status
POST	/api/images/generate	Generate an AI image using a text prompt
POST	/api/shorts/create	Start an asynchronous animated-video job
GET	/api/jobs/:jobId	Read render stage, progress and final result
GET	/generated/:file	Access generated image and video files

Story-to-video request example

{
  "topic": "एक प्रेरणादायक हिंदी कहानी...",
  "duration": 45,
  "watermark": "@VISHAL619",
  "style": "Cinematic",
  "language": "Hindi",
  "voiceGender": "Female",
  "voiceRate": 0,
  "music": "Cinematic Pulse",
  "subtitles": true,
  "animationIntensity": "Medium",
  "quality": "720p"
}

Deployment

Backend

The backend is deployed on Render using Docker.

The Docker image includes:

• Node.js
• Python
• Edge TTS
• FFmpeg
• FFprobe
• Required fonts

Frontend

The React frontend is deployed on Netlify with:

VITE_API_URL=https://visioncraft-ai-api-3g4r.onrender.com

The backend allows requests from:

CLIENT_URL=https://visioncraft-ai-vishal.netlify.app

Testing Checklist

node --version
py --version
py -m edge_tts --list-voices
ffmpeg -version
ffprobe -version

Recommended manual flow:

1. Open the live frontend.
2. Generate an AI image.
3. Create a 15-second Hindi video.
4. Verify Hindi neural narration.
5. Test English and Hinglish narration.
6. Download the generated MP4.
7. Check mobile responsiveness.
8. Verify the backend health endpoint.

Security and Repository Hygiene

• Real .env files are ignored by Git.
• Generated media and temporary files are not committed.
• Runtime dependencies are installed during Docker build.
• CORS is restricted using the deployed frontend URL.
• Environment variables are managed through Render and Netlify.

Known Limitations

• The free Render backend may sleep after inactivity.
• Generated files use temporary server storage.
• Generated media may be removed after a redeploy or service restart.
• AI image and TTS generation require an internet connection.
• Long videos may take additional time to render.

Future Improvements

• Persistent Cloudinary or object-storage integration.
• User authentication and personal workspaces.
• Database-backed generation history.
• Video templates and transitions.
• Persistent queue workers for high-traffic deployments.
• Shareable public creation pages.

Resume Summary

Built and deployed VisionCraft AI 2.0, a full-stack generative-media platform using React, Node.js, Express, Python, Edge TTS, FFmpeg and Docker. Engineered asynchronous story-to-video jobs with dual AI keyframes per scene, 2.5D motion, character-consistent prompts, multilingual male/female narration, subtitles, background-music mixing, 1080p MP4 export and real-time render progress. Deployed the frontend on Netlify and the Dockerized backend on Render.

Author

Vishal Dubey

• GitHub: Vishal619-dubey
• Live Demo: VisionCraft AI
• Repository: VisionCraft-AI

License

This project is currently provided for educational, portfolio and demonstration purposes.