| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Intent Classifier Chatbot</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| body { |
| font-family: 'Segoe UI', Arial, sans-serif; |
| margin: 0; |
| background: #f7f9fa; |
| color: #222; |
| } |
| .container { |
| max-width: 500px; |
| margin: 60px auto 30px auto; |
| background: #fff; |
| border-radius: 12px; |
| box-shadow: 0 4px 24px rgba(0,0,0,0.08); |
| padding: 32px 28px 24px 28px; |
| } |
| h1 { |
| text-align: center; |
| color: #2d6cdf; |
| margin-bottom: 18px; |
| } |
| label { |
| font-weight: 500; |
| margin-bottom: 8px; |
| display: block; |
| } |
| input[type="text"] { |
| width: 100%; |
| padding: 12px; |
| border: 1px solid #d2d6dc; |
| border-radius: 6px; |
| font-size: 1em; |
| margin-bottom: 18px; |
| box-sizing: border-box; |
| transition: border 0.2s; |
| } |
| input[type="text"]:focus { |
| border: 1.5px solid #2d6cdf; |
| outline: none; |
| } |
| button { |
| width: 100%; |
| padding: 12px; |
| background: linear-gradient(90deg, #2d6cdf 60%, #4e9cff 100%); |
| color: #fff; |
| border: none; |
| border-radius: 6px; |
| font-size: 1.1em; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background 0.2s; |
| } |
| button:hover { |
| background: linear-gradient(90deg, #1b4e9b 60%, #3578c7 100%); |
| } |
| .result { |
| margin-top: 24px; |
| font-size: 1.15em; |
| background: #eaf3ff; |
| border-left: 4px solid #2d6cdf; |
| padding: 14px 18px; |
| border-radius: 6px; |
| color: #1a3a5d; |
| word-break: break-word; |
| } |
| .info { |
| margin-top: 18px; |
| font-size: 0.98em; |
| color: #555; |
| background: #f3f6fa; |
| border-radius: 6px; |
| padding: 10px 14px; |
| } |
| footer { |
| margin-top: 40px; |
| text-align: center; |
| color: #888; |
| font-size: 0.97em; |
| padding-bottom: 18px; |
| } |
| @media (max-width: 600px) { |
| .container { padding: 18px 6px 18px 6px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>Intent Classifier Chatbot</h1> |
| <div class="info"> |
| Enter a message below and click <b>Predict Intent</b> to see what the AI thinks your intent is.<br> |
| <span style="color:#2d6cdf;">Try: <i>"Set an alarm for 7am"</i> or <i>"Transfer money to John"</i></span> |
| </div> |
| <form method="post" autocomplete="off"> |
| <label for="user_text">Your Message:</label> |
| <input type="text" id="user_text" name="user_text" value="{{ user_text }}" placeholder="Type your message here..." required autofocus> |
| <button type="submit">Predict Intent</button> |
| </form> |
| {% if prediction %} |
| <div class="result"> |
| <strong>Predicted Intent:</strong> {{ prediction }} |
| </div> |
| {% endif %} |
| </div> |
| <footer> |
| Made by <b>Saher Muhamed</b><br> |
| <a href="https://github.com/sahermuhamed1" target="_blank" style="color:#2d6cdf;text-decoration:none;">GitHub</a> · |
| <a href="mailto:sahermuhamed176@gmail.com" style="color:#2d6cdf;text-decoration:none;">Contact</a> |
| </footer> |
| </body> |
| </html> |
|
|
