Update app.py

app.py

@@ -109,13 +109,22 @@ def safe_chat_stream(convo: List[Dict], max_ctx: int, max_rep: int, models: List
             if not trimmed_convo or count_tokens(" ".join([msg["content"] for msg in trimmed_convo]), m) > current_model_max_context:
                 raise ValueError(f"Conversation too long for model '{m}' even after trimming. Max context: {current_model_max_context} tokens.")
 
-            stream = client.chat.completions.create(
-                model=m,
-                messages=trimmed_convo,
-                max_tokens=max_rep,
-                temperature=TEMPERATURE,
-                stream=True,
-            )
+            # Use appropriate parameter based on model
+            completion_params = {
+                "model": m,
+                "messages": trimmed_convo,
+                "temperature": TEMPERATURE,
+                "stream": True,
+            }
+            
+            # Check if model needs max_completion_tokens instead of max_tokens
+            if m in ["o4-mini", "o3", "o3-pro"]:
+                completion_params["max_completion_tokens"] = max_rep
+            else:
+                completion_params["max_tokens"] = max_rep
+            
+            stream = client.chat.completions.create(**completion_params)
+            
             reply = ""
             for chunk in stream:
                 delta = chunk.choices[0].delta.content or ""
@@ -124,12 +133,17 @@ def safe_chat_stream(convo: List[Dict], max_ctx: int, max_rep: int, models: List
             
             usage = None
             try:
-                usage_resp = client.chat.completions.create(
-                    model=m,
-                    messages=trimmed_convo + [{"role": "assistant", "content": reply}],
-                    max_tokens=1,
-                    temperature=0,
-                )
+                usage_params = {
+                    "model": m,
+                    "messages": trimmed_convo + [{"role": "assistant", "content": reply}],
+                    "temperature": 0,
+                }
+                if m in ["o4-mini", "o3", "o3-pro"]:
+                    usage_params["max_completion_tokens"] = 1
+                else:
+                    usage_params["max_tokens"] = 1
+                    
+                usage_resp = client.chat.completions.create(**usage_params)
                 usage = usage_resp.usage
             except Exception:
                 prompt_tokens_est = count_tokens(" ".join([msg["content"] for msg in trimmed_convo]), m)
@@ -244,7 +258,10 @@ SYNTHWAVE_CSS = """
 /* Global green synthwave styles */
 html.dark.gradio-container,
 body.gradio-container {
-    background: linear-gradient(to bottom, #000a0a 0%, #001a1a 40%, #003333 70%, #004d4d 100%) !important;
+    background: 
+        radial-gradient(ellipse at top, #001a1a 0%, transparent 60%),
+        radial-gradient(ellipse at bottom, #004d4d 0%, transparent 60%),
+        linear-gradient(to bottom, #000a0a 0%, #001a1a 30%, #002626 60%, #003333 100%) !important;
     background-attachment: fixed !important;
     font-family: 'Exo 2', 'Orbitron', monospace !important;
     color: #ff1493 !important; /* HOT PINK for all text */
@@ -253,19 +270,20 @@ body.gradio-container {
 }
 
 /* Multiple animated elements for depth */
-body.gradio-container::before {
-    content: "";
+.grid-background {
     position: fixed;
-    top: 0;
+    bottom: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: 50%;
     background-image: 
-        linear-gradient(rgba(0, 255, 136, 0.03) 2px, transparent 2px),
-        linear-gradient(90deg, rgba(0, 255, 136, 0.03) 2px, transparent 2px);
+        linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
     background-size: 50px 50px;
-    animation: grid-move 10s linear infinite;
+    transform: perspective(400px) rotateX(70deg);
+    transform-origin: center bottom;
     z-index: -1;
+    opacity: 0.8;
 }
 
 /* Animated stars */
@@ -277,19 +295,15 @@ body.gradio-container::after {
     width: 100%;
     height: 100%;
     background-image: 
-        radial-gradient(2px 2px at 20px 30px, #00ff88, transparent),
-        radial-gradient(2px 2px at 40px 70px, #00ffcc, transparent),
-        radial-gradient(1px 1px at 50px 90px, white, transparent),
-        radial-gradient(1px 1px at 130px 40px, white, transparent);
+        radial-gradient(1px 1px at 20px 30px, #00ff8866, transparent),
+        radial-gradient(1px 1px at 40px 70px, #00ffcc66, transparent),
+        radial-gradient(0.5px 0.5px at 50px 90px, #ffffff44, transparent),
+        radial-gradient(0.5px 0.5px at 130px 40px, #ffffff44, transparent);
     background-repeat: repeat;
     background-size: 200px 200px;
-    animation: stars-move 200s linear infinite;
+    animation: stars-move 600s linear infinite; /* Very slow */
     z-index: -2;
-}
-
-@keyframes grid-move {
-    0% { transform: translate(0, 0); }
-    100% { transform: translate(50px, 50px); }
+    opacity: 0.4;
 }
 
 @keyframes stars-move {
@@ -297,39 +311,48 @@ body.gradio-container::after {
     to { transform: translateY(-2000px); }
 }
 
-/* Main container with green theme */
+/* Main container with green theme - refined */
 gradio-app {
-    --background-fill-primary: rgba(0, 26, 26, 0.85) !important;
+    --background-fill-primary: rgba(0, 26, 26, 0.9) !important;
     --background-fill-secondary: rgba(0, 13, 13, 0.95) !important;
     --border-color-accent: #00ff88 !important;
-    --border-color-primary: #00ff8833 !important;
+    --border-color-primary: #00ff8844 !important;
     --color-accent: #00ff88 !important;
     --color-text-primary: #ff1493 !important; /* HOT PINK */
     --color-text-secondary: #ff69b4 !important; /* LIGHTER HOT PINK */
     --button-primary-background-color: #00ff88 !important;
     --button-primary-text-color: #001a1a !important;
-    --shadow-color: rgba(0, 255, 136, 0.5) !important;
-    --block-background-fill: rgba(0, 26, 26, 0.7) !important;
-    --block-border-color: #00ff8866 !important;
-    --block-shadow: 0 0 30px rgba(0, 255, 136, 0.4), 0 0 60px rgba(0, 255, 204, 0.2) !important;
+    --shadow-color: rgba(0, 255, 136, 0.3) !important;
+    --block-background-fill: rgba(0, 26, 26, 0.8) !important;
+    --block-border-color: #00ff8855 !important;
+    --block-shadow: 0 8px 32px rgba(0, 255, 136, 0.15), 0 0 0 1px rgba(0, 255, 136, 0.1) !important;
 }
 
-/* Headers with jade neon glow */
+/* Add a subtle vignette effect */
+.vignette-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, transparent 0%, rgba(0, 10, 10, 0.4) 100%);
+    pointer-events: none;
+    z-index: 10;
+}
+
+/* Headers with jade neon glow - more subtle */
 h1 {
     font-family: 'Audiowide', cursive !important;
     color: #ff1493 !important; /* HOT PINK */
     text-shadow: 
+        0 0 10px #ff1493,
         0 0 20px #ff1493,
-        0 0 40px #ff1493,
-        0 0 60px #ff1493,
-        0 0 80px #ff69b4,
-        0 0 100px #ff69b4,
-        0 0 120px #ff69b4,
-        0 0 140px #ff69b4 !important;
+        0 0 30px #ff69b4,
+        0 0 40px #ff69b4 !important;
     font-size: 4em !important;
     letter-spacing: 6px !important;
     position: relative;
-    animation: jade-glow 2s ease-in-out infinite alternate;
+    /* Removed pulsing animation for less distraction */
 }
 
 h1::before {
@@ -341,24 +364,16 @@ h1::before {
     background: none;
     color: #ff1493;
     text-shadow: 
+        0 0 10px #ff1493,
         0 0 20px #ff1493,
-        0 0 40px #ff1493,
-        0 0 60px #ff1493,
-        0 0 80px #ff69b4,
-        0 0 100px #ff69b4,
-        0 0 120px #ff69b4,
-        0 0 140px #ff69b4;
-    filter: blur(3px);
-}
-
-@keyframes jade-glow {
-    from { filter: brightness(1) drop-shadow(0 0 20px #00ff88); }
-    to { filter: brightness(1.2) drop-shadow(0 0 40px #00ffcc); }
+        0 0 30px #ff69b4;
+    filter: blur(2px);
+    opacity: 0.5;
 }
 
 h2, h3, h4, h5, h6 {
     color: #ff1493 !important; /* HOT PINK */
-    text-shadow: 0 0 15px #ff1493 !important;
+    text-shadow: 0 0 8px #ff149350 !important; /* Softer glow */
     font-family: 'Exo 2', sans-serif !important;
     font-weight: 700 !important;
     letter-spacing: 2px !important;
@@ -375,131 +390,85 @@ p, .prose {
 
 /* Input fields with jade synthwave style */
 input[type="text"], textarea, select, .gr-dropdown {
-    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 204, 0.05) 100%) !important;
-    border: 2px solid #00ff88 !important;
+    background: linear-gradient(135deg, rgba(0, 26, 26, 0.95) 0%, rgba(0, 51, 51, 0.9) 100%) !important;
+    border: 2px solid #00ff8866 !important;
     color: #ff1493 !important; /* HOT PINK */
     box-shadow: 
-        inset 0 0 20px rgba(0, 255, 136, 0.2),
-        0 0 30px rgba(0, 255, 136, 0.3) !important;
+        inset 0 2px 8px rgba(0, 0, 0, 0.3),
+        0 0 20px rgba(0, 255, 136, 0.1) !important;
     backdrop-filter: blur(10px) !important;
     font-family: 'Exo 2', monospace !important;
     font-size: 1.1em !important;
     font-weight: 400 !important;
     padding: 12px !important;
+    transition: all 0.2s ease !important;
 }
 
 input[type="text"]:focus, textarea:focus {
     border-color: #00ffcc !important;
     box-shadow: 
-        inset 0 0 30px rgba(0, 255, 204, 0.3),
-        0 0 40px rgba(0, 255, 204, 0.5) !important;
+        inset 0 2px 8px rgba(0, 0, 0, 0.2),
+        0 0 30px rgba(0, 255, 204, 0.3) !important;
     color: #ff1493 !important; /* HOT PINK */
-    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 204, 0.1) 100%) !important;
+    background: linear-gradient(135deg, rgba(0, 51, 51, 0.95) 0%, rgba(0, 77, 77, 0.9) 100%) !important;
 }
 
-/* Chatbot styling with jade theme */
+/* Chatbot styling with jade theme - removed animation */
 #component-chat {
-    background: linear-gradient(135deg, rgba(0, 26, 26, 0.8) 0%, rgba(0, 51, 51, 0.6) 100%) !important;
+    background: linear-gradient(135deg, rgba(0, 26, 26, 0.9) 0%, rgba(0, 51, 51, 0.7) 100%) !important;
     border: 2px solid #00ff8866 !important;
     box-shadow: 
-        0 0 40px rgba(0, 255, 136, 0.3),
-        inset 0 0 40px rgba(0, 255, 136, 0.1) !important;
+        0 0 20px rgba(0, 255, 136, 0.2),
+        inset 0 0 20px rgba(0, 255, 136, 0.05) !important;
     position: relative;
     overflow: hidden;
 }
 
-#component-chat::before {
-    content: "";
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: linear-gradient(45deg, transparent, #00ff8811, transparent);
-    animation: chat-shine 3s linear infinite;
-}
-
-@keyframes chat-shine {
-    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
-    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
-}
-
 #component-chat .message.user {
-    background: linear-gradient(135deg, #00ff8833 0%, #00cc6633 100%) !important;
+    background: linear-gradient(135deg, rgba(0, 51, 51, 0.9) 0%, rgba(0, 77, 77, 0.8) 100%) !important;
     color: #ff1493 !important; /* HOT PINK */
-    border: 1px solid #00ff8866 !important;
-    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
+    border: 1px solid #00ff8844 !important;
+    box-shadow: 
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        0 0 20px rgba(0, 255, 136, 0.1) !important;
     font-size: 1.05em !important;
     font-weight: 400 !important;
 }
 
 #component-chat .message.bot {
-    background: linear-gradient(135deg, #00ffcc22 0%, #0099cc22 100%) !important;
+    background: linear-gradient(135deg, rgba(0, 26, 26, 0.95) 0%, rgba(0, 51, 51, 0.9) 100%) !important;
     color: #ff1493 !important; /* HOT PINK */
-    border: 1px solid #00ffcc44 !important;
-    box-shadow: 0 0 20px rgba(0, 255, 204, 0.2) !important;
+    border: 1px solid #00ffcc33 !important;
+    box-shadow: 
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        0 0 20px rgba(0, 255, 204, 0.1) !important;
     font-size: 1.05em !important;
     font-weight: 400 !important;
 }
 
-/* Buttons with jade energy */
+/* Buttons with jade energy - subtle hover */
 .gr-button-primary {
     background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%) !important;
     color: #001a1a !important;
     border: none !important;
     box-shadow: 
-        0 0 30px rgba(0, 255, 136, 0.6),
-        0 4px 15px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+        0 4px 15px rgba(0, 255, 136, 0.3),
+        0 2px 5px rgba(0, 0, 0, 0.2) !important;
     text-transform: uppercase !important;
     letter-spacing: 3px !important;
     font-weight: 900 !important;
     font-size: 1.1em !important;
     position: relative;
     overflow: hidden;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button-primary::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
-    transition: left 0.5s;
-}
-
-.gr-button-primary::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.gr-button-primary:hover::before {
-    left: 100%;
-}
-
-.gr-button-primary:hover::after {
-    width: 300px;
-    height: 300px;
+    transition: all 0.2s ease !important;
 }
 
 .gr-button-primary:hover {
     background: linear-gradient(135deg, #00ffaa 0%, #00ff88 100%) !important;
     box-shadow: 
-        0 0 50px rgba(0, 255, 136, 0.8),
-        0 4px 20px rgba(0, 0, 0, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
-    transform: translateY(-2px) scale(1.02);
+        0 6px 20px rgba(0, 255, 136, 0.4),
+        0 2px 5px rgba(0, 0, 0, 0.3) !important;
+    transform: translateY(-1px);
 }
 
 .gr-button-secondary {
@@ -507,40 +476,21 @@ input[type="text"]:focus, textarea:focus {
     color: #ff1493 !important; /* HOT PINK */
     border: 2px solid #00ffcc !important;
     box-shadow: 
-        0 0 20px rgba(0, 255, 204, 0.4),
-        inset 0 0 20px rgba(0, 255, 204, 0.1) !important;
+        0 0 10px rgba(0, 255, 204, 0.2),
+        inset 0 0 10px rgba(0, 255, 204, 0.05) !important;
     text-transform: uppercase !important;
     letter-spacing: 2px !important;
     font-weight: 700 !important;
     font-size: 1em !important;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button-secondary::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 100%;
-    background: rgba(0, 255, 204, 0.2);
-    transform: translate(-50%, -50%);
-    transition: width 0.3s;
-}
-
-.gr-button-secondary:hover::before {
-    width: 100%;
+    transition: all 0.2s ease !important;
 }
 
 .gr-button-secondary:hover {
     background: rgba(0, 255, 204, 0.1) !important;
     color: #ff69b4 !important; /* LIGHTER HOT PINK on hover */
     box-shadow: 
-        0 0 30px rgba(0, 255, 204, 0.6),
-        inset 0 0 25px rgba(0, 255, 204, 0.2) !important;
-    transform: scale(1.05);
+        0 0 15px rgba(0, 255, 204, 0.3),
+        inset 0 0 15px rgba(0, 255, 204, 0.1) !important;
 }
 
 /* Sliders with jade glow */
@@ -596,48 +546,23 @@ input[type="text"]:focus, textarea:focus {
     background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 204, 0.15) 100%) !important;
 }
 
-/* Status display with jade pulse */
+/* Status display with jade style - no pulsing */
 #status_display {
-    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 204, 0.15) 100%) !important;
+    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 204, 0.1) 100%) !important;
     border: 2px solid #00ff88 !important;
     color: #ff1493 !important; /* HOT PINK */
-    text-shadow: 0 0 10px rgba(255, 20, 147, 0.8) !important;
+    text-shadow: 0 0 5px rgba(255, 20, 147, 0.4) !important;
     padding: 20px !important;
     margin: 30px 0 !important;
     box-shadow: 
-        0 0 40px rgba(0, 255, 136, 0.4),
-        inset 0 0 30px rgba(0, 255, 136, 0.1) !important;
+        0 0 20px rgba(0, 255, 136, 0.2),
+        inset 0 0 15px rgba(0, 255, 136, 0.05) !important;
     font-weight: 700 !important;
     text-transform: uppercase !important;
     letter-spacing: 2px !important;
     font-size: 1.2em !important;
     position: relative;
     overflow: hidden;
-    animation: status-pulse 2s ease-in-out infinite;
-}
-
-@keyframes status-pulse {
-    0%, 100% { box-shadow: 0 0 40px rgba(0, 255, 136, 0.4), inset 0 0 30px rgba(0, 255, 136, 0.1); }
-    50% { box-shadow: 0 0 60px rgba(0, 255, 136, 0.6), inset 0 0 40px rgba(0, 255, 136, 0.2); }
-}
-
-#status_display::before {
-    content: "";
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    right: -2px;
-    bottom: -2px;
-    background: linear-gradient(45deg, #00ff88, #00ffcc, #00ff88);
-    z-index: -1;
-    opacity: 0.7;
-    filter: blur(10px);
-    animation: status-border 3s linear infinite;
-}
-
-@keyframes status-border {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
 }
 
 /* File upload with jade style */
@@ -884,26 +809,37 @@ function forceDarkMode() {
 }
 document.addEventListener('DOMContentLoaded', forceDarkMode);
 
-// Add jade orb element and animations
+// Add jade orb element and minimal particles
 document.addEventListener('DOMContentLoaded', () => {
+    // Create vignette overlay
+    const vignette = document.createElement('div');
+    vignette.className = 'vignette-overlay';
+    document.body.appendChild(vignette);
+    
+    // Create perspective grid
+    const grid = document.createElement('div');
+    grid.className = 'grid-background';
+    document.body.appendChild(grid);
+    
     // Create jade orb
     const orb = document.createElement('div');
     orb.className = 'jade-orb';
     document.body.appendChild(orb);
     
-    // Create floating particles
-    for (let i = 0; i < 30; i++) {
+    // Create fewer, slower floating particles
+    for (let i = 0; i < 15; i++) {
         const particle = document.createElement('div');
         particle.style.position = 'fixed';
-        particle.style.width = Math.random() * 4 + 'px';
+        particle.style.width = Math.random() * 3 + 1 + 'px';
         particle.style.height = particle.style.width;
-        particle.style.background = i % 2 === 0 ? '#ff1493' : '#ff69b4'; // Hot pink particles
+        particle.style.background = i % 2 === 0 ? '#ff149333' : '#ff69b433'; // Semi-transparent hot pink
         particle.style.borderRadius = '50%';
         particle.style.left = Math.random() * 100 + '%';
         particle.style.top = Math.random() * 100 + '%';
-        particle.style.boxShadow = `0 0 ${Math.random() * 10 + 5}px currentColor`;
-        particle.style.animation = `particle-float ${Math.random() * 20 + 10}s linear infinite`;
+        particle.style.boxShadow = `0 0 ${Math.random() * 5 + 2}px currentColor`;
+        particle.style.animation = `particle-float ${Math.random() * 30 + 20}s linear infinite`;
         particle.style.zIndex = '-1';
+        particle.style.opacity = '0.3';
         document.body.appendChild(particle);
     }
     
@@ -921,29 +857,27 @@ const style = document.createElement('style');
 style.textContent = `
     @keyframes particle-float {
         from { transform: translateY(100vh) rotate(0deg); opacity: 0; }
-        10% { opacity: 1; }
-        90% { opacity: 1; }
-        to { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
+        20% { opacity: 0.3; }
+        80% { opacity: 0.3; }
+        to { transform: translateY(-100vh) rotate(180deg); opacity: 0; }
     }
 `;
 document.head.appendChild(style);
 
-// Add subtle CRT flicker effect
-setInterval(() => {
-    if (Math.random() > 0.98) {
-        document.body.style.opacity = '0.99';
-        setTimeout(() => { document.body.style.opacity = '1'; }, 50);
-    }
-}, 100);
-
-// Dynamic glow effect on mouse
-document.addEventListener('mousemove', (e) => {
-    const glow = document.querySelector('.jade-orb');
-    if (glow) {
-        const x = (e.clientX / window.innerWidth - 0.5) * 30;
-        const y = (e.clientY / window.innerHeight - 0.5) * 30;
-        glow.style.transform = `translate(${x}px, ${y}px)`;
-    }
+// Very subtle CRT flicker effect
+let flickerInterval;
+document.addEventListener('DOMContentLoaded', () => {
+    flickerInterval = setInterval(() => {
+        if (Math.random() > 0.995) {
+            document.body.style.opacity = '0.99';
+            setTimeout(() => { document.body.style.opacity = '1'; }, 30);
+        }
+    }, 500);
+});
+
+// Clean up on page unload
+window.addEventListener('unload', () => {
+    if (flickerInterval) clearInterval(flickerInterval);
 });
 """