Update client/src/App.jsx

client/src/App.jsx

@@ -3,16 +3,24 @@ 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)
+// --- THE GOD MODE MODEL LIST ---
+//
 const AI_MODELS = [
-  { 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)' },
+  // FLUX FAMILY
+  { id: 'black-forest-labs/FLUX.1-schnell', name: 'FLUX.1 Schnell (Fastest)' },
+  { id: 'black-forest-labs/FLUX.1-dev',     name: 'FLUX.1 Dev (High Quality)' },
+  { id: 'black-forest-labs/FLUX.1-pro',     name: 'FLUX.1 Pro (Ultra)' },
+  
+  // THE "KONTEXT" YOU REQUESTED
+  { id: 'black-forest-labs/FLUX.1-Kontext', name: 'FLUX.1 Kontext (Special)' },
+
+  // OPENAI & OTHERS
+  { id: 'openai/dall-e-3',                  name: 'DALL-E 3 (GPT-4o Engine)' },
+  { id: 'grok-2-image',                     name: 'Grok 2 (xAI)' },
 ];
 
 const ASPECT_RATIOS = [
@@ -26,14 +34,14 @@ const ASPECT_RATIOS = [
 function App() {
   const [session, setSession] = useState(null);
   const [prompt, setPrompt] = useState("");
-  const [selectedModel, setSelectedModel] = useState(AI_MODELS[2].id); // Default to Klein
+  const [selectedModel, setSelectedModel] = useState(AI_MODELS[0].id);
   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
+  // Image Input State
+  const [inputImage, setInputImage] = useState(null); 
+  const [previewUrl, setPreviewUrl] = useState(null); 
   const fileInputRef = useRef(null);
 
   useEffect(() => {
@@ -47,7 +55,6 @@ function App() {
     if (error) alert("Login failed: " + error.message);
   };
 
-  // Handle File Upload
   const handleFileChange = (e) => {
     const file = e.target.files[0];
     if (file) {
@@ -65,20 +72,24 @@ function App() {
       if (!window.puter.auth.isSignedIn()) await window.puter.auth.signIn();
       
       const ratioConfig = ASPECT_RATIOS.find(r => r.id === selectedRatio);
+      // DALL-E 3 handles ratios differently (params), but Flux uses prompt suffixes.
+      // We append mostly for Flux, Puter handles DALL-E 3 best-effort mapping.
       const finalPrompt = `${prompt} ${ratioConfig.promptSuffix}`;
       
       let imgElement;
 
-      // MODE A: IMAGE EDITING (img2img)
-      if (inputImage) {
-        // Puter txt2img accepts input_image for editing
+      // MODE CHECK: DALL-E 3 does NOT support img2img input in this API version
+      if (inputImage && selectedModel.includes('dall-e-3')) {
+         alert("Note: DALL-E 3 ignores input images. Switching to Text generation.");
+         imgElement = await window.puter.ai.txt2img(finalPrompt, { model: selectedModel });
+      } 
+      else if (inputImage) {
+        // Try to use input image for supported models
         imgElement = await window.puter.ai.txt2img(finalPrompt, {
             model: selectedModel,
-            input_image: inputImage 
+            image: inputImage
         });
-      } 
-      // MODE B: TEXT TO IMAGE
-      else {
+      } else {
         imgElement = await window.puter.ai.txt2img(finalPrompt, {
             model: selectedModel
         });
@@ -86,7 +97,9 @@ function App() {
       
       setImageSrc(imgElement.src);
     } catch (e) {
-      alert("Error: " + e.message);
+      console.error(e);
+      // Puter errors can be vague, usually it's "Model Busy" or "Invalid Param"
+      alert("Generation Error: " + (e.message || "Model failed. Try a different one."));
     } finally {
       setGenerating(false);
     }
@@ -103,7 +116,7 @@ function App() {
         <div className="logo-glass"><div className="logo-text">TEK IMAGE GEN</div></div>
         <div className="sub-brand">TEKTREY BUILDs</div>
         <p style={{color: '#888', fontSize: '0.85rem', marginBottom: '30px', fontFamily: 'monospace'}}>
-          Generate unlimitedly. Edit Images. 3 every 5mins.
+          Unlimited Generation. DALL-E 3 + FLUX + KONTEXT.
         </p>
         <button onClick={handleLogin} style={{padding: '18px 50px', fontSize: '1.2rem'}}>LET'S DREAM</button>
       </div>
@@ -126,11 +139,11 @@ function App() {
            <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 value={selectedRatio} onChange={(e) => setSelectedRatio(e.target.value)} style={{padding: '8px', fontSize: '0.75rem', width: 'auto', maxWidth: '80px', color:'black'}}>
+            {ASPECT_RATIOS.map(r => <option key={r.id} value={r.id}>{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 value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} style={{padding: '8px', fontSize: '0.75rem', width: 'auto', maxWidth: '120px', color:'black'}}>
+            {AI_MODELS.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
           </select>
         </div>
       </div>
@@ -154,7 +167,7 @@ function App() {
         )}
       </div>
 
-      {/* INPUT DOCK & UPLOAD */}
+      {/* INPUT DOCK */}
       <div style={{
         position: 'fixed', bottom: 0, left: 0, right: 0,
         padding: '10px 20px 30px 20px',
@@ -166,7 +179,7 @@ function App() {
           <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>
+                <button onClick={() => {setPreviewUrl(null); setInputImage(null);}} style={{position: 'absolute', top: -5, right: -5, padding: '2px 6px', fontSize: '10px', background: 'red', border:'none', color:'white', borderRadius:'4px', cursor:'pointer'}}>X</button>
              </div>
           </div>
         )}
@@ -191,7 +204,6 @@ function App() {
             }} 
           />
           
-          {/* RUN BUTTON */}
           <button 
             onClick={handleGenerate} disabled={generating}
             style={{