| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bangla AI Text Summarizer</title> |
| |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'dark-bg': '#1f2c34', |
| 'dark-bg-alt': '#1b1b2f', |
| 'chat-bg': '#222831', |
| 'header-bg': '#30475e', |
| 'footer-bg': '#393e46', |
| 'accent': '#00adb5', |
| 'accent-hover': '#00b8c4', |
| 'dark-light': '#393e46', |
| 'text-light': '#eeeeee', |
| }, |
| }, |
| }, |
| }; |
| </script> |
| </head> |
| <body class="font-poppins bg-gradient-to-br from-dark-bg to-dark-bg-alt min-h-screen"> |
|
|
| <div class="chat-container flex justify-center items-center min-h-screen p-5"> |
| <div class="chat-box w-[550px] max-w-[95%] h-[750px] bg-chat-bg rounded-3xl flex flex-col overflow-hidden shadow-2xl"> |
| <div class="chat-header flex items-center p-4 bg-header-bg text-white rounded-t-3xl"> |
| <img src="{{ url_for('static', filename='icon.png') }}" class="chat-avatar w-[55px] h-[55px] mr-3"> |
| <div> |
| <h5 class="mb-0 text-lg font-semibold">Bangla LLM Text Summarizer</h5> |
| <small class="text-white/80 text-sm">Powered by Shanin</small> |
| </div> |
| </div> |
|
|
| <div id="chatBody" class="chat-body flex-1 overflow-y-auto p-4"> |
| |
| </div> |
|
|
| <div class="chat-footer p-4 bg-footer-bg rounded-b-3xl"> |
| <form id="messageForm" class="flex"> |
| <input type="text" id="text" name="msg" class="form-control flex-1 rounded-full px-4 py-3 bg-chat-bg border border-accent text-text-light placeholder:text-text-light/50 focus:outline-none focus:ring-0 me-2" placeholder="Type a message..." required> |
| <button type="submit" class="btn btn-accent rounded-full bg-accent text-white px-5 py-3 hover:bg-accent-hover"><i class="fas fa-paper-plane"></i></button> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script> |
|
|
| <script> |
| $(document).ready(function() { |
| $("#messageForm").on("submit", function(event) { |
| event.preventDefault(); |
| |
| const date = new Date(); |
| const str_time = date.getHours().toString().padStart(2,'0') + ":" + date.getMinutes().toString().padStart(2,'0'); |
| const rawText = $("#text").val(); |
| $("#text").val(""); |
| |
| |
| const userHtml = ` |
| <div class="message user-message mb-3 flex justify-end"> |
| <div class="msg-text bg-accent text-white p-3 rounded-3xl max-w-[80%] break-words shadow-md relative"> |
| ${rawText} <span class="time text-[10px] absolute -bottom-4 right-2 text-white/50">${str_time}</span> |
| </div> |
| </div>`; |
| $("#chatBody").append(userHtml).scrollTop($("#chatBody")[0].scrollHeight); |
| |
| |
| $.post("/get", { msg: rawText }, function(data) { |
| const botHtml = ` |
| <div class="message bot-message mb-3 flex justify-start"> |
| <div class="msg-text bg-dark-light text-text-light p-3 rounded-3xl max-w-[80%] break-words shadow-md relative"> |
| ${data} <span class="time text-[10px] absolute -bottom-4 right-2 text-white/50">${str_time}</span> |
| </div> |
| </div>`; |
| $("#chatBody").append(botHtml).scrollTop($("#chatBody")[0].scrollHeight); |
| }); |
| }); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
