Merge branch #enzostvs/deepsite' into 'nomadicsynth/deepsite'

server.js

@@ -42,10 +42,16 @@ const getPTag = (repoId) => {
 };
 
 app.get("/api/login", (_req, res) => {
-  res.redirect(
-    302,
-    `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`
-  );
+  // res.redirect(
+  //   302,
+  //   `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`
+  // );
+  // redirect in new tab
+  const redirectUrl = `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`;
+  res.status(200).send({
+    ok: true,
+    redirectUrl,
+  });
 });
 app.get("/auth/login", async (req, res) => {
   const { code } = req.query;
@@ -120,7 +126,7 @@ app.get("/api/@me", checkUser, async (req, res) => {
 
 app.post("/api/deploy", checkUser, async (req, res) => {
   const { html, title, path } = req.body;
-  if (!html || !title) {
+  if (!html || (!path && !title)) {
     return res.status(400).send({
       ok: false,
       message: "Missing required fields",
@@ -352,33 +358,62 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
   const token = hf_token || process.env.DEFAULT_HF_TOKEN;
 
   const repoId = `${username}/${repo}`;
-  const space = await spaceInfo({
-    name: repoId,
-  });
 
-  if (!space || space.sdk !== "static" || space.private) {
-    return res.status(404).send({
-      ok: false,
-      message: "Space not found",
+  const url = `https://huggingface.co/spaces/${repoId}/raw/main/index.html`;
+  try {
+    const space = await spaceInfo({
+      name: repoId,
+      accessToken: token,
+      additionalFields: ["author"],
     });
-  }
 
-  const url = `https://huggingface.co/spaces/${repoId}/raw/main/index.html`;
-  const response = await fetch(url);
-  if (!response.ok) {
-    return res.status(404).send({
+    if (!space || space.sdk !== "static" || space.private) {
+      return res.status(404).send({
+        ok: false,
+        message: "Space not found",
+      });
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      return res.status(404).send({
+        ok: false,
+        message: "Space not found",
+      });
+    }
+    let html = await response.text();
+    // remove the last p tag including this url https://enzostvs-deepsite.hf.space
+    html = html.replace(getPTag(repoId), "");
+
+    let user = null;
+
+    if (token) {
+      const request_user = await fetch(
+        "https://huggingface.co/oauth/userinfo",
+        {
+          headers: {
+            Authorization: `Bearer ${hf_token}`,
+          },
+        }
+      )
+        .then((res) => res.json())
+        .catch(() => null);
+
+      user = request_user;
+    }
+
+    res.status(200).send({
+      ok: true,
+      html,
+      isOwner: space.author === user?.preferred_username,
+      path: repoId,
+    });
+  } catch (error) {
+    return res.status(500).send({
       ok: false,
-      message: "Space not found",
+      message: error.message,
     });
   }
-  let html = await response.text();
-  // remove the last p tag including this url https://enzostvs-deepsite.hf.space
-  html = html.replace(getPTag(repoId), "");
-
-  res.status(200).send({
-    ok: true,
-    html,
-  });
 });
 
 app.get("*", (_req, res) => {

src/components/App.tsx

@@ -182,7 +182,7 @@ function App() {
           }
         }}
       >
-        <DeployButton html={html} error={error} auth={auth} />
+        <DeployButton html={html} error={error} auth={auth} setHtml={setHtml} />
       </Header>
       <main className="max-lg:flex-col flex w-full">
         <div

src/components/deploy-button/deploy-button.tsx

@@ -8,6 +8,7 @@ import SpaceIcon from "@/assets/space.svg";
 import Loading from "../loading/loading";
 import Login from "../login/login";
 import { Auth } from "./../../../utils/types";
+import LoadButton from "../load-button/load-button";
 
 const MsgToast = ({ url }: { url: string }) => (
   <div className="w-full flex items-center justify-center gap-3">
@@ -27,10 +28,12 @@ function DeployButton({
   html,
   error = false,
   auth,
+  setHtml,
 }: {
   html: string;
   error: boolean;
   auth?: Auth;
+  setHtml: (html: string) => void;
 }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -78,128 +81,131 @@ function DeployButton({
   };
 
   return (
-    <div className="relative flex items-center justify-end">
-      {auth && (
-        <>
-          <button
-            className="mr-2 cursor-pointer"
-            onClick={() => {
-              if (confirm("Are you sure you want to log out?")) {
-                // go to /auth/logout page
-                window.location.href = "/auth/logout";
-              }
-            }}
-          >
-            <FaPowerOff className="text-lg text-red-500" />
-          </button>
-          <p className="mr-3 text-xs lg:text-sm text-gray-300">
-            <span className="max-lg:hidden">Connected as </span>
-            <a
-              href={`https://huggingface.co/${auth.preferred_username}`}
-              target="_blank"
-              className="underline hover:text-white"
+    <div className="flex items-center justify-end gap-5">
+      <LoadButton auth={auth} setHtml={setHtml} setPath={setPath} />
+      <div className="relative flex items-center justify-end">
+        {auth && (
+          <>
+            <button
+              className="mr-2 cursor-pointer"
+              onClick={() => {
+                if (confirm("Are you sure you want to log out?")) {
+                  // go to /auth/logout page
+                  window.location.href = "/auth/logout";
+                }
+              }}
             >
-              {auth.preferred_username}
-            </a>
-          </p>
-        </>
-      )}
-      <button
-        className={classNames(
-          "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
-          {
-            "bg-pink-400": open,
-            "bg-pink-500": !open,
-          }
-        )}
-        onClick={() => setOpen(!open)}
-      >
-        {path ? "Update Space" : "Deploy to Space"}
-      </button>
-      <div
-        className={classNames(
-          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-        onClick={() => setOpen(false)}
-      ></div>
-      <div
-        className={classNames(
-          "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-      >
-        {!auth ? (
-          <Login html={html}>
-            <p className="text-gray-500 text-sm mb-3">
-              Host this project for free and share it with your friends.
+              <FaPowerOff className="text-lg text-red-500" />
+            </button>
+            <p className="mr-3 text-xs lg:text-sm text-gray-300">
+              <span className="max-lg:hidden">Connected as </span>
+              <a
+                href={`https://huggingface.co/${auth.preferred_username}`}
+                target="_blank"
+                className="underline hover:text-white"
+              >
+                {auth.preferred_username}
+              </a>
             </p>
-          </Login>
-        ) : (
-          <>
-            <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
-              <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
-                <img src={SpaceIcon} alt="Space Icon" className="size-4" />
-                Space
-              </span>
-              Configure Deployment
-            </header>
-            <main className="px-4 pt-3 pb-4 space-y-3">
-              <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
-                {path ? (
-                  <span>
-                    Your space is live at{" "}
-                    <a
-                      href={`https://huggingface.co/spaces/${path}`}
-                      target="_blank"
-                      className="underline hover:text-amber-700"
-                    >
-                      huggingface.co/{path}
-                    </a>
-                    . You can update it by deploying again.
-                  </span>
-                ) : (
-                  "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
-                )}
-              </p>
-              {!path && (
-                <label className="block">
-                  <p className="text-gray-600 text-sm font-medium mb-1.5">
-                    Space Title
-                  </p>
-                  <input
-                    type="text"
-                    value={config.title}
-                    className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
-                    placeholder="My Awesome Space"
-                    onChange={(e) =>
-                      setConfig({ ...config, title: e.target.value })
-                    }
-                  />
-                </label>
-              )}
-              {error && (
-                <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
-                  Your code has errors. Fix them before deploying.
-                </p>
-              )}
-              <div className="pt-2 text-right">
-                <button
-                  disabled={error || loading || !config.title}
-                  className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
-                  onClick={createSpace}
-                >
-                  {path ? "Update Space" : "Create Space"}
-                  {loading && <Loading />}
-                </button>
-              </div>
-            </main>
           </>
         )}
+        <button
+          className={classNames(
+            "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
+            {
+              "bg-pink-400": open,
+              "bg-pink-500": !open,
+            }
+          )}
+          onClick={() => setOpen(!open)}
+        >
+          {path ? "Update Space" : "Deploy to Space"}
+        </button>
+        <div
+          className={classNames(
+            "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+          onClick={() => setOpen(false)}
+        ></div>
+        <div
+          className={classNames(
+            "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+        >
+          {!auth ? (
+            <Login html={html}>
+              <p className="text-gray-500 text-sm mb-3">
+                Host this project for free and share it with your friends.
+              </p>
+            </Login>
+          ) : (
+            <>
+              <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+                <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+                  <img src={SpaceIcon} alt="Space Icon" className="size-4" />
+                  Space
+                </span>
+                Configure Deployment
+              </header>
+              <main className="px-4 pt-3 pb-4 space-y-3">
+                <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
+                  {path ? (
+                    <span>
+                      Your space is live at{" "}
+                      <a
+                        href={`https://huggingface.co/spaces/${path}`}
+                        target="_blank"
+                        className="underline hover:text-amber-700"
+                      >
+                        huggingface.co/{path}
+                      </a>
+                      . You can update it by deploying again.
+                    </span>
+                  ) : (
+                    "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
+                  )}
+                </p>
+                {!path && (
+                  <label className="block">
+                    <p className="text-gray-600 text-sm font-medium mb-1.5">
+                      Space Title
+                    </p>
+                    <input
+                      type="text"
+                      value={config.title}
+                      className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
+                      placeholder="My Awesome Space"
+                      onChange={(e) =>
+                        setConfig({ ...config, title: e.target.value })
+                      }
+                    />
+                  </label>
+                )}
+                {error && (
+                  <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
+                    Your code has errors. Fix them before deploying.
+                  </p>
+                )}
+                <div className="pt-2 text-right">
+                  <button
+                    disabled={error || loading || (!path && !config.title)}
+                    className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                    onClick={createSpace}
+                  >
+                    {path ? "Update Space" : "Create Space"}
+                    {loading && <Loading />}
+                  </button>
+                </div>
+              </main>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/load-button/load-button.tsx

@@ -0,0 +1,132 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+import SpaceIcon from "@/assets/space.svg";
+import Loading from "../loading/loading";
+import { Auth } from "../../../utils/types";
+
+function LoadButton({
+  auth,
+  setHtml,
+  setPath,
+}: {
+  auth?: Auth;
+  setHtml: (html: string) => void;
+  setPath: (path?: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [url, setUrl] = useState<string | undefined>(undefined);
+
+  const loadSpace = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/remix/${url}`);
+      const data = await res.json();
+      if (res.ok) {
+        if (data.html) {
+          setHtml(data.html);
+          toast.success("Project loaded successfully.");
+        }
+        if (data.isOwner) {
+          setPath(data.path);
+        } else {
+          setPath(undefined);
+        }
+        setOpen(false);
+      } else {
+        toast.error(data.message);
+        setError(data.message);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      toast.error(error.message);
+      setError(error.message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div
+      className={classNames("max-md:hidden", {
+        "border-r border-gray-700 pr-5": auth,
+      })}
+    >
+      <p
+        className="underline hover:text-white cursor-pointer text-xs lg:text-sm text-gray-300"
+        onClick={() => setOpen(!open)}
+      >
+        Load project
+      </p>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => setOpen(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-[calc(100%+8px)] right-2 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <>
+          <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+            <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+              <img src={SpaceIcon} alt="Space Icon" className="size-4" />
+              Space
+            </span>
+            Load Project
+          </header>
+          <main className="px-4 pt-3 pb-4 space-y-3">
+            <label className="block">
+              <p className="text-gray-600 text-sm font-medium mb-1.5">
+                Space URL
+              </p>
+              <input
+                type="text"
+                value={url}
+                className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
+                placeholder="https://huggingface.co/spaces/username/space-name"
+                onChange={(e) => setUrl(e.target.value)}
+                onFocus={() => setError(false)}
+                onBlur={(e) => {
+                  const pathParts = e.target.value.split("/");
+                  setUrl(
+                    `${pathParts[pathParts.length - 2]}/${
+                      pathParts[pathParts.length - 1]
+                    }`
+                  );
+                  setError(false);
+                }}
+              />
+            </label>
+            {error && (
+              <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2 break-all">
+                {error}
+              </p>
+            )}
+            <div className="pt-2 text-right">
+              <button
+                disabled={error || loading || !url}
+                className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                onClick={loadSpace}
+              >
+                Load Project
+                {loading && <Loading />}
+              </button>
+            </div>
+          </main>
+        </>
+      </div>
+    </div>
+  );
+}
+export default LoadButton;

src/components/login/login.tsx

@@ -10,10 +10,15 @@ function Login({
 }) {
   const [, setStorage] = useLocalStorage("html_content");
 
-  const handleClick = () => {
+  const handleClick = async () => {
     if (html !== defaultHTML) {
       setStorage(html);
     }
+    const request = await fetch("/api/login");
+    const res = await request.json();
+    if (res?.redirectUrl) {
+      window.open(res.redirectUrl, "_blank");
+    }
   };
 
   return (
@@ -26,13 +31,13 @@ function Login({
       </header>
       <main className="px-4 py-4 space-y-3">
         {children}
-        <a href="/api/login" onClick={handleClick}>
+        <button onClick={handleClick}>
           <img
             src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
             alt="Sign in with Hugging Face"
             className="mx-auto"
           />
-        </a>
+        </button>
       </main>
     </>
   );

src/main.tsx

@@ -7,6 +7,6 @@ import App from "./components/App.tsx";
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-    <ToastContainer />
+    <ToastContainer className="pt-11 max-md:p-4" />
   </StrictMode>
 );