Upload 44 files

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 huggingface-word-to-code/public/fonts/GoogleSans-Bold.ttf filter=lfs diff=lfs merge=lfs -text
+public/fonts/GoogleSans-Bold.ttf filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,59 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Create .env.local if environment variables are provided
+RUN touch .env.local
+RUN if [ -n "$GEMINI_API_KEY" ]; then \
+    echo "GEMINI_API_KEY=$GEMINI_API_KEY" >> .env.local; \
+    fi
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.env.local ./.env.local
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"] 

README.md

@@ -1,10 +1,99 @@
+# Word to Code
+
+[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/tinazone/word-to-code)
+
+This is a [Next.js](https://nextjs.org) project that transforms natural language descriptions into visual code sketches.
+
+## 🤗 HuggingFace Space Setup
+
+1. Clone the repository:
+```bash
+git clone https://huggingface.co/spaces/tinazone/word-to-code
+cd word-to-code
+```
+
+2. Set up your environment variables:
+   - Go to your HuggingFace Space's Settings tab
+   - Under "Repository Secrets", add a new secret:
+     - Name: `GEMINI_API_KEY`
+     - Value: Your Gemini API key from https://ai.google.dev/
+   - The secret will be securely passed to the container at runtime
+
+3. Make your changes and push them back:
+```bash
+git add .
+git commit -m "Update space"
+git push
+```
+
+Note: When pushing, use a HuggingFace access token with write permissions as your password. Generate one from: https://huggingface.co/settings/tokens
+
+## 🎨 Space Configuration
+
 ---
-title: Word To Code
-emoji: 🏆
-colorFrom: purple
-colorTo: pink
+title: Word to Code - Visual Code Sketch Generator
+emoji: 🎨
+colorFrom: blue
+colorTo: purple
 sdk: docker
 pinned: false
+app_port: 3000
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Local Development
+
+1. Create a `.env.local` file in the root directory:
+```bash
+GEMINI_API_KEY=your_api_key_here
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Run the development server:
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Features
+
+- Transform natural language descriptions into visual code sketches
+- Download sketches as GIF animations
+- Real-time code generation and visualization
+- Modern, responsive UI
+
+## Technical Stack
+
+- Next.js 14
+- React 18
+- Tailwind CSS
+- P5.js for sketching
+- FFmpeg for GIF generation
+- Gemini 2.0 for code generation
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

app.yaml

@@ -0,0 +1,8 @@
+service: word-to-code
+env: standard
+runtime: nodejs18
+
+handlers:
+  - url: /.*
+    script: auto
+    secure: always

components/CodePanel.js

@@ -0,0 +1,32 @@
+import CopyCodeButton from './CopyCodeButton';
+
+export default function CodePanel({ modelResponse, generatedCode }) {
+  return (
+    <div 
+      className="w-full max-w-[500px] lg:max-w-none lg:w-[500px] bg-gray-100 p-4 rounded-[26px] overflow-auto opacity-0 animate-fadeIn relative" 
+      style={{ 
+        height: 'min(calc(782px), 90vh)',
+        animation: 'fadeIn 0.5s ease-in-out forwards'
+      }}
+    >
+      <pre 
+        className="text-sm whitespace-pre-wrap break-words font-mono h-full"
+        style={{ 
+          fontFamily: 'Menlo, Monaco, Consolas, monospace',
+          padding: '16px',
+          overflowY: 'auto'
+        }}
+      >
+        {modelResponse && (
+          <>
+            <span className="font-semibold">Model Reasoning:</span>
+            {'\n' + modelResponse + '\n\n\n'}
+          </>
+        )}
+        <span className="font-semibold">Code:</span>
+        {'\n' + generatedCode}
+      </pre>
+      <CopyCodeButton code={generatedCode} />
+    </div>
+  );
+} 

components/CopyCodeButton.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+
+export default function CopyCodeButton({ code }) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopyCode = async () => {
+    try {
+      // Replace local font with web-hosted OpenType font and adjust text positioning
+      const modifiedCode = code
+        .replace(
+          /loadFont\(['"](?:\/)?fonts\/GoogleSans-Bold\.ttf['"]\)/,
+          "loadFont('https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/files/roboto-latin-700-normal.woff')"
+        )
+        .replace(
+          /points = font\.textToPoints\(word, width\/2 - textW\/2, height\/2 \+ fontSize\/3, fontSize,/,
+          "points = font.textToPoints(word, (width + textW) / 3.5, (height - fontSize) / 1.75, fontSize,"
+        );
+      
+      await navigator.clipboard.writeText(modifiedCode);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy code:', err);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopyCode}
+      className="sticky bottom-4 flex items-center gap-2 px-3 py-2 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition-colors"
+      style={{
+        position: 'sticky',
+        bottom: '0rem',
+        float: 'right',
+        marginRight: '0rem',
+        zIndex: 10
+      }}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+      </svg>
+      <span className="text-sm">{isCopied ? 'Copied!' : 'Copy Code'}</span>
+    </button>
+  );
+} 

components/ExampleChip.js

@@ -0,0 +1,14 @@
+export default function ExampleChip({ label, onClick, active }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-4 py-1.5 rounded-full text-sm transition-colors ${
+        active
+          ? 'bg-black text-white'
+          : 'bg-transparent text-black border border-gray-200 hover:border-gray-400'
+      }`}
+    >
+      {label}
+    </button>
+  );
+} 

components/GenerationForm.js

@@ -0,0 +1,113 @@
+import Image from 'next/image';
+import ExampleChip from './ExampleChip';
+import SystemPrompt from './SystemPrompt';
+import { examples } from '../sketches';
+
+export default function GenerationForm({
+  word,
+  setWord,
+  instructions,
+  setInstructions,
+  isGenerating,
+  showSystemPrompt,
+  setShowSystemPrompt,
+  showExamples,
+  setShowExamples,
+  activeExample,
+  handleExampleClick,
+  onSubmit
+}) {
+  return (
+    <div className="w-full max-w-[500px]">
+      <button
+        onClick={() => setShowExamples(!showExamples)}
+        className="flex items-center mt-4 gap-2 text-sm text-black hover:text-black"
+      >
+        <svg
+          className={`w-4 h-4 transition-transform ${showExamples ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+        See examples we used to teach the model
+      </button>
+      
+      {showExamples && (
+        <div className="flex gap-2 flex-wrap mt-4">
+          {Object.keys(examples).map((example) => (
+            <ExampleChip
+              key={example}
+              label={example}
+              onClick={() => handleExampleClick(example)}
+              active={activeExample === example}
+            />
+          ))}
+        </div>
+      )}
+
+      {showSystemPrompt && (
+        <SystemPrompt onExampleClick={handleExampleClick} />
+      )}
+
+      <form onSubmit={onSubmit} className="w-full max-w-[500px] flex flex-col gap-4 items-center mt-4">
+        <div className="relative w-full">
+          <input
+            type="text"
+            value={word}
+            onChange={(e) => setWord(e.target.value)}
+            placeholder='Type a word like "float" ...'
+            className="w-full p-3 sm:p-4 bg-transparent border-[1.5px] border-gray-200 rounded-[26px] text-black placeholder-gray-400 focus:outline-none focus:border-black text-xs sm:text-base"
+          />
+          <button 
+            type="button"
+            className={`group absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black transition-colors p-1.5 rounded-full ${showSystemPrompt ? 'bg-gray-200' : 'hover:bg-gray-100'} active:bg-gray-200`}
+            onClick={() => setShowSystemPrompt(!showSystemPrompt)}
+          >
+            <Image
+              src="/info_spark.png"
+              alt="show system prompt"
+              width={20}
+              height={20}
+              className="opacity-100"
+              priority={false}
+            />
+            <div className="absolute bottom-full mb-1 right-0 scale-0 transition-all rounded bg-gray-100 p-2 text-xs text-black group-hover:scale-100 whitespace-nowrap">
+              {showSystemPrompt ? 'Hide' : 'Show'} system prompt
+            </div>
+          </button>
+        </div>
+        
+        <textarea
+          value={instructions}
+          onChange={(e) => setInstructions(e.target.value)}
+          placeholder="Optional: add additional instructions for your animation."
+          rows={1}
+          className="w-full p-3 sm:p-4 bg-transparent border-[1.5px] border-gray-200 resize-none rounded-[26px] text-black placeholder-gray-400 focus:outline-none focus:border-black text-xs sm:text-base"
+          style={{
+            height: 'auto',
+          }}
+          onInput={(e) => {
+            e.target.style.height = 'auto';
+            e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
+          }}
+        />
+        
+        <button
+          type="submit"
+          disabled={isGenerating || !word.trim()}
+          className={`w-44 py-3 rounded-[32px] font-medium transition-colors ${
+            isGenerating
+              ? 'bg-[#EEEEEE] text-black'
+              : !word.trim()
+                ? 'bg-gray-100 text-gray-400'
+                : 'bg-black text-white hover:bg-gray-900'
+          }`}
+        >
+          {isGenerating ? 'Generating...' : 'Generate'}
+        </button>
+      </form>
+    </div>
+  );
+} 

components/GifDownloadButton.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+export default function GifDownloadButton({ onClick, title, isCapturing }) {
+  return (
+    <button
+      onClick={onClick}
+      className="absolute bottom-4 right-14 p-2 bg-black hover:bg-white/20 rounded-full transition-colors group"
+      title={title}
+      disabled={isCapturing}
+    >
+      <div className="relative">
+        <svg
+          className={`w-5 h-5 text-white ${isCapturing ? 'opacity-50' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+        {isCapturing && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+          </div>
+        )}
+      </div>
+      <div className="absolute bottom-full mb-1 right-0 scale-0 transition-all rounded bg-white/20 p-2 text-xs text-white group-hover:scale-100 whitespace-nowrap pointer-events-none">
+        {isCapturing ? 'Capturing GIF...' : title}
+      </div>
+    </button>
+  );
+} 

components/Header.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Github } from 'lucide-react';
+
+const Header = () => {
+  return (
+    <div className="fixed top-0 left-0 right-0 w-full bg-white p-4 z-50">
+      <div className="w-full flex justify-between items-center text-base">
+        <div className="text-gray-500">
+          <span className="text-black font-bold text-lg mr-2">Word to Code</span>
+          Built with <a 
+            href="https://ai.google.dev" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="underline hover:text-gray-800 transition-colors"
+          >
+            Gemini 2.0
+          </a>
+        </div>
+        
+        <div className="flex items-center gap-3">
+          <a
+            href="https://github.com/googlecreativelab/gemini-demos/tree/main/word-to-code"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
+          >
+            <Github size={18} className="text-gray-600" />
+            <span>GitHub Repository</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header; 

components/ReplayButton.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const ReplayButton = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className="group absolute bottom-4 right-4 w-8 h-8 rounded-full flex items-center justify-center transition-all hover:bg-white/20"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M1 4v6h6" />
+        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+      </svg>
+      <div className="absolute bottom-10 right-0 scale-0 transition-all rounded bg-white/20 p-2 text-xs text-white group-hover:scale-100 whitespace-nowrap">
+        Replay animation
+      </div>
+    </button>
+  );
+};
+
+export default ReplayButton; 

components/SketchRenderer.js

@@ -0,0 +1,170 @@
+import { useEffect, useRef } from 'react';
+import ReplayButton from './ReplayButton';
+import GifDownloadButton from './GifDownloadButton';
+import { loadingSketch } from '../sketches';
+
+export default function SketchRenderer({ 
+  generatedCode, 
+  isGenerating, 
+  error, 
+  showCodePanel, 
+  onReplay, 
+  onGifCapture,
+  isCapturingGif,
+  isInitialSketch 
+}) {
+  const sketchContainer = useRef(null);
+  const currentSketch = useRef(null);
+
+  useEffect(() => {
+    // Add message listener for GIF capture completion
+    const handleGifComplete = (event) => {
+      if (event.data.type === 'gifCaptureComplete') {
+        onGifCapture(false); // Signal completion
+      }
+    };
+    window.addEventListener('message', handleGifComplete);
+
+    return () => {
+      window.removeEventListener('message', handleGifComplete);
+    };
+  }, [onGifCapture]);
+
+  useEffect(() => {
+    if (generatedCode && window.p5 && sketchContainer.current) {
+      // Cleanup previous sketch if it exists
+      const cleanup = () => {
+        if (currentSketch.current) {
+          currentSketch.current.remove();
+          currentSketch.current = null;
+        }
+      };
+
+      cleanup();
+
+      try {
+        const formattedCodeResponse = `
+          <!DOCTYPE html>
+          <html lang="en">
+          <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
+            <title>p5.js Sketch</title>
+            <style>
+              body {
+                padding: 0;
+                margin: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 100vh;
+                overflow: hidden;
+                background: black;
+              }
+              canvas {
+                max-width: 100% !important;
+                height: auto !important;
+              }
+            </style>
+          </head>
+          <body>
+            <script>
+              try {
+                ${isGenerating ? loadingSketch : generatedCode}
+
+                // Add setup wrapper
+                if (typeof window.setup === 'function') {
+                  const originalSetup = window.setup;
+                  window.setup = function() {
+                    originalSetup();
+                    frameRate(30); // Set consistent frame rate for GIF
+                  };
+                }
+
+                // Add draw wrapper
+                if (typeof window.draw === 'function') {
+                  const originalDraw = window.draw;
+                  window.draw = function() {
+                    originalDraw();
+                  };
+                }
+
+                // Handle GIF capture message
+                window.addEventListener('message', function(event) {
+                  if (event.data.type === 'startGifCapture') {
+                    saveGif('word-to-code-animation', 5, { silent: true })
+                      .then(() => {
+                        window.parent.postMessage({ type: 'gifCaptureComplete' }, '*');
+                      });
+                  }
+                });
+
+                new p5();
+              } catch (error) {
+                console.error('Sketch error:', error);
+                document.body.innerHTML = '<div style="color: red; padding: 20px;"><h3>🔴 Error:</h3><pre>' + error.message + '</pre></div>';
+              }
+            </script>
+          </body>
+          </html>
+        `;
+
+        const iframe = document.createElement('iframe');
+        iframe.srcdoc = formattedCodeResponse;
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.border = 'none';
+        iframe.id = 'sketch-iframe';
+        
+        iframe.onload = () => {
+          iframe.contentWindow.addEventListener('error', (e) => {
+            if (e.message.includes('Receiving end does not exist') || 
+                e.message.includes('p5.js seems to have been imported multiple times')) {
+              e.preventDefault();
+            }
+          });
+        };
+        
+        sketchContainer.current.innerHTML = '';
+        sketchContainer.current.appendChild(iframe);
+
+      } catch (error) {
+        console.error('Error running p5.js sketch:', error);
+        setError('Error running the animation: ' + error.message);
+      }
+    }
+
+    return () => {
+      if (sketchContainer.current) {
+        sketchContainer.current.innerHTML = '';
+      }
+    };
+  }, [generatedCode, isGenerating]);
+
+  return (
+    <div className="w-full aspect-square bg-black rounded-3xl flex items-center justify-center overflow-hidden relative">
+      <div ref={sketchContainer} className="w-full h-full" />
+      {isInitialSketch && !error && !isGenerating && (
+        <div className="absolute inset-0 flex items-end justify-center pb-5 text-gray-300 pointer-events-none z-10">
+          Type a word below to get started
+        </div>
+      )}
+      {error && (
+        <div className="w-full h-full flex items-center justify-center text-red-500 p-4 text-center">
+          {error}
+        </div>
+      )}
+      {showCodePanel && !error && (
+        <>
+          <ReplayButton onClick={onReplay} title="Replay animation" />
+          <GifDownloadButton 
+            onClick={() => onGifCapture(true)} 
+            title="Download as GIF"
+            isCapturing={isCapturingGif}
+          />
+        </>
+      )}
+    </div>
+  );
+} 

components/SystemPrompt.js

@@ -0,0 +1,45 @@
+export default function SystemPrompt({ onExampleClick }) {
+  return (
+    <div className="w-full max-w-[500px] bg-gray-100 rounded-[26px] p-6 my-6">
+      <div className="font-mono text-xs sm:text-sm">
+        <div className="mb-4">System Prompt:</div>
+        <div 
+          className="max-h-[60vh] sm:max-h-[200px] overflow-y-auto pr-4 space-y-4" 
+          style={{ fontFamily: 'Menlo, Monaco, Consolas, monospace' }}
+        >
+          <p>
+            You are a creative coding expert specializing in p5.js animations. Given a single word, you create expressive looping animations that bring that word to life using particle systems.
+          </p>
+
+          <p>
+            Here are five examples of animations:
+          </p>
+
+          <div className="flex flex-wrap gap-2 py-2">
+            <button onClick={() => onExampleClick('fluid')} className="text-blue-600 hover:text-blue-800">fluid, </button>
+            <button onClick={() => onExampleClick('rise')} className="text-blue-600 hover:text-blue-800">rise, </button>
+            <button onClick={() => onExampleClick('light')} className="text-blue-600 hover:text-blue-800">light, </button>
+            <button onClick={() => onExampleClick('travel')} className="text-blue-600 hover:text-blue-800">travel, </button>
+            <button onClick={() => onExampleClick('bounce')} className="text-blue-600 hover:text-blue-800">bounce</button>
+          </div>
+
+          <p>
+            Your task is to generate a p5.js sketch that creates an animation representing the given word. The animation should:
+          </p>
+
+          <div className="pl-6 space-y-2">
+            <p>1. Use particle systems for dynamic movement</p>
+            <p>2. Create a seamless loop</p>
+            <p>3. Be visually engaging and creative</p>
+            <p>4. Capture the essence or meaning of the word</p>
+            <p>5. Use colors and effects that enhance the visualization</p>
+          </div>
+
+          <p>
+            The sketch should be self-contained and include all necessary setup, draw, and helper functions.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+} 

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.mjs

@@ -0,0 +1,23 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['localhost'],
+  },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(woff|woff2|eot|ttf|otf)$/,
+      use: {
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          publicPath: '/_next/static/fonts/',
+          outputPath: 'static/fonts/',
+        },
+      },
+    });
+    return config;
+  },
+};
+
+export default nextConfig;

