Skip to content

Commit 6eff766

Browse files
ShenKSPZShenKSPZ
committed
Fix: image generation page layout
1 parent 92c4a2d commit 6eff766

File tree

8 files changed

+445
-63
lines changed

8 files changed

+445
-63
lines changed

‎src/components/pages/ImageGenerationPage.tsx

Lines changed: 306 additions & 63 deletions
Large diffs are not rendered by default.

‎src/locales/en/translation.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
"selectModel_close": "Close",
3838
"selectModel_search_placeholder": "Search models..."
3939
},
40+
"imageGeneration": {
41+
"title": "Image Generation",
42+
"provider": "Provider",
43+
"model": "Model",
44+
"imageSize": "Image Size",
45+
"generationCount": "Generation Count",
46+
"randomSeed": "Random Seed",
47+
"generateButton": "Generate",
48+
"generating": "Generating...",
49+
"prompt": "Prompt",
50+
"promptPlaceholder": "Describe the image you want to create, e.g.: a peaceful lake at sunset with mountains in the background",
51+
"results": "Generated Results",
52+
"placeholderText": "Enter a prompt and click generate to create images",
53+
"apiKeyMissing": "Please set your API key for the selected provider in the settings.",
54+
"seedHelp": "Seed for reproducible results"
55+
},
4056
"settings": {
4157
"language": "Language",
4258
"apiKey": "API Key",

‎src/locales/es/translation.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
"selectModel_close": "Cerrar",
3838
"selectModel_search_placeholder": "Buscar modelos..."
3939
},
40+
"imageGeneration": {
41+
"title": "Imagen Generación",
42+
"provider": "Proveedor",
43+
"model": "Modelo",
44+
"imageSize": "Tamaño de Imagen",
45+
"generationCount": "Cantidad de Generaciones",
46+
"randomSeed": "Semilla Aleatoria",
47+
"generateButton": "Generar",
48+
"generating": "Generando...",
49+
"prompt": "Prompt",
50+
"promptPlaceholder": "Describe la imagen que quieres crear, ej.: un lago tranquilo al atardecer con montañas en el fondo",
51+
"results": "Resultados Generados",
52+
"placeholderText": "Ingresa un prompt y haz clic en generar para crear imágenes",
53+
"apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
54+
"seedHelp": "Semilla para resultados reproducibles"
55+
},
4056
"settings": {
4157
"language": "Idioma",
4258
"apiKey": "Clave API",

‎src/locales/ja/translation.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
"selectModel_close": "閉じる",
3838
"selectModel_search_placeholder": "モデルを検索..."
3939
},
40+
"imageGeneration": {
41+
"title": "画像生成",
42+
"provider": "プロバイダー",
43+
"model": "モデル",
44+
"imageSize": "画像サイズ",
45+
"generationCount": "生成数",
46+
"randomSeed": "ランダムシード",
47+
"generateButton": "生成",
48+
"generating": "生成中...",
49+
"prompt": "プロンプト",
50+
"promptPlaceholder": "作成したい画像を説明してください。例：夕日が沈む静かな湖、背景には山々",
51+
"results": "生成結果",
52+
"placeholderText": "プロンプトを入力して生成ボタンをクリックして画像を作成",
53+
"apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
54+
"seedHelp": "再現可能な結果のためのシード値"
55+
},
4056
"settings": {
4157
"language": "言語",
4258
"apiKey": "APIキー",

‎src/locales/ko/translation.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
"selectModel_close": "닫기",
3838
"selectModel_search_placeholder": "모델 검색..."
3939
},
40+
"imageGeneration": {
41+
"title": "이미지 생성",
42+
"provider": "제공자",
43+
"model": "모델",
44+
"imageSize": "이미지 크기",
45+
"generationCount": "생성 수량",
46+
"randomSeed": "랜덤 시드",
47+
"generateButton": "생성",
48+
"generating": "생성 중...",
49+
"prompt": "프롬프트",
50+
"promptPlaceholder": "만들고 싶은 이미지를 설명하세요. 예: 석양이 지는 고요한 호수, 배경에는 산맥",
51+
"results": "생성 결과",
52+
"placeholderText": "프롬프트를 입력하고 생성 버튼을 클릭하여 이미지 생성",
53+
"apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
54+
"seedHelp": "재현 가능한 결과를 위한 시드"
55+
},
4056
"settings": {
4157
"language": "언어",
4258
"apiKey": "API 키",

‎src/locales/zh-CN/translation.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
"selectModel_close": "关闭",
3838
"selectModel_search_placeholder": "搜索模型..."
3939
},
40+
"imageGeneration": {
41+
"title": "图片生成",
42+
"provider": "提供商",
43+
"model": "模型",
44+
"imageSize": "图片尺寸",
45+
"generationCount": "生成数量",
46+
"randomSeed": "随机种子",
47+
"generateButton": "生成",
48+
"generating": "生成中...",
49+
"prompt": "提示词",
50+
"promptPlaceholder": "描述你想创建的图片，例如：一个宁静的湖泊，夕阳西下，远处是群山",
51+
"results": "生成结果",
52+
"placeholderText": "输入提示词并点击生成按钮来创建图片",
53+
"apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
54+
"seedHelp": "用于可重现结果的种子"
55+
},
4056
"settings": {
4157
"language": "语言",
4258
"apiKey": "API 密钥",

‎src/locales/zh-TW/translation.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
"selectModel_close": "關閉",
3838
"selectModel_search_placeholder": "搜尋模型..."
3939
},
40+
"imageGeneration": {
41+
"title": "圖片生成",
42+
"provider": "提供商",
43+
"model": "模型",
44+
"imageSize": "圖片尺寸",
45+
"generationCount": "生成數量",
46+
"randomSeed": "隨機種子",
47+
"generateButton": "生成",
48+
"generating": "生成中...",
49+
"prompt": "提示詞",
50+
"promptPlaceholder": "描述你想創建的圖片，例如：一個寧靜的湖泊，夕陽西下，遠處是群山",
51+
"results": "生成結果",
52+
"placeholderText": "輸入提示詞並點擊生成按鈕來創建圖片",
53+
"apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
54+
"seedHelp": "用於可重現結果的種子"
55+
},
4056
"settings": {
4157
"language": "語言",
4258
"apiKey": "API 金鑰",

‎src/styles/tensorblock-light.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -555,4 +555,47 @@
555555
background-color: var(--primary-300);
556556
}
557557

