aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
437 lines (434 loc) • 18.9 kB
JavaScript
'use client';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { aiClient } from '../../../lib/ai-client.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 { cn } from '../../../lib/utilsComprehensive.js';
const AIDemo = () => {
const [activeTab, setActiveTab] = useState("forms");
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// Authentication state
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isAuthenticated, setIsAuthenticated] = useState(false);
// Form generation state
const [formContext, setFormContext] = useState("user registration form");
const [generatedFields, setGeneratedFields] = useState([]);
// Search state
const [searchQuery, setSearchQuery] = useState("");
const [searchResults, setSearchResults] = useState([]);
const [enhancedQuery, setEnhancedQuery] = useState("");
// Image analysis state
const [selectedImage, setSelectedImage] = useState(null);
const [imageAnalysis, setImageAnalysis] = useState(null);
// ============================================
// Authentication Handlers
// ============================================
const handleLogin = async () => {
setLoading(true);
setError(null);
try {
const result = await aiClient.login(email, password);
setIsAuthenticated(true);
console.log("Logged in as:", result.user);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const handleRegister = async () => {
setLoading(true);
setError(null);
try {
const result = await aiClient.register(email, password);
setIsAuthenticated(true);
console.log("Registered:", result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const handleLogout = async () => {
await aiClient.logout();
setIsAuthenticated(false);
setEmail("");
setPassword("");
};
// ============================================
// AI Feature Handlers
// ============================================
const handleGenerateForm = async () => {
setLoading(true);
setError(null);
try {
const fields = await aiClient.generateFormFields(formContext, generatedFields);
setGeneratedFields(fields);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const handleSearch = async () => {
setLoading(true);
setError(null);
try {
const result = await aiClient.search(searchQuery, {
limit: 10
});
setSearchResults(result.results);
setEnhancedQuery(result.enhancedQuery);
console.log("Detected intent:", result.intent);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const handleImageUpload = async event => {
const file = event.target.files?.[0];
if (!file) return;
setLoading(true);
setError(null);
try {
// Convert to base64
const reader = new FileReader();
reader.onload = async e => {
const base64 = e.target?.result;
setSelectedImage(base64);
// Analyze image
const analysis = await aiClient.analyzeImage(base64, ["all"]);
setImageAnalysis(analysis);
setLoading(false);
};
reader.readAsDataURL(file);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
const handleRemoveBackground = async () => {
if (!selectedImage) return;
setLoading(true);
setError(null);
try {
const processedImage = await aiClient.removeBackground(selectedImage);
setSelectedImage(processedImage);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
// ============================================
// Render Components
// ============================================
const renderAuthTab = () => jsx("div", {
className: 'space-y-6',
children: jsxs("div", {
children: [jsx("h3", {
className: 'glass-text-lg font-semibold text-primary/90 mb-4',
children: isAuthenticated ? "✓ Authenticated" : "Authentication Required"
}), !isAuthenticated ? jsxs("div", {
className: 'space-y-4',
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium text-primary/80 mb-2',
children: "Email"
}), jsx("input", {
type: "email",
value: email,
onChange: e => setEmail(e.target.value),
placeholder: "user@example.com",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-border-white/20 glass-radius-lg glass-surface-subtle/5 text-primary glass-focus glass-touch-target glass-contrast-guard'
})]
}), jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium text-primary/80 mb-2',
children: "Password"
}), jsx("input", {
type: "password",
value: password,
onChange: e => setPassword(e.target.value),
placeholder: "********",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-border-white/20 glass-radius-lg glass-surface-subtle/5 text-primary glass-focus glass-touch-target glass-contrast-guard'
})]
}), jsxs("div", {
className: "glass-flex glass-gap-3",
children: [jsx("button", {
onClick: handleLogin,
disabled: loading || !email || !password,
className: 'glass-flex-1 glass-px-4 glass-py-2 glass-surface-blue text-primary glass-radius-lg hover:opacity-90 disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: loading ? "Logging in..." : "Login"
}), jsx("button", {
onClick: handleRegister,
disabled: loading || !email || !password,
className: 'glass-flex-1 glass-px-4 glass-py-2 glass-border glass-border-white/30 text-primary glass-radius-lg hover:bg-white/5 disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: loading ? "Registering..." : "Register"
})]
})]
}) : jsxs("div", {
className: 'space-y-4',
children: [jsxs("p", {
className: 'text-primary/70',
children: ["You are logged in as: ", jsx("strong", {
children: email
})]
}), jsx("button", {
onClick: handleLogout,
className: 'glass-px-4 glass-py-2 glass-border glass-border-red-500/30 text-red-400 glass-radius-lg hover:bg-red-500/10 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: "Logout"
})]
})]
})
});
const renderFormsTab = () => jsxs("div", {
className: 'space-y-6',
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium text-primary/80 mb-2',
children: "Form Context (describe your form)"
}), jsx("input", {
type: "text",
value: formContext,
onChange: e => setFormContext(e.target.value),
placeholder: "e.g., 'user registration form', 'contact form', 'payment form'",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-border-white/20 glass-radius-lg glass-surface-subtle/5 text-primary glass-focus glass-touch-target glass-contrast-guard'
})]
}), jsx("button", {
onClick: handleGenerateForm,
disabled: loading || !formContext,
className: 'glass-w-full glass-px-6 glass-py-3 glass-surface-blue text-primary glass-radius-lg hover:opacity-90 disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: loading ? "Generating with GPT-4..." : "🤖 Generate Smart Form Fields"
}), generatedFields.length > 0 && jsxs("div", {
className: 'space-y-3',
children: [jsx("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: "Generated Fields:"
}), generatedFields.map((field, index) => jsxs("div", {
className: "glass-p-4 glass-surface-subtle/10 glass-border glass-border-white/10 glass-radius-lg",
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between mb-2',
children: [jsx("span", {
className: 'font-medium text-primary/90',
children: field.label
}), jsx("span", {
className: "glass-text-xs glass-px-2 glass-py-1 glass-surface-subtle/20 glass-radius",
children: field.fieldType
})]
}), jsx("p", {
className: 'glass-text-sm text-primary/60 mb-2',
children: field.placeholder
}), field.required && jsx("span", {
className: 'glass-text-xs text-red-400',
children: "* Required"
}), field.validation && jsxs("div", {
className: 'glass-text-xs text-primary/50 mt-2',
children: ["Validation: ", JSON.stringify(field.validation)]
})]
}, index))]
})]
});
const renderSearchTab = () => jsxs("div", {
className: 'space-y-6',
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium text-primary/80 mb-2',
children: "Search Query"
}), jsx("input", {
type: "text",
value: searchQuery,
onChange: e => setSearchQuery(e.target.value),
onKeyPress: e => e.key === "Enter" && handleSearch(),
placeholder: "Search anything...",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-border-white/20 glass-radius-lg glass-surface-subtle/5 text-primary glass-focus glass-touch-target glass-contrast-guard'
})]
}), jsx("button", {
onClick: handleSearch,
disabled: loading || !searchQuery,
className: 'glass-w-full glass-px-6 glass-py-3 glass-surface-blue text-primary glass-radius-lg hover:opacity-90 disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: loading ? "Searching with AI..." : "🔍 Semantic Search"
}), enhancedQuery && jsxs("div", {
className: "glass-p-3 glass-surface-subtle/10 glass-border glass-border-blue-400/20 glass-radius-lg",
children: [jsx("span", {
className: 'glass-text-xs text-primary/60',
children: "Enhanced Query:"
}), jsx("p", {
className: 'glass-text-sm text-primary/90 mt-1',
children: enhancedQuery
})]
}), searchResults.length > 0 && jsxs("div", {
className: 'space-y-3',
children: [jsxs("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: ["Results (", searchResults.length, "):"]
}), searchResults.map(result => jsxs("div", {
className: "glass-p-4 glass-surface-subtle/10 glass-border glass-border-white/10 glass-radius-lg",
children: [jsx("p", {
className: 'text-primary/90 mb-2',
children: result.content
}), jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between glass-text-xs text-primary/60',
children: [jsxs("span", {
children: ["Score: ", result.score.toFixed(3)]
}), result.highlights && result.highlights.length > 0 && jsx("span", {
className: 'text-blue-400',
children: "\u2605 Highlighted"
})]
})]
}, result.id))]
})]
});
const renderImagesTab = () => jsxs("div", {
className: 'space-y-6',
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium text-primary/80 mb-2',
children: "Upload Image"
}), jsx("input", {
type: "file",
accept: "image/*",
onChange: handleImageUpload,
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-border-white/20 glass-radius-lg glass-surface-subtle/5 text-primary file:mr-4 file:py-2 file:px-4 file:glass-radius file:border-0 file:glass-surface-blue file:text-primary glass-touch-target glass-contrast-guard'
})]
}), selectedImage && jsxs(Fragment, {
children: [jsx("div", {
className: 'aspect-square glass-surface-subtle/5 glass-border glass-border-white/20 glass-radius-lg overflow-hidden',
children: jsx("img", {
src: selectedImage,
alt: "Uploaded",
className: 'glass-w-full glass-h-full object-cover'
})
}), jsx("button", {
onClick: handleRemoveBackground,
disabled: loading,
className: 'glass-w-full glass-px-6 glass-py-3 glass-surface-green text-primary glass-radius-lg hover:opacity-90 disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: loading ? "Removing Background..." : "✂️ Remove Background"
})]
}), imageAnalysis && jsxs("div", {
className: 'space-y-3',
children: [jsx("h4", {
className: 'glass-text-sm font-medium text-primary/80',
children: "Analysis Results:"
}), jsxs("div", {
className: "glass-grid glass-grid-cols-2 glass-gap-3",
children: [jsxs("div", {
className: "glass-p-3 glass-surface-subtle/10 glass-border glass-border-white/10 glass-radius-lg",
children: [jsx("div", {
className: 'glass-text-2xl font-bold text-primary/90',
children: imageAnalysis.faces?.length || 0
}), jsx("div", {
className: 'glass-text-xs text-primary/60',
children: "Faces Detected"
})]
}), jsxs("div", {
className: "glass-p-3 glass-surface-subtle/10 glass-border glass-border-white/10 glass-radius-lg",
children: [jsx("div", {
className: 'glass-text-2xl font-bold text-primary/90',
children: imageAnalysis.objects?.length || 0
}), jsx("div", {
className: 'glass-text-xs text-primary/60',
children: "Objects Detected"
})]
})]
}), imageAnalysis.labels && imageAnalysis.labels.length > 0 && jsxs("div", {
className: "glass-p-3 glass-surface-subtle/10 glass-border glass-border-white/10 glass-radius-lg",
children: [jsx("div", {
className: 'glass-text-xs text-primary/60 mb-2',
children: "Labels:"
}), jsx("div", {
className: "glass-flex glass-flex-wrap glass-gap-2",
children: imageAnalysis.labels.slice(0, 5).map((label, i) => jsxs("span", {
className: 'glass-px-2 glass-py-1 glass-surface-subtle/20 glass-radius glass-text-xs text-primary/90',
children: [label.description, " (", (label.score * 100).toFixed(0), "%)"]
}, i))
})]
}), imageAnalysis.text && imageAnalysis.text.text && jsxs("div", {
className: "glass-p-3 glass-surface-subtle/10 glass-border glass-border-white/10 glass-radius-lg",
children: [jsx("div", {
className: 'glass-text-xs text-primary/60 mb-2',
children: "Extracted Text:"
}), jsxs("p", {
className: 'glass-text-sm text-primary/90',
children: [imageAnalysis.text.text.substring(0, 200), "..."]
})]
})]
})]
});
// ============================================
// Main Render
// ============================================
return jsx("div", {
"data-glass-component": true,
className: 'min-h-screen glass-p-6',
children: jsx("div", {
className: 'max-w-4xl glass-mx-auto',
children: jsxs(OptimizedGlassCore, {
className: "glass-p-8",
children: [jsxs("div", {
className: 'mb-8',
children: [jsx("h1", {
className: 'glass-text-3xl font-bold text-primary/90 mb-2',
children: "\uD83E\uDD16 AuraGlass AI Demo"
}), jsx("p", {
className: 'text-primary/60',
children: "Production-ready AI features with real OpenAI, Pinecone, and Google Vision APIs"
})]
}), error && jsx("div", {
className: 'mb-6 glass-p-4 glass-border glass-border-red-500/30 glass-surface-red/20 glass-radius-lg',
children: jsxs("p", {
className: 'text-red-400 glass-text-sm',
children: ["\u26A0\uFE0F ", error]
})
}), jsx("div", {
className: 'glass-flex glass-gap-2 mb-6 glass-border-b glass-border-white/10 pb-4',
children: [{
id: "auth",
label: "🔐 Auth",
icon: "🔐"
}, {
id: "forms",
label: "📝 Smart Forms",
icon: "📝"
}, {
id: "search",
label: "🔍 Search",
icon: "🔍"
}, {
id: "images",
label: "🖼️ Images",
icon: "🖼️"
}].map(tab => jsx("button", {
onClick: () => setActiveTab(tab.id),
className: cn("px-4 py-2 glass-radius-lg transition-colors glass-focus glass-touch-target glass-contrast-guard", activeTab === tab.id ? "glass-surface-blue text-primary" : "text-primary/60 hover:text-primary/90 hover:bg-white/5"),
children: tab.label
}, tab.id))
}), jsxs("div", {
className: 'min-h-[400px]',
children: [activeTab === "auth" && renderAuthTab(), activeTab === "forms" && renderFormsTab(), activeTab === "search" && renderSearchTab(), activeTab === "images" && renderImagesTab()]
}), jsx("div", {
className: 'mt-8 pt-6 glass-border-t glass-border-white/10',
children: jsxs("div", {
className: 'glass-text-xs text-primary/60',
children: ["\uD83D\uDCA1 ", jsx("strong", {
children: "Tip:"
}), " Make sure your API server is running on port 3001. Run:", " ", jsx("code", {
className: "glass-px-2 glass-py-1 glass-surface-subtle/20 glass-radius",
children: "npm run server:all"
})]
})
})]
})
})
});
};
export { AIDemo, AIDemo as default };
//# sourceMappingURL=AIDemo.js.map