├── .eslintrc.json ├── .gitignore ├── README.md ├── app ├── favicon.ico ├── fonts │ ├── GeistMonoVF.woff │ └── GeistVF.woff ├── globals.css ├── layout.tsx └── page.tsx ├── index.html ├── next.config.js ├── next.config.ts ├── package-lock.json ├── package.json ├── postcss.config.js ├── postcss.config.mjs ├── public ├── file.svg ├── globe.svg ├── next.svg ├── vercel.svg └── window.svg ├── src ├── App.tsx ├── api │ └── generate-scenes.ts ├── components │ ├── AddSceneDialog.tsx │ ├── LandingPage.tsx │ ├── MoviePreviewModal.tsx │ ├── SceneEditor.tsx │ ├── ScenesList.tsx │ └── VideoPreview.tsx ├── env.d.ts ├── hooks │ └── useAnimationFrame.ts ├── index.css ├── main.tsx ├── types.ts ├── types │ └── index.ts └── utils │ ├── animations.ts │ ├── exportMovie.ts │ └── langflow_flow │ └── Slides with images.json ├── tailwind.config.js ├── tailwind.config.ts ├── tsconfig.json ├── tsconfig.node.json ├── vercel.json └── vite.config.ts /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # env files (can opt-in for committing if needed) 33 | .env* 34 | 35 | # vercel 36 | .vercel 37 | 38 | # typescript 39 | *.tsbuildinfo 40 | next-env.d.ts 41 | 42 | 43 | # Build output 44 | dist 45 | dist-ssr 46 | *.local -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🎬 ScenicFlow - Powered by Langflow and Groq 2 | 3 | A web-based scene/slide creator built with Vite and React that allows you to create engaging video presentations. Create slides and scenes manually by adding text and images, or let AI automatically generate scenes for you using Langflow integration. 4 | 5 | ## Table of Contents 6 | 7 | - [Prerequisites](#prerequisites) 8 | - [Installation](#installation) 9 | - [Configuration](#configuration) 10 | - [Running the Development Server](#running-the-development-server) 11 | - [Building for Production](#building-for-production) 12 | - [Linting](#linting) 13 | - [Learn More](#learn-more) 14 | - [Deploying](#deploying) 15 | 16 | ## Prerequisites 17 | 18 | Before you begin, ensure you have met the following requirements: 19 | 20 | - **Node.js**: Install the latest version from the [Node.js Official Website](https://nodejs.org/). 21 | - **Package Manager**: Choose one of the following for managing dependencies: 22 | - [npm](https://www.npmjs.com/) 23 | - [Yarn](https://yarnpkg.com/) 24 | - [pnpm](https://pnpm.io/) 25 | - [Bun](https://bun.sh/) 26 | 27 | ## Installation 28 | 29 | Follow these steps to set up the project locally: 30 | 31 | 1. **Clone the Repository** 32 | 33 | ```bash 34 | git clone https://github.com/misbahsy/txt-to-video 35 | cd video-editor 36 | ``` 37 | 38 | 2. **Install Dependencies** 39 | 40 | Choose your preferred package manager to install the required dependencies: 41 | 42 | ```bash 43 | # Using npm 44 | npm install 45 | 46 | # Using Yarn 47 | yarn install 48 | 49 | # Using pnpm 50 | pnpm install 51 | 52 | # Using Bun 53 | bun install 54 | ``` 55 | 56 | ## Configuration 57 | 58 | ### 1. Create a Free Langflow Account 59 | 60 | - Visit [Astra Datastax Langflow](https://astra.datastax.com/) to create a free Langflow account. 61 | - Follow the registration process and verify your email if required. 62 | 63 | ### 2. Obtain Langflow API Token and Base Path 64 | 65 | - After logging in, navigate to the Langflow dashboard. 66 | - Generate or retrieve your **API Token**. 67 | - Note down the **Base Path** for the Langflow API. 68 | 69 | ### 3. Set Up Environment Variables 70 | 71 | Create a `.env` file in the root directory of the project and add the following variables: 72 | ```env 73 | VITE_ASTRA_LANGFLOW_TOKEN=AstraCS:xxxx 74 | VITE_LANGFLOW_BASE_PATH="/api/langflow/lf/xxxxxx-xxxx-xxx-xxxx/api/v1/run/flow-id" 75 | ``` 76 | 77 | **Note:** Ensure that VITE_LANGFLOW_BASE_PATH starts with /api/langflow/... which is available from API tab at the bottom right of the Langflow UI. Also make sure `.env` is **not** committed to version control to keep your API tokens secure. 78 | 79 | ### 4. Import Langflow Flow 80 | 81 | You can use the predefined flow located at `src/utils/langflow_flow/Slides with images.json`. Simply drag and drop this flow into the Langflow dashboard to get started. 82 | 83 | ## Running the Development Server 84 | 85 | Start the development server using your chosen package manager: 86 | 87 | ```bash 88 | # Using npm 89 | npm run dev 90 | 91 | # Using Yarn 92 | yarn dev 93 | 94 | # Using pnpm 95 | pnpm dev 96 | 97 | # Using Bun 98 | bun dev 99 | ``` 100 | 101 | - Open [http://localhost:3000](http://localhost:3000) in your browser to view the application. 102 | - The app will automatically reload if you make changes to the code. 103 | 104 | ## Building for Production 105 | 106 | To create an optimized production build, run the following command with your preferred package manager: 107 | 108 | ```bash 109 | # Using npm 110 | npm run build 111 | 112 | # Using Yarn 113 | yarn build 114 | 115 | # Using pnpm 116 | pnpm build 117 | 118 | # Using Bun 119 | bun build 120 | ``` 121 | 122 | The build artifacts will be stored in the `dist/` directory. 123 | 124 | ## Linting 125 | 126 | Ensure code quality and consistency by running the linter: 127 | 128 | ```bash 129 | # Using npm 130 | npm run lint 131 | 132 | # Using Yarn 133 | yarn lint 134 | 135 | # Using pnpm 136 | pnpm lint 137 | 138 | # Using Bun 139 | bun lint 140 | ``` 141 | 142 | The linter checks for syntax errors and enforces coding standards based on the `.eslintrc.json` configuration. 143 | 144 | ## Learn More 145 | 146 | To learn more about the technologies used in this project, check out the following resources: 147 | 148 | - [Vite Documentation](https://vitejs.dev/guide/) 149 | - [React Documentation](https://reactjs.org/docs/getting-started.html) 150 | - [Langflow Documentation](https://docs.langflow.org/) 151 | - [TypeScript Documentation](https://www.typescriptlang.org/docs/) 152 | - [Tailwind CSS Documentation](https://tailwindcss.com/docs) 153 | 154 | ## Deploying 155 | 156 | Deploy your application using your preferred hosting platform. For optimal performance and ease of deployment, consider using platforms like [Vercel](https://vercel.com/) or [Netlify](https://www.netlify.com/). 157 | 158 | For more details on deploying with Vite, refer to the [Vite Deployment Guide](https://vitejs.dev/guide/static-deploy.html). 159 | 160 | ``` -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: #ffffff; 7 | --foreground: #171717; 8 | } 9 | 10 | @media (prefers-color-scheme: dark) { 11 | :root { 12 | --background: #0a0a0a; 13 | --foreground: #ededed; 14 | } 15 | } 16 | 17 | body { 18 | color: var(--foreground); 19 | background: var(--background); 20 | font-family: Arial, Helvetica, sans-serif; 21 | } 22 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | 5 | const geistSans = localFont({ 6 | src: "./fonts/GeistVF.woff", 7 | variable: "--font-geist-sans", 8 | weight: "100 900", 9 | }); 10 | const geistMono = localFont({ 11 | src: "./fonts/GeistMonoVF.woff", 12 | variable: "--font-geist-mono", 13 | weight: "100 900", 14 | }); 15 | 16 | export const metadata: Metadata = { 17 | title: "Create Next App", 18 | description: "Generated by create next app", 19 | }; 20 | 21 | export default function RootLayout({ 22 | children, 23 | }: Readonly<{ 24 | children: React.ReactNode; 25 | }>) { 26 | return ( 27 | 28 | 31 | {children} 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |
7 | Next.js logo 15 |
    16 |
  1. 17 | Get started by editing{" "} 18 | 19 | app/page.tsx 20 | 21 | . 22 |
    2. 23 |
  2. Save and see your changes instantly.
    3. 24 |
