Update client/src/App.jsx

client/src/App.jsx

@@ -1,23 +1,40 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { createClient } from '@supabase/supabase-js';
 
 // --- CONFIG ---
 const SUPABASE_URL = "https://whpciwshxecjvalksicw.supabase.co"; 
-const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndocGNpd3NoeGVjanZhbGtzaWN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzAxNDQyNjYsImV4cCI6MjA4NTcyMDI2Nn0.TwWAlQCUstvGykPhaDhPAVpTyg2MV7eltG7JFvjZ-zU"; // <--- PASTE KEY HERE
+const SUPABASE_ANON_KEY = "PASTE_YOUR_ANON_KEY_HERE"; // <--- PASTE KEY HERE
 
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
+// UPDATED MODEL LIST (Includes Klien 2)
 const AI_MODELS = [
-  { id: 'flux-schnell', name: 'FLUX.1 (Fast)', type: 'image' },
-  { id: 'flux-dev', name: 'FLUX.1 (HD)', type: 'image' },
+  { id: 'black-forest-labs/FLUX.1-schnell', name: 'FLUX.1 (Fast)' },
+  { id: 'black-forest-labs/FLUX.1-dev', name: 'FLUX.1 (HD)' },
+  { id: 'black-forest-labs/FLUX.2-klein-4B', name: 'FLUX.2 Klein (Fast/Edit)' }, // Good for edits
+  { id: 'black-forest-labs/FLUX.2-klein-9B', name: 'FLUX.2 Klein (Pro/Edit)' },
+];
+
+const ASPECT_RATIOS = [
+  { id: '1:1', name: 'Square (1:1)', promptSuffix: '--ar 1:1' },
+  { id: '16:9', name: 'Landscape (16:9)', promptSuffix: '--ar 16:9' },
+  { id: '9:16', name: 'Portrait (9:16)', promptSuffix: '--ar 9:16' },
+  { id: '21:9', name: 'Cinema (21:9)', promptSuffix: '--ar 21:9' },
+  { id: '3:2', name: 'Photo (3:2)', promptSuffix: '--ar 3:2' },
 ];
 
 function App() {
   const [session, setSession] = useState(null);
   const [prompt, setPrompt] = useState("");
-  const [selectedModel, setSelectedModel] = useState(AI_MODELS[0].id);
+  const [selectedModel, setSelectedModel] = useState(AI_MODELS[2].id); // Default to Klein
+  const [selectedRatio, setSelectedRatio] = useState(ASPECT_RATIOS[0].id);
   const [generating, setGenerating] = useState(false);
   const [imageSrc, setImageSrc] = useState(null);
+  
+  // NEW: Image Input for Editing
+  const [inputImage, setInputImage] = useState(null); // Blob for API
+  const [previewUrl, setPreviewUrl] = useState(null); // URL for UI
+  const fileInputRef = useRef(null);
 
   useEffect(() => {
     supabase.auth.getSession().then(({ data: { session } }) => setSession(session));
@@ -30,15 +47,43 @@ function App() {
     if (error) alert("Login failed: " + error.message);
   };
 
+  // Handle File Upload
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setInputImage(file);
+      setPreviewUrl(URL.createObjectURL(file));
+    }
+  };
+
   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();
-      const imgElement = await window.puter.ai.txt2img(prompt);
+      
+      const ratioConfig = ASPECT_RATIOS.find(r => r.id === selectedRatio);
+      const finalPrompt = `${prompt} ${ratioConfig.promptSuffix}`;
+      
+      let imgElement;
+
+      // MODE A: IMAGE EDITING (img2img)
+      if (inputImage) {
+        // Puter txt2img accepts input_image for editing
+        imgElement = await window.puter.ai.txt2img(finalPrompt, {
+            model: selectedModel,
+            input_image: inputImage 
+        });
+      } 
+      // MODE B: TEXT TO IMAGE
+      else {
+        imgElement = await window.puter.ai.txt2img(finalPrompt, {
+            model: selectedModel
+        });
+      }
+      
       setImageSrc(imgElement.src);
     } catch (e) {
       alert("Error: " + e.message);
@@ -47,7 +92,6 @@ function App() {
     }
   };
 
