Update index.html

index.html

@@ -6,29 +6,26 @@
   <title>AI Chatbot with HuggingFace API - Enhanced</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <script src="https://cdn.tailwindcss.com"></script>
   <style>
     :root {
-      --bg-primary: #121212;
-      --bg-secondary: #1c1c1a;
-      --bg-tertiary: #252521;
-      --text-primary: #e8e8e0;
-      --text-secondary: #a5a59c;
-      --accent-primary: #8FBC8F;
-      --accent-secondary: #5D4037;
-      --accent-tertiary: #3E2723;
-      --error: #a73737;
-      --success: #4a7c59;
-      --warning: #b3892b;
-      --glass-bg: rgba(24, 24, 20, 0.7);
-      --glass-border: rgba(143, 188, 143, 0.2);
-      --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7);
-      --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.85);
-      --gradient-primary: linear-gradient(135deg, var(--accent-primary), #6a8a6a);
-      --gradient-secondary: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
-      --gradient-bg: linear-gradient(135deg, #252521 0%, #121212 100%);
-      --rust-accent: #8b5d3b;
-      --metal-accent: #6c7b74;
+      --bg-primary: #0a0a0a;
+      --bg-secondary: #1a1a1a;
+      --bg-tertiary: #2a2a2a;
+      --text-primary: #ffffff;
+      --text-secondary: #b0b0b0;
+      --accent-primary: #00d4ff;
+      --accent-secondary: #ff6b35;
+      --accent-tertiary: #7c4dff;
+      --error: #ff4757;
+      --success: #2ed573;
+      --warning: #ffa502;
+      --glass-bg: rgba(255, 255, 255, 0.05);
+      --glass-border: rgba(255, 255, 255, 0.1);
+      --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
+      --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.8);
+      --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
+      --gradient-secondary: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
+      --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
 
     * {
@@ -40,9 +37,8 @@
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
       background: var(--bg-primary);
       background-image: 
-        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238FBC8F' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
-        repeating-linear-gradient(45deg, rgba(143, 188, 143, 0.02) 0px, rgba(143, 188, 143, 0.02) 2px, transparent 2px, transparent 4px),
-        linear-gradient(135deg, rgba(30, 20, 15, 0.9), rgba(18, 18, 18, 1));
+        radial-gradient(ellipse at top left, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
+        radial-gradient(ellipse at bottom right, rgba(124, 77, 255, 0.05) 0%, transparent 50%);
       color: var(--text-primary);
       display: flex;
       justify-content: center;
@@ -50,14 +46,16 @@
       min-height: 100vh;
       overflow: hidden;
       -webkit-tap-highlight-color: transparent;
+      backdrop-filter: blur(10px);
     }
 
     .app-container {
       width: 95%;
       max-width: 1400px;
       background: var(--glass-bg);
+      backdrop-filter: blur(20px);
       border: 1px solid var(--glass-border);
-      border-radius: 8px;
+      border-radius: 20px;
       box-shadow: var(--shadow-xl);
       display: flex;
       overflow: hidden;
@@ -65,17 +63,6 @@
       position: relative;
       animation: slideIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
     }
-    
-    .app-container::before {
-      content: '';
-      position: absolute;
-      top: 20;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: var(--accent-primary);
-      z-index: 10;
-    }
 
     @keyframes slideIn {
       from {
@@ -92,29 +79,12 @@
       width: 320px;
       padding: 24px;
       background: var(--bg-secondary);
-      border-right: 2px solid var(--accent-tertiary);
+      backdrop-filter: blur(15px);
+      border-right: 1px solid var(--glass-border);
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       overflow-y: auto;
       scrollbar-width: thin;
-      scrollbar-color: var(--accent-primary) var(--bg-tertiary);
-      position: relative;
-    }
-    
-    .settings-panel::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 1px;
-      height: 100%;
-      background: repeating-linear-gradient(
-        to bottom,
-        var(--accent-primary) 0,
-        var(--accent-primary) 10px,
-        transparent 10px,
-        transparent 20px
-      );
-      opacity: 0.3;
+      scrollbar-color: var(--accent-primary) transparent;
     }
 
     .settings-panel::-webkit-scrollbar {
@@ -122,7 +92,7 @@
     }
 
     .settings-panel::-webkit-scrollbar-track {
-      background: var(--bg-tertiary);
+      background: transparent;
     }
 
     .settings-panel::-webkit-scrollbar-thumb {
@@ -142,26 +112,11 @@
       flex-direction: column;
       position: relative;
       background: var(--bg-primary);
-      background-image: 
-        linear-gradient(rgba(18, 18, 18, 0.97), rgba(18, 18, 18, 0.97)),
-        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238FBC8F' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
 
     .form-field {
       margin-bottom: 20px;
       animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1);
-      position: relative;
-    }
-    
-    .form-field::after {
-      content: '';
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: var(--accent-tertiary);
-      opacity: 0.3;
     }
 
     .form-field label {
@@ -174,21 +129,23 @@
       letter-spacing: 0.5px;
     }
 
-    .form-field select, .form-field textarea, .form-field input {
+    .form-field select, .form-field textarea {
       width: 100%;
       padding: 12px 16px;
-      border: 2px solid var(--accent-tertiary);
-      border-radius: 6px;
+      border: 2px solid transparent;
+      border-radius: 12px;
       background: var(--bg-tertiary);
       color: var(--text-primary);
       font-size: 1rem;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+      backdrop-filter: blur(10px);
     }
 
-    .form-field select:focus, .form-field textarea:focus, .form-field input:focus {
+    .form-field select:focus, .form-field textarea:focus {
       outline: none;
       border-color: var(--accent-primary);
-      box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3);
+      box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+      transform: translateY(-2px);
     }
 
     .form-field textarea {
@@ -199,9 +156,9 @@
     button {
       padding: 12px 24px;
       border: none;
-      border-radius: 6px;
-      background: var(--accent-primary);
-      color: var(--bg-primary);
+      border-radius: 12px;
+      background: var(--gradient-primary);
+      color: var(--text-primary);
       cursor: pointer;
       font-size: 1rem;
       font-weight: 600;
@@ -209,7 +166,6 @@
       touch-action: manipulation;
       position: relative;
       overflow: hidden;
-      box-shadow: 0 4px 0 var(--accent-tertiary);
     }
 
     button::before {
@@ -219,7 +175,7 @@
       left: -100%;
       width: 100%;
       height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.5s;
     }
 
@@ -228,18 +184,17 @@
     }
 
     button:hover {
-      background: #a0cfa0;
-      transform: translateY(-2px);
+      transform: translateY(-3px);
+      box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4);
     }
 
     button:active {
-      transform: translateY(2px);
-      box-shadow: 0 0 0 var(--accent-tertiary);
+      transform: translateY(-1px);
     }
 
     .material-icons {
       font-family: 'Material Icons';
-      font-size: 24px;
+      font-size: 28px;
       vertical-align: middle;
     }
 
@@ -251,10 +206,7 @@
       flex-direction: column;
       gap: 16px;
       scrollbar-width: thin;
-      scrollbar-color: var(--accent-primary) var(--bg-tertiary);
-      background-image: 
-        linear-gradient(rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.95)),
-        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235D4037' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+      scrollbar-color: var(--accent-primary) transparent;
     }
 
     .chat-container::-webkit-scrollbar {
@@ -262,7 +214,7 @@
     }
 
     .chat-container::-webkit-scrollbar-track {
-      background: var(--bg-tertiary);
+      background: transparent;
     }
 
     .chat-container::-webkit-scrollbar-thumb {
@@ -273,22 +225,12 @@
     .message {
       max-width: 80%;
       padding: 16px 20px;
-      border-radius: 6px;
+      border-radius: 20px;
       font-size: 1rem;
       line-height: 1.6;
       position: relative;
       animation: messageSlide 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-      border: 1px solid transparent;
-    }
-    
-    .message::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: var(--glass-border);
+      backdrop-filter: blur(10px);
     }
 
     @keyframes messageSlide {
@@ -303,56 +245,48 @@
     }
 
     .message.user {
-      background: var(--accent-secondary);
+      background: var(--gradient-primary);
       align-self: flex-end;
-      border-bottom: 3px solid var(--accent-tertiary);
+      box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
     }
 
     .message.ai {
-      background: var(--bg-tertiary);
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
       align-self: flex-start;
-      border-left: 3px solid var(--accent-primary);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     }
 
     .input-container {
       display: flex;
       gap: 12px;
       padding: 20px;
-      background: var(--bg-secondary);
-      border-top: 2px solid var(--accent-tertiary);
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px);
+      border-top: 1px solid var(--glass-border);
       align-items: center;
