diff --git a/src/pages/SparkPlug.tsx b/src/pages/SparkPlug.tsx index a42b44f..900f73a 100644 --- a/src/pages/SparkPlug.tsx +++ b/src/pages/SparkPlug.tsx @@ -21,8 +21,8 @@ export default function SparkPlug() { // Step 2: Extracted Text const [extractedPrompt, setExtractedPrompt] = useState(''); - // Step 3: Generated Image - const [generatedImage, setGeneratedImage] = useState(null); + // Step 3: Generated Images (Multi-view) + const [generatedImages, setGeneratedImages] = useState([]); // Step 4: 3D Model const [modelProgress, setModelProgress] = useState(0); @@ -76,8 +76,13 @@ export default function SparkPlug() { // 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 + // Placeholder images for the 4 views (front, back, left, right) + setGeneratedImages([ + "https://images.unsplash.com/photo-1629198688000-71f23e745b6e?w=400&q=80", // front + "https://images.unsplash.com/photo-1629198725848-18e55e975cc3?w=400&q=80", // back + "https://images.unsplash.com/photo-1629198725838-511bb7405234?w=400&q=80", // left + "https://images.unsplash.com/photo-1629198688000-71f23e745b6e?w=400&q=80", // right + ]); setCurrentStep(3); } catch (err) { @@ -89,7 +94,7 @@ export default function SparkPlug() { }; const processStep3 = async () => { - if (!generatedImage) return; + if (generatedImages.length === 0) return; setIsLoading(true); try { @@ -118,10 +123,26 @@ export default function SparkPlug() { const processStep4 = async () => { setIsLoading(true); try { - // Create project and save + // Mock generated GLB URL from Meshy + const mockGlbUrl = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxTextured/glTF-Binary/BoxTextured.glb"; + + // Create project and save with model injected into scene_data const res = await api.saveProject({ - name: "Spark Plug Output - Sachet", - scene_data: {} // We would normally attach the generated GLB URL here + name: "Spark Plug Output", + scene_data: { + objects: [ + { + id: "model_" + Date.now(), + type: "model", + name: "Generated Product Model", + visible: true, + position: [0, 0, 0], + rotation: [0, 0, 0], + scale: [1, 1, 1], + url: mockGlbUrl + } + ] + } }); if (res.id) { navigate(`/editor/${res.id}`); @@ -257,14 +278,25 @@ export default function SparkPlug() {

Concept Art generated by Nano Banana

- Review the generated product imagery. These images will be used by Meshy to construct the final 3D model. + Review the 4-sided product imagery (front, back, left, right). These images will be used by Meshy's Multi-Image API to construct the final 3D model.

-
- {generatedImage ? ( - Generated Concept +
+ {generatedImages.length > 0 ? ( +
+ {generatedImages.map((img, idx) => ( +
+ {`View +
+ {['FRONT', 'BACK', 'LEFT', 'RIGHT'][idx]} +
+
+ ))} +
) : ( - +
+ +
)}