i

Dockerfile

@@ -0,0 +1,37 @@
+FROM python:3.9-slim
+
+# Install system dependencies
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    ffmpeg \
+    git \
+    wget \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create checkpoints directory
+RUN mkdir -p /app/SadTalker/checkpoints
+
+# Download model weights (official SadTalker releases)
+RUN wget -P /app/SadTalker/checkpoints \
+    https://github.com/OpenTalker/SadTalker/releases/download/v0.0.2/auido2exp_00300-model.pth \
+    https://github.com/OpenTalker/SadTalker/releases/download/v0.0.2/auido2pose_00140-model.pth \
+    https://github.com/OpenTalker/SadTalker/releases/download/v0.0.2/epoch_20.pth \
+    https://github.com/OpenTalker/SadTalker/releases/download/v0.0.2/facevid2vid_00189-model.pth.tar
+
+# Clone SadTalker
+RUN git clone https://github.com/OpenTalker/SadTalker.git /app/SadTalker
+
+WORKDIR /app
+
+# Install Python dependencies
+COPY ./app/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt && \
+    pip install /app/SadTalker
+
+# Copy app files
+COPY ./app /app
+
+# Force CPU mode
+ENV SADTALKER_FORCE_CPU=1
+EXPOSE 7860
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,54 @@
+import os
+from flask import Flask, render_template, request, jsonify
+from SadTalker import SadTalker
+
+app = Flask(__name__)
+
+# Initialize SadTalker with CPU
+sadtalker = SadTalker(
+    checkpoint_path="/app/SadTalker/checkpoints",
+    config_path="/app/SadTalker/src/config",
+    device="cpu"
+)
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/generate', methods=['POST'])
+def generate():
+    if 'image' not in request.files:
+        return jsonify({"error": "No image uploaded"}), 400
+    
+    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')
+    
+    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)
+    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)}"
+    })
+
+if __name__ == '__main__':
+    os.makedirs('static/uploads', exist_ok=True)
+    app.run(host='0.0.0.0', port=7860)

space.yaml

@@ -0,0 +1 @@
+sdk: "docker"

static/css/style.css

@@ -0,0 +1,93 @@
+/* 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;
+}

static/js/scripts.js

@@ -0,0 +1,38 @@
+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);
+
+    // 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...';
+
+    try {
+        const response = await fetch('/generate', {
+            method: 'POST',
+            body: formData
+        });
+        const data = await response.json();
+        
+        // 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) {
+        alert('Error: ' + error.message);
+    } finally {
+        btn.disabled = false;
+        btn.innerHTML = 'Generate Video';
+    }
+});

templates/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<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">
+</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>
+                    <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/*">
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Text to Speak</label>
+                                <textarea class="form-control" id="textInput" rows="3"></textarea>
+                            </div>
+                            <button type="submit" class="btn btn-primary w-100">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>
+            </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>
+</body>
+</html>