Пользователь загружает изображение человеческого лица.
Под изображением пользователь вводит текст в текстовую область.
При нажатии кнопку «Говорить», приложение должно генерировать речь из введенного текста и синхронизировать движения губ загруженного изображения в соответствии с произносимыми словами.
На данный момент я успешно реализовал загрузку изображения функциональность и преобразование текста в речь. Однако у меня возникли проблемы с функцией синхронизации губ для загруженного изображения.
Буду признателен за помощь в решении этой проблемы.
ниже мой код
Код: Выделить всё
index.html
Deep Fake
.title {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 20px;
color: #333;
}
.face-container img {
/* width: 100px;
margin: 20px 0; */
animation: pulse 1.5s infinite;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background-color: #d4dce9;
border-radius: 20px;
width: 400px;
text-align: center;
padding: 30px;
}
.face-container img {
width: 167px;
margin: 35px 0;
align-content: center;
margin-left: 100px;
}
#editableText {
width: 83%;
height: 100px;
border-radius: 20px;
padding: 0px;
margin: 30px;
/* margin-bottom: 20px; */
background-color: white;
}
button {
background-color: #74929e;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
}
Deep Fake
[img]#[/img]
Speak
// Display the uploaded image
document.getElementById('imageUpload').addEventListener('change', function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const img = document.getElementById('uploadedImage');
img.src = e.target.result;
img.style.display = 'block';
};
reader.readAsDataURL(file);
});
// Text-to-speech functionality
document.getElementById('speakButton').addEventListener('click', async function () {
const textInput = document.getElementById('editableText').innerText;
const formData = new FormData();
formData.append('text', textInput);
// Highlight the entire text while speaking
document.getElementById('editableText').classList.add('highlight');
const response = await fetch('/speak', {
method: 'POST',
body: formData
});
const audioUrl = URL.createObjectURL(await response.blob());
const audioPlayer = document.getElementById('audioPlayer');
audioPlayer.src = audioUrl;
// Play the audio
audioPlayer.play();
// Remove highlight after audio ends
audioPlayer.onended = function () {
document.getElementById('editableText').classList.remove('highlight');
};
});
Код: Выделить всё
from flask import Flask, render_template, request, send_file
from gtts import gTTS
import io
app = Flask(__name__)
# Route for homepage
@app.route('/')
def index():
return render_template('index.html')
# Route to handle text-to-speech
@app.route('/speak', methods=['POST'])
def speak():
text = request.form['text']
lang = request.form.get('language', 'en') # Default language is English
# Generate speech with gTTS and store in memory using BytesIO
tts = gTTS(text=text, lang=lang)
audio_io = io.BytesIO()
tts.write_to_fp(audio_io)
audio_io.seek(0) # Reset the pointer to the start of the file
# Send the in-memory file as a response
return send_file(audio_io, mimetype='audio/mpeg', as_attachment=False, download_name='output.mp3')
if __name__ == "__main__":
app.run(debug=True)
Подробнее здесь: https://stackoverflow.com/questions/790 ... -deep-fake