From eb189f26f1ce9acecc8f17311d86edbe1a24c9b5 Mon Sep 17 00:00:00 2001
From: blueeon <i@blueeon.me>
Date: Thu, 28 Mar 2024 18:39:45 +0800
Subject: [PATCH] refactor: Refactor footer and documentation page styles for
 improved readability and aesthetics.

---
 src/app/components/Footer.tsx      |  8 +++++-
 src/app/docs/page.tsx              | 40 +++++++++++++++++++++++++++---
 src/app/docs/swagger-suno-api.json | 25 ++++++++++++++++---
 src/app/page.tsx                   | 19 +++++++++-----
 4 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index 880d7a0..03969a0 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@@ -4,9 +4,15 @@ import Image from "next/image";
 export default function Footer() {
     return (
         <footer className=" flex w-full justify-center py-4 items-center
-         bg-indigo-50  backdrop-blur-2xl font-mono text-sm px-4 lg:px-0
+        bg-indigo-900 text-white/60 backdrop-blur-2xl font-mono text-sm px-4 lg:px-0
       ">
             <p className="px-6 py-3 rounded-full flex justify-center items-center gap-2
+             hover:text-white duration-200
+                ">
+
+            </p>
+            <p className="px-6 py-3 rounded-full flex justify-center items-center gap-2
+             hover:text-white duration-200
                 ">
                 <span>© 2024</span>
                 <Link href="https://github.com/gcui-art/suno-api/">
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
index 8568b1b..af54760 100644
--- a/src/app/docs/page.tsx
+++ b/src/app/docs/page.tsx
@@ -2,12 +2,46 @@ import React from 'react';
 import Swagger from '../components/Swagger';
 import spec from './swagger-suno-api.json'; // 直接导入JSON文件
 import Section from '../components/Section';
+import Markdown from 'react-markdown';
 
 
 export default function Docs() {
     return (
-        <Section className="">
-            <Swagger spec={spec} />
-        </Section>
+        <>
+            <Section className="my-10">
+                <article className="prose lg:prose-lg max-w-3xl pt-10">
+                    <h1 className=' text-center text-indigo-900'>
+                        API Docs
+                    </h1>
+                    <Markdown>
+                        {`                     
+---
+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
+\`\`\`
+Feel free to explore the detailed API parameters and conduct tests on this page. 
+
+> Please note: 
+> 
+> we have bound a free account with a daily usage limit. 
+> You can deploy and bind your own account to complete the testing.
+                        `}
+                    </Markdown>
+                </article>
+            </Section>
+            <Section className="my-10">
+                <div className=' border p-4 rounded-2xl shadow-xl hover:shadow-none duration-200'>
+                    <Swagger spec={spec} />
+                </div>
+
+            </Section>
+        </>
+
     );
 }
diff --git a/src/app/docs/swagger-suno-api.json b/src/app/docs/swagger-suno-api.json
index a892216..064fc42 100644
--- a/src/app/docs/swagger-suno-api.json
+++ b/src/app/docs/swagger-suno-api.json
@@ -14,7 +14,7 @@
     "/api/custom_generate": {
       "post": {
         "summary": "Generate Audio - Custom Mode",
-        "description": "The custom mode enables users to provide additional details about the music, such as music genre, lyrics, and more.2 audio files will be generated for each request, consuming a total of 10 credits.wait_audio can be set to API mode:\u2022 By default, it is set to false, which indicates the background mode. It will only return audio task information, and you will need to call the get API to retrieve detailed audio information.\u2022 If set to true, it simulates synchronous mode. The API will wait for a maximum of 100s until the audio is generated, and will directly return the audio link and other information. Recommend using in GPTs and other agents.",
+        "description": "The custom mode enables users to provide additional details about the music, such as music genre, lyrics, and more.\n\n 2 audio files will be generated for each request, consuming a total of 10 credits. \n\n `wait_audio` can be set to API mode:\n\n\u2022 By default, it is set to false, which indicates the background mode. It will only return audio task information, and you will need to call the get API to retrieve detailed audio information.\n\n\u2022 If set to true, it simulates synchronous mode. The API will wait for a maximum of 100s until the audio is generated, and will directly return the audio link and other information. Recommend using in GPTs and other agents.",
         "tags": ["default"],
         "requestBody": {
           "content": {
@@ -82,7 +82,7 @@
     "/api/generate": {
       "post": {
         "summary": "Generate audio based on Prompt.",
-        "description": "It will automatically fill in the lyrics.2 audio files will be generated for each request, consuming a total of 10 credits.wait_audio can be set to API mode:\u2022 By default, it is set to false, which indicates the background mode. It will only return audio task information, and you will need to call the get API to retrieve detailed audio information.\u2022 If set to true, it simulates synchronous mode. The API will wait for a maximum of 100s until the audio is generated, and will directly return the audio link and other information. Recommend using in GPTs and other agents.",
+        "description": "It will automatically fill in the lyrics.\n\n2 audio files will be generated for each request, consuming a total of 10 credits.\n\n`wait_audio` can be set to API mode:\n\n\u2022 By default, it is set to `false`, which indicates the background mode. It will only return audio task information, and you will need to call the get API to retrieve detailed audio information.\n\n\u2022 If set to `true`, it simulates synchronous mode. The API will wait for a maximum of 100s until the audio is generated, and will directly return the audio link and other information. Recommend using in GPTs and other agents.",
         "tags": ["default"],
         "requestBody": {
           "content": {
@@ -155,7 +155,26 @@
         ],
         "responses": {
           "200": {
-            "description": "success"
+            "description": "success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "required": ["0", "1"],
+                    "properties": [
+                      {
+                        "$ref": "#/components/schemas/audio_info"
+                      },
+                      {
+                        "$ref": "#/components/schemas/audio_info"
+                      }
+                    ]
+                  }
+                }
+              }
+            }
           }
         }
       }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 964dfab..deaac39 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,8 @@ import Markdown from 'react-markdown';
 export default function Home() {
 
   const markdown = `
+
+---
 ## Introduction
 
 Suno.ai v3 is an amazing AI music service. Although the official API is not yet available, we couldn't wait to integrate its capabilities somewhere.
@@ -35,19 +37,24 @@ We discovered that some users have similar needs, so we decided to open-source t
   return (
     <>
       <Section className="">
-        <div className="flex flex-col m-auto py-20 text-center items-center justify-center gap-4 bg-indigo-900/10 my-8 rounded-2xl border">
-          <span className=" px-5 py-1 text-xs font-light border rounded-full border-indigo-900 uppercase">Unofficial</span>
-          <h1 className="font-bold text-7xl flex text-indigo-900">
+        <div className="flex flex-col m-auto py-20 text-center items-center justify-center gap-4 my-8
+        lg:px-20 px-4
+        bg-indigo-900/90 rounded-2xl border shadow-2xl hover:shadow-none duration-200">
+          <span className=" px-5 py-1 text-xs font-light border rounded-full 
+          border-white/20 uppercase text-white/50">
+            Unofficial
+          </span>
+          <h1 className="font-bold text-7xl flex text-white/90">
             Suno AI API
           </h1>
-          <p className="text-indigo-900/80 text-lg">
-            Deploy your own Suno AI API with just one click.
+          <p className="text-white/80 text-lg">
+            `Suno-api` is an open-source project that enables you to set up your own Suno AI API.
           </p>
         </div>
 
       </Section>
       <Section className="my-10">
-        <article className="prose lg:prose-lg max-w-3xl border-t pt-10">
+        <article className="prose lg:prose-lg max-w-3xl">
           <Markdown>
             {markdown}
           </Markdown>