Update client/src/App.jsx

client/src/App.jsx

@@ -3,15 +3,13 @@ import { createClient } from '@supabase/supabase-js';
 
 // --- CONFIG ---
 const SUPABASE_URL = "https://whpciwshxecjvalksicw.supabase.co"; 
-const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndocGNpd3NoeGVjanZhbGtzaWN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzAxNDQyNjYsImV4cCI6MjA4NTcyMDI2Nn0.TwWAlQCUstvGykPhaDhPAVpTyg2MV7eltG7JFvjZ-zU"; // <--- REMEMBER TO PASTE THIS!
+const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndocGNpd3NoeGVjanZhbGtzaWN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzAxNDQyNjYsImV4cCI6MjA4NTcyMDI2Nn0.TwWAlQCUstvGykPhaDhPAVpTyg2MV7eltG7JFvjZ-zU"; // <--- PASTE KEY HERE
 
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
-// Currently supported models via Puter (we default to Flux for images)
 const AI_MODELS = [
-  { id: 'flux-schnell', name: 'FLUX.1 (Speed)', type: 'image' },
-  { id: 'flux-dev', name: 'FLUX.1 (Quality)', type: 'image' },
-  { id: 'sdxl', name: 'SDXL Turbo', type: 'image' }
+  { id: 'flux-schnell', name: 'FLUX.1 (Fast)', type: 'image' },
+  { id: 'flux-dev', name: 'FLUX.1 (HD)', type: 'image' },
 ];
 
 function App() {
@@ -35,14 +33,12 @@ function App() {
   const handleGenerate = async () => {
     if (!prompt) return;
     setGenerating(true);
+    // Clear previous image so we can see the bear
+    setImageSrc(null); 
+    
     try {
       if (!window.puter.auth.isSignedIn()) await window.puter.auth.signIn();
-      
-      // Note: Puter.js currently auto-routes to best model, but passing model params 
-      // is possible in their lower-level API. For this UI, we just simulate the selection
-      // to show you where it would go.
       const imgElement = await window.puter.ai.txt2img(prompt);
-      
       setImageSrc(imgElement.src);
     } catch (e) {
       alert("Error: " + e.message);
@@ -51,109 +47,108 @@ function App() {
     }
   };
 
-  // --- LOGIN SCREEN (Neon Portal) ---
+  // --- LOGIN SCREEN ---
   if (!session) {
     return (
       <div style={{
         height: '100vh', display: 'flex', flexDirection: 'column', 
         alignItems: 'center', justifyContent: 'center', 
-        background: 'radial-gradient(circle at center, #2e2e2e 0%, #121212 100%)'
+        background: 'radial-gradient(circle at center, #1a1a1a 0%, #000 100%)',
+        padding: '20px', textAlign: 'center'
       }}>
-        {/* Pixel Art Icon Placeholder */}
-        <div style={{fontSize: '60px', marginBottom: '20px'}} className="pixel-avatar">👾</div>
         
-        <h1 style={{fontSize: '3rem', margin: '0 0 2rem 0', color: '#55ff55'}}>WEB2K</h1>
-        
-        <div className="glass-panel" style={{padding: '2rem', borderRadius: '24px', textAlign: 'center'}}>
-          <p style={{marginBottom: '20px', color: '#aaa'}}>ENTER THE GRID</p>
-          <button onClick={handleLogin} style={{padding: '16px 40px', fontSize: '1.2rem'}}>
-            START_GAME
-          </button>
+        {/* BRANDING */}
+        <div className="logo-glass">
+          <div className="logo-text">TEK IMAGE GEN</div>
         </div>
+        <div className="sub-brand">TEKTREY BUILDs</div>
+
+        {/* INFO TEXT */}
+        <p style={{
+          color: '#888', fontSize: '0.85rem', maxWidth: '300px', 
+          lineHeight: '1.4', marginBottom: '30px', fontFamily: 'monospace'
+        }}>
+          Generate images unlimitedly but consider 3 every 5mins. Enjoy.
+        </p>
+        
+        {/* THE DREAM BUTTON */}
+        <button onClick={handleLogin} style={{padding: '18px 50px', fontSize: '1.2rem'}}>
+          LET'S DREAM
+        </button>
       </div>
     );
   }
 
-  // --- MAIN APP (The Cockpit) ---
+  // --- GENERATION HUB ---
   return (
     <div style={{
-      minHeight: '100vh', 
-      display: 'flex', flexDirection: 'column',
-      maxWidth: '100%', margin: '0 auto',
-      position: 'relative',
-      paddingBottom: '120px' // Space for bottom bar
+      minHeight: '100vh', display: 'flex', flexDirection: 'column',
+      maxWidth: '100%', margin: '0 auto', paddingBottom: '120px'
     }}>
       
       {/* HEADER */}
       <div style={{
-        padding: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-        background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)',
-        position: 'sticky', top: 0, zIndex: 10
+        padding: '15px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+        background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)',
+        position: 'sticky', top: 0, zIndex: 10, borderBottom: '1px solid #333'
       }}>
-        <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
-           <span style={{color: '#aa00ff', fontSize: '24px'}}>◆</span>
-           <span style={{fontWeight: 'bold', fontSize: '1.2rem'}}>FLUX_GEN</span>
+        <div className="logo-glass" style={{padding: '5px 15px', borderRadius: '8px', marginBottom: 0, animation: 'none'}}>
+           <span style={{fontSize: '0.9rem', fontWeight: 'bold', color: 'white'}}>TEK IMAGE GEN</span>
         </div>
         
-        {/* Model Dropdown (Glass) */}
         <select 
           value={selectedModel}
           onChange={(e) => setSelectedModel(e.target.value)}
-          style={{
-            padding: '8px 16px', fontSize: '0.8rem',
-            background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)'
-          }}
+          style={{padding: '8px', fontSize: '0.8rem', width: '120px'}}
         >
           {AI_MODELS.map(m => <option key={m.id} value={m.id} style={{color:'black'}}>{m.name}</option>)}
         </select>
       </div>
 
-      {/* VIEWPORT (Image Display) */}
-      <div style={{
-        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', 
-        padding: '20px', flexDirection: 'column'
-      }}>
-        {imageSrc ? (
+      {/* VIEWPORT (BEAR vs IMAGE) */}
+      <div style={{flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px', flexDirection: 'column'}}>
+        
+        {generating ? (
+          /* 🐻 THE DANCING BEAR 🐻 */
+          <div style={{textAlign: 'center'}}>
+            <div className="dancing-bear">🐻</div>
+            <p style={{marginTop: '20px', color: '#55ff55', letterSpacing: '2px', animation: 'pulse 1s infinite'}}>DREAMING...</p>
+          </div>
+        ) : imageSrc ? (
+          /* THE RESULT */
           <div className="glass-panel" style={{padding: '10px', borderRadius: '16px', maxWidth: '100%'}}>
             <img src={imageSrc} alt="Generated" style={{width: '100%', borderRadius: '8px', display: 'block'}} />
           </div>
         ) : (
-          <div style={{textAlign: 'center', opacity: 0.5}}>
-            <div className="pixel-avatar" style={{fontSize: '48px', marginBottom: '10px'}}>🖼️</div>
-            <p>NO_DATA_RECEIVED</p>
+          /* EMPTY STATE */
+          <div style={{textAlign: 'center', opacity: 0.3}}>
+            <div style={{fontSize: '50px', marginBottom: '10px'}}>❖</div>
+            <p>READY FOR INPUT</p>
           </div>
         )}
       </div>
 
-      {/* INPUT DOCK (Bottom Bar) */}
+      {/* INPUT DOCK */}
       <div style={{
         position: 'fixed', bottom: 0, left: 0, right: 0,
-        padding: '15px 20px 30px 20px', // Extra bottom padding for mobile safe area
-        background: 'linear-gradient(to top, #121212 80%, transparent)',
-        display: 'flex', alignItems: 'flex-end', gap: '10px',
-        zIndex: 20
+        padding: '15px 20px 30px 20px',
+        background: 'linear-gradient(to top, #000 90%, transparent)',
+        display: 'flex', alignItems: 'flex-end', gap: '10px', zIndex: 20
       }}>
         <textarea 
-          value={prompt} 
-          onChange={e => setPrompt(e.target.value)} 
-          placeholder="COMMAND: Generate a pixel art city..." 
-          rows="1"
+          value={prompt} onChange={e => setPrompt(e.target.value)} 
+          placeholder="COMMAND: Cyberpunk street..." 
           style={{
-            flex: 1, padding: '14px 20px', fontSize: '16px',
-            resize: 'none', height: '50px', lineHeight: '20px',
-            borderRadius: '25px' // Pill shape input
+            flex: 1, padding: '15px', fontSize: '16px', height: '50px', 
+            borderRadius: '25px', resize: 'none'
           }} 
         />
-        
         <button 
-          onClick={handleGenerate} 
-          disabled={generating}
+          onClick={handleGenerate} disabled={generating}
           style={{
-            height: '50px', width: '50px', borderRadius: '50%', // Perfect circle button
+            height: '54px', width: '54px', borderRadius: '50%',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            background: generating ? '#333' : '#55ff55',
-            color: generating ? '#666' : 'black',
-            boxShadow: generating ? 'none' : '0 0 20px rgba(85,255,85,0.4)'
+            background: generating ? '#333' : '#55ff55'
           }}
         >
           {generating ? '...' : '▶'}