Initial commit

.env.example

@@ -0,0 +1,2 @@
+# Find your Replicate API token at https://www.replicate.com/account
+REPLICATE_API_TOKEN=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -0,0 +1,7 @@
+Copyright 2022 Zeke Sikelianos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,34 @@
+# 🖍️ Scribble Diffusion
+
+Try it out at [scribblediffusion.com](https://scribblediffusion.com)
+
+## How it works
+
+This app is powered by:
+
+🚀 [Replicate](https://replicate.com/?utm_source=project&utm_campaign=scribblediffusion), a platform for running machine learning models in the cloud.
+
+🎨 [InstructPix2Pix](https://replicate.com/timothybrooks/instruct-pix2pix?utm_source=project&utm_campaign=scribblediffusion), an open-source machine learning model that generates images from text.
+
+▲ [Vercel](https://vercel.com/), a platform for running web apps.
+
+⚡️ Next.js [server-side API routes](pages/api), for talking to the Replicate API.
+
+👀 Next.js React components, for the browser UI.
+
+🍃 [Tailwind CSS](https://tailwindcss.com/), for styles.
+
+
+## Development
+
+1. Install a recent version of [Node.js](https://nodejs.org/)
+1. Copy your [Replicate API token](https://replicate.com/account?utm_source=project&utm_campaign=scribblediffusion) and set it in your environment:
+    ```
+    echo "REPLICATE_API_TOKEN=<your-token-here>" > .env.local
+    ````
+1. Install dependencies and run the server:
+    ```
+    npm install
+    npm run dev
+    ```
+1. Open [localhost:3000](http://localhost:3000) in your browser. That's it!

components/footer.js

@@ -0,0 +1,68 @@
+import {
+  Code as CodeIcon,
+  Download as DownloadIcon,
+  Info as InfoIcon,
+  XCircle as StartOverIcon,
+} from "lucide-react";
+import Link from "next/link";
+
+export default function Footer({ events, startOver }) {
+  return (
+    <footer className="w-full my-8">
+      <div className="text-center">
+        <Link href="/about" className="lil-button">
+            <InfoIcon className="icon" />
+            What is this?
+        </Link>
+
+        {events.length > 1 && (
+          <button className="lil-button" onClick={startOver}>
+            <StartOverIcon className="icon" />
+            Start over
+          </button>
+        )}
+
+        {events.length > 2 && (
+          <Link href={events.findLast((ev) => ev.image).image} className="lil-button" target="_blank" rel="noopener noreferrer">
+              <DownloadIcon className="icon" />
+              Download image
+          </Link>
+        )}
+
+        <Link href="https://github.com/replicate/instruct-pix2pix-demo" className="lil-button" target="_blank" rel="noopener noreferrer">
+
+            <CodeIcon className="icon" />
+            Fork repo
+        </Link>
+      </div>
+
+      <div className="text-center lil-text mt-8">
+      <div className="inline-block py-2 px-4 border border-yellow-200 rounded-lg bg-[#fef6aa]">
+      🤔 Are you a developer and want to learn how to build this? Check out the{" "}
+        <Link href="https://github.com/replicate/paint-with-words#readme" target="_blank">
+        README
+        </Link>.
+      </div>
+      </div>
+
+      <div className="text-center lil-text mt-8">
+        Powered by{" "}
+        <Link href="https://www.timothybrooks.com/instruct-pix2pix/" target="_blank">
+          InstructPix2Pix
+        </Link>
+        ,{" "}
+        <Link href="https://replicate.com/timothybrooks/instruct-pix2pix?utm_source=project&utm_campaign=scribblediffusion" target="_blank">
+          Replicate
+        </Link>
+        ,{" "}
+        <Link href="https://vercel.com/templates/ai" target="_blank">
+          Vercel
+        </Link>
+        , and{" "}
+        <Link href="https://github.com/replicate/instruct-pix2pix-demo" target="_blank">
+          GitHub
+        </Link>
+      </div>
+    </footer>
+  );
+}

components/message.js

@@ -0,0 +1,20 @@
+export default function Message({
+  sender,
+  shouldFillWidth = false,
+  isSameSender = false,
+  children,
+}) {
+  return (
+    <div className={`w-full ${sender === "user" ? "text-right" : ""}`}>
+      <div
+        className={`p-3 rounded-lg ${shouldFillWidth ? "" : "inline-block"} ${
+          sender === "user"
+            ? "ml-16 bg-blue-600 text-white"
+            : "bg-gray-200 text-black"
+        } ${isSameSender ? "mt-2" : "mt-8"}`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

components/messages.js

@@ -0,0 +1,80 @@
+import { RotateCcw as UndoIcon } from "lucide-react";
+import Image from "next/image";
+import { Fragment, useEffect, useRef } from "react";
+import PulseLoader from "react-spinners/PulseLoader";
+import Message from "./message";
+
+export default function Messages({ events, isProcessing, onUndo }) {
+  const messagesEndRef = useRef(null);
+
+  useEffect(() => {
+    if (events.length > 2) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [events.length]);
+
+  return (
+    <section className="w-full">
+      {events.map((ev, index) => {
+        if (ev.image) {
+          return (
+            <Fragment key={"image-" + index}>
+              <Message sender="replicate" shouldFillWidth>
+                <Image
+                  alt={
+                    ev.prompt
+                      ? `The result of the prompt "${ev.prompt}" on the previous image`
+                      : "The source image"
+                  }
+                  width="512"
+                  height="512"
+                  priority={true}
+                  className="w-full h-auto rounded-lg"
+                  src={ev.image}
+                />
+
+                {onUndo && index > 0 && index === events.length - 1 && (
+                  <div className="mt-2 text-right">
+                    <button
+                      className="lil-button"
+                      onClick={() => {
+                        onUndo(index);
+                      }}
+                    >
+                      <UndoIcon className="icon" /> Undo and try a different
+                      change
+                    </button>
+                  </div>
+                )}
+              </Message>
+
+              {(isProcessing || index < events.length - 1) && (
+                <Message sender="replicate" isSameSender>
+                  {index === 0
+                    ? "What should we change?"
+                    : "What should we change now?"}
+                </Message>
+              )}
+            </Fragment>
+          );
+        }
+
+        if (ev.prompt) {
+          return (
+            <Message key={"prompt-" + index} sender="user">
+              {ev.prompt}
+            </Message>
+          );
+        }
+      })}
+
+      {isProcessing && (
+        <Message sender="replicate">
+          <PulseLoader color="#999" size={7} />
+        </Message>
+      )}
+
+      <div ref={messagesEndRef} />
+    </section>
+  );
+}

components/prompt-form.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+
+export default function PromptForm({
+  initialPrompt,
+  onSubmit,
+  disabled = false,
+}) {
+  const [prompt, setPrompt] = useState(initialPrompt);
+
+  useEffect(() => {
+    setPrompt(initialPrompt);
+  }, [initialPrompt]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setPrompt("");
+    onSubmit(e);
+  };
+
+  if (disabled) {
+    return;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="animate-in fade-in duration-700">
+
+      <div className="flex mt-8">
+        <input
+          id="prompt-input"
+          type="text"
+          name="prompt"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Enter a prompt..."
+          className={`block w-full flex-grow${
+            disabled ? " rounded-md" : " rounded-l-md"
+          }`}
+          disabled={disabled}
+        />
+
+        {disabled || (
+          <button
+            className="bg-black text-white rounded-r-md text-small inline-block p-3 flex-none"
+            type="submit"
+          >
+            Go
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  images: {
+    domains: [
+      "replicate.com",
+      "replicate.delivery",
+      "user-images.githubusercontent.com",
+    ],
+  }
+};
+
+module.exports = nextConfig;