add pro subs if limit has been reached

server.js

@@ -31,7 +31,7 @@ const PORT = process.env.APP_PORT || 3000;
 const REDIRECT_URI =
   process.env.REDIRECT_URI || `http://localhost:${PORT}/auth/login`;
 const MODEL_ID = "deepseek-ai/DeepSeek-V3-0324";
-const MAX_REQUESTS_PER_IP = 4;
+const MAX_REQUESTS_PER_IP = 2;
 
 app.use(cookieParser());
 app.use(bodyParser.json());
@@ -325,6 +325,13 @@ app.post("/api/ask-ai", async (req, res) => {
     // End the response stream
     res.end();
   } catch (error) {
+    if (error.message.includes("exceeded your monthly included credits")) {
+      return res.status(402).send({
+        ok: false,
+        openProModal: true,
+        message: error.message,
+      });
+    }
     if (!res.headersSent) {
       res.status(500).send({
         ok: false,
@@ -349,8 +356,6 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
     name: repoId,
   });
 
-  console.log(space);
-
   if (!space || space.sdk !== "static" || space.private) {
     return res.status(404).send({
       ok: false,

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

@@ -11,6 +11,7 @@ import Login from "../login/login";
 import { defaultHTML } from "./../../../utils/consts";
 import SuccessSound from "./../../assets/success.mp3";
 import Settings from "../settings/settings";
+import ProModal from "../pro-modal/pro-modal";
 // import SpeechPrompt from "../speech-prompt/speech-prompt";
 
 function AskAI({
@@ -35,6 +36,7 @@ function AskAI({
   const [provider, setProvider] = useLocalStorage("provider", "auto");
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
+  const [openProModal, setOpenProModal] = useState(false);
 
   const audio = new Audio(SuccessSound);
   audio.volume = 0.5;
@@ -67,6 +69,8 @@ function AskAI({
           } else if (res.openSelectProvider) {
             setOpenProvider(true);
             setProviderError(res.message);
+          } else if (res.openProModal) {
+            setOpenProModal(true);
           } else {
             toast.error(res.message);
           }
@@ -208,6 +212,11 @@ function AskAI({
           </p>
         </Login>
       </div>
+      <ProModal
+        html={html}
+        open={openProModal}
+        onClose={() => setOpenProModal(false)}
+      />
     </div>
   );
 }

src/components/pro-modal/pro-modal.tsx

@@ -0,0 +1,70 @@
+import classNames from "classnames";
+import { useLocalStorage } from "react-use";
+import { defaultHTML } from "../../../utils/consts";
+
+function ProModal({
+  open,
+  html,
+  onClose,
+}: {
+  open: boolean;
+  html: string;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [, setStorage] = useLocalStorage("html_content");
+
+  const handleProClick = () => {
+    if (html !== defaultHTML) {
+      setStorage(html);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => onClose(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 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="bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black rounded-lg px-2.5 py-0.5 ">
+            PRO
+          </span>
+          Your free inference quota is exhausted
+        </header>
+        <main className="px-4 pt-3 pb-4">
+          <p className="text-gray-950 text-sm font-semibold flex items-center justify-between">
+            Upgrade to a PRO account to activate Inference Providers and
+            continue using DeepSite.
+          </p>
+          <p className="text-sm text-pretty text-gray-500 mt-2">
+            It also unlocks thousands of Space apps powered by ZeroGPU for 3d,
+            audio, music, video and more!
+          </p>
+          <a
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            className="mt-4 bg-black text-white cursor-pointer rounded-full py-2 px-3 text-sm font-medium w-full block text-center hover:bg-gray-800 transition duration-200 ease-in-out"
+            onClick={handleProClick}
+          >
+            Subscribe to PRO ($9/month)
+          </a>
+        </main>
+      </div>
+    </>
+  );
+}
+
+export default ProModal;

src/components/settings/settings.tsx

@@ -30,7 +30,7 @@ function Settings({
       </button>
       <div
         className={classNames(
-          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
           {
             "opacity-0 pointer-events-none": !open,
           }
@@ -39,7 +39,7 @@ function Settings({
       ></div>
       <div
         className={classNames(
-          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-10 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
           {
             "opacity-0 pointer-events-none": !open,
           }