Spaces:

prodevroger
/

vid3

Sleeping

App Files Files Community

IZERE HIRWA Roger commited on Jul 25

Commit

4e1bce5

1 Parent(s): dfbe201

g

Browse files

Files changed (4) hide show

Dockerfile +0 -9
app.py +4 -2
templates/index.html +174 -3
templates/static/css/style.css +0 -93

Dockerfile CHANGED Viewed

@@ -30,15 +30,6 @@ RUN wget -P /app/SadTalker/checkpoints \
 # Copy application files
 COPY . .
-# 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 templates/ /app/templates/
 # Add SadTalker to Python path
 ENV PYTHONPATH="${PYTHONPATH}:/app/SadTalker/src"

 # Copy application files
 COPY . .
 # Add SadTalker to Python path
 ENV PYTHONPATH="${PYTHONPATH}:/app/SadTalker/src"

app.py CHANGED Viewed

@@ -4,7 +4,8 @@ sys.path.append('/app/SadTalker/src')
 from flask import Flask, render_template, request, jsonify, send_from_directory
-app = Flask(__name__, static_folder='static', static_url_path='/static')
 # Initialize SadTalker with proper import
 try:
@@ -46,7 +47,7 @@ def generate():
         # Text-to-Speech (using gTTS)
         from gtts import gTTS
         tts = gTTS(text=text, lang='en')
         tts.save(audio_path)
         # Generate video (CPU optimized)
@@ -72,6 +73,7 @@ def generate():
 @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))

 from flask import Flask, render_template, request, jsonify, send_from_directory
+# app = Flask(__name__, static_folder='static', static_url_path='/static')
+app = Flask(__name__)
 # Initialize SadTalker with proper import
 try:
         # Text-to-Speech (using gTTS)
         from gtts import gTTS
         tts = gTTS(text=text, lang='en')
         tts.save(audio_path)
         # Generate video (CPU optimized)
 @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))

templates/index.html CHANGED Viewed

@@ -11,7 +11,101 @@
     <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 py-5">
@@ -68,7 +162,84 @@
     <!-- 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>

     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
     <!-- Custom CSS -->
+     <style>
+        /* Custom Bootstrap overrides */
+:root {
+  --primary-color: #4e73df;
+  --secondary-color: #858796;
+  --success-color: #1cc88a;
+}
+body {
+  background-color: #f8f9fc;
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+.card {
+  border: none;
+  border-radius: 0.35rem;
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
+}
+.card-header {
+  background-color: var(--primary-color);
+  border-bottom: none;
+}
+.btn-primary {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+.btn-primary:hover {
+  background-color: #2e59d9;
+  border-color: #2653d4;
+}
+/* Upload area styling */
+.upload-area {
+  border: 2px dashed #d1d3e2;
+  border-radius: 0.35rem;
+  padding: 2rem;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.upload-area:hover {
+  border-color: var(--primary-color);
+  background-color: rgba(78, 115, 223, 0.05);
+}
+.upload-area i {
+  font-size: 3rem;
+  color: var(--secondary-color);
+  margin-bottom: 1rem;
+}
+/* Video result styling */
+#result {
+  transition: all 0.3s;
+}
+#outputVideo {
+  border-radius: 0.35rem;
+  background-color: #000;
+}
+/* Loading spinner */
+.spinner-border {
+  width: 1.2rem;
+  height: 1.2rem;
+  border-width: 0.15em;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .card-body {
+    padding: 1.25rem;
+  }
+  .upload-area {
+    padding: 1.5rem;
+  }
+}
+/* Animation for processing state */
+@keyframes pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+.processing {
+  animation: pulse 1.5s infinite;
+}
+     </style>
 </head>
 <body>
     <div class="container py-5">
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Debug: Check if script is loaded
+console.log('Scripts.js loaded successfully');
+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;
+    }
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        console.log('Form submitted');
+        const imageInput = document.getElementById('imageInput');
+        const textInput = document.getElementById('textInput');
+        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';
+        }
+    });
+});
+    </script>
 </body>
 </html>

templates/static/css/style.css CHANGED Viewed

@@ -1,93 +0,0 @@
-/* Custom Bootstrap overrides */
-:root {
-  --primary-color: #4e73df;
-  --secondary-color: #858796;
-  --success-color: #1cc88a;
-}
-body {
-  background-color: #f8f9fc;
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-.card {
-  border: none;
-  border-radius: 0.35rem;
-  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
-}
-.card-header {
-  background-color: var(--primary-color);
-  border-bottom: none;
-}
-.btn-primary {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-.btn-primary:hover {
-  background-color: #2e59d9;
-  border-color: #2653d4;
-}
-/* Upload area styling */
-.upload-area {
-  border: 2px dashed #d1d3e2;
-  border-radius: 0.35rem;
-  padding: 2rem;
-  text-align: center;
-  margin-bottom: 1.5rem;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.upload-area:hover {
-  border-color: var(--primary-color);
-  background-color: rgba(78, 115, 223, 0.05);
-}
-.upload-area i {
-  font-size: 3rem;
-  color: var(--secondary-color);
-  margin-bottom: 1rem;
-}
-/* Video result styling */
-#result {
-  transition: all 0.3s;
-}
-#outputVideo {
-  border-radius: 0.35rem;
-  background-color: #000;
-}
-/* Loading spinner */
-.spinner-border {
-  width: 1.2rem;
-  height: 1.2rem;
-  border-width: 0.15em;
-}
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .card-body {
-    padding: 1.25rem;
-  }
-  .upload-area {
-    padding: 1.5rem;
-  }
-}
-/* Animation for processing state */
-@keyframes pulse {
-  0% { opacity: 0.6; }
-  50% { opacity: 1; }
-  100% { opacity: 0.6; }
-}
-.processing {
-  animation: pulse 1.5s infinite;
-}