Please make this GUI more pleasing and organized while keep the boxy corner, you can change everything else you want, including CSS library: <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body, input, button, select {
            border-radius: 0 !important; /* Remove all rounded corners */
        }
        #image-response img {
            max-width: 100%;
            height: auto;
        }
        #input-options label {
            display: block;
            margin-bottom: 4px;
        }
        #input-options input[type="number"] {
            width: 80px;
        }
        #generating-message {
            display: none;
        }
    </style>
    <script>
        window.onload = function() {
            var connectButton = document.getElementById('connect-button');
            var generateButton = document.getElementById('generate-button');
            var serverLinkInput = document.getElementById('server-link');
            var promptInput = document.getElementById('prompt-input');
            var connectionStatus = document.getElementById('connection-status');
            var imageResponse = document.getElementById('image-response');
            var generatingMessage = document.getElementById('generating-message');
            var numOutputsInput = document.getElementById('num_outputs');
            var aspectRatioSelect = document.getElementById('aspect_ratio');
            var outputFormatSelect = document.getElementById('output_format');
            var guidanceScaleInput = document.getElementById('guidance_scale');
            var outputQualityInput = document.getElementById('output_quality');
            var negativePromptInput = document.getElementById('negative_prompt');
            var promptStrengthInput = document.getElementById('prompt_strength');
            var websocket;

            connectButton.onclick = function() {
                websocket = new WebSocket(serverLinkInput.value);
                websocket.onopen = function() {
                    connectionStatus.textContent = 'Connected';
                    promptInput.disabled = false;
                    generateButton.disabled = false;
                    numOutputsInput.disabled = false;
                    aspectRatioSelect.disabled = false;
                    outputFormatSelect.disabled = false;
                    guidanceScaleInput.disabled = false;
                    outputQualityInput.disabled = false;
                    negativePromptInput.disabled = false;
                    promptStrengthInput.disabled = false;
                };
                websocket.onclose = function() {
                    connectionStatus.textContent = 'Not Connected';
                    promptInput.disabled = true;
                    generateButton.disabled = true;
                    numOutputsInput.disabled = true;
                    aspectRatioSelect.disabled = true;
                    outputFormatSelect.disabled = true;
                    guidanceScaleInput.disabled = true;
                    outputQualityInput.disabled = true;
                    negativePromptInput.disabled = true;
                    promptStrengthInput.disabled = true;
                };
                websocket.onmessage = function(event) {
                    if (event.data.startsWith("Connected")) {
                        connectionStatus.textContent = 'Connected';
                        serverLinkInput.disabled = true;
                        connectButton.disabled = true;
                    } else if (event.data.startsWith("Error:")) {
                        alert(event.data);
                    } else {
                        // Display image URL
                        var img = document.createElement('img');
                        img.src = event.data;
                        imageResponse.appendChild(img);
                    }
                };

                // Send server link to the server
                websocket.send(serverLinkInput.value);
            };

            generateButton.onclick = function() {
                var prompt = promptInput.value;
                var numOutputs = parseInt(numOutputsInput.value);
                var aspectRatio = aspectRatioSelect.value;
                var outputFormat = outputFormatSelect.value;
                var guidanceScale = parseFloat(guidanceScaleInput.value);
                var outputQuality = parseInt(outputQualityInput.value);
                var negativePrompt = negativePromptInput.value;
                var promptStrength = parseFloat(promptStrengthInput.value);

                if (validateInputs(prompt, numOutputs, aspectRatio, outputFormat, guidanceScale, outputQuality, negativePrompt, promptStrength)) {
            generatingMessage.style.display = 'block';
            generateButton.disabled = true;

            var message = JSON.stringify({
                'prompt': prompt,
                'num_outputs': numOutputs,
                'aspect_ratio': aspectRatio,
                'output_format': outputFormat,
                'guidance_scale': guidanceScale,
                'output_quality': outputQuality,
                'negative_prompt': negativePrompt,
                'prompt_strength': promptStrength
            });
            websocket.send(message);
        } else {
            // Show error message if validation fails
            alert("Please fill in all fields correctly.");
        }
    };

            function validateInputs(prompt, numOutputs, aspectRatio, outputFormat, guidanceScale, outputQuality, negativePrompt, promptStrength) {
                if (!prompt) {
                    return false;
                }
                if (isNaN(numOutputs) || numOutputs < 1) {
                    return false;
                }
                if (isNaN(guidanceScale) || guidanceScale < 1) {
                    return false;
                }
                if (isNaN(outputQuality) || outputQuality < 0 || outputQuality > 100) {
                    return false;
                }
                if (isNaN(promptStrength) || promptStrength < 0 || promptStrength > 1) {
                    return false;
                }
                return true;
            }
        };

        websocket.onmessage = function(event) {
        if (event.data.startsWith("Connected")) {
            connectionStatus.textContent = 'Connected';
            serverLinkInput.disabled = true;
            connectButton.disabled = true;
        } else if (event.data.startsWith("Error:")) {
            alert(event.data);
        } else {
            // Display image URL
            var img = document.createElement('img');
            img.src = event.data;
            imageResponse.appendChild(img);
            generatingMessage.style.display = 'none'; // Hide the generating message
            generateButton.disabled = false; // Enable the generate button again
        }
    };
    </script>
