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

.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=

README.md

@@ -18,4 +18,8 @@ models:
   - deepseek-ai/DeepSeek-V3-0324
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# DeepSite 🐳
+DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
+
+## How to use it locally
+Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)

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: {
@@ -125,7 +128,7 @@ app.get("/api/@me", checkUser, async (req, res) => {
 });
 
 app.post("/api/deploy", checkUser, async (req, res) => {
-  const { html, title, path } = req.body;
+  const { html, title, path, prompts } = req.body;
   if (!html || (!path && !title)) {
     return res.status(400).send({
       ok: false,
@@ -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",
@@ -180,7 +187,12 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
     const file = new Blob([newHtml], { type: "text/html" });
     file.name = "index.html"; // Add name property to the Blob
 
-    const files = [file];
+    // create prompt.txt file with all the prompts used, split by new line
+    const newPrompts = ``.concat(prompts.map((prompt) => prompt).join("\n"));
+    const promptFile = new Blob([newPrompts], { type: "text/plain" });
+    promptFile.name = "prompts.txt"; // Add name property to the Blob
+
+    const files = [file, promptFile];
     if (readme) {
       const readmeFile = new Blob([readme], { type: "text/markdown" });
       readmeFile.name = "README.md"; // Add name property to the Blob
@@ -209,8 +221,13 @@ app.post("/api/ask-ai", async (req, res) => {
     });
   }
 
-  const { hf_token } = req.cookies;
+  let { hf_token } = req.cookies;
   let token = hf_token;
+
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
+    token = process.env.HF_TOKEN;
+  }
+
   const ip =
     req.headers["x-forwarded-for"]?.split(",")[0].trim() ||
     req.headers["x-real-ip"] ||
@@ -218,7 +235,7 @@ app.post("/api/ask-ai", async (req, res) => {
     req.ip ||
     "0.0.0.0";
 
-  if (!hf_token) {
+  if (!token) {
     ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
     if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
       return res.status(429).send({
@@ -244,12 +261,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 +366,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/App.tsx

@@ -36,6 +36,7 @@ function App() {
   const [currentView, setCurrentView] = useState<"editor" | "preview">(
     "editor"
   );
+  const [prompts, setPrompts] = useState<string[]>([]);
 
   const fetchMe = async () => {
     const res = await fetch("/api/@me");
@@ -182,7 +183,13 @@ function App() {
           }
         }}
       >
-        <DeployButton html={html} error={error} auth={auth} setHtml={setHtml} />
+        <DeployButton
+          html={html}
+          error={error}
+          auth={auth}
+          setHtml={setHtml}
+          prompts={prompts}
+        />
       </Header>
       <main className="max-lg:flex-col flex w-full">
         <div
@@ -233,6 +240,9 @@ function App() {
             isAiWorking={isAiWorking}
             setisAiWorking={setisAiWorking}
             setView={setCurrentView}
+            onNewPrompt={(prompt) => {
+              setPrompts((prev) => [...prev, prompt]);
+            }}
             onScrollToBottom={() => {
               editorRef.current?.revealLine(
                 editorRef.current?.getModel()?.getLineCount() ?? 0

src/components/ask-ai/ask-ai.tsx

@@ -21,11 +21,13 @@ function AskAI({
   isAiWorking,
   setisAiWorking,
   setView,
+  onNewPrompt,
 }: {
   html: string;
   setHtml: (html: string) => void;
   onScrollToBottom: () => void;
   isAiWorking: boolean;
+  onNewPrompt: (prompt: string) => void;
   setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
@@ -49,6 +51,7 @@ function AskAI({
     let contentResponse = "";
     let lastRenderTime = 0;
     try {
+      onNewPrompt(prompt);
       const request = await fetch("/api/ask-ai", {
         method: "POST",
         body: JSON.stringify({

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

@@ -29,11 +29,13 @@ function DeployButton({
   error = false,
   auth,
   setHtml,
+  prompts,
 }: {
   html: string;
   error: boolean;
   auth?: Auth;
   setHtml: (html: string) => void;
+  prompts: string[];
 }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -53,6 +55,7 @@ function DeployButton({
           title: config.title,
           path,
           html,
+          prompts,
         }),
         headers: {
           "Content-Type": "application/json",
@@ -84,31 +87,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,16 @@ function Settings({
         <main className="px-4 pt-3 pb-4 space-y-4">
           {/* toggle using tailwind css */}
           <div>
+            <a
+              href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/74"
+              target="_blank"
+              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;
 }