-      position: relative;
-    }
-    
-    .input-container::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: var(--rust-accent);
-      opacity: 0.6;
     }
 
     #userInput {
       flex: 1;
       padding: 16px 20px;
-      border: 2px solid var(--accent-tertiary);
-      border-radius: 6px;
-      background: var(--bg-tertiary);
+      border: 2px solid transparent;
+      border-radius: 20px;
+      background: var(--bg-secondary);
       color: var(--text-primary);
       resize: none;
       min-height: 60px;
       max-height: 150px;
-      font-size: 16px;
+      font-size: 1rem;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+      backdrop-filter: blur(10px);
     }
 
     #userInput:focus {
       outline: none;
       border-color: var(--accent-primary);
-      box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3);
+      box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
+      transform: translateY(-2px);
     }
 
     #sendButton, #attachButton {
@@ -361,20 +295,14 @@
       justify-content: center;
       width: 60px;
       height: 60px;
-      border-radius: 6px;
-      background: var(--accent-primary);
+      border-radius: 50%;
+      background: var(--gradient-primary);
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-      box-shadow: 0 4px 0 var(--accent-tertiary);
     }
 
     #sendButton:hover, #attachButton:hover {
-      background: #a0cfa0;
-      transform: translateY(-2px);
-    }
-    
-    #sendButton:active, #attachButton:active {
-      transform: translateY(2px);
-      box-shadow: 0 0 0 var(--accent-tertiary);
+      transform: translateY(-3px) scale(1.05);
+      box-shadow: 0 12px 30px rgba(0, 212, 255, 0.5);
     }
 
     #sendButton:disabled {
