A I Music Generator - Copy this React, Tailwind Component to your project
Design-the-UI-for-AI-music-generator,-including-a-field-to-for-user-to-enter-description,-there-will-be-an-example-description-as-placeholder,-also-there-is-a-small-button-'Tab'-at-the-corner-of-the-field,-when-user-click-tab-or-click-'Tab'-button-the-example-description-will-be-filled,-at-the-other-corner-of-the-field-there-will-be-text-to-indicate-the-number-of-chatacters-typed-(like-32/1000,-with-1000-is-the-maximum-character-can-be-typed),-and-also-have-a-button-clear-to-clear-the-input.-Also-there-is-a-slider-for-the-duration-of-the-output-music-(min-duration-is-5s-and-max-duration-is-15s),-user-can-drag-or-click-anywhere-in-the-slider-to-change-duration-of-output,-the-part-of-slider-on-the-left-and-on-the-right-of-the-slider-thumb-must-have-different-colors.-Also,-a-button-'Generate'-is-necessary,-when-clicking-it-the-api-will-be-called-to-generate-music.-there-also-have-a-space-for-output-music,-display-as-a-player-which-can-be-played,-paused,-modify-progress-bar-(time-bar),-change-playback-speed-and-download.-The-time-in-the-player-must-fit-the-time-slider.-Before-generating-this-space-will-be-added-some-graphics-to-notify-user-that-generated-music-will-display-at-this-position.-Make-sure-to-add-responsive-for-multiple-devices.-The-overall-must-look-fine,-attractive-and-work-well-on-dark-background