package-lock.json

@@ -0,0 +1,2405 @@
+{
+  "name": "word-to-code",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "word-to-code",
+      "version": "0.1.0",
+      "dependencies": {
+        "@ffmpeg/ffmpeg": "^0.12.15",
+        "@ffmpeg/util": "^0.12.2",
+        "@google/generative-ai": "^0.21.0",
+        "gif.js": "^0.2.0",
+        "lucide-react": "^0.330.0",
+        "next": "14.1.0",
+        "p5": "^1.9.0",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-hot-toast": "^2.5.2",
+        "react-syntax-highlighter": "^15.5.0"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.0.1",
+        "postcss": "^8",
+        "tailwindcss": "^3.3.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz",
+      "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@ffmpeg/ffmpeg": {
+      "version": "0.12.15",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz",
+      "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==",
+      "dependencies": {
+        "@ffmpeg/types": "^0.12.4"
+      },
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
+    "node_modules/@ffmpeg/types": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.4.tgz",
+      "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/util": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.2.tgz",
+      "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==",
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
+    "node_modules/@google/generative-ai": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.21.0.tgz",
+      "integrity": "sha512-7XhUbtnlkSEZK15kN3t+tzIMxsbKm/dSkKBFalj+20NvPKe1kBY7mR2P7vuijEn+f06z5+A8bVGKO0v39cr6Wg==",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
+      "integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
+      "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
+      "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
+      "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
+      "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
+      "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
+      "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
+      "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
+      "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
+      "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001699",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
+      "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.99",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.99.tgz",
+      "integrity": "sha512-77c/+fCyL2U+aOyqfIFi89wYLBeSTCs55xCZL0oFH0KjqsvSvyh6AdQ+UIl1vgpnQQE6g+/KK8hOIupH6VwPtg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
+      "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gif.js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/gif.js/-/gif.js-0.2.0.tgz",
+      "integrity": "sha512-bYxCoT8OZKmbxY8RN4qDiYuj4nrQDTzgLRcFVovyona1PTWNePzI4nzOmotnlOFIzTk/ZxAHtv+TfVLiBWj/hw==",
+      "license": "MIT"
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.330.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.330.0.tgz",
+      "integrity": "sha512-CQwY+Fpbt2kxCoVhuN0RCZDCYlbYnqB870Bl/vIQf3ER/cnDDQ6moLmEkguRyruAUGd4j3Lc4mtnJosXnqHheA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz",
+      "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.1.0",
+        "@swc/helpers": "0.5.2",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.1.0",
+        "@next/swc-darwin-x64": "14.1.0",
+        "@next/swc-linux-arm64-gnu": "14.1.0",
+        "@next/swc-linux-arm64-musl": "14.1.0",
+        "@next/swc-linux-x64-gnu": "14.1.0",
+        "@next/swc-linux-x64-musl": "14.1.0",
+        "@next/swc-win32-arm64-msvc": "14.1.0",
+        "@next/swc-win32-ia32-msvc": "14.1.0",
+        "@next/swc-win32-x64-msvc": "14.1.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/p5": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/p5/-/p5-1.11.3.tgz",
+      "integrity": "sha512-5eiyuZ3Pvo6ucr3nr8AzD+qwpoleiIEF2a2HmiO6PJM1tnbD0LmLlckZyYGJATs0tdmRjc37Muh6KPS4d1FHHg==",
+      "license": "LGPL-2.1"
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz",
+      "integrity": "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+      "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
+      "integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "license": "MIT",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
+      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "word-to-code",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
+    "@google/generative-ai": "^0.21.0",
+    "gif.js": "^0.2.0",
+    "lucide-react": "^0.330.0",
+    "next": "14.1.0",
+    "p5": "^1.9.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hot-toast": "^2.5.2",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
+  }
+}

pages/_app.js

@@ -0,0 +1,16 @@
+import '@/styles/globals.css';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+});
+
+export default function App({ Component, pageProps }) {
+  return (
+    <div className={`${inter.variable} font-sans`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

pages/_document.js

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

pages/api/generate.js

@@ -0,0 +1,792 @@
+const {
+  GoogleGenerativeAI,
+  HarmCategory,
+  HarmBlockThreshold,
+} = require("@google/generative-ai");
+
+const apiKey = process.env.GEMINI_API_KEY;
+const genAI = new GoogleGenerativeAI(apiKey);
+
+const model = genAI.getGenerativeModel({
+  model: "gemini-2.0-flash-thinking-exp-01-21",
+  safetySettings: [
+    {
+      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    },
+    {
+      category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
+      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    },
+    {
+      category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
+      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    },
+    {
+      category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
+      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    },
+  ],
+});
+
+const generationConfig = {
+  temperature: 0.7,
+  topP: 0.95,
+  topK: 64,
+  maxOutputTokens: 65536,
+};
+
+const systemPrompt = `You are a creative coding expert specializing in p5.js animations. Given a single word, you create expressive looping animations that bring that word to life using particle systems.
+
+Here are example animations that show different particle behaviors, along with the reasoning behind each approach:
+
+EXAMPLE 1 - "fluid":
+Reasoning: To capture the essence of "fluid", I'll use Perlin noise to create smooth, organic movement of particles. The particles will flow like water or liquid, with each particle following its own noise-based path while maintaining a cohesive, flowing appearance. The blue gradient colors reinforce the liquid feeling, and the screen blend mode creates a glowing effect that enhances the fluid motion.
+
+Code:
+let font;
+let fontSize = 200;
+let word = "fluid";
+let points;
+let particles = [];
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+// Fluid effect parameters
+let noiseScale = 0.015;    // Scale of the Perlin noise - adjust for wave size
+let noiseStrength = 20;    // Intensity of the noise displacement
+let noiseSpeed = 0.002;    // Speed of the noise evolution
+
+// Colors for gradient
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  for (let i = 0; i < points.length; i++) {
+    particles.push(new Particle(points[i].x, points[i].y, i, points.length));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);  // Reset to default blend mode first
+  background(0);     // Clear with black background
+  blendMode(SCREEN); // Then set screen blend mode for particles
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index, totalParticles) {
+    this.pos = createVector(x, y);
+    this.originalPos = createVector(x, y);
+    this.originalX = x;
+    this.originalY = y;
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.colorValue = this.getColor(index, totalParticles);
+  }
+
+  getColor(index, totalParticles) {
+    let normalizedIndex = index / (totalParticles - 1);
+    let particleColor;
+    if (normalizedIndex < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedIndex * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedIndex - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    let noiseValueX = noise((this.originalX + frameCount) * noiseScale, 
+                           this.originalY * noiseScale, 
+                           frameCount * noiseSpeed);
+    let noiseValueY = noise(this.originalX * noiseScale, 
+                           this.originalY * noiseScale, 
+                           frameCount * noiseSpeed + 1000);
+
+    let offsetX = map(noiseValueX, 0, 1, -noiseStrength, noiseStrength);
+    let offsetY = map(noiseValueY, 0, 1, -noiseStrength, noiseStrength);
+
+    this.pos.x = this.originalPos.x + offsetX;
+    this.pos.y = this.originalPos.y + offsetY;
+  }
+
+  display() {
+    noStroke();
+    fill(this.colorValue);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}
+
+EXAMPLE 2 - "rise":
+Reasoning: For "rise", I'll create a staged animation where particles gradually appear, pause briefly, then float upward. This creates a sense of emergence and ascension. Each particle follows this sequence independently with slight timing variations, creating a continuous cycle of rising elements. The fade-in adds a gentle, ethereal quality that matches the upward motion.
+
+Code:
+let font;
+let fontSize = 200;
+let word = "rise";
+let points;
+let particles = [];
+let floatSpeed = 4;
+let fadeInSpeed = 10;
+let minWaitTime = 50;
+let maxWaitTime = 200;
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  // Find min and max x positions for color gradient
+  let minX = points[0].x;
+  let maxX = points[0].x;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+  let xRange = maxX - minX;
+
+  for (let pt of points) {
+    particles.push(new Particle(pt.x, pt.y, pt.x, minX, xRange));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);
+  background(0);
+  blendMode(SCREEN);
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, particleX, minX, xRange) {
+    this.pos = createVector(x, y);
+    this.originalPos = createVector(x, y);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.floatSpeedVariation = random(0.5, 2.0);
+    this.isFadingIn = true;
+    this.isWaiting = false;
+    this.waitTime = 0;
+    this.particleX = particleX;
+    this.minX = minX;
+    this.xRange = xRange;
+    this.color = this.getColorForPosition();
+  }
+
+  getColorForPosition() {
+    let normalizedX = 0;
+    if (this.xRange > 0) {
+      normalizedX = constrain((this.particleX - this.minX) / this.xRange, 0, 1);
+    }
+
+    let particleColor;
+    if (normalizedX < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    if (this.isFadingIn) {
+      this.alpha += fadeInSpeed;
+      if (this.alpha >= 255) {
+        this.alpha = 255;
+        this.isFadingIn = false;
+        this.isWaiting = true;
+        this.waitTime = floor(random(minWaitTime, maxWaitTime));
+      }
+    } else if (this.isWaiting) {
+      this.waitTime--;
+      if (this.waitTime <= 0) {
+        this.isWaiting = false;
+      }
+    } else {
+      this.pos.y -= floatSpeed * this.floatSpeedVariation;
+      if (this.pos.y < -this.size) {
+        this.respawn();
+      }
+    }
+  }
+
+  respawn() {
+    this.pos.y = this.originalPos.y;
+    this.pos.x = this.originalPos.x;
+    this.alpha = 0;
+    this.isFadingIn = true;
+    this.isWaiting = false;
+    this.waitTime = 0;
+    this.size = random(particleMinSize, particleMaxSize);
+    this.floatSpeedVariation = random(0.5, 2.0);
+    this.color = this.getColorForPosition();
+  }
+
+  display() {
+    noStroke();
+    fill(red(this.color), green(this.color), blue(this.color), this.alpha);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}
+
+EXAMPLE 3 - "light":
+Reasoning: To visualize "light", I'll make particles that pulse and glow like twinkling lights. Each particle will cycle through brightness levels independently, creating a sparkling effect. Adding blur and glow effects when particles are at peak brightness enhances the illuminated feeling. The gradient colors blend into white at maximum brightness for a true lighting effect.
+
+Code:
+let font;
+let fontSize = 200;
+let word = "light";
+let points;
+let particles = [];
+let lightCycleSpeed = 0.02;
+let particleMinSize = 5;
+let particleMaxSize = 5;
+let shadowBlurAmount = 30;
+let minX, maxX;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+let lightColor;
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+
+  lightColor = color(255, 255, 255);
+
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  minX = width;
+  maxX = 0;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+
+  for (let i = 0; i < points.length; i++) {
+    let pt = points[i];
+    particles.push(new Particle(pt.x, pt.y, i));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);  // Reset to default blend mode first
+  background(0);     // Clear with black background
+  blendMode(SCREEN); // Then set screen blend mode for particles
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index) {
+    this.pos = createVector(x, y);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.lightOffset = index * 0.1;
+  }
+
+  update() {
+    // No position update needed for light animation
+  }
+
+  getBaseColor() {
+    let normalizedX = map(this.pos.x, minX, maxX, 0, 1);
+    let baseParticleColor;
+
+    if (normalizedX < 0.5) {
+      baseParticleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      baseParticleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+    return baseParticleColor;
+  }
+
+  display() {
+    let brightness = sin(frameCount * lightCycleSpeed + this.lightOffset);
+    brightness = map(brightness, -1, 1, 0, 1);
+    brightness = constrain(brightness, 0, 1);
+
+    let baseParticleColor = this.getBaseColor();
+    let particleColor = lerpColor(baseParticleColor, lightColor, brightness);
+
+    noStroke();
+
+    if (brightness > 0.8) {
+      drawingContext.shadowBlur = shadowBlurAmount;
+      drawingContext.shadowColor = color(255);
+      fill(particleColor);
+      ellipse(this.pos.x, this.pos.y, this.size * 1.5, this.size * 1.5);
+      drawingContext.shadowBlur = 0;
+    } else {
+      drawingContext.shadowBlur = 0;
+      fill(particleColor);
+      ellipse(this.pos.x, this.pos.y, this.size, this.size);
+    }
+  }
+}
+
+EXAMPLE 4 - "travel":
+Reasoning: For "travel", particles will journey along the letter contours, creating a sense of continuous movement and exploration. Each particle follows the path of letter points, creating flowing trails that highlight the shape of the text. The movement speed and particle size are tuned to maintain legibility while conveying constant motion.
+
+Code:
+let font;
+let fontSize = 200;
+let word = "travel";
+let points;
+let particles = [];
+let travelSpeed = 0.8;
+let particleMinSize = 4;
+let particleMaxSize = 4;
+let minX, maxX;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  minX = width;
+  maxX = 0;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+
+  for (let i = 0; i < points.length; i++) {
+    let pt = points[i];
+    particles.push(new Particle(pt.x, pt.y, i, points));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);  // Reset to default blend mode first
+  background(0);     // Clear with black background
+  blendMode(SCREEN); // Then set screen blend mode for particles
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index, allPoints) {
+    this.pos = createVector(x, y);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.pointIndex = index;
+    this.points = allPoints;
+    this.targetPoint = this.getNextTargetPoint();
+  }
+
+  getNextTargetPoint() {
+    if (this.points.length === 0) return this.pos;
+
+    this.pointIndex++;
+    if (this.pointIndex >= this.points.length) {
+      this.pointIndex = 0;
+    }
+    return createVector(this.points[this.pointIndex].x, this.points[this.pointIndex].y);
+  }
+
+  update() {
+    if (!this.targetPoint) return;
+
+    let direction = p5.Vector.sub(this.targetPoint, this.pos);
+    let distance = direction.mag();
+
+    if (distance < 1) {
+      this.targetPoint = this.getNextTargetPoint();
+      if (!this.targetPoint) return;
+      direction = p5.Vector.sub(this.targetPoint, this.pos);
+    }
+
+    direction.normalize();
+    direction.mult(travelSpeed);
+    this.pos.add(direction);
+  }
+
+  display() {
+    noStroke();
+    let normalizedX = map(this.pos.x, minX, maxX, 0, 1, true);
+    let particleColor = this.getColorBlend(normalizedX);
+    fill(particleColor);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+
+  getColorBlend(normalizedX) {
+    if (normalizedX < 0.5) {
+      return lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      return lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+  }
+}
+
+EXAMPLE 5 - "bounce":
+Reasoning: To represent "bounce", I'll implement simple physics with gravity and elastic collision. Particles fall and bounce off surfaces with dampening, creating a playful and dynamic animation. The varying particle sizes and bounce heights add visual interest while maintaining the word's readability.
+
+Code:
+let font;
+let fontSize = 200;
+let word = "bounce";
+let points;
+let particles = [];
+let gravity = 0.5;
+let bounce = -0.7;
+let friction = 0.99;
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  // Find min and max x positions for color gradient
+  let minX = points[0].x;
+  let maxX = points[0].x;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+
+  for (let pt of points) {
+    let normalizedX = map(pt.x, minX, maxX, 0, 1);
+    particles.push(new Particle(pt.x, pt.y, normalizedX));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);
+  background(0);
+  blendMode(SCREEN);
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, normalizedX) {
+    this.pos = createVector(x, y);
+    this.vel = createVector(random(-2, 2), random(-10, -5));
+    this.acc = createVector(0, gravity);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.originalY = y;
+    this.colorValue = this.getColor(normalizedX);
+  }
+
+  getColor(normalizedX) {
+    let particleColor;
+    if (normalizedX < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    this.vel.add(this.acc);
+    this.pos.add(this.vel);
+    this.vel.x *= friction;
+
+    if (this.pos.y > height - this.size/2) {
+      this.pos.y = height - this.size/2;
+      this.vel.y *= bounce;
+    }
+
+    if (this.pos.x < this.size/2) {
+      this.pos.x = this.size/2;
+      this.vel.x *= bounce;
+    } else if (this.pos.x > width - this.size/2) {
+      this.pos.x = width - this.size/2;
+      this.vel.x *= bounce;
+    }
+
+    // Reset particle if it goes too far down
+    if (this.pos.y > height + 100) {
+      this.pos.y = this.originalY;
+      this.vel.y = random(-10, -5);
+    }
+  }
+
+  display() {
+    noStroke();
+    fill(this.colorValue);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}
+
+Your task is to create a similar p5.js sketch for the given word. Follow these rules:
+Keep all the consistent elements:
+   - Looping
+   - Canvas size: 500x500
+   - Font: GoogleSans-Bold.ttf
+   - Initial fontSize: 200 (will adjust automatically)
+   - ALWAYS Colors: #217BFE, #078BFE, #AC87EB gradient
+   - Text alignment: CENTER, CENTER
+   - Proper text centering using textWidth()
+   - IMPORTANT: Always position text vertically using: height/2 + fontSize/3
+
+Return ONLY the complete p5.js code in global mode format, with all necessary functions (preload, setup, draw) and variables defined globally.`;
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ message: 'Method not allowed' });
+  }
+
+  try {
+    const { word, instructions } = req.body;
+
+    if (!word) {
+      return res.status(400).json({ message: 'Word is required' });
+    }
+
+    const prompt = `Create a p5.js animation for the word "${word}"${instructions ? ` with these additional requirements: ${instructions}` : ''}.
+
+First, explain your creative approach:
+- How will you animate this word to reflect its meaning?
+- What particle behaviors and effects will you use?
+- How will these choices enhance the viewer's understanding of the word?
+
+Then provide the complete p5.js sketch code using these requirements:
+- Canvas size of 500x500
+- Black background
+- Font loading from '/fonts/GoogleSans-Bold.ttf'
+- Gradient colors using #217BFE, #078BFE, and #AC87EB
+- Screen blend mode for particles
+- Responsive text sizing
+- Global mode format (no instance mode wrapper)
+
+Animation timing requirements:
+- Start with particles clearly forming the word on the screen
+- If particles move away from the word, they should do so gradually
+- For any cycling animations, ensure each cycle is slow enough to read the word
+
+Your response MUST follow this exact format:
+
+Reasoning:
+[Your explanation here]
+
+Code:
+[Your code here in global mode format]
+
+Make sure your code is complete and properly closed with all necessary brackets.`;
+
+    const result = await model.generateContent([systemPrompt, prompt], generationConfig);
+    const response = await result.response;
+    const text = response.text();
+
+    console.log('Raw model response:', text);  // Debug log
+
+    // Extract reasoning and code using multiple fallback approaches
+    let reasoning = '';
+    let code = '';
+
+    // Helper function to clean code
+    const cleanCode = (str) => {
+      return str
+        .replace(/```javascript\s*/g, '')
+        .replace(/```js\s*/g, '')
+        .replace(/```\s*/g, '')
+        .replace(/^Code:\s*/g, '')
+        .trim();
+    };
+
+    // Helper function to validate global mode code
+    const isValidCode = (str) => {
+      return str.includes('function setup()') && 
+             str.includes('function draw()') &&
+             str.includes('function preload()') &&
+             (str.match(/{/g) || []).length === (str.match(/}/g) || []).length; // Check balanced braces
+    };
+
+    // Approach 1: Try to extract from markdown code blocks
+    const codeBlockMatch = text.match(/```(?:javascript|js)?\s*(let\s+font[\s\S]*?class\s+Particle[\s\S]*?})\s*```/);
+    if (codeBlockMatch) {
+      code = cleanCode(codeBlockMatch[1]);
+      reasoning = text.split('```')[0].replace(/^Reasoning:\s*/i, '').trim();
+    }
+
+    // Approach 2: Try to split by explicit "Reasoning:" and "Code:" markers
+    if (!code && text.includes('Reasoning:') && text.includes('Code:')) {
+      const [reasoningPart, codePart] = text.split(/Code:\s*/i);
+      reasoning = reasoningPart.replace(/^Reasoning:\s*/i, '').trim();
+      code = cleanCode(codePart);
+    }
+
+    // Approach 3: Look for global mode function declarations
+    if (!code) {
+      const functionMatch = text.match(/(let\s+font[\s\S]*function\s+setup\(\)[\s\S]*function\s+draw\(\)[\s\S]*class\s+Particle[\s\S]*$)/);
+      if (functionMatch) {
+        code = cleanCode(functionMatch[1]);
+        reasoning = text.split(functionMatch[1])[0].replace(/^Reasoning:\s*/i, '').trim();
+      }
+    }
+
+    // Approach 4: Most aggressive - find anything that looks like the global mode structure
+    if (!code) {
+      const lastResortMatch = text.match(/let\s+font[\s\S]*?class\s+Particle[\s\S]*?}/);
+      if (lastResortMatch) {
+        code = cleanCode(lastResortMatch[0]);
+        reasoning = text.replace(lastResortMatch[0], '').replace(/^Reasoning:\s*/i, '').trim();
+      }
+    }
+
+    // Final validation
+    if (!code || !isValidCode(code)) {
+      console.error('Invalid code structure:', { code: code?.substring(0, 100) });
+      throw new Error('Could not extract valid p5.js sketch code from the response');
+    }
+
+    console.log('Successfully parsed response:', {
+      reasoningPreview: reasoning?.substring(0, 100) + '...',
+      codePreview: code?.substring(0, 100) + '...',
+    });
+
+    return res.status(200).json({
+      code,
+      fullResponse: reasoning || 'No explanation provided'
+    });
+  } catch (error) {
+    console.error('Error generating animation:', error);
+    return res.status(500).json({ 
+      message: 'Error generating animation', 
+      error: error.message 
+    });
+  }
+} 

pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: "John Doe" });
+}

pages/index.js

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import Script from 'next/script';
+import { Inter } from 'next/font/google';
+import SketchRenderer from '../components/SketchRenderer';
+import GenerationForm from '../components/GenerationForm';
+import CodePanel from '../components/CodePanel';
+import { initialSketch, examples, exampleReasonings } from '../sketches';
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+});
+
+export default function Home() {
+  const [word, setWord] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generatedCode, setGeneratedCode] = useState(initialSketch);
+  const [showCodePanel, setShowCodePanel] = useState(false);
+  const [error, setError] = useState(null);
+  const [activeExample, setActiveExample] = useState(null);
+  const [showExamples, setShowExamples] = useState(false);
+  const [modelResponse, setModelResponse] = useState('');
+  const [showSystemPrompt, setShowSystemPrompt] = useState(false);
+  const [isCapturingGif, setIsCapturingGif] = useState(false);
+
+  const handleExampleClick = (example) => {
+    setActiveExample(example);
+    setGeneratedCode(examples[example]);
+    setShowCodePanel(true);
+    setModelResponse(exampleReasonings[example]);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsGenerating(true);
+    setError(null);
+    setActiveExample(null);
+
+    try {
+      const response = await fetch('/api/generate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ word, instructions }),
+      });
+
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(data.message || `API error: ${response.status}`);
+      }
+
+      if (!data || data.error) {
+        throw new Error(data.error || 'No data received from API');
+      }
+
+      if (!data.code || !data.code.includes('function setup()')) {
+        throw new Error('Generated code is not in the correct format');
+      }
+
+      setGeneratedCode(data.code);
+      setModelResponse(data.fullResponse || '');
+      setShowCodePanel(true);
+    } catch (error) {
+      console.error('Generation error:', error);
+      setError(error.message);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleReplay = () => {
+    setGeneratedCode(prevCode => prevCode + ' ');
+    requestAnimationFrame(() => {
+      setGeneratedCode(prevCode => prevCode.slice(0, -1));
+    });
+  };
+
+  const handleGifCapture = async (startCapture) => {
+    if (startCapture) {
+      setIsCapturingGif(true);
+      try {
+        const iframe = document.getElementById('sketch-iframe');
+        if (iframe) {
+          iframe.contentWindow.postMessage({ type: 'startGifCapture' }, '*');
+        }
+      } catch (error) {
+        console.error('GIF capture error:', error);
+        setIsCapturingGif(false);
+      }
+    } else {
+      setIsCapturingGif(false);
+    }
+  };
+
+  return (
+    <div className={`min-h-screen bg-white text-black flex flex-col items-center p-4 sm:p-8 ${inter.variable}`}>
+      <Script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js" strategy="beforeInteractive" />
+      
+      <header className="w-full flex items-center mb-8 pl-4 sm:pl-8">
+        <div className="flex items-center gap-2">
+          <h1 
+            className="text-xl font-medium cursor-pointer hover:opacity-80 transition-opacity"
+            onClick={() => window.location.reload()}
+          >
+            Word to Code
+          </h1>
+          <div className="text-sm text-gray-500">
+            Built with <a href="https://ai.google.dev/docs" target="_blank" rel="noopener noreferrer" className="underline hover:text-black">Gemini 2.0</a>
+          </div>
+        </div>
+      </header>
+
+      <main className={`w-full max-w-[1200px] flex flex-col gap-6 mx-auto transition-all duration-500 ease-in-out ${showCodePanel ? '' : 'items-center'}`}>
+        <div className={`flex flex-col lg:flex-row gap-8 items-start w-full transition-all duration-500 ease-in-out ${
+          showCodePanel ? 'justify-center translate-x-0' : 'justify-center'
+        }`}>
+          <div className={`flex flex-col gap-6 w-full max-w-[500px] transition-all duration-500 ease-in-out ${showCodePanel ? '' : 'items-center'}`}>
+            <SketchRenderer
+              generatedCode={generatedCode}
+              isGenerating={isGenerating}
+              error={error}
+              showCodePanel={showCodePanel}
+              onReplay={handleReplay}
+              onGifCapture={handleGifCapture}
+              isCapturingGif={isCapturingGif}
+              isInitialSketch={generatedCode === initialSketch}
+            />
+
+            <GenerationForm
+              word={word}
+              setWord={setWord}
+              instructions={instructions}
+              setInstructions={setInstructions}
+              isGenerating={isGenerating}
+              showSystemPrompt={showSystemPrompt}
+              setShowSystemPrompt={setShowSystemPrompt}
+              showExamples={showExamples}
+              setShowExamples={setShowExamples}
+              activeExample={activeExample}
+              handleExampleClick={handleExampleClick}
+              onSubmit={handleSubmit}
+            />
+          </div>
+
+          {showCodePanel && (
+            <CodePanel
+              modelResponse={modelResponse}
+              generatedCode={generatedCode}
+            />
+          )}
+        </div>
+      </main>
+
+      <style jsx global>{`
+        ::-webkit-scrollbar {
+          display: none;
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @media (min-width: 1024px) {
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+              transform: translateX(10px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

postcss.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    'tailwindcss': {},
+    'autoprefixer': {},
+  },
+};

public/fonts/GoogleSans-Bold.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c43148fe7f70f806c23335672fc1590896f08aebc765f35a3702c83e7956f23
+size 177184

public/js/CCapture.all.min.js

@@ -0,0 +1,2 @@
+"use strict";function download(t,e,i){function n(t){var e=t.split(/[:;,]/),i=e[1],n="base64"==e[2]?atob:decodeURIComponent,r=n(e.pop()),o=r.length,a=0,s=new Uint8Array(o);for(a;a<o;++a)s[a]=r.charCodeAt(a);return new m([s],{type:i})}function r(t,e){if("download"in c)return c.href=t,c.setAttribute("download",g),c.innerHTML="downloading...",c.style.display="none",l.body.appendChild(c),setTimeout(function(){c.click(),l.body.removeChild(c),e===!0&&setTimeout(function(){h.URL.revokeObjectURL(c.href)},250)},66),!0;var i=l.createElement("iframe");l.body.appendChild(i),e||(t="data:"+t.replace(/^data:([\w\/\-\+]+)/,f)),i.src=t,setTimeout(function(){l.body.removeChild(i)},333)}var o,a,s,h=window,f="application/octet-stream",u=i||f,d=t,l=document,c=l.createElement("a"),p=function(t){return String(t)},m=h.Blob||h.MozBlob||h.WebKitBlob||p,w=h.MSBlobBuilder||h.WebKitBlobBuilder||h.BlobBuilder,g=e||"download";if("true"===String(this)&&(d=[d,u],u=d[0],d=d[1]),String(d).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/))return navigator.msSaveBlob?navigator.msSaveBlob(n(d),g):r(d);try{o=d instanceof m?d:new m([d],{type:u})}catch(t){w&&(a=new w,a.append([d]),o=a.getBlob(u))}if(navigator.msSaveBlob)return navigator.msSaveBlob(o,g);if(h.URL)r(h.URL.createObjectURL(o),!0);else{if("string"==typeof o||o.constructor===p)try{return r("data:"+u+";base64,"+h.btoa(o))}catch(t){return r("data:"+u+","+encodeURIComponent(o))}s=new FileReader,s.onload=function(t){r(this.result)},s.readAsDataURL(o)}return!0}!function(){var t=function(t){this.data=new Uint8Array(t),this.pos=0};t.prototype.seek=function(t){this.pos=t},t.prototype.writeBytes=function(t){for(var e=0;e<t.length;e++)this.data[this.pos++]=t[e]},t.prototype.writeByte=function(t){this.data[this.pos++]=t},t.prototype.writeU8=t.prototype.writeByte,t.prototype.writeU16BE=function(t){this.data[this.pos++]=t>>8,this.data[this.pos++]=t},t.prototype.writeDoubleBE=function(t){for(var e=new Uint8Array(new Float64Array([t]).buffer),i=e.length-1;i>=0;i--)this.writeByte(e[i])},t.prototype.writeFloatBE=function(t){for(var e=new Uint8Array(new Float32Array([t]).buffer),i=e.length-1;i>=0;i--)this.writeByte(e[i])},t.prototype.writeString=function(t){for(var e=0;e<t.length;e++)this.data[this.pos++]=t.charCodeAt(e)},t.prototype.writeEBMLVarIntWidth=function(t,e){switch(e){case 1:this.writeU8(128|t);break;case 2:this.writeU8(64|t>>8),this.writeU8(t);break;case 3:this.writeU8(32|t>>16),this.writeU8(t>>8),this.writeU8(t);break;case 4:this.writeU8(16|t>>24),this.writeU8(t>>16),this.writeU8(t>>8),this.writeU8(t);break;case 5:this.writeU8(8|t/4294967296&7),this.writeU8(t>>24),this.writeU8(t>>16),this.writeU8(t>>8),this.writeU8(t);break;default:throw new RuntimeException("Bad EBML VINT size "+e)}},t.prototype.measureEBMLVarInt=function(t){if(t<127)return 1;if(t<16383)return 2;if(t<2097151)return 3;if(t<268435455)return 4;if(t<34359738367)return 5;throw new RuntimeException("EBML VINT size not supported "+t)},t.prototype.writeEBMLVarInt=function(t){this.writeEBMLVarIntWidth(t,this.measureEBMLVarInt(t))},t.prototype.writeUnsignedIntBE=function(t,e){switch(void 0===e&&(e=this.measureUnsignedInt(t)),e){case 5:this.writeU8(Math.floor(t/4294967296));case 4:this.writeU8(t>>24);case 3:this.writeU8(t>>16);case 2:this.writeU8(t>>8);case 1:this.writeU8(t);break;default:throw new RuntimeException("Bad UINT size "+e)}},t.prototype.measureUnsignedInt=function(t){return t<256?1:t<65536?2:t<1<<24?3:t<4294967296?4:5},t.prototype.getAsDataArray=function(){if(this.pos<this.data.byteLength)return this.data.subarray(0,this.pos);if(this.pos==this.data.byteLength)return this.data;throw"ArrayBufferDataStream's pos lies beyond end of buffer"},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=t:window.ArrayBufferDataStream=t}(),function(){var t=function(t){return function(e){function i(t){return new Promise(function(e,i){var n=new FileReader;n.addEventListener("loadend",function(){e(n.result)}),n.readAsArrayBuffer(t)})}function n(t){return new Promise(function(e,n){e(t instanceof Uint8Array?t:t instanceof ArrayBuffer||ArrayBuffer.isView(t)?new Uint8Array(t):t instanceof Blob?i(t).then(function(t){return new Uint8Array(t)}):i(new Blob([t])).then(function(t){return new Uint8Array(t)}))})}function r(t){var e=t.byteLength||t.length||t.size;if(!Number.isInteger(e))throw"Failed to determine size of element";return e}var o=[],a=Promise.resolve(),s=null,h=null;"undefined"!=typeof FileWriter&&e instanceof FileWriter?s=e:t&&e&&(h=e),this.pos=0,this.length=0,this.seek=function(t){if(t<0)throw"Offset may not be negative";if(isNaN(t))throw"Offset may not be NaN";if(t>this.length)throw"Seeking beyond the end of file is not allowed";this.pos=t},this.write=function(e){var i={offset:this.pos,data:e,length:r(e)},f=i.offset>=this.length;this.pos+=i.length,this.length=Math.max(this.length,this.pos),a=a.then(function(){if(h)return new Promise(function(e,r){n(i.data).then(function(n){var r=0,o=Buffer.from(n.buffer),a=function(n,o,s){r+=o,r>=s.length?e():t.write(h,s,r,s.length-r,i.offset+r,a)};t.write(h,o,0,o.length,i.offset,a)})});if(s)return new Promise(function(t,e){s.onwriteend=t,s.seek(i.offset),s.write(new Blob([i.data]))});if(!f)for(var e=0;e<o.length;e++){var r=o[e];if(!(i.offset+i.length<=r.offset||i.offset>=r.offset+r.length)){if(i.offset<r.offset||i.offset+i.length>r.offset+r.length)throw new Error("Overwrite crosses blob boundaries");return i.offset==r.offset&&i.length==r.length?void(r.data=i.data):n(r.data).then(function(t){return r.data=t,n(i.data)}).then(function(t){i.data=t,r.data.set(i.data,i.offset-r.offset)})}}o.push(i)})},this.complete=function(t){return a=h||s?a.then(function(){return null}):a.then(function(){for(var e=[],i=0;i<o.length;i++)e.push(o[i].data);return new Blob(e,{mimeType:t})})}}};"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=t(require("fs")):window.BlobBuffer=t(null)}(),function(){var t=function(t,e){function i(t,e){var i={};return[t,e].forEach(function(t){for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(i[e]=t[e])}),i}function n(t){return!("string"!=typeof t||!t.match(/^data:image\/webp;base64,/i))&&window.atob(t.substring("data:image/webp;base64,".length))}function r(t,e){var i=t.toDataURL("image/webp",{quality:e});return n(i)}function o(t){var e=t.indexOf("VP8 ");if(e==-1)throw"Failed to identify beginning of keyframe in WebP image";return e+="VP8 ".length+4,t.substring(e)}function a(t){this.value=t}function s(t){this.value=t}function h(t,e,i){if(Array.isArray(i))for(var n=0;n<i.length;n++)h(t,e,i[n]);else if("string"==typeof i)t.writeString(i);else if(i instanceof Uint8Array)t.writeBytes(i);else{if(!i.id)throw"Bad EBML datatype "+typeof i.data;if(i.offset=t.pos+e,t.writeUnsignedIntBE(i.id),Array.isArray(i.data)){var r,o,f;i.size===-1?t.writeByte(255):(r=t.pos,t.writeBytes([0,0,0,0])),o=t.pos,i.dataOffset=o+e,h(t,e,i.data),i.size!==-1&&(f=t.pos,i.size=f-o,t.seek(r),t.writeEBMLVarIntWidth(i.size,4),t.seek(f))}else if("string"==typeof i.data)t.writeEBMLVarInt(i.data.length),i.dataOffset=t.pos+e,t.writeString(i.data);else if("number"==typeof i.data)i.size||(i.size=t.measureUnsignedInt(i.data)),t.writeEBMLVarInt(i.size),i.dataOffset=t.pos+e,t.writeUnsignedIntBE(i.data,i.size);else if(i.data instanceof s)t.writeEBMLVarInt(8),i.dataOffset=t.pos+e,t.writeDoubleBE(i.data.value);else if(i.data instanceof a)t.writeEBMLVarInt(4),i.dataOffset=t.pos+e,t.writeFloatBE(i.data.value);else{if(!(i.data instanceof Uint8Array))throw"Bad EBML datatype "+typeof i.data;t.writeEBMLVarInt(i.data.byteLength),i.dataOffset=t.pos+e,t.writeBytes(i.data)}}}return function(n){function a(t){return t-B.dataOffset}function f(){var t={id:21420,size:5,data:0},e={id:290298740,data:[]};for(var i in D){var n=D[i];n.positionEBML=Object.create(t),e.data.push({id:19899,data:[{id:21419,data:n.id},n.positionEBML]})}return e}function u(){x=f();var e={id:440786851,data:[{id:17030,data:1},{id:17143,data:1},{id:17138,data:4},{id:17139,data:8},{id:17026,data:"webm"},{id:17031,data:2},{id:17029,data:2}]},i={id:357149030,data:[{id:2807729,data:1e6},{id:19840,data:"webm-writer-js"},{id:22337,data:"webm-writer-js"},M]},n={id:374648427,data:[{id:174,data:[{id:215,data:A},{id:29637,data:A},{id:156,data:0},{id:2274716,data:"und"},{id:134,data:"V_VP8"},{id:2459272,data:"VP8"},{id:131,data:1},{id:224,data:[{id:176,data:b},{id:186,data:k}]}]}]};B={id:408125543,size:-1,data:[x,i,n]};var r=new t(256);h(r,S.pos,[e,B]),S.write(r.getAsDataArray()),D.SegmentInfo.positionEBML.data=a(i.offset),D.Tracks.positionEBML.data=a(n.offset)}function d(e){var i=new t(4);if(!(e.trackNumber>0&&e.trackNumber<127))throw"TrackNumber must be > 0 and < 127";return i.writeEBMLVarInt(e.trackNumber),i.writeU16BE(e.timecode),i.writeByte(128),{id:163,data:[i.getAsDataArray(),e.frame]}}function l(t){return{id:524531317,data:[{id:231,data:Math.round(t.timecode)}]}}function c(t,e,i){_.push({id:187,data:[{id:179,data:e},{id:183,data:[{id:247,data:t},{id:241,data:a(i)}]}]})}function p(){var e={id:475249515,data:_},i=new t(16+32*_.length);h(i,S.pos,e),S.write(i.getAsDataArray()),D.Cues.positionEBML.data=a(e.offset)}function m(){if(0!=T.length){for(var e=0,i=0;i<T.length;i++)e+=T[i].frame.length;for(var n=new t(e+32*T.length),r=l({timecode:Math.round(U)}),i=0;i<T.length;i++)r.data.push(d(T[i]));h(n,S.pos,r),S.write(n.getAsDataArray()),c(A,Math.round(U),r.offset),T=[],U+=F,F=0}}function w(){if(!n.frameDuration){if(!n.frameRate)throw"Missing required frameDuration or frameRate setting";n.frameDuration=1e3/n.frameRate}}function g(t){t.trackNumber=A,t.timecode=Math.round(F),T.push(t),F+=t.duration,F>=E&&m()}function y(){var e=new t(x.size),i=S.pos;h(e,x.dataOffset,x.data),S.seek(x.dataOffset),S.write(e.getAsDataArray()),S.seek(i)}function v(){var e=new t(8),i=S.pos;e.writeDoubleBE(U),S.seek(M.dataOffset),S.write(e.getAsDataArray()),S.seek(i)}var b,k,B,x,E=5e3,A=1,L=!1,T=[],U=0,F=0,I={quality:.95,fileWriter:null,fd:null,frameDuration:null,frameRate:null},D={Cues:{id:new Uint8Array([28,83,187,107]),positionEBML:null},SegmentInfo:{id:new Uint8Array([21,73,169,102]),positionEBML:null},Tracks:{id:new Uint8Array([22,84,174,107]),positionEBML:null}},M={id:17545,data:new s(0)},_=[],S=new e(n.fileWriter||n.fd);this.addFrame=function(t){if(L){if(t.width!=b||t.height!=k)throw"Frame size differs from previous frames"}else b=t.width,k=t.height,u(),L=!0;var e=r(t,{quality:n.quality});if(!e)throw"Couldn't decode WebP frame, does the browser support WebP?";g({frame:o(e),duration:n.frameDuration})},this.complete=function(){return m(),p(),y(),v(),S.complete("video/webm")},this.getWrittenSize=function(){return S.length},n=i(I,n||{}),w()}};"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=t(require("./ArrayBufferDataStream"),require("./BlobBuffer")):window.WebMWriter=t(ArrayBufferDataStream,BlobBuffer)}(),function(){function t(t){var e,i=new Uint8Array(t);for(e=0;e<t;e+=1)i[e]=0;return i}function e(e,i,n,r){var o=i+n,a=t((parseInt(o/r)+1)*r);return a.set(e),a}function i(t,e,i){return t=t.toString(i||8),"000000000000".substr(t.length+12-e)+t}function n(e,i,n){var r,o;for(i=i||t(e.length),n=n||0,r=0,o=e.length;r<o;r+=1)i[n]=e.charCodeAt(r),n+=1;return i}function r(t){function e(t){return o[t>>18&63]+o[t>>12&63]+o[t>>6&63]+o[63&t]}var i,n,r,a=t.length%3,s="";for(i=0,r=t.length-a;i<r;i+=3)n=(t[i]<<16)+(t[i+1]<<8)+t[i+2],s+=e(n);switch(s.length%4){case 1:s+="=";break;case 2:s+="=="}return s}var o=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9","+","/"];window.utils={},window.utils.clean=t,window.utils.pad=i,window.utils.extend=e,window.utils.stringToUint8=n,window.utils.uint8ToBase64=r}(),function(){function t(t,n){var r=i.clean(512),o=0;return e.forEach(function(e){var i,n,a=t[e.field]||"";for(i=0,n=a.length;i<n;i+=1)r[o]=a.charCodeAt(i),o+=1;o+=e.length-i}),"function"==typeof n?n(r,o):r}var e,i=window.utils;e=[{field:"fileName",length:100},{field:"fileMode",length:8},{field:"uid",length:8},{field:"gid",length:8},{field:"fileSize",length:12},{field:"mtime",length:12},{field:"checksum",length:8},{field:"type",length:1},{field:"linkName",length:100},{field:"ustar",length:8},{field:"owner",length:32},{field:"group",length:32},{field:"majorNumber",length:8},{field:"minorNumber",length:8},{field:"filenamePrefix",length:155},{field:"padding",length:12}],window.header={},window.header.structure=e,window.header.format=t}(),function(){function t(t){this.written=0,e=(t||20)*r,this.out=n.clean(e),this.blocks=[],this.length=0}var e,i=window.header,n=window.utils,r=512;t.prototype.append=function(t,e,o,a){var s,h,f,u,d,l,c;if("string"==typeof e)e=n.stringToUint8(e);else if(e.constructor!==Uint8Array.prototype.constructor)throw"Invalid input type. You gave me: "+e.constructor.toString().match(/function\s*([$A-Za-z_][0-9A-Za-z_]*)\s*\(/)[1];"function"==typeof o&&(a=o,o={}),o=o||{},f=o.mode||4095&parseInt("777",8),u=o.mtime||Math.floor(+new Date/1e3),d=o.uid||0,l=o.gid||0,s={fileName:t,fileMode:n.pad(f,7),uid:n.pad(d,7),gid:n.pad(l,7),fileSize:n.pad(e.length,11),mtime:n.pad(u,11),checksum:"        ",type:"0",ustar:"ustar  ",owner:o.owner||"",group:o.group||""},h=0,Object.keys(s).forEach(function(t){var e,i,n=s[t];for(e=0,i=n.length;e<i;e+=1)h+=n.charCodeAt(e)}),s.checksum=n.pad(h,6)+"\0 ",c=i.format(s);var p=Math.ceil(c.length/r)*r,m=Math.ceil(e.length/r)*r;this.blocks.push({header:c,input:e,headerLength:p,inputLength:m})},t.prototype.save=function(){var t=[],e=[],i=0,n=Math.pow(2,20),o=[];return this.blocks.forEach(function(t){i+t.headerLength+t.inputLength>n&&(e.push({blocks:o,length:i}),o=[],i=0),o.push(t),i+=t.headerLength+t.inputLength}),e.push({blocks:o,length:i}),e.forEach(function(e){var i=new Uint8Array(e.length),n=0;e.blocks.forEach(function(t){i.set(t.header,n),n+=t.headerLength,i.set(t.input,n),n+=t.inputLength}),t.push(i)}),t.push(new Uint8Array(2*r)),new Blob(t,{type:"octet/stream"})},t.prototype.clear=function(){this.written=0,this.out=n.clean(e)},window.Tar=t}(),function(t){function e(t,i){if({}.hasOwnProperty.call(e.cache,t))return e.cache[t];var n=e.resolve(t);if(!n)throw new Error("Failed to resolve module "+t);var r={id:t,require:e,filename:t,exports:{},loaded:!1,parent:i,children:[]};i&&i.children.push(r);var o=t.slice(0,t.lastIndexOf("/")+1);return e.cache[t]=r.exports,n.call(r.exports,r,r.exports,o,t),r.loaded=!0,e.cache[t]=r.exports}e.modules={},e.cache={},e.resolve=function(t){return{}.hasOwnProperty.call(e.modules,t)?e.modules[t]:void 0},e.define=function(t,i){e.modules[t]=i};var i=function(e){return e="/",{title:"browser",version:"v0.10.26",browser:!0,env:{},argv:[],nextTick:t.setImmediate||function(t){setTimeout(t,0)},cwd:function(){return e},chdir:function(t){e=t}}}();e.define("/gif.coffee",function(t,i,n,r){function o(t,e){return{}.hasOwnProperty.call(t,e)}function a(t,e){for(var i=0,n=e.length;i<n;++i)if(i in e&&e[i]===t)return!0;return!1}function s(t,e){function i(){this.constructor=t}for(var n in e)o(e,n)&&(t[n]=e[n]);return i.prototype=e.prototype,t.prototype=new i,t.__super__=e.prototype,t}var h,f,u,d,l;u=e("events",t).EventEmitter,h=e("/browser.coffee",t),l=function(t){function e(t){var e,i;this.running=!1,this.options={},this.frames=[],this.freeWorkers=[],this.activeWorkers=[],this.setOptions(t);for(e in f)i=f[e],null!=this.options[e]?this.options[e]:this.options[e]=i}return s(e,t),f={workerScript:"gif.worker.js",workers:2,repeat:0,background:"#fff",quality:10,width:null,height:null,transparent:null},d={delay:500,copy:!1},e.prototype.setOption=function(t,e){return this.options[t]=e,null==this._canvas||"width"!==t&&"height"!==t?void 0:this._canvas[t]=e},e.prototype.setOptions=function(t){var e,i;return function(n){for(e in t)o(t,e)&&(i=t[e],n.push(this.setOption(e,i)));return n}.call(this,[])},e.prototype.addFrame=function(t,e){var i,n;null==e&&(e={}),i={},i.transparent=this.options.transparent;for(n in d)i[n]=e[n]||d[n];if(null!=this.options.width||this.setOption("width",t.width),null!=this.options.height||this.setOption("height",t.height),"undefined"!=typeof ImageData&&null!=ImageData&&t instanceof ImageData)i.data=t.data;else if("undefined"!=typeof CanvasRenderingContext2D&&null!=CanvasRenderingContext2D&&t instanceof CanvasRenderingContext2D||"undefined"!=typeof WebGLRenderingContext&&null!=WebGLRenderingContext&&t instanceof WebGLRenderingContext)e.copy?i.data=this.getContextData(t):i.context=t;else{if(null==t.childNodes)throw new Error("Invalid image");e.copy?i.data=this.getImageData(t):i.image=t}return this.frames.push(i)},e.prototype.render=function(){var t,e;if(this.running)throw new Error("Already running");if(null==this.options.width||null==this.options.height)throw new Error("Width and height must be set prior to rendering");this.running=!0,this.nextFrame=0,this.finishedFrames=0,this.imageParts=function(e){for(var i=function(){var t;t=[];for(var e=0;0<=this.frames.length?e<this.frames.length:e>this.frames.length;0<=this.frames.length?++e:--e)t.push(e);return t}.apply(this,arguments),n=0,r=i.length;n<r;++n)t=i[n],e.push(null);return e}.call(this,[]),e=this.spawnWorkers();for(var i=function(){var t;t=[];for(var i=0;0<=e?i<e:i>e;0<=e?++i:--i)t.push(i);return t}.apply(this,arguments),n=0,r=i.length;n<r;++n)t=i[n],this.renderNextFrame();return this.emit("start"),this.emit("progress",0)},e.prototype.abort=function(){for(var t;;){if(t=this.activeWorkers.shift(),!(null!=t))break;console.log("killing active worker"),t.terminate()}return this.running=!1,this.emit("abort")},e.prototype.spawnWorkers=function(){var t;return t=Math.min(this.options.workers,this.frames.length),function(){var e;e=[];for(var i=this.freeWorkers.length;this.freeWorkers.length<=t?i<t:i>t;this.freeWorkers.length<=t?++i:--i)e.push(i);return e}.apply(this,arguments).forEach(function(t){return function(e){var i;return console.log("spawning worker "+e),i=new Worker(t.options.workerScript),i.onmessage=function(t){return function(e){return t.activeWorkers.splice(t.activeWorkers.indexOf(i),1),t.freeWorkers.push(i),t.frameFinished(e.data)}}(t),t.freeWorkers.push(i)}}(this)),t},e.prototype.frameFinished=function(t){return console.log("frame "+t.index+" finished - "+this.activeWorkers.length+" active"),this.finishedFrames++,this.emit("progress",this.finishedFrames/this.frames.length),this.imageParts[t.index]=t,a(null,this.imageParts)?this.renderNextFrame():this.finishRendering()},e.prototype.finishRendering=function(){var t,e,i,n,r,o,a;r=0;for(var s=0,h=this.imageParts.length;s<h;++s)e=this.imageParts[s],r+=(e.data.length-1)*e.pageSize+e.cursor;r+=e.pageSize-e.cursor,console.log("rendering finished - filesize "+Math.round(r/1e3)+"kb"),t=new Uint8Array(r),o=0;for(var f=0,u=this.imageParts.length;f<u;++f){e=this.imageParts[f];for(var d=0,l=e.data.length;d<l;++d)a=e.data[d],i=d,t.set(a,o),o+=i===e.data.length-1?e.cursor:e.pageSize}return n=new Blob([t],{type:"image/gif"}),this.emit("finished",n,t)},e.prototype.renderNextFrame=function(){var t,e,i;if(0===this.freeWorkers.length)throw new Error("No free workers");return this.nextFrame>=this.frames.length?void 0:(t=this.frames[this.nextFrame++],i=this.freeWorkers.shift(),e=this.getTask(t),console.log("starting frame "+(e.index+1)+" of "+this.frames.length),this.activeWorkers.push(i),i.postMessage(e))},e.prototype.getContextData=function(t){return t.getImageData(0,0,this.options.width,this.options.height).data},e.prototype.getImageData=function(t){var e;return null!=this._canvas||(this._canvas=document.createElement("canvas"),this._canvas.width=this.options.width,this._canvas.height=this.options.height),e=this._canvas.getContext("2d"),e.setFill=this.options.background,e.fillRect(0,0,this.options.width,this.options.height),e.drawImage(t,0,0),this.getContextData(e)},e.prototype.getTask=function(t){var e,i;if(e=this.frames.indexOf(t),i={index:e,last:e===this.frames.length-1,delay:t.delay,transparent:t.transparent,width:this.options.width,height:this.options.height,quality:this.options.quality,repeat:this.options.repeat,canTransfer:"chrome"===h.name},null!=t.data)i.data=t.data;else if(null!=t.context)i.data=this.getContextData(t.context);else{if(null==t.image)throw new Error("Invalid frame");i.data=this.getImageData(t.image)}return i},e}(u),t.exports=l}),e.define("/browser.coffee",function(t,e,i,n){var r,o,a,s,h;s=navigator.userAgent.toLowerCase(),a=navigator.platform.toLowerCase(),h=s.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,"unknown",0],o="ie"===h[1]&&document.documentMode,r={name:"version"===h[1]?h[3]:h[1],version:o||parseFloat("opera"===h[1]&&h[4]?h[4]:h[2]),platform:{name:s.match(/ip(?:ad|od|hone)/)?"ios":(s.match(/(?:webos|android)/)||a.match(/mac|win|linux/)||["other"])[0]}},r[r.name]=!0,r[r.name+parseInt(r.version,10)]=!0,r.platform[r.platform.name]=!0,t.exports=r}),e.define("events",function(t,e,n,r){i.EventEmitter||(i.EventEmitter=function(){});var o=e.EventEmitter=i.EventEmitter,a="function"==typeof Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},s=10;o.prototype.setMaxListeners=function(t){this._events||(this._events={}),this._events.maxListeners=t},o.prototype.emit=function(t){if("error"===t&&(!this._events||!this._events.error||a(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:new Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var e=this._events[t];if(!e)return!1;if("function"!=typeof e){if(a(e)){for(var i=Array.prototype.slice.call(arguments,1),n=e.slice(),r=0,o=n.length;r<o;r++)n[r].apply(this,i);return!0}return!1}switch(arguments.length){case 1:e.call(this);break;case 2:e.call(this,arguments[1]);break;case 3:e.call(this,arguments[1],arguments[2]);break;default:var i=Array.prototype.slice.call(arguments,1);e.apply(this,i)}return!0},o.prototype.addListener=function(t,e){if("function"!=typeof e)throw new Error("addListener only takes instances of Function");if(this._events||(this._events={}),this.emit("newListener",t,e),this._events[t])if(a(this._events[t])){if(!this._events[t].warned){var i;i=void 0!==this._events.maxListeners?this._events.maxListeners:s,i&&i>0&&this._events[t].length>i&&(this._events[t].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[t].length),console.trace())}this._events[t].push(e)}else this._events[t]=[this._events[t],e];else this._events[t]=e;return this},o.prototype.on=o.prototype.addListener,o.prototype.once=function(t,e){var i=this;return i.on(t,function n(){i.removeListener(t,n),e.apply(this,arguments)}),this},o.prototype.removeListener=function(t,e){if("function"!=typeof e)throw new Error("removeListener only takes instances of Function");if(!this._events||!this._events[t])return this;var i=this._events[t];if(a(i)){var n=i.indexOf(e);if(n<0)return this;i.splice(n,1),0==i.length&&delete this._events[t]}else this._events[t]===e&&delete this._events[t];return this},o.prototype.removeAllListeners=function(t){return t&&this._events&&this._events[t]&&(this._events[t]=null),this},o.prototype.listeners=function(t){return this._events||(this._events={}),this._events[t]||(this._events[t]=[]),a(this._events[t])||(this._events[t]=[this._events[t]]),this._events[t]}}),t.GIF=e("/gif.coffee")}.call(this,this),function(){function t(t){return t&&t.Object===Object?t:null}function e(t){return String("0000000"+t).slice(-7)}function i(){function t(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}function n(t){var e={};this.settings=t,this.on=function(t,i){e[t]=i},this.emit=function(t){var i=e[t];i&&i.apply(null,Array.prototype.slice.call(arguments,1))},this.filename=t.name||i(),this.extension="",this.mimeType=""}function r(t){n.call(this,t),this.extension=".tar",this.mimeType="application/x-tar",this.fileExtension="",this.baseFilename=this.filename,this.tape=null,this.count=0,this.part=1,this.frames=0}function o(t){r.call(this,t),this.type="image/png",this.fileExtension=".png"}function a(t){r.call(this,t),this.type="image/jpeg",this.fileExtension=".jpg",this.quality=t.quality/100||.8}function s(t){var e=document.createElement("canvas");"image/webp"!==e.toDataURL("image/webp").substr(5,10)&&console.log("WebP not supported - try another export format"),n.call(this,t),this.quality=t.quality/100||.8,this.extension=".webm",this.mimeType="video/webm",this.baseFilename=this.filename,this.framerate=t.framerate,this.frames=0,this.part=1,this.videoWriter=new WebMWriter({quality:this.quality,fileWriter:null,fd:null,frameRate:this.framerate})}function h(t){n.call(this,t),t.quality=t.quality/100||.8,this.encoder=new FFMpegServer.Video(t),this.encoder.on("process",function(){this.emit("process")}.bind(this)),this.encoder.on("finished",function(t,e){var i=this.callback;i&&(this.callback=void 0,i(t,e))}.bind(this)),this.encoder.on("progress",function(t){this.settings.onProgress&&this.settings.onProgress(t)}.bind(this)),this.encoder.on("error",function(t){alert(JSON.stringify(t,null,2))}.bind(this))}function f(t){n.call(this,t),this.framerate=this.settings.framerate,this.type="video/webm",this.extension=".webm",this.stream=null,this.mediaRecorder=null,this.chunks=[]}function u(t){n.call(this,t),t.quality=31-(30*t.quality/100||10),t.workers=t.workers||4,this.extension=".gif",this.mimeType="image/gif",this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.sizeSet=!1,this.encoder=new GIF({workers:t.workers,quality:t.quality,workerScript:t.workersPath+"gif.worker.js"}),this.encoder.on("progress",function(t){this.settings.onProgress&&this.settings.onProgress(t)}.bind(this)),this.encoder.on("finished",function(t){var e=this.callback;e&&(this.callback=void 0,e(t))}.bind(this))}function d(t){function e(){function t(){return this._hooked||(this._hooked=!0,this._hookedTime=this.currentTime||0,this.pause(),it.push(this)),this._hookedTime+M.startTime}b("Capturer start"),U=window.Date.now(),T=U+M.startTime,I=window.performance.now(),F=I+M.startTime,window.Date.prototype.getTime=function(){return T},window.Date.now=function(){return T},window.setTimeout=function(t,e){var i={callback:t,time:e,triggerTime:T+e};return _.push(i),b("Timeout set to "+i.time),i},window.clearTimeout=function(t){for(var e=0;e<_.length;e++)_[e]!=t||(_.splice(e,1),b("Timeout cleared"))},window.setInterval=function(t,e){var i={callback:t,time:e,triggerTime:T+e};return S.push(i),b("Interval set to "+i.time),i},window.clearInterval=function(t){return b("clear Interval"),null},window.requestAnimationFrame=function(t){W.push(t)},window.performance.now=function(){return F};try{Object.defineProperty(HTMLVideoElement.prototype,"currentTime",{get:t}),Object.defineProperty(HTMLAudioElement.prototype,"currentTime",{get:t})}catch(t){b(t)}}function i(){e(),D.start(),R=!0}function n(){R=!1,D.stop(),l()}function r(t,e){Z(t,0,e)}function d(){r(y)}function l(){b("Capturer stop"),window.setTimeout=Z,window.setInterval=J,window.clearInterval=Y,window.clearTimeout=$,window.requestAnimationFrame=Q,window.Date.prototype.getTime=et,window.Date.now=X,window.performance.now=tt}function c(){var t=C/M.framerate;(M.frameLimit&&C>=M.frameLimit||M.timeLimit&&t>=M.timeLimit)&&(n(),v());var e=new Date(null);e.setSeconds(t),M.motionBlurFrames>2?j.textContent="CCapture "+M.format+" | "+C+" frames ("+O+" inter) | "+e.toISOString().substr(11,8):j.textContent="CCapture "+M.format+" | "+C+" frames | "+e.toISOString().substr(11,8)}function p(t){N.width===t.width&&N.height===t.height||(N.width=t.width,N.height=t.height,z=new Uint16Array(N.height*N.width*4),V.fillStyle="#0",V.fillRect(0,0,N.width,N.height))}function m(t){V.drawImage(t,0,0),q=V.getImageData(0,0,N.width,N.height);for(var e=0;e<z.length;e+=4)z[e]+=q.data[e],z[e+1]+=q.data[e+1],z[e+2]+=q.data[e+2];O++}function w(){for(var t=q.data,e=0;e<z.length;e+=4)t[e]=2*z[e]/M.motionBlurFrames,t[e+1]=2*z[e+1]/M.motionBlurFrames,t[e+2]=2*z[e+2]/M.motionBlurFrames;V.putImageData(q,0,0),D.add(N),C++,O=0,b("Full MB Frame! "+C+" "+T);for(var e=0;e<z.length;e+=4)z[e]=0,z[e+1]=0,z[e+2]=0;gc()}function g(t){R&&(M.motionBlurFrames>2?(p(t),m(t),O>=.5*M.motionBlurFrames?w():d()):(D.add(t),C++,b("Full Frame! "+C)))}function y(){var t=1e3/M.framerate,e=(C+O/M.motionBlurFrames)*t;T=U+e,F=I+e,it.forEach(function(t){t._hookedTime=e/1e3}),c(),b("Frame: "+C+" "+O);for(var i=0;i<_.length;i++)T>=_[i].triggerTime&&(r(_[i].callback),_.splice(i,1));for(var i=0;i<S.length;i++)T>=S[i].triggerTime&&(r(S[i].callback),S[i].triggerTime+=S[i].time);W.forEach(function(t){r(t,T-k)}),W=[]}function v(t){t||(t=function(t){return download(t,D.filename+D.extension,D.mimeType),!1}),D.save(t)}function b(t){A&&console.log(t)}function B(t,e){P[t]=e}function x(t){var e=P[t];e&&e.apply(null,Array.prototype.slice.call(arguments,1))}function E(t){x("progress",t)}var A,L,T,U,F,I,d,D,M=t||{},_=(new Date,[]),S=[],C=0,O=0,W=[],R=!1,P={};M.framerate=M.framerate||60,M.motionBlurFrames=2*(M.motionBlurFrames||1),A=M.verbose||!1,L=M.display||!1,M.step=1e3/M.framerate,M.timeLimit=M.timeLimit||0,M.frameLimit=M.frameLimit||0,M.startTime=M.startTime||0;var j=document.createElement("div");j.style.position="absolute",j.style.left=j.style.top=0,j.style.backgroundColor="black",j.style.fontFamily="monospace",j.style.fontSize="11px",j.style.padding="5px",j.style.color="red",j.style.zIndex=1e5,M.display&&document.body.appendChild(j);var z,q,N=document.createElement("canvas"),V=N.getContext("2d");b("Step is set to "+M.step+"ms");var G={gif:u,webm:s,ffmpegserver:h,png:o,jpg:a,"webm-mediarecorder":f},H=G[M.format];if(!H)throw"Error: Incorrect or missing format: Valid formats are "+Object.keys(G).join(", ");if(D=new H(M),D.step=d,D.on("process",y),D.on("progress",E),"performance"in window==0&&(window.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},"now"in window.performance==0){var K=Date.now();performance.timing&&performance.timing.navigationStart&&(K=performance.timing.navigationStart),window.performance.now=function(){return Date.now()-K}}var Z=window.setTimeout,J=window.setInterval,Y=window.clearInterval,$=window.clearTimeout,Q=window.requestAnimationFrame,X=window.Date.now,tt=window.performance.now,et=window.Date.prototype.getTime,it=[];return{start:i,capture:g,stop:n,save:v,on:B}}var l={function:!0,object:!0},c=(parseFloat,parseInt,l[typeof exports]&&exports&&!exports.nodeType?exports:void 0),p=l[typeof module]&&module&&!module.nodeType?module:void 0,m=p&&p.exports===c?c:void 0,w=t(c&&p&&"object"==typeof global&&global),g=t(l[typeof self]&&self),y=t(l[typeof window]&&window),v=t(l[typeof this]&&this),b=w||y!==(v&&v.window)&&y||g||v||Function("return this")();"gc"in window||(window.gc=function(){}),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(t,e,i){for(var n=atob(this.toDataURL(e,i).split(",")[1]),r=n.length,o=new Uint8Array(r),a=0;a<r;a++)o[a]=n.charCodeAt(a);t(new Blob([o],{type:e||"image/png"}))}}),function(){if("performance"in window==0&&(window.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},"now"in window.performance==0){var t=Date.now();performance.timing&&performance.timing.navigationStart&&(t=performance.timing.navigationStart),window.performance.now=function(){return Date.now()-t}}}();var k=window.Date.now();n.prototype.start=function(){},n.prototype.stop=function(){},n.prototype.add=function(){},n.prototype.save=function(){},n.prototype.dispose=function(){},n.prototype.safeToProceed=function(){return!0},n.prototype.step=function(){console.log("Step not set!")},r.prototype=Object.create(n.prototype),r.prototype.start=function(){this.dispose()},r.prototype.add=function(t){
+var i=new FileReader;i.onload=function(){this.tape.append(e(this.count)+this.fileExtension,new Uint8Array(i.result)),this.settings.autoSaveTime>0&&this.frames/this.settings.framerate>=this.settings.autoSaveTime?this.save(function(t){this.filename=this.baseFilename+"-part-"+e(this.part),download(t,this.filename+this.extension,this.mimeType);var i=this.count;this.dispose(),this.count=i+1,this.part++,this.filename=this.baseFilename+"-part-"+e(this.part),this.frames=0,this.step()}.bind(this)):(this.count++,this.frames++,this.step())}.bind(this),i.readAsArrayBuffer(t)},r.prototype.save=function(t){t(this.tape.save())},r.prototype.dispose=function(){this.tape=new Tar,this.count=0},o.prototype=Object.create(r.prototype),o.prototype.add=function(t){t.toBlob(function(t){r.prototype.add.call(this,t)}.bind(this),this.type)},a.prototype=Object.create(r.prototype),a.prototype.add=function(t){t.toBlob(function(t){r.prototype.add.call(this,t)}.bind(this),this.type,this.quality)},s.prototype=Object.create(n.prototype),s.prototype.start=function(t){this.dispose()},s.prototype.add=function(t){this.videoWriter.addFrame(t),this.settings.autoSaveTime>0&&this.frames/this.settings.framerate>=this.settings.autoSaveTime?this.save(function(t){this.filename=this.baseFilename+"-part-"+e(this.part),download(t,this.filename+this.extension,this.mimeType),this.dispose(),this.part++,this.filename=this.baseFilename+"-part-"+e(this.part),this.step()}.bind(this)):(this.frames++,this.step())},s.prototype.save=function(t){this.videoWriter.complete().then(t)},s.prototype.dispose=function(t){this.frames=0,this.videoWriter=new WebMWriter({quality:this.quality,fileWriter:null,fd:null,frameRate:this.framerate})},h.prototype=Object.create(n.prototype),h.prototype.start=function(){this.encoder.start(this.settings)},h.prototype.add=function(t){this.encoder.add(t)},h.prototype.save=function(t){this.callback=t,this.encoder.end()},h.prototype.safeToProceed=function(){return this.encoder.safeToProceed()},f.prototype=Object.create(n.prototype),f.prototype.add=function(t){this.stream||(this.stream=t.captureStream(this.framerate),this.mediaRecorder=new MediaRecorder(this.stream),this.mediaRecorder.start(),this.mediaRecorder.ondataavailable=function(t){this.chunks.push(t.data)}.bind(this)),this.step()},f.prototype.save=function(t){this.mediaRecorder.onstop=function(e){var i=new Blob(this.chunks,{type:"video/webm"});this.chunks=[],t(i)}.bind(this),this.mediaRecorder.stop()},u.prototype=Object.create(n.prototype),u.prototype.add=function(t){this.sizeSet||(this.encoder.setOption("width",t.width),this.encoder.setOption("height",t.height),this.sizeSet=!0),this.canvas.width=t.width,this.canvas.height=t.height,this.ctx.drawImage(t,0,0),this.encoder.addFrame(this.ctx,{copy:!0,delay:this.settings.step}),this.step()},u.prototype.save=function(t){this.callback=t,this.encoder.render()},(y||g||{}).CCapture=d,"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return d}):c&&p?(m&&((p.exports=d).CCapture=d),c.CCapture=d):b.CCapture=d}();

public/js/gif.js

@@ -0,0 +1,3 @@
+// gif.js 0.2.0 - https://github.com/jnordberg/gif.js
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GIF=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){function EventEmitter(){this._events=this._events||{};this._maxListeners=this._maxListeners||undefined}module.exports=EventEmitter;EventEmitter.EventEmitter=EventEmitter;EventEmitter.prototype._events=undefined;EventEmitter.prototype._maxListeners=undefined;EventEmitter.defaultMaxListeners=10;EventEmitter.prototype.setMaxListeners=function(n){if(!isNumber(n)||n<0||isNaN(n))throw TypeError("n must be a positive number");this._maxListeners=n;return this};EventEmitter.prototype.emit=function(type){var er,handler,len,args,i,listeners;if(!this._events)this._events={};if(type==="error"){if(!this._events.error||isObject(this._events.error)&&!this._events.error.length){er=arguments[1];if(er instanceof Error){throw er}else{var err=new Error('Uncaught, unspecified "error" event. ('+er+")");err.context=er;throw err}}}handler=this._events[type];if(isUndefined(handler))return false;if(isFunction(handler)){switch(arguments.length){case 1:handler.call(this);break;case 2:handler.call(this,arguments[1]);break;case 3:handler.call(this,arguments[1],arguments[2]);break;default:args=Array.prototype.slice.call(arguments,1);handler.apply(this,args)}}else if(isObject(handler)){args=Array.prototype.slice.call(arguments,1);listeners=handler.slice();len=listeners.length;for(i=0;i<len;i++)listeners[i].apply(this,args)}return true};EventEmitter.prototype.addListener=function(type,listener){var m;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events)this._events={};if(this._events.newListener)this.emit("newListener",type,isFunction(listener.listener)?listener.listener:listener);if(!this._events[type])this._events[type]=listener;else if(isObject(this._events[type]))this._events[type].push(listener);else this._events[type]=[this._events[type],listener];if(isObject(this._events[type])&&!this._events[type].warned){if(!isUndefined(this._maxListeners)){m=this._maxListeners}else{m=EventEmitter.defaultMaxListeners}if(m&&m>0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);if(typeof console.trace==="function"){console.trace()}}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-- >0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else if(listeners){while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.prototype.listenerCount=function(type){if(this._events){var evlistener=this._events[type];if(isFunction(evlistener))return 1;else if(evlistener)return evlistener.length}return 0};EventEmitter.listenerCount=function(emitter,type){return emitter.listenerCount(type)};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},{}],2:[function(require,module,exports){var UA,browser,mode,platform,ua;ua=navigator.userAgent.toLowerCase();platform=navigator.platform.toLowerCase();UA=ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,"unknown",0];mode=UA[1]==="ie"&&document.documentMode;browser={name:UA[1]==="version"?UA[3]:UA[1],version:mode||parseFloat(UA[1]==="opera"&&UA[4]?UA[4]:UA[2]),platform:{name:ua.match(/ip(?:ad|od|hone)/)?"ios":(ua.match(/(?:webos|android)/)||platform.match(/mac|win|linux/)||["other"])[0]}};browser[browser.name]=true;browser[browser.name+parseInt(browser.version,10)]=true;browser.platform[browser.platform.name]=true;module.exports=browser},{}],3:[function(require,module,exports){var EventEmitter,GIF,browser,extend=function(child,parent){for(var key in parent){if(hasProp.call(parent,key))child[key]=parent[key]}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor;child.__super__=parent.prototype;return child},hasProp={}.hasOwnProperty,indexOf=[].indexOf||function(item){for(var i=0,l=this.length;i<l;i++){if(i in this&&this[i]===item)return i}return-1},slice=[].slice;EventEmitter=require("events").EventEmitter;browser=require("./browser.coffee");GIF=function(superClass){var defaults,frameDefaults;extend(GIF,superClass);defaults={workerScript:"gif.worker.js",workers:2,repeat:0,background:"#fff",quality:10,width:null,height:null,transparent:null,debug:false,dither:false};frameDefaults={delay:500,copy:false};function GIF(options){var base,key,value;this.running=false;this.options={};this.frames=[];this.freeWorkers=[];this.activeWorkers=[];this.setOptions(options);for(key in defaults){value=defaults[key];if((base=this.options)[key]==null){base[key]=value}}}GIF.prototype.setOption=function(key,value){this.options[key]=value;if(this._canvas!=null&&(key==="width"||key==="height")){return this._canvas[key]=value}};GIF.prototype.setOptions=function(options){var key,results,value;results=[];for(key in options){if(!hasProp.call(options,key))continue;value=options[key];results.push(this.setOption(key,value))}return results};GIF.prototype.addFrame=function(image,options){var frame,key;if(options==null){options={}}frame={};frame.transparent=this.options.transparent;for(key in frameDefaults){frame[key]=options[key]||frameDefaults[key]}if(this.options.width==null){this.setOption("width",image.width)}if(this.options.height==null){this.setOption("height",image.height)}if(typeof ImageData!=="undefined"&&ImageData!==null&&image instanceof ImageData){frame.data=image.data}else if(typeof CanvasRenderingContext2D!=="undefined"&&CanvasRenderingContext2D!==null&&image instanceof CanvasRenderingContext2D||typeof WebGLRenderingContext!=="undefined"&&WebGLRenderingContext!==null&&image instanceof WebGLRenderingContext){if(options.copy){frame.data=this.getContextData(image)}else{frame.context=image}}else if(image.childNodes!=null){if(options.copy){frame.data=this.getImageData(image)}else{frame.image=image}}else{throw new Error("Invalid image")}return this.frames.push(frame)};GIF.prototype.render=function(){var i,j,numWorkers,ref;if(this.running){throw new Error("Already running")}if(this.options.width==null||this.options.height==null){throw new Error("Width and height must be set prior to rendering")}this.running=true;this.nextFrame=0;this.finishedFrames=0;this.imageParts=function(){var j,ref,results;results=[];for(i=j=0,ref=this.frames.length;0<=ref?j<ref:j>ref;i=0<=ref?++j:--j){results.push(null)}return results}.call(this);numWorkers=this.spawnWorkers();if(this.options.globalPalette===true){this.renderNextFrame()}else{for(i=j=0,ref=numWorkers;0<=ref?j<ref:j>ref;i=0<=ref?++j:--j){this.renderNextFrame()}}this.emit("start");return this.emit("progress",0)};GIF.prototype.abort=function(){var worker;while(true){worker=this.activeWorkers.shift();if(worker==null){break}this.log("killing active worker");worker.terminate()}this.running=false;return this.emit("abort")};GIF.prototype.spawnWorkers=function(){var j,numWorkers,ref,results;numWorkers=Math.min(this.options.workers,this.frames.length);(function(){results=[];for(var j=ref=this.freeWorkers.length;ref<=numWorkers?j<numWorkers:j>numWorkers;ref<=numWorkers?j++:j--){results.push(j)}return results}).apply(this).forEach(function(_this){return function(i){var worker;_this.log("spawning worker "+i);worker=new Worker(_this.options.workerScript);worker.onmessage=function(event){_this.activeWorkers.splice(_this.activeWorkers.indexOf(worker),1);_this.freeWorkers.push(worker);return _this.frameFinished(event.data)};return _this.freeWorkers.push(worker)}}(this));return numWorkers};GIF.prototype.frameFinished=function(frame){var i,j,ref;this.log("frame "+frame.index+" finished - "+this.activeWorkers.length+" active");this.finishedFrames++;this.emit("progress",this.finishedFrames/this.frames.length);this.imageParts[frame.index]=frame;if(this.options.globalPalette===true){this.options.globalPalette=frame.globalPalette;this.log("global palette analyzed");if(this.frames.length>2){for(i=j=1,ref=this.freeWorkers.length;1<=ref?j<ref:j>ref;i=1<=ref?++j:--j){this.renderNextFrame()}}}if(indexOf.call(this.imageParts,null)>=0){return this.renderNextFrame()}else{return this.finishRendering()}};GIF.prototype.finishRendering=function(){var data,frame,i,image,j,k,l,len,len1,len2,len3,offset,page,ref,ref1,ref2;len=0;ref=this.imageParts;for(j=0,len1=ref.length;j<len1;j++){frame=ref[j];len+=(frame.data.length-1)*frame.pageSize+frame.cursor}len+=frame.pageSize-frame.cursor;this.log("rendering finished - filesize "+Math.round(len/1e3)+"kb");data=new Uint8Array(len);offset=0;ref1=this.imageParts;for(k=0,len2=ref1.length;k<len2;k++){frame=ref1[k];ref2=frame.data;for(i=l=0,len3=ref2.length;l<len3;i=++l){page=ref2[i];data.set(page,offset);if(i===frame.data.length-1){offset+=frame.cursor}else{offset+=frame.pageSize}}}image=new Blob([data],{type:"image/gif"});return this.emit("finished",image,data)};GIF.prototype.renderNextFrame=function(){var frame,task,worker;if(this.freeWorkers.length===0){throw new Error("No free workers")}if(this.nextFrame>=this.frames.length){return}frame=this.frames[this.nextFrame++];worker=this.freeWorkers.shift();task=this.getTask(frame);this.log("starting frame "+(task.index+1)+" of "+this.frames.length);this.activeWorkers.push(worker);return worker.postMessage(task)};GIF.prototype.getContextData=function(ctx){return ctx.getImageData(0,0,this.options.width,this.options.height).data};GIF.prototype.getImageData=function(image){var ctx;if(this._canvas==null){this._canvas=document.createElement("canvas");this._canvas.width=this.options.width;this._canvas.height=this.options.height}ctx=this._canvas.getContext("2d");ctx.setFill=this.options.background;ctx.fillRect(0,0,this.options.width,this.options.height);ctx.drawImage(image,0,0);return this.getContextData(ctx)};GIF.prototype.getTask=function(frame){var index,task;index=this.frames.indexOf(frame);task={index:index,last:index===this.frames.length-1,delay:frame.delay,transparent:frame.transparent,width:this.options.width,height:this.options.height,quality:this.options.quality,dither:this.options.dither,globalPalette:this.options.globalPalette,repeat:this.options.repeat,canTransfer:browser.name==="chrome"};if(frame.data!=null){task.data=frame.data}else if(frame.context!=null){task.data=this.getContextData(frame.context)}else if(frame.image!=null){task.data=this.getImageData(frame.image)}else{throw new Error("Invalid frame")}return task};GIF.prototype.log=function(){var args;args=1<=arguments.length?slice.call(arguments,0):[];if(!this.options.debug){return}return console.log.apply(console,args)};return GIF}(EventEmitter);module.exports=GIF},{"./browser.coffee":2,events:1}]},{},[3])(3)});
+//# sourceMappingURL=gif.js.map

public/js/gif.worker.js

@@ -0,0 +1,3 @@
+// gif.worker.js 0.2.0 - https://github.com/jnordberg/gif.js
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){var NeuQuant=require("./TypedNeuQuant.js");var LZWEncoder=require("./LZWEncoder.js");function ByteArray(){this.page=-1;this.pages=[];this.newPage()}ByteArray.pageSize=4096;ByteArray.charMap={};for(var i=0;i<256;i++)ByteArray.charMap[i]=String.fromCharCode(i);ByteArray.prototype.newPage=function(){this.pages[++this.page]=new Uint8Array(ByteArray.pageSize);this.cursor=0};ByteArray.prototype.getData=function(){var rv="";for(var p=0;p<this.pages.length;p++){for(var i=0;i<ByteArray.pageSize;i++){rv+=ByteArray.charMap[this.pages[p][i]]}}return rv};ByteArray.prototype.writeByte=function(val){if(this.cursor>=ByteArray.pageSize)this.newPage();this.pages[this.page][this.cursor++]=val};ByteArray.prototype.writeUTFBytes=function(string){for(var l=string.length,i=0;i<l;i++)this.writeByte(string.charCodeAt(i))};ByteArray.prototype.writeBytes=function(array,offset,length){for(var l=length||array.length,i=offset||0;i<l;i++)this.writeByte(array[i])};function GIFEncoder(width,height){this.width=~~width;this.height=~~height;this.transparent=null;this.transIndex=0;this.repeat=-1;this.delay=0;this.image=null;this.pixels=null;this.indexedPixels=null;this.colorDepth=null;this.colorTab=null;this.neuQuant=null;this.usedEntry=new Array;this.palSize=7;this.dispose=-1;this.firstFrame=true;this.sample=10;this.dither=false;this.globalPalette=false;this.out=new ByteArray}GIFEncoder.prototype.setDelay=function(milliseconds){this.delay=Math.round(milliseconds/10)};GIFEncoder.prototype.setFrameRate=function(fps){this.delay=Math.round(100/fps)};GIFEncoder.prototype.setDispose=function(disposalCode){if(disposalCode>=0)this.dispose=disposalCode};GIFEncoder.prototype.setRepeat=function(repeat){this.repeat=repeat};GIFEncoder.prototype.setTransparent=function(color){this.transparent=color};GIFEncoder.prototype.addFrame=function(imageData){this.image=imageData;this.colorTab=this.globalPalette&&this.globalPalette.slice?this.globalPalette:null;this.getImagePixels();this.analyzePixels();if(this.globalPalette===true)this.globalPalette=this.colorTab;if(this.firstFrame){this.writeLSD();this.writePalette();if(this.repeat>=0){this.writeNetscapeExt()}}this.writeGraphicCtrlExt();this.writeImageDesc();if(!this.firstFrame&&!this.globalPalette)this.writePalette();this.writePixels();this.firstFrame=false};GIFEncoder.prototype.finish=function(){this.out.writeByte(59)};GIFEncoder.prototype.setQuality=function(quality){if(quality<1)quality=1;this.sample=quality};GIFEncoder.prototype.setDither=function(dither){if(dither===true)dither="FloydSteinberg";this.dither=dither};GIFEncoder.prototype.setGlobalPalette=function(palette){this.globalPalette=palette};GIFEncoder.prototype.getGlobalPalette=function(){return this.globalPalette&&this.globalPalette.slice&&this.globalPalette.slice(0)||this.globalPalette};GIFEncoder.prototype.writeHeader=function(){this.out.writeUTFBytes("GIF89a")};GIFEncoder.prototype.analyzePixels=function(){if(!this.colorTab){this.neuQuant=new NeuQuant(this.pixels,this.sample);this.neuQuant.buildColormap();this.colorTab=this.neuQuant.getColormap()}if(this.dither){this.ditherPixels(this.dither.replace("-serpentine",""),this.dither.match(/-serpentine/)!==null)}else{this.indexPixels()}this.pixels=null;this.colorDepth=8;this.palSize=7;if(this.transparent!==null){this.transIndex=this.findClosest(this.transparent,true)}};GIFEncoder.prototype.indexPixels=function(imgq){var nPix=this.pixels.length/3;this.indexedPixels=new Uint8Array(nPix);var k=0;for(var j=0;j<nPix;j++){var index=this.findClosestRGB(this.pixels[k++]&255,this.pixels[k++]&255,this.pixels[k++]&255);this.usedEntry[index]=true;this.indexedPixels[j]=index}};GIFEncoder.prototype.ditherPixels=function(kernel,serpentine){var kernels={FalseFloydSteinberg:[[3/8,1,0],[3/8,0,1],[2/8,1,1]],FloydSteinberg:[[7/16,1,0],[3/16,-1,1],[5/16,0,1],[1/16,1,1]],Stucki:[[8/42,1,0],[4/42,2,0],[2/42,-2,1],[4/42,-1,1],[8/42,0,1],[4/42,1,1],[2/42,2,1],[1/42,-2,2],[2/42,-1,2],[4/42,0,2],[2/42,1,2],[1/42,2,2]],Atkinson:[[1/8,1,0],[1/8,2,0],[1/8,-1,1],[1/8,0,1],[1/8,1,1],[1/8,0,2]]};if(!kernel||!kernels[kernel]){throw"Unknown dithering kernel: "+kernel}var ds=kernels[kernel];var index=0,height=this.height,width=this.width,data=this.pixels;var direction=serpentine?-1:1;this.indexedPixels=new Uint8Array(this.pixels.length/3);for(var y=0;y<height;y++){if(serpentine)direction=direction*-1;for(var x=direction==1?0:width-1,xend=direction==1?width:0;x!==xend;x+=direction){index=y*width+x;var idx=index*3;var r1=data[idx];var g1=data[idx+1];var b1=data[idx+2];idx=this.findClosestRGB(r1,g1,b1);this.usedEntry[idx]=true;this.indexedPixels[index]=idx;idx*=3;var r2=this.colorTab[idx];var g2=this.colorTab[idx+1];var b2=this.colorTab[idx+2];var er=r1-r2;var eg=g1-g2;var eb=b1-b2;for(var i=direction==1?0:ds.length-1,end=direction==1?ds.length:0;i!==end;i+=direction){var x1=ds[i][1];var y1=ds[i][2];if(x1+x>=0&&x1+x<width&&y1+y>=0&&y1+y<height){var d=ds[i][0];idx=index+x1+y1*width;idx*=3;data[idx]=Math.max(0,Math.min(255,data[idx]+er*d));data[idx+1]=Math.max(0,Math.min(255,data[idx+1]+eg*d));data[idx+2]=Math.max(0,Math.min(255,data[idx+2]+eb*d))}}}}};GIFEncoder.prototype.findClosest=function(c,used){return this.findClosestRGB((c&16711680)>>16,(c&65280)>>8,c&255,used)};GIFEncoder.prototype.findClosestRGB=function(r,g,b,used){if(this.colorTab===null)return-1;if(this.neuQuant&&!used){return this.neuQuant.lookupRGB(r,g,b)}var c=b|g<<8|r<<16;var minpos=0;var dmin=256*256*256;var len=this.colorTab.length;for(var i=0,index=0;i<len;index++){var dr=r-(this.colorTab[i++]&255);var dg=g-(this.colorTab[i++]&255);var db=b-(this.colorTab[i++]&255);var d=dr*dr+dg*dg+db*db;if((!used||this.usedEntry[index])&&d<dmin){dmin=d;minpos=index}}return minpos};GIFEncoder.prototype.getImagePixels=function(){var w=this.width;var h=this.height;this.pixels=new Uint8Array(w*h*3);var data=this.image;var srcPos=0;var count=0;for(var i=0;i<h;i++){for(var j=0;j<w;j++){this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];srcPos++}}};GIFEncoder.prototype.writeGraphicCtrlExt=function(){this.out.writeByte(33);this.out.writeByte(249);this.out.writeByte(4);var transp,disp;if(this.transparent===null){transp=0;disp=0}else{transp=1;disp=2}if(this.dispose>=0){disp=dispose&7}disp<<=2;this.out.writeByte(0|disp|0|transp);this.writeShort(this.delay);this.out.writeByte(this.transIndex);this.out.writeByte(0)};GIFEncoder.prototype.writeImageDesc=function(){this.out.writeByte(44);this.writeShort(0);this.writeShort(0);this.writeShort(this.width);this.writeShort(this.height);if(this.firstFrame||this.globalPalette){this.out.writeByte(0)}else{this.out.writeByte(128|0|0|0|this.palSize)}};GIFEncoder.prototype.writeLSD=function(){this.writeShort(this.width);this.writeShort(this.height);this.out.writeByte(128|112|0|this.palSize);this.out.writeByte(0);this.out.writeByte(0)};GIFEncoder.prototype.writeNetscapeExt=function(){this.out.writeByte(33);this.out.writeByte(255);this.out.writeByte(11);this.out.writeUTFBytes("NETSCAPE2.0");this.out.writeByte(3);this.out.writeByte(1);this.writeShort(this.repeat);this.out.writeByte(0)};GIFEncoder.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var n=3*256-this.colorTab.length;for(var i=0;i<n;i++)this.out.writeByte(0)};GIFEncoder.prototype.writeShort=function(pValue){this.out.writeByte(pValue&255);this.out.writeByte(pValue>>8&255)};GIFEncoder.prototype.writePixels=function(){var enc=new LZWEncoder(this.width,this.height,this.indexedPixels,this.colorDepth);enc.encode(this.out)};GIFEncoder.prototype.stream=function(){return this.out};module.exports=GIFEncoder},{"./LZWEncoder.js":2,"./TypedNeuQuant.js":3}],2:[function(require,module,exports){var EOF=-1;var BITS=12;var HSIZE=5003;var masks=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function LZWEncoder(width,height,pixels,colorDepth){var initCodeSize=Math.max(2,colorDepth);var accum=new Uint8Array(256);var htab=new Int32Array(HSIZE);var codetab=new Int32Array(HSIZE);var cur_accum,cur_bits=0;var a_count;var free_ent=0;var maxcode;var clear_flg=false;var g_init_bits,ClearCode,EOFCode;function char_out(c,outs){accum[a_count++]=c;if(a_count>=254)flush_char(outs)}function cl_block(outs){cl_hash(HSIZE);free_ent=ClearCode+2;clear_flg=true;output(ClearCode,outs)}function cl_hash(hsize){for(var i=0;i<hsize;++i)htab[i]=-1}function compress(init_bits,outs){var fcode,c,i,ent,disp,hsize_reg,hshift;g_init_bits=init_bits;clear_flg=false;n_bits=g_init_bits;maxcode=MAXCODE(n_bits);ClearCode=1<<init_bits-1;EOFCode=ClearCode+1;free_ent=ClearCode+2;a_count=0;ent=nextPixel();hshift=0;for(fcode=HSIZE;fcode<65536;fcode*=2)++hshift;hshift=8-hshift;hsize_reg=HSIZE;cl_hash(hsize_reg);output(ClearCode,outs);outer_loop:while((c=nextPixel())!=EOF){fcode=(c<<BITS)+ent;i=c<<hshift^ent;if(htab[i]===fcode){ent=codetab[i];continue}else if(htab[i]>=0){disp=hsize_reg-i;if(i===0)disp=1;do{if((i-=disp)<0)i+=hsize_reg;if(htab[i]===fcode){ent=codetab[i];continue outer_loop}}while(htab[i]>=0)}output(ent,outs);ent=c;if(free_ent<1<<BITS){codetab[i]=free_ent++;htab[i]=fcode}else{cl_block(outs)}}output(ent,outs);output(EOFCode,outs)}function encode(outs){outs.writeByte(initCodeSize);remaining=width*height;curPixel=0;compress(initCodeSize+1,outs);outs.writeByte(0)}function flush_char(outs){if(a_count>0){outs.writeByte(a_count);outs.writeBytes(accum,0,a_count);a_count=0}}function MAXCODE(n_bits){return(1<<n_bits)-1}function nextPixel(){if(remaining===0)return EOF;--remaining;var pix=pixels[curPixel++];return pix&255}function output(code,outs){cur_accum&=masks[cur_bits];if(cur_bits>0)cur_accum|=code<<cur_bits;else cur_accum=code;cur_bits+=n_bits;while(cur_bits>=8){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}if(free_ent>maxcode||clear_flg){if(clear_flg){maxcode=MAXCODE(n_bits=g_init_bits);clear_flg=false}else{++n_bits;if(n_bits==BITS)maxcode=1<<BITS;else maxcode=MAXCODE(n_bits)}}if(code==EOFCode){while(cur_bits>0){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}flush_char(outs)}}this.encode=encode}module.exports=LZWEncoder},{}],3:[function(require,module,exports){var ncycles=100;var netsize=256;var maxnetpos=netsize-1;var netbiasshift=4;var intbiasshift=16;var intbias=1<<intbiasshift;var gammashift=10;var gamma=1<<gammashift;var betashift=10;var beta=intbias>>betashift;var betagamma=intbias<<gammashift-betashift;var initrad=netsize>>3;var radiusbiasshift=6;var radiusbias=1<<radiusbiasshift;var initradius=initrad*radiusbias;var radiusdec=30;var alphabiasshift=10;var initalpha=1<<alphabiasshift;var alphadec;var radbiasshift=8;var radbias=1<<radbiasshift;var alpharadbshift=alphabiasshift+radbiasshift;var alpharadbias=1<<alpharadbshift;var prime1=499;var prime2=491;var prime3=487;var prime4=503;var minpicturebytes=3*prime4;function NeuQuant(pixels,samplefac){var network;var netindex;var bias;var freq;var radpower;function init(){network=[];netindex=new Int32Array(256);bias=new Int32Array(netsize);freq=new Int32Array(netsize);radpower=new Int32Array(netsize>>3);var i,v;for(i=0;i<netsize;i++){v=(i<<netbiasshift+8)/netsize;network[i]=new Float64Array([v,v,v,0]);freq[i]=intbias/netsize;bias[i]=0}}function unbiasnet(){for(var i=0;i<netsize;i++){network[i][0]>>=netbiasshift;network[i][1]>>=netbiasshift;network[i][2]>>=netbiasshift;network[i][3]=i}}function altersingle(alpha,i,b,g,r){network[i][0]-=alpha*(network[i][0]-b)/initalpha;network[i][1]-=alpha*(network[i][1]-g)/initalpha;network[i][2]-=alpha*(network[i][2]-r)/initalpha}function alterneigh(radius,i,b,g,r){var lo=Math.abs(i-radius);var hi=Math.min(i+radius,netsize);var j=i+1;var k=i-1;var m=1;var p,a;while(j<hi||k>lo){a=radpower[m++];if(j<hi){p=network[j++];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}if(k>lo){p=network[k--];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}}}function contest(b,g,r){var bestd=~(1<<31);var bestbiasd=bestd;var bestpos=-1;var bestbiaspos=bestpos;var i,n,dist,biasdist,betafreq;for(i=0;i<netsize;i++){n=network[i];dist=Math.abs(n[0]-b)+Math.abs(n[1]-g)+Math.abs(n[2]-r);if(dist<bestd){bestd=dist;bestpos=i}biasdist=dist-(bias[i]>>intbiasshift-netbiasshift);if(biasdist<bestbiasd){bestbiasd=biasdist;bestbiaspos=i}betafreq=freq[i]>>betashift;freq[i]-=betafreq;bias[i]+=betafreq<<gammashift}freq[bestpos]+=beta;bias[bestpos]-=betagamma;return bestbiaspos}function inxbuild(){var i,j,p,q,smallpos,smallval,previouscol=0,startpos=0;for(i=0;i<netsize;i++){p=network[i];smallpos=i;smallval=p[1];for(j=i+1;j<netsize;j++){q=network[j];if(q[1]<smallval){smallpos=j;smallval=q[1]}}q=network[smallpos];if(i!=smallpos){j=q[0];q[0]=p[0];p[0]=j;j=q[1];q[1]=p[1];p[1]=j;j=q[2];q[2]=p[2];p[2]=j;j=q[3];q[3]=p[3];p[3]=j}if(smallval!=previouscol){netindex[previouscol]=startpos+i>>1;for(j=previouscol+1;j<smallval;j++)netindex[j]=i;previouscol=smallval;startpos=i}}netindex[previouscol]=startpos+maxnetpos>>1;for(j=previouscol+1;j<256;j++)netindex[j]=maxnetpos}function inxsearch(b,g,r){var a,p,dist;var bestd=1e3;var best=-1;var i=netindex[g];var j=i-1;while(i<netsize||j>=0){if(i<netsize){p=network[i];dist=p[1]-g;if(dist>=bestd)i=netsize;else{i++;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}if(j>=0){p=network[j];dist=g-p[1];if(dist>=bestd)j=-1;else{j--;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}}return best}function learn(){var i;var lengthcount=pixels.length;var alphadec=30+(samplefac-1)/3;var samplepixels=lengthcount/(3*samplefac);var delta=~~(samplepixels/ncycles);var alpha=initalpha;var radius=initradius;var rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(i=0;i<rad;i++)radpower[i]=alpha*((rad*rad-i*i)*radbias/(rad*rad));var step;if(lengthcount<minpicturebytes){samplefac=1;step=3}else if(lengthcount%prime1!==0){step=3*prime1}else if(lengthcount%prime2!==0){step=3*prime2}else if(lengthcount%prime3!==0){step=3*prime3}else{step=3*prime4}var b,g,r,j;var pix=0;i=0;while(i<samplepixels){b=(pixels[pix]&255)<<netbiasshift;g=(pixels[pix+1]&255)<<netbiasshift;r=(pixels[pix+2]&255)<<netbiasshift;j=contest(b,g,r);altersingle(alpha,j,b,g,r);if(rad!==0)alterneigh(rad,j,b,g,r);pix+=step;if(pix>=lengthcount)pix-=lengthcount;i++;if(delta===0)delta=1;if(i%delta===0){alpha-=alpha/alphadec;radius-=radius/radiusdec;rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(j=0;j<rad;j++)radpower[j]=alpha*((rad*rad-j*j)*radbias/(rad*rad))}}}function buildColormap(){init();learn();unbiasnet();inxbuild()}this.buildColormap=buildColormap;function getColormap(){var map=[];var index=[];for(var i=0;i<netsize;i++)index[network[i][3]]=i;var k=0;for(var l=0;l<netsize;l++){var j=index[l];map[k++]=network[j][0];map[k++]=network[j][1];map[k++]=network[j][2]}return map}this.getColormap=getColormap;this.lookupRGB=inxsearch}module.exports=NeuQuant},{}],4:[function(require,module,exports){var GIFEncoder,renderFrame;GIFEncoder=require("./GIFEncoder.js");renderFrame=function(frame){var encoder,page,stream,transfer;encoder=new GIFEncoder(frame.width,frame.height);if(frame.index===0){encoder.writeHeader()}else{encoder.firstFrame=false}encoder.setTransparent(frame.transparent);encoder.setRepeat(frame.repeat);encoder.setDelay(frame.delay);encoder.setQuality(frame.quality);encoder.setDither(frame.dither);encoder.setGlobalPalette(frame.globalPalette);encoder.addFrame(frame.data);if(frame.last){encoder.finish()}if(frame.globalPalette===true){frame.globalPalette=encoder.getGlobalPalette()}stream=encoder.stream();frame.data=stream.pages;frame.cursor=stream.cursor;frame.pageSize=stream.constructor.pageSize;if(frame.canTransfer){transfer=function(){var i,len,ref,results;ref=frame.data;results=[];for(i=0,len=ref.length;i<len;i++){page=ref[i];results.push(page.buffer)}return results}();return self.postMessage(frame,transfer)}else{return self.postMessage(frame)}};self.onmessage=function(event){return renderFrame(event.data)}},{"./GIFEncoder.js":1}]},{},[4]);
+//# sourceMappingURL=gif.worker.js.map

sketches/BounceSketch.js

@@ -0,0 +1,124 @@
+export const bounceReasoning = "For 'bounce', I'll implement simple physics with gravity and collision detection. Each particle will have its own velocity and acceleration, creating natural bouncing motions. Adding slight randomness to the bounce heights and timing creates a more organic, playful feel that captures the essence of bouncing.";
+
+export const bounceSketch = `let font;
+let fontSize = 200;
+let word = "bounce";
+let points;
+let particles = [];
+let gravity = 0.5;
+let bounce = -0.7;
+let friction = 0.99;
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  // Find min and max x positions for color gradient
+  let minX = points[0].x;
+  let maxX = points[0].x;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+
+  for (let pt of points) {
+    let normalizedX = map(pt.x, minX, maxX, 0, 1);
+    particles.push(new Particle(pt.x, pt.y, normalizedX));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);
+  background(0);
+  blendMode(SCREEN);
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, normalizedX) {
+    this.pos = createVector(x, y);
+    this.vel = createVector(random(-2, 2), random(-10, -5));
+    this.acc = createVector(0, gravity);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.originalY = y;
+    this.colorValue = this.getColor(normalizedX);
+    this.frameDelay = 30; // Delay for about 30 frames
+  }
+
+  getColor(normalizedX) {
+    let particleColor;
+    if (normalizedX < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    if (this.frameDelay > 0) {
+      this.frameDelay--;
+      return; // Pause movement for the delay duration
+    }
+
+    this.vel.add(this.acc);
+    this.pos.add(this.vel);
+    this.vel.x *= friction;
+
+    if (this.pos.y > height - this.size / 2) {
+      this.pos.y = height - this.size / 2;
+      this.vel.y *= bounce;
+    }
+
+    if (this.pos.x < this.size / 2) {
+      this.pos.x = this.size / 2;
+      this.vel.x *= bounce;
+    } else if (this.pos.x > width - this.size / 2) {
+      this.pos.x = width - this.size / 2;
+      this.vel.x *= bounce;
+    }
+
+    if (this.pos.y > height + 100) {
+      this.pos.y = this.originalY;
+      this.vel.y = random(-10, -5);
+      this.frameDelay = 30; // Reset delay when particle resets
+    }
+  }
+
+  display() {
+    noStroke();
+    fill(this.colorValue);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}`; 

sketches/FluidSketch.js

@@ -0,0 +1,106 @@
+export const fluidReasoning = "To capture the essence of 'fluid', I'll use Perlin noise to create smooth, organic movement of particles. The particles will flow like water or liquid, with each particle following its own noise-based path while maintaining a cohesive, flowing appearance. The blue gradient colors reinforce the liquid feeling, and the screen blend mode creates a glowing effect that enhances the fluid motion.";
+
+export const fluidSketch = `let font;
+let fontSize = 200;
+let word = "fluid";
+let points;
+let particles = [];
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+// Fluid effect parameters
+let noiseScale = 0.015;    // Scale of the Perlin noise - adjust for wave size
+let noiseStrength = 20;    // Intensity of the noise displacement
+let noiseSpeed = 0.002;    // Speed of the noise evolution
+
+// Colors for gradient
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  // Get points for the text centered in canvas
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  // Create particles at each point
+  for (let i = 0; i < points.length; i++) {
+    particles.push(new Particle(points[i].x, points[i].y, i, points.length));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);  // Reset to default blend mode first
+  background(0);     // Clear with black background
+  blendMode(SCREEN); // Then set screen blend mode for particles
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index, totalParticles) {
+    this.pos = createVector(x, y);
+    this.originalPos = createVector(x, y);
+    this.originalX = x;
+    this.originalY = y;
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.colorValue = this.getColor(index, totalParticles);
+  }
+
+  getColor(index, totalParticles) {
+    let normalizedIndex = index / (totalParticles - 1);
+    let particleColor;
+    if (normalizedIndex < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedIndex * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedIndex - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    let noiseValueX = noise((this.originalX + frameCount) * noiseScale, 
+                           this.originalY * noiseScale, 
+                           frameCount * noiseSpeed);
+    let noiseValueY = noise(this.originalX * noiseScale, 
+                           this.originalY * noiseScale, 
+                           frameCount * noiseSpeed + 1000);
+
+    let offsetX = map(noiseValueX, 0, 1, -noiseStrength, noiseStrength);
+    let offsetY = map(noiseValueY, 0, 1, -noiseStrength, noiseStrength);
+
+    this.pos.x = this.originalPos.x + offsetX;
+    this.pos.y = this.originalPos.y + offsetY;
+  }
+
+  display() {
+    noStroke();
+    fill(this.colorValue);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}`; 

sketches/InitialSketch.js

@@ -0,0 +1,95 @@
+export const initialSketch = `
+let font;
+let fontSize = 200;
+let word = "hello";
+let points;
+let particles = [];
+let particleMinSize = 4;
+let particleMaxSize = 8;
+
+// Jump effect parameters
+let jumpAmplitude = 5;
+let jumpSpeed = 0.03;
+let jumpOffsetRange = 2;
+
+// Colors for gradient
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  // Get points for the text centered in canvas
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  // Create particles at each point
+  for (let i = 0; i < points.length; i++) {
+    particles.push(new Particle(points[i].x, points[i].y, i, points.length));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);
+  background(0);
+  blendMode(SCREEN);
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index, totalParticles) {
+    this.pos = createVector(x, y);
+    this.originalPos = createVector(x, y);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.colorValue = this.getColor(index, totalParticles);
+    this.jumpOffset = random(jumpOffsetRange);
+  }
+
+  getColor(index, totalParticles) {
+    let normalizedIndex = index / (totalParticles - 1);
+    let particleColor;
+    if (normalizedIndex < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedIndex * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedIndex - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    // Subtle wave-like jumping motion
+    let jump = sin(frameCount * jumpSpeed + this.jumpOffset) * jumpAmplitude;
+    this.pos.y = this.originalPos.y + jump;
+  }
+
+  display() {
+    noStroke();
+    fill(this.colorValue);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}`; 

sketches/LightSketch.js

@@ -0,0 +1,117 @@
+export const lightReasoning = "For 'light', I'll create particles that emit a soft glow and pulse rhythmically. The particles will be arranged in a pattern that suggests rays or beams of light, with subtle movement and size variations. The color palette will focus on warm, bright tones, and I'll use the screen blend mode to create authentic light-like effects.";
+
+export const lightSketch = `let font;
+let fontSize = 200;
+let word = "light";
+let points;
+let particles = [];
+let lightCycleSpeed = 0.02;
+let particleMinSize = 5;
+let particleMaxSize = 5;
+let shadowBlurAmount = 30;
+let minX, maxX;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+let lightColor;
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+
+  lightColor = color(255, 255, 255);
+
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  minX = width;
+  maxX = 0;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+
+  for (let i = 0; i < points.length; i++) {
+    let pt = points[i];
+    particles.push(new Particle(pt.x, pt.y, i));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);  // Reset to default blend mode first
+  background(0);     // Clear with black background
+  blendMode(SCREEN); // Then set screen blend mode for particles
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index) {
+    this.pos = createVector(x, y);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.lightOffset = index * 0.1;
+  }
+
+  update() {
+    // No position update needed for light animation
+  }
+
+  getBaseColor() {
+    let normalizedX = map(this.pos.x, minX, maxX, 0, 1);
+    let baseParticleColor;
+
+    if (normalizedX < 0.5) {
+      baseParticleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      baseParticleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+    return baseParticleColor;
+  }
+
+  display() {
+    let brightness = sin(frameCount * lightCycleSpeed + this.lightOffset);
+    brightness = map(brightness, -1, 1, 0, 1);
+    brightness = constrain(brightness, 0, 1);
+
+    let baseParticleColor = this.getBaseColor();
+    let particleColor = lerpColor(baseParticleColor, lightColor, brightness);
+
+    noStroke();
+
+    if (brightness > 0.8) {
+      drawingContext.shadowBlur = shadowBlurAmount;
+      drawingContext.shadowColor = color(255);
+      fill(particleColor);
+      ellipse(this.pos.x, this.pos.y, this.size * 1.5, this.size * 1.5);
+      drawingContext.shadowBlur = 0;
+    } else {
+      drawingContext.shadowBlur = 0;
+      fill(particleColor);
+      ellipse(this.pos.x, this.pos.y, this.size, this.size);
+    }
+  }
+}`; 

sketches/LoadingSketch.js

@@ -0,0 +1,87 @@
+export const loadingSketch = `let particles = [];
+let numParticles = 28;
+let circleRadius = 50;
+let rotationSpeed = 0.02;
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+let centerX;
+let centerY;
+
+let freeformAmplitude = 2;
+let freeformSpeed = 0.01;
+
+let color1Hex = "#217BFE";
+let color2Hex = "#078BFE";
+let color3Hex = "#AC87EB";
+let color1;
+let color2;
+let color3;
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  noStroke();
+
+  color1 = color(color1Hex);
+  color2 = color(color2Hex);
+  color3 = color(color3Hex);
+
+  centerX = width / 2;
+  centerY = height / 2;
+
+  for (let i = 0; i < numParticles; i++) {
+    particles.push(new Particle(i, numParticles));
+  }
+}
+
+function draw() {
+  background(0, 50);
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(index, totalParticles) {
+    this.index = index;
+    this.totalParticles = totalParticles;
+    this.radiusOffset = (index / totalParticles) * TWO_PI;
+    this.angle = this.radiusOffset;
+    this.speedVariation = random(0.7, 1.3);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.colorValue = this.getColor(index, totalParticles);
+    this.pos = createVector(0, 0);
+  }
+
+  getColor(index, totalParticles) {
+    let normalizedIndex = index / (totalParticles - 1);
+
+    let particleColor;
+    if (normalizedIndex < 0.5) {
+      particleColor = lerpColor(color1, color2, normalizedIndex * 2);
+    } else {
+      particleColor = lerpColor(color2, color3, (normalizedIndex - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    this.angle += rotationSpeed * this.speedVariation;
+
+    let base_x = centerX + cos(this.angle) * circleRadius;
+    let base_y = centerY + sin(this.angle) * circleRadius;
+
+    let noiseX = map(noise(this.angle * 2 + frameCount * freeformSpeed), 0, 1, -freeformAmplitude, freeformAmplitude);
+    let noiseY = map(noise(this.angle * 2 + frameCount * freeformSpeed + 100), 0, 1, -freeformAmplitude, freeformAmplitude);
+
+    this.pos.set(base_x + noiseX, base_y + noiseY);
+  }
+
+  display() {
+    fill(this.colorValue);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}`; 

sketches/RiseSketch.js

@@ -0,0 +1,142 @@
+export const riseReasoning = "For 'rise', I'll create a staged animation where particles gradually appear, pause briefly, then float upward. This creates a sense of emergence and ascension. Each particle follows this sequence independently with slight timing variations, creating a continuous cycle of rising elements. The fade-in adds a gentle, ethereal quality that matches the upward motion.";
+
+export const riseSketch = `let font;
+let fontSize = 200;
+let word = "rise";
+let points;
+let particles = [];
+let floatSpeed = 4;
+let fadeInSpeed = 10;
+let minWaitTime = 50;
+let maxWaitTime = 200;
+let particleMinSize = 3;
+let particleMaxSize = 7;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  // Get points for the text centered in canvas
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  // Find min and max x positions for color gradient
+  let minX = points[0].x;
+  let maxX = points[0].x;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+  let xRange = maxX - minX;
+
+  for (let pt of points) {
+    particles.push(new Particle(pt.x, pt.y, pt.x, minX, xRange));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);
+  background(0);
+  blendMode(SCREEN);
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, particleX, minX, xRange) {
+    this.pos = createVector(x, y);
+    this.originalPos = createVector(x, y);
+    this.originalX = x;
+    this.originalY = y;
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.floatSpeedVariation = random(0.5, 2.0);
+    this.isFadingIn = true;
+    this.isWaiting = false;
+    this.waitTime = 0;
+    this.particleX = particleX;
+    this.minX = minX;
+    this.xRange = xRange;
+    this.color = this.getColorForPosition();
+  }
+
+  getColorForPosition() {
+    let normalizedX = 0;
+    if (this.xRange > 0) {
+      normalizedX = constrain((this.particleX - this.minX) / this.xRange, 0, 1);
+    }
+
+    let particleColor;
+    if (normalizedX < 0.5) {
+      particleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      particleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+    return particleColor;
+  }
+
+  update() {
+    if (this.isFadingIn) {
+      this.alpha += fadeInSpeed;
+      if (this.alpha >= 255) {
+        this.alpha = 255;
+        this.isFadingIn = false;
+        this.isWaiting = true;
+        this.waitTime = floor(random(minWaitTime, maxWaitTime));
+      }
+    } else if (this.isWaiting) {
+      this.waitTime--;
+      if (this.waitTime <= 0) {
+        this.isWaiting = false;
+      }
+    } else {
+      this.pos.y -= floatSpeed * this.floatSpeedVariation;
+      if (this.pos.y < -this.size) {
+        this.respawn();
+      }
+    }
+  }
+
+  respawn() {
+    this.pos.y = this.originalPos.y;
+    this.pos.x = this.originalPos.x;
+    this.alpha = 0;
+    this.isFadingIn = true;
+    this.isWaiting = false;
+    this.waitTime = 0;
+    this.size = random(particleMinSize, particleMaxSize);
+    this.floatSpeedVariation = random(0.5, 2.0);
+    this.color = this.getColorForPosition();
+  }
+
+  display() {
+    noStroke();
+    fill(red(this.color), green(this.color), blue(this.color), this.alpha);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+}`; 

sketches/TravelSketch.js

@@ -0,0 +1,119 @@
+export const travelReasoning = "To represent 'travel', I'll create particles that move along curved paths, suggesting journey and exploration. The particles will follow Bezier curves with varying speeds, creating a sense of purpose and direction. Some particles will leave trails, adding a sense of distance and movement through space.";
+
+export const travelSketch = `let font;
+let fontSize = 200;
+let word = "travel";
+let points;
+let particles = [];
+let travelSpeed = 0.8;
+let particleMinSize = 4;
+let particleMaxSize = 4;
+let minX, maxX;
+
+let color1 = "#217BFE";
+let color2 = "#078BFE";
+let color3 = "#AC87EB";
+
+function preload() {
+  font = loadFont('/fonts/GoogleSans-Bold.ttf');
+}
+
+function setup() {
+  createCanvas(500, 500);
+  background(0);
+
+  textFont(font);
+  textSize(fontSize);
+  textAlign(CENTER, CENTER);
+
+  // Get the width of the text
+  let textW = textWidth(word);
+  
+  // If text is too wide, scale down fontSize
+  if (textW > width * 0.8) {
+    fontSize = fontSize * (width * 0.8) / textW;
+    textSize(fontSize);
+    textW = textWidth(word);
+  }
+
+  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
+    sampleFactor: 0.1
+  });
+
+  minX = width;
+  maxX = 0;
+  for (let pt of points) {
+    minX = min(minX, pt.x);
+    maxX = max(maxX, pt.x);
+  }
+
+  for (let i = 0; i < points.length; i++) {
+    let pt = points[i];
+    particles.push(new Particle(pt.x, pt.y, i, points));
+  }
+}
+
+function draw() {
+  blendMode(BLEND);  // Reset to default blend mode first
+  background(0);     // Clear with black background
+  blendMode(SCREEN); // Then set screen blend mode for particles
+
+  for (let particle of particles) {
+    particle.update();
+    particle.display();
+  }
+}
+
+class Particle {
+  constructor(x, y, index, allPoints) {
+    this.pos = createVector(x, y);
+    this.size = random(particleMinSize, particleMaxSize);
+    this.alpha = 255;
+    this.pointIndex = index;
+    this.points = allPoints;
+    this.targetPoint = this.getNextTargetPoint();
+  }
+
+  getNextTargetPoint() {
+    if (this.points.length === 0) return this.pos;
+
+    this.pointIndex++;
+    if (this.pointIndex >= this.points.length) {
+      this.pointIndex = 0;
+    }
+    return createVector(this.points[this.pointIndex].x, this.points[this.pointIndex].y);
+  }
+
+  update() {
+    if (!this.targetPoint) return;
+
+    let direction = p5.Vector.sub(this.targetPoint, this.pos);
+    let distance = direction.mag();
+
+    if (distance < 1) {
+      this.targetPoint = this.getNextTargetPoint();
+      if (!this.targetPoint) return;
+      direction = p5.Vector.sub(this.targetPoint, this.pos);
+    }
+
+    direction.normalize();
+    direction.mult(travelSpeed);
+    this.pos.add(direction);
+  }
+
+  display() {
+    noStroke();
+    let normalizedX = map(this.pos.x, minX, maxX, 0, 1, true);
+    let particleColor = this.getColorBlend(normalizedX);
+    fill(particleColor);
+    ellipse(this.pos.x, this.pos.y, this.size, this.size);
+  }
+
+  getColorBlend(normalizedX) {
+    if (normalizedX < 0.5) {
+      return lerpColor(color(color1), color(color2), normalizedX * 2);
+    } else {
+      return lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
+    }
+  }
+}`; 

sketches/index.js

@@ -0,0 +1,39 @@
+// Individual sketch exports
+export { initialSketch } from './InitialSketch';
+export { fluidSketch, fluidReasoning } from './FluidSketch';
+export { riseSketch, riseReasoning } from './RiseSketch';
+export { lightSketch, lightReasoning } from './LightSketch';
+export { travelSketch, travelReasoning } from './TravelSketch';
+export { bounceSketch, bounceReasoning } from './BounceSketch';
+export { loadingSketch } from './LoadingSketch';
+
+// Import all sketches for the examples object
+import { fluidSketch } from './FluidSketch';
+import { riseSketch } from './RiseSketch';
+import { lightSketch } from './LightSketch';
+import { travelSketch } from './TravelSketch';
+import { bounceSketch } from './BounceSketch';
+
+// Import all reasonings for the exampleReasonings object
+import { fluidReasoning } from './FluidSketch';
+import { riseReasoning } from './RiseSketch';
+import { lightReasoning } from './LightSketch';
+import { travelReasoning } from './TravelSketch';
+import { bounceReasoning } from './BounceSketch';
+
+// Export collections
+export const examples = {
+  fluid: fluidSketch,
+  rise: riseSketch,
+  light: lightSketch,
+  travel: travelSketch,
+  bounce: bounceSketch
+};
+
+export const exampleReasonings = {
+  fluid: fluidReasoning,
+  rise: riseReasoning,
+  light: lightReasoning,
+  travel: travelReasoning,
+  bounce: bounceReasoning
+}; 

styles/globals.css

@@ -0,0 +1,106 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply antialiased;
+  }
+  
+  body {
+    @apply bg-black text-white;
+  }
+}
+
+@layer components {
+  .example-button {
+    @apply px-6 py-2.5 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition-colors duration-200;
+  }
+
+  .input-field {
+    @apply flex-1 px-6 py-4 bg-zinc-900 border border-zinc-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-zinc-700 transition-colors;
+  }
+
+  .generate-button {
+    @apply px-8 py-4 rounded-xl font-medium transition-colors duration-200;
+  }
+
+  .generate-button-enabled {
+    @apply bg-white text-black hover:bg-gray-100;
+  }
+
+  .generate-button-disabled {
+    @apply bg-zinc-800 text-gray-400 cursor-not-allowed;
+  }
+
+  .preview-container {
+    @apply w-full aspect-square bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center justify-center overflow-hidden;
+  }
+
+  .canvas-container {
+    @apply w-[600px] h-[600px] relative;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  @apply w-2 h-2;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-zinc-900;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-zinc-700 rounded-sm hover:bg-zinc-600;
+}
+
+/* Test class to verify CSS is loading */
+.test-style {
+  @apply bg-red-500;
+}
+
+@font-face {
+  font-family: 'Google Sans Display';
+  src: url('/fonts/GoogleSansDisplay-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Google Sans Mono';
+  src: url('/fonts/GoogleSansMono-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+:root {
+  --font-google-sans-display: 'Google Sans Display', system-ui, -apple-system;
+  --font-google-sans-mono: 'Google Sans Mono', monospace;
+  --foreground: #ffffff;
+  --background: #000000;
+}
+
+.code-panel {
+  font-family: var(--font-google-sans-mono);
+}
+
+.output-panel {
+  display: flex;
+  width: 414px;
+  height: 779px;
+  padding: 23px 25px;
+  align-items: flex-start;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 26px;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+input::placeholder {
+  color: #666;
+}
+
+button:focus {
+  outline: none;
+}

tailwind.config.js

@@ -0,0 +1,60 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: '1rem',
+      },
+      colors: {
+        black: '#000000',
+        white: '#FFFFFF',
+        zinc: {
+          700: '#3f3f46',
+          800: '#27272a',
+          900: '#18181b',
+        },
+      },
+      fontSize: {
+        sm: ['14px', '20px'],
+        base: ['16px', '24px'],
+        lg: ['20px', '28px'],
+      },
+      maxWidth: {
+        '1000': '1000px',
+        '2xl': '42rem',
+      },
+      width: {
+        '414': '414px',
+        '564': '564px',
+      },
+      height: {
+        '538': '538px',
+      },
+      borderRadius: {
+        '15': '15px',
+        '26': '26px',
+        'xl': '1rem',
+        '2xl': '1.5rem',
+      },
+      padding: {
+        '23': '23px',
+        '25': '25px',
+      },
+      spacing: {
+        '15': '15px',
+        '23': '23px',
+        '25': '25px',
+        '50': '50px',
+      },
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+      },
+    },
+  },
+  plugins: [],
+}