Update app.py

app.py

@@ -10,7 +10,7 @@ tokenizer = AutoTokenizer.from_pretrained(model_name)
 model = AutoModelForCausalLM.from_pretrained(model_name)
 
 # Function to generate chatbot response
-def get_chatbot_response(user_input: str, max_length=100):
+def get_chatbot_response(user_input: str, max_length=1000):
     if not user_input:
         return "Please say something!"
     
@@ -28,7 +28,7 @@ def get_chatbot_response(user_input: str, max_length=100):
     response = tokenizer.decode(chat_history_ids[:, input_ids.shape[-1]:][0], skip_special_tokens=True)
     return response.strip()
 
-# HTML, CSS, and JS with main-content at the top and more space
+# HTML, CSS, and JS with two modes (dark and soft)
 HTML_CONTENT = """
 <!DOCTYPE html>
 <html lang="en">
@@ -50,48 +50,79 @@ HTML_CONTENT = """
             --background-color: #000; --error-color: #FF4D4D; --success-color: #4CAF50;
         }
         .soft_mode {
-            --primary-color: rgb(220, 230, 240); --secondary-color: rgb(235, 240, 245); --secondary-hover-color: rgb(200, 210, 225);
-            --focus-color: rgb(245, 245, 250); --focus-hover-color: rgb(230, 230, 235); --button-hover-color: rgb(210, 220, 230);
-            --text-color: rgb(40, 50, 60); --text-secondary-color: rgb(90, 100, 110); --heading-secondary-color: rgb(150, 160, 170);
-            --placeholder-color: rgb(120, 130, 140); --accent-color: rgb(100, 150, 255); --star-color: rgb(180, 190, 200);
-            --background-color: rgb(240, 245, 250); --error-color: rgb(255, 100, 100); --success-color: rgb(100, 200, 100);
+            --primary-color: rgb(220, 230, 240); /* Soft pastel blue */
+            --secondary-color: rgb(235, 240, 245); /* Lighter pastel */
+            --secondary-hover-color: rgb(200, 210, 225);
+            --focus-color: rgb(245, 245, 250); --focus-hover-color: rgb(230, 230, 235);
+            --button-hover-color: rgb(210, 220, 230);
+            --text-color: rgb(40, 50, 60); --text-secondary-color: rgb(90, 100, 110);
+            --heading-secondary-color: rgb(150, 160, 170);
+            --placeholder-color: rgb(120, 130, 140); --accent-color: rgb(100, 150, 255); /* Softer blue */
+            --star-color: rgb(180, 190, 200); --background-color: rgb(240, 245, 250); /* Very light pastel */
+            --error-color: rgb(255, 100, 100); --success-color: rgb(100, 200, 100);
         }
         body {
-            min-height: 100vh; display: flex; flex-direction: column; background: var(--background-color);
-            position: relative; overflow-y: auto; transition: background 0.3s ease;
+            min-height: 100vh; display: flex; flex-direction: row; justify-content: space-between;
+            background: var(--background-color); position: relative; overflow-y: hidden; transition: background 0.3s ease;
         }
         .stars {
-            position: fixed; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/stardust.png');
+            position: fixed; width: 100%; height: 100%;
+            background: url('https://www.transparenttextures.com/patterns/stardust.png');
             animation: starsAnim 100s linear infinite; z-index: -1; transition: opacity 0.3s ease; opacity: 0.8;
         }
