Upload folder using huggingface_hub

components/ChatPage.tsx

@@ -27,16 +27,28 @@ const ChatButton: React.FC<{ label: string; primary?: boolean; icon?: React.Reac
   </button>
 );
 
-const CategoryCard: React.FC<{ title: string; options: { label: string; icon: React.ReactNode }[] }> = ({ title, options }) => (
+const CategoryCard: React.FC<{ 
+  title: string; 
+  options: { label: string; icon: React.ReactNode }[];
+  selectedVariation: string;
+  onSelect: (label: string) => void;
+}> = ({ title, options, selectedVariation, onSelect }) => (
   <div className="flex flex-col gap-3">
     <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2 ml-1">{title}</h3>
     <div className="space-y-1">
       {options.map((option) => (
-        <div key={option.label} className="group flex items-center gap-3 p-3 rounded-xl hover:bg-gray-900/80 cursor-pointer border border-transparent hover:border-gray-800 transition-all duration-200">
-          <div className="text-gray-500 group-hover:text-white transition-colors w-5 flex justify-center">
+        <div 
+          key={option.label} 
+          onClick={() => onSelect(option.label)}
+          className={`group flex items-center gap-3 p-3 rounded-xl cursor-pointer border transition-all duration-200 
+            ${selectedVariation === option.label 
+              ? 'bg-teal-900/20 border-teal-500/50 text-white' 
+              : 'hover:bg-gray-900/80 border-transparent hover:border-gray-800'}`}
+        >
+          <div className={`${selectedVariation === option.label ? 'text-teal-400' : 'text-gray-500 group-hover:text-white'} transition-colors w-5 flex justify-center`}>
             {option.icon}
           </div>
-          <span className="text-sm font-medium text-gray-400 group-hover:text-gray-200">{option.label}</span>
+          <span className={`text-sm font-medium ${selectedVariation === option.label ? 'text-teal-100' : 'text-gray-400 group-hover:text-gray-200'}`}>{option.label}</span>
         </div>
       ))}
     </div>
@@ -133,6 +145,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
   const [showNotification, setShowNotification] = useState(false);
   const [isSimulating, setIsSimulating] = useState(false);
   const [simulationId, setSimulationId] = useState<string>('User Group 1');
+  const [selectedVariation, setSelectedVariation] = useState<string>('');
 
   useEffect(() => {
     const fetchSimulations = async () => {
@@ -200,11 +213,25 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
         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));
+    
+    setIsSimulating(true); // Reuse simulating state for loading
+    try {
+        // Here we could use an OpenAI compatible endpoint if available.
+        // For now we use the generateVariants from GradioService which acts as the LLM helper.
+        // We pass the selectedVariation to help the prompt.
+        const prompt = selectedVariation ? `[Mode: ${selectedVariation}] ${msg}` : msg;
+        const result = await GradioService.generateVariants(prompt);
+        
+        if (Array.isArray(result)) {
+            alert(`Crafted variants for ${selectedVariation || 'general content'}:\n\n` + result.join("\n\n"));
+        } else {
+            alert("Crafted suggestion: " + JSON.stringify(result));
+        }
+    } catch (e) {
+        console.error(e);
+        alert("Failed to craft content.");
+    } finally {
+        setIsSimulating(false);
     }
   };
 
@@ -298,19 +325,19 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
              {/* Column 1 */}
              <div className="space-y-12">
-               <CategoryCard title="Survey" options={categories['Survey']} />
-               <CategoryCard title="Marketing Content" options={categories['Marketing Content']} />
+               <CategoryCard title="Survey" options={categories['Survey']} selectedVariation={selectedVariation} onSelect={setSelectedVariation} />
+               <CategoryCard title="Marketing Content" options={categories['Marketing Content']} selectedVariation={selectedVariation} onSelect={setSelectedVariation} />
              </div>
 
              {/* Column 2 */}
              <div className="space-y-12">
-               <CategoryCard title="Social Media Posts" options={categories['Social Media Posts']} />
+               <CategoryCard title="Social Media Posts" options={categories['Social Media Posts']} selectedVariation={selectedVariation} onSelect={setSelectedVariation} />
              </div>
 
              {/* Column 3 */}
              <div className="space-y-12">
-                <CategoryCard title="Communication" options={categories['Communication']} />
-                <CategoryCard title="Product" options={categories['Product']} />
+                <CategoryCard title="Communication" options={categories['Communication']} selectedVariation={selectedVariation} onSelect={setSelectedVariation} />
+                <CategoryCard title="Product" options={categories['Product']} selectedVariation={selectedVariation} onSelect={setSelectedVariation} />
              </div>
           </div>
 

components/SimulationPage.tsx

@@ -47,6 +47,7 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
   onBack, onOpenConversation, onOpenChat, user, onLogin, simulationResult, setSimulationResult 
 }) => {
   const [society, setSociety] = useState('User Group 1');
+  const [societies, setSocieties] = useState<string[]>(['User Group 1']);
   const [viewMode, setViewMode] = useState('Job Title');
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [isBuilding, setIsBuilding] = useState(false);
@@ -62,6 +63,24 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
       }
     };
     window.addEventListener('resize', handleResize);
+    
+    // Fetch real focus groups
+    const fetchSocieties = async () => {
+        try {
+            const list = await GradioService.listSimulations();
+            if (list && list.length > 0) {
+                const names = list.map((s: any) => typeof s === 'string' ? s : (s.id || s.name));
+                setSocieties(names);
+                if (!names.includes(society)) {
+                    setSociety(names[0]);
+                }
+            }
+        } catch (e) {
+            console.error("Failed to fetch focus groups", e);
+        }
+    };
+    fetchSocieties();
+
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
@@ -100,16 +119,16 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
         {/* Scrollable Content */}
         <div className="flex-1 overflow-y-auto p-4 space-y-6">
            
-           {/* Current Focus Group Control */}
+           {/* Focus Group Control */}
            <div className="space-y-2">
-              <label className="text-xs text-gray-500 font-medium uppercase tracking-wider">Current Focus Group</label>
+              <label className="text-xs text-gray-500 font-medium uppercase tracking-wider">Focus Group</label>
               <div className="relative group">
                 <select 
                   value={society}
                   onChange={(e) => handleSettingChange(setSociety, e.target.value)}
                   className="w-full appearance-none bg-[#111] border border-gray-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-teal-500 cursor-pointer"
                 >
-                  <option>User Group 1</option>
+                  {societies.map(s => <option key={s} value={s}>{s}</option>)}
                 </select>
                 <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none w-4 h-4" />
               </div>

verify_final.py

@@ -0,0 +1,23 @@
+from playwright.sync_api import sync_playwright
+import os
+
+def run():
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        page = browser.new_page()
+        
+        print("Navigating to local dev server...")
+        page.goto("http://localhost:3001")
+        
+        # Wait for app
+        page.wait_for_selector('text=Branding Content Testing', timeout=30000)
+        
+        # Take screenshot
+        os.makedirs("/home/jules/verification", exist_ok=True)
+        page.screenshot(path="/home/jules/verification/final_ui.png", full_page=True)
+        print("Screenshot saved.")
+        
+        browser.close()
+
+if __name__ == "__main__":
+    run()