@@ -387,7 +315,7 @@
     .spinner {
       width: 28px;
       height: 28px;
-      border: 3px solid rgba(143, 188, 143, 0.2);
+      border: 3px solid rgba(255, 255, 255, 0.3);
       border-top: 3px solid var(--accent-primary);
       border-radius: 50%;
       animation: spin 1s linear infinite;
@@ -402,14 +330,14 @@
       top: 24px;
       right: 24px;
       padding: 16px 24px;
-      border-radius: 6px;
+      border-radius: 12px;
       color: #fff;
       font-size: 1rem;
       font-weight: 600;
       z-index: 1000;
       display: none;
+      backdrop-filter: blur(15px);
       animation: notificationSlide 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-      border-left: 4px solid transparent;
     }
 
     @keyframes notificationSlide {
@@ -424,15 +352,13 @@
     }
 
     .error-message {
-      background: var(--bg-tertiary);
-      border-left-color: var(--error);
-      box-shadow: 0 5px 15px rgba(167, 55, 55, 0.3);
+      background: linear-gradient(135deg, var(--error), #ff6b6b);
+      box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);
     }
 
     .success-message {
-      background: var(--bg-tertiary);
-      border-left-color: var(--success);
-      box-shadow: 0 5px 15px rgba(74, 124, 89, 0.3);
+      background: linear-gradient(135deg, var(--success), #5af78e);
+      box-shadow: 0 10px 25px rgba(46, 213, 115, 0.4);
     }
 
     .carousel-container {
@@ -445,7 +371,6 @@
       position: relative;
       user-select: none;
       padding: 24px;
-      touch-action: pan-y;
     }
 
     .carousel {
@@ -454,55 +379,28 @@
       max-width: 500px;
       height: 300px;
       transform-style: preserve-3d;
-      transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
+      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
       cursor: grab;
     }
 
     .carousel.dragging {
       cursor: grabbing;
-      transition: none;
     }
 
     .carousel-card {
       position: absolute;
       width: 100%;
       height: 100%;
-      background: var(--bg-secondary);
-      border: 2px solid var(--accent-tertiary);
-      border-radius: 6px;
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
       padding: 24px;
+      box-shadow: var(--shadow-lg);
       display: flex;
       flex-direction: column;
       gap: 12px;
-      transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-    }
-    
-    .carousel-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: var(--accent-primary);
-    }
-    
-    .carousel-card::after {
-      content: '';
-      position: absolute;
-      top: 4px;
-      bottom: 0;
-      right: 0;
-      width: 4px;
-      background: repeating-linear-gradient(
-        to bottom,
-        var(--accent-primary) 0,
-        var(--accent-primary) 10px,
-        transparent 10px,
-        transparent 20px
-      );
-      opacity: 0.5;
+      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     }
 
     .carousel-controls, .carousel-indicator {
@@ -515,15 +413,15 @@
       width: 14px;
       height: 14px;
       background: var(--bg-tertiary);
-      border-radius: 2px;
+      border-radius: 50%;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-      border: 2px solid var(--accent-tertiary);
-      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
+      border: 2px solid transparent;
     }
 
     .carousel-dot.active {
       background: var(--accent-primary);
+      box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
       transform: scale(1.2);
     }
 
