अच्छा, अब हम इस स्क्रिप्ट को और उन्नत बनाएंगे ताकि यह अधिक उपयोगकर्ता-अनुकूल और इंटरैक्टिव हो। हम निम्नलिखित सुधार करेंगे:
1. **लोडिंग इंडिकेटर**: जब तक एआई वीडियो और ध्वनि तैयार हो रहे हों, तब तक उपयोगकर्ता को एक लोडिंग एनिमेशन दिखाया जाएगा।
2. **एपीआई कॉल में प्रोग्रेस बार**: API कॉल के दौरान प्रगति को दिखाने के लिए प्रोग्रेस बार जोड़ा जाएगा।
3. **विभिन्न वीडियो और ध्वनि के प्रीव्यू**: उपयोगकर्ता द्वारा चयन किए गए वीडियो और ध्वनि का पूर्वावलोकन दिखाया जाएगा।
### HTML (अपडेटेड)
```html
AI Video & Sound Selector
```
### CSS (styles.css)
```css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
div {
margin: 10px 0;
}
#loading {
margin: 20px 0;
font-weight: bold;
}
```
### JavaScript (script.js)
```javascript
document.getElementById('videoSelector').addEventListener('change', previewVideo);
document.getElementById('soundSelector').addEventListener('change', previewSound);
async function generateVideo() {
const videoSelector = document.getElementById('videoSelector');
const soundSelector = document.getElementById('soundSelector');
const generatedVideo = document.getElementById('generatedVideo');
const loadingIndicator = document.getElementById('loading');
const progressBar = document.getElementById('progressBar');
const selectedVideo = videoSelector.value;
const selectedSound = soundSelector.value;
// Placeholder: API endpoint for generating AI video with sound
const apiEndpoint = `https://api.example.com/generate?video=${selectedVideo}&sound=${selectedSound}`;
loadingIndicator.style.display = 'block';
progressBar.style.display = 'block';
progressBar.value = 0;
try {
const response = await fetch(apiEndpoint, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
onprogress: updateProgress
});
const data = await response.json();
if (response.ok && data.videoUrl) {
generatedVideo.src = data.videoUrl;
generatedVideo.style.display = 'block';
generatedVideo.load();
generatedVideo.play();
} else {
throw new Error('Failed to generate video.');
}
} catch (error) {
alert(`Error: ${error.message}`);
} finally {
loadingIndicator.style.display = 'none';
progressBar.style.display = 'none';
}
}
function previewVideo() {
const videoSelector = document.getElementById('videoSelector');
const videoPreview = document.getElementById('videoPreview');
videoPreview.src = `previews/${videoSelector.value}.mp4`; // Placeholder path
videoPreview.style.display = 'block';
}
function previewSound() {
const soundSelector = document.getElementById('soundSelector');
const soundPreview = document.getElementById('soundPreview');
soundPreview.src = `previews/${soundSelector.value}.mp3`; // Placeholder path
soundPreview.style.display = 'block';
}
function updateProgress(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressBar').value = percentComplete;
}
}
```
### विस्तृत सुधार
1. **लोडिंग इंडिकेटर**: वीडियो और ध्वनि उत्पन्न होने के दौरान "Generating Video, Please Wait..." संदेश दिखाया जाएगा।
2. **प्रगति बार**: API कॉल के दौरान एक प्रगति बार दिखाया जाएगा जो लोडिंग की स्थिति दर्शाएगा।
3. **वीडियो और ध्वनि प्रीव्यू**: चयनित वीडियो और ध्वनि क्लिप का प्रीव्यू प्रदर्शित किया जाएगा ताकि उपयोगकर्ता उन्हें पहले देख सके।
आप इस उन्नत स्क्रिप्ट में और भी सुधार जोड़ सकते हैं। क्या आपको यह अपडेट ठीक लगा, या आप इसमें कुछ और विशेषताएँ देखना चाहेंगे?
3D Video Generator 3D Video Generator Tool Generate Video body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; margin: 0; } .container { text-align: center; width: 80%; } #inputText { width: 80%; height: 100px; margin-bottom: 20px; padding: 10px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007BFF; color: white; border: none; border-radius: 5px; } button:hover { background-color: #0056b3; } #videoContainer { margin-top: 20px; width: 100%; height: 500px; background-color: #000; } document.getElementById('generateBtn').addEventListener('click', function() { const inputText = document.getElementById('inputText').value; if (input...
Comments
Post a Comment