25 | 26 |
27 | 33 | Vercel logomark 40 | Deploy now 41 | 42 | 48 | Read our docs 49 | 50 |
51 |
52 | 99 |
100 | ); 101 | } 102 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Video Editor 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "video-editor", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "lucide-react": "^0.344.0", 14 | "react": "^18.2.0", 15 | "react-beautiful-dnd": "^13.1.1", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.64", 20 | "@types/react-beautiful-dnd": "^13.1.8", 21 | "@types/react-dom": "^18.2.21", 22 | "@typescript-eslint/eslint-plugin": "^6.21.0", 23 | "@typescript-eslint/parser": "^6.21.0", 24 | "@vitejs/plugin-react": "^4.2.1", 25 | "autoprefixer": "^10.4.18", 26 | "eslint": "^8.57.0", 27 | "eslint-plugin-react-hooks": "^4.6.0", 28 | "eslint-plugin-react-refresh": "^0.4.5", 29 | "postcss": "^8.4.35", 30 | "tailwindcss": "^3.4.1", 31 | "typescript": "^5.2.2", 32 | "vite": "^5.1.6" 33 | } 34 | } -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef, useCallback } from 'react'; 2 | import { Plus, Type, Image, Settings, Trash2 } from 'lucide-react'; 3 | import { Scene, SceneType } from './types'; 4 | import { VideoPreview } from './components/VideoPreview'; 5 | import { SceneEditor } from './components/SceneEditor'; 6 | import { MoviePreviewModal } from './components/MoviePreviewModal'; 7 | import { LandingPage } from './components/LandingPage'; 8 | 9 | 10 | export function App() { 11 | const [scenes, setScenes] = useState([]); 12 | const [selectedScene, setSelectedScene] = useState(null); 13 | const [showAddMenu, setShowAddMenu] = useState(false); 14 | const [isPlaying, setIsPlaying] = useState(false); 15 | const [isMoviePlaying, setIsMoviePlaying] = useState(false); 16 | const [currentMovieScene, setCurrentMovieScene] = useState(0); 17 | const [showSceneSettings, setShowSceneSettings] = useState(false); 18 | const [showMoviePreview, setShowMoviePreview] = useState(false); 19 | const [showEditor, setShowEditor] = useState(false); 20 | // const addButtonRef = useRef(null); 21 | const canvasRef = useRef(null); 22 | 23 | // Move useCallback outside of the conditional 24 | const handleMovieSceneComplete = useCallback(() => { 25 | setCurrentMovieScene(prev => { 26 | if (prev < scenes.length - 1) { 27 | return prev + 1; 28 | } 29 | setIsMoviePlaying(false); 30 | return 0; 31 | }); 32 | }, [scenes.length]); 33 | 34 | const handleAIGenerate = (apiScenes: any[]) => { 35 | const convertedScenes = apiScenes.map(scene => ({ 36 | id: crypto.randomUUID(), 37 | type: scene.scene_type as 'text' | 'image', 38 | animationIn: scene.animation_in, 39 | animationOut: scene.animation_out, 40 | durationIn: scene.duration_in, 41 | durationStay: scene.stay_duration, 42 | durationOut: scene.duration_out, 43 | backgroundColor: scene.background_color, 44 | ...(scene.scene_type === 'text' ? { 45 | text: scene.text, 46 | fontSize: scene.font_size, 47 | color: scene.text_color, 48 | } : { 49 | scale: 1, 50 | opacity: 1, 51 | }) 52 | })) as Scene[]; 53 | 54 | setScenes(convertedScenes); 55 | setShowEditor(true); 56 | }; 57 | 58 | if (!showEditor) { 59 | return ( 60 | setShowEditor(true)} 62 | onAIGenerate={handleAIGenerate} 63 | /> 64 | ); 65 | } 66 | 67 | const handleAddScene = (type: SceneType) => { 68 | const newScene: Scene = { 69 | id: crypto.randomUUID(), 70 | animationIn: 'fade-in', 71 | animationOut: 'fade-out', 72 | durationIn: 500, 73 | durationStay: 1000, 74 | durationOut: 500, 75 | backgroundColor: '#000000', 76 | ...(type === 'text' ? { 77 | type: 'text' as const, 78 | text: 'New Text Scene', 79 | fontSize: 48, 80 | color: '#ffffff', 81 | } : { 82 | type: 'image' as const, 83 | scale: 1, 84 | opacity: 1, 85 | }) 86 | }; 87 | 88 | setScenes([...scenes, newScene]); 89 | setSelectedScene(scenes.length); 90 | setShowAddMenu(false); 91 | }; 92 | 93 | const handleSceneUpdate = (updatedScene: Scene) => { 94 | if (selectedScene === null) return; 95 | const newScenes = [...scenes]; 96 | newScenes[selectedScene] = updatedScene; 97 | setScenes(newScenes); 98 | }; 99 | 100 | // const handleMovieSceneComplete = useCallback(() => { 101 | // setCurrentMovieScene(prev => { 102 | // if (prev < scenes.length - 1) { 103 | // return prev + 1; 104 | // } 105 | // setIsMoviePlaying(false); 106 | // return 0; 107 | // }); 108 | // }, [scenes.length]); 109 | 110 | const handleExportMovie = async () => { 111 | if (!canvasRef.current || scenes.length === 0) return; 112 | 113 | const canvas = canvasRef.current; 114 | const stream = canvas.captureStream(30); 115 | const mediaRecorder = new MediaRecorder(stream, { 116 | mimeType: 'video/webm;codecs=vp8,opus', 117 | videoBitsPerSecond: 5000000 // 5 Mbps 118 | }); 119 | 120 | const chunks: Blob[] = []; 121 | mediaRecorder.ondataavailable = (e) => chunks.push(e.data); 122 | mediaRecorder.onstop = () => { 123 | const blob = new Blob(chunks, { type: 'video/webm' }); 124 | const url = URL.createObjectURL(blob); 125 | const a = document.createElement('a'); 126 | a.href = url; 127 | a.download = 'movie.webm'; 128 | a.click(); 129 | URL.revokeObjectURL(url); 130 | }; 131 | 132 | // Start recording 133 | setCurrentMovieScene(0); 134 | setIsMoviePlaying(true); 135 | mediaRecorder.start(); 136 | 137 | // Calculate total duration 138 | const totalDuration = scenes.reduce((acc, scene) => 139 | acc + scene.durationIn + scene.durationStay + scene.durationOut, 0); 140 | 141 | // Stop recording after all scenes complete 142 | setTimeout(() => { 143 | mediaRecorder.stop(); 144 | setIsMoviePlaying(false); 145 | }, totalDuration); 146 | }; 147 | 148 | const handleMoveScene = (index: number, direction: 'up' | 'down') => { 149 | if ( 150 | (direction === 'up' && index === 0) || 151 | (direction === 'down' && index === scenes.length - 1) 152 | ) return; 153 | 154 | const newScenes = [...scenes]; 155 | const newIndex = direction === 'up' ? index - 1 : index + 1; 156 | [newScenes[index], newScenes[newIndex]] = [newScenes[newIndex], newScenes[index]]; 157 | setScenes(newScenes); 158 | setSelectedScene(newIndex); 159 | }; 160 | const handleDeleteScene = (index: number) => { 161 | const newScenes = scenes.filter((_, i) => i !== index); 162 | setScenes(newScenes); 163 | if (selectedScene === index) { 164 | setSelectedScene(null); 165 | } else if (selectedScene && selectedScene > index) { 166 | setSelectedScene(selectedScene - 1); 167 | } 168 | }; 169 | 170 | return ( 171 |
172 | {/* Scenes List */} 173 |
174 |
175 |