-        .soft_mode .stars { background: url('https://www.transparenttextures.com/patterns/stardust.png') rgba(240, 245, 250, 0.4); opacity: 0.3; }
+        .soft_mode .stars {
+            background: url('https://www.transparenttextures.com/patterns/stardust.png') rgba(240, 245, 250, 0.4);
+            opacity: 0.3;
+        }
         @keyframes starsAnim { from { background-position: 0 0; } to { background-position: 10000px 10000px; } }
         @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .sidebar {
+            width: 70px; height: 100vh; background: rgba(26, 27, 30, 0.95); display: flex; flex-direction: column;
+            align-items: center; padding: 1rem 0; position: fixed; left: 0; top: 0; transition: width 0.3s ease; z-index: 1001;
+        }
+        .sidebar:hover { width: 200px; }
+        .soft_mode .sidebar { background: rgba(235, 240, 245, 0.95); }
+        .sidebar__item {
+            width: 100%; padding: 1rem; color: var(--text-secondary-color); text-decoration: none;
+            display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; position: relative;
+        }
+        .sidebar__item:hover, .sidebar__item:focus {
+            background: var(--secondary-hover-color); color: var(--accent-color); padding-left: 1.5rem; transform: scale(1.05);
+        }
+        .sidebar__item i { font-size: 1.5rem; }
+        .sidebar__item span { display: none; font-size: 1rem; }
+        .sidebar:hover .sidebar__item span { display: inline; }
+        .tooltip {
+            visibility: hidden; background: var(--secondary-color); color: var(--text-color); font-size: 0.8rem;
+            padding: 0.5rem; border-radius: 0.3rem; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
+            white-space: nowrap; z-index: 1002; transition: visibility 0.2s, opacity 0.2s; opacity: 0;
+        }
+        .sidebar__item:hover .tooltip, .sidebar__item:focus .tooltip { visibility: visible; opacity: 1; }
         .main-content {
-            flex: 1; display: flex; flex-direction: column; padding: 3rem 2rem 2rem; /* Increased top padding */
-            max-width: 1200px; /* Wider display */
-            margin: 0 auto; /* Centered */
-            min-height: 70vh; /* More vertical space */
-            overflow-y: auto;
+            flex: 1; display: flex; flex-direction: column; padding-bottom: 100px; padding-top: 2rem; margin-left: 70px;
+            height: 50vh; overflow: hidden;
         }
-        .header { text-align: center; padding-bottom: 2rem; }
+        .header { max-width: 900px; text-align: center; padding: 0 2rem; margin: 0 auto; }
         .header__title h1 {
-            color: var(--text-color); font-size: 4rem; font-weight: 800; margin-bottom: 1.5rem;
+            color: var(--text-color); font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem;
             text-shadow: 0 0 10px rgba(0, 163, 255, 0.5); animation: fadeIn 1s ease-in;
         }
         .header__title h2 {
-            color: var(--text-secondary-color); font-size: 1.8rem; font-weight: 400; max-width: 800px;
-            margin: 0 auto; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: opacity 0.3s ease, height 0.3s ease;
+            color: var(--text-secondary-color); font-size: 1.5rem; font-weight: 400;
+            max-width: 600px; margin: 0 auto; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+            transition: opacity 0.3s ease, height 0.3s ease;
         }
         .suggests {
-            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Wider items */
-            margin: 3rem 0; gap: 1.5rem; /* More spacing */
-            transition: opacity 0.3s ease, height 0.3s ease; animation: fadeIn 0.5s ease-in;
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            margin: 2rem auto; max-width: 900px; gap: 1rem; padding: 0 2rem; transition: opacity 0.3s ease, height 0.3s ease;
+            animation: fadeIn 0.5s ease-in;
+        }
+        .suggests.hidden, .header__title h2.hidden {
+            opacity: 0; height: 0; margin: 0; overflow: hidden;
         }
-        .suggests.hidden, .header__title h2.hidden { opacity: 0; height: 0; margin: 0; overflow: hidden; }
         .suggests__item {
-            background: rgba(26, 27, 30, 0.9); color: var(--text-secondary-color); padding: 2rem;
+            background: rgba(26, 27, 30, 0.9); color: var(--text-secondary-color); padding: 1.5rem;
             border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; border: 1px solid var(--focus-color);
             position: relative;
         }
