Merge pull request #71 from replicate/experiment

Require users to bring their own API token
replicate · Feb 20, 2024 · 772ae3a · 772ae3a
2 parents bd3b871 + 4b2ae58
commit 772ae3a
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 169 deletions.
diff --git a/components/nav.js b/components/nav.js
@@ -108,6 +108,7 @@ export default function Nav() {
                   <CodeBracketIcon className="h-5 w-5 bg- text-gray-100 mr-2 hidden sm:inline-flex" />{" "}
                   Code
                 </Link>
+
                 {id && (
                   <button
                     onClick={() => copyToClipboard()}

diff --git a/components/popup.js b/components/popup.js
@@ -9,8 +9,15 @@ export default function Popup({ open, setOpen }) {
     localStorage.setItem("hasClosedPopup", true);
     setOpen(false);
   };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(e.target[0].value);
+    localStorage.setItem("replicate_api_token", e.target[0].value);
+    setOpen(false);
+  };
   return (
-    <Transition.Root show={open} as={Fragment}>
+    <Transition.Root show={false} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={setOpen}>
         <Transition.Child
           as={Fragment}
@@ -42,40 +49,47 @@ export default function Popup({ open, setOpen }) {
                       as="h3"
                       className="text-2xl font-semibold leading-6 text-gray-900"
                     >
-                      Want to build your own Zoo?
+                      Welcome to the Zoo
                     </Dialog.Title>
 
-                    <Image
-                      width={250}
-                      height={250}
-                      className="mx-auto"
-                      src={`${process.env.NEXT_PUBLIC_SUPABASE_IMAGES_URL}/storage/v1/object/public/images/public/2370caef-bc8c-423e-88bb-0ca4a71e19c8.png`}
-                      alt=""
-                      unoptimized={true}
-                    />
-                    <div className="mt-2">
+                    <div className="mt-6">
                       <p className="text-base text-gray-500">
-                        Try running a model on Replicate, an API for machine
-                        learning models.
+                        Grab your{" "}
+                        <Link href="https://replicate.com/account/api-tokens?utm_campaign=zoo-diy&utm_source=project">
+                          Replicate API token
+                        </Link>{" "}
+                        and paste it here:
                       </p>
+
+                      <form onSubmit={handleSubmit}>
+                        <label htmlFor="api-key" className="sr-only">
+                          API Key
+                        </label>
+                        <input
+                          type="text"
+                          name="api-key"
+                          id="api-key"
+                          className="block mt-6 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                          placeholder="r8_..."
+                        />
+                        <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                          <button
+                            type="submit"
+                            className="inline-flex w-full justify-center rounded-md bg-black px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 sm:col-start-2"
+                          >
+                            Start making images
+                          </button>
+                          <button
+                            onClick={() => handleClose()}
+                            className="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
+                          >
+                            What is Replicate?
+                          </button>
+                        </div>
+                      </form>
                     </div>
                   </div>
                 </div>
-                <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                  <Link
-                    href="https://replicate.com/docs?utm_source=project&utm_campaign=zoo_popup"
-                    onClick={() => setOpen(false)}
-                    className="inline-flex w-full justify-center rounded-md bg-black px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 sm:col-start-2"
-                  >
-                    Check out Replicate &rarr;
-                  </Link>
-                  <button
-                    onClick={() => handleClose()}
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
-                  >
-                    No thanks, back to Zoo
-                  </button>
-                </div>
               </Dialog.Panel>
             </Transition.Child>
           </div>

diff --git a/components/welcome.js b/components/welcome.js
@@ -0,0 +1,58 @@
+import Link from "next/link";
+
+export default function Welcome({ handleTokenSubmit }) {
+  return (
+    <div className="landing-page container flex-column mx-auto mt-24">
+      <div className="hero mx-auto">
+        <div className="hero-text text-center max-w-3xl mx-auto">
+          <h1 className="text-4xl font-bold mb-4">
+            🦓 Zoo is an open source text-to-image playground by{" "}
+            <a href="https://replicate.com?utm_source=project&utm_campaign=zoo">
+              Replicate
+            </a>
+            .
+          </h1>
+        </div>
+
+        <div className="mt-12 max-w-xl mx-auto text-center">
+          <p className="text-base text-gray-500">
+            Grab your{" "}
+            <Link
+              className="underline"
+              href="https://replicate.com/account/api-tokens?utm_campaign=zoo-diy&utm_source=project"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Replicate API token
+            </Link>{" "}
+            and paste it here:
+          </p>
+
+          <form onSubmit={handleTokenSubmit}>
+            <label htmlFor="api-key" className="sr-only">
+              API token
+            </label>
+            <input
+              type="text"
+              name="api-key"
+              id="api-key"
+              className="block mt-6 w-full p-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xl"
+              placeholder="r8_..."
+              minLength="40"
+              maxLength="40"
+              required
+            />
+            <div className="mt-5 sm:mt-6 sm:gap-3">
+              <button
+                type="submit"
+                className="inline-flex w-full justify-center rounded-md bg-black p-3 text-xl text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 sm:col-start-2"
+              >
+                Start making images &rarr;
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/api/predictions/index.js b/pages/api/predictions/index.js
@@ -18,12 +18,6 @@ const configuration = new Configuration({
 const openai = new OpenAIApi(configuration);
 
 export default async function handler(req, res) {
-  if (!process.env.REPLICATE_API_TOKEN) {
-    throw new Error(
-      "The REPLICATE_API_TOKEN environment variable is not set. See README.md for instructions on how to set it."
-    );
-  }
-
   if (!WEBHOOK_HOST) {
     throw new Error(
       "WEBHOOK_HOST is not set. If you're on local, make sure you set NGROK_HOST. If this doesn't exist, replicate predictions won't save to DB."
@@ -60,7 +54,7 @@ export default async function handler(req, res) {
     });
 
     const headers = {
-      Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
+      Authorization: `Token ${req.body.replicate_api_token}`,
       "Content-Type": "application/json",
       "User-Agent": `${packageData.name}/${packageData.version}`,
     };
-Original file line number
+Diff line change
@@ Expand Up / @@ -108,6 +108,7 @@ export default function Nav() { @@
                       <CodeBracketIcon className="h-5 w-5 bg- text-gray-100 mr-2 hidden sm:inline-flex" />{" "}
                       Code
                     </Link>
                     {id && (
                       <button
                         onClick={() => copyToClipboard()}
@@ Expand Down @@