feat: add Spark Plug module for PDF to 3D generation and move API settings to Dashboard
Build and Deploy / build-and-push (push) Successful in 45s
Build and Deploy / build-and-push (push) Successful in 45s
This commit is contained in:
AI Bot
@@ -0,0 +1,328 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Sparkles, Upload, FileText, Image as ImageIcon, Box, Check, Loader2, ArrowRight, RefreshCw, ChevronLeft } from 'lucide-react';
|
||||
import { api } from '../lib/api';
|
||||
|
||||
const STEPS = [
|
||||
{ id: 1, title: 'Upload PDF', icon: Upload },
|
||||
{ id: 2, title: 'AI Review', icon: FileText },
|
||||
{ id: 3, title: 'Concept Art', icon: ImageIcon },
|
||||
{ id: 4, title: '3D Generation', icon: Box },
|
||||
];
|
||||
|
||||
export default function SparkPlug() {
|
||||
const navigate = useNavigate();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Step 1: PDF File
|
||||
const [pdfFile, setPdfFile] = useState<File | null>(null);
|
||||
|
||||
// Step 2: Extracted Text
|
||||
const [extractedPrompt, setExtractedPrompt] = useState<string>('');
|
||||
|
||||
// Step 3: Generated Image
|
||||
const [generatedImage, setGeneratedImage] = useState<string | null>(null);
|
||||
|
||||
// Step 4: 3D Model
|
||||
const [modelProgress, setModelProgress] = useState(0);
|
||||
|
||||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setPdfFile(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const processStep1 = async () => {
|
||||
if (!pdfFile) return;
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate reading PDF with Gemini
|
||||
const geminiKey = localStorage.getItem('GEMINI_API_KEY');
|
||||
if (!geminiKey) {
|
||||
alert("Please configure your Gemini API Key in the Dashboard Settings first.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// We would normally send the PDF to the backend or use Gemini SDK directly here.
|
||||
// Mocking the extraction for now based on the Indica Shampoo PDF context:
|
||||
await new Promise(r => setTimeout(r, 2000));
|
||||
|
||||
setExtractedPrompt("Product: Indica Easy Herbal Shield Colour Shampoo\nType: Sachet/Packet\nColor Palette: Green, White\nKey Elements: Woman with black hair, Amla & Aloe illustration, 10 Minutes Herbal Care text.\n\nDescription: A glossy green rectangular sachet with vivid branding and product imagery for an herbal hair colour shampoo.");
|
||||
|
||||
setCurrentStep(2);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("Failed to process PDF.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const processStep2 = async () => {
|
||||
if (!extractedPrompt) return;
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const nanoBananaKey = localStorage.getItem('NANO_BANANA_API_KEY');
|
||||
if (!nanoBananaKey) {
|
||||
alert("Please configure your Nano Banana API Key in the Dashboard Settings first.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Mocking the image generation with Nano Banana
|
||||
await new Promise(r => setTimeout(r, 3000));
|
||||
|
||||
// Placeholder image for the shampoo sachet
|
||||
setGeneratedImage("https://images.unsplash.com/photo-1629198688000-71f23e745b6e?w=800&q=80"); // Generic beauty product placeholder
|
||||
|
||||
setCurrentStep(3);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("Failed to generate image.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const processStep3 = async () => {
|
||||
if (!generatedImage) return;
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const meshyKey = localStorage.getItem('MESHY_API_KEY');
|
||||
if (!meshyKey) {
|
||||
alert("Please configure your Meshy API Key in the Dashboard Settings first.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate Meshy generation
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
await new Promise(r => setTimeout(r, 500));
|
||||
setModelProgress(i * 10);
|
||||
}
|
||||
|
||||
setCurrentStep(4);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("Failed to generate 3D model.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const processStep4 = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// Create project and save
|
||||
const res = await api.saveProject({
|
||||
name: "Spark Plug Output - Sachet",
|
||||
scene_data: {} // We would normally attach the generated GLB URL here
|
||||
});
|
||||
if (res.id) {
|
||||
navigate(`/editor/${res.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to create project', err);
|
||||
alert('Failed to save project');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="h-16 border-b border-zinc-800 bg-zinc-900 flex items-center px-8 shrink-0">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="flex items-center gap-2 text-zinc-400 hover:text-white transition-colors mr-6"
|
||||
>
|
||||
<ChevronLeft size={18} />
|
||||
<span className="text-sm font-medium">Dashboard</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2 font-bold text-lg tracking-tight">
|
||||
<Sparkles className="text-amber-500" size={20} />
|
||||
Spark Plug <span className="text-zinc-500 font-normal text-sm ml-2">| Idea to 3D Generation</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col items-center max-w-5xl mx-auto w-full p-8">
|
||||
|
||||
{/* Stepper */}
|
||||
<div className="w-full flex items-center justify-between mb-12 relative">
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-0.5 bg-zinc-800 -z-10" />
|
||||
{STEPS.map((step) => {
|
||||
const Icon = step.icon;
|
||||
const isCompleted = currentStep > step.id;
|
||||
const isCurrent = currentStep === step.id;
|
||||
|
||||
return (
|
||||
<div key={step.id} className="flex flex-col items-center gap-2 bg-zinc-950 px-4">
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-colors ${
|
||||
isCompleted ? 'bg-amber-500 border-amber-500 text-white' :
|
||||
isCurrent ? 'bg-zinc-900 border-amber-500 text-amber-500' :
|
||||
'bg-zinc-900 border-zinc-800 text-zinc-600'
|
||||
}`}>
|
||||
{isCompleted ? <Check size={18} /> : <Icon size={18} />}
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${isCurrent ? 'text-amber-500' : isCompleted ? 'text-zinc-300' : 'text-zinc-600'}`}>
|
||||
{step.title}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="w-full max-w-3xl bg-zinc-900 border border-zinc-800 rounded-2xl p-8 shadow-2xl min-h-[400px] flex flex-col">
|
||||
|
||||
{currentStep === 1 && (
|
||||
<div className="flex-1 flex flex-col items-center justify-center gap-6 animate-in fade-in zoom-in duration-300">
|
||||
<div className="w-20 h-20 bg-zinc-800 rounded-full flex items-center justify-center">
|
||||
<Upload size={32} className="text-zinc-400" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-bold mb-2">Upload Mintel Spark PDF</h2>
|
||||
<p className="text-sm text-zinc-400 max-w-md mx-auto">
|
||||
Upload a product concept PDF. Spark Plug will extract the product details using Gemini AI to prepare for 3D generation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative group w-full max-w-md mt-4">
|
||||
<input
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
onChange={handleFileUpload}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
||||
/>
|
||||
<div className={`w-full p-6 border-2 border-dashed rounded-xl flex flex-col items-center gap-3 transition-colors ${pdfFile ? 'border-amber-500 bg-amber-500/10' : 'border-zinc-700 bg-zinc-950 group-hover:border-zinc-500'}`}>
|
||||
<FileText size={24} className={pdfFile ? 'text-amber-500' : 'text-zinc-500'} />
|
||||
<span className="text-sm font-medium text-zinc-300">
|
||||
{pdfFile ? pdfFile.name : 'Click or drag PDF here'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pdfFile && (
|
||||
<button
|
||||
onClick={processStep1}
|
||||
disabled={isLoading}
|
||||
className="mt-4 flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-black px-6 py-3 rounded-xl font-bold transition-all disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? <Loader2 className="animate-spin" size={18} /> : <Sparkles size={18} />}
|
||||
Extract with Gemini
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<div className="flex-1 flex flex-col gap-4 animate-in fade-in slide-in-from-right-8 duration-300">
|
||||
<h2 className="text-xl font-bold">Review Extracted Concept</h2>
|
||||
<p className="text-sm text-zinc-400">
|
||||
Gemini AI has analyzed the PDF. Review and modify the prompt below before generating images.
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
value={extractedPrompt}
|
||||
onChange={(e) => setExtractedPrompt(e.target.value)}
|
||||
className="w-full flex-1 min-h-[200px] bg-zinc-950 border border-zinc-800 rounded-xl p-4 text-sm text-zinc-200 focus:outline-none focus:border-amber-500 resize-none"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<button
|
||||
onClick={() => processStep1()} // re-run extraction
|
||||
className="flex items-center gap-2 text-zinc-400 hover:text-white px-4 py-2 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
<RefreshCw size={16} /> Regenerate Extraction
|
||||
</button>
|
||||
<button
|
||||
onClick={processStep2}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-black px-6 py-3 rounded-xl font-bold transition-all disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? <Loader2 className="animate-spin" size={18} /> : <ArrowRight size={18} />}
|
||||
Generate Images (Nano Banana)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 3 && (
|
||||
<div className="flex-1 flex flex-col gap-4 animate-in fade-in slide-in-from-right-8 duration-300">
|
||||
<h2 className="text-xl font-bold">Concept Art generated by Nano Banana</h2>
|
||||
<p className="text-sm text-zinc-400">
|
||||
Review the generated product imagery. These images will be used by Meshy to construct the final 3D model.
|
||||
</p>
|
||||
|
||||
<div className="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl flex items-center justify-center overflow-hidden p-4 relative">
|
||||
{generatedImage ? (
|
||||
<img src={generatedImage} alt="Generated Concept" className="max-w-full max-h-[300px] object-contain rounded-lg shadow-xl" />
|
||||
) : (
|
||||
<ImageIcon size={48} className="text-zinc-800" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<button
|
||||
onClick={() => processStep2()} // re-run generation
|
||||
className="flex items-center gap-2 text-zinc-400 hover:text-white px-4 py-2 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
<RefreshCw size={16} /> Regenerate Images
|
||||
</button>
|
||||
<button
|
||||
onClick={processStep3}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-black px-6 py-3 rounded-xl font-bold transition-all disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? <Loader2 className="animate-spin" size={18} /> : <ArrowRight size={18} />}
|
||||
Construct 3D Model (Meshy)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 4 && (
|
||||
<div className="flex-1 flex flex-col items-center justify-center gap-6 animate-in fade-in slide-in-from-right-8 duration-300">
|
||||
<div className="w-24 h-24 rounded-full border-4 border-zinc-800 border-t-amber-500 animate-spin flex items-center justify-center">
|
||||
<Box size={32} className="text-zinc-500 animate-pulse" />
|
||||
</div>
|
||||
|
||||
<div className="text-center w-full max-w-sm">
|
||||
<h2 className="text-xl font-bold mb-2">Generating 3D Model...</h2>
|
||||
<p className="text-sm text-zinc-400 mb-6">
|
||||
Meshy is constructing the model based on the Nano Banana concept images.
|
||||
</p>
|
||||
|
||||
<div className="w-full bg-zinc-950 rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-amber-500 transition-all duration-300"
|
||||
style={{ width: `${modelProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-bold text-amber-500 mt-2">{modelProgress}% Complete</div>
|
||||
</div>
|
||||
|
||||
{modelProgress >= 100 && (
|
||||
<button
|
||||
onClick={processStep4}
|
||||
disabled={isLoading}
|
||||
className="mt-6 flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-black px-8 py-3 rounded-xl font-bold transition-all disabled:opacity-50 animate-in fade-in slide-in-from-bottom-4"
|
||||
>
|
||||
{isLoading ? <Loader2 className="animate-spin" size={18} /> : <Check size={18} />}
|
||||
Open in Editor
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user