refactor: Refactor footer and documentation page styles for improved readability
and aesthetics.
This commit is contained in:
blueeon
parent
0a867ebb2d
commit
eb189f26f1
@ -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/">
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user