load project

server.js

@@ -352,33 +352,42 @@ 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,
     });
-  }
 
-  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), "");
+
+    res.status(200).send({
+      ok: true,
+      html,
+    });
+  } 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

@@ -18,6 +18,7 @@ import Tabs from "./tabs/tabs";
 import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "./../../utils/types";
 import Preview from "./preview/preview";
+import LoadButton from "./load-button/load-button";
 
 function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
@@ -182,7 +183,10 @@ function App() {
           }
         }}
       >
-        <DeployButton html={html} error={error} auth={auth} />
+        <div className="flex items-center justify-end gap-5">
+          <LoadButton auth={auth} setHtml={setHtml} />
+          <DeployButton html={html} error={error} auth={auth} />
+        </div>
       </Header>
       <main className="max-lg:flex-col flex w-full">
         <div

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

@@ -0,0 +1,125 @@
+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,
+}: {
+  auth?: Auth;
+  setHtml: (html: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [path, setPath] = useState<string | undefined>(undefined);
+
+  const loadSpace = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/remix/${path}`);
+      const data = await res.json();
+      if (res.ok) {
+        if (data.html) {
+          setHtml(data.html);
+          toast.success("Project loaded successfully.");
+        }
+        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={path}
+                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) => setPath(e.target.value)}
+                onFocus={() => setError(false)}
+                onBlur={(e) => {
+                  const pathParts = e.target.value.split("/");
+                  setPath(
+                    `${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 || !path}
+                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;