haruncan/ContentGen_FE
1
0
Fork 0
generated from fahricansecer/boilerplate-fe
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement text-to-video and fix hydration UI issues

Browse Source
This commit is contained in:
Harun CAN
2026-04-28 09:48:43 +02:00
parent 89eb9d4dfd
commit 1b69eaf219
13 changed files with 387 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/(dashboard)/dashboard/page.tsx
+15
View File
@@ -1,5 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import {
FolderOpen,
@@ -95,6 +96,12 @@ function getStatCards(data?: typeof MOCK_STATS, creditBalance?: { balance: numbe
}
export default function DashboardPage() {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
// Real API hook'ları — mock modunda çağrılmaz
const statsQuery = useDashboardStats();
const creditQuery = useCreditBalance();
@@ -106,6 +113,14 @@ export default function DashboardPage() {
const statCards = getStatCards(statsData, creditData);
if (!mounted) {
return (
<div className="flex items-center justify-center min-h-[60vh]">
<Loader2 size={32} className="animate-spin text-violet-500" />
</div>
);
}
return (
<motion.div
variants={stagger}
src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx
+1 -1
View File
@@ -534,7 +534,7 @@ export default function ProjectDetailPage() {
{/* ── Render Progress (WebSocket) ── */}
{isRendering && (
<motion.div variants={fadeUp}>
<RenderProgress renderState={renderState} />
<RenderProgress renderState={renderState} projectStatus={project.status} />
</motion.div>
)}
src/app/[locale]/(dashboard)/dashboard/text-to-video/error.tsx
+22
View File
@@ -0,0 +1,22 @@
'use client'
import { useEffect } from 'react'
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
console.error('TEXT TO VIDEO ERROR:', error)
}, [error])
return (
<div>
<h2>Something went wrong!</h2>
<pre>{error.message}</pre>
<pre>{error.stack}</pre>
</div>
)
}
src/app/[locale]/(dashboard)/dashboard/text-to-video/page.tsx
+252
View File
@@ -0,0 +1,252 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { useCreateFromText } from "@/hooks/use-api";
import { useToast } from "@/components/ui/toast";
import {
FileText,
Loader2,
ArrowRight,
Clock,
Palette,
Monitor,
Smartphone,
Square,
Wand2,
Type,
} from "lucide-react";
const videoStyles = [
{ id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
{ id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
{ id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
{ id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
{ id: "NEWS", label: "Haber", emoji: "📰" },
];
const aspectRatios = [
{ id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
{ id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
{ id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
];
const languages = [
{ code: "tr", label: "Türkçe", flag: "🇹🇷" },
{ code: "en", label: "English", flag: "🇺🇸" },
{ code: "de", label: "Deutsch", flag: "🇩🇪" },
{ code: "es", label: "Español", flag: "🇪🇸" },
];
export default function TextToVideoPage() {
const router = useRouter();
const { toast } = useToast();
const createFromText = useCreateFromText();
const [textInput, setTextInput] = useState("");
const [style, setStyle] = useState("CINEMATIC");
const [cinematicReference, setCinematicReference] = useState("");
const [duration, setDuration] = useState(60);
const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
const [language, setLanguage] = useState("tr");
const handleGenerate = async () => {
if (!textInput.trim()) {
toast("error", "Lütfen bir konu, hikaye veya metin girin.");
return;
}
try {
const result: any = await createFromText.mutateAsync({
text: textInput,
language,
aspectRatio,
videoStyle: style,
cinematicReference: cinematicReference ? cinematicReference : undefined,
targetDuration: duration,
});
toast("success", "Video projesi başarıyla oluşturuldu!");
router.push(`/dashboard/projects/${result.id}`);
} catch (error) {
toast("error", "Proje oluşturulurken bir hata oluştu.");
}
};
return (
<div className="max-w-3xl mx-auto space-y-8 pb-24">
{/* Header */}
<div className="text-center space-y-3 pb-4">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-blue-500/10 text-blue-500 mb-2 ring-1 ring-blue-500/20 shadow-[0_0_30px_rgba(59,130,246,0.15)]">
<Type size={32} />
</div>
<h1 className="font-[family-name:var(--font-display)] text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
Metinden Video Üret
</h1>
<p className="text-[var(--color-text-muted)] text-sm max-w-lg mx-auto">
İstediğiniz konuyu, bir hikayeyi veya makaleyi kopyalayıp yapıştırın; yapay zeka sizin için detaylı bir video senaryosu üretsin.
</p>
</div>
{/* Input */}
<div className="card p-6 md:p-8 space-y-6">
<div>
<label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
Fikriniz veya Metniniz
</label>
<textarea
value={textInput}
onChange={(e) => setTextInput(e.target.value)}
placeholder="Örn: Evrenin başlangıcı ve kara deliklerin sırları hakkında detaylı ve sürükleyici bir anlatım..."
rows={6}
className="w-full bg-[var(--color-bg-subtle)] border border-[var(--color-border-faint)] rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 resize-none transition-all placeholder:text-[var(--color-text-ghost)]"
/>
</div>
{/* Configurations */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-[var(--color-border-faint)]">
{/* Style */}
<div className="space-y-3">
<label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
<Palette size={14} /> Video Stili
</label>
<div className="grid grid-cols-2 gap-2">
{videoStyles.slice(0, 4).map((s) => (
<button
key={s.id}
onClick={() => setStyle(s.id)}
className={cn(
"flex items-center gap-2 p-3 rounded-xl border text-sm font-medium transition-all",
style === s.id
? "bg-blue-500/10 border-blue-500/30 text-blue-400"
: "bg-[var(--color-bg-subtle)] border-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)]"
)}
>
<span>{s.emoji}</span>
<span className="truncate">{s.label}</span>
</button>
))}
</div>
{/* Cinematic Reference */}
{style === "CINEMATIC" && (
<div className="mt-3">
<input
type="text"
value={cinematicReference}
onChange={(e) => setCinematicReference(e.target.value)}
placeholder="Yönetmen/Film stili (Opsiyonel)"
className="w-full bg-black/20 border border-[var(--color-border-faint)] rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-blue-500/50"
/>
</div>
)}
</div>
{/* Aspect Ratio */}
<div className="space-y-3">
<label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
<Monitor size={14} /> Format
</label>
<div className="grid grid-cols-3 gap-2">
{aspectRatios.map((ar) => {
const Icon = ar.icon;
return (
<button
key={ar.id}
onClick={() => setAspectRatio(ar.id)}
className={cn(
"flex flex-col items-center gap-2 p-3 rounded-xl border transition-all",
aspectRatio === ar.id
? "bg-blue-500/10 border-blue-500/30 text-blue-400"
: "bg-[var(--color-bg-subtle)] border-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)]"
)}
>
<Icon size={18} />
<div className="text-center">
<div className="text-xs font-bold">{ar.label}</div>
<div className="text-[9px] opacity-70 truncate">{ar.desc}</div>
</div>
</button>
);
})}
</div>
</div>
{/* Duration */}
<div className="space-y-3">
<label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
<Clock size={14} /> Süre
</label>
<div className="flex items-center gap-4 bg-[var(--color-bg-subtle)] p-3 rounded-xl">
<input
type="range"
min="15"
max="180"
step="15"
value={duration}
onChange={(e) => setDuration(Number(e.target.value))}
className="flex-1 accent-blue-500"
/>
<span className="text-sm font-mono font-medium text-blue-400 w-12 text-right">
{duration}s
</span>
</div>
</div>
{/* Language */}
<div className="space-y-3">
<label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
<span className="text-[14px]">🗣</span> Seslendirme Dili
</label>
<div className="grid grid-cols-2 gap-2">
{languages.map((lang) => (
<button
key={lang.code}
onClick={() => setLanguage(lang.code)}
className={cn(
"flex items-center gap-2 p-2.5 rounded-xl border text-sm font-medium transition-all",
language === lang.code
? "bg-blue-500/10 border-blue-500/30 text-blue-400"
: "bg-[var(--color-bg-subtle)] border-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)]"
)}
>
<span className="text-lg leading-none">{lang.flag}</span>
<span>{lang.label}</span>
</button>
))}
</div>
</div>
</div>
</div>
{/* Action Button */}
<div className="flex justify-end">
<button
onClick={handleGenerate}
disabled={createFromText.isPending || !textInput.trim()}
className={cn(
"group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-white shadow-[0_0_40px_rgba(59,130,246,0.3)] transition-all",
"bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 hover:scale-[1.02]",
"disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
)}
>
{createFromText.isPending ? (
<>
<Loader2 size={20} className="animate-spin" />
<span>Yapay Zeka Senaryoyu Yazıyor...</span>
</>
) : (
<>
<Wand2 size={20} className="group-hover:rotate-12 transition-transform" />
<span>Video Projesi Oluştur</span>
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
</>
)}
</button>
</div>
</div>
);
}
src/components/dashboard/dashboard-charts.tsx
+8 -1
View File
@@ -1,5 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import {
AreaChart,
Area,
@@ -59,13 +60,19 @@ function formatPieData(stats: Record<string, unknown> | undefined) {
}
export function DashboardCharts() {
const [mounted, setMounted] = useState(false);
const { data, isLoading } = useDashboardStats();
useEffect(() => {
setMounted(true);
}, []);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const stats = (data as any)?.data ?? data;
const weekData = formatWeekData(stats);
const pieData = formatPieData(stats);
if (isLoading) {
if (!mounted || isLoading) {
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
{[1, 2].map((i) => (
src/components/layout/app-shell.tsx
+1
View File
@@ -13,6 +13,7 @@ const navItems = [
{ href: "/dashboard", icon: Home, label: "Ana Sayfa" },
{ href: "/dashboard/projects", icon: FolderOpen, label: "Projeler" },
{ href: "/dashboard/render-queue", icon: Activity, label: "Render Monitör" },
{ href: "/dashboard/text-to-video", icon: FileText, label: "Metin → Video" },
{ href: "/dashboard/x-to-video", icon: AtSign, label: "X → Video" },
{ href: "/dashboard/youtube-to-video", icon: Link2, label: "YT → Video" },
{ href: "/dashboard/document-to-video", icon: FileText, label: "Belge → Video" },
src/components/project/render-progress.tsx
+31 -2
View File
@@ -16,12 +16,41 @@ const STAGE_DETAILS: Record<string, { label: string; icon: string; color: string
interface RenderProgressProps {
renderState: RenderProgressState;
projectStatus?: string;
}
export function RenderProgress({ renderState }: RenderProgressProps) {
export function RenderProgress({ renderState, projectStatus }: RenderProgressProps) {
const { progress, stage, stageLabel, currentScene, totalScenes, eta, status, isConnected } = renderState;
if (status === 'idle') return null;
if (status === 'idle') {
return (
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
className="card-surface p-5 md:p-6"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<Loader2 size={18} className="animate-spin text-amber-400" />
<h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
{projectStatus === 'GENERATING_SCRIPT' ? 'AI Senaryo Üretiyor...' : 'İşlem kuyrukta veya başlatılıyor...'}
</h3>
</div>
<div className="flex items-center gap-1.5">
{isConnected ? (
<Wifi size={13} className="text-emerald-400" />
) : (
<WifiOff size={13} className="text-red-400" />
)}
<span className="text-[10px] text-[var(--color-text-ghost)]">
{isConnected ? 'Canlı' : 'Bağlantı koptu'}
</span>
</div>
</div>
</motion.div>
);
}
return (
<motion.div
src/components/ui/provider.tsx
+16 -12
View File
@@ -1,5 +1,7 @@
"use client";
import { ChakraProvider } from "@chakra-ui/react";
import { system } from "@/theme/theme";
import { SessionProvider } from "next-auth/react";
import { ThemeProvider } from "next-themes";
import ReactQueryProvider from "@/provider/react-query-provider";
@@ -7,17 +9,19 @@ import { ToastProvider } from "@/components/ui/toast";
export function Provider({ children }: { children: React.ReactNode }) {
return (
<SessionProvider>
<ReactQueryProvider>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem={false}
disableTransitionOnChange
>
<ToastProvider>{children}</ToastProvider>
</ThemeProvider>
</ReactQueryProvider>
</SessionProvider>
<ChakraProvider value={system}>
<SessionProvider>
<ReactQueryProvider>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem={false}
disableTransitionOnChange
>
<ToastProvider>{children}</ToastProvider>
</ThemeProvider>
</ReactQueryProvider>
</SessionProvider>
</ChakraProvider>
);
}
src/hooks/use-api.ts
+13
View File
@@ -18,6 +18,7 @@ import {
type CreateFromDocumentPayload,
type ExtractDocumentTopicsPayload,
type CreateFromExtractedTextPayload,
type CreateFromTextPayload,
type ExtractDocumentTopicsResponse,
type Template,
type PaginatedResponse,
@@ -434,6 +435,18 @@ export function useCreateFromExtractedText() {
});
}
/** Serbest metin veya fikir üzerinden proje üret */
export function useCreateFromText() {
const qc = useQueryClient();
return useMutation({
mutationFn: (data: CreateFromTextPayload) => projectsApi.createFromText(data),
onSuccess: () => {
qc.invalidateQueries({ queryKey: queryKeys.projects.all });
qc.invalidateQueries({ queryKey: queryKeys.dashboard.stats });
},
});
}
// ═══════════════════════════════════════════════════════
// NOTIFICATIONS — Bildirim hook'ları
// ═══════════════════════════════════════════════════════
src/lib/api/api-service.ts
+13
View File
@@ -271,6 +271,16 @@ export interface CreateFromDocumentPayload {
targetDuration?: number;
}
export interface CreateFromTextPayload {
text: string;
title?: string;
language?: string;
aspectRatio?: string;
videoStyle?: string;
cinematicReference?: string;
targetDuration?: number;
}
export interface ExtractDocumentTopicsPayload {
file: File;
}
@@ -378,6 +388,9 @@ export const projectsApi = {
}).then((r) => r.data);
},
createFromText: (data: CreateFromTextPayload) =>
apiClient.post<Project>('/projects/from-text', data).then((r) => r.data),
extractDocumentTopics: (data: ExtractDocumentTopicsPayload) => {
const formData = new FormData();
formData.append('file', data.file);
src/theme/theme.ts
+1
View File
@@ -1,6 +1,7 @@
import { createSystem, defaultConfig, SystemConfig } from '@chakra-ui/react';
const customConfig: SystemConfig = {
preflight: false,
theme: {
breakpoints: {
tablet: '768px',
test-puppeteer.js
+13
View File
@@ -0,0 +1,13 @@
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
page.on('pageerror', error => console.log('PAGE ERROR:', error.message));
page.on('requestfailed', request => console.log('REQUEST FAILED:', request.url(), request.failure().errorText));
await page.goto('http://localhost:3001/tr/dashboard/text-to-video');
await new Promise(r => setTimeout(r, 2000));
await browser.close();
})();
tsconfig.tsbuildinfo
+1 -1
View File
File diff suppressed because one or more lines are too long