Initial commit

frontend/components/image-card.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { Download, Maximize2 } from 'lucide-react';
+import { downloadImage, generateImageFilename } from '@/lib/utils';
+import { useState } from 'react';
+
+interface ImageCardProps {
+  imageData: string; // Base64
+  prompt: string;
+  model: string;
+  index?: number;
+}
+
+export function ImageCard({ imageData, prompt, model, index = 0 }: ImageCardProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleDownload = () => {
+    const filename = generateImageFilename(prompt);
+    downloadImage(imageData, filename);
+  };
+
+  const handleFullscreen = () => {
+    setIsFullscreen(true);
+  };
+
+  return (
+    <>
+      <div className="group relative bg-secondary rounded-lg overflow-hidden border border-border hover:border-primary transition-all">
+        {/* Imagen */}
+        <div className="relative aspect-square">
+          <img
+            src={`data:image/png;base64,${imageData}`}
+            alt={prompt}
+            className="w-full h-full object-cover"
+          />
+
+          {/* Overlay con acciones */}
+          <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+            <button
+              onClick={handleFullscreen}
+              className="p-3 bg-white/90 hover:bg-white rounded-full transition-all"
+              title="Ver en pantalla completa"
+            >
+              <Maximize2 className="w-5 h-5 text-gray-900" />
+            </button>
+            <button
+              onClick={handleDownload}
+              className="p-3 bg-white/90 hover:bg-white rounded-full transition-all"
+              title="Descargar imagen"
+            >
+              <Download className="w-5 h-5 text-gray-900" />
+            </button>
+          </div>
+        </div>
+
+        {/* Info */}
+        <div className="p-3 space-y-1">
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {prompt}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Modelo: {model}
+          </p>
+        </div>
+      </div>
+
+      {/* Modal fullscreen */}
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 bg-black/95 z-50 flex items-center justify-center p-4"
+          onClick={() => setIsFullscreen(false)}
+        >
+          <button
+            onClick={() => setIsFullscreen(false)}
+            className="absolute top-4 right-4 text-white text-4xl hover:text-gray-300"
+          >
+            ×
+          </button>
+          <img
+            src={`data:image/png;base64,${imageData}`}
+            alt={prompt}
+            className="max-w-full max-h-full object-contain"
+          />
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDownload();
+            }}
+            className="absolute bottom-4 right-4 px-4 py-2 bg-white text-black rounded-lg hover:bg-gray-200 transition-all flex items-center gap-2"
+          >
+            <Download className="w-4 h-4" />
+            Descargar
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