@@ -534,12 +432,13 @@
 
     .mode-toggle {
       display: flex;
-      background: var(--bg-tertiary);
-      border-radius: 6px;
+      background: var(--bg-secondary);
+      backdrop-filter: blur(15px);
+      border-radius: 20px;
       padding: 4px;
       position: relative;
       margin-bottom: 20px;
-      border: 2px solid var(--accent-tertiary);
+      border: 1px solid var(--glass-border);
     }
 
     .mode-toggle button {
@@ -552,13 +451,12 @@
       z-index: 1;
       font-size: 1rem;
       font-weight: 600;
-      border-radius: 4px;
+      border-radius: 16px;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-      box-shadow: none;
     }
 
     .mode-toggle button.active {
-      color: var(--bg-primary);
+      color: var(--text-primary);
     }
 
     .mode-toggle-slider {
@@ -566,10 +464,10 @@
       top: 4px;
       left: 4px;
       height: calc(100% - 8px);
-      background: var(--accent-primary);
-      border-radius: 4px;
-      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-      box-shadow: 0 2px 0 var(--accent-tertiary);
+      background: var(--gradient-primary);
+      border-radius: 16px;
+      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+      box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
     }
 
     .dropzone {
@@ -578,7 +476,8 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: rgba(143, 188, 143, 0.1);
+      background: rgba(0, 212, 255, 0.1);
+      backdrop-filter: blur(20px);
       border: 3px dashed var(--accent-primary);
       display: none;
       align-items: center;
@@ -587,7 +486,7 @@
       font-size: 1.4rem;
       font-weight: 600;
       z-index: 10;
-      border-radius: 6px;
+      border-radius: 20px;
     }
 
     .dropzone.active {
@@ -622,38 +521,22 @@
 
     .chip {
       padding: 10px 18px;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--accent-tertiary);
-      border-radius: 4px;
+      background: var(--glass-bg);
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
       font-size: 0.9rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
       color: var(--text-secondary);
-      position: relative;
-    }
-    
-    .chip::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 5px;
-      height: 5px;
-      background: var(--accent-primary);
-      border-radius: 1px;
     }
 
     .chip:hover {
       background: var(--accent-primary);
-      color: var(--bg-primary);
+      color: var(--text-primary);
       transform: translateY(-2px);
-      box-shadow: 0 3px 0 var(--accent-tertiary);
-    }
-    
-    .chip:active {
-      transform: translateY(1px);
-      box-shadow: 0 0 0 var(--accent-tertiary);
+      box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
     }
 
     .floating-buttons {
@@ -668,26 +551,21 @@
     .floating-btn {
       width: 48px;
       height: 48px;
-      border-radius: 6px;
-      background: var(--bg-tertiary);
-      border: 2px solid var(--accent-tertiary);
+      border-radius: 50%;
+      background: var(--glass-bg);
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--glass-border);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
       padding: 0;
-      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
     }
 
     .floating-btn:hover {
       background: var(--accent-primary);
-      color: var(--bg-primary);
-      transform: translateY(-2px);
-    }
-    
-    .floating-btn:active {
-      transform: translateY(2px);
-      box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
+      transform: translateY(-3px) scale(1.05);
+      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
     }
 
     .code-tools {
@@ -701,18 +579,19 @@
     .code-tools button {
       padding: 6px 12px;
       font-size: 0.85rem;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--accent-tertiary);
-      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
     }
 
     pre {
       position: relative;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--accent-tertiary);
