fix: popover within image bounds, translate quality/style, copy prompt only, group label fix

web/default/src/features/image-playground/api.ts

@@ -197,7 +197,7 @@ export async function getUserGroups(): Promise<GroupOption[]> {
   }
 
   return Object.entries(groupsMap).map(([key, val]) => ({
-    label: val?.desc || key,
+    label: key,
     value: key,
     ratio: typeof val?.ratio === 'number' ? val.ratio : undefined,
     desc: val?.desc,

web/default/src/features/image-playground/components/image-results.tsx

@@ -13,6 +13,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { useState } from 'react'
+import { QUALITY_OPTIONS, STYLE_OPTIONS } from '../types'
 import type { GeneratedImage, GeneratedImageParams } from '../types'
 
 type ImageResultsProps = {
@@ -31,17 +32,14 @@ function formatDuration(ms: number): string {
   return `${(ms / 1000).toFixed(1)}s`
 }
 
-function formatParamsText(params: GeneratedImageParams): string {
-  const lines = [
-    `Prompt: ${params.prompt}`,
-    `Model: ${params.model}`,
-    `Group: ${params.group}`,
-    `Size: ${params.size}`,
-    `Quality: ${params.quality}`,
-    `Style: ${params.style}`,
-    `Count: ${params.n}`,
-  ]
-  return lines.join('\n')
+function getTranslatedOptionLabel(
+  options: readonly { value: string; label: string }[],
+  value: string,
+  t: (key: string) => string
+): string {
+  const opt = options.find((o) => o.value === value)
+  if (!opt) return value
+  return t(opt.label)
 }
 
 function ImageParamsPopover({ image, onFillParams }: { image: GeneratedImage; onFillParams?: (params: GeneratedImageParams) => void }) {
@@ -49,9 +47,9 @@ function ImageParamsPopover({ image, onFillParams }: { image: GeneratedImage; on
   const params = image.params
   if (!params) return null
 
-  const handleCopy = async () => {
+  const handleCopyPrompt = async () => {
     try {
-      await navigator.clipboard.writeText(formatParamsText(params))
+      await navigator.clipboard.writeText(params.prompt)
       toast.success(t('Copied'))
     } catch {
       toast.error(t('Copy failed'))
@@ -71,13 +69,15 @@ function ImageParamsPopover({ image, onFillParams }: { image: GeneratedImage; on
         <Info className='size-3.5' />
       </PopoverTrigger>
       <PopoverContent
-        className='w-72 p-3'
-        side='top'
+        className='w-64 p-2'
+        side='bottom'
         align='end'
-        sideOffset={8}
+        sideOffset={-4}
+        alignOffset={-4}
+        collisionPadding={4}
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
-        <div className='space-y-2'>
+        <div className='space-y-1.5'>
           <div className='flex items-center justify-between'>
             <span className='text-xs font-medium'>{t('Generation Parameters')}</span>
             <div className='flex gap-1'>
@@ -85,9 +85,9 @@ function ImageParamsPopover({ image, onFillParams }: { image: GeneratedImage; on
                 type='button'
                 variant='ghost'
                 size='icon'
-                className='size-6'
-                onClick={handleCopy}
-                title={t('Copy')}
+                className='size-5'
+                onClick={handleCopyPrompt}
+                title={t('Copy prompt')}
               >
                 <Copy className='size-3' />
               </Button>
@@ -96,7 +96,7 @@ function ImageParamsPopover({ image, onFillParams }: { image: GeneratedImage; on
                   type='button'
                   variant='ghost'
                   size='icon'
-                  className='size-6'
+                  className='size-5'
                   onClick={handleFill}
                   title={t('Reuse parameters')}
                 >
@@ -106,38 +106,38 @@ function ImageParamsPopover({ image, onFillParams }: { image: GeneratedImage; on
             </div>
           </div>
           <div className='space-y-1 text-xs'>
-            <div className='rounded bg-muted p-2'>
+            <div className='rounded bg-muted p-1.5'>
               <span className='font-medium text-muted-foreground'>{t('Prompt')}: </span>
               <span className='select-all break-all'>{params.prompt}</span>
             </div>
             <div className='grid grid-cols-2 gap-1'>
-              <div className='rounded bg-muted px-2 py-1'>
+              <div className='rounded bg-muted px-1.5 py-1'>
                 <span className='font-medium text-muted-foreground'>{t('Model')}: </span>
-                <span className='select-all'>{params.model}</span>
+                <span className='select-all truncate'>{params.model}</span>
               </div>
-              <div className='rounded bg-muted px-2 py-1'>
+              <div className='rounded bg-muted px-1.5 py-1'>
                 <span className='font-medium text-muted-foreground'>{t('Group')}: </span>
-                <span className='select-all'>{params.group}</span>
+                <span className='select-all truncate'>{params.group}</span>
               </div>
-              <div className='rounded bg-muted px-2 py-1'>
+              <div className='rounded bg-muted px-1.5 py-1'>
                 <span className='font-medium text-muted-foreground'>{t('Size')}: </span>
                 <span className='select-all'>{params.size}</span>
               </div>
-              <div className='rounded bg-muted px-2 py-1'>
+              <div className='rounded bg-muted px-1.5 py-1'>
                 <span className='font-medium text-muted-foreground'>{t('Quality')}: </span>
-                <span className='select-all'>{params.quality}</span>
+                <span className='select-all'>{getTranslatedOptionLabel(QUALITY_OPTIONS, params.quality, t)}</span>
               </div>
-              <div className='rounded bg-muted px-2 py-1'>
+              <div className='rounded bg-muted px-1.5 py-1'>
                 <span className='font-medium text-muted-foreground'>{t('Style')}: </span>
-                <span className='select-all'>{params.style}</span>
+                <span className='select-all'>{getTranslatedOptionLabel(STYLE_OPTIONS, params.style, t)}</span>
               </div>
-              <div className='rounded bg-muted px-2 py-1'>
+              <div className='rounded bg-muted px-1.5 py-1'>
                 <span className='font-medium text-muted-foreground'>{t('Count')}: </span>
                 <span className='select-all'>{params.n}</span>
               </div>
             </div>
             {image.revisedPrompt && (
-              <div className='rounded bg-muted p-2'>
+              <div className='rounded bg-muted p-1.5'>
                 <span className='font-medium text-muted-foreground'>{t('Revised Prompt')}: </span>
                 <span className='select-all break-all'>{image.revisedPrompt}</span>
               </div>
@@ -266,14 +266,14 @@ export function ImageResults({
         {images.map((image) => (
           <div
             key={image.id}
-            className='group relative overflow-hidden rounded-lg border bg-muted/20'
+            className='group relative overflow-visible rounded-lg border bg-muted/20'
           >
             {image.status === 'pending' ? (
-              <div className='flex aspect-square items-center justify-center'>
+              <div className='flex aspect-square items-center justify-center overflow-hidden rounded-lg'>
                 <div className='h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent' />
               </div>
             ) : image.status === 'failed' ? (
-              <div className='flex aspect-square flex-col items-center justify-center gap-2 p-3 text-center'>
+              <div className='flex aspect-square flex-col items-center justify-center gap-2 overflow-hidden rounded-lg p-3 text-center'>
                 {onDeleteImage && (
                   <button
                     type='button'
@@ -301,7 +301,7 @@ export function ImageResults({
                 )}
               </div>
             ) : (
-              <>
+              <div className='relative overflow-hidden rounded-lg'>
                 <img
                   src={image.url}
                   alt={image.revisedPrompt || image.params?.prompt || 'Generated image'}
@@ -310,12 +310,12 @@ export function ImageResults({
                 />
                 {/* Duration badge */}
                 {image.durationMs != null && (
-                  <span className='absolute left-1.5 top-1.5 flex items-center gap-0.5 rounded bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white'>
+                  <span className='absolute left-1.5 top-1.5 z-10 flex items-center gap-0.5 rounded bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white'>
                     <Clock className='size-2.5' />
                     {formatDuration(image.durationMs)}
                   </span>
                 )}
-                {/* Top-right buttons: info + delete (z-20 to be above the hover overlay) */}
+                {/* Top-right buttons: info + delete */}
                 <div className='absolute right-1.5 top-1.5 z-20 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
                   {image.params && (
                     <ImageParamsPopover image={image} onFillParams={onFillParams} />
@@ -350,7 +350,7 @@ export function ImageResults({
                     </Button>
                   </div>
                 </div>
-              </>
+              </div>
             )}
           </div>
         ))}

web/default/src/i18n/locales/zh.json

@@ -4904,6 +4904,12 @@
     "Click or drag to upload reference images": "点击或拖拽上传参考图",
     "Generation Parameters": "生成参数",
     "Reuse parameters": "填入参数",
-    "Revised Prompt": "修订提示词"
+    "Copy prompt": "复制提示词",
+    "Revised Prompt": "修订提示词",
+    "Standard": "标准",
+    "HD": "高清",
+    "Default": "默认",
+    "Vivid": "生动",
+    "Natural": "自然"
   }
 }