SRK AI STUDIO

import React, { useState } from 'react';

export default function ImageToVideoApp() {
const [image, setImage] = useState(null);
const [videoUrl, setVideoUrl] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');

// 1. ఇమేజ్ ఫైల్‌ను సెలెక్ట్ చేసినప్పుడు జరిగే ప్రక్రియ
const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
setImage(URL.createObjectURL(file));
setVideoUrl(''); // పాత వీడియోను రీసెట్ చేయడం
setError('');
}
};

// 2. AI API కి డేటాను పంపే ఫంక్షన్
const generateVideo = async () => {
if (!image) {
setError('దయచేసి ముందుగా ఒక ఇమేజ్‌ని అప్‌లోడ్ చేయండి!');
return;
}

setLoading(true);
setError('');

try {
// ఇక్కడ మన బ్యాక్‌ఎండ్ APIని కాల్ చేస్తాము (Next.js API Route)
const response = await fetch('/api/generate-video', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ image: image }),
});

const data = await response.json();

if (response.ok) {
setVideoUrl(data.videoUrl); // AI జనరేట్ చేసిన వీడియో లింక్
} else {
throw new Error(data.message || 'వీడియో జనరేషన్ విఫలమైంది.');
}
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};

return (
<div style={styles.container}>
<h1 style={styles.title}>AI Image to 10s Video Generator</h1>

{/* ఇమేజ్ అప్‌లోడ్ సెక్షన్ */}
<div style={styles.uploadBox}>
<input type="file" accept="image/*" onChange={handleImageChange} style={styles.fileInput} />
{image && <img src={image} alt="Uploaded" style={styles.previewImage} />}
</div>

{/* బటన్ యాక్షన్ */}
<button onClick={generateVideo} disabled={loading} style={styles.button}>
{loading ? 'AI వీడియో క్రియేట్ చేస్తోంది... (కొన్ని సెకన్లు ఆగండి)' : 'కన్వర్ట్ చేయండి (Convert to Video)'}
</button>

{/* ఎర్రర్ మెసేజ్ */}
{error && <p style={styles.errorText}>{error}</p>}

{/* వీడియో డిస్‌ప్లే సెక్షన్ */}
{videoUrl && (
<div style={styles.videoBox}>
<h3>మీ AI వీడియో సిద్ధమైంది:</h3>
<video src={videoUrl} controls autoPlay loop style={styles.videoPlayer} />
</div>
)}
</div>
);
}

// సింపుల్ స్టైలింగ్స్ (CSS-in-JS)
const styles = {
container: { padding: '20px', maxWidth: '500px', margin: '0 auto', textAlign: 'center', fontFamily: 'Arial, sans-serif' },
title: { color: '#333' },
uploadBox: { border: '2px dashed #ccc', padding: '20px', borderRadius: '10px', margin: '20px 0' },
fileInput: { marginBottom: '15px' },
previewImage: { width: '100%', maxHeight: '300px', objectFit: 'contain', borderRadius: '5px' },
button: { backgroundColor: '#0070f3', color: '#fff', border: 'none', padding: '10px 20px', fontSize: '16px', borderRadius: '5px', cursor: 'pointer', width: '100%' },
videoBox: { marginTop: '30px' },
videoPlayer: { width: '100%', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' },
errorText: { color: 'red', marginTop: '10px' }
};