pref: Finalize Cloud deployment v0.1.5 with UI refinements

- Full engine isolation: ComfyUI & Ollama now correctly tag as '(Local Only)' when deployed on Hugging Face Spaces.
- Smart engine prioritization: Hugging Face engines are now the hard-coded default when running in a Space environment.
- Synthesis feedback: Integrated 'Loader2' spinners and processing states for 'Refine' and 'Synthesize' actions.
- Lightbox UX: Refactored fullscreen viewer to maximize space for 9:16 portraits by moving the download button to a subtle top-right icon.
- Version tracking: Bumped application version across the board to v0.1.5.

commit_msg.txt

@@ -0,0 +1,7 @@
+pref: Finalize Cloud deployment v0.1.5 with UI refinements
+
+- Full engine isolation: ComfyUI & Ollama now correctly tag as '(Local Only)' when deployed on Hugging Face Spaces.
+- Smart engine prioritization: Hugging Face engines are now the hard-coded default when running in a Space environment.
+- Synthesis feedback: Integrated 'Loader2' spinners and processing states for 'Refine' and 'Synthesize' actions.
+- Lightbox UX: Refactored fullscreen viewer to maximize space for 9:16 portraits by moving the download button to a subtle top-right icon.
+- Version tracking: Bumped application version across the board to v0.1.5.

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "private": true,
   "scripts": {
     "dev": "next dev",

frontend/src/components/ClientApp.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useRef } from 'react';
-import { User, Sparkles, Sword, Globe, Palette, Settings, Image as ImageIcon, Wand2, Dices, Save, Download, Upload, Copy, X, LogIn, LogOut } from 'lucide-react';
+import { User, Sparkles, Sword, Globe, Palette, Settings, Image as ImageIcon, Wand2, Dices, Save, Download, Upload, Copy, X, LogIn, LogOut, Loader2 } from 'lucide-react';
 import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
 
 const API_URL = process.env.NODE_ENV === "development" ? "http://127.0.0.1:8000" : "";
