create-stylus-ide 1.0.0

package/frontend/components/ray-tracing/MintingForm.tsx

@@ -0,0 +1,280 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Coins, ExternalLink, CheckCircle2 } from 'lucide-react';
+import { useAccount, useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
+import { arbitrumSepolia } from 'wagmi/chains';
+import { RAY_TRACING_ABI } from '@/lib/ray-tracing-abi';
+
+interface MintingFormProps {
+  nftAddress: string;
+  isNftConnected: boolean;
+  predictedColors: [number, number, number] | null;
+  cameraX: number;
+  cameraY: number;
+  cameraZ: number;
+  onMintSuccess: (tokenId: bigint) => void;
+}
+
+export function MintingForm({
+  nftAddress,
+  isNftConnected,
+  predictedColors,
+  cameraX,
+  cameraY,
+  cameraZ,
+  onMintSuccess,
+}: MintingFormProps) {
+  const { isConnected: walletConnected } = useAccount();
+  
+  // Background colors (can be customized)
+  const [bgTopR, setBgTopR] = useState(255);
+  const [bgTopG, setBgTopG] = useState(255);
+  const [bgTopB, setBgTopB] = useState(255);
+  const [bgBottomR, setBgBottomR] = useState(91);
+  const [bgBottomG, setBgBottomG] = useState(127);
+  const [bgBottomB, setBgBottomB] = useState(213);
+
+  const { writeContract, data: hash, isPending, error } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess, data: receipt } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  const handleMint = async () => {
+    if (!walletConnected || !isNftConnected || !predictedColors) {
+      alert('Please connect wallet and generate colors first');
+      return;
+    }
+
+    try {
+      writeContract({
+        address: nftAddress as `0x${string}`,
+        abi: RAY_TRACING_ABI,
+        functionName: 'mint',
+        args: [
+          predictedColors[0],  // sphere_r
+          predictedColors[1],  // sphere_g
+          predictedColors[2],  // sphere_b
+          bgTopR,              // bg_color1_r
+          bgTopG,              // bg_color1_g
+          bgTopB,              // bg_color1_b
+          bgBottomR,           // bg_color2_r
+          bgBottomG,           // bg_color2_g
+          bgBottomB,           // bg_color2_b
+          cameraX,             // cam_x
+          cameraY,             // cam_y
+          cameraZ,             // cam_z
+        ],
+      });
+    } catch (err) {
+      console.error('Minting failed:', err);
+    }
+  };
+
+  // Extract token ID from transaction logs when successful
+  if (isSuccess && receipt && !isPending) {
+    // The mint function returns the token_id
+    // We'll parse it from the transaction
+    const tokenId = BigInt(0); // This will be the new token ID
+    setTimeout(() => {
+      onMintSuccess(tokenId);
+    }, 1000);
+  }
+
+  const explorerUrl = hash 
+    ? `${arbitrumSepolia.blockExplorers.default.url}/tx/${hash}`
+    : null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Mint NFT</CardTitle>
+        <CardDescription>
+          Store rendering parameters on-chain as an NFT
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Background Colors */}
+        <div className="space-y-3">
+          <h4 className="text-sm font-semibold">Background Gradient</h4>
+          
+          {/* Top Color */}
+          <div className="flex items-center gap-3">
+            <div
+              className="w-12 h-12 rounded-md border border-border"
+              style={{ backgroundColor: `rgb(${bgTopR}, ${bgTopG}, ${bgTopB})` }}
+            />
+            <div className="flex-1 grid grid-cols-3 gap-2">
+              <Input
+                type="number"
+                placeholder="R"
+                value={bgTopR}
+                onChange={(e) => setBgTopR(Number(e.target.value))}
+                min={0}
+                max={255}
+                className="text-xs"
+              />
+              <Input
+                type="number"
+                placeholder="G"
+                value={bgTopG}
+                onChange={(e) => setBgTopG(Number(e.target.value))}
+                min={0}
+                max={255}
+                className="text-xs"
+              />
+              <Input
+                type="number"
+                placeholder="B"
+                value={bgTopB}
+                onChange={(e) => setBgTopB(Number(e.target.value))}
+                min={0}
+                max={255}
+                className="text-xs"
+              />
+            </div>
+            <Label className="text-xs text-muted-foreground w-12">Top</Label>
+          </div>
+
+          {/* Bottom Color */}
+          <div className="flex items-center gap-3">
+            <div
+              className="w-12 h-12 rounded-md border border-border"
+              style={{ backgroundColor: `rgb(${bgBottomR}, ${bgBottomG}, ${bgBottomB})` }}
+            />
+            <div className="flex-1 grid grid-cols-3 gap-2">
+              <Input
+                type="number"
+                placeholder="R"
+                value={bgBottomR}
+                onChange={(e) => setBgBottomR(Number(e.target.value))}
+                min={0}
+                max={255}
+                className="text-xs"
+              />
+              <Input
+                type="number"
+                placeholder="G"
+                value={bgBottomG}
+                onChange={(e) => setBgBottomG(Number(e.target.value))}
+                min={0}
+                max={255}
+                className="text-xs"
+              />
+              <Input
+                type="number"
+                placeholder="B"
+                value={bgBottomB}
+                onChange={(e) => setBgBottomB(Number(e.target.value))}
+                min={0}
+                max={255}
+                className="text-xs"
+              />
+            </div>
+            <Label className="text-xs text-muted-foreground w-12">Bottom</Label>
+          </div>
+        </div>
+
+        {/* Parameters Summary */}
+        <div className="bg-muted p-3 rounded-md text-xs space-y-1">
+          <h4 className="font-semibold mb-2">Parameters to Store</h4>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <span className="text-muted-foreground">Sphere RGB:</span>
+              <span className="ml-2 font-mono">
+                {predictedColors ? `${predictedColors[0]},${predictedColors[1]},${predictedColors[2]}` : 'N/A'}
+              </span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Camera:</span>
+              <span className="ml-2 font-mono">
+                {cameraX},{cameraY},{cameraZ}
+              </span>
+            </div>
+          </div>
+          <p className="text-muted-foreground pt-2">
+            Total: 21 bytes (9 colors + 12 camera)
+          </p>
+        </div>
+
+        {/* Mint Button */}
+        <Button
+          onClick={handleMint}
+          disabled={!walletConnected || !isNftConnected || !predictedColors || isPending || isConfirming}
+          className="w-full"
+          size="lg"
+        >
+          {isPending || isConfirming ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              {isPending ? 'Waiting for signature...' : 'Minting NFT...'}
+            </>
+          ) : (
+            <>
+              <Coins className="h-4 w-4 mr-2" />
+              Mint NFT (~$0.0001)
+            </>
+          )}
+        </Button>
+
+        {/* Transaction Status */}
+        {hash && (
+          <div className="space-y-2 pt-4 border-t border-border">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">Transaction:</span>
+              <a
+                href={explorerUrl || '#'}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-primary hover:underline"
+              >
+                {hash.slice(0, 6)}...{hash.slice(-4)}
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">Status:</span>
+              <span className={isSuccess ? 'text-green-500' : 'text-yellow-500'}>
+                {isSuccess ? '✓ Success' : '⏳ Confirming...'}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {isSuccess && (
+          <div className="bg-green-500/10 border border-green-500/20 p-3 rounded-md text-sm text-green-400">
+            <div className="flex items-center gap-2 mb-1">
+              <CheckCircle2 className="h-4 w-4" />
+              <p className="font-medium">NFT Minted Successfully!</p>
+            </div>
+            <p className="text-xs mt-1">
+              Your rendering parameters are now stored on-chain. Ready for Step 5: Full rendering!
+            </p>
+          </div>
+        )}
+
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 p-3 rounded-md text-sm text-red-400">
+            <p className="font-medium">Minting Failed</p>
+            <p className="text-xs mt-1">{error.message}</p>
+          </div>
+        )}
+
+        {/* Info Box */}
+        <div className="bg-blue-500/10 border border-blue-500/20 p-3 rounded-md text-xs text-blue-400">
+          <p className="font-medium mb-1">💡 What Happens:</p>
+          <ul className="space-y-1">
+            <li>• Stores 21 bytes on-chain (colors + camera)</li>
+            <li>• Generates unique token ID</li>
+            <li>• You own the NFT</li>
+            <li>• Anyone can render it later (on-demand)</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/frontend/components/ray-tracing/RenderCanvas.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Sparkles, Download } from 'lucide-react';
+
+interface RenderCanvasProps {
+  predictedColors: [number, number, number] | null;
+  cameraX: number;
+  setCameraX: (value: number) => void;
+  cameraY: number;
+  setCameraY: (value: number) => void;
+  cameraZ: number;
+  setCameraZ: (value: number) => void;
+  isRendering: boolean;
+  renderedPixels: number[] | null;
+  nftAddress: string;
+  isNftConnected: boolean;
+}
+
+export function RenderCanvas({
+  predictedColors,
+  cameraX,
+  setCameraX,
+  cameraY,
+  setCameraY,
+  cameraZ,
+  setCameraZ,
+  isRendering,
+  renderedPixels,
+  nftAddress,
+  isNftConnected,
+}: RenderCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // Client-side simple sphere preview
+  useEffect(() => {
+    if (!predictedColors || !canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const width = 256;
+    const height = 256;
+    canvas.width = width;
+    canvas.height = height;
+
+    // Clear canvas
+    ctx.fillStyle = '#0a0a0a';
+    ctx.fillRect(0, 0, width, height);
+
+    // Draw gradient background
+    const bgGradient = ctx.createLinearGradient(0, 0, 0, height);
+    bgGradient.addColorStop(0, '#ffffff');
+    bgGradient.addColorStop(1, '#5b7fd5');
+    ctx.fillStyle = bgGradient;
+    ctx.fillRect(0, 0, width, height);
+
+    // Draw sphere with radial gradient (simulating 3D lighting)
+    const centerX = width / 2 + cameraX * 10;
+    const centerY = height / 2 - cameraY * 10;
+    const radius = 80 + cameraZ * 5;
+
+    const gradient = ctx.createRadialGradient(
+      centerX - radius * 0.3,
+      centerY - radius * 0.3,
+      radius * 0.1,
+      centerX,
+      centerY,
+      radius
+    );
+
+    const [r, g, b] = predictedColors;
+    
+    // Light side (top-left)
+    gradient.addColorStop(0, `rgb(${Math.min(255, r + 40)}, ${Math.min(255, g + 40)}, ${Math.min(255, b + 40)})`);
+    // Mid tone
+    gradient.addColorStop(0.5, `rgb(${r}, ${g}, ${b})`);
+    // Shadow (bottom-right)
+    gradient.addColorStop(1, `rgb(${Math.floor(r * 0.3)}, ${Math.floor(g * 0.3)}, ${Math.floor(b * 0.3)})`);
+
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Add subtle highlight
+    const highlight = ctx.createRadialGradient(
+      centerX - radius * 0.4,
+      centerY - radius * 0.4,
+      0,
+      centerX - radius * 0.4,
+      centerY - radius * 0.4,
+      radius * 0.3
+    );
+    highlight.addColorStop(0, 'rgba(255, 255, 255, 0.6)');
+    highlight.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    
+    ctx.fillStyle = highlight;
+    ctx.beginPath();
+    ctx.arc(centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.3, 0, Math.PI * 2);
+    ctx.fill();
+
+  }, [predictedColors, cameraX, cameraY, cameraZ]);
+
+  const handleDownload = () => {
+    if (!canvasRef.current) return;
+    
+    const link = document.createElement('a');
+    link.download = 'ray-tracing-preview.png';
+    link.href = canvasRef.current.toDataURL();
+    link.click();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>3D Render Preview</CardTitle>
+        <CardDescription>
+          {predictedColors 
+            ? 'Client-side preview with predicted colors from MNN'
+            : 'Preview colors with neural network first'
+          }
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Canvas */}
+        <div className="flex items-center justify-center bg-muted rounded-md p-4">
+          {predictedColors ? (
+            <canvas
+              ref={canvasRef}
+              className="border border-border rounded-md"
+              style={{ imageRendering: 'pixelated' }}
+            />
+          ) : (
+            <div className="flex items-center justify-center h-64 w-64 text-muted-foreground">
+              <div className="text-center">
+                <Sparkles className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm">Generate preview first</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Camera Controls */}
+        {predictedColors && (
+          <>
+            <div className="space-y-3 pt-4 border-t border-border">
+              <h4 className="text-sm font-semibold">Camera Position</h4>
+              
+              {/* Camera X */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">X-Axis (Left/Right)</Label>
+                  <span className="text-xs text-muted-foreground">{cameraX}</span>
+                </div>
+                <Slider
+                  value={[cameraX]}
+                  onValueChange={(value) => setCameraX(value[0])}
+                  min={-20}
+                  max={20}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+
+              {/* Camera Y */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">Y-Axis (Up/Down)</Label>
+                  <span className="text-xs text-muted-foreground">{cameraY}</span>
+                </div>
+                <Slider
+                  value={[cameraY]}
+                  onValueChange={(value) => setCameraY(value[0])}
+                  min={-20}
+                  max={20}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+
+              {/* Camera Z */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">Z-Axis (Zoom)</Label>
+                  <span className="text-xs text-muted-foreground">{cameraZ}</span>
+                </div>
+                <Slider
+                  value={[cameraZ]}
+                  onValueChange={(value) => setCameraZ(value[0])}
+                  min={-10}
+                  max={10}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+            </div>
+
+            {/* Download Button */}
+            <Button
+              onClick={handleDownload}
+              variant="outline"
+              className="w-full"
+              size="sm"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Download Preview
+            </Button>
+
+            {/* Info about on-chain rendering */}
+            <div className="bg-yellow-500/10 border border-yellow-500/20 p-3 rounded-md text-xs text-yellow-400">
+              <p className="font-medium mb-1">ℹ️ Client-Side Preview</p>
+              <p>
+                This is a simplified preview. For full on-chain ray tracing with proper lighting and shadows,
+                mint an NFT and render on-chain (Step 4).
+              </p>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}