o

Dockerfile

@@ -30,10 +30,16 @@ RUN wget -P /app/SadTalker/checkpoints \
 # Copy application files
 COPY . .
 
-# Create necessary directories
+# Create necessary directories with proper structure
 RUN mkdir -p /app/static/uploads && chmod -R 777 /app/static/uploads
+RUN mkdir -p /app/static/css && chmod -R 777 /app/static/css
+RUN mkdir -p /app/static/js && chmod -R 777 /app/static/js
 RUN mkdir -p /app/templates && chmod -R 777 /app/templates
 
+# Ensure static files are copied correctly
+COPY static/ /app/static/
+COPY templates/ /app/templates/
+
 # Add SadTalker to Python path
 ENV PYTHONPATH="${PYTHONPATH}:/app/SadTalker/src"
 

app.py

@@ -2,9 +2,9 @@ import os
 import sys
 sys.path.append('/app/SadTalker/src')
 
-from flask import Flask, render_template, request, jsonify
+from flask import Flask, render_template, request, jsonify, send_from_directory
 
-app = Flask(__name__)
+app = Flask(__name__, static_folder='static', static_url_path='/static')
 
 # Initialize SadTalker with proper import
 try:
@@ -30,31 +30,57 @@ def generate():
     image = request.files['image']
     text = request.form.get('text', '')
     
-    # Save files
-    img_path = os.path.join('static/uploads', image.filename)
-    audio_path = os.path.join('static/uploads', 'audio.wav')
-    output_path = os.path.join('static/uploads', 'output.mp4')
+    if not text.strip():
+        return jsonify({"error": "No text provided"}), 400
     
-    image.save(img_path)
+    if not image.filename:
+        return jsonify({"error": "No image selected"}), 400
     
