aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
732 lines (729 loc) • 28.6 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { motion } from 'framer-motion';
import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
import { useMotionPreference } from '../../hooks/useMotionPreference.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { useA11yId } from '../../utils/a11y.js';
import { createGlassStyle } from '../../utils/createGlassStyle.js';
import { useGlassSound } from '../../utils/soundDesign.js';
const defaultNeuralLayers = [{
id: "conv2d_1",
name: "Early Features",
description: "Basic edges and textures",
type: "conv",
depth: 1,
features: ["edges", "lines", "basic_shapes"],
strength: 0.5
}, {
id: "conv2d_5",
name: "Texture Patterns",
description: "Complex textures and patterns",
type: "conv",
depth: 5,
features: ["textures", "patterns", "repetition"],
strength: 0.7
}, {
id: "mixed3a",
name: "Object Parts",
description: "Parts of objects and shapes",
type: "inception",
depth: 10,
features: ["object_parts", "curves", "complex_shapes"],
strength: 1.0
}, {
id: "mixed4a",
name: "Abstract Objects",
description: "Abstract object representations",
type: "inception",
depth: 15,
features: ["abstract_objects", "compositions", "spatial_relations"],
strength: 1.2
}, {
id: "mixed4d",
name: "Complex Structures",
description: "Complex architectural structures",
type: "inception",
depth: 18,
features: ["buildings", "architecture", "complex_structures"],
strength: 1.5
}, {
id: "mixed5b",
name: "High-Level Concepts",
description: "Abstract concepts and scenes",
type: "inception",
depth: 25,
features: ["scenes", "concepts", "abstract_ideas"],
strength: 2.0
}];
const defaultSettings = {
layers: ["mixed3a"],
iterations: 20,
learningRate: 0.01,
octaveScale: 1.4,
octaves: 4,
maxLoss: 10.0,
stepSize: 1.5,
tileSize: 512
};
const GlassDeepDreamGlass = /*#__PURE__*/forwardRef(({
imageSource,
availableLayers = defaultNeuralLayers,
selectedLayers = ["mixed3a"],
dreamSettings = {},
showLayerSelector = true,
showPreview = true,
showSettings = true,
enableRealTime = false,
enableAnimation = true,
enableTiling = true,
animationSpeed = 1.0,
canvasWidth = 800,
canvasHeight = 600,
onDreamGenerated,
onLayerActivation,
onProgress,
className = "",
...props
}, ref) => {
const prefersReducedMotion = useReducedMotion();
const [isGenerating, setIsGenerating] = useState(false);
const [currentIteration, setCurrentIteration] = useState(0);
const [progress, setProgress] = useState(0);
const [originalImage, setOriginalImage] = useState(imageSource || "");
const [dreamedImage, setDreamedImage] = useState("");
const [layerActivations, setLayerActivations] = useState({});
const animationFrameRef = useRef(0);
const [enableTilingState, setEnableTilingState] = useState(enableTiling);
const [enableAnimationState, setEnableAnimationState] = useState(enableAnimation);
const [settings, setSettings] = useState({
...defaultSettings,
...dreamSettings,
layers: selectedLayers
});
const canvasRef = useRef(null);
const dreamCanvasRef = useRef(null);
const animationRef = useRef();
useA11yId("glass-deep-dream");
const {
shouldAnimate
} = useMotionPreference();
const {
play
} = useGlassSound();
// Simulate neural network layer activations
const simulateLayerActivation = useCallback((layer, imageData) => {
const {
width,
height
} = imageData;
const activations = [];
// Simulate different layer types
switch (layer.type) {
case "conv":
// Convolutional layers detect local features
for (let i = 0; i < 100; i++) {
const x = Math.floor(Math.random() * width);
const y = Math.floor(Math.random() * height);
const pixelIndex = (y * width + x) * 4;
const r = imageData.data[pixelIndex];
const g = imageData.data[pixelIndex + 1];
const b = imageData.data[pixelIndex + 2];
const activation = Math.tanh((r + g + b) / (255 * 3) - 0.5) * layer.strength;
activations.push(activation);
}
break;
case "inception":
// Inception layers detect complex patterns
for (let i = 0; i < 50; i++) {
const activation = (Math.random() - 0.5) * layer.strength * 2;
activations.push(Math.tanh(activation));
}
break;
default:
// Default activation pattern
for (let i = 0; i < 64; i++) {
activations.push((Math.random() - 0.5) * layer.strength);
}
}
return activations;
}, []);
// Apply deep dream effect
const applyDeepDream = useCallback((imageData, layer, intensity) => {
const data = new Uint8ClampedArray(imageData.data);
const {
width,
height
} = imageData;
// Generate dream patterns based on layer type
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const index = (y * width + x) * 4;
let r = data[index];
let g = data[index + 1];
let b = data[index + 2];
// Apply different effects based on layer type
switch (layer.type) {
case "conv":
// Edge enhancement and texture amplification
const edgeX = x / width - 0.5;
const edgeY = y / height - 0.5;
const edgeStrength = Math.sqrt(edgeX * edgeX + edgeY * edgeY);
const enhancement = Math.sin(edgeStrength * 20) * intensity * layer.strength * 50;
r = Math.max(0, Math.min(255, r + enhancement));
g = Math.max(0, Math.min(255, g + enhancement));
b = Math.max(0, Math.min(255, b + enhancement));
break;
case "inception":
// Complex pattern generation
const spiralX = Math.cos((x + y) * 0.05) * Math.sin(x * 0.02);
const spiralY = Math.sin((x + y) * 0.05) * Math.cos(y * 0.02);
const spiralIntensity = (spiralX + spiralY) * intensity * layer.strength * 30;
r = Math.max(0, Math.min(255, r + spiralIntensity));
g = Math.max(0, Math.min(255, g + spiralIntensity * 0.8));
b = Math.max(0, Math.min(255, b + spiralIntensity * 0.6));
break;
case "dense":
// Global feature amplification
const globalPattern = Math.sin(x * 0.01) * Math.cos(y * 0.01);
const amplification = globalPattern * intensity * layer.strength * 20;
r = Math.max(0, Math.min(255, r * (1 + amplification / 255)));
g = Math.max(0, Math.min(255, g * (1 + amplification / 255)));
b = Math.max(0, Math.min(255, b * (1 + amplification / 255)));
break;
default:
// Default pattern
const wave = Math.sin(x * 0.03) * Math.cos(y * 0.03);
const modification = wave * intensity * layer.strength * 15;
r = Math.max(0, Math.min(255, r + modification));
g = Math.max(0, Math.min(255, g + modification));
b = Math.max(0, Math.min(255, b + modification));
}
data[index] = r;
data[index + 1] = g;
data[index + 2] = b;
}
}
return new ImageData(data, width, height);
}, []);
// Generate deep dream
const generateDeepDream = useCallback(async () => {
if (!originalImage) return;
setIsGenerating(true);
setCurrentIteration(0);
setProgress(0);
play("processing");
const canvas = canvasRef.current;
const dreamCanvas = dreamCanvasRef.current;
if (!canvas || !dreamCanvas) return;
const ctx = canvas.getContext("2d");
const dreamCtx = dreamCanvas.getContext("2d");
if (!ctx || !dreamCtx) return;
// Load original image
const img = new Image();
img.onload = async () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process through multiple octaves
for (let octave = 0; octave < settings.octaves; octave++) {
// Scale image for current octave
const scale = Math.pow(settings.octaveScale, octave);
Math.floor(canvas.width / scale);
Math.floor(canvas.height / scale);
// Process iterations for this octave
for (let iteration = 0; iteration < Math.floor(settings.iterations / settings.octaves); iteration++) {
const totalIteration = octave * Math.floor(settings.iterations / settings.octaves) + iteration;
setCurrentIteration(totalIteration);
const pct = totalIteration / settings.iterations * 100;
setProgress(pct);
onProgress?.(pct, totalIteration);
// Apply deep dream to selected layers
for (const layerId of settings.layers) {
const layer = availableLayers.find(l => l.id === layerId);
if (layer) {
// Simulate layer activation
const activations = simulateLayerActivation(layer, currentImageData);
setLayerActivations(prev => ({
...prev,
[layerId]: activations
}));
onLayerActivation?.(layerId, activations);
// Apply dream effect
const intensity = settings.learningRate * settings.stepSize;
currentImageData = applyDeepDream(currentImageData, layer, intensity);
}
}
// Update dream canvas
dreamCtx.putImageData(currentImageData, 0, 0);
// Add delay for animation
await new Promise(resolve => setTimeout(resolve, 100 / animationSpeed));
}
}
const dreamUrl = dreamCanvas.toDataURL();
setDreamedImage(dreamUrl);
onDreamGenerated?.(dreamUrl, settings);
setIsGenerating(false);
play("success");
};
img.src = originalImage;
}, [originalImage, settings, availableLayers, simulateLayerActivation, applyDeepDream, animationSpeed, onProgress, onLayerActivation, onDreamGenerated, play]);
// Animation loop
const animateDeepDream = useCallback(() => {
if (!enableAnimation || isGenerating) return;
animationFrameRef.current += 1;
const canvas = dreamCanvasRef.current;
if (canvas && dreamedImage) {
const ctx = canvas.getContext("2d");
if (ctx) {
const img = new Image();
img.onload = () => {
// Create animated effect
ctx.save();
ctx.globalAlpha = 0.1;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(animationFrameRef.current * 0.01);
ctx.drawImage(img, -canvas.width / 2, -canvas.height / 2);
ctx.restore();
};
img.src = dreamedImage;
}
}
animationRef.current = requestAnimationFrame(animateDeepDream);
}, [enableAnimation, isGenerating, dreamedImage]);
// Handle layer selection
const toggleLayer = useCallback(layerId => {
setSettings(prev => {
const layers = prev.layers.includes(layerId) ? prev.layers.filter(id => id !== layerId) : [...prev.layers, layerId];
return {
...prev,
layers
};
});
play("select");
}, [play]);
// Initialize
useEffect(() => {
if (!enableAnimation || isGenerating) return;
animationRef.current = requestAnimationFrame(animateDeepDream);
return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
};
}, [enableAnimation, isGenerating, animateDeepDream]);
useEffect(() => {
if (enableRealTime && originalImage) {
const debounceTimer = setTimeout(() => {
generateDeepDream();
}, 1000);
return () => clearTimeout(debounceTimer);
}
}, [settings, enableRealTime, originalImage, generateDeepDream]);
const LayerSelector = () => jsxs("div", {
className: 'space-y-4',
children: [jsx("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: "Neural Layers"
}), jsx("div", {
className: 'space-y-2',
children: availableLayers.map(layer => jsxs(motion.div, {
className: `
p-3 rounded-lg border cursor-pointer transition-all duration-200
${settings.layers.includes(layer.id) ? "border-blue-400 bg-blue-400/20" : "border-white/20 hover:border-white/40 bg-white/5"}
`,
whileHover: shouldAnimate ? {
scale: 1.01
} : {},
whileTap: shouldAnimate ? {
scale: 0.99
} : {},
onClick: () => toggleLayer(layer.id),
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between",
children: [jsxs("div", {
className: "glass-flex-1",
children: [jsxs("div", {
className: 'glass-flex glass-items-center space-x-2 mb-1',
children: [jsx("h5", {
className: 'glass-text-sm font-medium text-primary/90',
children: layer.name
}), jsx("span", {
className: `
px-2 py-0.5 rounded text-xs font-medium
${layer.type === "conv" ? "bg-green-500/20 text-green-300" : layer.type === "inception" ? "bg-purple-500/20 text-purple-300" : layer.type === "dense" ? "bg-blue-500/20 text-blue-300" : "bg-gray-500/20 text-gray-300"}
`,
children: layer.type
})]
}), jsx("p", {
className: 'glass-text-xs text-primary/60 mb-2',
children: layer.description
}), jsxs("div", {
className: 'glass-flex glass-items-center space-x-4 glass-text-xs text-primary/50',
children: [jsxs("span", {
children: ["Depth: ", layer.depth]
}), jsxs("span", {
children: ["Strength: ", layer.strength.toFixed(1)]
})]
}), jsx("div", {
className: 'glass-flex glass-flex-wrap glass-gap-1 mt-2',
children: layer.features.slice(0, 3).map(feature => jsx("span", {
className: 'glass-px-1.5 glass-py-0.5 glass-surface-subtle/10 text-primary/60 glass-radius glass-text-xs',
children: feature.replace("_", " ")
}, feature))
})]
}), settings.layers.includes(layer.id) && jsx("div", {
className: 'text-primary ml-2',
children: "\u2713"
})]
}), layerActivations[layer.id] && jsx("div", {
className: 'mt-2 pt-2 glass-border-t glass-border-white/10',
children: jsx("div", {
className: 'glass-flex glass-items-center space-x-1',
children: layerActivations[layer.id].slice(0, 20).map((activation, i) => jsx("div", {
className: 'w-1 glass-surface-blue glass-radius',
style: {
height: `${Math.abs(activation) * 10 + 2}px`,
opacity: Math.abs(activation)
}
}, i))
})
})]
}, layer.id))
})]
});
const SettingsPanel = () => jsxs("div", {
className: 'space-y-4',
children: [jsx("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: "Dream Settings"
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 glass-gap-4',
children: [jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-xs text-primary/70 mb-1',
children: ["Iterations: ", settings.iterations]
}), jsx("input", {
type: "range",
min: "5",
max: "100",
value: settings.iterations,
onChange: e => setSettings(prev => ({
...prev,
iterations: parseInt(e.target.value)
})),
className: 'glass-w-full h-2 glass-surface-subtle/20 glass-radius-lg appearance-none cursor-pointer'
})]
}), jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-xs text-primary/70 mb-1',
children: ["Learning Rate: ", settings.learningRate.toFixed(3)]
}), jsx("input", {
type: "range",
min: "0.001",
max: "0.1",
step: "0.001",
value: settings.learningRate,
onChange: e => setSettings(prev => ({
...prev,
learningRate: parseFloat(e.target.value)
})),
className: 'glass-w-full h-2 glass-surface-subtle/20 glass-radius-lg appearance-none cursor-pointer'
})]
}), jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-xs text-primary/70 mb-1',
children: ["Octaves: ", settings.octaves]
}), jsx("input", {
type: "range",
min: "1",
max: "8",
value: settings.octaves,
onChange: e => setSettings(prev => ({
...prev,
octaves: parseInt(e.target.value)
})),
className: 'glass-w-full h-2 glass-surface-subtle/20 glass-radius-lg appearance-none cursor-pointer'
})]
}), jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-xs text-primary/70 mb-1',
children: ["Octave Scale: ", settings.octaveScale.toFixed(1)]
}), jsx("input", {
type: "range",
min: "1.1",
max: "2.0",
step: "0.1",
value: settings.octaveScale,
onChange: e => setSettings(prev => ({
...prev,
octaveScale: parseFloat(e.target.value)
})),
className: 'glass-w-full h-2 glass-surface-subtle/20 glass-radius-lg appearance-none cursor-pointer'
})]
}), jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-xs text-primary/70 mb-1',
children: ["Step Size: ", settings.stepSize.toFixed(1)]
}), jsx("input", {
type: "range",
min: "0.5",
max: "5.0",
step: "0.1",
value: settings.stepSize,
onChange: e => setSettings(prev => ({
...prev,
stepSize: parseFloat(e.target.value)
})),
className: 'glass-w-full h-2 glass-surface-subtle/20 glass-radius-lg appearance-none cursor-pointer'
})]
}), jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-xs text-primary/70 mb-1',
children: ["Max Loss: ", settings.maxLoss.toFixed(1)]
}), jsx("input", {
type: "range",
min: "1.0",
max: "50.0",
step: "1.0",
value: settings.maxLoss,
onChange: e => setSettings(prev => ({
...prev,
maxLoss: parseFloat(e.target.value)
})),
className: 'glass-w-full h-2 glass-surface-subtle/20 glass-radius-lg appearance-none cursor-pointer'
})]
})]
}), jsxs("div", {
className: 'glass-flex glass-items-center space-x-4',
children: [jsxs("label", {
className: 'glass-flex glass-items-center space-x-2 cursor-pointer',
children: [jsx("input", {
type: "checkbox",
checked: enableTilingState,
onChange: e => setEnableTilingState(e.target.checked),
className: 'w-4 h-4 glass-radius glass-border-white/30'
}), jsx("span", {
className: 'glass-text-sm text-primary/80',
children: "Enable Tiling"
})]
}), jsxs("label", {
className: 'glass-flex glass-items-center space-x-2 cursor-pointer',
children: [jsx("input", {
type: "checkbox",
checked: enableAnimationState,
onChange: e => setEnableAnimationState(e.target.checked),
className: 'w-4 h-4 glass-radius glass-border-white/30'
}), jsx("span", {
className: 'glass-text-sm text-primary/80',
children: "Animate Result"
})]
})]
})]
});
return jsxs(OptimizedGlassCore, {
ref: ref,
variant: "frosted",
className: `p-6 space-y-6 ${className}`,
...props,
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsxs("div", {
children: [jsx("h3", {
className: 'glass-text-xl font-semibold text-primary/90',
children: "DeepDream Glass"
}), jsx("p", {
className: 'glass-text-sm text-primary/60',
children: "Neural network-powered surreal image generation"
})]
}), jsxs("div", {
className: 'glass-flex glass-items-center space-x-2',
children: [enableRealTime && jsxs("div", {
className: 'glass-flex glass-items-center space-x-1 text-primary',
children: [jsx("div", {
className: 'w-2 h-2 glass-surface-green glass-radius-full animate-pulse'
}), jsx("span", {
className: "glass-text-xs",
children: "Real-time"
})]
}), isGenerating && jsxs("div", {
className: 'glass-flex glass-items-center space-x-1 text-primary',
children: [jsx("div", {
className: 'w-4 h-4 glass-border-2 glass-border-blue glass-border-t-transparent glass-radius-full animate-spin'
}), jsx("span", {
className: "glass-text-xs",
children: "Dreaming..."
})]
})]
})]
}), showPreview && jsxs("div", {
className: 'glass-grid glass-grid-cols-1 lg:grid-cols-2 glass-gap-4',
children: [jsxs("div", {
className: 'space-y-2',
children: [jsx("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: "Original"
}), jsxs("div", {
className: 'relative aspect-video glass-surface-subtle/5 glass-border glass-border-white/20 glass-radius-lg overflow-hidden',
children: [jsx("canvas", {
ref: canvasRef,
width: canvasWidth,
height: canvasHeight,
className: 'glass-w-full glass-h-full object-cover'
}), !originalImage && jsx("div", {
className: 'absolute inset-0 glass-flex glass-items-center glass-justify-center text-primary/50',
children: jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-4xl mb-2',
children: "\uD83D\uDDBC\uFE0F"
}), jsx("p", {
children: "No image loaded"
})]
})
})]
})]
}), jsxs("div", {
className: 'space-y-2',
children: [jsx("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: "DeepDream"
}), jsxs("div", {
className: 'relative aspect-video glass-surface-subtle/5 glass-border glass-border-white/20 glass-radius-lg overflow-hidden',
children: [jsx("canvas", {
ref: dreamCanvasRef,
width: canvasWidth,
height: canvasHeight,
className: 'glass-w-full glass-h-full object-cover'
}), isGenerating && jsx("div", {
className: 'absolute inset-0 glass-surface-dark/50 glass-flex glass-items-center glass-justify-center',
children: jsxs("div", {
className: 'text-center text-primary',
children: [jsx("div", {
className: 'w-8 h-8 glass-border-2 glass-border-white glass-border-t-transparent glass-radius-full animate-spin glass-mx-auto mb-2'
}), jsxs("div", {
className: "glass-text-sm",
children: ["Iteration ", currentIteration]
}), jsxs("div", {
className: 'glass-text-xs mt-1',
children: [Math.round(progress), "% complete"]
})]
})
})]
})]
})]
}), isGenerating && jsxs("div", {
className: `
p-3 rounded-lg border border-blue-400/30
${createGlassStyle({
blur: "sm",
opacity: 0.8
}).background}
`,
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between mb-2',
children: [jsx("span", {
className: 'glass-text-sm text-primary/80',
children: "Generating Deep Dream..."
}), jsxs("span", {
className: 'glass-text-sm font-medium text-primary',
children: [Math.round(progress), "%"]
})]
}), jsx("div", {
className: 'glass-w-full glass-surface-subtle/20 glass-radius-full h-2',
children: jsx(motion.div, {
className: 'glass-surface-blue h-2 glass-radius-full',
animate: {
width: `${progress}%`
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.3
}
})
}), jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between mt-1 glass-text-xs text-primary/60',
children: [jsxs("span", {
children: ["Iteration: ", currentIteration, " / ", settings.iterations]
}), jsxs("span", {
children: ["Layers: ", settings.layers.length]
})]
})]
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-1 lg:grid-cols-2 glass-gap-6',
children: [showLayerSelector && jsx(LayerSelector, {}), showSettings && jsx(SettingsPanel, {})]
}), jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between pt-4 glass-border-t glass-border-white/10',
children: [jsxs("div", {
className: 'glass-flex glass-items-center space-x-4',
children: [jsx("input", {
type: "file",
accept: "image/*",
onChange: e => {
const file = e.target.files?.[0];
if (file) {
const url = URL.createObjectURL(file);
setOriginalImage(url);
play("upload");
// Load image to canvas
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
if (ctx) {
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = url;
}
}
}
},
className: 'hidden',
id: "dream-image-upload"
}), jsx(motion.label, {
htmlFor: "dream-image-upload",
className: 'glass-px-4 glass-py-2 glass-surface-blue hover:glass-surface-blue text-primary glass-radius-lg glass-text-sm font-medium cursor-pointer transition-colors',
whileHover: shouldAnimate ? {
scale: 1.02
} : {},
whileTap: shouldAnimate ? {
scale: 0.98
} : {},
children: "Upload Image"
}), jsx(motion.button, {
className: 'glass-px-4 glass-py-2 glass-border glass-border-white/30 hover:border-white/50 text-primary/80 glass-radius-lg glass-text-sm transition-colors disabled:opacity-50',
whileHover: shouldAnimate ? {
scale: 1.02
} : {},
whileTap: shouldAnimate ? {
scale: 0.98
} : {},
onClick: generateDeepDream,
disabled: isGenerating || !originalImage || settings.layers.length === 0,
children: isGenerating ? "Generating..." : "Generate Dream"
})]
}), dreamedImage && jsx(motion.a, {
href: dreamedImage,
download: "deep-dream.png",
className: 'glass-px-4 glass-py-2 glass-surface-green hover:glass-surface-green text-primary glass-radius-lg glass-text-sm font-medium transition-colors',
whileHover: shouldAnimate ? {
scale: 1.02
} : {},
whileTap: shouldAnimate ? {
scale: 0.98
} : {},
children: "Download Dream"
})]
})]
});
});
GlassDeepDreamGlass.displayName = "GlassDeepDreamGlass";
export { GlassDeepDreamGlass };
//# sourceMappingURL=GlassDeepDreamGlass.js.map