create-stylus-ide 1.0.0

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

@@ -0,0 +1,259 @@
+'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, Image as ImageIcon, Download, ExternalLink } from 'lucide-react';
+import { usePublicClient } from 'wagmi';
+import { arbitrumSepolia } from 'wagmi/chains';
+import { RAY_TRACING_ABI } from '@/lib/ray-tracing-abi';
+import { bytesToImageData } from '@/lib/ray-tracing-abi';
+import { useEffect, useRef } from 'react';
+
+interface RenderingPanelProps {
+  nftAddress: string;
+  isNftConnected: boolean;
+  mintedTokenId: bigint | null;
+}
+
+export function RenderingPanel({
+  nftAddress,
+  isNftConnected,
+  mintedTokenId,
+}: RenderingPanelProps) {
+  const [tokenIdInput, setTokenIdInput] = useState('');
+  const [isRendering, setIsRendering] = useState(false);
+  const [renderedData, setRenderedData] = useState<Uint8Array | null>(null);
+  const [renderError, setRenderError] = useState<string | null>(null);
+  const [gasUsed, setGasUsed] = useState<string | null>(null);
+  
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const publicClient = usePublicClient({ chainId: arbitrumSepolia.id });
+
+  // Auto-fill with minted token ID
+  useEffect(() => {
+    if (mintedTokenId !== null) {
+      setTokenIdInput(mintedTokenId.toString());
+    }
+  }, [mintedTokenId]);
+
+  const handleRender = async () => {
+    if (!publicClient || !tokenIdInput) {
+      alert('Please enter a token ID');
+      return;
+    }
+
+    setIsRendering(true);
+    setRenderError(null);
+    setGasUsed('120000'); // Estimated gas
+
+    try {
+      const tokenId = BigInt(tokenIdInput);
+
+      // Call the render function
+      const result = await publicClient.readContract({
+        address: nftAddress as `0x${string}`,
+        abi: RAY_TRACING_ABI as any,
+        functionName: 'renderToken', // Changed from render_token
+        args: [tokenId],
+      });
+
+      // Convert hex string to Uint8Array
+      const hexString = (result as string).slice(2); // Remove '0x' prefix
+      const bytes = new Uint8Array(hexString.length / 2);
+      for (let i = 0; i < bytes.length; i++) {
+        bytes[i] = parseInt(hexString.substring(i * 2, i * 2 + 2), 16);
+      }
+
+      if (bytes.length !== 3072) {
+        throw new Error(`Expected 3,072 bytes, got ${bytes.length}`);
+      }
+
+      setRenderedData(bytes);
+      renderToCanvas(bytes);
+    } catch (error: any) {
+      console.error('Rendering failed:', error);
+      setRenderError(error.message || 'Failed to render. Check token ID and contract.');
+    } finally {
+      setIsRendering(false);
+    }
+  };
+
+  const renderToCanvas = (pixelData: Uint8Array) => {
+    if (!canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const width = 32;
+    const height = 32;
+    canvas.width = width;
+    canvas.height = height;
+
+    // Create ImageData from pixel bytes
+    const imageData = ctx.createImageData(width, height);
+    
+    for (let i = 0; i < pixelData.length; i += 3) {
+      const pixelIndex = i / 3;
+      const dataIndex = pixelIndex * 4;
+      
+      imageData.data[dataIndex] = pixelData[i];       // R
+      imageData.data[dataIndex + 1] = pixelData[i + 1]; // G
+      imageData.data[dataIndex + 2] = pixelData[i + 2]; // B
+      imageData.data[dataIndex + 3] = 255;              // A
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  const handleDownload = () => {
+    if (!canvasRef.current) return;
+    
+    const link = document.createElement('a');
+    link.download = `ray-tracing-token-${tokenIdInput}.png`;
+    link.href = canvasRef.current.toDataURL();
+    link.click();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>On-Chain Ray Tracing</CardTitle>
+        <CardDescription>
+          Render 32×32 3D image with full lighting calculation
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Token ID Input */}
+        <div className="space-y-2">
+          <Label htmlFor="token-id">Token ID to Render</Label>
+          <div className="flex gap-2">
+            <Input
+              id="token-id"
+              type="number"
+              placeholder="0"
+              value={tokenIdInput}
+              onChange={(e) => setTokenIdInput(e.target.value)}
+              disabled={isRendering}
+            />
+            <Button
+              onClick={handleRender}
+              disabled={!isNftConnected || !tokenIdInput || isRendering}
+              className="min-w-32"
+            >
+              {isRendering ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Rendering...
+                </>
+              ) : (
+                <>
+                  <ImageIcon className="h-4 w-4 mr-2" />
+                  Render
+                </>
+              )}
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {mintedTokenId !== null 
+              ? `Your minted token: ${mintedTokenId.toString()}`
+              : 'Enter any valid token ID to render'
+            }
+          </p>
+        </div>
+
+        {/* Gas Estimate */}
+        {gasUsed && (
+          <div className="bg-muted p-3 rounded-md text-xs">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Estimated Gas:</span>
+              <span className="font-mono">{Number(gasUsed).toLocaleString()}</span>
+            </div>
+            <div className="flex justify-between mt-1">
+              <span className="text-muted-foreground">Est. Cost:</span>
+              <span className="font-mono">~${(Number(gasUsed) * 0.02 / 1e9 * 2500).toFixed(4)}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Canvas Display */}
+        {renderedData ? (
+          <div className="space-y-3">
+            <div className="flex items-center justify-center bg-muted rounded-md p-4">
+              <canvas
+                ref={canvasRef}
+                className="border border-border rounded-md"
+                style={{ 
+                  imageRendering: 'pixelated',
+                  width: '256px',
+                  height: '256px',
+                }}
+              />
+            </div>
+
+            {/* Render Info */}
+            <div className="bg-green-500/10 border border-green-500/20 p-3 rounded-md text-xs space-y-1">
+              <h4 className="font-semibold text-green-400">✓ Rendered On-Chain</h4>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Resolution:</span>
+                <span>32×32 pixels</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Data Size:</span>
+                <span>{renderedData.length.toLocaleString()} bytes</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Algorithm:</span>
+                <span>Ray-sphere intersection + diffuse lighting</span>
+              </div>
+            </div>
+
+            {/* Download Button */}
+            <Button
+              onClick={handleDownload}
+              variant="outline"
+              className="w-full"
+              size="sm"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Download 32×32 PNG
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-64 border border-border rounded-md bg-muted">
+            <div className="text-center text-muted-foreground">
+              <ImageIcon className="h-12 w-12 mx-auto mb-3 opacity-50" />
+              <p className="text-sm">Render a token to see the result</p>
+            </div>
+          </div>
+        )}
+
+        {/* Error Display */}
+        {renderError && (
+          <div className="bg-red-500/10 border border-red-500/20 p-3 rounded-md text-sm text-red-400">
+            <p className="font-medium">Rendering Failed</p>
+            <p className="text-xs mt-1">{renderError}</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>• Contract loads 21-byte config from storage</li>
+            <li>• For each of 1,024 pixels:</li>
+            <li className="pl-4">→ Generate ray from camera</li>
+            <li className="pl-4">→ Check sphere intersection (quadratic equation)</li>
+            <li className="pl-4">→ Calculate lighting (dot product)</li>
+            <li className="pl-4">→ Store RGB value</li>
+            <li>• Returns 3,072 bytes (32×32×3 RGB)</li>
+            <li>• 100% deterministic - same input = same output</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Loader2, Sparkles } from 'lucide-react';
+import { usePublicClient } from 'wagmi';
+import { arbitrumSepolia } from 'wagmi/chains';
+import { MNN_ABI } from '@/lib/ray-tracing-abi';
+
+interface StyleControlsProps {
+  warmth: number;
+  setWarmth: (value: number) => void;
+  intensity: number;
+  setIntensity: (value: number) => void;
+  depth: number;
+  setDepth: (value: number) => void;
+  mnnAddress: string;
+  predictedColors: [number, number, number] | null;
+  setPredictedColors: (colors: [number, number, number] | null) => void;
+}
+
+export function StyleControls({
+  warmth,
+  setWarmth,
+  intensity,
+  setIntensity,
+  depth,
+  setDepth,
+  mnnAddress,
+  predictedColors,
+  setPredictedColors,
+}: StyleControlsProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const publicClient = usePublicClient({ chainId: arbitrumSepolia.id });
+
+  const handlePreview = async () => {
+    if (!publicClient) return;
+
+    setIsLoading(true);
+
+    try {
+      // Convert 0-100 to 0-10^18 scale
+      const warmthScaled = BigInt(Math.floor((warmth / 100) * 1e18));
+      const intensityScaled = BigInt(Math.floor((intensity / 100) * 1e18));
+      const depthScaled = BigInt(Math.floor((depth / 100) * 1e18));
+
+      const result = await publicClient.readContract({
+        address: mnnAddress as `0x${string}`,
+        abi: MNN_ABI as any,
+        functionName: 'viewAesthetic', // Changed from view_aesthetic
+        args: [warmthScaled, intensityScaled, depthScaled],
+      });
+
+      const [r, g, b] = result as [number, number, number];
+      setPredictedColors([r, g, b]);
+    } catch (error) {
+      console.error('Preview failed:', error);
+      alert('Failed to preview colors. Check contract connection.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Style Parameters</CardTitle>
+        <CardDescription>
+          Adjust aesthetic parameters for neural network prediction
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Warmth Slider */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Warmth</Label>
+            <span className="text-sm text-muted-foreground">{warmth}%</span>
+          </div>
+          <Slider
+            value={[warmth]}
+            onValueChange={(value) => setWarmth(value[0])}
+            min={0}
+            max={100}
+            step={1}
+            className="w-full"
+          />
+          <p className="text-xs text-muted-foreground">
+            Cool tones (0%) to warm tones (100%)
+          </p>
+        </div>
+
+        {/* Intensity Slider */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Intensity</Label>
+            <span className="text-sm text-muted-foreground">{intensity}%</span>
+          </div>
+          <Slider
+            value={[intensity]}
+            onValueChange={(value) => setIntensity(value[0])}
+            min={0}
+            max={100}
+            step={1}
+            className="w-full"
+          />
+          <p className="text-xs text-muted-foreground">
+            Subtle (0%) to vibrant (100%)
+          </p>
+        </div>
+
+        {/* Depth Slider */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Depth</Label>
+            <span className="text-sm text-muted-foreground">{depth}%</span>
+          </div>
+          <Slider
+            value={[depth]}
+            onValueChange={(value) => setDepth(value[0])}
+            min={0}
+            max={100}
+            step={1}
+            className="w-full"
+          />
+          <p className="text-xs text-muted-foreground">
+            Flat (0%) to dimensional (100%)
+          </p>
+        </div>
+
+        {/* Preview Button */}
+        <Button
+          onClick={handlePreview}
+          disabled={isLoading}
+          className="w-full"
+          size="lg"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              Predicting...
+            </>
+          ) : (
+            <>
+              <Sparkles className="h-4 w-4 mr-2" />
+              Preview Colors (FREE)
+            </>
+          )}
+        </Button>
+
+        {/* Predicted Colors Display */}
+        {predictedColors && (
+          <div className="space-y-3">
+            <div className="bg-green-500/10 border border-green-500/20 p-3 rounded-md">
+              <h4 className="text-sm font-semibold text-green-400 mb-3">✓ Neural Network Prediction</h4>
+              <div className="flex items-center gap-3">
+                <div
+                  className="w-20 h-20 rounded-md border-2 border-green-500/50 shadow-lg"
+                  style={{
+                    backgroundColor: `rgb(${predictedColors[0]}, ${predictedColors[1]}, ${predictedColors[2]})`,
+                  }}
+                />
+                <div className="flex-1 space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs text-muted-foreground">Red</span>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-12 h-3 rounded-sm border border-border"
+                        style={{ backgroundColor: `rgb(${predictedColors[0]}, 0, 0)` }}
+                      />
+                      <span className="font-mono text-xs w-8">{predictedColors[0]}</span>
+                    </div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs text-muted-foreground">Green</span>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-12 h-3 rounded-sm border border-border"
+                        style={{ backgroundColor: `rgb(0, ${predictedColors[1]}, 0)` }}
+                      />
+                      <span className="font-mono text-xs w-8">{predictedColors[1]}</span>
+                    </div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs text-muted-foreground">Blue</span>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-12 h-3 rounded-sm border border-border"
+                        style={{ backgroundColor: `rgb(0, 0, ${predictedColors[2]})` }}
+                      />
+                      <span className="font-mono text-xs w-8">{predictedColors[2]}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <p className="text-xs text-green-400 mt-3 flex items-center gap-1">
+                <Sparkles className="h-3 w-3" />
+                Computed on-chain with 0 gas cost (VIEW function)
+              </p>
+            </div>
+          </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">💡 How It Works:</p>
+          <p>
+            The Mini Neural Network (3→4→2 architecture) runs entirely on-chain as a VIEW function.
+            It predicts aesthetic RGB colors based on your style parameters - completely free!
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}