@@ -100,18 +131,56 @@ HTML_CONTENT = """
             background: var(--secondary-hover-color); border-color: var(--accent-color); color: var(--text-color);
             transform: translateY(-3px);
         }
-        .suggests__item-icon { margin-top: 1.5rem; color: var(--accent-color); transition: transform 0.2s ease; }
+        .suggests__item-icon { margin-top: 1rem; color: var(--accent-color); transition: transform 0.2s ease; }
         .suggests__item:hover .suggests__item-icon, .suggests__item:focus .suggests__item-icon { transform: scale(1.2); }
-        .suggests__item .tooltip { top: -45px; left: 50%; transform: translateX(-50%); }
+        .suggests__item .tooltip { top: -40px; left: 50%; transform: translateX(-50%); }
         .suggests__item:hover .tooltip, .suggests__item:focus .tooltip { visibility: visible; opacity: 1; }
+        .prompt {
+            position: fixed; background: rgba(10, 10, 11, 0.9); z-index: 1000; width: calc(100% - 70px);
+            left: 70px; bottom: 0; padding: 1rem; border-top: 1px solid var(--secondary-color); transition: all 0.3s ease;
+        }
+        .soft_mode .prompt { background: rgba(235, 240, 245, 0.9); border-top: 1px solid var(--focus-color); }
+        .prompt__input-wrapper {
+            max-width: 900px; margin: 0 auto; position: relative; display: flex; align-items: center;
+            background: var(--secondary-color); border: 1px solid var(--focus-color); border-radius: 0.5rem;
+            padding: 0.2rem; transition: all 0.3s ease; animation: fadeIn 0.5s ease-in;
+        }
+        .prompt__input-wrapper:focus-within {
+            border-color: var(--accent-color); background: var(--focus-color); transform: scale(1.02);
+        }
+        .prompt__input-wrapper.dragover {
+            border: 2px dashed var(--accent-color); background: var(--focus-hover-color);
+        }
+        .prompt__form-input {
+            flex-grow: 1; border: none; resize: none; font-size: 1.1rem; color: var(--text-color);
+            padding: 0.3rem 0.5rem; background: transparent; outline: none; transition: all 0.3s ease;
+        }
+        .prompt__form-input::placeholder { color: var(--placeholder-color); transition: opacity 0.3s ease; }
+        .prompt__form-input:focus::placeholder { opacity: 0.5; }
+        .prompt__action-buttons {
+            display: flex; align-items: center; gap: 0.3rem; padding-right: 0.3rem; position: relative;
+        }
+        .prompt__action-buttons.advanced { display: none; }
+        .prompt__action-buttons.advanced.active { display: flex; }
+        .prompt__form-button {
+            background: none; border: none; color: var(--text-secondary-color); font-size: 1.3rem;
+            cursor: pointer; padding: 0.3rem; transition: all 0.3s ease; position: relative;
+        }
+        .prompt__form-button:hover, .prompt__form-button:focus { color: var(--accent-color); transform: scale(1.1); }
+        .prompt__form-button.send { font-size: 1.5rem; }
+        .prompt__form-button .tooltip { top: -35px; left: 50%; transform: translateX(-50%); }
+        .prompt__form-button:hover .tooltip, .prompt__form-button:focus .tooltip { visibility: visible; opacity: 1; }
+        .prompt__disclaim {
+            text-align: center; color: var(--placeholder-color); font-size: 0.8rem; margin-top: 1rem;
+            max-width: 900px; margin-left: auto; margin-right: auto; transition: opacity 0.3s ease;
+        }
         .chat-bar {
-            margin: 3rem 0; display: flex; flex-direction: column; overflow-y: auto;
-            max-height: 60vh; /* Larger chat area */
-            -ms-overflow-style: none; scrollbar-width: none;
+            max-width: 900px; margin: 2rem auto; padding: 0 2rem; display: flex; flex-direction: column;
+            overflow-y: auto; max-height: calc(100vh - 180px); -ms-overflow-style: none; scrollbar-width: none;
         }
         .chat-bar::-webkit-scrollbar { display: none; }
         .chat-message {
-            margin-bottom: 1.5rem; padding: 1.5rem; border-radius: 0.5rem; background: rgba(26, 27, 30, 0.9);
+            margin-bottom: 1rem; padding: 1rem; border-radius: 0.5rem; background: rgba(26, 27, 30, 0.9);
             color: var(--text-color); word-wrap: break-word; animation: fadeIn 0.3s ease-in; position: relative;
         }
         .soft_mode .chat-message { background: rgba(235, 240, 245, 0.9); }
@@ -140,94 +209,43 @@ HTML_CONTENT = """
             transition: color 0.2s ease;
         }
         .feedback-options button:hover, .feedback-options button:focus { color: var(--accent-color); }