+      background: var(--bg-secondary);
+      border: 1px solid var(--glass-border);
       padding: 20px;
-      border-radius: 6px;
+      border-radius: 12px;
       overflow-x: auto;
+      backdrop-filter: blur(10px);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     }
 
@@ -724,46 +603,9 @@
     .image-preview {
       max-width: 100%;
       max-height: 300px;
-      border-radius: 6px;
+      border-radius: 12px;
       margin-top: 12px;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-      border: 1px solid var(--accent-tertiary);
-    }
-    
-    /* Factory theme specific elements */
-    .rusty-border {
-      position: relative;
-    }
-    
-    .rusty-border::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border: 1px solid var(--rust-accent);
-      border-radius: inherit;
-      pointer-events: none;
-      opacity: 0.6;
-    }
-    
-    .metal-panel {
-      background-image: 
-        linear-gradient(45deg, 
-          rgba(108, 123, 116, 0.1) 25%, 
-          transparent 25%, 
-          transparent 75%, 
-          rgba(108, 123, 116, 0.1) 75%, 
-          rgba(108, 123, 116, 0.1)),
-        linear-gradient(45deg, 
-          rgba(108, 123, 116, 0.1) 25%, 
-          transparent 25%, 
-          transparent 75%,
-          rgba(108, 123, 116, 0.1) 75%, 
-          rgba(108, 123, 116, 0.1));
-      background-size: 10px 10px;
-      background-position: 0 0, 5px 5px;
     }
 
     @keyframes fadeInUp {
@@ -790,7 +632,7 @@
         width: 100%;
         max-height: 40vh;
         border-right: none;
-        border-bottom: 2px solid var(--accent-tertiary);
+        border-bottom: 1px solid var(--glass-border);
       }
 
       .settings-panel.collapsed {
@@ -849,7 +691,7 @@
         padding: 8px 14px;
       }
 
-      .form-field select, .form-field textarea, .form-field input, #userInput {
+      .form-field select, .form-field textarea, #userInput {
         font-size: 16px;
       }
     }
@@ -858,32 +700,29 @@
 <body>
   <div class="app-container" id="appContainer">
     <div class="settings-panel" id="settingsPanel">
-      <h2 style="font-size: 1.4rem; margin-bottom: 24px; color: var(--accent-primary); font-weight: 700;">⚙️ Control Panel</h2>
+      <h2 style="font-size: 1.4rem; margin-bottom: 24px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">⚙️ Settings</h2>
       <div class="form-field">
         <label>🤖 Main Model:</label>
         <select id="modelSelect">
