welcome to 2024 Technical Documentation! exist Part 6we explore how to use Flask framework. This interface acts as a front-end Voice Changing Artificial Intelligenceallowing users to enter text, upload message files, and download processing results. This guide explains Flask basics, analyzes the provided code, and helps you build your first Flask application.
What is a flask?
flask It is a lightweight Python web framework that allows developers to build web applications quickly and efficiently. It is an excellent choice for small to medium-sized projects.
Key features of Flask:
- Simple: Keeps the core simple and lets you add features as needed.
- flexible: Provides the freedom to build applications.
- Expandable: Supports multiple expansions such as identity authentication and database.
Set up flask
Install
Install Flask using pip:
pip install flask
Basic flask application
Here is a simple Flask app:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return "Hello, Flask!"
if __name__ == '__main__':
app.run(debug=True)
-
@app.route: Map the URL to a specific function. -
app.run(debug=True): Run the application in debug mode for easy testing.
Implement Web interface using Flask
In this web interface, the Flask application handles Voice Changing Artificial Intelligence Workflow:
- receive user input: Accepts audio or text and optional speaker sample audio.
- Process input: Pass input to the Vocalshift backend.
- Provide output: Send the generated message back to the user.
Step 1: Configure the application
from flask import Flask, render_template, request, send_file, redirect, url_for, flash
from werkzeug.utils import secure_filename
import os
from main import process_tts
from vocalshift import vocal_shift
app = Flask(__name__)
app.secret_key = 'supersecretkey'
UPLOAD_FOLDER = 'uploads'
OUTPUT_FOLDER = 'output'
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
os.makedirs(OUTPUT_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['OUTPUT_FOLDER'] = OUTPUT_FOLDER
- Upload and export: Separate directories store uploaded files and output.
-
os.makedirs(): Make sure the directory exists.
Step 2: Handle the homepage backend
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
text = request.form.get('text')
language = request.form.get('language', 'en')
speaker_file = request.files.get('speaker')
audio_file = request.files.get('audio')
output_filename = 'output.wav'
output_path = os.path.join(app.config['OUTPUT_FOLDER'], output_filename)
speaker_path = None
if speaker_file:
speaker_filename = secure_filename(speaker_file.filename)
speaker_path = os.path.join(app.config['UPLOAD_FOLDER'], speaker_filename)
speaker_file.save(speaker_path)
if audio_file:
audio_filename = secure_filename(audio_file.filename)
audio_path = os.path.join(app.config['UPLOAD_FOLDER'], audio_filename)
audio_file.save(audio_path)
success = vocal_shift(
input_audio=audio_path,
output_audio=output_path,
stt_model_size='base',
speaker=speaker_path,
effect=None,
effect_level=1.0
)
else:
if not text:
flash('Text is required!', 'danger')
return redirect(url_for('index'))
# Perform TTS conversion using main.py
success = process_tts(text, output_path, speaker_path, language)
if success:
return redirect(url_for('download_file', filename=output_filename))
else:
flash('Conversion failed', 'danger')
return redirect(url_for('index'))
return render_template('index.html')
- get: Display the homepage in HTML form.
- postal: Handles user input (text and file uploads).
-
render_template(): HTML file that renders the user interface.
Step 3: File download
@app.route('/download/
-
send_file():Send the output audio file for download. -
as_attachment=True: Ensures the archive is downloaded rather than played in the browser.
In addition, we will also add the ability to start the server if the file is currently executed by Python:
if __name__ == '__main__':
app.run(debug=True)
Create HTML interface
this is an example index.html User interface file:
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
class="mt-3">
{% for category, message in messages %}
class="alert alert-{{ category }}">{{ message }}
{% endfor %}
{% endif %}
{% endwith %}
"https://code.jquery.com/jquery-3.5.1.min.js">
$(document).ready(function() {
$('#tts-form').on('submit', function() {
$('.progress').show();
});
});
feature:
- bootstrapping integration: for styling and responsiveness.
- form elements: Accepts text input and optional speaker audio.
- flash news: Display verification and error messages.
Run the application
Start the Flask server
Run the Flask application:
python app.py
access http://127.0.0.1:5000 Access the interface in your browser.
what we have achieved today
to the end of the year Part 6you:
- Learn the basics of Flask and how to set up routing.
- Constructed a web interface for text input and file upload.
- Integrate TTS backend with Flask to process and serve user requests.
- Provides seamless download option for generated files.
Looking to the future
That’s it Change voice Project! You’ve learned a lot, from the basics of Python to building a fully functional web application. Going forward, please consider:
- hosting: Deploy your application using platforms like Heroku or AWS.
- Enhanced user interface: Use high-level frameworks such as React or Vue.js.
- New features: Realize instant voice playback.
Today’s resources
Your feedback matters!
We’d love to hear about your experiences! Share your questions, suggestions, or feedback in the comments below. Let’s keep innovating! 🚀