Initial commit with Git LFS

.dockerignore

@@ -0,0 +1,9 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+.env
+.env.local 

.gcloudignore

@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Node.js dependencies:
+node_modules/

.gitattributes

@@ -0,0 +1,38 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+.env.local
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# app yaml
+*.yaml
+app.yaml
+
+# large file
+service-future-job-2/public/genpalsv1.mov
+*.mov
+

CONTRIBUTING.md

@@ -0,0 +1,20 @@
+# How to contribute
+
+We'd love to accept your patches and contributions to this project.
+
+## Before you begin
+
+Sign our Contributor License Agreement
+Contributions to this project must be accompanied by a Contributor License Agreement (CLA). You (or your employer) retain the copyright to your contribution; this simply gives us permission to use and redistribute your contributions as part of the project.
+
+If you or your current employer have already signed the Google CLA (even if it was for a different project), you probably don't need to do it again.
+
+Visit https://cla.developers.google.com/ to see your current agreements or to sign a new one.
+
+### Review our community guidelines
+This project follows Google's Open Source Community Guidelines.
+
+## Contribution process
+
+###Code reviews
+All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose. Consult GitHub Help for more information on using pull requests.

Dockerfile

@@ -0,0 +1,33 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Set up a new user named "user" with user ID 1000
+RUN deluser --remove-home node \
+    && addgroup -S user -g 1000 \
+    && adduser -S -G user -u 1000 user \
+    && chown -R user:user /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies with legacy peer deps flag
+RUN chown -R user:user /app && \
+    npm install --legacy-peer-deps
+
+# Switch to user after npm install
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Copy rest of the application with correct ownership
+COPY --chown=user . .
+
+# Build the Next.js application
+RUN npm run build
+
+# Expose the port the app runs on (Hugging Face Spaces requires port 7860)
+EXPOSE 7860
+
+# Start the application on port 7860
+CMD ["npm", "run", "start", "--", "-p", "7860"] 

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,87 @@
+# Image to Code Generator 🎨
+
+![image-to-code-sketch](./readme/smoke.gif)
+
+Get started with p5js sketches using Gemini 2.0 Flash. Upload any photo, and this web app uses Gemini 2.0 Flash to generate a p5.js sketch that captures the essence of the image in an interactive way.
+
+## Getting Started
+
+### 1. Clone this repository and install dependencies:
+
+```
+git clone https://github.com/googlecreativelab/gemini-demos/
+cd image-to-code-sketch
+npm install
+```
+
+### 2. Create a .env.local file with your AI Studio API key:
+
+Get your API key from [Google AI Studio](https://aistudio.google.com/apikey).
+
+```
+GEMINI_API_KEY=your_api_key_here
+```
+
+### 3. Start the development server:
+
+```
+npm run dev
+```
+
+Open http://localhost:3000 and start uploading images!
+
+## Prompt Transparency
+
+The prompt to transform images into p5js sketches can be found in `pages/index.js`.
+
+```
+You are a creative coding expert who turns images into clever code sketches using p5js. A user will upload an image and you will generate a interactive p5js sketch that represents the image. The code sketch always has some sort of interactive element that connects to the nature of the object in the real world.
+
+## EXAMPLES
+
+Here are some examples of what I mean by how the type of image could be turned into a clever creative coding sketch to capture the essence of the image.
+- A photo of birds --> a boids flocking algorithm sketch where the boids follow your mouse 
+- A photo of a tree --> a recursive fractal tree that grows as you move your mouse up and down
+- A photo of a pond --> a sketch that has a ripple animation on mouse click
+- A photo of a wristwatch --> beautiful functioning clock that accesses system time and displays it like the wristwatch
+- A photo of a lamp --> a sketch of the lamp, but when you click the screen the lamp turns on and off
+- A photo of a zipper --> a sketch representing the shapes of the zipper, and when you move your mouse up and down the zipper opens and closes like a real zipper
+
+## PROCESS
+
+To achieve creating this sketch, you reflect and meditate on the nature of the object BEFORE picking an algorithmic approach to represent the image. You are an agent that is thoughtful, clever, delightful, and playful.
+
+Before you start, think about the image and the best way to represent it in p5js.
+
+1. Describe the behavioral properties of the image. List some ways it behaves in the real world or some patterns it exhibits. Describe the colors and vibe of the image as well. 
+
+2. Given the behavorial properties of the image, identify a common creative coding algorithm that can be paired up to this image to make a delightful p5js sketch.
+
+3. State the bounding boxes of the important parts of the composition of the photo. We will need to use these bounding boxes to make sure our composition of our sketch resembles the composition of the photo uploaded. Our sketch's composition needs to resemble the composition of the uploaded photo.
+
+4. Implement a algorithm in p5js, using the properties of the image described earlier. Use either mouseMoved() or mouseClicked() to make it interactive. Generate a SINGLE, COMPLETE code snippet. We parse out the response you generate, so we should have only ONE code snippet that incorporates all of the information from steps 1 (behavioral description), 2 (creative coding algorithm to bring this to life), 3 (bounding boxes to preserve compositional integrity).
+
+## EXECUTION
+
+Complete all of these steps. When you write your code, be sure to leave clear comments to describe the different parts of the code and what you are doing. 
+
+Do not EVER try to load in external images or any other libraries. Everything must be self contained in the one file and code snippet.
+
+And don't be too verbose.
+```
+
+## Credits
+
+Code by [Trudy Painter](https://www.trudy.computer/). Design by [Jose Guizar](https://joseguizar.com/).
+
+## Contributing 🤝
+
+Contributions are welcome! See the `CONTRIBUTING.md` file for more information.
+
+## Disclaimer
+
+This is an experiment showcasing Gemini 2.0's capabilities, not an official Google product. We'll do our best to support and maintain this experiment but your mileage may vary. We encourage open sourcing projects as a way of learning from each other. Please respect our and other creators' rights, including copyright and trademark rights when present, when sharing these works and creating derivative work. If you want more info on Google's policy, you can find that [here](https://www.google.com/permissions/).
+
+## License
+
+Licensed under the Apache-2.0 license.

components/CodePreview.js

@@ -0,0 +1,242 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { Code2, Play, Copy, Check, MessageCircle } from 'lucide-react';
+import Editor from '@monaco-editor/react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import ToggleButton from './ToggleButton';
+
+const CodePreview = ({ output, onCodeChange, fullResponse }) => {
+  const [showCode, setShowCode] = useState(false);
+  const [showReasoning, setShowReasoning] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(output.code);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy code:', err);
+    }
+  };
+
+  const renderSketch = (code) => {
+    // Make sure we're working with a string
+    const codeString = typeof code === 'string' ? code : code.toString();
+    
+    const wrappedCode = codeString.includes('function setup()') ? codeString : `
+      function setup() {
+        createCanvas(500, 500);
+        ${codeString}
+      }
+
+      function draw() {
+        // Add default draw function if not present
+        if (typeof window.draw !== 'function') {
+          window.draw = function() {};
+        }
+      }
+    `;
+
+    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.4.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;
+          }
+          canvas {
+            max-width: 100% !important;
+            height: auto !important;
+          }
+        </style>
+      </head>
+      <body>
+        <script>
+          try {
+            ${wrappedCode}
+            // Immediately call setup if it hasn't been called
+            if (typeof window.setup === 'function') {
+              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>
+    `;
+
+    return (
+      <div className="relative w-full h-[500px] bg-gray-50 rounded-lg overflow-hidden">
+        <iframe
+          srcDoc={formattedCodeResponse}
+          title="p5.js Sketch"
+          width="100%"
+          height="100%"
+          style={{ border: "none" }}
+          className="absolute inset-0"
+        />
+      </div>
+    );
+  };
+
+  // Make sure we're passing the actual code string to renderSketch
+  const sketchCode = output?.code || '';
+
+  return (
+    <div className="mb-4 p-6 rounded-3xl bg-gray-100">
+      <div className="mb-4">
+        {showCode ? (
+          <div className="w-full h-[500px] rounded-lg overflow-hidden border">
+            <Editor
+              height="500px"
+              defaultLanguage="javascript"
+              value={sketchCode}
+              onChange={(value) => onCodeChange(output.id, value)}
+              theme="light"
+              options={{
+                minimap: { enabled: false },
+                fontSize: 12,
+                lineNumbers: 'off',
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                tabSize: 2,
+                wordWrap: 'on',
+                padding: { top: 8, bottom: 8 }
+              }}
+            />
+          </div>
+        ) : showReasoning ? (
+          <div className="w-full h-[500px] rounded-lg overflow-y-auto border p-4 prose prose-xs max-w-none bg-white">
+            <ReactMarkdown 
+              remarkPlugins={[remarkGfm]}
+              className="text-xs text-gray-700"
+              components={{
+                code: ({node, inline, className, children, ...props}) => (
+                  <code className={`${className} ${inline ? 'text-[0.7rem] bg-slate-50 text-slate-900 px-1.5 py-0.5 rounded border border-slate-200' : ''}`} {...props}>
+                    {children}
+                  </code>
+                ),
+                pre: ({node, children, ...props}) => (
+                  <pre className="text-[0.7rem] bg-slate-50 text-slate-900 p-3 rounded-md overflow-x-auto border border-slate-200" {...props}>
+                    {children}
+                  </pre>
+                ),
+                p: ({node, children}) => (
+                  <p className="text-xs mb-2 text-gray-700">{children}</p>
+                ),
+                h1: ({node, children}) => (
+                  <h1 className="text-sm font-bold mb-2 text-gray-900">{children}</h1>
+                ),
+                h2: ({node, children}) => (
+                  <h2 className="text-xs font-bold mb-2 text-gray-900">{children}</h2>
+                ),
+                h3: ({node, children}) => (
+                  <h3 className="text-xs font-semibold mb-1 text-gray-900">{children}</h3>
+                ),
+                ul: ({node, children}) => (
+                  <ul className="text-xs list-disc pl-4 mb-2 text-gray-700">{children}</ul>
+                ),
+                ol: ({node, children}) => (
+                  <ol className="text-xs list-decimal pl-4 mb-2 text-gray-700">{children}</ol>
+                ),
+                li: ({node, children}) => (
+                  <li className="text-xs mb-1 text-gray-700">{children}</li>
+                )
+              }}
+            >
+              {fullResponse}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          renderSketch(sketchCode)
+        )}
+      </div>
+      
+      <div className="flex justify-between items-center mt-2">
+        <div className="inline-flex rounded-full bg-gray-200 gap-1">
+          <ToggleButton
+            icon={Play}
+            label="Preview"
+            isSelected={!showCode && !showReasoning}
+            onClick={() => {
+              setShowCode(false);
+              setShowReasoning(false);
+            }}
+          />
+          <ToggleButton
+            icon={MessageCircle}
+            label="Reasoning"
+            isSelected={showReasoning}
+            onClick={() => {
+              setShowCode(false);
+              setShowReasoning(true);
+            }}
+          />
+          <ToggleButton
+            icon={Code2}
+            label="Code"
+            isSelected={showCode}
+            onClick={() => {
+              setShowCode(true);
+              setShowReasoning(false);
+            }}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className={`px-3.5 py-2.5 rounded-full transition-colors inline-flex text-sm  border border-gray-300 
+            items-center gap-1 ${
+            isCopied
+              ? "bg-gray-500 text-white"
+              : "bg-transparent text-gray-700 hover:bg-gray-100"
+          }`}
+        >
+          {isCopied ? (
+            <>
+              <Check size={14} />
+              Copied!
+            </>
+          ) : (
+            <>
+              <Copy size={14} />
+              Copy Code
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CodePreview; 

components/Header.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Github, Info } 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">Image 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/image-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/ToggleButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ToggleButton = ({ icon: Icon, label, isSelected, onClick }) => {
+  const baseStyles = "inline-flex items-center gap-1 px-3.5 py-2.5 text-sm rounded-full transition-all duration-200";
+  const selectedStyles = "bg-black text-white";
+  const unselectedStyles = "bg-gray-200 text-gray-700";
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`${baseStyles} ${isSelected ? selectedStyles : unselectedStyles}`}
+    >
+      {Icon && <Icon size={14} />}
+      {label}
+    </button>
+  );
+};
+
+export default ToggleButton; 

jsconfig.json

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

next.config.mjs

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Override the default webpack configuration
+  webpack: (config) => {
+      // See https://webpack.js.org/configuration/resolve/#resolvealias
+      config.resolve.alias = {
+          ...config.resolve.alias,
+          "sharp$": false,
+          "onnxruntime-node$": false,
+      }
+      return config;
+  },
+}
+
+export default nextConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "service-image-code-2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.21.0",
+    "@monaco-editor/react": "^4.6.0",
+    "gh-pages": "^6.3.0",
+    "lucide-react": "^0.469.0",
+    "next": "15.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.5",
+    "react-markdown": "^9.0.3",
+    "remark-gfm": "^4.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

pages/_app.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import "@/styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

pages/_document.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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/hello.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+const MODEL_NAME = "gemini-2.0-flash-exp";
+
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb',
+    },
+  },
+};
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { imageBase64, prompt, userInput } = req.body;
+
+    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
+    const model = genAI.getGenerativeModel({ model: MODEL_NAME });
+
+    const image = {
+      inlineData: {
+        data: imageBase64.split(",")[1],
+        mimeType: "image/jpeg",
+      },
+    };
+
+    const finalPrompt = userInput.trim()
+      ? `${prompt}\n\nUser input: ${userInput}`
+      : prompt;
+
+    const result = await model.generateContent([finalPrompt, image]);
+    const response = result.response.text();
+
+    const regex = /```(?:javascript|js)?\s*([\s\S]*?)```/g;
+    const match = regex.exec(response);
+    const extractedCode = match ? match[1].trim() : response;
+
+    res.status(200).json({
+      fullResponse: response,
+      code: extractedCode
+    });
+  } catch (error) {
+    console.error('Error:', error);
+    res.status(500).json({ error: 'Failed to generate code' });
+  }
+}

pages/index.js

@@ -0,0 +1,439 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useCallback, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { ChevronDown, Image, Upload, Settings, Send, History, ArrowRight, Pen, Layers } from "lucide-react";
+import Head from "next/head";
+import CodePreview from "../components/CodePreview";
+import Header from '../components/Header';
+
+const SAMPLE_IMAGES = [
+  'beeripple.jpeg',
+  'bubbles.jpeg', 
+  'clock.png',
+  'flower.jpeg',
+  'garage.jpeg',
+  'sconce.jpeg',
+  'steam.jpeg',
+  'tree.png',
+  "birds.jpeg",
+  "bubblemachine.png",
+];
+
+// Helper function to generate code from image
+async function generateCodeFromImage(imageBase64, prompt, userInput) {
+  const response = await fetch('/api/hello', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      imageBase64,
+      prompt,
+      userInput
+    })
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to generate code');
+  }
+
+  return response.json();
+}
+
+export default function Home() {
+  const [imageBase64, setImageBase64] = useState("");
+  const [outputs, setOutputs] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [hasStartedGenerating, setHasStartedGenerating] = useState(false);
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [concurrentRequests, setConcurrentRequests] = useState(5);
+  const [showPrompt, setShowPrompt] = useState(false);
+  const [prompt, setPrompt] = useState("");
+
+  // Load prompt from localStorage on initial render
+  useEffect(() => {
+    const savedPrompt = localStorage.getItem('savedPrompt');
+    if (savedPrompt) {
+      setPrompt(savedPrompt);
+    } else {
+      const defaultPrompt = `You are a creative coding expert who turns images into 
+      clever code sketches using p5js. A user will upload an image and you will 
+      generate a interactive p5js sketch that represents the image. 
+      The code sketch always has some sort of interactive element that 
+      connects to the nature of the object in the real world.
+
+      ## EXAMPLES
+
+      Here are some examples of what I mean by how the type of image could 
+      be turned into a clever creative coding sketch to capture the essence of the image.
+      - A photo of birds --> a boids flocking algorithm sketch where the boids follow your mouse 
+      - A photo of a tree --> a recursive fractal tree that grows as you move your mouse up and down
+      - A photo of a pond --> a sketch that has a ripple animation on mouse click
+      - A photo of a wristwatch --> beautiful functioning clock that 
+      accesses system time and displays it like the wristwatch
+      - A photo of a lamp --> a sketch of the lamp, but when you click 
+      the screen the lamp turns on and off
+      - A photo of a zipper --> a sketch representing the shapes of the zipper, 
+      and when you move your mouse up and down the zipper opens and closes like a real zipper
+
+      ## PROCESS
+
+      To achieve creating this sketch, you reflect and 
+      meditate on the nature of the object BEFORE picking an algorithmic 
+      approach to represent the image. You are an agent that is thoughtful, 
+      clever, delightful, and playful.
+
+      Before you start, think about the image and the best way to represent it in p5js.
+      1. Describe the behavioral properties of the image. List some ways it
+       behaves in the real world or some patterns it exhibits. Describe the 
+       colors and vibe of the image as well. 
+      2. Given the behavorial properties of the image, identify a common creative 
+      coding algorithm that can be paired up to this image to make a delightful p5js sketch.
+      3. State the bounding boxes of the important parts of the composition 
+      of the photo. We will need to use these bounding boxes to make sure our 
+      composition of our sketch resembles the composition of the photo uploaded. 
+      Our sketch's composition needs to resemble the composition of the uploaded photo.
+      4. Implement a algorithm in p5js, using the properties of the image described 
+      earlier. Use either mouseMoved() or mouseClicked() to make it interactive. 
+      Generate a SINGLE, COMPLETE code snippet. We parse out the response you generate, 
+      so we should have only ONE code snippet that incorporates all of the information 
+      from steps 1 (behavioral description), 2 (creative coding algorithm to bring this to life), 
+      3 (bounding boxes to preserve compositional integrity).
+
+      ## EXECUTION
+
+      Complete all of these steps. When you write your code, be sure to leave clear 
+      comments to describe the different parts of the code and what you are doing. 
+      Do not EVER try to load in external images or any other libraries. 
+      Everything must be self contained in the one file and code snippet.
+      And don't be too verbose.`
+      
+      
+      
+      .trim();
+      setPrompt(defaultPrompt);
+      localStorage.setItem('savedPrompt', defaultPrompt);
+    }
+  }, []);
+
+  // Save prompt to localStorage whenever it changes
+  useEffect(() => {
+    if (prompt) {
+      localStorage.setItem('savedPrompt', prompt);
+    }
+  }, [prompt]);
+
+  const [showSamples, setShowSamples] = useState(false);
+  const [selectedSample, setSelectedSample] = useState(null);
+  const [userInput, setUserInput] = useState("");
+  const [imageDetails, setImageDetails] = useState(null);
+
+  const onDrop = useCallback((acceptedFiles) => {
+    const file = acceptedFiles[0];
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      const img = document.createElement("img");
+      img.src = event.target.result;
+
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        const scaleFactor = 512 / img.width;
+        canvas.width = 512;
+        canvas.height = img.height * scaleFactor;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        setImageBase64(canvas.toDataURL());
+        setImageDetails({
+          name: file.name,
+          size: `${(file.size / 1024).toFixed(2)}kB`,
+          type: file.type
+        });
+      };
+    };
+
+    reader.readAsDataURL(file);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: "image/*",
+  });
+
+  const generateCode = async () => {
+    if (!imageBase64) return;
+
+    setLoading(true);
+    setHasStartedGenerating(true);
+    setOutputs([]);
+    try {
+      const requests = Array(concurrentRequests)
+        .fill()
+        .map(() => generateCodeFromImage(imageBase64, prompt, userInput));
+      
+      const results = await Promise.all(requests);
+      setOutputs(results.map((result, index) => ({
+        id: index + 1,
+        code: result.code,
+        fullResponse: result.fullResponse
+      })));
+    } catch (error) {
+      console.error("Error generating code:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderSketch = (code) => {
+    const formattedCodeResponse = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=512, initial-scale=1.0">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+        <title>p5.js Sketch</title>
+        <style> body {padding: 0; margin: 0;} </style>
+      </head>
+      <body>
+      <script>
+        window.onerror = function(message, source, lineno, colno, error) {
+          document.body.innerHTML += '<h3>🔴Error:</h3><pre>' + message + '</pre>';
+        };
+        ${code}
+      </script>
+      </body>
+      </html>
+    `;
+
+    return (
+      <iframe
+        srcDoc={formattedCodeResponse}
+        title="p5.js Sketch"
+        width="100%"
+        height="300"
+        style={{ border: "none" }}
+      />
+    );
+  };
+
+
+
+  const handleCodeChange = (id, newCode) => {
+    setOutputs((prevOutputs) =>
+      prevOutputs.map((output) =>
+        output.id === id ? { ...output, code: newCode } : output
+      )
+    );
+  };
+
+  const handleSampleSelect = async (imageName) => {
+    setSelectedSample(imageName);
+    try {
+      const response = await fetch(`/samples/${imageName}`);
+      const blob = await response.blob();
+      const reader = new FileReader();
+
+      reader.onload = (event) => {
+        const img = document.createElement("img");
+        img.src = event.target.result;
+
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const scaleFactor = 512 / img.width;
+          canvas.width = 512;
+          canvas.height = img.height * scaleFactor;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          setImageBase64(canvas.toDataURL());
+        };
+      };
+
+      reader.readAsDataURL(blob);
+    } catch (error) {
+      console.error('Error loading sample image:', error);
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Image to Code</title>
+      </Head>
+      <div className="h-screen max-h-screen bg-white flex items-center justify-center overflow-y-hidden tracking-[-0.005em]">
+        <Header />
+
+        <div className="w-full h-full max-h-full overflow-hidden bg-white">
+          <div className={`flex flex-col md:flex-row gap-0 max-w-6xl mx-auto py-0 h-full transition-all duration-500 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
+            <div className={`flex-1 h-full overflow-y-auto py-20 px-3 transition-all duration-500 ${!hasStartedGenerating ? 'md:max-w-2xl mx-auto' : ''}`}>
+              <section className="flex flex-col bg-gray-100 rounded-2xl p-4">
+                <div
+                  {...getRootProps()}
+                  className={`border-2 border-dashed bg-gray-100 rounded-2xl m-4 min-h-96 h-fit flex 
+                flex-col items-center justify-center cursor-pointer hover:border-gray-400 transition-colors ${imageBase64 ? 'border-none' : 'border-gray-300'}`}
+                >
+                  <input {...getInputProps()} />
+                  {imageBase64 ? (
+                    <img
+                      src={imageBase64}
+                      alt="Uploaded"
+                      className="max-h-full max-w-full object-contain rounded-2xl"
+                    />
+                  ) : (
+                    <>
+                      <Upload className="w-12 h-12 text-gray-400 mb-4" />
+                      <p className="text-gray-400">
+                        {isDragActive
+                          ? "Drop the image here"
+                          : "Drag & drop an image here, or click to select one"}
+                      </p>
+                    </>
+                  )}
+                </div>
+                <div className="max-w-xl mb-4">
+                  <div className="flex overflow-x-auto gap-2 py-1 mx-4">
+                    {SAMPLE_IMAGES.map((image) => (
+                      <button
+                        key={image}
+                        type="button"
+                        onClick={() => handleSampleSelect(image)}
+                        className={`flex-shrink-0 w-14 h-14 bg-white rounded-lg hover:scale-110 transition-all ${selectedSample === image ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'
+                          }`}
+                      >
+                        <img
+                          src={`/samples/${image}`}
+                          alt={image}
+                          className="w-full h-full object-cover rounded-lg"
+                        />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </section>
+              <section className="mt-4 space-y-4 bg-gray-100 rounded-2xl p-4">
+                <div>
+                  <button
+                    type="button"
+                    onClick={() => setShowSamples(!showSamples)}
+                    className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                  >
+                    {/* <Settings size={16} /> */}
+                    <span className="font-bold">Advanced</span>
+                    <ChevronDown
+                      size={16}
+                      className={`transform transition-transform ${showSamples ? 'rotate-180' : ''
+                        }`}
+                    />
+                  </button>
+
+                  {showSamples && (
+                    <div className="my-2 rounded-lg">
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Layers size={14} className="text-gray-600" />
+                            <label htmlFor="concurrent-requests" className="text-sm font-medium text-gray-700">
+                              Concurrent Requests: {concurrentRequests}
+                            </label>
+                          </div>
+                          <input
+                            id="concurrent-requests"
+                            type="range"
+                            min="1"
+                            max="10"
+                            value={concurrentRequests}
+                            onChange={(e) => setConcurrentRequests(Number(e.target.value))}
+                            className="w-1/2"
+                          />
+                        </div>
+
+                        <button
+                          type="button"
+                          onClick={() => setShowPrompt(!showPrompt)}
+                          className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                        >
+                          <Pen size={14} />
+                          <span>Edit System Prompt</span>
+                          <ChevronDown
+                            size={16}
+                            className={`transform transition-transform ${showPrompt ? 'rotate-180' : ''}`}
+                          />
+                        </button>
+
+                        {showPrompt && (
+                          <textarea
+                            value={prompt}
+                            onChange={(e) => setPrompt(e.target.value)}
+                            className="w-full h-64 p-2 border rounded-lg font-mono text-sm mt-2"
+                            placeholder="Enter your prompt here..."
+                          />
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+              </section>
+              <section className="mt-4">
+                <button
+                  type="button"
+                  onClick={generateCode}
+                  className="px-4 py-4 bg-gray-800 text-white rounded-2xl mb-8
+                  hover:bg-gray-900  transition-colors w-full disabled:bg-gray-300 disabled:cursor-not-allowed
+                  flex items-center justify-center gap-2 font-bold"
+                  disabled={!imageBase64 || loading}
+                >
+                  {/* <Send size={16} className={loading ? 'opacity-50' : ''} /> */}
+                  <span>{loading ? "Generating..." : `Generate ${concurrentRequests} Code Snippet${concurrentRequests > 1 ? 's' : ''}`}</span>
+
+                </button>
+              </section>
+            </div>
+
+            {hasStartedGenerating && (
+              <div className="flex-1 h-full overflow-y-scroll py-20 px-3 animate-slide-in">
+                {loading ? (
+                  // Loading skeletons for code previews
+                  Array(concurrentRequests).fill().map((_, index) => (
+                    <div key={`skeleton-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
+                      <div className="w-full h-[500px] bg-gray-200 rounded-lg mb-4" />
+                      <div className="flex justify-between items-center">
+                        <div className="h-10 w-32 bg-gray-200 rounded-full" />
+                        <div className="h-10 w-24 bg-gray-200 rounded-full" />
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  outputs.map((output) => (
+                    <CodePreview
+                      key={output.id}
+                      output={output}
+                      onCodeChange={handleCodeChange}
+                      fullResponse={output.fullResponse}
+                    />
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+

postcss.config.mjs

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

styles/globals.css

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

tailwind.config.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      keyframes: {
+        'fade-in-out': {
+          '0%': { opacity: '0', transform: 'translateY(-10px)' },
+          '10%': { opacity: '1', transform: 'translateY(0)' },
+          '90%': { opacity: '1' },
+          '100%': { opacity: '0' }
+        },
+        'slide-in': {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' }
+        }
+      },
+      animation: {
+        'fade-in-out': 'fade-in-out 5s ease-in-out',
+        'slide-in': 'slide-in 0.5s ease-out'
+      },
+      typography: {
+        xs: {
+          css: {
+            fontSize: '0.75rem',
+            lineHeight: '1.2',
+            color: '#374151',
+            p: {
+              marginBottom: '0.5rem',
+            },
+            h1: {
+              fontSize: '1rem',
+              marginBottom: '0.75rem',
+            },
+            h2: {
+              fontSize: '0.875rem',
+              marginBottom: '0.5rem',
+            },
+            h3: {
+              fontSize: '0.75rem',
+              marginBottom: '0.5rem',
+            },
+            'code': {
+              fontSize: '0.7rem !important',
+              padding: '0.1rem 0.2rem',
+              backgroundColor: '#f8fafc',
+              color: '#0f172a !important',
+              borderRadius: '0.25rem',
+              border: '1px solid #e2e8f0',
+            },
+            'pre': {
+              fontSize: '0.7rem !important',
+              padding: '0.75rem',
+              marginBottom: '0.75rem',
+              backgroundColor: '#f8fafc',
+              color: '#0f172a',
+              border: '1px solid #e2e8f0',
+              code: {
+                fontSize: '0.7rem !important',
+                backgroundColor: 'transparent',
+                padding: 0,
+                border: 'none',
+                color: '#0f172a',
+              }
+            },
+            'ul': {
+              marginBottom: '0.75rem',
+            },
+            'ol': {
+              marginBottom: '0.75rem',
+            },
+            'li': {
+              marginBottom: '0.25rem',
+            }
+          }
+        }
+      }
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+} 

tailwind.config.mjs

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};