Scenes

176 | 182 |
183 |
184 |
185 | 192 | {showAddMenu && ( 193 |
194 | 201 | 208 |
209 | )} 210 |
211 |
212 |
213 | {scenes.map((scene, index) => ( 214 |
setSelectedScene(index)} 220 | > 221 |
222 | {scene.type === 'text' ? scene.text : `Scene ${index + 1}`} 223 |
224 | 234 | 244 | 253 |
254 |
255 |
256 | ))} 257 |
258 |
259 | 260 | {/* Preview */} 261 |
262 |
263 | {selectedScene !== null && scenes[selectedScene] && ( 264 | 270 | )} 271 | 272 | {/* Playback Controls */} 273 |
274 | 284 | 296 |
297 |
298 |
299 | 300 | {/* Scene Settings Drawer */} 301 | {selectedScene !== null && showSceneSettings && ( 302 |
303 | 307 |
308 | )} 309 | 310 | {/* Movie Preview Modal */} 311 | { 314 | setShowMoviePreview(false); 315 | setIsMoviePlaying(false); 316 | }} 317 | scenes={scenes} 318 | currentScene={currentMovieScene} 319 | isPlaying={isMoviePlaying} 320 | onExport={handleExportMovie} 321 | onSceneComplete={handleMovieSceneComplete} 322 | /> 323 |
324 | ); 325 | } 326 | 327 | export default App; -------------------------------------------------------------------------------- /src/api/generate-scenes.ts: -------------------------------------------------------------------------------- 1 | const BASE_PATH = import.meta.env.VITE_LANGFLOW_BASE_PATH; 2 | const API_KEY = import.meta.env.VITE_ASTRA_LANGFLOW_TOKEN; 3 | 4 | 5 | export async function generateScenes(topic: string) { 6 | const fullPath = `${BASE_PATH.startsWith('/') ? BASE_PATH : '/api/langflow' + BASE_PATH}`; 7 | try { 8 | const response = await fetch(`${fullPath}?stream=false`, { 9 | method: 'POST', 10 | headers: { 11 | 'Content-Type': 'application/json', 12 | 'Authorization': `Bearer ${API_KEY}` 13 | }, 14 | body: JSON.stringify({ 15 | input_value: topic, 16 | output_type: "chat", 17 | input_type: "chat", 18 | tweaks: {} 19 | }) 20 | }); 21 | 22 | if (!response.ok) { 23 | const errorText = await response.text(); 24 | throw new Error(`API request failed: ${response.status} - ${errorText}`); 25 | } 26 | 27 | const data = await response.json(); 28 | 29 | // Extract the JSON string from the nested response 30 | const scenesJsonString = data.outputs[0].outputs[0].outputs.message.message.text; 31 | // Parse the JSON string into an object 32 | const parsedData = JSON.parse(scenesJsonString); 33 | 34 | return parsedData; // This will return an object with a 'scenes' property 35 | } catch (error) { 36 | console.error('Error calling API:', error); 37 | throw error; 38 | } 39 | } -------------------------------------------------------------------------------- /src/components/AddSceneDialog.tsx: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | import { SceneType } from '../types'; 3 | import { Type, Image } from 'lucide-react'; 4 | 5 | interface AddSceneDialogProps { 6 | onClose: () => void; 7 | onAdd: (type: SceneType) => void; 8 | } 9 | 10 | export function AddSceneDialog({ onClose, onAdd }: AddSceneDialogProps) { 11 | return ( 12 |
13 |
14 |

Add Scene

15 |
16 | 26 | 36 |
37 |
38 |
39 | ); 40 | } -------------------------------------------------------------------------------- /src/components/LandingPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { generateScenes } from '../api/generate-scenes'; // Import the mock API function 3 | 4 | interface LandingPageProps { 5 | onManualSelect: () => void; 6 | onAIGenerate: (scenes: any[]) => void; 7 | } 8 | 9 | export function LandingPage({ onManualSelect, onAIGenerate }: LandingPageProps) { 10 | const [showAIInput, setShowAIInput] = useState(false); 11 | const [topic, setTopic] = useState(''); 12 | const [isLoading, setIsLoading] = useState(false); 13 | 14 | const handleAISubmit = async () => { 15 | setIsLoading(true); 16 | try { 17 | const response = await generateScenes(topic); 18 | onAIGenerate(response.scenes); // Access the scenes array directly from the parsed response 19 | } catch (error) { 20 | console.error('Error generating scenes:', error); 21 | } finally { 22 | setIsLoading(false); 23 | } 24 | }; 25 | 26 | if (showAIInput) { 27 | return ( 28 |
29 |
30 |

AI Scene Generator

31 |