Upload folder using huggingface_hub

.github/workflows/sync-to-hf.yml

@@ -0,0 +1,19 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          git push --force https://AUXteam:$HF_TOKEN@huggingface.co/spaces/AUXteam/UserSyncInterface main

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -19,8 +19,21 @@ import ChatPage from './components/ChatPage';
 function App() {
   const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'conversation' | 'chat'>('simulation');
   const [user, setUser] = useState<any>(null);
+  const [config, setConfig] = useState<{ clientId?: string; scopes?: string }>({});
+  const [simulationResult, setSimulationResult] = useState<any>(null);
 
   useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const response = await fetch('/api/config');
+        const data = await response.json();
+        setConfig(data);
+      } catch (error) {
+        console.error("Failed to fetch config:", error);
+      }
+    };
+    fetchConfig();
+
     const handleAuth = async () => {
       try {
         const oauthResult = await oauthHandleRedirectIfPresent();
@@ -36,7 +49,22 @@ function App() {
   }, []);
 
   const loginWithHF = async () => {
-    window.location.href = await oauthLoginUrl();
+    try {
+      const url = await oauthLoginUrl({
+        clientId: config.clientId,
+        scopes: config.scopes,
+        redirectUrl: window.location.origin + "/"
+      });
+      // Use window.top for redirecting out of the Space iframe
+      if (window.top) {
+        window.top.location.href = url;
+      } else {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Login error:", error);
+      alert("Failed to initiate login. See console for details.");
+    }
   };
 
   const startSimulation = () => {
@@ -68,6 +96,8 @@ function App() {
         onOpenChat={openChat}
         user={user}
         onLogin={loginWithHF}
+        simulationResult={simulationResult}
+        setSimulationResult={setSimulationResult}
       />
     );
   }
@@ -77,7 +107,13 @@ function App() {
   }
 
   if (currentView === 'chat') {
-    return <ChatPage onBack={goBackToSimulation} />;
+    return (
+      <ChatPage 
+        onBack={goBackToSimulation} 
+        simulationResult={simulationResult}
+        setSimulationResult={setSimulationResult}
+      />
+    );
   }
 
   return (

components/ChatPage.tsx

@@ -1,11 +1,13 @@
 
-import React, { useState, useRef } from 'react';
-import { X, ClipboardList, Linkedin, Instagram, Mail, Layout, Edit3, MonitorPlay, Lightbulb, Image, Plus, Sparkles, Zap, AlertCircle, Video, Megaphone, Link as LinkIcon, Loader2, RefreshCw } from 'lucide-react';
+import React, { useState, useRef, useEffect } from 'react';
+import { X, ClipboardList, Linkedin, Instagram, Mail, Layout, Edit3, MonitorPlay, Lightbulb, Image, Plus, Sparkles, Zap, AlertCircle, Video, Megaphone, Link as LinkIcon, Loader2, RefreshCw, CheckCircle2 } from 'lucide-react';
 import { GradioService } from '../services/gradioService';
 
 // --- Types ---
 interface ChatPageProps {
   onBack: () => void;
+  simulationResult: any;
+  setSimulationResult: (res: any) => void;
 }
 
 // --- Sub-components (Modular Structure) ---
@@ -43,6 +45,7 @@ const CategoryCard: React.FC<{ title: string; options: { label: string; icon: Re
 
 const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (msg: string) => void; isSimulating: boolean }> = ({ onSimulate, onHelpMeCraft, isSimulating }) => {
   const [message, setMessage] = useState('');
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleUploadClick = () => {
@@ -50,16 +53,34 @@ const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (m
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      console.log("Selected file:", file.name);
-      // In a real app, you'd handle the upload here
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      const newFiles = Array.from(files);
+      setUploadedFiles(prev => [...prev, ...newFiles]);
+      console.log("Selected files:", newFiles.map(f => f.name));
     }
   };
 
+  const removeFile = (index: number) => {
+    setUploadedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
   return (
     <div className="border-t border-gray-800 pt-6 mt-4 bg-[#0a0a0a] px-6 pb-8 md:pb-10 absolute bottom-0 left-0 right-0 z-20 shadow-[0_-20px_50px_rgba(0,0,0,0.8)]">
       <div className="max-w-5xl mx-auto space-y-4">
+        {uploadedFiles.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-2">
+            {uploadedFiles.map((file, idx) => (
+              <div key={idx} className="flex items-center gap-2 bg-gray-800 border border-gray-700 px-3 py-1.5 rounded-full text-[10px] text-gray-300">
+                <Image size={10} />
+                <span className="truncate max-w-[100px]">{file.name}</span>
+                <button onClick={() => removeFile(idx)} className="text-gray-500 hover:text-white">
+                  <X size={10} />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
         <textarea
           className="w-full h-24 bg-black border border-gray-800 text-gray-200 placeholder-gray-600 p-4 rounded-2xl resize-none focus:outline-none focus:border-gray-600 focus:ring-1 focus:ring-gray-600 transition-all text-sm leading-relaxed"
           placeholder="Paste your brand narrative or campaign copy here"
@@ -77,10 +98,11 @@ const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (m
               onChange={handleFileChange} 
               className="hidden" 
               accept="image/*"
+              multiple
             />
             <ChatButton 
-              label="Upload Images" 
-              icon={<Image size={14} />} 
+              label={uploadedFiles.length > 0 ? `${uploadedFiles.length} Images Selected` : "Upload Images"} 
+              icon={uploadedFiles.length > 0 ? <CheckCircle2 size={14} className="text-green-500" /> : <Image size={14} />} 
               className="h-fit" 
               onClick={handleUploadClick}
             />
@@ -107,39 +129,83 @@ const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (m
 
 // --- Main Page Component ---
 
-const ChatPage: React.FC<ChatPageProps> = ({ onBack }) => {
+const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimulationResult }) => {
   const [showNotification, setShowNotification] = useState(false);
   const [isSimulating, setIsSimulating] = useState(false);
-  const [simulationResult, setSimulationResult] = useState<string | null>(null);
+  const [simulationId, setSimulationId] = useState<string>('User Group 1');
 
-  const handleSimulate = (msg: string) => {
+  useEffect(() => {
+    const fetchSimulations = async () => {
+      try {
+        const sims = await GradioService.listSimulations();
+        if (sims && sims.length > 0) {
+          // If sims is an array of objects or strings, pick the first one
+          const firstSim = typeof sims[0] === 'string' ? sims[0] : (sims[0].id || sims[0].name || 'User Group 1');
+          setSimulationId(firstSim);
+        }
+      } catch (e) {
+        console.error("Failed to fetch simulations:", e);
+      }
+    };
+    fetchSimulations();
+  }, []);
+
+  const handleSimulate = async (msg: string) => {
+    if (!msg.trim()) {
+      alert("Please enter some content to simulate.");
+      return;
+    }
     setIsSimulating(true);
     setShowNotification(true);
+    setSimulationResult(null);
     
-    // Simulate API call
-    setTimeout(() => {
+    try {
+      const result = await GradioService.startSimulationAsync(simulationId, msg);
       setIsSimulating(false);
-      setSimulationResult("Please wait, the results will show here. Click Refresh to gather results from the API.");
-    }, 2000);
+      setSimulationResult({
+        status: "Initiated",
+        message: "Simulation started successfully. Please wait for the results.",
+        data: result
+      });
+    } catch (error) {
+      setIsSimulating(false);
+      setSimulationResult({
+        status: "Error",
+        message: "Failed to start simulation. Please try again."
+      });
+    }
   };
 
   const handleRefresh = async () => {
     setIsSimulating(true);
     try {
-      // In a real scenario, we would poll the Gradio API for results
-      // result = await GradioService.simulate(...)
-      setTimeout(() => {
-        setIsSimulating(false);
-        setSimulationResult("Final Simulation Results: The content resonated well with 85% of the target audience. Key feedback: 'Clearer value proposition needed in the header'.");
-      }, 1500);
+      const status = await GradioService.getSimulationStatus(simulationId);
+      setIsSimulating(false);
+      setSimulationResult({
+        status: "Updated",
+        message: "Latest status gathered from API.",
+        data: status
+      });
     } catch (error) {
       setIsSimulating(false);
+      setSimulationResult({
+        status: "Error",
+        message: "Failed to gather results. The simulation might still be in progress."
+      });
     }
   };
 
   const handleHelpMeCraft = async (msg: string) => {
-    const crafted = await GradioService.helpMeCraft(msg);
-    alert("Help Me Craft suggestion: " + crafted);
+    if (!msg.trim()) {
+        alert("Please enter some content first.");
+        return;
+    }
+    const result = await GradioService.generateVariants(msg);
+    if (Array.isArray(result)) {
+        alert("Crafted variants:\n\n" + result.join("\n\n"));
+    } else {
+        alert("Crafted suggestion: " + JSON.stringify(result));
+    }
   };
 
   const categories = {
@@ -175,9 +241,12 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack }) => {
             <div className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-lg text-white font-bold">Λ</div>
             <h2 className="text-xl font-medium tracking-tight">New Simulation</h2>
          </div>
-         <button onClick={onBack} className="p-2 text-gray-500 hover:text-white hover:bg-gray-900 rounded-full transition-colors">
-            <X size={24} />
-         </button>
+         <div className="flex items-center gap-4">
+            {simulationId && <span className="text-[10px] text-gray-500 uppercase tracking-widest hidden md:block">Active Group: {simulationId}</span>}
+            <button onClick={onBack} className="p-2 text-gray-500 hover:text-white hover:bg-gray-900 rounded-full transition-colors">
+                <X size={24} />
+            </button>
+         </div>
       </div>
 
       {/* Notification Banner */}
@@ -188,13 +257,21 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack }) => {
                 <AlertCircle size={18} className="text-green-400" />
               </div>
               <div className="flex-1">
-                <h4 className="font-semibold text-green-300 mb-1">Simulation Initiated</h4>
+                <h4 className="font-semibold text-green-300 mb-1">Simulation Status</h4>
                 <p className="text-sm text-green-200/70 leading-relaxed">
-                  The simulation has started. This process can take up to <strong className="text-white">30 minutes</strong>. The results will show here when ready.
+                  The simulation process can take up to <strong className="text-white">30 minutes</strong>. Click "Gather Results" to fetch the latest state.
                 </p>
                 {simulationResult && (
                   <div className="mt-4 p-3 bg-black/40 rounded-xl border border-green-500/20 text-xs text-green-200 flex flex-col gap-3">
-                    <p>{simulationResult}</p>
+                    <div className="font-medium flex items-center gap-2">
+                        <div className={`w-1.5 h-1.5 rounded-full ${simulationResult.status === 'Error' ? 'bg-red-500' : 'bg-green-500 animate-pulse'}`}></div>
+                        {simulationResult.message}
+                    </div>
+                    {simulationResult.data && (
+                        <pre className="text-[10px] bg-black/50 p-2 rounded max-h-32 overflow-y-auto custom-scrollbar whitespace-pre-wrap">
+                            {JSON.stringify(simulationResult.data, null, 2)}
+                        </pre>
+                    )}
                     <button 
                       onClick={handleRefresh}
                       disabled={isSimulating}
@@ -214,7 +291,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack }) => {
       )}
 
       {/* Scrollable Content Area */}
-      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-8 pb-80"> {/* Large bottom padding for fixed input */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-8 pb-80">
         <div className="max-w-5xl mx-auto">
           <h1 className="text-2xl md:text-3xl font-semibold text-center mb-12 mt-4 md:mt-8">What would you like to simulate?</h1>
           

components/SimulationPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { ChevronDown, Plus, Info, MessageSquare, BookOpen, LogOut, PanelLeftClose, MessageCircle, AlertTriangle, Menu, PanelRightClose } from 'lucide-react';
+import { ChevronDown, Plus, Info, MessageSquare, BookOpen, LogOut, PanelLeftClose, MessageCircle, AlertTriangle, Menu, PanelRightClose, RefreshCw } from 'lucide-react';
 import SimulationGraph from './SimulationGraph';
+import { GradioService } from '../services/gradioService';
 
 interface SimulationPageProps {
   onBack: () => void;
@@ -8,6 +9,8 @@ interface SimulationPageProps {
   onOpenChat: () => void;
   user?: any;
   onLogin?: () => void;
+  simulationResult: any;
+  setSimulationResult: (res: any) => void;
 }
 
 // Define the data structure for filters
@@ -40,9 +43,12 @@ const VIEW_FILTERS: Record<string, Array<{ label: string; color: string }>> = {
   ]
 };
 
-const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversation, onOpenChat, user, onLogin }) => {
+const SimulationPage: React.FC<SimulationPageProps> = ({ 
+  onBack, onOpenConversation, onOpenChat, user, onLogin, simulationResult, setSimulationResult 
+}) => {
   const [society, setSociety] = useState('User Group 1');
   const [viewMode, setViewMode] = useState('Job Title');
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const [isBuilding, setIsBuilding] = useState(false);
   const [isRightPanelOpen, setIsRightPanelOpen] = useState(window.innerWidth > 1200);
   const [isLeftPanelOpen, setIsLeftPanelOpen] = useState(window.innerWidth > 768);
@@ -81,7 +87,7 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
         <div className="p-4 h-16 border-b border-gray-800 flex items-center justify-between">
            <div className="flex items-center gap-2 cursor-pointer" onClick={onBack}>
               <div className="w-6 h-6 flex items-center justify-center font-bold text-white">Λ</div>
-              <span className="font-semibold tracking-tight">SyncUsers</span>
+              <span className="font-semibold tracking-tight text-xs">Branding Content Testing</span>
            </div>
            <button 
              onClick={() => setIsLeftPanelOpen(false)}
@@ -258,10 +264,54 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
         </div>
         <div className="flex-1 overflow-y-auto p-4 space-y-4">
            <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4">
-              <p className="text-xs text-gray-500 mb-2">Simulation Results</p>
-              <div className="text-sm text-gray-400 italic text-center py-8">
-                Results will appear here after running a simulation.
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-xs text-gray-500">Simulation Results</p>
+                {simulationResult && (
+                  <button 
+                    onClick={async () => {
+                      setIsRefreshing(true);
+                      try {
+                        const status = await GradioService.getSimulationStatus(society);
+                        setSimulationResult({
+                          status: "Updated",
+                          message: "Latest status gathered from API.",
+                          data: status
+                        });
+                      } catch (e) {
+                        console.error(e);
+                      } finally {
+                        setIsRefreshing(false);
+                      }
+                    }}
+                    className="p-1 hover:bg-gray-800 rounded text-gray-500 hover:text-white"
+                    title="Refresh Status"
+                  >
+                    <RefreshCw size={12} className={isRefreshing ? "animate-spin" : ""} />
+                  </button>
+                )}
               </div>
+              
+              {!simulationResult ? (
+                <div className="text-sm text-gray-400 italic text-center py-8">
+                  Results will appear here after running a simulation.
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2 text-xs font-medium text-green-400">
+                    <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
+                    {simulationResult.status}
+                  </div>
+                  <p className="text-[11px] text-gray-400">{simulationResult.message}</p>
+                  {simulationResult.data && (
+                    <pre className="text-[10px] bg-black/50 p-2 rounded max-h-96 overflow-y-auto custom-scrollbar whitespace-pre-wrap text-gray-300 border border-gray-800">
+                      {JSON.stringify(simulationResult.data, null, 2)}
+                    </pre>
+                  )}
+                  <p className="text-[10px] text-gray-600 mt-4 italic">
+                    Note: Complete simulation results can take up to 30 minutes to be fully processed by the API.
+                  </p>
+                </div>
+              )}
            </div>
         </div>
       </aside>

inspect_gradio.cjs

@@ -0,0 +1,17 @@
+
+const { Client } = require("@gradio/client");
+
+async function inspect() {
+    try {
+        const client = await Client.connect("AUXteam/tiny_factory");
+        console.log("Keys:", Object.keys(client));
+        if (client.view_api) {
+            const api = await client.view_api();
+            console.log(JSON.stringify(api, null, 2));
+        }
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+inspect();

inspect_gradio.ts

@@ -0,0 +1,9 @@
+
+import { Client } from "@gradio/client";
+
+async function inspect() {
+    const client = await Client.connect("AUXteam/tiny_factory");
+    console.log(JSON.stringify(client.config.endpoints, null, 2));
+}
+
+inspect();

server.cjs

@@ -5,6 +5,13 @@ const port = 7860;
 
 app.use(express.static(path.join(__dirname, 'dist')));
 
+app.get('/api/config', (req, res) => {
+  res.json({
+    clientId: process.env.OAUTH_CLIENT_ID,
+    scopes: process.env.OAUTH_SCOPES || "openid profile",
+  });
+});
+
 app.get('/health', (req, res) => {
   res.status(200).send('OK');
 });

services/gradioService.ts

@@ -23,25 +23,47 @@ export class GradioService {
     }
   }
 
-  static async simulate(persona: string, message: string) {
+  static async startSimulationAsync(simulationId: string, contentText: string, format: string = "text") {
     try {
       const client = await this.getClient();
-      const result = await client.predict("/simulate", [persona, message]);
+      const result = await client.predict("/start_simulation_async", [simulationId, contentText, format]);
       return result.data;
     } catch (error) {
-      console.error("Error in simulation:", error);
+      console.error("Error starting simulation:", error);
       throw error;
     }
   }
 
-  static async helpMeCraft(content: string) {
+  static async getSimulationStatus(simulationId: string) {
     try {
       const client = await this.getClient();
-      const result = await client.predict("/help_me_craft", [content]);
+      const result = await client.predict("/get_simulation_status", [simulationId]);
       return result.data;
     } catch (error) {
-      console.error("Error helping to craft content:", error);
-      return "Unable to craft content at this time.";
+      console.error("Error getting simulation status:", error);
+      throw error;
+    }
+  }
+
+  static async generateVariants(contentText: string, numVariants: number = 3) {
+    try {
+      const client = await this.getClient();
+      const result = await client.predict("/generate_variants", [contentText, numVariants]);
+      return result.data;
+    } catch (error) {
+      console.error("Error generating variants:", error);
+      return ["Unable to generate variants at this time."];
+    }
+  }
+
+  static async listSimulations() {
+    try {
+      const client = await this.getClient();
+      const result = await client.predict("/list_simulations", []);
+      return result.data;
+    } catch (error) {
+      console.error("Error listing simulations:", error);
+      return [];
     }
   }
 }