feat: support image quality control

apps/web/src/pages/PlaygroundPage.tsx

@@ -132,7 +132,9 @@ export function PlaygroundPage(props: {
     const normalizedSettings = mediaCapabilities
       ? normalizeMediaSettingsForCapabilities(mediaSettings, mediaCapabilities, props.mode)
       : mediaSettings;
-    return buildMediaEstimatePayload(props.mode, selectedModel, prompt, normalizedSettings, mediaUploads, videoMode);
+    return buildMediaEstimatePayload(props.mode, selectedModel, prompt, normalizedSettings, mediaUploads, videoMode, {
+      supportsQualityControl: mediaCapabilities?.supportsQualityControl,
+    });
   }, [mediaCapabilities, mediaSettings, mediaUploads, prompt, props.mode, selectedModel, videoMode]);
 
   useEffect(() => {
@@ -348,11 +350,16 @@ export function PlaygroundPage(props: {
           ...mediaRequestPayload(runSettings, 'video'),
         });
       } else {
+        const runMediaCapabilities = runModelOption
+          ? deriveMediaModelCapabilities(runModelOption.models, runMode, runVideoMode, runSettings.resolution)
+          : mediaCapabilities;
         const uploadPayload = sharedMediaUploadRequestPayload(runUploads, 'image');
         const requestPayload = {
           model: runModel,
           prompt: requestPrompt,
-          ...mediaRequestPayload(runSettings, 'image'),
+          ...mediaRequestPayload(runSettings, 'image', {
+            supportsQualityControl: runMediaCapabilities?.supportsQualityControl,
+          }),
           ...uploadPayload,
         };
         response = runUploads.some((item) => item.kind === 'image')
@@ -799,6 +806,7 @@ function buildMediaEstimatePayload(
   settings: MediaGenerationSettings,
   uploads: PlaygroundUpload[],
   videoMode: VideoCreateMode,
+  options?: { supportsQualityControl?: boolean },
 ): Record<string, unknown> {
   const requestPrompt = replacePlaygroundResourceTokens(prompt.trim(), uploads, mode);
   if (mode === 'video') {
@@ -815,7 +823,7 @@ function buildMediaEstimatePayload(
     kind: uploads.some((item) => item.kind === 'image') ? 'images.edits' : 'images.generations',
     model,
     prompt: requestPrompt,
-    ...mediaRequestPayload(settings, 'image'),
+    ...mediaRequestPayload(settings, 'image', options),
     ...uploadPayload,
   };
 }
@@ -1248,11 +1256,17 @@ function mediaSettingsFromStorage(value: unknown): MediaGenerationSettings {
     height: numberFromUnknown(record.height, fallback.height, 128, 8192),
     outputMode: record.outputMode === 'group' ? 'group' : 'single',
     outputAudio: booleanFromUnknown(record.outputAudio ?? record.output_audio ?? record.audio, fallback.outputAudio),
+    quality: imageQualityFromStorage(record.quality, fallback.quality),
     resolution: stringFromUnknown(record.resolution) || fallback.resolution,
     width: numberFromUnknown(record.width, fallback.width, 128, 8192),
   };
 }
 
+function imageQualityFromStorage(value: unknown, fallback: MediaGenerationSettings['quality']) {
+  if (value === 'low' || value === 'medium' || value === 'high' || value === 'auto') return value;
+  return fallback;
+}
+
 function videoModeFromStorage(value: unknown, uploads: PlaygroundUpload[]): VideoCreateMode {
   if (value === 'text_to_video' || value === 'first_last_frame' || value === 'omni_reference') return value;
   return inferVideoModeFromUploads(uploads);