<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AI-ssistant</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="content">
      <h1>Hi, what can I help you with?</h1>
      <div id = "listening-graphic"> </div>
      <div id = "conversation-container"> </div>
      <button onclick="startListening()">Record</button>
      <br><br>

      <form action = "/audio-input" method = "POST">
        <textarea name="request-input" placeholder= "Type Your Question"></textarea>
        <br><br>
        <input type="submit"/>
        <br><br>
      </form>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>AI-ssistant</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="content">
      <h1>Hi, what can I help you with?</h1>
      
      <section class="main-controls">
        <canvas class="visualizer" height="60px"></canvas>
        <div id="buttons">
          <button class="record">Record</button>
          <button class="stop">Stop</button>
        </div>

        <section class="sound-clips">
        </section>
      </section>

      <div id = "listening-graphic"> </div>
      <div id = "conversation-container"> </div>
      <button onclick="startListening()">Record</button>
      <br><br>

      <form action = "/audio-input" method = "POST">
        <textarea name="request-input" placeholder= "Type Your Question"></textarea>
        <br><br>
        <input type="submit"/>
        <br><br>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Add audio wave to frontend
Add audio wave to frontend
