Text-to- Speech Tool - Copy this Html, Bootstrap Component to your project

Design an Interface for a Text to Speech Tool Layout: Area 1: A text input box that allows unlimited characters and is expandable. Include a real time character counter that updates as the user types. The "Generate" button should be positioned near this text box. Below the text box, there should be an mp3 player area with a "Download" button to download the generated audio. Area 2 (User Info): Display the user's ID, the service package in use (options: Free, Pro, Premium). Show the number of characters used and the total characters available for the current service package. Include buttons for "Logout" and "Change Password." Area 3 (Settings): Language Selection: A manual input field to enter the language. Voice Selection: A button labeled "View Options" to open a pop up window showing available voices. In the pop up, each voice should be displayed with the following details: Voice Name Voice ID Gender Age Characteristics An audio player for a voice demo A "Select Voice" button, which fills the voice ID into the settings area and closes the pop up automatically. The pop up should support displaying up to 10 voices per page, with multiple pages available for navigation. Include a search box to filter voices by name and filters for language, gender, and age. Model Selection: A drop down list to select the model. Stability Parameter: A slider with values ranging from 0 to 1 (step 0.1). A manual input option, with the default value set at 0.5. Similarity Enhancement Parameter: A slider with values ranging from 0 to 1 (step 0.1). A manual input option, with the default value set at 0.75. The sliders for both "Stability" and "Similarity Enhancement" should be placed parallel to each other, aligned at the same position for consistency.