-          <option value="mistralai/Mistral-7B-Instruct-v0.1">Mistral-7B-Instruct (Text)</option>
-          <option value="meta-llama/Llama-2-7b-chat-hf">Llama-2-7b-chat (Text)</option>
-          <option value="google/gemma-7b-it">Gemma-7b-it (Text)</option>
-          <option value="HuggingFaceH4/zephyr-7b-beta">Zephyr-7b-beta (Text)</option>
-          <option value="microsoft/phi-2">Phi-2 (Text)</option>
+          <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen2.5-Coder 32B (Code/Text)</option>
+          <option value="Qwen/Qwen2-VL-72B-Instruct">Qwen2-VL 72B (Text/Image)</option>
+          <option value="microsoft/Florence-2-large">Florence-2 Large (Text/Image)</option>
+          <option value="mistralai/Mixtral-8x7B-Instruct-v0.1">Mixtral 8x7B (Text)</option>
+          <option value="meta-llama/Llama-2-70b-chat-hf">Llama-2 70B (Chat)</option>
         </select>
         <p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px;">
-          💡 Choose a model. Smaller models (7B) are faster but less capable.
+          💡 Choose a model. Use VL or Florence for image processing.
         </p>
       </div>
       <div class="form-field">
-        <label>🔑 API Key:</label>
-        <input type="password" id="apiKeyInput" placeholder="Enter your HuggingFace API key">
-        <p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px;">
-          🔒 Your API key is stored locally only
-        </p>
-      </div>
-      <div class="form-field">
-        <label>⚡ Max Tokens:</label>
-        <input type="number" id="maxTokensInput" value="512" min="100" max="2048">
+        <label>👁️ OCR Model (for images):</label>
+        <select id="ocrModelSelect">
+          <option value="none">None</option>
+          <option value="scb10x/typhoon-v1.5x-72b-instruct">Typhoon 1.5x 72B</option>
+          <option value="microsoft/trocr-base-printed">TrOCR Base</option>
+        </select>
       </div>
-      <button id="saveSettingsBtn" class="rusty-border">💾 Save Settings</button>
+      <button id="saveSettingsBtn">💾 Save Settings</button>
     </div>
     <div class="main-content">
       <div class="floating-buttons">
@@ -899,31 +738,43 @@
       </div>
 
       <div class="mode-toggle">
-        <button id="carouselModeBtn" class="active">🎛️ Command Center</button>
-        <button id="chatModeBtn">💬 Terminal</button>
+        <button id="carouselModeBtn" class="active">🎛️ Prompt Editor</button>
+        <button id="chatModeBtn">💬 Chat</button>
         <div class="mode-toggle-slider" id="modeToggleSlider"></div>
       </div>
 
       <div id="carouselMode">
         <div class="carousel-container">
           <div class="carousel" id="promptCarousel">
-            <div class="carousel-card metal-panel" style="transform: rotateY(0deg) translateZ(500px);">
+            <div class="carousel-card" style="transform: rotateY(0deg) translateZ(500px);">
               <label>🎯 Primary System Prompt:</label>
-              <textarea id="primarySystemPrompt" placeholder="Enter primary system prompt for the AI assistant...">You are a helpful AI assistant that provides clear, accurate, and helpful responses. Focus on practical solutions and detailed explanations.</textarea>
+              <textarea id="primarySystemPrompt" placeholder="Enter primary system prompt for the AI assistant...">You are a powerful AI assistant that excels at understanding code, images, and technical content. Provide clear, accurate, and helpful responses. Focus on practical solutions and detailed explanations.</textarea>
             </div>