-        .sidebar {
-            width: 70px; height: 100vh; background: rgba(26, 27, 30, 0.95); display: flex; flex-direction: column;
-            align-items: center; padding: 1rem 0; position: fixed; left: 0; top: 0; transition: width 0.3s ease; z-index: 1001;
-        }
-        .sidebar:hover { width: 200px; }
-        .soft_mode .sidebar { background: rgba(235, 240, 245, 0.95); }
-        .sidebar__item {
-            width: 100%; padding: 1rem; color: var(--text-secondary-color); text-decoration: none;
-            display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; position: relative;
-        }
-        .sidebar__item:hover, .sidebar__item:focus {
-            background: var(--secondary-hover-color); color: var(--accent-color); padding-left: 1.5rem; transform: scale(1.05);
-        }
-        .sidebar__item i { font-size: 1.5rem; }
-        .sidebar__item span { display: none; font-size: 1rem; }
-        .sidebar:hover .sidebar__item span { display: inline; }
-        .tooltip {
-            visibility: hidden; background: var(--secondary-color); color: var(--text-color); font-size: 0.8rem;
-            padding: 0.5rem; border-radius: 0.3rem; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
-            white-space: nowrap; z-index: 1002; transition: visibility 0.2s, opacity 0.2s; opacity: 0;
-        }
-        .sidebar__item:hover .tooltip, .sidebar__item:focus .tooltip { visibility: visible; opacity: 1; }
-        .prompt {
-            background: rgba(10, 10, 11, 0.9); z-index: 1000; width: 100%; padding: 2rem;
-            border-top: 1px solid var(--secondary-color); transition: all 0.3s ease;
-        }
-        .soft_mode .prompt { background: rgba(235, 240, 245, 0.9); border-top: 1px solid var(--focus-color); }
-        .prompt__input-wrapper {
-            max-width: 1200px; margin: 0 auto; position: relative; display: flex; align-items: center;
-            background: var(--secondary-color); border: 1px solid var(--focus-color); border-radius: 0.5rem;
-            padding: 0.5rem; transition: all 0.3s ease; animation: fadeIn 0.5s ease-in;
-        }
-        .prompt__input-wrapper:focus-within {
-            border-color: var(--accent-color); background: var(--focus-color); transform: scale(1.02);
-        }
-        .prompt__input-wrapper.dragover {
-            border: 2px dashed var(--accent-color); background: var(--focus-hover-color);
-        }
-        .prompt__form-input {
-            flex-grow: 1; border: none; resize: none; font-size: 1.2rem; color: var(--text-color);
-            padding: 0.5rem 1rem; background: transparent; outline: none; transition: all 0.3s ease;
-        }
-        .prompt__form-input::placeholder { color: var(--placeholder-color); transition: opacity 0.3s ease; }
-        .prompt__form-input:focus::placeholder { opacity: 0.5; }
-        .prompt__action-buttons {
-            display: flex; align-items: center; gap: 0.5rem; padding-right: 0.5rem; position: relative;
-        }
-        .prompt__action-buttons.advanced { display: none; }
-        .prompt__action-buttons.advanced.active { display: flex; }
-        .prompt__form-button {
-            background: none; border: none; color: var(--text-secondary-color); font-size: 1.5rem;
-            cursor: pointer; padding: 0.5rem; transition: all 0.3s ease; position: relative;
-        }
-        .prompt__form-button:hover, .prompt__form-button:focus { color: var(--accent-color); transform: scale(1.1); }
-        .prompt__form-button.send { font-size: 1.8rem; }
-        .prompt__form-button .tooltip { top: -40px; left: 50%; transform: translateX(-50%); }
-        .prompt__form-button:hover .tooltip, .prompt__form-button:focus .tooltip { visibility: visible; opacity: 1; }
-        .prompt__disclaim {
-            text-align: center; color: var(--placeholder-color); font-size: 0.9rem; margin-top: 1.5rem;
-            max-width: 1200px; margin-left: auto; margin-right: auto; transition: opacity 0.3s ease;
-        }
         .error-message {
             background: rgba(255, 77, 77, 0.2); border: 1px solid var(--error-color); color: var(--text-color);
-            padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.5rem; animation: fadeIn 0.3s ease-in;
+            padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; animation: fadeIn 0.3s ease-in;
             display: flex; justify-content: space-between; align-items: center;
         }
         .error-message button {
-            background: var(--error-color); color: var(--text-color); border: none; padding: 0.5rem 1rem;
+            background: var(--error-color); color: var(--text-color); border: none; padding: 0.3rem 0.6rem;
             border-radius: 0.3rem; cursor: pointer; transition: background 0.2s ease;
         }
         .error-message button:hover, .error-message button:focus { background: var(--button-hover-color); }
         .back-to-latest {
-            display: none; position: fixed; bottom: 120px; right: 3rem; background: var(--secondary-color);
-            color: var(--text-color); padding: 0.8rem 1.5rem; border-radius: 0.5rem; cursor: pointer;
+            display: none; position: fixed; bottom: 100px; right: 2rem; background: var(--secondary-color);
+            color: var(--text-color); padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;
             border: 1px solid var(--accent-color); transition: all 0.3s ease; z-index: 1000;
         }
         .back-to-latest.visible { display: block; }
         .back-to-latest:hover, .back-to-latest:focus { background: var(--secondary-hover-color); transform: scale(1.05); }
         .processing-dots {
-            display: none; position: absolute; right: 70px; color: var(--accent-color); font-size: 1.5rem;
+            display: none; position: absolute; right: 60px; color: var(--accent-color); font-size: 1.2rem;
         }
         .processing-dots.active { display: inline; animation: pulse 1.5s infinite; }
