make this look like chat conversation. like chatgpt app layout. where i can scroll through different requests <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Flask Prediction App</title>     <style>         body {             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             line-height: 1.6;             color: #333;             background-color: #f4f4f4;             margin: 0;             padding: 20px;             display: flex;             justify-content: center;             align-items: center;             min-height: 100vh;         }         .container {             background-color: #ffffff;             padding: 30px;             border-radius: 8px;             box-shadow: 0 0 10px rgba(0,0,0,0.1);             width: 100%;             max-width: 500px;         }         h1 {             color: #2c3e50;             text-align: center;             margin-bottom: 20px;         }         form {             display: flex;             flex-direction: column;         }         label {             margin-bottom: 5px;             font-weight: bold;         }         input[type="text"] {             padding: 10px;             margin-bottom: 20px;             border: 1px solid #ddd;             border-radius: 4px;             font-size: 16px;         }         button {             padding: 10px 15px;             background-color: #3498db;             color: white;             border: none;             border-radius: 4px;             cursor: pointer;             font-size: 16px;             transition: background-color 0.3s;         }         button:hover {             background-color: #2980b9;         }         #result {             margin-top: 20px;             padding: 15px;             background-color: #e8f4fd;             border-radius: 4px;             font-weight: bold;         }         .error {             color: #721c24;             background-color: #f8d7da;             border: 1px solid #f5c6cb;             padding: 10px;             border-radius: 4px;             margin-top: 20px;         }     </style> </head> <body>     <div class="container">         <h1>Flask Prediction App</h1>         <form id="prediction-form">             <label for="inputs">Enter your inputs:</label>             <input type="text" id="inputs" name="inputs" required placeholder="e.g., 1,2,3,4,5">             <button type="submit">Get Prediction</button>         </form>         <div id="result"></div>     </div>      <script>         document.getElementById('prediction-form').addEventListener('submit', function(event) {             event.preventDefault();             const formData = new FormData(this);             const inputs = formData.get('inputs');             const resultDiv = document.getElementById('result');             resultDiv.innerHTML = 'Processing...';             resultDiv.className = '';              fetch('/predict', {                 method: 'POST',                 body: new URLSearchParams({'inputs': inputs}),                 headers: {                     'Content-Type': 'application/x-www-form-urlencoded'                 }             })             .then(response => response.json())             .then(data => {                 if (data.error) {                     resultDiv.innerHTML = `Error: ${data.error}`;                     resultDiv.className = 'error';                 } else {                     resultDiv.innerHTML = `<p>Prediction result: ${data.result}</p>`;                     resultDiv.className = '';                 }             })             .catch(error => {                 resultDiv.innerHTML = `Error: ${error}`;                 resultDiv.className = 'error';             });         });     </script> </body> </html>