-    # Text-to-Speech (using gTTS)
-    from gtts import gTTS
-    tts = gTTS(text=text, lang='en')
-    tts.save(audio_path)
-
-    # Generate video (CPU optimized )
-    sadtalker.generate(
-        source_image=img_path,
-        driven_audio=audio_path,
-        result_dir='static/uploads',
-        still=True,
-        preprocess='crop',
-        enhancer='none'  # Disable for CPU
-    )
-    
-    return jsonify({
-        "video": f"/static/uploads/{os.path.basename(output_path)}"
-    })
+    try:
+        # Save files
+        img_path = os.path.join('static/uploads', image.filename)
+        audio_path = os.path.join('static/uploads', 'audio.wav')
+        output_path = os.path.join('static/uploads', 'output.mp4')
+        
+        image.save(img_path)
+        
+        # Text-to-Speech (using gTTS)
+        from gtts import gTTS
+        tts = gTTS(text=text, lang='en')
+        tts.save(audio_path)
+
+        # Generate video (CPU optimized)
+        if sadtalker:
+            sadtalker.generate(
+                source_image=img_path,
+                driven_audio=audio_path,
+                result_dir='static/uploads',
+                still=True,
+                preprocess='crop',
+                enhancer='none'  # Disable for CPU
+            )
+        else:
+            return jsonify({"error": "SadTalker not initialized"}), 500
+        
+        return jsonify({
+            "video": f"/static/uploads/{os.path.basename(output_path)}"
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# Debug route to check static files
+@app.route('/debug/static')
+def debug_static():
+    static_files = []
+    for root, dirs, files in os.walk('static'):
+        for file in files:
+            static_files.append(os.path.join(root, file))
+    return jsonify({"static_files": static_files})
+
+# Explicit static file route for debugging
+@app.route('/static/<path:filename>')
+def static_files(filename):
+    return send_from_directory(app.static_folder, filename)
 
 if __name__ == '__main__':
     os.makedirs('static/uploads', exist_ok=True)

static/js/scripts.js

@@ -1,38 +1,77 @@
-document.getElementById('avatarForm').addEventListener('submit', async (e) => {
-    e.preventDefault();
-    
-    const formData = new FormData();
-    formData.append('image', document.getElementById('imageInput').files[0]);
-    formData.append('text', document.getElementById('textInput').value);
+// Debug: Check if script is loaded
+console.log('Scripts.js loaded successfully');
 
-    // Show loading state
-    const btn = document.querySelector('button[type="submit"]');
-    btn.disabled = true;
-    btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Processing...';
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('DOM loaded, initializing form handler');
+    
+    const form = document.getElementById('avatarForm');
+    if (!form) {
+        console.error('Avatar form not found!');
+        return;
+    }
 
-    try {
-        const response = await fetch('/generate', {
-            method: 'POST',
-            body: formData
-        });
-        const data = await response.json();
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        console.log('Form submitted');
         
-        // Display result
-        const video = document.getElementById('outputVideo');
-        video.src = data.video;
-        document.getElementById('result').classList.remove('d-none');
+        const imageInput = document.getElementById('imageInput');
+        const textInput = document.getElementById('textInput');
         
-        // Set up download
-        document.getElementById('downloadBtn').onclick = () => {
-            const a = document.createElement('a');
-            a.href = data.video;
-            a.download = 'talking_avatar.mp4';
-            a.click();
-        };
-    } catch (error) {
-        alert('Error: ' + error.message);
-    } finally {
-        btn.disabled = false;
-        btn.innerHTML = 'Generate Video';
-    }
+        if (!imageInput.files[0]) {
+            alert('Please select an image');
+            return;
+        }
+        
+        if (!textInput.value.trim()) {
+            alert('Please enter some text');
+            return;
+        }
+        
+        const formData = new FormData();
+        formData.append('image', imageInput.files[0]);
+        formData.append('text', textInput.value);
+
+        // Show loading state
+        const btn = document.querySelector('button[type="submit"]');
+        btn.disabled = true;
+        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span> Processing...';
+
+        try {
+            console.log('Sending request to /generate');
+            const response = await fetch('/generate', {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            console.log('Response received:', data);
+            
+            if (data.error) {
+                throw new Error(data.error);
+            }
+            
+            // Display result
+            const video = document.getElementById('outputVideo');
+            video.src = data.video;
+            document.getElementById('result').classList.remove('d-none');
+            
+            // Set up download
+            document.getElementById('downloadBtn').onclick = () => {
+                const a = document.createElement('a');
+                a.href = data.video;
+                a.download = 'talking_avatar.mp4';
+                a.click();
+            };
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Error: ' + error.message);
+        } finally {
+            btn.disabled = false;
+            btn.innerHTML = '<i class="fas fa-magic me-2"></i>Generate Video';
+        }
+    });
 });

templates/index.html

@@ -2,41 +2,73 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Talking Avatar</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="../static/css/styles.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Talking Avatar Generator</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
 </head>
 <body>
-    <div class="container mt-5">
-        <div class="row">
-            <div class="col-md-6 mx-auto">
-                <div class="card shadow">
-                    <div class="card-header bg-primary text-white">
-                        <h3 class="text-center">Make Your Image Talk</h3>
+    <div class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <div class="card">
+                    <div class="card-header text-white">
+                        <h4 class="mb-0"><i class="fas fa-video me-2"></i>AI Talking Avatar Generator</h4>
                     </div>
                     <div class="card-body">
-                        <form id="avatarForm">
-                            <div class="mb-3">
-                                <label class="form-label">Upload Image</label>
-                                <input type="file" class="form-control" id="imageInput" accept="image/*">
+                        <form id="avatarForm" enctype="multipart/form-data">
+                            <!-- Image Upload -->
+                            <div class="mb-4">
+                                <label class="form-label">Upload Photo</label>
+                                <div class="upload-area" onclick="document.getElementById('imageInput').click()">
+                                    <i class="fas fa-cloud-upload-alt"></i>
+                                    <p class="mb-0">Click to upload an image</p>
+                                    <small class="text-muted">Supports JPG, PNG formats</small>
+                                </div>
+                                <input type="file" id="imageInput" class="d-none" accept="image/*" required>
                             </div>
-                            <div class="mb-3">
-                                <label class="form-label">Text to Speak</label>
-                                <textarea class="form-control" id="textInput" rows="3"></textarea>
+
+                            <!-- Text Input -->
+                            <div class="mb-4">
+                                <label for="textInput" class="form-label">Enter Text</label>
+                                <textarea id="textInput" class="form-control" rows="4" 
+                                          placeholder="Enter the text you want the avatar to speak..." required></textarea>
                             </div>
-                            <button type="submit" class="btn btn-primary w-100">Generate Video</button>
+
+                            <!-- Submit Button -->
+                            <button type="submit" class="btn btn-primary btn-lg w-100">
+                                <i class="fas fa-magic me-2"></i>Generate Video
+                            </button>
                         </form>
-                        <div id="result" class="mt-4 text-center d-none">
-                            <video id="outputVideo" controls class="w-100"></video>
-                            <a id="downloadBtn" class="btn btn-success mt-2">Download Video</a>
-                        </div>
+                    </div>
+                </div>
+
+                <!-- Result Section -->
+                <div id="result" class="card mt-4 d-none">
+                    <div class="card-header">
+                        <h5 class="mb-0"><i class="fas fa-play-circle me-2"></i>Generated Video</h5>
+                    </div>
+                    <div class="card-body text-center">
+                        <video id="outputVideo" controls class="w-100 mb-3" style="max-height: 400px;"></video>
+                        <button id="downloadBtn" class="btn btn-success">
+                            <i class="fas fa-download me-2"></i>Download Video
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <script src="../static/js/script.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
 </body>
 </html>