From 94a65d6324a65b7f2aff6c53ccb91758c18420de Mon Sep 17 00:00:00 2001
From: blueeon <i@blueeon.me>
Date: Thu, 28 Mar 2024 21:16:30 +0800
Subject: [PATCH] feat: update landing page

---
 src/app/page.tsx | 78 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index deaac39..6b914d4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -25,13 +25,82 @@ We discovered that some users have similar needs, so we decided to open-source t
 
 ### 1. Obtain the cookie of your app.suno.ai account
 
+1. Head over to [app.suno.ai](https://app.suno.ai) using your browser.
+2. Open up the browser console: hit \`F12\` or access the \`Developer Tools\`.
+3. Navigate to the \`Network tab\`.
+4. Give the page a quick refresh.
+5. Identify the request that includes the keyword \`client?\_clerk_js_version\`.
+6. Click on it and switch over to the \`Header\` tab.
+7. Locate the \`Cookie\` section, hover your mouse over it, and copy the value of the Cookie.
+`;
+
+
+  const markdown_part2 = `
 ### 2. Clone and deploy this project
 
+You can choose your preferred deployment method:
+
+#### Deploy to Vercel
+
+[button]
+
+#### Run locally
+
+\`\`\`bash
+git clone https://github.com/gcui-art/suno-api.git
+cd suno-api
+npm install
+\`\`\`
+
 ### 3. Configure suno-api
 
+- If deployed to Vercel, please add an environment variable \`SUNO_COOKIE\` in the Vercel dashboard, with the value of the cookie obtained in the first step.
+
+- If you’re running this locally, be sure to add the following to your \`.env\` file:
+
+\`\`\`bash
+SUNO_COOKIE=<your-cookie>
+\`\`\`
+
 ### 4. Run suno api
 
-### 5. Create more freely
+- If you’ve deployed to Vercel:
+  - Please click on Deploy in the Vercel dashboard and wait for the deployment to be successful.
+  - Visit the \`https://<vercel-assigned-domain>/api/get_limit\` API for testing.
+- If running locally:
+  - Run \`npm run dev\`.
+  - Visit the \`http://localhost:3000/api/get_limit\` API for testing.
+- If the following result is returned:
+
+\`\`\`json
+{
+  "credits_left": 50,
+  "period": "day",
+  "monthly_limit": 50,
+  "monthly_usage": 50
+}
+\`\`\`
+
+it means the program is running normally.
+
+### 5. Use Suno API
+
+You can check out the detailed API documentation at \`https://<domain>/docs\`.
+
+## API Reference
+
+Suno API currently mainly implements the following APIs:
+
+\`\`\`bash
+- \`/api/generate\`: Generate music
+- \`/api/custom_generate\`: Generate music (Custom Mode, support setting lyrics, 
+  music style, title, etc.)
+- \`/api/get\`: Get music Info
+- \`/api/get_limit\`: Get quota Info
+\`\`\`
+
+For more detailed documentation, please check out the demo site:
+[https://.../docs](https://.../docs)
 
 `;
   return (
@@ -58,6 +127,13 @@ We discovered that some users have similar needs, so we decided to open-source t
           <Markdown>
             {markdown}
           </Markdown>
+          <video controls width="1024" className="w-full border rounded-lg shadow-xl">
+            <source src="/get-cookie-demo.mp4" type="video/mp4" />
+            Your browser does not support frames.
+          </video>
+          <Markdown>
+            {markdown_part2}
+          </Markdown>
         </article>
       </Section>