Local use usage

.env.example

@@ -2,4 +2,10 @@ OAUTH_CLIENT_ID=
 OAUTH_CLIENT_SECRET=
 APP_PORT=5173
 REDIRECT_URI=http://localhost:5173/auth/login
-DEFAULT_HF_TOKEN=
+DEFAULT_HF_TOKEN=
+
+# Optional
+# By setting this variable, you will bypass the login page + the free requests
+# and will use the token directly.
+# This is useful for testing purposes or local use.
+HF_TOKEN=

middlewares/checkUser.js

@@ -1,4 +1,7 @@
 export default async function checkUser(req, res, next) {
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
+    return next();
+  }
   const { hf_token } = req.cookies;
   if (!hf_token) {
     return res.status(401).send({

server.js

@@ -42,11 +42,6 @@ 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`
-  // );
-  // 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,
@@ -101,7 +96,15 @@ app.get("/auth/logout", (req, res) => {
 });
 
 app.get("/api/@me", checkUser, async (req, res) => {
-  const { hf_token } = req.cookies;
+  let { hf_token } = req.cookies;
+
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
+    return res.send({
+      preferred_username: "local-use",
+      isLocalUse: true,
+    });
+  }
+
   try {
     const request_user = await fetch("https://huggingface.co/oauth/userinfo", {
       headers: {
@@ -133,7 +136,11 @@ app.post("/api/deploy", checkUser, async (req, res) => {
     });
   }
 
-  const { hf_token } = req.cookies;
+  let { hf_token } = req.cookies;
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
+    hf_token = process.env.HF_TOKEN;
+  }
+
   try {
     const repo = {
       type: "space",
@@ -211,6 +218,11 @@ app.post("/api/ask-ai", async (req, res) => {
 
   const { hf_token } = req.cookies;
   let token = hf_token;
+
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
+    hf_token = process.env.HF_TOKEN;
+  }
+
   const ip =
     req.headers["x-forwarded-for"]?.split(",")[0].trim() ||
     req.headers["x-real-ip"] ||
@@ -244,12 +256,6 @@ app.post("/api/ask-ai", async (req, res) => {
   if (html) TOKENS_USED += html.length;
 
   const DEFAULT_PROVIDER = PROVIDERS.novita;
-  // const selectedProvider =
-  //   provider === "auto"
-  //     ? TOKENS_USED < PROVIDERS.sambanova.max_tokens
-  //       ? PROVIDERS.sambanova
-  //       : DEFAULT_PROVIDER
-  //     : PROVIDERS[provider] ?? DEFAULT_PROVIDER;
   const selectedProvider =
     provider === "auto"
       ? DEFAULT_PROVIDER
@@ -355,7 +361,11 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
   const { username, repo } = req.params;
   const { hf_token } = req.cookies;
 
-  const token = hf_token || process.env.DEFAULT_HF_TOKEN;
+  let token = hf_token || process.env.DEFAULT_HF_TOKEN;
+
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
+    token = process.env.HF_TOKEN;
+  }
 
   const repoId = `${username}/${repo}`;
 

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

@@ -84,31 +84,38 @@ function DeployButton({
     <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";
-                }
-              }}
-            >
-              <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 &&
+          (auth.isLocalUse ? (
+            <>
+              <div className="bg-amber-500/10 border border-amber-10 text-amber-500 font-semibold leading-5 lg:leading-6 py-1 px-5 text-xs lg:text-sm rounded-md mr-4 select-none">
+                Local Usage
+              </div>
+            </>
+          ) : (
+            <>
+              <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>
-          </>
-        )}
+                <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>
+            </>
+          ))}
         <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",

src/components/settings/settings.tsx

@@ -54,6 +54,15 @@ function Settings({
         <main className="px-4 pt-3 pb-4 space-y-4">
           {/* toggle using tailwind css */}
           <div>
+            <a
+              href="/"
+              className="w-full flex items-center justify-between text-gray-600 bg-gray-50 border border-gray-100 px-2 py-2 rounded-lg mb-3 text-sm font-medium hover:brightness-95"
+            >
+              How to use it locally?
+              <button className="bg-black text-white rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer">
+                See the guide
+              </button>
+            </a>
             <div className="flex items-center justify-between">
               <p className="text-gray-800 text-sm font-medium flex items-center justify-between">
                 Use auto-provider

utils/types.ts

@@ -2,4 +2,5 @@ export interface Auth {
   preferred_username: string;
   picture: string;
   name: string;
+  isLocalUse?: boolean;
 }