analytics + more flexible rate limit

src/app/interface/generate/index.tsx

@@ -172,7 +172,7 @@ export function Generate() {
         } else {
           toast({
             title: "We couldn't generate your video 👀",
-            description: "We aere probably over capacity, but you can try again 🤗",
+            description: "We are probably over capacity, but you can try again 🤗",
           })
         }
 
@@ -187,7 +187,7 @@ export function Generate() {
             console.error("error, too many requests")
             toast({
               title: "Error: the free server is over capacity 👀",
-              description: "You can generate one video per minute 🤗 Please try again in a moment!",
+              description: "You can generate 2 videos per minute 🤗 Please try again in a moment!",
             })
             setLocked(false)
             return

src/app/page.tsx

@@ -1,10 +1,12 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import Head from "next/head"
+import Script from "next/script"
 
-import { Main } from "./main"
 import { cn } from "@/lib/utils"
-import { useEffect, useState } from "react"
+
+import { Main } from "./main"
 
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
 
@@ -24,6 +26,16 @@ export default function Page() {
         `bg-gradient-to-r from-cyan-500 to-blue-400`,
         )}>
         {isLoaded && <Main />}
+        <Script src="https://www.googletagmanager.com/gtag/js?id=GTM-NJ2ZZFBX" />
+        <Script id="google-analytics">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+    
+            gtag('config', 'GTM-NJ2ZZFBX');
+          `}
+        </Script>
       </main>
     </>
   )

src/app/server/actions/animation.ts

@@ -19,10 +19,23 @@ const redis = new Redis({
   token: `${process.env.UPSTASH_REDIS_REST_TOKEN || ""}`,
 })
 
-// Create a new ratelimiter for anonymous users, that allows 1 requests per 60 seconds
+// Create a global ratelimiter for all users, that allows 14 requests per 60 seconds
+// 14 is roughly the number of requests that can be handled by the server
+/*
+const rateLimitGlobal = new Ratelimit({
+  redis,
+  limiter: Ratelimit.slidingWindow(14, "60 s"),
+  analytics: true,
+  timeout: 1000,
+  prefix: "production"
+})
+*/
+
+
+// Create a new ratelimiter for anonymous users, that allows 2 requests per minute
 const rateLimitAnons = new Ratelimit({
   redis,
-  limiter: Ratelimit.slidingWindow(1, "60 s"),
+  limiter: Ratelimit.slidingWindow(2, "60 s"),
   analytics: true,
   timeout: 1000,
   prefix: "production:anon"
@@ -48,16 +61,18 @@ export async function generateAnimation({
 
   console.log(`user ${key.slice(0, 10)} requested "${cropped}${cropped !== positivePrompt ? "..." : ""}"`)
 
+  // const globalRateLimitResult = rateLimitGlobal.limit("global")
+
   // this waits for 3 seconds before failing the request
   // we don't wait more because it is frustrating for someone to wait a failure
-  const rateLimitResult = await rateLimitAnons.limit(key || "anon")
+  const userRateLimitResult = await rateLimitAnons.limit(key || "anon")
   // const rateLimitResult = await rateLimitAnons.blockUntilReady(key, 3_000)
 
   // admin / developers will have this key:
   // eff8e7ca506627fe15dda5e0e512fcaad70b6d520f37cc76597fdb4f2d83a1a3
 
   // result.limit
-  if (!rateLimitResult.success) {
+  if (!userRateLimitResult.success) {
     console.log(`blocking user ${key.slice(0, 10)} who requested "${cropped}${cropped !== positivePrompt ? "..." : ""}"`)
     throw new Error(`Rate Limit Reached`)
   } else {