diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9d022a5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,18 @@
+# Ignorar a pasta do ambiente virtual
+venv/
+
+# Ignorar arquivos de configuração do VS Code
+.vscode/
+
+# Ignorar cache do Python
+__pycache__/
+*.py[cod]
+
+# Ignorar logs, arquivos temporários e de sistema
+*.log
+*.tmp
+.DS_Store
+
+# Ignorar arquivos de dependências que podem ser gerados automaticamente
+*.env
+.env
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7ff9c4b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,24 @@
+# AudioVision
+
+**AudioVision** is a web app designed to support individuals with hearing impairments by converting audio files into text and visual representations. Using audio processing and AI, the application not only transcribes audio but also generates graphical sound wave visualizations and provides insightful analyses of the transcribed content.
+
+### Features
+
+- **Audio Transcription**: Upload audio files in various formats, such as `.ogg` and `.wav`, to receive an accurate text transcription of the spoken content.
+- **Waveform Visualization**: View a graphical representation of sound waves, offering a visual way to understand the characteristics of the audio.
+- **Content Analysis**: Leverage AI to interpret the transcription, generating summaries and contextual insights tailored for enhanced clarity and accessibility.
+
+### Technologies Used
+
+- **Flask** for the application backend
+- **Librosa and Matplotlib** for waveform visualizations
+- **SpeechRecognition** for audio transcription
+- **Google Generative AI** for intelligent summaries and contextual analysis of audio content
+
+### How to Use
+
+1. Upload an audio file on the main page.
+2. The app converts the audio to text, displays the transcription, and shows a representative waveform.
+3. Optionally, view an AI-driven analysis of the content for broader understanding of the transcribed audio.
+
+> AudioVision was created to make auditory information more accessible through visual and textual formats, fostering inclusion and accessibility for individuals with hearing loss.
\ No newline at end of file
diff --git a/main.py b/main.py
new file mode 100644
index 0000000..44263f3
--- /dev/null
+++ b/main.py
@@ -0,0 +1,150 @@
+#!/usr/bin/env python3
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from os import path, makedirs, remove, listdir
+from uuid import uuid4
+import speech_recognition as sr
+from pydub import AudioSegment
+from base64 import b64encode
+from io import BytesIO
+import matplotlib.pyplot as plt
+from librosa import load
+import librosa.display
+import google.generativeai as genai
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+CORS(app)
+app.config["UPLOAD_FOLDER"] = "uploads/"
+if not path.exists(app.config["UPLOAD_FOLDER"]):
+    makedirs(app.config["UPLOAD_FOLDER"])
+
+gemini_api_key = ""
+genai.configure(api_key=gemini_api_key)
+model = genai.GenerativeModel("gemini-1.5-flash")
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/transcribe", methods=["POST"])
+def transcribe():
+    if "audio" not in request.files:
+        return jsonify({"error": "Nenhum arquivo foi enviado."}), 400
+
+    file = request.files["audio"]
+    if file.filename == "":
+        return jsonify({"error": "Nenhum arquivo selecionado."}), 400
+
+    filename = secure_filename(file.filename)
+    audio_path = path.join(app.config["UPLOAD_FOLDER"], filename)
+
+    try:
+        file.save(audio_path)
+    except Exception as e:
+        return jsonify({"error": "Erro ao salvar o arquivo.", "details": str(e)}), 500
+
+    try:
+        if filename.endswith(".ogg"):
+            audio = AudioSegment.from_ogg(audio_path)
+            wav_path = audio_path.replace(".ogg", ".wav")
+            audio.export(wav_path, format="wav")
+            if not path.exists(wav_path):
+                return jsonify({"error": "Erro na conversão do arquivo."}), 500
+        else:
+            wav_path = audio_path
+
+        transcription = transcribe_audio(wav_path)
+        plot_base64 = generate_waveform(wav_path)
+        unique_id = str(uuid4())
+
+        if path.exists(audio_path):
+            remove(audio_path)
+        if filename.endswith(".ogg") and path.exists(wav_path):
+            remove(wav_path)
+
+        response_data = {
+            "transcription": transcription,
+            "plot": plot_base64,
+            "id": unique_id,
+        }
+
+        clear_uploads()
+        return jsonify(response_data)
+
+    except Exception as e:
+        return (
+            jsonify({"error": "Erro ao processar o arquivo.", "details": str(e)}),
+            500,
+        )
+
+
+@app.route("/analyze", methods=["POST"])
+def analyze():
+    data = request.get_json()
+    transcription = data.get("transcription", "")
+    if not transcription:
+        return jsonify({"error": "Texto de transcrição ausente."}), 400
+
+    analysis_result = analyze_transcription(transcription)
+    return jsonify({"analysis": analysis_result})
+
+
+def clear_uploads():
+    for filename in listdir(app.config["UPLOAD_FOLDER"]):
+        file_path = path.join(app.config["UPLOAD_FOLDER"], filename)
+        try:
+            if path.isfile(file_path):
+                remove(file_path)
+        except Exception as e:
+            print(f"Erro ao tentar remover o arquivo {file_path}: {e}")
+
+
+def transcribe_audio(wav_path: str) -> str:
+    recognizer = sr.Recognizer()
+    with sr.AudioFile(wav_path) as source:
+        audio_data = recognizer.record(source)
+        try:
+            return recognizer.recognize_google(audio_data, language="pt-BR")
+        except sr.UnknownValueError:
+            return "Não foi possível entender o áudio."
+        except sr.RequestError as e:
+            return f"Erro ao conectar ao serviço de reconhecimento de fala: {e}"
+
+
+def analyze_transcription(transcription: str) -> str:
+    prompt = (
+        f"Você é um assistente inteligente. O texto a seguir é uma transcrição de áudio "
+        f'que pode conter erros. Tente entender e resumir o conteúdo: "{transcription}"'
+    )
+    try:
+        response = model.generate_content(prompt)
+        if response and response.candidates:
+            candidate = response.candidates[0]
+            gemini_response = "".join(part.text for part in candidate.content.parts)
+            return gemini_response
+        else:
+            return "Desculpe, não consegui analisar a transcrição."
+    except Exception as e:
+        return f"Erro ao tentar analisar a transcrição: {e}"
+
+
+def generate_waveform(audio_path: str) -> str:
+    y, sr = load(audio_path, sr=None)
+    plt.figure(figsize=(12, 4))
+    librosa.display.waveshow(y, sr=sr, color="white")
+    plt.axis("off")
+    buf = BytesIO()
+    plt.tight_layout()
+    plt.savefig(
+        buf, format="png", bbox_inches="tight", pad_inches=0.1, transparent=True
+    )
+    plt.close()
+    buf.seek(0)
+    return f"data:image/png;base64,{b64encode(buf.read()).decode('utf-8')}"
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=5001)
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..167c69b
Binary files /dev/null and b/requirements.txt differ
diff --git a/static/assets/Poppins-Regular.ttf b/static/assets/Poppins-Regular.ttf
new file mode 100644
index 0000000..d8a201f
Binary files /dev/null and b/static/assets/Poppins-Regular.ttf differ
diff --git a/static/assets/cursor.png b/static/assets/cursor.png
new file mode 100644
index 0000000..07614de
Binary files /dev/null and b/static/assets/cursor.png differ
diff --git a/static/assets/gemini.png b/static/assets/gemini.png
new file mode 100644
index 0000000..43cf4b7
Binary files /dev/null and b/static/assets/gemini.png differ
diff --git a/static/assets/github2.png b/static/assets/github2.png
new file mode 100644
index 0000000..f948c96
Binary files /dev/null and b/static/assets/github2.png differ
diff --git a/static/assets/icon.png b/static/assets/icon.png
new file mode 100644
index 0000000..4cd7975
Binary files /dev/null and b/static/assets/icon.png differ
diff --git a/static/assets/swipe.png b/static/assets/swipe.png
new file mode 100644
index 0000000..617d3d8
Binary files /dev/null and b/static/assets/swipe.png differ
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..18c9462
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,347 @@
+@font-face {
+  font-family: "Poppins";
+  src: url("./assets/Poppins-Regular.ttf");
+}
+
+:root {
+  --minSize: 400px;
+}
+
+html {
+  color-scheme: dark;
+  font-family: "Malgun Gothic";
+  scroll-behavior: smooth;
+}
+
+::selection {
+  background: #333;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  border: none;
+  outline: none;
+  font-family: "Poppins", "Malgun Gothic";
+  cursor: url("./assets/cursor.png"), auto;
+}
+
+body {
+  min-width: var(--minSize);
+  min-height: 100vh;
+  background: #181a1b;
+  overflow: hidden;
+  scroll-snap-type: y mandatory;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+section {
+  padding-inline: 40px;
+  min-width: var(--minSize);
+  height: 100vh;
+  scroll-snap-align: start;
+  overflow: hidden;
+  position: relative;
+}
+
+.home {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.content {
+  max-width: 740px;
+  margin-inline: auto;
+  min-height: 500px;
+}
+
+.home .content {
+  display: grid;
+  place-content: center;
+  height: 100%;
+  padding-bottom: 30px;
+}
+
+.home nav *::selection {
+  background: none;
+}
+
+.home h1 {
+  max-width: 700px;
+  min-width: 300px;
+  width: 54vw;
+  font-size: clamp(2em, 3.5em, 4vw);
+  line-height: 1em;
+  margin-bottom: 7px;
+}
+
+.home .button_upload {
+  margin-top: 10px;
+  max-width: 100px;
+}
+
+small {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+i {
+  font-size: .8em;
+  min-width: 300px;
+}
+
+.gradient_container {
+  width: 70vw;
+  height: 100vh;
+  display: flex;
+  flex-wrap: wrap;
+  animation: rtt 180s linear infinite;
+  position: absolute;
+  left: -190px;
+  bottom: -480px;
+  z-index: -1;
+}
+
+@keyframes rtt {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.box {
+  width: 50%;
+  height: 50%;
+  filter: blur(150px);
+}
+
+.box:nth-child(1) {
+  background: #4f4954;
+}
+
+.box:nth-child(2) {
+  background: rgb(79, 78, 84);
+}
+
+.box:nth-child(3) {
+  background: #3d383e;
+}
+
+.box:nth-child(4) {
+  background: #60636a;
+}
+
+nav {
+  min-width: var(--minSize);
+  padding: 40px 10px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.button_upload {
+  background: #ffffff;
+  color: #111;
+  border-radius: 20px;
+  padding: 5px 14px;
+  font-size: .9em;
+  font-weight: bold;
+  white-space: nowrap;
+  height: 32px;
+  text-align: center;
+}
+
+.button_upload:active{
+  scale: .98;
+}
+
+.button_upload_loading {
+  background:
+    linear-gradient(90deg, #0001 33%, #0005 50%, #0001 66%) #f2f2f2;
+  background-size: 300% 100%;
+  animation: l1 1s infinite linear;
+}
+
+@keyframes l1 {
+  0% {
+    background-position: right
+  }
+}
+
+.home nav {
+  justify-content: start;
+}
+
+.size {
+  margin: 10px;
+  font-size: .8em;
+  height: 30px;
+}
+
+ul {
+  min-width: var(--minSize);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  height: 80vh;
+  margin-top: 15px;
+}
+
+li {
+  padding: 20px 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+li:hover {
+  border: none;
+  background: #333;
+  border-radius: 20px;
+}
+
+.top {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 7px;
+  flex-wrap: wrap;
+}
+
+.top button {
+  opacity: .4;
+  height: 18px;
+  width: 18px;
+  background: none;
+}
+
+.top button:hover {
+  opacity: 1;
+}
+
+.audio {
+  display: flex;
+  align-items: center;
+  margin-left: -7px;
+  background: #212121;
+  width: 230px;
+  height: 45px;
+  border-radius: 30px;
+  padding: 3px 12px;
+}
+
+.audio button {
+  background: none;
+  font-size: 1.2em;
+  width: 30px;
+  height: 30px;
+  margin-top: -3px;
+}
+
+.audioControl {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.imgControl {
+  position: relative;
+  width: 180px;
+  height: 30px;
+  border: none;
+}
+
+.imgControl * {
+  border: none;
+}
+
+.img-comp-img {
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+}
+
+.control {
+  opacity: .5;
+}
+
+.img-comp-slider {
+  --size: 10px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 9;
+  cursor: url("./assets/swipe.png"), auto;
+  width: var(--size);
+  height: var(--size);
+  background: #53bdeb;
+  border-radius: 10px;
+}
+
+.audioControl span {
+  font-size: .8em;
+  font-weight: bold;
+}
+
+.result::first-letter {
+  text-transform: uppercase;
+}
+
+.GeminiArea {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  align-items: start;
+}
+
+.GeminiArea span{
+  font-weight: normal;
+  font-style: normal;
+  display: inline;
+  font-size: .9em;
+}
+
+.aiContext {
+  border-left: 4px solid #666;
+  padding-left: 10px;
+  margin: 6px 0 10px;
+  font-size: .9em;
+}
+
+.modelName {
+  transition: .3s;
+  font-style: italic;
+  color: #fff;
+  text-decoration: none;
+  font-size: .9em;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.audioNav{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.gem{
+  width: 40px;
+  height: 40px;
+  border-radius: 50px;
+  display: grid;
+  place-content: center;
+  background: #212121;
+}
+
+.gem img{
+  image-rendering: crisp-edges;
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..ed1e938
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AudioVision</title>
+    <link rel="icon" href="{{ url_for('static', filename='assets/icon.png')}}" type="image/x-icon">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+    <section class="home">
+        <nav>
+            <img src="{{ url_for('static', filename='assets/icon.png')}}" alt="logo" width="30">
+            <p>AudioVision</p>
+        </nav>
+        <div class="content">
+            <h1>Convert sound to meaning with one click.</h1>
+            <i>— Capture the sound and watch your words come to life.</i>
+            <input type="file" id="start" accept="audio/ogg" onchange="handleFiles(event)" hidden>
+            <label for="start" class="button_upload">
+                Try Now</label>
+        </div>
+        <small>you can drop an audio file anywhere on the page</small>
+        <div class="gradient_container">
+            <span class="box"></span>
+            <span class="box"></span>
+            <span class="box"></span>
+            <span class="box"></span>
+        </div>
+    </section>
+    <section class="transcriptionsList">
+        <div class="content">
+            <nav>
+                <h1>Your transcriptions</h1>
+                <input type="file" id="file-input" accept="audio/ogg" onchange="handleFiles(event)" hidden>
+                <label for="file-input" class="button_upload">Select file</label>
+            </nav>
+            <strong class="size"></strong>
+            <ul id="history-list"></ul>
+        </div>
+    </section>
+
+    <script>
+        const fileInputStart = document.getElementById('start');
+        const fileInput = document.getElementById('file-input');
+        const historyList = document.getElementById('history-list');
+        const memory = document.querySelector('.size');
+        const uploadButtons = document.querySelectorAll('.button_upload');
+        let isProcessing = false;
+
+        document.addEventListener("contextmenu", e => e.preventDefault());
+
+        fileInputStart.addEventListener('change', (e) => {
+            e.preventDefault();
+            handleFiles(e);
+        });
+        fileInput.addEventListener('change', (e) => {
+            e.preventDefault();
+            handleFiles(e);
+        });
+
+        document.body.addEventListener('dragover', e => e.preventDefault());
+
+        document.body.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].type === "audio/ogg") {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(files[0]);
+                fileInput.files = dataTransfer.files;
+                handleFiles({ target: fileInput });
+            }
+        });
+
+        async function handleFiles(e) {
+            if (isProcessing) return;
+
+            isProcessing = true;
+            const input = e.target;
+            const file = input.files[0];
+            const button = document.querySelector(`label[for="${input.id}"]`);
+
+            if (!file || file.type !== "audio/ogg") {
+                button.classList.remove('button_upload_loading');
+                isProcessing = false;
+                return;
+            }
+
+            document.body.style.pointerEvents = "none";
+            const { base64, size, name } = await convertToBase64(file);
+            const uniqueId = generateRandomId();
+            const formData = new FormData();
+            formData.append('audio', file);
+            fetch('http://127.0.0.1:5001/transcribe', {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Erro na resposta do servidor: ${response.statusText}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.transcription) {
+                        saveToLocalStorage(uniqueId, {
+                            transcription: data.transcription,
+                            plot: data.plot,
+                            analysis_ai: null,
+                            timestamp: Date.now(),
+                            file: {
+                                name: name,
+                                size: size,
+                                data: base64
+                            }
+                        });
+                        renderHistory();
+                        calcularEspacoRestante();
+                    }
+                })
+                .catch(error => {
+                    console.error('Erro ao enviar o arquivo:', error);
+                })
+                .finally(() => {
+                    isProcessing = false;
+                    document.body.style.pointerEvents = "auto";
+                });
+        }
+
+        async function sendToAnalyzeEndpoint(id, transcription) {
+            try {
+                const response = await fetch('http://127.0.0.1:5001/analyze', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ transcription })
+                });
+                const data = await response.json();
+                if (data.analysis) {
+                    updateLocalStorage(id, { analysis_ai: data.analysis });
+                    renderHistory();
+                    animate(id)
+                }
+            } catch (error) {
+                console.error('Erro ao enviar a transcrição para análise da IA:', error);
+            }
+        }
+
+        function homeLoad() {
+            let audioHistory = JSON.parse(localStorage.getItem('audioHistory')) || {};
+            if (Object.keys(audioHistory).length === 0) {
+                window.scrollTo(0, 0);
+                document.body.style.overflow = "hidden";
+            }
+        }
+
+        function saveToLocalStorage(uniqueId, itemData) {
+            let audioHistory = JSON.parse(localStorage.getItem('audioHistory')) || {};
+            audioHistory[uniqueId] = itemData;
+            localStorage.setItem('audioHistory', JSON.stringify(audioHistory));
+        }
+
+        function updateLocalStorage(uniqueId, updatedData) {
+            let audioHistory = JSON.parse(localStorage.getItem('audioHistory')) || {};
+            if (audioHistory[uniqueId]) {
+                audioHistory[uniqueId] = { ...audioHistory[uniqueId], ...updatedData };
+                localStorage.setItem('audioHistory', JSON.stringify(audioHistory));
+            }
+        }
+
+        function removeHistoryItem(key) {
+            let audioHistory = JSON.parse(localStorage.getItem('audioHistory')) || {};
+            if (audioHistory[key]) {
+                delete audioHistory[key];
+                localStorage.setItem('audioHistory', JSON.stringify(audioHistory));
+            }
+            renderHistory();
+            calcularEspacoRestante();
+            homeLoad()
+        }
+
+        function animate(id) {
+            const transcriptionElement = document.getElementById(`transcription-${id}`);
+            const GeminiModelUsed = document.getElementById(`model-${id}`);
+            animateTextTyping(transcriptionElement, GeminiModelUsed);
+        }
+
+        function renderHistory() {
+            document.documentElement.style.scrollSnapType = "y mandatory";
+            document.body.style.scrollSnapType = "y mandatory";
+            if (localStorage.getItem("audioHistory")) window.scrollTo(0, document.body.scrollHeight);
+            historyList.innerHTML = "";
+            const audioHistory = JSON.parse(localStorage.getItem("audioHistory")) || {};
+            const items = Object.entries(audioHistory).map(([key, value]) => ({ key, value }));
+            if (!items.length) return;
+            items.sort((a, b) => b.value.timestamp - a.value.timestamp);
+            items.forEach((item, index) => {
+                const value = item.value;
+                const listItem = document.createElement('li');
+                const audioId = `audioPlayer-${index}`;
+                const buttonId = `toggleButton-${index}`;
+                const buttonGemId = `gemini-${item.key}`;
+                const delButtonId = `delete-${index}`;
+
+                const GeminiAnalysisContent = value?.analysis_ai ? `
+                    <p class="aiContext" id="transcription-${item.key}">${value?.analysis_ai}</p>
+                    <a href="https://gemini.google.com/" target="_blank" class="modelName" id="model-${item.key}">— Gemini 1.5 Flash
+                        <img src="static/assets/gemini.png" alt="GeminiAnalysis" width="15"></a>`
+                    : "";
+
+                const resumButton = !value?.analysis_ai ? `
+                    <button type="button" class="gem" title="Generate a summary for this transcript using Google Gemini 1.5 Flash"
+                        id="${buttonGemId}">
+                        <img src="static/assets/gemini.png" alt="GeminiAnalysis" width="20">
+                    </button>`
+                    : ""
+
+                listItem.innerHTML = `
+                    <div class="audioControl">   
+                        <div class="top">
+                            <span class="name">${value?.file?.name}</span>
+                            <button id="${delButtonId}" type="button" title="Delete ${value?.file?.name} Transcription">⃠</button>
+                        </div>
+                        <div class="audioNav">
+                           <div class="audio">
+                                <button id="${buttonId}" type="button">▶</button>
+                                <div class="imgControl">
+                                    <div class="img-comp-img">
+                                        <img src="${value?.plot}" alt="Gráfico de Frequência" class="control" width="180" height="30">
+                                    </div>
+                                    <div class="img-comp-img img-comp-overlay">
+                                        <img src="${value?.plot}" alt="Gráfico de Frequência" class="base" width="180" height="30">
+                                    </div>
+                                </div>
+                                <audio id="${audioId}">
+                                    <source src="data:audio/ogg;base64,${value?.file?.data}" type="audio/ogg">
+                                    Seu navegador não suporta o elemento de áudio.
+                                </audio>
+                            </div>
+                            ${resumButton}
+                        </div>
+                        <p class="result">${value?.transcription}</p>
+                        <div class="GeminiArea">${GeminiAnalysisContent}</div>
+                    </div>
+                `;
+
+                historyList.appendChild(listItem);
+                const deleteButton = document.getElementById(delButtonId);
+                deleteButton.addEventListener('click', () => removeHistoryItem(item.key));
+            });
+            addAudioEventListeners();
+            document.body.style.pointerEvents = "auto";
+            document.body.style.overflow = "auto";
+            initComparisons();
+            geminiResumListeners();
+            uploadButtons.forEach(button => {
+                button.classList.remove('button_upload_loading');
+            });
+        }
+
+        function geminiResumListeners() {
+            const audioHistory = JSON.parse(localStorage.getItem("audioHistory")) || {};
+            const items = Object.entries(audioHistory).map(([key, value]) => ({ key, value }));
+            document.querySelectorAll(".gem").forEach(btn => {
+                btn.addEventListener("click", () => {
+                    const id = btn.id.split("-").pop();
+                    const item = items.find(({ key }) => key === id);
+                    const transcriptionFound = item.value.transcription
+                    sendToAnalyzeEndpoint(id, transcriptionFound)
+                })
+            })
+        }
+
+        function convertToBase64(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const base64 = reader.result.split(',')[1];
+                    resolve({
+                        base64,
+                        size: file.size,
+                        name: file.name
+                    });
+                };
+                reader.onerror = error => reject(error);
+                reader.readAsDataURL(file);
+            });
+        }
+
+        function generateRandomId(length = 10) {
+            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            let result = '';
+            for (let i = 0; i < length; i++) {
+                result += characters.charAt(Math.floor(Math.random() * characters.length));
+            }
+            return result;
+        }
+
+        const limite_total = 1 * 1024 * 1024 * 1024;
+
+        function calcularEspacoRestante() {
+            const audioHistory = JSON.parse(localStorage.getItem('audioHistory')) || {};
+            let totalUsado = Object.values(audioHistory).reduce((total, item) => {
+                return item.file && item.file.size ? total + item.file.size : total;
+            }, 0);
+
+            const totalRestante = limite_total - totalUsado;
+            let displayText;
+
+            if (totalRestante >= 1024 * 1024 * 1024) {
+                const totalRestanteGB = totalRestante / (1024 * 1024 * 1024);
+                displayText = `${totalRestanteGB.toFixed(2)} GB`;
+            } else if (totalRestante >= 1024 * 1024) {
+                const totalRestanteMB = totalRestante / (1024 * 1024);
+                displayText = `${totalRestanteMB.toFixed(2)} MB`;
+            } else if (totalRestante >= 1024) {
+                const totalRestanteKB = totalRestante / 1024;
+                displayText = `${totalRestanteKB.toFixed(2)} KB`;
+            } else {
+                displayText = `${totalRestante.toFixed(2)} bytes`;
+            }
+            memory.textContent = `Total space remaining: ${displayText}`;
+        }
+
+        function toggleUploadButtonEffect(event) {
+            const button = event.target;
+            button.classList.toggle('button_upload_loading');
+        }
+
+        uploadButtons.forEach(button => {
+            button.addEventListener('click', toggleUploadButtonEffect);
+            fileInputStart.addEventListener("cancel", (event) => {
+                button.classList.remove('button_upload_loading');
+            })
+            fileInput.addEventListener("cancel", (event) => {
+                button.classList.remove('button_upload_loading');
+            })
+        });
+
+        const animateTextTyping = (node, model) => {
+            const text = node.textContent;
+            const chars = text.split("");
+            node.innerHTML = "";
+            let i = 0;
+            const addNextChar = (i) => {
+                let nextChar = chars[i] === "\n" ? "<br>" : chars[i];
+                node.innerHTML += "<span>" + nextChar + "</span>";
+                if (i < chars.length - 1) {
+                    setTimeout(() => addNextChar(i + 1), 10 + Math.random() * 50);
+                } else {
+                    setTimeout(() => 10 + Math.random() * 80);
+                }
+            };
+            addNextChar(i);
+        };
+
+        function addAudioEventListeners() {
+            const toggleButtons = document.querySelectorAll('.audio button');
+            toggleButtons.forEach(toggleButton => {
+                toggleButton.addEventListener('click', () => {
+                    const i_ = toggleButton.id.split("-")[1]
+                    const audioPlayer = document.querySelector(`#audioPlayer-${i_}`);
+                    audioPlayer.paused ? audioPlayer.play() : audioPlayer.pause();
+                    toggleButton.textContent = audioPlayer.paused ? '▶' : '❚❚';
+                    audioPlayer.addEventListener('ended', () => {
+                        toggleButton.textContent = '▶';
+                        resetSliderAndAudio(audioPlayer, i_);
+                    });
+                })
+            });
+        }
+
+        function resetSliderAndAudio(audioPlayer, index) {
+            const imgOverlay = document.querySelectorAll('.img-comp-overlay')[index];
+            const slider = imgOverlay.previousElementSibling;
+            imgOverlay.style.width = "0px";
+            slider.style.left = "5px";
+            audioPlayer.currentTime = 0;
+        }
+
+        function initComparisons() {
+            let x, i;
+            x = document.getElementsByClassName("img-comp-overlay");
+            for (i = 0; i < x.length; i++) compareImages(x[i], i);
+            function compareImages(img, index) {
+                let slider, clicked = 0, w, h;
+                w = img.offsetWidth;
+                h = img.offsetHeight;
+                img.style.width = "0px";
+                slider = document.createElement("DIV");
+                slider.setAttribute("class", "img-comp-slider");
+                img.parentElement.insertBefore(slider, img);
+                slider.style.left = "5px";
+                const audioPlayer = document.querySelector(`#audioPlayer-${index}`);
+                slider.addEventListener("mousedown", slideReady);
+                window.addEventListener("mouseup", slideFinish);
+                slider.addEventListener("touchstart", slideReady);
+                window.addEventListener("touchend", slideFinish);
+                audioPlayer.addEventListener("timeupdate", updateSliderPosition);
+
+                audioPlayer.addEventListener("loadedmetadata", () => {
+                    img.style.width = "0px";
+                    slider.style.left = "5px";
+                });
+
+                function slideReady(e) {
+                    e.preventDefault();
+                    clicked = 1;
+                    window.addEventListener("mousemove", slideMove);
+                    window.addEventListener("touchmove", slideMove);
+                }
+
+                function slideFinish() {
+                    clicked = 0;
+                    window.removeEventListener("mousemove", slideMove);
+                    window.removeEventListener("touchmove", slideMove);
+                }
+
+                function slideMove(e) {
+                    let pos;
+                    if (clicked == 0) return false;
+                    pos = getCursorPos(e);
+                    if (pos < 5) pos = 5;
+                    if (pos > w - 5) pos = w - 5;
+                    slide(pos);
+                }
+
+                function getCursorPos(e) {
+                    let a, x = 0;
+                    e = (e.changedTouches) ? e.changedTouches[0] : e;
+                    a = img.getBoundingClientRect();
+                    x = e.pageX - a.left;
+                    x = x - window.pageXOffset;
+                    return x;
+                }
+
+                function slide(x) {
+                    img.style.width = x + "px";
+                    slider.style.left = x - (slider.offsetWidth / 2) + "px";
+                    const percent = x / (w - 10);
+                    audioPlayer.currentTime = percent * audioPlayer.duration;
+                }
+
+                function updateSliderPosition() {
+                    const percent = audioPlayer.currentTime / audioPlayer.duration;
+                    img.style.width = percent * (w - 10) + "px";
+                    slider.style.left = img.offsetWidth + 5 - (slider.offsetWidth / 2) + "px";
+                }
+            }
+        }
+
+        window.onload = function () {
+            renderHistory();
+            calcularEspacoRestante();
+            homeLoad()
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file