@@ -40,6 +40,9 @@ export default function ClientApp() {
   const [manualTextEntry, setManualTextEntry] = useState(false);
   const [manualImageEntry, setManualImageEntry] = useState(false);
   
+  const [isRefining, setIsRefining] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  
   // Restore Settings from LocalStorage & Handle OAuth Redirect
   useEffect(() => {
     // 1. Handle OAuth Redirect
@@ -115,14 +118,18 @@ export default function ClientApp() {
         setRandomization(Array(data.feature_sequence.length).fill(false));
 
         // Smart Active Engine Defaults
-        if (!data.comfy_active) {
-            if (data.hf_active) setImageBackend("Hugging Face (Cloud)");
-            else if (data.gemini_active) setImageBackend("Gemini (Cloud)");
-        }
-        
-        if (!data.ollama_models?.length) {
-            if (data.gemini_active) setRefinementBackend("Gemini (Cloud)");
-            else if (data.hf_active) setRefinementBackend("Hugging Face (Cloud)");
+        if (data.is_hf_space) {
+             setImageBackend("Hugging Face (Cloud)");
+             setRefinementBackend("Hugging Face (Cloud)");
+        } else {
+            if (!data.comfy_active) {
+                if (data.hf_active) setImageBackend("Hugging Face (Cloud)");
+                else if (data.gemini_active) setImageBackend("Gemini (Cloud)");
+            }
+            if (!data.ollama_models?.length) {
+                if (data.gemini_active) setRefinementBackend("Gemini (Cloud)");
+                else if (data.hf_active) setRefinementBackend("Hugging Face (Cloud)");
+            }
         }
       })
       .catch(err => console.error("Failed to load config", err));
@@ -295,6 +302,7 @@ export default function ClientApp() {
 
   const handleRefine = async () => {
     setStatusMsg("Refining prompt...");
+    setIsRefining(true);
     try {
       const res = await fetch(`${API_URL}/api/refine_prompt`, {
         method: 'POST',
@@ -318,10 +326,12 @@ export default function ClientApp() {
         setStatusMsg(`Error: ${err.detail}`);
       }
     } catch (e) { setStatusMsg("Refinement failed."); }
+    finally { setIsRefining(false); }
   };
 
   const handleGenerateImage = async () => {
     setStatusMsg("Synthesizing portrait...");
+    setIsGenerating(true);
     setImageSrc(null);
     try {
       const aspectIndex = config.feature_sequence.findIndex((seq: any) => seq[2] === "aspect_ratio");
@@ -351,6 +361,7 @@ export default function ClientApp() {
         setStatusMsg(`Synthesis Error: ${err.detail}`);
       }
     } catch (e) { setStatusMsg("Synthesis failed to initialize."); }
+    finally { setIsGenerating(false); }
   };
 
   const handleDownloadImage = () => {
@@ -418,7 +429,7 @@ export default function ClientApp() {
         <div className="p-8 border-b border-[#2D241A] text-center">
            <h1 className="font-cinzel font-bold text-3xl gold-gradient-text drop-shadow-md mb-2">Chronicle</h1>
            <p className="text-[#A89880] text-sm uppercase tracking-[0.2em]">Portrait Studio</p>
-           <p className="text-[#665D4F] text-[10px] font-mono mt-2 opacity-80">v0.1.0</p>
+           <p className="text-[#665D4F] text-[10px] font-mono mt-2 opacity-80">v0.1.5</p>
         </div>
         
         <nav className="flex-1 px-4 py-8 space-y-2 overflow-y-auto custom-scrollbar">
@@ -810,11 +821,13 @@ export default function ClientApp() {
               ></textarea>
               <button 
                 onClick={handleRefine} 
-                className="mt-4 w-full shrink-0 relative overflow-hidden group bg-gradient-to-r from-[#1A3F4D] via-[#2F657D] to-[#1A3F4D] text-[#E0F2FE] font-cinzel font-bold text-sm tracking-widest py-3.5 rounded-xl shadow-[0_0_15px_rgba(97,194,223,0.15)] transition-all hover:shadow-[0_0_25px_rgba(97,194,223,0.3)]"
+                disabled={isRefining}
+                className={`mt-4 w-full shrink-0 relative overflow-hidden group bg-gradient-to-r from-[#1A3F4D] via-[#2F657D] to-[#1A3F4D] text-[#E0F2FE] font-cinzel font-bold text-sm tracking-widest py-3.5 rounded-xl transition-all ${isRefining ? 'opacity-70 cursor-not-allowed border border-[#61C2DF]/30 shadow-[0_0_15px_rgba(97,194,223,0.3)]' : 'shadow-[0_0_15px_rgba(97,194,223,0.15)] hover:shadow-[0_0_25px_rgba(97,194,223,0.3)]'}`}
               >
-                <div className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div>
+                {!isRefining && <div className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div>}
                 <span className="relative z-10 flex items-center justify-center gap-3">
-                   <Sparkles size={18} /> Enhance Narrative
+                   {isRefining ? <Loader2 size={18} className="animate-spin" /> : <Sparkles size={18} />} 
+                   {isRefining ? 'Refining...' : 'Enhance Narrative'}
                 </span>
               </button>
            </div>
@@ -840,11 +853,13 @@ export default function ClientApp() {
 
            <button 
              onClick={handleGenerateImage} 
-             className="w-full shrink-0 relative overflow-hidden group bg-gradient-to-r from-[#8C6D3B] via-[#DAB062] to-[#8C6D3B] text-[#0a0805] font-cinzel font-bold text-base tracking-widest py-4 rounded-xl shadow-[0_0_20px_rgba(218,176,98,0.2)] transition-all hover:shadow-[0_0_30px_rgba(218,176,98,0.4)]"
+             disabled={isGenerating}
+             className={`w-full shrink-0 relative overflow-hidden group bg-gradient-to-r from-[#8C6D3B] via-[#DAB062] to-[#8C6D3B] text-[#0a0805] font-cinzel font-bold text-base tracking-widest py-4 rounded-xl transition-all ${isGenerating ? 'opacity-70 cursor-not-allowed border border-[#DAB062]/50 shadow-[0_0_20px_rgba(218,176,98,0.4)]' : 'shadow-[0_0_20px_rgba(218,176,98,0.2)] hover:shadow-[0_0_30px_rgba(218,176,98,0.4)]'}`}
            >
-              <div className="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div>
+              {!isGenerating && <div className="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div>}
               <span className="relative z-10 flex items-center justify-center gap-3">
-                 <Wand2 size={22} /> Synthesize 
+                 {isGenerating ? <Loader2 size={22} className="animate-spin" /> : <Wand2 size={22} />} 
+                 {isGenerating ? 'Synthesizing...' : 'Synthesize'}
               </span>
            </button>
 
@@ -852,26 +867,25 @@ export default function ClientApp() {
       </div>
       {/* FULL SCREEN LIGHTBOX MODAL */}
       {showLightbox && imageSrc && (
-        <div className="fixed inset-0 z-[100] bg-[#080604]/95 backdrop-blur-2xl flex items-center justify-center p-4 md:p-12 animate-in fade-in duration-300" onClick={() => setShowLightbox(false)}>
-            <div className="absolute top-8 right-8 z-[110]">
-               <button onClick={() => setShowLightbox(false)} className="text-[#A89880] hover:text-[#DAB062] transition-colors bg-black/40 p-3 rounded-full border border-[#2D241A] shadow-xl">
+        <div className="fixed inset-0 z-[100] bg-[#080604]/95 backdrop-blur-2xl flex items-center justify-center p-4 md:p-8 animate-in fade-in duration-300" onClick={() => setShowLightbox(false)}>
+            <div className="absolute top-8 right-8 z-[110] flex gap-4">
+               <button onClick={(e) => { e.stopPropagation(); handleDownloadImage(); }} className="text-[#A89880] hover:text-[#DAB062] transition-colors bg-black/40 p-3 rounded-full border border-[#2D241A] shadow-xl group/btn" title="Download Masterpiece">
+                  <Download size={24} />
+                  <span className="absolute right-full mr-4 top-1/2 -translate-y-1/2 px-3 py-1 bg-black/80 text-[#DAB062] text-[10px] uppercase tracking-widest rounded-md border border-[#2D241A] opacity-0 group-hover/btn:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">Preserve Masterpiece</span>
+               </button>
+               <button onClick={() => setShowLightbox(false)} className="text-[#A89880] hover:text-[#61C2DF] transition-colors bg-black/40 p-3 rounded-full border border-[#2D241A] shadow-xl" title="Close">
                   <X size={24} />
-                  <span className="sr-only">Close</span>
                </button>
             </div>
             
             <div className="relative max-w-full max-h-full flex items-center justify-center animate-in zoom-in-95 duration-500" onClick={e => e.stopPropagation()}>
-               <div className="absolute inset-0 border border-[#DAB062]/20 rounded-xl pointer-events-none blur-sm"></div>
-               <img 
-                 src={imageSrc || ""} 
-                 alt="Portrait High Resolution" 
-                 className="max-w-full max-h-full rounded-xl shadow-[0_0_100px_rgba(218,176,98,0.15)] object-contain border border-[#2D241A]" 
-               />
-               
-               <div className="absolute bottom-[-60px] flex gap-4">
-                  <button onClick={handleDownloadImage} className="flex items-center gap-3 px-6 py-2.5 bg-[#DAB062] text-[#0a0805] rounded-full font-cinzel font-bold text-sm tracking-widest hover:bg-[#F2DAA4] transition-colors shadow-lg shadow-yellow-900/20">
-                     <Download size={18} /> Preserve Masterpiece
-                  </button>
+               <div className="relative">
+                 <div className="absolute inset-0 border border-[#DAB062]/20 rounded-xl pointer-events-none blur-sm"></div>
+                 <img 
+                   src={imageSrc || ""} 
+                   alt="Portrait High Resolution" 
+                   className="max-w-full max-h-[92vh] rounded-xl shadow-[0_0_100px_rgba(218,176,98,0.15)] object-contain border border-[#2D241A]" 
+                 />
                </div>
             </div>
         </div>