frontend/components/image-config.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { aspectRatioSizes, isValidAspectRatio } from '@/lib/google-ai';
+
+interface ImageConfigProps {
+  model: string;
+  aspectRatio: string;
+  onAspectRatioChange: (ratio: string) => void;
+  numberOfImages: number;
+  onNumberOfImagesChange: (num: number) => void;
+  negativePrompt: string;
+  onNegativePromptChange: (prompt: string) => void;
+  safetyLevel: 'block_none' | 'block_some' | 'block_most';
+  onSafetyLevelChange: (level: 'block_none' | 'block_some' | 'block_most') => void;
+}
+
+export function ImageConfig({
+  model,
+  aspectRatio,
+  onAspectRatioChange,
+  numberOfImages,
+  onNumberOfImagesChange,
+  negativePrompt,
+  onNegativePromptChange,
+  safetyLevel,
+  onSafetyLevelChange,
+}: ImageConfigProps) {
+  const availableRatios = Object.keys(aspectRatioSizes);
+  const size = aspectRatioSizes[aspectRatio];
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-foreground">Configuración de Imagen</h3>
+
+      {/* Aspect Ratio */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Aspect Ratio
+        </label>
+        <div className="grid grid-cols-5 gap-2">
+          {availableRatios.map((ratio) => (
+            <button
+              key={ratio}
+              onClick={() => onAspectRatioChange(ratio)}
+              disabled={!isValidAspectRatio(model, ratio) && !model.startsWith('gemini')}
+              className={`
+                px-3 py-2 text-xs rounded-lg font-medium transition-all
+                ${aspectRatio === ratio
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-secondary hover:bg-accent'
+                }
+                ${!isValidAspectRatio(model, ratio) && !model.startsWith('gemini')
+                  ? 'opacity-50 cursor-not-allowed'
+                  : ''
+                }
+              `}
+            >
+              {ratio}
+            </button>
+          ))}
+        </div>
+        {size && (
+          <p className="text-xs text-muted-foreground">
+            Dimensiones: {size.width}x{size.height}px
+          </p>
+        )}
+      </div>
+
+      {/* Número de imágenes */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Número de imágenes: {numberOfImages}
+        </label>
+        <input
+          type="range"
+          min="1"
+          max="4"
+          value={numberOfImages}
+          onChange={(e) => onNumberOfImagesChange(parseInt(e.target.value))}
+          className="w-full"
+        />
+      </div>
+
+      {/* Negative Prompt */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Negative Prompt (opcional)
+        </label>
+        <textarea
+          value={negativePrompt}
+          onChange={(e) => onNegativePromptChange(e.target.value)}
+          placeholder="Elementos que NO quieres en la imagen..."
+          className="w-full px-3 py-2 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+          rows={2}
+        />
+      </div>
+
+      {/* Safety Level */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Nivel de Seguridad
+        </label>
+        <select
+          value={safetyLevel}
+          onChange={(e) => onSafetyLevelChange(e.target.value as any)}
+          className="w-full px-3 py-2 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          <option value="block_none">Sin bloqueo</option>
+          <option value="block_some">Bloqueo moderado</option>
+          <option value="block_most">Bloqueo alto</option>
+        </select>
+      </div>
+    </div>
+  );
+}

frontend/components/model-selector.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { geminiImageModels, veoVideoModels } from '@/lib/google-ai';
+
+interface ModelSelectorProps {
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+  contentType: 'image' | 'video';
+}
+
+export function ModelSelector({ selectedModel, onModelChange, contentType }: ModelSelectorProps) {
+  const models = contentType === 'image' ? geminiImageModels : veoVideoModels;
+
+  return (
+    <div className="space-y-3">
+      <label className="text-sm font-medium text-foreground">
+        Modelo de IA
+      </label>
+      <select
+        value={selectedModel}
+        onChange={(e) => onModelChange(e.target.value)}
+        className="w-full px-4 py-2.5 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary transition-all"
+      >
+        {models.map((model) => (
+          <option key={model.id} value={model.id}>
+            {model.name} - {model.description}
+          </option>
+        ))}
+      </select>
+
+      {/* Info del modelo seleccionado */}
+      <div className="text-xs text-muted-foreground bg-muted p-3 rounded-lg">
+        {(() => {
+          const model = models.find(m => m.id === selectedModel);
+          if (!model) return null;
+
+          return (
+            <div className="space-y-1">
+              <p><strong>Modelo:</strong> {model.name}</p>
+              <p><strong>ID:</strong> {model.id}</p>
+              {model.capabilities && (
+                <p><strong>Capacidades:</strong> {model.capabilities.join(', ')}</p>
+              )}
+            </div>
+          );
+        })()}
+      </div>
+    </div>
+  );
+}

frontend/components/reference-images.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState } from 'react';
+import { Upload, X, Image as ImageIcon } from 'lucide-react';
+
+interface ReferenceImage {
+  id: string;
+  data: string; // Base64
+  mimeType: string;
+  preview: string; // Data URL para preview
+  name: string;
+}
+
+interface ReferenceImagesProps {
+  images: ReferenceImage[];
+  onImagesChange: (images: ReferenceImage[]) => void;
+  maxImages?: number;
+}
+
+export function ReferenceImages({ images, onImagesChange, maxImages = 3 }: ReferenceImagesProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFileSelect = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+
+    const newImages: ReferenceImage[] = [];
+
+    for (let i = 0; i < Math.min(files.length, maxImages - images.length); i++) {
+      const file = files[i];
+
+      // Validar que sea una imagen
+      if (!file.type.startsWith('image/')) {
+        continue;
+      }
+
+      // Validar tamaño (máx 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        continue;
+      }
+
+      try {
+        // Leer archivo como base64
+        const base64 = await fileToBase64(file);
+
+        newImages.push({
+          id: `${Date.now()}-${i}`,
+          data: base64,
+          mimeType: file.type,
+          preview: `data:${file.type};base64,${base64}`,
+          name: file.name,
+        });
+      } catch (error) {
+      }
+    }
+
+    if (newImages.length > 0) {
+      onImagesChange([...images, ...newImages]);
+    }
+  };
+
+  const fileToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        // Remover el prefijo "data:image/...;base64,"
+        const base64 = result.split(',')[1];
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFileSelect(e.dataTransfer.files);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const removeImage = (id: string) => {
+    onImagesChange(images.filter(img => img.id !== id));
+  };
+
+  return (
+    <div className="space-y-3">
+      <label className="text-xs font-medium text-muted-foreground">
+        Imágenes de Referencia (Opcional) - {images.length}/{maxImages}
+      </label>
+
+      {/* Zona de drop */}
+      {images.length < maxImages && (
+        <div
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          className={`
+            relative border-2 border-dashed rounded-lg p-6 text-center cursor-pointer
+            transition-all
+            ${isDragging
+              ? 'border-primary bg-primary/10'
+              : 'border-border hover:border-primary hover:bg-accent'
+            }
+          `}
+        >
+          <input
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={(e) => handleFileSelect(e.target.files)}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          />
+          <div className="flex flex-col items-center gap-2">
+            <Upload className="w-8 h-8 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              Arrastra imágenes aquí o haz clic para seleccionar
+            </p>
+            <p className="text-xs text-muted-foreground">
+              PNG, JPG, WebP (máx 5MB)
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Grid de imágenes */}
+      {images.length > 0 && (
+        <div className="grid grid-cols-3 gap-2">
+          {images.map((image) => (
+            <div
+              key={image.id}
+              className="relative group aspect-square bg-secondary rounded-lg overflow-hidden border border-border"
+            >
+              <img
+                src={image.preview}
+                alt={image.name}
+                className="w-full h-full object-cover"
+              />
+              <button
+                onClick={() => removeImage(image.id)}
+                className="absolute top-1 right-1 p-1 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Eliminar imagen"
+              >
+                <X className="w-4 h-4" />
+              </button>
+              <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs p-1 truncate">
+                {image.name}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {images.length === 0 && (
+        <p className="text-xs text-muted-foreground italic">
+          Las imágenes de referencia ayudan a guiar el estilo y composición de la imagen generada
+        </p>
+      )}
+    </div>
+  );
+}

frontend/components/video-card.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { Video, Download, Copy, Check } from 'lucide-react';
+import { useState } from 'react';
+
+interface VideoCardProps {
+  videoData: string; // Base64
+  prompt: string;
+  model: string;
+}
+
+export function VideoCard({ videoData, prompt, model }: VideoCardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleDownload = () => {
+    const link = document.createElement('a');
+    link.href = `data:video/mp4;base64,${videoData}`;
+    link.download = `video-${Date.now()}.mp4`;
+    link.click();
+  };
+
+  const handleCopyPrompt = async () => {
+    await navigator.clipboard.writeText(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="bg-card border border-border rounded-xl overflow-hidden shadow-lg group">
+      {/* Video */}
+      <div className="relative aspect-video bg-muted">
+        <video
+          src={`data:video/mp4;base64,${videoData}`}
+          controls
+          className="w-full h-full object-contain"
+        />
+      </div>
+
+      {/* Info */}
+      <div className="p-4 space-y-3">
+        {/* Prompt */}
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-medium text-muted-foreground">Prompt</p>
+            <button
+              onClick={handleCopyPrompt}
+              className="p-1 hover:bg-accent rounded transition-colors"
+              title="Copiar prompt"
+            >
+              {copied ? (
+                <Check className="w-3 h-3 text-green-500" />
+              ) : (
+                <Copy className="w-3 h-3 text-muted-foreground" />
+              )}
+            </button>
+          </div>
+          <p className="text-sm text-foreground line-clamp-2">{prompt}</p>
+        </div>
+
+        {/* Model */}
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-muted-foreground">Modelo:</span>
+          <span className="font-medium text-foreground">{model}</span>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-2 border-t border-border">
+          <button
+            onClick={handleDownload}
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
+          >
+            <Download className="w-4 h-4" />
+            Descargar
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/video-config.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { aspectRatioSizes, videoDurations } from '@/lib/google-ai';
+
+interface VideoConfigProps {
+  model: string;
+  aspectRatio: string;
+  onAspectRatioChange: (ratio: string) => void;
+  duration: number;
+  onDurationChange: (duration: number) => void;
+  negativePrompt: string;
+  onNegativePromptChange: (prompt: string) => void;
+  safetyLevel: 'block_none' | 'block_some' | 'block_most';
+  onSafetyLevelChange: (level: 'block_none' | 'block_some' | 'block_most') => void;
+}
+
+export function VideoConfig({
+  aspectRatio,
+  onAspectRatioChange,
+  duration,
+  onDurationChange,
+  negativePrompt,
+  onNegativePromptChange,
+  safetyLevel,
+  onSafetyLevelChange,
+}: VideoConfigProps) {
+  const availableRatios = Object.keys(aspectRatioSizes);
+  const size = aspectRatioSizes[aspectRatio];
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-foreground">Configuración de Video</h3>
+
+      {/* Aspect Ratio */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Aspect Ratio
+        </label>
+        <div className="grid grid-cols-5 gap-2">
+          {availableRatios.map((ratio) => (
+            <button
+              key={ratio}
+              onClick={() => onAspectRatioChange(ratio)}
+              className={`
+                px-3 py-2 text-xs rounded-lg font-medium transition-all
+                ${aspectRatio === ratio
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-secondary hover:bg-accent'
+                }
+              `}
+            >
+              {ratio}
+            </button>
+          ))}
+        </div>
+        {size && (
+          <p className="text-xs text-muted-foreground">
+            Dimensiones: {size.width}x{size.height}px
+          </p>
+        )}
+      </div>
+
+      {/* Duración */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Duración: {duration} segundos
+        </label>
+        <div className="flex gap-2">
+          {videoDurations.map((dur) => (
+            <button
+              key={dur.value}
+              onClick={() => onDurationChange(dur.value)}
+              className={`
+                flex-1 px-3 py-2 text-xs rounded-lg font-medium transition-all
+                ${duration === dur.value
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-secondary hover:bg-accent'
+                }
+              `}
+            >
+              {dur.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Negative Prompt */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Negative Prompt (opcional)
+        </label>
+        <textarea
+          value={negativePrompt}
+          onChange={(e) => onNegativePromptChange(e.target.value)}
+          placeholder="Elementos que NO quieres en el video..."
+          className="w-full px-3 py-2 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+          rows={2}
+        />
+      </div>
+
+      {/* Safety Level */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground">
+          Nivel de Seguridad
+        </label>
+        <select
+          value={safetyLevel}
+          onChange={(e) => onSafetyLevelChange(e.target.value as any)}
+          className="w-full px-3 py-2 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          <option value="block_none">Sin bloqueo</option>
+          <option value="block_some">Bloqueo moderado</option>
+          <option value="block_most">Bloqueo alto</option>
+        </select>
+      </div>
+    </div>
+  );
+}