7 |
8 |
9 |
10 |
11 | );
12 | };
--------------------------------------------------------------------------------
/frontend-v2/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import {
5 | ThemeProvider as NextThemesProvider,
6 | type ThemeProviderProps,
7 | } from 'next-themes'
8 |
9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
10 | return
4 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/frontend/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { MovieSearchForm } from "./components/search";
2 | import styles from "./styles.module.css";
3 | import { Abril_Fatface } from "next/font/google";
4 | const abril_fatface = Abril_Fatface({ weight: ["400"], subsets: ["latin"] });
5 |
6 | export default function Page() {
7 | return (
8 |
5 |
6 | Generating image...
7 |
8 |
9 |
14 | );
15 | }
--------------------------------------------------------------------------------
/frontend-v2/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "app/globals.css",
9 | "baseColor": "neutral",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils",
16 | "ui": "@/components/ui",
17 | "lib": "@/lib",
18 | "hooks": "@/hooks"
19 | },
20 | "iconLibrary": "lucide"
21 | }
--------------------------------------------------------------------------------
/frontend/app/search/[search]/page.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import {
3 | MovieSearchResult,
4 | MovieSearchResultSkeleton,
5 | } from "../../components/result";
6 | import { searchMovies } from "../../../lib/searchMovie";
7 |
8 | export default async function Page({ params }: { params: { search: string } }) {
9 | const movieData = await searchMovies(params.search);
10 | return (
11 | 10 | Hollywood Movie Remake Generator 11 |
12 |
13 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/frontend/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/app/components/loader.module.css:
--------------------------------------------------------------------------------
1 | @keyframes dotFade {
2 | 0% {
3 | opacity: 1;
4 | }
5 | 100% {
6 | opacity: 0.3;
7 | }
8 | }
9 |
10 | .loader {
11 | display: inline-flex;
12 | margin-left: 5px;
13 | }
14 |
15 | .dot {
16 | background-color: white; /* Change this to your desired color */
17 | border-radius: 50%;
18 | width: 10px;
19 | height: 10px;
20 | margin: 0 2px;
21 | animation: dotFade 1s infinite;
22 | }
23 |
24 | .dot:nth-child(2) {
25 | animation-delay: 0.2s;
26 | }
27 |
28 | .dot:nth-child(3) {
29 | animation-delay: 0.4s;
30 | }
--------------------------------------------------------------------------------
/frontend-v2/components/search-container.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { SearchInput } from "./search-input"
4 |
5 | interface SearchContainerProps {
6 | searchTerm?: string
7 | size?: "large" | "medium"
8 | }
9 |
10 | export function SearchContainer({ searchTerm = "", size = "large" }: SearchContainerProps) {
11 | const sizeClasses = {
12 | large: "text-2xl md:text-3xl p-6",
13 | medium: "text-xl md:text-2xl p-4",
14 | }
15 |
16 | return (
17 | 14 | Hollywood Movie Remake Generator 15 |
16 |
18 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/app/legal/layout.tsx:
--------------------------------------------------------------------------------
1 | import { MovieSearchForm } from "../components/search";
2 | import styles from "../styles.module.css";
3 | import { Abril_Fatface } from "next/font/google";
4 | const abril_fatface = Abril_Fatface({ weight: ["400"], subsets: ["latin"] });
5 |
6 | export default function RootLayout({
7 | children,
8 | }: {
9 | children: React.ReactNode;
10 | }) {
11 | return (
12 |
13 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/frontend-v2/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState14 | Hollywood Movie Remake Generator 15 |
16 |{children}
17 |
19 |
20 |
23 |
24 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState19 | Hollywood Movie Remake Generator 20 |
21 | {children} 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /frontend-v2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "target": "ES6", 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /cloudflare-remake/movie-remake/src/downloadImage.ts: -------------------------------------------------------------------------------- 1 | export async function downloadImageWithRetry( 2 | imageURL, 3 | retries = 10, 4 | delay = 600 5 | ) { 6 | for (let i = 0; i <= retries; i++) { 7 | try { 8 | const response = await fetch(imageURL); 9 | if (response.ok) { 10 | const imageData = await response.arrayBuffer(); 11 | return imageData; 12 | } 13 | } catch (error) { 14 | console.error(`Attempt ${i} failed: ${error.message}`); 15 | } 16 | 17 | if (i < retries) { 18 | await new Promise((resolve) => setTimeout(resolve, delay)); 19 | } 20 | } 21 | console.error("Failed to download image after retries") 22 | return 23 | } 24 | -------------------------------------------------------------------------------- /frontend/app/components/original.module.css: -------------------------------------------------------------------------------- 1 | .blurayCover { 2 | position: relative; 3 | width: 150px; 4 | height: 200px; 5 | perspective: 1000px; 6 | margin: 50px; 7 | float: right; 8 | } 9 | 10 | .coverImage { 11 | position: absolute; 12 | width: 100%; 13 | height: auto; 14 | background-color: #000; 15 | transform: rotateY(-10deg) rotateX(-5deg); 16 | border-radius: 5px; 17 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 18 | } 19 | 20 | .titleLabel { 21 | position: absolute; 22 | bottom: 0; 23 | left: 0; 24 | background-color: rgba(0, 0, 0, 0.7); 25 | color: #fff; 26 | font-weight: bold; 27 | padding: 5px 10px; 28 | border-radius: 0 0 5px 0; 29 | text-align: center; 30 | width: 100%; 31 | } -------------------------------------------------------------------------------- /frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "lib/OpenAIStream.ts "], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /frontend-v2/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<"textarea"> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 | 18 | ) 19 | }) 20 | Textarea.displayName = "Textarea" 21 | 22 | export { Textarea } 23 | -------------------------------------------------------------------------------- /frontend-v2/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef
19 | Failed to load image
20 |
21 | )
22 | }
23 |
24 | return (
25 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
6 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/public/thirteen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { Check } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef
7 | {/* Header */}
8 |
24 |
9 |
14 |
15 | {/* Search Container */}
16 | 10 | Hollywood Movie Remake Generator 11 |
12 |Search for movies to reimagine and remake in Hollywood style
13 |
20 |
23 | 🎬
21 | Start typing to search for movies to remake
22 |Legal Disclaimer
5 |6 | Hollywood Movie Remake Generator is an independent platform providing 7 | AI-generated parodies, synopses, and character posters for entertainment 8 | purposes. We claim no affiliation with or endorsement by any movies or 9 | actors featured. Our use of names, images, and trademarks falls under 10 | Fair Use as parody, satire, or commentary. 11 |
12 | 13 |14 | The AI-generated content on this site is provided under a Creative 15 | Commons Attribution 4.0 International License, allowing you to share and 16 | adapt the content freely, as long as you give appropriate credit to 17 | Hollywood Movie Remake Generator as the source. 18 |
19 | 20 |21 | By using our site, you acknowledge doing so at your own risk and agree 22 | that we are not liable for any damages or losses. We encourage you to 23 | share the content, credit our platform, and spread the joy of Hollywood 24 | Movie Remake Generator's unique creations! 25 |
26 | 27 | ); 28 | } 29 | 30 | export const metadata = { 31 | title: "Legal Disclaimer - Movie Remake Generator", 32 | description: 33 | "Review the legal information for Hollywood Movie Remake Generator, outlining our stance on Fair Use, content ownership, and liability. Understand our Creative Commons License for AI-generated content and proper attribution guidelines.", 34 | }; 35 | -------------------------------------------------------------------------------- /frontend-v2/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Avatar = React.forwardRef< 9 | React.ElementRefsam delete."
43 | ]
44 | },
45 | "contributor": "content/contributors/jrwood.json"
46 | }
47 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TogglePrimitive from "@radix-ui/react-toggle"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const toggleVariants = cva(
10 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | outline:
16 | "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
17 | },
18 | size: {
19 | default: "h-10 px-3 min-w-10",
20 | sm: "h-9 px-2.5 min-w-9",
21 | lg: "h-11 px-5 min-w-11",
22 | },
23 | },
24 | defaultVariants: {
25 | variant: "default",
26 | size: "default",
27 | },
28 | }
29 | )
30 |
31 | const Toggle = React.forwardRef<
32 | React.ElementRef
23 | {movieData ? (
24 |
45 | );
46 | }
47 |
48 | export const MovieCoverSkeleton = () => (
49 | <>
50 | {Array.from({ length: 4 }).map((_, index) => (
51 |
25 | 
32 |
34 | ) : (
35 |
32 | {movieData.title}
33 |
52 |
62 | ))}
63 |
64 | );
65 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { cva, type VariantProps } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-background text-foreground",
12 | destructive:
13 | "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | }
20 | )
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes
53 |
54 |
55 |
56 |
57 | {Array.from({ length: 7 }).map((_, i) => (
58 |
59 | ))}
60 |
61 |
39 |
41 | )}
42 |
52 |
65 |
66 | );
67 | };
68 |
69 | export default MovieSearchForm;
70 |
--------------------------------------------------------------------------------
/frontend-v2/app/search/[search]/page.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react"
2 | import Link from "next/link"
3 | import { searchMovies } from "@/lib/search-movies"
4 | import { MovieSearchResult, MovieSearchResultSkeleton } from "@/components/movie-search-result"
5 | import { SearchContainer } from "@/components/search-container"
6 |
7 | interface PageProps {
8 | params: { search: string }
9 | }
10 |
11 | export default function SearchPage({ params }: PageProps) {
12 | const searchTerm = decodeURIComponent(params.search)
13 |
14 | return (
15 |
16 |
39 | )
40 | }
41 |
42 | export async function generateMetadata({ params }: PageProps) {
43 | const searchTerm = decodeURIComponent(params.search)
44 |
45 | return {
46 | title: `Search: ${searchTerm} | Hollywood Movie Remake Generator`,
47 | description: `Search results for "${searchTerm}" - Find movies to reimagine and remake in Hollywood style`,
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/frontend/app/components/reload-image.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { LoadingImage } from './loading-image';
3 |
4 | interface ReloadableImageProps extends React.ImgHTMLAttributes
17 | {/* Header with back link */}
18 |
38 |
19 |
23 | Hollywood Movie Remake Generator
24 |
25 |
26 |
27 | {/* Search Container */}
28 |
32 |
37 | Search results for "{searchTerm}"
33 |{children}
22 | {children}
53 |
27 | {!!movieData ? (
28 | movieData.results.map((movie) => (
29 |
30 |
51 | );
52 | }
53 |
54 | export const MovieSearchResultSkeleton = () => (
55 | <>
56 | {Array.from({ length: 4 }, (_, index) => (
57 |
31 |
45 |
46 | ))
47 | ) : (
48 |
32 | 
39 |
40 |
39 |
41 |
44 | {movie.title}
42 |{movie.overview}
43 |
58 |
72 | ))}
73 |
74 | );
75 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { OTPInput, OTPInputContext } from "input-otp"
5 | import { Dot } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const InputOTP = React.forwardRef<
10 | React.ElementRef
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
50 | {char}
51 | {hasFakeCaret && (
52 |
57 | )
58 | })
59 | InputOTPSlot.displayName = "InputOTPSlot"
60 |
61 | const InputOTPSeparator = React.forwardRef<
62 | React.ElementRef<"div">,
63 | React.ComponentPropsWithoutRef<"div">
64 | >(({ ...props }, ref) => (
65 |
53 |
54 |
55 | )}
56 |
66 |
68 | ))
69 | InputOTPSeparator.displayName = "InputOTPSeparator"
70 |
71 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
72 |
--------------------------------------------------------------------------------
/frontend-v2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-v0-project",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@hookform/resolvers": "^3.9.1",
13 | "@radix-ui/react-accordion": "1.2.2",
14 | "@radix-ui/react-alert-dialog": "1.1.4",
15 | "@radix-ui/react-aspect-ratio": "1.1.1",
16 | "@radix-ui/react-avatar": "1.1.2",
17 | "@radix-ui/react-checkbox": "1.1.3",
18 | "@radix-ui/react-collapsible": "1.1.2",
19 | "@radix-ui/react-context-menu": "2.2.4",
20 | "@radix-ui/react-dialog": "1.1.4",
21 | "@radix-ui/react-dropdown-menu": "2.1.4",
22 | "@radix-ui/react-hover-card": "1.1.4",
23 | "@radix-ui/react-label": "2.1.1",
24 | "@radix-ui/react-menubar": "1.1.4",
25 | "@radix-ui/react-navigation-menu": "1.2.3",
26 | "@radix-ui/react-popover": "1.1.4",
27 | "@radix-ui/react-progress": "1.1.1",
28 | "@radix-ui/react-radio-group": "1.2.2",
29 | "@radix-ui/react-scroll-area": "1.2.2",
30 | "@radix-ui/react-select": "2.1.4",
31 | "@radix-ui/react-separator": "1.1.1",
32 | "@radix-ui/react-slider": "1.2.2",
33 | "@radix-ui/react-slot": "1.1.1",
34 | "@radix-ui/react-switch": "1.1.2",
35 | "@radix-ui/react-tabs": "1.1.2",
36 | "@radix-ui/react-toast": "1.2.4",
37 | "@radix-ui/react-toggle": "1.1.1",
38 | "@radix-ui/react-toggle-group": "1.1.1",
39 | "@radix-ui/react-tooltip": "1.1.6",
40 | "autoprefixer": "^10.4.20",
41 | "class-variance-authority": "^0.7.1",
42 | "clsx": "^2.1.1",
43 | "cmdk": "1.0.4",
44 | "date-fns": "4.1.0",
45 | "embla-carousel-react": "8.5.1",
46 | "input-otp": "1.4.1",
47 | "lucide-react": "^0.454.0",
48 | "next": "15.2.4",
49 | "next-themes": "^0.4.4",
50 | "react": "^19",
51 | "react-day-picker": "8.10.1",
52 | "react-dom": "^19",
53 | "react-hook-form": "^7.54.1",
54 | "react-resizable-panels": "^2.1.7",
55 | "recharts": "2.15.0",
56 | "server-only": "latest",
57 | "sonner": "^1.7.1",
58 | "tailwind-merge": "^2.5.5",
59 | "tailwindcss-animate": "^1.0.7",
60 | "vaul": "^0.9.6",
61 | "zod": "^3.24.1",
62 | "openai": "4.103.0",
63 | "uploadthing": "7.7.2"
64 | },
65 | "devDependencies": {
66 | "@types/node": "^22",
67 | "@types/react": "^19",
68 | "@types/react-dom": "^19",
69 | "postcss": "^8.5",
70 | "tailwindcss": "^3.4.17",
71 | "typescript": "^5"
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/cloudflare-remake/movie-remake/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-worker",
3 | "lockfileVersion": 2,
4 | "requires": true,
5 | "packages": {
6 | "": {
7 | "name": "my-worker",
8 | "dependencies": {
9 | "eventsource-parser": "^1.0.0"
10 | },
11 | "devDependencies": {
12 | "@cloudflare/workers-types": "^4.20230419.0",
13 | "typescript": "^5.0.4"
14 | }
15 | },
16 | "node_modules/@cloudflare/workers-types": {
17 | "version": "4.20230419.0",
18 | "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230419.0.tgz",
19 | "integrity": "sha512-MfNBlHrI/ekRkbLtdAo23D4hkXF+3QD92OCwuXxCUK73HtMHuBqkMp9T/8KFbKNRCnz7PzUderc7Jr5m3eeW3g==",
20 | "dev": true
21 | },
22 | "node_modules/eventsource-parser": {
23 | "version": "1.0.0",
24 | "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.0.0.tgz",
25 | "integrity": "sha512-9jgfSCa3dmEme2ES3mPByGXfgZ87VbP97tng1G2nWwWx6bV2nYxm2AWCrbQjXToSe+yYlqaZNtxffR9IeQr95g==",
26 | "engines": {
27 | "node": ">=14.18"
28 | }
29 | },
30 | "node_modules/typescript": {
31 | "version": "5.0.4",
32 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
33 | "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
34 | "dev": true,
35 | "bin": {
36 | "tsc": "bin/tsc",
37 | "tsserver": "bin/tsserver"
38 | },
39 | "engines": {
40 | "node": ">=12.20"
41 | }
42 | }
43 | },
44 | "dependencies": {
45 | "@cloudflare/workers-types": {
46 | "version": "4.20230419.0",
47 | "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230419.0.tgz",
48 | "integrity": "sha512-MfNBlHrI/ekRkbLtdAo23D4hkXF+3QD92OCwuXxCUK73HtMHuBqkMp9T/8KFbKNRCnz7PzUderc7Jr5m3eeW3g==",
49 | "dev": true
50 | },
51 | "eventsource-parser": {
52 | "version": "1.0.0",
53 | "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.0.0.tgz",
54 | "integrity": "sha512-9jgfSCa3dmEme2ES3mPByGXfgZ87VbP97tng1G2nWwWx6bV2nYxm2AWCrbQjXToSe+yYlqaZNtxffR9IeQr95g=="
55 | },
56 | "typescript": {
57 | "version": "5.0.4",
58 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
59 | "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
60 | "dev": true
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/frontend/app/styles.module.css:
--------------------------------------------------------------------------------
1 | .body {
2 | display: flex;
3 | flex-direction: column;
4 | min-height: 100vh;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | .headline {
10 | font-size: 85px;
11 | padding-bottom: 60px;
12 | }
13 |
14 | @media only screen and (max-width: 767px) {
15 | /* styles for screens smaller than 768px, which are typically mobile devices */
16 | .headline {
17 | font-size: 65px;
18 | }
19 | }
20 |
21 | .main {
22 | max-width: 800px;
23 | width: 100vw;
24 | margin-top: auto;
25 | margin-bottom: auto;
26 | flex: 1;
27 | }
28 |
29 | .footer {
30 | background-color: #000;
31 | padding: 10px;
32 | text-align: center;
33 | position: sticky;
34 | bottom: 0;
35 | z-index: 100;
36 | width: 100%;
37 | display: flex;
38 | justify-content: center;
39 | align-items: center;
40 | width: 100vw;
41 | padding: 10px 0;
42 | box-sizing: border-box;
43 | flex-wrap: nowrap;
44 | }
45 | .footer > span {
46 | position: absolute;
47 | top: -10px;
48 | left: 0;
49 | width: 100%;
50 | height: 10px;
51 | display: block;
52 | background-image: linear-gradient(
53 | to bottom,
54 | rgba(0, 0, 0, 0),
55 | rgba(0, 0, 0, 1)
56 | );
57 | z-index: 101;
58 | }
59 |
60 | .siteName {
61 | color: #fff;
62 | font-size: 18px;
63 | margin: 0 20px;
64 | }
65 |
66 | .separator {
67 | border-left: 1px solid #666;
68 | height: 24px;
69 | margin: 0 20px;
70 | }
71 |
72 | .link {
73 | color: #fff;
74 | text-decoration: none;
75 | font-size: 14px;
76 | margin: 0 10px;
77 | display: flex;
78 | align-items: center;
79 | }
80 |
81 | .icon {
82 | width: 24px;
83 | height: 24px;
84 | fill: #fff;
85 | margin-right: 5px;
86 | }
87 |
88 | @media (max-width: 767px) {
89 | .hideText,
90 | .separator {
91 | display: none;
92 | }
93 |
94 | .siteName,
95 | .link,
96 | .icon {
97 | scale: 0.8;
98 | white-space: nowrap;
99 | }
100 | .footer {
101 | bottom: -2px;
102 | }
103 | }
104 |
105 | @media only screen and (max-width: 767px) {
106 | .main {
107 | margin: 20px;
108 | margin-right: 0;
109 | width: calc(100vw - 40px);
110 | }
111 | .headline {
112 | font-size: 45px;
113 | padding-bottom: 40px;
114 | }
115 | }
116 |
117 | .hr {
118 | margin-top: 20px;
119 | margin-bottom: 10px;
120 | }
121 | .back {
122 | font-size: 25px;
123 | }
124 |
125 | .children p {
126 | margin-bottom: 20px;
127 | line-height: 22px;
128 | }
129 |
130 | .children h1 {
131 | margin-bottom: 30px;
132 | }
133 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Hollywood Movie Remake Generator
2 |
3 | Welcome to the Hollywood Movie Remake Generator, an open source web project that generates creative remakes of Hollywood movies using cutting-edge technology. This project is built using Next.js, React 18's Server Components, and the new App Router feature. It leverages OpenAI API, ChatGPT-4, and Stable Diffusion to power the movie remake generation.
4 |
5 | ## Features
6 |
7 | - Movie search using The Movie Database (TMDB) API
8 | - Movie generation using SSE (Server-Side Events) in a Cloudflare worker
9 | - Cloudflare KV and Images for caching
10 | - AWS Lambda example using response streaming as an alternative to SSE
11 | - Informative slideshow explaining the technical aspects of the project
12 |
13 | ## Project Structure
14 |
15 | The project is organized into the following folders:
16 |
17 | - `cloudflare-remake`: Contains the SSE API implementation
18 | - `frontend`: The Next.js project containing the user interface
19 | - `lambda-streaming-ttfb-write-sam`: AWS Lambda example showcasing response streaming
20 | - `slides`: Slideshow explaining the technical aspects of the project
21 |
22 | ## Usage
23 |
24 | Feel free to use the streaming examples provided in this project to build your own AI applications. However, we kindly ask that you don't clone the entire site; instead, use the provided examples and create your own unique AI-powered applications.
25 |
26 | ## API Execution and Streaming
27 |
28 | Due to the long-running execution time of the movie remake generation process, the API needs to be implemented as a Cloudflare worker or an AWS Lambda function. Using a Next.js API would result in termination before the process is complete.
29 |
30 | To ensure a seamless experience for the end user, we use Server-Side Events (SSE) to stream the response. This enables the application to deliver the generated content as it becomes available, rather than waiting for the entire process to finish before sending the response.
31 |
32 | ## Contributing
33 |
34 | We welcome contributions from the community! If you have ideas or improvements, please submit a pull request or open an issue.
35 |
36 | ## License
37 |
38 | This project is licensed under the MIT License. See the `LICENSE` file for more information.
39 |
40 | ## Acknowledgements
41 |
42 | - [Next.js](https://nextjs.org/)
43 | - [React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html)
44 | - [OpenAI API](https://beta.openai.com/)
45 | - [The Movie Database (TMDB) API](https://www.themoviedb.org/documentation/api)
46 | - [Cloudflare Workers](https://workers.cloudflare.com/)
47 | - [AWS Lambda](https://aws.amazon.com/lambda/)
48 | - [DFDS](https://www.dfds.com/)
49 |
50 | This project was created as part of an internal knowledge-sharing session at DFDS.
51 |
--------------------------------------------------------------------------------
/frontend-v2/components/styles.module.css:
--------------------------------------------------------------------------------
1 | .movieWrapper {
2 | text-decoration: none;
3 | color: inherit;
4 | display: block;
5 | margin-bottom: 2rem;
6 | transition: transform 0.2s ease;
7 | }
8 |
9 | .movieWrapper:hover {
10 | transform: translateY(-2px);
11 | }
12 |
13 | .movie {
14 | display: flex;
15 | gap: 1.5rem;
16 | padding: 1.5rem;
17 | border-radius: 12px;
18 | background: rgba(17, 24, 39, 0.8);
19 | backdrop-filter: blur(10px);
20 | border: 1px solid rgba(75, 85, 99, 0.3);
21 | box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
22 | transition: all 0.2s ease;
23 | }
24 |
25 | .movie:hover {
26 | background: rgba(31, 41, 55, 0.9);
27 | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
28 | border-color: rgba(251, 191, 36, 0.3);
29 | }
30 |
31 | .poster {
32 | flex-shrink: 0;
33 | }
34 |
35 | .posterImage {
36 | border-radius: 8px;
37 | object-fit: cover;
38 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
39 | }
40 |
41 | .description {
42 | flex: 1;
43 | }
44 |
45 | .description h3 {
46 | margin: 0 0 1rem 0;
47 | font-size: 1.5rem;
48 | font-weight: 600;
49 | color: #ffffff;
50 | background: linear-gradient(135deg, #fbbf24, #ef4444, #ec4899);
51 | background-clip: text;
52 | -webkit-background-clip: text;
53 | -webkit-text-fill-color: transparent;
54 | }
55 |
56 | .description p {
57 | margin: 0;
58 | line-height: 1.6;
59 | color: #d1d5db;
60 | }
61 |
62 | /* Skeleton styles */
63 | .skeletonPoster {
64 | width: 200px;
65 | height: 300px;
66 | background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
67 | background-size: 200% 100%;
68 | animation: loading 1.5s infinite;
69 | border-radius: 8px;
70 | }
71 |
72 | .skeletonHeadline {
73 | height: 2rem;
74 | background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
75 | background-size: 200% 100%;
76 | animation: loading 1.5s infinite;
77 | border-radius: 4px;
78 | margin-bottom: 1rem;
79 | }
80 |
81 | .skeletonLine {
82 | height: 1rem;
83 | background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
84 | background-size: 200% 100%;
85 | animation: loading 1.5s infinite;
86 | border-radius: 4px;
87 | margin-bottom: 0.5rem;
88 | }
89 |
90 | .skeletonLine:nth-child(even) {
91 | width: 85%;
92 | }
93 |
94 | .skeletonLine:last-child {
95 | width: 60%;
96 | }
97 |
98 | @keyframes loading {
99 | 0% {
100 | background-position: 200% 0;
101 | }
102 | 100% {
103 | background-position: -200% 0;
104 | }
105 | }
106 |
107 | @media (max-width: 768px) {
108 | .movie {
109 | flex-direction: column;
110 | text-align: center;
111 | }
112 |
113 | .poster {
114 | align-self: center;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/frontend-v2/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | }
8 |
9 | @layer utilities {
10 | .text-balance {
11 | text-wrap: balance;
12 | }
13 | }
14 |
15 | @layer base {
16 | :root {
17 | --background: 0 0% 100%;
18 | --foreground: 0 0% 3.9%;
19 | --card: 0 0% 100%;
20 | --card-foreground: 0 0% 3.9%;
21 | --popover: 0 0% 100%;
22 | --popover-foreground: 0 0% 3.9%;
23 | --primary: 0 0% 9%;
24 | --primary-foreground: 0 0% 98%;
25 | --secondary: 0 0% 96.1%;
26 | --secondary-foreground: 0 0% 9%;
27 | --muted: 0 0% 96.1%;
28 | --muted-foreground: 0 0% 45.1%;
29 | --accent: 0 0% 96.1%;
30 | --accent-foreground: 0 0% 9%;
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 0 0% 98%;
33 | --border: 0 0% 89.8%;
34 | --input: 0 0% 89.8%;
35 | --ring: 0 0% 3.9%;
36 | --chart-1: 12 76% 61%;
37 | --chart-2: 173 58% 39%;
38 | --chart-3: 197 37% 24%;
39 | --chart-4: 43 74% 66%;
40 | --chart-5: 27 87% 67%;
41 | --radius: 0.5rem;
42 | --sidebar-background: 0 0% 98%;
43 | --sidebar-foreground: 240 5.3% 26.1%;
44 | --sidebar-primary: 240 5.9% 10%;
45 | --sidebar-primary-foreground: 0 0% 98%;
46 | --sidebar-accent: 240 4.8% 95.9%;
47 | --sidebar-accent-foreground: 240 5.9% 10%;
48 | --sidebar-border: 220 13% 91%;
49 | --sidebar-ring: 217.2 91.2% 59.8%;
50 | }
51 | .dark {
52 | --background: 0 0% 3.9%;
53 | --foreground: 0 0% 98%;
54 | --card: 0 0% 3.9%;
55 | --card-foreground: 0 0% 98%;
56 | --popover: 0 0% 3.9%;
57 | --popover-foreground: 0 0% 98%;
58 | --primary: 0 0% 98%;
59 | --primary-foreground: 0 0% 9%;
60 | --secondary: 0 0% 14.9%;
61 | --secondary-foreground: 0 0% 98%;
62 | --muted: 0 0% 14.9%;
63 | --muted-foreground: 0 0% 63.9%;
64 | --accent: 0 0% 14.9%;
65 | --accent-foreground: 0 0% 98%;
66 | --destructive: 0 62.8% 30.6%;
67 | --destructive-foreground: 0 0% 98%;
68 | --border: 0 0% 14.9%;
69 | --input: 0 0% 14.9%;
70 | --ring: 0 0% 83.1%;
71 | --chart-1: 220 70% 50%;
72 | --chart-2: 160 60% 45%;
73 | --chart-3: 30 80% 55%;
74 | --chart-4: 280 65% 60%;
75 | --chart-5: 340 75% 55%;
76 | --sidebar-background: 240 5.9% 10%;
77 | --sidebar-foreground: 240 4.8% 95.9%;
78 | --sidebar-primary: 224.3 76.3% 48%;
79 | --sidebar-primary-foreground: 0 0% 100%;
80 | --sidebar-accent: 240 3.7% 15.9%;
81 | --sidebar-accent-foreground: 240 4.8% 95.9%;
82 | --sidebar-border: 240 3.7% 15.9%;
83 | --sidebar-ring: 217.2 91.2% 59.8%;
84 | }
85 | }
86 |
87 | @layer base {
88 | * {
89 | @apply border-border;
90 | }
91 | body {
92 | @apply bg-background text-foreground;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/frontend-v2/components/search-input.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState, useEffect, useRef, useTransition } from "react"
4 | import { useRouter } from "next/navigation"
5 |
6 | interface SearchInputProps {
7 | defaultValue?: string
8 | placeholder?: string
9 | className?: string
10 | }
11 |
12 | export function SearchInput({
13 | defaultValue = "",
14 | placeholder = "Enter a movie title...",
15 | className = "",
16 | }: SearchInputProps) {
17 | const [searchTerm, setSearchTerm] = useState(defaultValue)
18 | const [isPending, startTransition] = useTransition()
19 | const router = useRouter()
20 | const inputRef = useRef
56 |
68 |
69 |
70 | {isPending && (
71 |
82 | )
83 | }
84 |
--------------------------------------------------------------------------------
/frontend-v2/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | }
8 |
9 | @layer utilities {
10 | .text-balance {
11 | text-wrap: balance;
12 | }
13 | }
14 |
15 | @layer base {
16 | :root {
17 | --background: 0 0% 100%;
18 | --foreground: 0 0% 3.9%;
19 | --card: 0 0% 100%;
20 | --card-foreground: 0 0% 3.9%;
21 | --popover: 0 0% 100%;
22 | --popover-foreground: 0 0% 3.9%;
23 | --primary: 0 0% 9%;
24 | --primary-foreground: 0 0% 98%;
25 | --secondary: 0 0% 96.1%;
26 | --secondary-foreground: 0 0% 9%;
27 | --muted: 0 0% 96.1%;
28 | --muted-foreground: 0 0% 45.1%;
29 | --accent: 0 0% 96.1%;
30 | --accent-foreground: 0 0% 9%;
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 0 0% 98%;
33 | --border: 0 0% 89.8%;
34 | --input: 0 0% 89.8%;
35 | --ring: 0 0% 3.9%;
36 | --chart-1: 12 76% 61%;
37 | --chart-2: 173 58% 39%;
38 | --chart-3: 197 37% 24%;
39 | --chart-4: 43 74% 66%;
40 | --chart-5: 27 87% 67%;
41 | --radius: 0.5rem;
42 | --sidebar-background: 0 0% 98%;
43 | --sidebar-foreground: 240 5.3% 26.1%;
44 | --sidebar-primary: 240 5.9% 10%;
45 | --sidebar-primary-foreground: 0 0% 98%;
46 | --sidebar-accent: 240 4.8% 95.9%;
47 | --sidebar-accent-foreground: 240 5.9% 10%;
48 | --sidebar-border: 220 13% 91%;
49 | --sidebar-ring: 217.2 91.2% 59.8%;
50 | }
51 | .dark {
52 | --background: 0 0% 3.9%;
53 | --foreground: 0 0% 98%;
54 | --card: 0 0% 3.9%;
55 | --card-foreground: 0 0% 98%;
56 | --popover: 0 0% 3.9%;
57 | --popover-foreground: 0 0% 98%;
58 | --primary: 0 0% 98%;
59 | --primary-foreground: 0 0% 9%;
60 | --secondary: 0 0% 14.9%;
61 | --secondary-foreground: 0 0% 98%;
62 | --muted: 0 0% 14.9%;
63 | --muted-foreground: 0 0% 63.9%;
64 | --accent: 0 0% 14.9%;
65 | --accent-foreground: 0 0% 98%;
66 | --destructive: 0 62.8% 30.6%;
67 | --destructive-foreground: 0 0% 98%;
68 | --border: 0 0% 14.9%;
69 | --input: 0 0% 14.9%;
70 | --ring: 0 0% 83.1%;
71 | --chart-1: 220 70% 50%;
72 | --chart-2: 160 60% 45%;
73 | --chart-3: 30 80% 55%;
74 | --chart-4: 280 65% 60%;
75 | --chart-5: 340 75% 55%;
76 | --sidebar-background: 240 5.9% 10%;
77 | --sidebar-foreground: 240 4.8% 95.9%;
78 | --sidebar-primary: 224.3 76.3% 48%;
79 | --sidebar-primary-foreground: 0 0% 100%;
80 | --sidebar-accent: 240 3.7% 15.9%;
81 | --sidebar-accent-foreground: 240 4.8% 95.9%;
82 | --sidebar-border: 240 3.7% 15.9%;
83 | --sidebar-ring: 217.2 91.2% 59.8%;
84 | }
85 | }
86 |
87 | @layer base {
88 | * {
89 | @apply border-border;
90 | }
91 | body {
92 | @apply bg-background text-foreground;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { ChevronLeft, ChevronRight } from "lucide-react"
5 | import { DayPicker } from "react-day-picker"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { buttonVariants } from "@/components/ui/button"
9 |
10 | export type CalendarProps = React.ComponentProps
72 |
73 |
74 | )}
75 |
76 | {searchTerm.length > 0 && searchTerm.length < 2 && !isPending && (
77 |
78 | Type at least 2 characters to search...
79 |
80 | )}
81 |
25 |
29 | )
30 | }
31 |
32 | return (
33 | 🎭
26 | No movies found
27 |Try searching with a different movie title
28 |
34 | {movieData.results.map((movie) => (
35 |
36 |
60 | )
61 | }
62 |
63 | export const MovieSearchResultSkeleton = () => (
64 | <>
65 | {Array.from({ length: 4 }, (_, index) => (
66 |
37 |
57 |
58 | ))}
59 |
38 | {movie.poster_path ? (
39 |
46 | ) : (
47 |
52 |
46 | ) : (
47 |
48 | 🎬
49 |
50 | )}
51 |
53 |
56 | {movie.title}
54 |{movie.overview || "No description available."}
55 |
67 |
81 | ))}
82 |
83 | )
84 |
--------------------------------------------------------------------------------
/frontend-v2/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
8 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
9 | "*.{js,ts,jsx,tsx,mdx}"
10 | ],
11 | theme: {
12 | extend: {
13 | colors: {
14 | background: 'hsl(var(--background))',
15 | foreground: 'hsl(var(--foreground))',
16 | card: {
17 | DEFAULT: 'hsl(var(--card))',
18 | foreground: 'hsl(var(--card-foreground))'
19 | },
20 | popover: {
21 | DEFAULT: 'hsl(var(--popover))',
22 | foreground: 'hsl(var(--popover-foreground))'
23 | },
24 | primary: {
25 | DEFAULT: 'hsl(var(--primary))',
26 | foreground: 'hsl(var(--primary-foreground))'
27 | },
28 | secondary: {
29 | DEFAULT: 'hsl(var(--secondary))',
30 | foreground: 'hsl(var(--secondary-foreground))'
31 | },
32 | muted: {
33 | DEFAULT: 'hsl(var(--muted))',
34 | foreground: 'hsl(var(--muted-foreground))'
35 | },
36 | accent: {
37 | DEFAULT: 'hsl(var(--accent))',
38 | foreground: 'hsl(var(--accent-foreground))'
39 | },
40 | destructive: {
41 | DEFAULT: 'hsl(var(--destructive))',
42 | foreground: 'hsl(var(--destructive-foreground))'
43 | },
44 | border: 'hsl(var(--border))',
45 | input: 'hsl(var(--input))',
46 | ring: 'hsl(var(--ring))',
47 | chart: {
48 | '1': 'hsl(var(--chart-1))',
49 | '2': 'hsl(var(--chart-2))',
50 | '3': 'hsl(var(--chart-3))',
51 | '4': 'hsl(var(--chart-4))',
52 | '5': 'hsl(var(--chart-5))'
53 | },
54 | sidebar: {
55 | DEFAULT: 'hsl(var(--sidebar-background))',
56 | foreground: 'hsl(var(--sidebar-foreground))',
57 | primary: 'hsl(var(--sidebar-primary))',
58 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
59 | accent: 'hsl(var(--sidebar-accent))',
60 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
61 | border: 'hsl(var(--sidebar-border))',
62 | ring: 'hsl(var(--sidebar-ring))'
63 | }
64 | },
65 | borderRadius: {
66 | lg: 'var(--radius)',
67 | md: 'calc(var(--radius) - 2px)',
68 | sm: 'calc(var(--radius) - 4px)'
69 | },
70 | keyframes: {
71 | 'accordion-down': {
72 | from: {
73 | height: '0'
74 | },
75 | to: {
76 | height: 'var(--radix-accordion-content-height)'
77 | }
78 | },
79 | 'accordion-up': {
80 | from: {
81 | height: 'var(--radix-accordion-content-height)'
82 | },
83 | to: {
84 | height: '0'
85 | }
86 | }
87 | },
88 | animation: {
89 | 'accordion-down': 'accordion-down 0.2s ease-out',
90 | 'accordion-up': 'accordion-up 0.2s ease-out'
91 | }
92 | }
93 | },
94 | plugins: [require("tailwindcss-animate")],
95 | };
96 | export default config;
97 |
--------------------------------------------------------------------------------
/cloudflare-remake/movie-remake/src/imageGeneration.ts:
--------------------------------------------------------------------------------
1 | interface Prediction {
2 | id: string;
3 | status: string;
4 | output: string[];
5 | }
6 |
7 | async function sleep(ms: number): Promise
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
22 | {/* Original Movie Section - 4 columns on large screens */}
23 |
65 | )
66 | }
67 |
68 | export const MovieCoverSkeleton = () => (
69 |
24 |
53 |
54 | {/* Remake Section - 8 columns on large screens */}
55 | Original Movie
25 | {movieData ? ( 26 |
27 |
49 | ) : (
50 |
28 | 
35 |
42 | {movieData.overview && (
43 |
35 |
36 | {movieData.title}
37 |
38 | {movieData.release_date ? new Date(movieData.release_date).getFullYear() : ""}
39 |
40 |
41 |
44 |
47 | )}
48 | Original Plot
45 |{movieData.overview}
46 |
56 |
64 | Hollywood Remake
57 |
70 |
87 | )
88 |
--------------------------------------------------------------------------------
/frontend-v2/app/remake/[movieId]/page.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import Link from "next/link";
3 | import { getMovie } from "@/lib/get-movie";
4 | import { OriginalMovie, MovieCoverSkeleton } from "@/components/original-movie";
5 | import type { Metadata } from "next";
6 |
7 | interface PageProps {
8 | params: { movieId: string };
9 | }
10 |
11 | export default function RemakePage({ params }: PageProps) {
12 | const { movieId } = params;
13 |
14 | return (
15 |
71 |
77 | Original Movie
72 |
73 |
74 |
75 |
76 |
78 |
86 | Hollywood Remake
79 |
80 |
81 | {Array.from({ length: 5 }).map((_, i) => (
82 |
83 | ))}
84 |
85 |
16 |
33 | );
34 | }
35 |
36 | export async function generateMetadata({
37 | params,
38 | }: PageProps): Promise
17 | {/* Header with back link */}
18 |
32 |
19 |
23 | Hollywood Movie Remake Generator
24 |
25 |
26 |
27 | {/* Movie Content */}
28 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
6 |
57 | )
58 | }
59 |
60 | export const metadata = {
61 | title: "Legal | Hollywood Movie Remake Generator",
62 | description: "Legal disclaimer and license information for the Hollywood Movie Remake Generator",
63 | }
64 |
--------------------------------------------------------------------------------
/frontend-v2/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Drawer as DrawerPrimitive } from "vaul"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Drawer = ({
9 | shouldScaleBackground = true,
10 | ...props
11 | }: React.ComponentProps
7 | {/* Header with back link */}
8 |
56 |
9 |
13 | Hollywood Movie Remake Generator
14 |
15 |
16 |
17 | {/* Legal Content */}
18 |
19 |
55 | Legal Disclaimer
20 | 21 |
22 |
41 |
42 | 23 | Hollywood Movie Remake Generator is an independent platform providing AI-generated parodies, synopses, and 24 | character posters for entertainment purposes. We claim no affiliation with or endorsement by any movies or 25 | actors featured. Our use of names, images, and trademarks falls under Fair Use as parody, satire, or 26 | commentary. 27 |
28 | 29 |30 | The AI-generated content on this site is provided under a Creative Commons Attribution 4.0 International 31 | License, allowing you to share and adapt the content freely, as long as you give appropriate credit to 32 | Hollywood Movie Remake Generator as the source. 33 |
34 | 35 |36 | By using our site, you acknowledge doing so at your own risk and agree that we are not liable for any 37 | damages or losses. We encourage you to share the content, credit our platform, and spread the joy of 38 | Hollywood Movie Remake Generator's unique creations! 39 |
40 |
43 |
54 | License Information
44 |
45 |
51 | Creative Commons Attribution 4.0 International License
52 |
53 |