From 36e5b910e9e2edccbc13156dd8e25b5340a43a58 Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Mon, 6 Oct 2025 00:00:42 +0700
Subject: [PATCH] feat: apply enchancements

---
 apps/landing/src/app/demo/tti/page.tsx        |  62 +++-
 .../components/demo/EnhancementOptions.tsx    | 264 ++++++++++++++++++
 .../src/components/demo/ResultCard.tsx        |  86 +++++-
 docs/api/api.rest                             |  13 +
 4 files changed, 418 insertions(+), 7 deletions(-)
 create mode 100644 apps/landing/src/components/demo/EnhancementOptions.tsx

diff --git a/apps/landing/src/app/demo/tti/page.tsx b/apps/landing/src/app/demo/tti/page.tsx
index 5bf6218..18d9c54 100644
--- a/apps/landing/src/app/demo/tti/page.tsx
+++ b/apps/landing/src/app/demo/tti/page.tsx
@@ -4,6 +4,7 @@ import { useState, useRef, KeyboardEvent } from 'react';
 import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
 import { GenerationTimer } from '@/components/demo/GenerationTimer';
 import { ResultCard } from '@/components/demo/ResultCard';
+import { EnhancementOptions, EnhancementOptionsData } from '@/components/demo/EnhancementOptions';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
 
@@ -35,6 +36,7 @@ interface GenerationResult {
     response: object;
     geminiParams: object;
   };