</head>
<body class="bg-gray-100 min-h-screen p-4">
    <div class="flex items-center space-x-2 mb-4">
        <img src="https://placehold.co/30x30" alt="logo" class="w-8 h-8 bg-gray-700" />
        <h1 class="text-xl font-bold text-gray-800">ImageHX</h1>
    </div>

    <div class="flex items-center space-x-2 mb-4">
        <input type="text" id="server-link" placeholder="Enter Server Link (ws://localhost:8080)" class="w-full p-2 bg-gray-200 text-gray-700 border border-gray-300" />
        <button class="p-2 bg-blue-500 text-white flex items-center" id="connect-button" style="width: 120px;">
            <span>Connect</span>
            <svg id="loading-spinner" class="ml-2 hidden w-4 h-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C6.373 0 0 6.373 0 14h4z"></path>
            </svg>
        </button>
    </div>

    <div id="connection-status" class="text-gray-600 mb-4">Not Connected</div>

    <div class="mb-4">
        <label for="prompt-input" class="block text-gray-700 text-sm font-bold mb-2">Prompt:</label>
        <input type="text" id="prompt-input" placeholder="Type your prompt" class="w-full p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled />
    </div>

    <div id="input-options" class="mb-4">
        <label for="num_outputs" class="block text-gray-700 text-sm font-bold mb-2">Number of Images:</label>
        <input type="number" id="num_outputs" value="1" min="1" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled>

        <label for="aspect_ratio" class="block text-gray-700 text-sm font-bold mb-2">Aspect Ratio:</label>
        <select id="aspect_ratio" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled>
            <option value="16:9">16:9</option>
            <option value="1:1">1:1</option>
            <option value="4:3">4:3</option>
            <option value="3:2">3:2</option>
            <option value="16:10">16:10</option>
        </select>

        <label for="output_format" class="block text-gray-700 text-sm font-bold mb-2">Output Format:</label>
        <select id="output_format" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled>
            <option value="png">PNG</option>
            <option value="jpg">JPG</option>
        </select>

        <label for="guidance_scale" class="block text-gray-700 text-sm font-bold mb-2">Guidance Scale:</label>
        <input type="number" id="guidance_scale" value="7" min="1" step="0.1" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled>

        <label for="output_quality" class="block text-gray-700 text-sm font-bold mb-2">Output Quality:</label>
        <input type="number" id="output_quality" value="97" min="0" max="100" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled>

        <label for="negative_prompt" class="block text-gray-700 text-sm font-bold mb-2">Negative Prompt:</label>
        <textarea id="negative_prompt" rows="2" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled></textarea>

        <label for="prompt_strength" class="block text-gray-700 text-sm font-bold mb-2">Prompt Strength:</label>
        <input type="number" id="prompt_strength" value="0.6" min="0" max="1" step="0.1" class="p-2 bg-gray-200 text-gray-700 border border-gray-300" disabled>
    </div>

    <div class="flex items-center space-x-2 mb-4">
        <button class="p-2 bg-blue-500 text-white" id="generate-button" style="width: 120px;" disabled>GENERATE</button>
        <div id="generating-message" class="ml-2 text-gray-600 text-sm">Generating...</div>
    </div>

    <div id="image-response" class="mt-4 p-4 bg-gray-200 text-gray-700 h-96 overflow-y-auto">
        <!-- Images will be displayed here -->
    </div>

    <div id="server-info" class="text-gray-600 mt-4">
        <!-- Server info will be displayed here -->
    </div>
</body>
</html>