Ola chat, melhore esse design de site usando bootstrap deixando mais elegante e UI/UX para o meu projecto tts: <!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conversor de Texto para Áudio</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .bg-custom {
            background: url('https://i.pinimg.com/originals/7a/c7/fc/7ac7fc820276a75d1baa05aa2d212330.png') no-repeat center center fixed;
            background-size: cover;
            color: #333;
        }

        .container-bg {
            background-color: rgba(255, 255, 255, 0.5); /* Camada transparente */
            border-radius: 10px;
            padding: 20px;
            margin-top: 50px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }

        .loading-indicator {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }

        .api-response {
            margin-top: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            white-space: pre-wrap;
        }

        .pulse {
            animation: pulse-animation 1.5s infinite ease-in-out;
        }

        @keyframes pulse-animation {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>

<body class="bg-custom">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Conversor de Texto para Áudio</a>
        </nav>
        <div class="container-bg">
            <div class="row">
                <aside class="col-lg-3 sidebar">
                    <h3>Informações sobre as Versões da API:</h3>
                    <ul class="list-unstyled">
                        <li>Versão 1: Apenas converte texto para áudio.</li>
                        <li>Versão 2: Converte texto para áudio e salva referência no DynamoDB.</li>
                        <li>Versão 3: Converte texto para áudio, verifica no DynamoDB e retorna URL se existir.</li>
                    </ul>
                    <div id="apiOutput" class="api-response"></div>
                </aside>
                <main class="col-lg-9">
                    <h1 class="mt-5 mb-4">Conversor de Texto para Áudio</h1>
                    <div class="form-group">
                        <label for="texto">Digite o texto:</label>
                        <textarea class="form-control" id="texto" rows="4"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="versaoApi">Escolha a versão:</label>
                        <select class="form-control" id="versaoApi">
                            <option value="v1/tts">Versão 1</option>
                            <option value="v2/tts">Versão 2</option>
                            <option value="v3/tts">Versão 3</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" id="btnConverter"><i class="fas fa-play"></i> Converter em Áudio</button>
                    <!-- Div para exibir a resposta da API -->
                    <div id="respostaApi" class="mt-4 api-response d-none"></div>
                    <!-- Player de áudio para reproduzir o áudio gerado -->
                    <audio controls id="audioPlayer" class="d-none">
                        <source id="audioSource" src="" type="audio/mpeg">
                        Seu navegador não suporta a tag de áudio.
                    </audio>
                    <!-- Indicador de processamento -->
                    <div class="loading-indicator d-none pulse">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">A processar...</span>
                        </div>
                        <p class="mt-2">A processar...</p>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnConverter").click(function () {
                var textoParaConverter = $("#texto").val();
                var versaoApi = $("#versaoApi").val();
                var apiUrl = "https://1tmj5amd46.execute-api.us-east-1.amazonaws.com/" + versaoApi;

                // Exibir indicador de processamento
                $(".loading-indicator").removeClass('d-none');

                // Faz a requisição POST para a API
                $.ajax({
                    url: apiUrl,
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({ "phrase": textoParaConverter }),
                    success: function (response) {
                        console.log("Resposta da API:", response);
                        // Exibir a resposta da API na div
                        $("#respostaApi").html(`<p>Resposta da API:</p><pre>${JSON.stringify(response, null, 2)}</pre>`);
                        // Usando expressão regular para extrair o link do áudio da resposta
                        const audioUrlRegex = /https:\/\/.*\.mp3/;
                    const match = response.match(audioUrlRegex);
                    if (match) {
                        const urlAudio = match[0];
                        $("#audioPlayer").attr("src", urlAudio).removeClass('d-none');
                        $("#audioPlayer")[0].load();
                        $("#audioPlayer")[0].play();
                    } else {
                        console.log("Erro: Link do áudio não encontrado na resposta");
                        alert("Link do áudio não encontrado na resposta.");
                    }
                    // Esconder indicador de processamento
                    $(".loading-indicator").addClass('d-none');
                },
                error: function (xhr, status, error) {
                    console.error("Erro na requisição: ", status, error);
                    // Exibir erro na div de resposta
                    $("#respostaApi").html(`<p>Erro na requisição:</p><pre>Status: ${status}\nError: ${error}</pre>`);

                    // Esconder indicador de processamento em caso de erro
                    $(".loading-indicator").addClass('d-none');
                }
            });
        });
    });
</script>