Update client/src/App.jsx

client/src/App.jsx

@@ -1,57 +1,53 @@
 import React, { useState, useEffect } from 'react';
 import { createClient } from '@supabase/supabase-js';
 
-// --- HARDCODED CONFIG (Fixes Black Screen) ---
-const SUPABASE_URL = "https://whpciwshxecjvalksicw.supabase.co";
-// PASTE YOUR KEY BELOW (The one starting with sb_publishable... or ey...)
+// --- CONFIG ---
+// Replace these with your actual URL and Key if they aren't loading from env
+const SUPABASE_URL = "https://whpciwshxecjvalksicw.supabase.co"; 
 const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndocGNpd3NoeGVjanZhbGtzaWN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzAxNDQyNjYsImV4cCI6MjA4NTcyMDI2Nn0.TwWAlQCUstvGykPhaDhPAVpTyg2MV7eltG7JFvjZ-zU"; 
 
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
 function App() {
-  // ... (Keep the rest of the code exactly the same) ...
-
   const [session, setSession] = useState(null);
-  const [driveConnected, setDriveConnected] = useState(false);
   const [prompt, setPrompt] = useState("");
   const [generating, setGenerating] = useState(false);
+  const [imageSrc, setImageSrc] = useState(null);
 
   useEffect(() => {
+    // Check if we are already logged in
     supabase.auth.getSession().then(({ data: { session } }) => {
       setSession(session);
-      if (session) checkDrive(session.user.id);
     });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+
+    return () => subscription.unsubscribe();
   }, []);
 
-  const checkDrive = async (userId) => {
-    const { data } = await supabase.from('drive_accounts').select('id').eq('user_id', userId).single();
-    if (data) setDriveConnected(true);
+  const handleLogin = async () => {
+    // SIMPLE ANONYMOUS LOGIN (No Google required)
+    const { error } = await supabase.auth.signInAnonymously();
+    if (error) alert("Login failed: " + error.message);
   };
 
   const handleGenerate = async () => {
+    if (!prompt) return;
     setGenerating(true);
     try {
-      if (!window.puter.auth.isSignedIn()) await window.puter.auth.signIn();
+      // 1. Connect Puter (No keys needed)
+      if (!window.puter.auth.isSignedIn()) {
+        await window.puter.auth.signIn();
+      }
+      
+      // 2. Generate Image
       const imgElement = await window.puter.ai.txt2img(prompt);
+      setImageSrc(imgElement.src); // Display immediately
+      
+      // (Optional) Save metadata to Supabase here if you want
       
-      const res = await fetch(imgElement.src);
-      const blob = await res.blob();
-
-      if (driveConnected) {
-        const formData = new FormData();
-        formData.append('image', blob);
-        formData.append('prompt', prompt);
-        const { data: { session } } = await supabase.auth.getSession();
-        
-        await fetch('/api/drive/upload', {
-          method: 'POST',
-          headers: { 'Authorization': `Bearer ${session.access_token}` },
-          body: formData
-        });
-        alert("Saved to Google Drive!");
-      } else {
-        alert("Generated! (Not saved - connect Drive first)");
-      }
     } catch (e) {
       alert("Error: " + e.message);
     } finally {
@@ -59,40 +55,70 @@ function App() {
     }
   };
 
-  if (!session) return (
-    <div style={{height:'100vh', display:'flex', alignItems:'center', justifyContent:'center', background:'#111', color:'white'}}>
-      <button onClick={() => supabase.auth.signInWithOAuth({ provider: 'google' })} style={{padding:'15px', fontSize:'18px', cursor:'pointer'}}>
-        Log in with Google
-      </button>
-    </div>
-  );
+  // --- LOGIN SCREEN ---
+  if (!session) {
+    return (
+      <div style={{
+        height: '100vh', display: 'flex', flexDirection: 'column', 
+        alignItems: 'center', justifyContent: 'center', 
+        background: '#111', color: 'white', fontFamily: 'sans-serif'
+      }}>
+        <h1 style={{marginBottom: '2rem'}}>FluxGen</h1>
+        <button 
+          onClick={handleLogin} 
+          style={{
+            padding: '15px 30px', fontSize: '18px', cursor: 'pointer',
+            background: '#2563eb', color: 'white', border: 'none', borderRadius: '8px'
+          }}
+        >
+          Start App (Guest Mode)
+        </button>
+      </div>
+    );
+  }
 
+  // --- MAIN APP SCREEN ---
   return (
-    <div style={{padding: '20px', background: '#111', color: '#fff', minHeight: '100vh', fontFamily: 'sans-serif'}}>
-      <h1>FluxGen + Drive</h1>
-      {!driveConnected && (
+    <div style={{
+      padding: '20px', background: '#111', color: '#fff', 
+      minHeight: '100vh', fontFamily: 'sans-serif', maxWidth: '600px', margin: '0 auto'
+    }}>
+      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px'}}>
+        <h1 style={{fontSize: '1.5rem', margin: 0}}>FluxGen</h1>
+        <button onClick={() => supabase.auth.signOut()} style={{background: 'transparent', border: '1px solid #555', color: '#aaa', padding: '5px 10px', borderRadius: '4px', cursor:'pointer'}}>Exit</button>
+      </div>
+      
+      <div style={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
+        <textarea 
+          value={prompt} 
+          onChange={e => setPrompt(e.target.value)} 
+          placeholder="Describe your image... (e.g. A cyberpunk cat)" 
+          style={{
+            width: '100%', padding: '15px', height: '100px', borderRadius: '8px', 
+            border: '1px solid #333', background: '#222', color: 'white', fontSize: '16px', resize: 'none'
+          }} 
+        />
+        
         <button 
-          onClick={() => window.location.href=`/api/drive/connect?user_id=${session.user.id}`}
-          style={{width:'100%', padding:'10px', background:'#d97706', color:'white', border:'none', borderRadius:'5px', cursor:'pointer', marginBottom:'20px'}}
+          onClick={handleGenerate} 
+          disabled={generating}
+          style={{
+            width: '100%', padding: '15px', 
+            background: generating ? '#555' : '#7c3aed', 
+            color: 'white', border: 'none', borderRadius: '8px', 
+            cursor: generating ? 'not-allowed' : 'pointer', fontSize: '16px', fontWeight: 'bold'
+          }}
         >
-          Connect Google Drive
+          {generating ? "Dreaming..." : "Generate Image"}
         </button>
+      </div>
+
+      {imageSrc && (
+        <div style={{marginTop: '30px', textAlign: 'center'}}>
+          <img src={imageSrc} alt="Generated" style={{width: '100%', borderRadius: '8px', boxShadow: '0 4px 20px rgba(0,0,0,0.5)'}} />
+          <p style={{color: '#888', marginTop: '10px', fontSize: '14px'}}>Long-press image to save</p>
+        </div>
       )}
-      
-      <textarea 
-        value={prompt} 
-        onChange={e => setPrompt(e.target.value)} 
-        placeholder="Describe your image..." 
-        style={{width:'100%', padding: '10px', height:'100px', borderRadius:'5px', border:'1px solid #333', background:'#222', color:'white'}} 
-      />
-      
-      <button 
-        onClick={handleGenerate} 
-        disabled={generating}
-        style={{width:'100%', padding:'15px', marginTop:'20px', background: generating ? '#555' : '#7c3aed', color:'white', border:'none', borderRadius:'5px', cursor:'pointer', fontSize:'16px'}}
-      >
-        {generating ? "Generating..." : "Generate Image"}
-      </button>
     </div>
   );
 }