+  enhancementOptions?: EnhancementOptionsData;
 }
 
 interface ApiKeyInfo {
@@ -57,6 +59,9 @@ export default function DemoTTIPage() {
   const [generationStartTime, setGenerationStartTime] = useState<number | undefined>();
   const [generationError, setGenerationError] = useState('');
 
+  // Enhancement Options State
+  const [enhancementOptions, setEnhancementOptions] = useState<EnhancementOptionsData>({});
+
   // Results State
   const [results, setResults] = useState<GenerationResult[]>([]);
 
@@ -135,7 +140,35 @@ export default function DemoTTIPage() {
     const timestamp = new Date();
 
     try {
-      // Call API twice in parallel (both identical for now)
+      // Build enhancement options for right image (only non-empty values)
+      const rightEnhancementOptions: any = {};
+      if (enhancementOptions.autoEnhance) {
+        rightEnhancementOptions.autoEnhance = true;
+      }
+      if (enhancementOptions.imageStyle) {
+        rightEnhancementOptions.imageStyle = enhancementOptions.imageStyle;
+      }
+      if (enhancementOptions.aspectRatio) {
+        rightEnhancementOptions.aspectRatio = enhancementOptions.aspectRatio;
+      }
+      if (enhancementOptions.mood) {
+        rightEnhancementOptions.mood = enhancementOptions.mood;
+      }
+      if (enhancementOptions.lighting) {
+        rightEnhancementOptions.lighting = enhancementOptions.lighting;
+      }
+      if (enhancementOptions.cameraAngle) {
+        rightEnhancementOptions.cameraAngle = enhancementOptions.cameraAngle;
+      }
+      if (enhancementOptions.negativePrompts && enhancementOptions.negativePrompts.length > 0) {
+        rightEnhancementOptions.negativePrompts = enhancementOptions.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
       const [leftResult, rightResult] = await Promise.all([
         fetch(`${API_BASE_URL}/api/text-to-image`, {
           method: 'POST',
@@ -157,6 +190,10 @@ export default function DemoTTIPage() {
           body: JSON.stringify({
             prompt: prompt.trim(),
             filename: `demo_${resultId}_right`,
+            autoEnhance: true,
+            ...(hasEnhancementOptions && {
+              enhancementOptions: rightEnhancementOptions
+            }),
           }),
         }),
       ]);
@@ -201,10 +238,16 @@ export default function DemoTTIPage() {
           request: {
             prompt: prompt.trim(),
             filename: `demo_${resultId}_right`,
+            autoEnhance: true,
+            ...(hasEnhancementOptions && {
+              enhancementOptions: rightEnhancementOptions
+            }),
           },
           response: rightData,
           geminiParams: rightData.data?.geminiParams || {},
         },
+        // Store enhancement options for display in inspect mode
+        enhancementOptions: hasEnhancementOptions ? enhancementOptions : undefined,
       };
 
       if (!leftData.success) {
@@ -345,7 +388,7 @@ export default function DemoTTIPage() {
       )}
 
       {/* Prompt Input Section */}
-      <section className="mb-8 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl" aria-label="Prompt Input">
+      <section className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl" aria-label="Prompt Input">
         <h2 className="text-lg font-semibold text-white mb-3">Your Prompt</h2>
         <textarea
           ref={textareaRef}
@@ -358,7 +401,20 @@ export default function DemoTTIPage() {
           className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed resize-none"
           aria-label="Image generation prompt"
         />
-        <div className="mt-3 flex items-center justify-between gap-4 flex-wrap">
+      </section>
+
+      {/* Enhancement Options Section */}
+      <section className="mb-6" aria-label="Enhancement Options">
+        <EnhancementOptions
+          value={enhancementOptions}
+          onChange={setEnhancementOptions}
+          disabled={!apiKeyValidated || generating}
+        />
+      </section>
+
+      {/* Generate Button Section */}
+      <section className="mb-8 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl" aria-label="Generation Controls">
+        <div className="flex items-center justify-between gap-4 flex-wrap">
           <div className="text-sm text-gray-500">
             {generating ? (
               <GenerationTimer isGenerating={generating} startTime={generationStartTime} />
diff --git a/apps/landing/src/components/demo/EnhancementOptions.tsx b/apps/landing/src/components/demo/EnhancementOptions.tsx
new file mode 100644
index 0000000..fd13e4a
--- /dev/null
+++ b/apps/landing/src/components/demo/EnhancementOptions.tsx
@@ -0,0 +1,264 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface EnhancementOptionsData {
+  imageStyle?: string;
+  aspectRatio?: string;
+  mood?: string;
+  lighting?: string;
+  cameraAngle?: string;
+  negativePrompts?: string[];
+}
+
+interface EnhancementOptionsProps {
+  value: EnhancementOptionsData;
+  onChange: (options: EnhancementOptionsData) => void;
+  disabled?: boolean;
+}
+
+const IMAGE_STYLES = [
+  { value: '', label: 'Select style...' },
+  { value: 'photorealistic', label: 'Photorealistic' },
+  { value: 'illustration', label: 'Illustration' },
+  { value: 'minimalist', label: 'Minimalist' },
+  { value: 'sticker', label: 'Sticker' },
+  { value: 'product', label: 'Product' },
+  { value: 'comic', label: 'Comic' },
+];
+
+const ASPECT_RATIOS = [
+  { value: '', label: 'Select ratio...' },
+  { value: 'square', label: 'Square (1:1)' },
+  { value: 'portrait', label: 'Portrait (3:4)' },
+  { value: 'landscape', label: 'Landscape (4:3)' },
+  { value: 'wide', label: 'Wide (16:9)' },
+  { value: 'ultrawide', label: 'Ultrawide (21:9)' },
+];
+
+export function EnhancementOptions({ value, onChange, disabled = false }: EnhancementOptionsProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const updateValue = (key: keyof EnhancementOptionsData, newValue: any) => {
+    onChange({ ...value, [key]: newValue });
+  };
+
+  const handleNegativePromptsChange = (text: string) => {
+    const prompts = text
+      .split(',')
+      .map((p) => p.trim())
+      .filter((p) => p.length > 0);
+    updateValue('negativePrompts', prompts.length > 0 ? prompts : undefined);
+  };
+
+  const clearAll = () => {
+    onChange({
+      imageStyle: undefined,
+      aspectRatio: undefined,
+      mood: undefined,
+      lighting: undefined,
+      cameraAngle: undefined,
+      negativePrompts: undefined,
+    });
+  };
+
+  const hasAnyOptions =
+    value.imageStyle ||
+    value.aspectRatio ||
+    value.mood ||
+    value.lighting ||
+    value.cameraAngle ||
+    (value.negativePrompts && value.negativePrompts.length > 0);
+
+  return (
+    <div className="p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        disabled={disabled}
+        className="w-full flex items-center justify-between group disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-lg"
+        aria-expanded={isExpanded}
+        aria-controls="enhancement-options-content"
+        aria-label={isExpanded ? 'Collapse enhancement options' : 'Expand enhancement options'}
+      >
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-semibold text-white">
+            Enhancement Options
+            <span className="text-gray-500 text-sm font-normal ml-2">
+              (Always enhances second image)
+            </span>
+          </h2>
+          {hasAnyOptions && !isExpanded && (
+            <span className="px-2 py-0.5 text-xs bg-amber-600/20 text-amber-400 rounded-full">
+              {Object.keys(value).filter(k => value[k as keyof EnhancementOptionsData]).length} active
+            </span>
+          )}
+        </div>
+        <svg
+          className={`w-5 h-5 text-gray-400 transition-transform ${
+            isExpanded ? 'rotate-180' : ''
+          }`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Expandable Content */}
+      {isExpanded && (
+        <div
+          id="enhancement-options-content"
+          className="mt-5 space-y-4 animate-fade-in"
+          role="region"
+          aria-label="Enhancement options form"
+        >
+
+          {/* Dropdowns Row */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Image Style */}
+            <div>
+              <label htmlFor="image-style" className="block text-sm font-medium text-gray-400 mb-2">
+                Image Style
+              </label>
+              <select
+                id="image-style"
+                value={value.imageStyle || ''}
+                onChange={(e) => updateValue('imageStyle', e.target.value || undefined)}
+                disabled={disabled}
+                className="w-full px-4 py-2.5 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"
+              >
+                {IMAGE_STYLES.map((style) => (
+                  <option key={style.value} value={style.value}>
+                    {style.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Aspect Ratio */}
+            <div>
+              <label htmlFor="aspect-ratio" className="block text-sm font-medium text-gray-400 mb-2">
+                Aspect Ratio
+              </label>
+              <select
+                id="aspect-ratio"
+                value={value.aspectRatio || ''}
+                onChange={(e) => updateValue('aspectRatio', e.target.value || undefined)}
+                disabled={disabled}
+                className="w-full px-4 py-2.5 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"
+              >
+                {ASPECT_RATIOS.map((ratio) => (
+                  <option key={ratio.value} value={ratio.value}>
+                    {ratio.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Text Input Fields */}
+          <div className="space-y-3">
+            {/* Mood */}
+            <div>
+              <label htmlFor="mood" className="block text-sm font-medium text-gray-400 mb-2">
+                Mood
+              </label>
+              <input
+                type="text"
+                id="mood"
+                value={value.mood || ''}
+                onChange={(e) => updateValue('mood', e.target.value || undefined)}
+                placeholder="e.g., peaceful, energetic, mysterious..."
+                maxLength={100}
+                disabled={disabled}
+                className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-describedby="mood-hint"
+              />
+              <p id="mood-hint" className="text-xs text-gray-500 mt-1">
+                Max 100 characters
+              </p>
+            </div>
+
+            {/* Lighting */}
+            <div>
+              <label htmlFor="lighting" className="block text-sm font-medium text-gray-400 mb-2">
+                Lighting
+              </label>
+              <input
+                type="text"
+                id="lighting"
+                value={value.lighting || ''}
+                onChange={(e) => updateValue('lighting', e.target.value || undefined)}
+                placeholder="e.g., golden hour, dramatic shadows, soft natural light..."
+                maxLength={100}
+                disabled={disabled}
+                className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-describedby="lighting-hint"
+              />
+              <p id="lighting-hint" className="text-xs text-gray-500 mt-1">
+                Max 100 characters
+              </p>
+            </div>
+
+            {/* Camera Angle */}
+            <div>
+              <label htmlFor="camera-angle" className="block text-sm font-medium text-gray-400 mb-2">
+                Camera Angle
+              </label>
+              <input
+                type="text"
+                id="camera-angle"
+                value={value.cameraAngle || ''}
+                onChange={(e) => updateValue('cameraAngle', e.target.value || undefined)}
+                placeholder="e.g., wide shot, close-up, bird's eye view..."
+                maxLength={100}
+                disabled={disabled}
+                className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-describedby="camera-angle-hint"
+              />
+              <p id="camera-angle-hint" className="text-xs text-gray-500 mt-1">
+                Max 100 characters
+              </p>
+            </div>
+
+            {/* Negative Prompts */}
+            <div>
+              <label htmlFor="negative-prompts" className="block text-sm font-medium text-gray-400 mb-2">
+                Negative Prompts
+              </label>
+              <input
+                type="text"
+                id="negative-prompts"
+                value={value.negativePrompts?.join(', ') || ''}
+                onChange={(e) => handleNegativePromptsChange(e.target.value)}
+                placeholder="e.g., blurry, low quality, distorted..."
+                disabled={disabled}
+                className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-describedby="negative-prompts-hint"
+              />
+              <p id="negative-prompts-hint" className="text-xs text-gray-500 mt-1">
+                Comma-separated list (max 10 items, 100 chars each)
+              </p>
+            </div>
+          </div>
+
+          {/* Clear All Button */}
+          {hasAnyOptions && (
+            <div className="pt-2 border-t border-slate-700">
+              <button
+                onClick={clearAll}
+                disabled={disabled}
+                className="w-full md:w-auto px-4 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-gray-300 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-amber-500"
+              >
+                Clear All Options
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/landing/src/components/demo/ResultCard.tsx b/apps/landing/src/components/demo/ResultCard.tsx
index 21d358c..9af4b78 100644
--- a/apps/landing/src/components/demo/ResultCard.tsx
+++ b/apps/landing/src/components/demo/ResultCard.tsx
@@ -7,6 +7,16 @@ import { CompletedTimerBadge } from './GenerationTimer';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
 
+interface EnhancementOptionsData {
+  autoEnhance: boolean;
+  imageStyle?: string;
+  aspectRatio?: string;
+  mood?: string;
+  lighting?: string;
+  cameraAngle?: string;
+  negativePrompts?: string[];
+}
+
 interface GenerationResult {
   id: string;
   timestamp: Date;
@@ -35,6 +45,7 @@ interface GenerationResult {
     response: object;
     geminiParams: object;
   };
+  enhancementOptions?: EnhancementOptionsData;
 }
 
 interface ResultCardProps {
@@ -60,7 +71,37 @@ export function ResultCard({
   const [viewMode, setViewMode] = useState<ViewMode>('preview');
   const [activeTab, setActiveTab] = useState<CodeTab>('curl');
 
-  const curlCode = `curl -X POST ${API_BASE_URL}/api/text-to-image \\
+  // Build enhancement options JSON for code examples
+  const buildEnhancementOptionsJson = () => {
+    if (!result.enhancementOptions) return '';
+
+    const opts: any = {};
+    if (result.enhancementOptions.autoEnhance) opts.autoEnhance = true;
+    if (result.enhancementOptions.imageStyle) opts.imageStyle = result.enhancementOptions.imageStyle;
+    if (result.enhancementOptions.aspectRatio) opts.aspectRatio = result.enhancementOptions.aspectRatio;
+    if (result.enhancementOptions.mood) opts.mood = result.enhancementOptions.mood;
+    if (result.enhancementOptions.lighting) opts.lighting = result.enhancementOptions.lighting;
+    if (result.enhancementOptions.cameraAngle) opts.cameraAngle = result.enhancementOptions.cameraAngle;
+    if (result.enhancementOptions.negativePrompts) opts.negativePrompts = result.enhancementOptions.negativePrompts;
+
+    if (Object.keys(opts).length === 0) return '';
+    return JSON.stringify(opts, null, 2).split('\n').map((line, i) => i === 0 ? line : `    ${line}`).join('\n');
+  };
+
+  const enhancementOptionsJson = buildEnhancementOptionsJson();
+  const hasEnhancementOptions = !!result.enhancementOptions;
+
+  const curlCode = hasEnhancementOptions
+    ? `# Right image (with enhancement options)
+curl -X POST ${API_BASE_URL}/api/text-to-image \\
+  -H "Content-Type: application/json" \\
+  -H "X-API-Key: ${apiKey}" \\
+  -d '{
+    "prompt": "${result.originalPrompt.replace(/"/g, '\\"')}",
+    "filename": "generated_image",
+    "enhancementOptions": ${enhancementOptionsJson.replace(/\n/g, '\n    ')}
+  }'`
+    : `curl -X POST ${API_BASE_URL}/api/text-to-image \\
   -H "Content-Type: application/json" \\
   -H "X-API-Key: ${apiKey}" \\
   -d '{
@@ -68,7 +109,23 @@ export function ResultCard({
     "filename": "generated_image"
   }'`;
 
-  const fetchCode = `fetch('${API_BASE_URL}/api/text-to-image', {
+  const fetchCode = hasEnhancementOptions
+    ? `// Right image (with enhancement options)
+fetch('${API_BASE_URL}/api/text-to-image', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'X-API-Key': '${apiKey}'
+  },
+  body: JSON.stringify({
+    prompt: '${result.originalPrompt.replace(/'/g, "\\'")}',
+    filename: 'generated_image',
+    enhancementOptions: ${enhancementOptionsJson}
+  })
+})
+  .then(res => res.json())
+  .then(data => console.log(data));`
+    : `fetch('${API_BASE_URL}/api/text-to-image', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
@@ -82,7 +139,18 @@ export function ResultCard({
   .then(res => res.json())
   .then(data => console.log(data));`;
 
-  const restCode = `### Generate Image - Text to Image
+  const restCode = hasEnhancementOptions
+    ? `### Right Image - With Enhancement Options
+POST ${API_BASE_URL}/api/text-to-image
+Content-Type: application/json
+X-API-Key: ${apiKey}
+
+{
+  "prompt": "${result.originalPrompt.replace(/"/g, '\\"')}",
+  "filename": "generated_image",
+  "enhancementOptions": ${enhancementOptionsJson}
+}`
+    : `### Generate Image - Text to Image
 POST ${API_BASE_URL}/api/text-to-image
 Content-Type: application/json
 X-API-Key: ${apiKey}
@@ -167,6 +235,7 @@ X-API-Key: ${apiKey}
                 onDownload={onDownload}
                 onReusePrompt={onReusePrompt}
                 filename="enhanced.png"
+                hasEnhancementOptions={!!result.enhancementOptions}
               />
             </div>
           </div>
@@ -211,6 +280,7 @@ function ImagePreview({
   onDownload,
   onReusePrompt,
   filename,
+  hasEnhancementOptions = false,
 }: {
   image: GenerationResult['leftImage'];
   label: string;
@@ -219,11 +289,19 @@ function ImagePreview({
   onDownload: (url: string, filename: string) => void;
   onReusePrompt: (prompt: string) => void;
   filename: string;
+  hasEnhancementOptions?: boolean;
 }) {
   return (
     <div className="flex-shrink-0">
       <div className="mb-2 flex items-center justify-between gap-2">
-        <span className="text-sm font-medium text-gray-400">{label}</span>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-gray-400">{label}</span>
+          {hasEnhancementOptions && (
+            <span className="px-2 py-0.5 text-xs bg-amber-600/20 text-amber-400 rounded-full border border-amber-600/30">
+              + Options
+            </span>
+          )}
+        </div>
       </div>
 
       {image?.error ? (
diff --git a/docs/api/api.rest b/docs/api/api.rest
index 6ea428d..245c92a 100644
--- a/docs/api/api.rest
+++ b/docs/api/api.rest
@@ -106,3 +106,16 @@ Content-Type: image/jpeg
 
 < ./reference.jpg
 ------WebKitFormBoundary--
+
+
+### Generate Image - Text to Image
+POST http://localhost:3000/api/text-to-image
+Content-Type: application/json
+X-API-Key: bnt_61ba018f01474491cbaacec4509220d7154fffcd011f005eece4dba7889fba99
+
+{
+  "prompt": "фотография детской кроватки в стиле piratespunk",
+  "filename": "generated_image",
+  "autoEnhance": true
+
+}