558+
/* Image Generation Page */
559+
.aspect-ratio-button {
560+
transition: all 0.2s;
561+
background-color: var(--surface-0);
562+
}
563+
564+
.aspect-ratio-button.active {
565+
background-color: var(--primary-100);
566+
border-color: var(--primary-500);
567+
}
568+
569+
.aspect-ratio-button:hover:not(.active) {
570+
background-color: var(--primary-50);
571+
border-color: var(--primary-400);
572+
}
573+
574+
.image-generation-refresh-button {
575+
background-color: var(--primary-50);
576+
color: var(--primary-600);
577+
transition: all 0.2s;
578+
}
579+
580+
.image-generation-refresh-button:hover {
581+
background-color: var(--primary-200);
582+
color: var(--primary-700);
583+
}
584+
585+
.image-generation-result-placeholder {
586+
background-color: var(--primary-50);
587+
border: 2px dashed var(--primary-200);
588+
color: var(--surface-500);
589+
}
590+
591+
.image-result-area {
592+
background-color: var(--surface-0);
593+
border-radius: 0.5rem;
594+
border: 1px solid var(--primary-100);
595+
transition: all 0.2s;
596+
}
597+
598+
.image-result-area:hover {
599+
border-color: var(--primary-300);
600+
}
558601
}

0 commit comments

Comments
 (0)