-  // --- LOGIN SCREEN ---
   if (!session) {
     return (
       <div style={{
@@ -56,103 +100,109 @@ function App() {
         background: 'radial-gradient(circle at center, #1a1a1a 0%, #000 100%)',
         padding: '20px', textAlign: 'center'
       }}>
-        
-        {/* BRANDING */}
-        <div className="logo-glass">
-          <div className="logo-text">TEK IMAGE GEN</div>
-        </div>
+        <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 style={{color: '#888', fontSize: '0.85rem', marginBottom: '30px', fontFamily: 'monospace'}}>
+          Generate unlimitedly. Edit Images. 3 every 5mins.
         </p>
-        
-        {/* THE DREAM BUTTON */}
-        <button onClick={handleLogin} style={{padding: '18px 50px', fontSize: '1.2rem'}}>
-          LET'S DREAM
-        </button>
+        <button onClick={handleLogin} style={{padding: '18px 50px', fontSize: '1.2rem'}}>LET'S DREAM</button>
       </div>
     );
   }
 
-  // --- GENERATION HUB ---
   return (
     <div style={{
       minHeight: '100vh', display: 'flex', flexDirection: 'column',
-      maxWidth: '100%', margin: '0 auto', paddingBottom: '120px'
+      maxWidth: '100%', margin: '0 auto', paddingBottom: '140px'
     }}>
       
       {/* HEADER */}
       <div style={{
         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'
+        position: 'sticky', top: 0, zIndex: 10, borderBottom: '1px solid #333', gap: '10px'
       }}>
-        <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 className="logo-glass" style={{padding: '5px 15px', borderRadius: '8px', marginBottom: 0, animation: 'none', flexShrink: 0}}>
+           <span style={{fontSize: '0.9rem', fontWeight: 'bold', color: 'white'}}>TEK</span>
+        </div>
+        <div style={{display: 'flex', gap: '8px'}}>
+          <select value={selectedRatio} onChange={(e) => setSelectedRatio(e.target.value)} style={{padding: '8px', fontSize: '0.75rem', width: 'auto', maxWidth: '80px'}}>
+            {ASPECT_RATIOS.map(r => <option key={r.id} value={r.id} style={{color:'black'}}>{r.name}</option>)}
+          </select>
+          <select value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} style={{padding: '8px', fontSize: '0.75rem', width: 'auto', maxWidth: '100px'}}>
+            {AI_MODELS.map(m => <option key={m.id} value={m.id} style={{color:'black'}}>{m.name}</option>)}
+          </select>
         </div>
-        
-        <select 
-          value={selectedModel}
-          onChange={(e) => setSelectedModel(e.target.value)}
-          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 (BEAR vs IMAGE) */}
+      {/* VIEWPORT */}
       <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'}} />
+            <img src={imageSrc} alt="Generated" style={{maxWidth: '100%', maxHeight: '60vh', borderRadius: '8px'}} />
           </div>
         ) : (
-          /* EMPTY STATE */
           <div style={{textAlign: 'center', opacity: 0.3}}>
             <div style={{fontSize: '50px', marginBottom: '10px'}}>❖</div>
-            <p>READY FOR INPUT</p>
+            <p>READY</p>
           </div>
         )}
       </div>
 
-      {/* INPUT DOCK */}
+      {/* INPUT DOCK & UPLOAD */}
       <div style={{
         position: 'fixed', bottom: 0, left: 0, right: 0,
-        padding: '15px 20px 30px 20px',
-        background: 'linear-gradient(to top, #000 90%, transparent)',
-        display: 'flex', alignItems: 'flex-end', gap: '10px', zIndex: 20
+        padding: '10px 20px 30px 20px',
+        background: 'linear-gradient(to top, #000 95%, transparent)',
+        zIndex: 20
       }}>
-        <textarea 
-          value={prompt} onChange={e => setPrompt(e.target.value)} 
-          placeholder="COMMAND: Cyberpunk street..." 
-          style={{
-            flex: 1, padding: '15px', fontSize: '16px', height: '50px', 
-            borderRadius: '25px', resize: 'none'
-          }} 
-        />
-        <button 
-          onClick={handleGenerate} disabled={generating}
-          style={{
-            height: '54px', width: '54px', borderRadius: '50%',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            background: generating ? '#333' : '#55ff55'
-          }}
-        >
-          {generating ? '...' : '▶'}
-        </button>
+        {/* HOLO BOX (Mini Uploader) */}
+        {previewUrl && (
+          <div style={{position: 'absolute', bottom: '90px', left: '20px', zIndex: 30}}>
+             <div className="holo-box" style={{padding: '5px', marginBottom: 0, display: 'inline-block'}}>
+                <img src={previewUrl} style={{height: '60px', borderRadius: '4px'}} />
+                <button onClick={() => {setPreviewUrl(null); setInputImage(null);}} style={{position: 'absolute', top: -5, right: -5, padding: '2px 6px', fontSize: '10px', background: 'red'}}>X</button>
+             </div>
+          </div>
+        )}
+
+        <div style={{display: 'flex', alignItems: 'flex-end', gap: '10px'}}>
+          {/* UPLOAD BUTTON */}
+          <div onClick={() => fileInputRef.current.click()} style={{
+             height: '50px', width: '50px', borderRadius: '50%', background: '#333', 
+             display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', border: '1px solid #555'
+          }}>
+             <span style={{fontSize: '24px'}}>📷</span>
+          </div>
+          <input type="file" ref={fileInputRef} onChange={handleFileChange} style={{display: 'none'}} accept="image/*" />
+
+          {/* TEXT INPUT */}
+          <textarea 
+            value={prompt} onChange={e => setPrompt(e.target.value)} 
+            placeholder={previewUrl ? "COMMAND: Change background to..." : "COMMAND: Cyberpunk street..."} 
+            style={{
+              flex: 1, padding: '15px', fontSize: '16px', height: '50px', 
+              borderRadius: '25px', resize: 'none'
+            }} 
+          />
+          
+          {/* RUN BUTTON */}
+          <button 
+            onClick={handleGenerate} disabled={generating}
+            style={{
+              height: '54px', width: '54px', borderRadius: '50%',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              background: generating ? '#333' : '#55ff55'
+            }}
+          >
+            {generating ? '...' : '▶'}
+          </button>
+        </div>
       </div>
     </div>
   );