Merge pull request #85 from LohiyaH/fix-issue-84

feat/docs: 📦 Updated README with full directory structure for…

Author: yagyesh-bobde

AI_Video-Gen/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Harsh Lohiya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+
+2. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+   SOFTWARE.

AI_Video-Gen/README.md

@@ -0,0 +1,75 @@
+# VidCraft
+
+## Description
+This backend application is built using FastAPI and is designed to generate videos based on user-defined topics and backgrounds. It integrates multiple AI services for text generation, audio synthesis, image creation, and subtitle generation. The application handles various tasks, including cleaning text, formatting subtitles, and generating video files using FFmpeg.
+
+## Project Overview
+This project is aimed at generating videos using AI technologies. It leverages advanced algorithms to create high-quality video content based on user inputs.
+
+## Frontend Description
+The frontend of this project is built using modern web technologies including React.js for a dynamic user experience. The interface is designed to be intuitive, allowing users to easily input their preferences and view the generated videos. Key features include:
+- **Responsive Design**: The application is fully responsive, ensuring a seamless experience on both desktop and mobile devices.
+- **Real-time Preview**: Users can see a real-time preview of their video as they adjust settings.
+- **User-Friendly Interface**: The layout is clean and organized, making navigation simple.
+
+## Installation Instructions
+### Backend Installation
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/LohiyaH/VidCraft
+   cd shorty
+   ```
+2. Install the required dependencies:
+   ```bash
+   pip install -r backend/requirements.txt
+   ```
+3. Set up environment variables in a `.env` file:
+   ```
+   GEMINI_API_KEY=<your-gemini-api-key>
+   ELEVENLABS_API_KEY=<your-elevenlabs-api-key>
+   HUGGINGFACE_API_KEY=<your-huggingface-api-key>
+   ```
+
+### Frontend Installation
+To set up the frontend, follow these steps:
+1. Navigate to the frontend directory: `cd frontend`
+2. Install dependencies: `npm install`
+3. Start the application: `npm start`
+
+## Usage
+### Backend Usage
+1. Run the FastAPI application:
+   ```bash
+   uvicorn backend.main:app --reload
+   ```
+2. Access the API documentation at `http://localhost:8000/docs`.
+
+### Frontend Usage
+Once the application is running, users can input their video preferences in the provided fields and click on the 'Generate Video' button to create their AI-generated video. The results will be displayed in the preview section.
+
+## API Endpoints
+- **POST** `/api/generate-video`
+  - **Request Body**:
+    ```json
+    {
+      "topic": "string",
+      "background": "string"
+    }
+    ```
+  - **Response**:
+    ```json
+    {
+      "videoUrl": "string"
+    }
+    ```
+
+- **GET** `/api/test`
+  - Returns a simple test message.
+
+[Watch the video](https://drive.google.com/file/d/1WjUGrYiH2_ghVuXiveTgCI0QvJksH7Dc/view?usp=sharing)
+
+## Contributing
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## License
+This project is licensed under the MIT License.

AI_Video-Gen/backend

@@ -0,0 +1 @@
+Subproject commit 8c98a12b0ca5034832ba096f3351a675d64ff2f7

AI_Video-Gen/frontend/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:8000

AI_Video-Gen/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

AI_Video-Gen/frontend/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vercel

AI_Video-Gen/frontend/app/globals.css

@@ -0,0 +1,82 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

AI_Video-Gen/frontend/app/layout.tsx

@@ -0,0 +1,22 @@
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

AI_Video-Gen/frontend/app/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Card } from "@/components/ui/card";
+import { VideoIcon, Download, Loader2 } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+export default function Home() {
+  const [topic, setTopic] = useState("");
+  const [background, setBackground] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [videoUrl, setVideoUrl] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/generate-video`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ topic, background }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to generate video");
+      }
+
+      const data = await response.json();
+      setVideoUrl(data.videoUrl);
+      toast({
+        title: "Success!",
+        description: "Your video has been generated successfully.",
+      });
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to generate video. Please try again.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-background to-muted">
+      <div className="container max-w-4xl mx-auto px-4 py-16">
+        <div className="space-y-8">
+          <div className="text-center space-y-4">
+            <h1 className="text-4xl font-bold tracking-tight">AI Video Generator</h1>
+            <p className="text-muted-foreground text-lg">
+              Transform your ideas into engaging videos with the power of AI
+            </p>
+          </div>
+
+          <Card className="p-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="space-y-2">
+                <label htmlFor="topic" className="text-sm font-medium">
+                  Video Topic
+                </label>
+                <Input
+                  id="topic"
+                  placeholder="Enter your video topic"
+                  value={topic}
+                  onChange={(e) => setTopic(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label htmlFor="background" className="text-sm font-medium">
+                  Background Description
+                </label>
+                <Textarea
+                  id="background"
+                  placeholder="Describe the desired background for your video"
+                  value={background}
+                  onChange={(e) => setBackground(e.target.value)}
+                  required
+                  className="min-h-[100px]"
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={loading}
+                size="lg"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Generating Video...
+                  </>
+                ) : (
+                  <>
+                    <VideoIcon className="mr-2 h-4 w-4" />
+                    Generate Video
+                  </>
+                )}
+              </Button>
+            </form>
+          </Card>
+
+          {videoUrl && (
+            <Card className="p-6 space-y-4">
+              <h2 className="text-xl font-semibold">Generated Video</h2>
+              <div className="aspect-video bg-muted rounded-lg overflow-hidden">
+                <video
+                  src={videoUrl}
+                  controls
+                  className="w-full h-full object-contain"
+                />
+              </div>
+              <Button
+                variant="outline"
+                className="w-full"
+                onClick={() => window.open(videoUrl, "_blank")}
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Download Video
+              </Button>
+            </Card>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}