tastypear/playground.md

## playground.md

      
    Raw
  

              playground.md
            
          
    目标：根据已知的API改造为Playground网页。
网页样式：左侧是模型选择和可调整的参数和生成按钮，右侧可预览输出结果。
每个模型对应不同的参数名及输出类型，当用户选择模型时，提供合适的可选参数。
调用API生成流程：

API key保存在key.js中，每次生成调用随机从中抽取一个：
var keys = [
    "hf_a...",
    "hf_b..."
];
API调用示例（以文生图模型z-image/turbo为例）
# 调用模型，获取 requestId
curl --location --request POST 'https://router.huggingface.co/wavespeed/api/v3/${model}' \
--header "Content-Type: application/json" \
--header "Authorization: Bearer ${KEY}" \
--data-raw '{
  "enable_base64_output": false,
  "enable_sync_mode": false,
  "output_format": "jpeg",
  "prompt": "Cat",
  "seed": -1,
  "size": "1024*1024",
  "strength": 0.6
}'
返回结果形如：
{"code":200,"message":"success","data":{"id":"aa558b6a544941458a30dc0d6e43ea29","model":"wavespeed-ai/z-image/turbo","outputs":[],"urls":{"get":"https://api.wavespeed.ai/api/v3/predictions/aa558b6a544941458a30dc0d6e43ea29/result"},"has_nsfw_contents":[],"status":"created","created_at":"2026-01-12T15:25:23.648Z","error":"","executionTime":0,"timings":{"inference":0}}}
data["id"]即为requestId
接着通过另一个api获取结果
curl --location --request GET "https://router.huggingface.co/wavespeed/api/v3/predictions/${requestId}/result" \
--header "Authorization: Bearer ${KEY}"
返回结果形如：
{"code":200,"message":"success","data":{"id":"aa558b6a544941458a30dc0d6e43ea29","model":"wavespeed-ai/z-image/turbo","outputs":["https://d2p7pge43lyniu.cloudfront.net/output/59299cbe-2660-4212-9423-6083191044dc-u1_31cabf34-c918-43b3-bd50-2c7d69516df2.jpeg"],"urls":{"get":"https://api.wavespeed.ai/api/v3/predictions/aa558b6a544941458a30dc0d6e43ea29/result"},"status":"completed","created_at":"2026-01-12T15:25:23.647094905Z","error":"","executionTime":3604,"timings":{"inference":3604}}}
如果成功结束生成，结果中的data["outputs"]中应有结果。如果没有结果，每隔1秒再次请求，直到outputs（或error）中出现结果。
注意：


调用生成和获取结果是成对的操作，需使用一致的key。
调用生成时发送的json中包含了对应模型所需的所有参数，它们在playground中都应该可调的。
将模型和其对应的参数存储到合适的配置文件（包括输出的结果类型），方便后期添加更多模型。
将输出结果显示在页面右侧，结果可能是一张图片、一组图片、一段文字或一段音乐等。
为输出结果添加下载按钮。

根据描述，完成这个Playground页面的框架搭建。

在"Z-Image Turbo"模型的width和height滑动条右侧，加上一个输入框，以允许输入精准的宽高值。

在config.js中添加两个模型
模型1 文生图模型

model name: bytedance/seedream-v4.5
payload demo:
{
  "enable_base64_output": false,
  "enable_sync_mode": false,
  "prompt": "Cat",
  "size": "2048*2048"
}
模型2 文生音乐模型

model name: minimax/music-v1.5
payload demo:
{
  "enable_sync_mode": false,
  "lyrics_prompt": "",
  "prompt": "pure music"
}

音乐生成模型返回的结果形如：
{
    "code": 200,
    "message": "success",
    "data": {
        "id": "23c3152adb1b4ea8b4402fe696fb2d50",
        "model": "minimax/music-v1.5",
        "outputs": [
            "https://d1q70pf5vjeyhc.cloudfront.net/predictions/23c3152adb1b4ea8b4402fe696fb2d50/1.mp3"
        ],
        "urls": {
            "get": "https://api.wavespeed.ai/api/v3/predictions/23c3152adb1b4ea8b4402fe696fb2d50/result"
        },
        "status": "completed",
        "created_at": "2026-01-12T16:45:14.812973825Z",
        "error": "",
        "executionTime": 31745,
        "timings": {
            "inference": 31745
        }
    }
}
生成结果同样在data["outputs"]中，在右侧的预览区展示一个简单的播放器，而不是直接展示url文本。
No results found