-            <div class="carousel-card metal-panel" style="transform: rotateY(60deg) translateZ(500px); opacity: 0.8;">
+            <div class="carousel-card" style="transform: rotateY(60deg) translateZ(500px); opacity: 0.8;">
+              <label>👁️ OCR System Prompt:</label>
+              <textarea id="ocrSystemPrompt" placeholder="Enter OCR system prompt for image text extraction...">Extract all text from the provided image clearly and accurately. Preserve formatting, structure, and layout when possible. If text is unclear, indicate uncertain parts.</textarea>
+            </div>
+            <div class="carousel-card" style="transform: rotateY(120deg) translateZ(500px); opacity: 0.8;">
               <label>💻 Code Template:</label>
               <textarea id="codeTemplate" placeholder="Enter code formatting template...">```javascript
-// Code implementation
+// Enhanced code implementation
 function solution() {
-  // Your code here
+  // Your optimized code here
   return result;
 }
 ```</textarea>
             </div>
-            <div class="carousel-card metal-panel" style="transform: rotateY(120deg) translateZ(500px); opacity: 0.8;">
+            <div class="carousel-card" style="transform: rotateY(180deg) translateZ(500px); opacity: 0.8;">
               <label>📋 Additional Instructions:</label>
-              <textarea id="additionalInstructions" placeholder="Enter additional instructions for the AI...">Provide working code examples when possible. Explain complex concepts step by step. Use modern best practices.</textarea>
+              <textarea id="additionalInstructions" placeholder="Enter additional instructions for the AI...">Always provide working, tested code examples. Include error handling and optimization suggestions. Explain complex concepts step by step. Use modern best practices.</textarea>
+            </div>
+            <div class="carousel-card" style="transform: rotateY(240deg) translateZ(500px); opacity: 0.8;">
+              <label>🚀 Prompt Prefix:</label>
+              <textarea id="promptPrefix" placeholder="Enter text to prepend to all prompts...">Please analyze the following request carefully and provide a comprehensive solution:</textarea>
+            </div>
+            <div class="carousel-card" style="transform: rotateY(300deg) translateZ(500px); opacity: 0.8;">
+              <label>✨ Prompt Suffix:</label>
+              <textarea id="promptSuffix" placeholder="Enter text to append to all prompts...">Ensure your response is complete, accurate, and includes practical examples where applicable.</textarea>
             </div>
           </div>
           <div class="carousel-controls">
@@ -934,8 +785,11 @@ function solution() {
             <div class="carousel-dot active" data-index="0"></div>
             <div class="carousel-dot" data-index="1"></div>
             <div class="carousel-dot" data-index="2"></div>
+            <div class="carousel-dot" data-index="3"></div>
+            <div class="carousel-dot" data-index="4"></div>
+            <div class="carousel-dot" data-index="5"></div>
           </div>
-          <button id="applyPromptBtn" style="margin-top: 24px;">✅ Apply Prompts & Switch to Terminal</button>
+          <button id="applyPromptBtn" style="margin-top: 24px;">✅ Apply Prompts & Switch to Chat</button>
         </div>
       </div>
 
@@ -945,12 +799,18 @@ function solution() {
           <span class="chip" data-prompt="Generate a complete function">⚡ Generate Function</span>
           <span class="chip" data-prompt="Debug and fix this issue">🐛 Debug Code</span>
           <span class="chip" data-prompt="Optimize this for performance">🚀 Optimize</span>
+          <span class="chip" data-prompt="Add error handling">🛡️ Error Handling</span>
+          <span class="chip" data-prompt="Convert to modern syntax">✨ Modernize</span>
         </div>
         <div class="chat-container" id="chatContainer"></div>
         <div class="input-container">
+          <button id="attachButton"><span class="material-icons">attach_file</span></button>
+          <input type="file" id="fileInput" multiple accept="image/*" style="display: none;">
+          <span class="file-name" id="fileName"></span>
           <textarea id="userInput" placeholder="Type your message here... (Shift+Enter for new line)"></textarea>
           <button id="sendButton"><span class="material-icons">send</span></button>
         </div>
+        <div class="dropzone" id="dropzone">📁 Drop files here to attach them</div>
       </div>
 
       <div class="notification error-message" id="errorMessage">