-        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
-        .processing-dots span { animation: blink 1s infinite; animation-delay: calc(0.2s * var(--i)); }
+        @keyframes blink {
+            0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; }
+        }
+        .processing-dots span {
+            animation: blink 1s infinite; animation-delay: calc(0.2s * var(--i));
+        }
     </style>
 </head>
 <body>
     <div class="stars"></div>
+    <nav class="sidebar" aria-label="Main navigation">
+        <a href="#" class="sidebar__item" tabindex="0" aria-label="Home"><i class='bx bx-home'></i><span>Home</span><div class="tooltip">Go to Home</div></a>
+        <a href="#" class="sidebar__item" tabindex="0" aria-label="Profile"><i class='bx bx-user'></i><span>Profile</span><div class="tooltip">View Profile</div></a>
+        <a href="#" class="sidebar__item" tabindex="0" aria-label="Settings"><i class='bx bx-cog'></i><span>Settings</span><div class="tooltip">Adjust Settings</div></a>
+        <a href="#" class="sidebar__item" tabindex="0" aria-label="Help"><i class='bx bx-help-circle'></i><span>Help</span><div class="tooltip">Get Help</div></a>
+    </nav>
     <div class="main-content">
         <header class="header">
             <div class="header__title">
@@ -243,12 +261,6 @@ HTML_CONTENT = """
         <div class="chat-bar" id="chatBar" aria-live="polite"></div>
         <button class="back-to-latest" id="backToLatest" tabindex="0">Back to Latest</button>
     </div>
-    <nav class="sidebar" aria-label="Main navigation">
-        <a href="#" class="sidebar__item" tabindex="0" aria-label="Home"><i class='bx bx-home'></i><span>Home</span><div class="tooltip">Go to Home</div></a>
-        <a href="#" class="sidebar__item" tabindex="0" aria-label="Profile"><i class='bx bx-user'></i><span>Profile</span><div class="tooltip">View Profile</div></a>
-        <a href="#" class="sidebar__item" tabindex="0" aria-label="Settings"><i class='bx bx-cog'></i><span>Settings</span><div class="tooltip">Adjust Settings</div></a>
-        <a href="#" class="sidebar__item" tabindex="0" aria-label="Help"><i class='bx bx-help-circle'></i><span>Help</span><div class="tooltip">Get Help</div></a>
-    </nav>
     <section class="prompt">
         <form action="#" class="prompt__form" novalidate>
             <div class="prompt__input-wrapper">
@@ -550,7 +562,7 @@ HTML_CONTENT = """
         // Responsive adjustments
         window.addEventListener('resize', () => {
             const width = window.innerWidth;
-            chatBar.style.maxHeight = width < 768 ? '50vh' : '60vh';
+            chatBar.style.maxHeight = width < 768 ? 'calc(100vh - 200px)' : 'calc(100vh - 180px)';
         });
 
         // Starry background effects