feat: update landing

apps/landing/src/app/demo/tti/page.tsx

@@ -38,8 +38,7 @@ interface GenerationResult {
     geminiParams: object;
   };
   enhancementOptions?: {
-    imageStyle?: string;
-    aspectRatio?: string;
+    template?: string;
   } & AdvancedOptionsData;
 }
 
@@ -65,7 +64,7 @@ export default function DemoTTIPage() {
 
   // Enhancement Options State
   const [aspectRatio, setAspectRatio] = useState('1:1');
-  const [imageStyle, setImageStyle] = useState('');
+  const [template, setTemplate] = useState('photorealistic');
   const [advancedOptions, setAdvancedOptions] = useState<AdvancedOptionsData>({});
   const [showAdvancedModal, setShowAdvancedModal] = useState(false);
 
@@ -205,32 +204,9 @@ export default function DemoTTIPage() {
     const timestamp = new Date();
 
     try {
-      // Build enhancement options for right image (only non-empty values)
-      const rightEnhancementOptions: any = {};
-      if (imageStyle) {
-        rightEnhancementOptions.imageStyle = imageStyle;
-      }
-      if (aspectRatio) {
-        rightEnhancementOptions.aspectRatio = aspectRatio;
-      }
-      if (advancedOptions.mood) {
-        rightEnhancementOptions.mood = advancedOptions.mood;
-      }
-      if (advancedOptions.lighting) {
-        rightEnhancementOptions.lighting = advancedOptions.lighting;
-      }
-      if (advancedOptions.cameraAngle) {
-        rightEnhancementOptions.cameraAngle = advancedOptions.cameraAngle;
-      }
-      if (advancedOptions.negativePrompts && advancedOptions.negativePrompts.length > 0) {
-        rightEnhancementOptions.negativePrompts = advancedOptions.negativePrompts;
-      }
-
-      const hasEnhancementOptions = Object.keys(rightEnhancementOptions).length > 0;
-
       // Call API twice in parallel
-      // Left: original prompt with no enhancement options
-      // Right: original prompt WITH enhancement options
+      // Left: original prompt WITHOUT enhancement (autoEnhance: false)
+      // Right: original prompt WITH enhancement (autoEnhance: true + template)
       const [leftResult, rightResult] = await Promise.all([
         fetch(`${API_BASE_URL}/api/text-to-image`, {
           method: 'POST',
@@ -242,6 +218,7 @@ export default function DemoTTIPage() {
             prompt: prompt.trim(),
             filename: `demo_${resultId}_left`,
             aspectRatio,
+            autoEnhance: false, // Explicitly disable enhancement for left image
           }),
         }),
         fetch(`${API_BASE_URL}/api/text-to-image`, {
@@ -254,10 +231,10 @@ export default function DemoTTIPage() {
             prompt: prompt.trim(),
             filename: `demo_${resultId}_right`,
             aspectRatio,
-            autoEnhance: true,
-            ...(hasEnhancementOptions && {
-              enhancementOptions: rightEnhancementOptions
-            }),
+            autoEnhance: true, // Enable enhancement for right image
+            enhancementOptions: {
+              template: template || 'photorealistic', // Only template parameter
+            },
           }),
         }),
       ]);
@@ -294,6 +271,8 @@ export default function DemoTTIPage() {
           request: {
             prompt: prompt.trim(),
             filename: `demo_${resultId}_left`,
+            aspectRatio,
+            autoEnhance: false,
           },
           response: leftData,
           geminiParams: leftData.data?.geminiParams || {},
@@ -302,20 +281,19 @@ export default function DemoTTIPage() {
           request: {
             prompt: prompt.trim(),
             filename: `demo_${resultId}_right`,
+            aspectRatio,
             autoEnhance: true,
-            ...(hasEnhancementOptions && {
-              enhancementOptions: rightEnhancementOptions
-            }),
+            enhancementOptions: {
+              template: template || 'photorealistic',
+            },
           },
           response: rightData,
           geminiParams: rightData.data?.geminiParams || {},
         },
         // Store enhancement options for display in inspect mode
-        enhancementOptions: hasEnhancementOptions ? {
-          imageStyle,
-          aspectRatio,
-          ...advancedOptions,
-        } : undefined,
+        enhancementOptions: {
+          template,
+        },
       };
 
       if (!leftData.success) {
@@ -499,52 +477,47 @@ export default function DemoTTIPage() {
             </select>
           </div>
 
-          {/* Image Style */}
+          {/* Template */}
           <div className="flex-1 min-w-[150px]">
-            <label htmlFor="image-style" className="block text-xs font-medium text-gray-400 mb-1.5">
-              Image Style
+            <label htmlFor="template" className="block text-xs font-medium text-gray-400 mb-1.5">
+              Template
             </label>
             <select
-              id="image-style"
-              value={imageStyle}
-              onChange={(e) => setImageStyle(e.target.value)}
+              id="template"
+              value={template}
+              onChange={(e) => setTemplate(e.target.value)}
               disabled={!apiKeyValidated || generating}
               className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              <option value="">Auto</option>
               <option value="photorealistic">Photorealistic</option>
               <option value="illustration">Illustration</option>
               <option value="minimalist">Minimalist</option>
               <option value="sticker">Sticker</option>
               <option value="product">Product</option>
               <option value="comic">Comic</option>
+              <option value="general">General</option>
             </select>
           </div>
 
-          {/* Advanced Options Button */}
+          {/* Advanced Options Button - Disabled (Coming Soon) */}
           <div className="flex-1 min-w-[150px]">
             <label className="block text-xs font-medium text-gray-400 mb-1.5 md:invisible">
               Advanced
             </label>
-            <button
-              onClick={() => setShowAdvancedModal(true)}
-              disabled={!apiKeyValidated || generating}
-              className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white hover:bg-slate-750 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 flex items-center justify-center gap-2"
-              aria-label="Open advanced options"
-            >
-              <span>⚙️</span>
-              <span>Advanced</span>
-              {(advancedOptions.mood || advancedOptions.lighting || advancedOptions.cameraAngle || (advancedOptions.negativePrompts && advancedOptions.negativePrompts.length > 0)) && (
-                <span className="ml-1 px-1.5 py-0.5 text-xs bg-amber-600/20 text-amber-400 rounded-full">
-                  {[
-                    advancedOptions.mood,
-                    advancedOptions.lighting,
-                    advancedOptions.cameraAngle,
-                    advancedOptions.negativePrompts && advancedOptions.negativePrompts.length > 0 ? 'prompts' : null
-                  ].filter(Boolean).length}
+            <div className="relative">
+              <button
+                disabled={true}
+                className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-gray-500 opacity-50 cursor-not-allowed flex items-center justify-center gap-2"
+                aria-label="Advanced options (coming soon)"
+                title="Advanced options coming soon"
+              >
+                <span>⚙️</span>
+                <span>Advanced</span>
+                <span className="ml-1 px-1.5 py-0.5 text-xs bg-slate-700 text-gray-400 rounded-full">
+                  🔒
                 </span>
-              )}
-            </button>
+              </button>
+            </div>
           </div>
         </div>