ไป็ป
ไปไนๆฏ YourAppName?
YourAppName ๆฏไธไธชๅบไบ NextJS ็ AI SaaS ๅผๅๆกๆถ๏ผๅ ็ฝฎไธฐๅฏ็็ปไปถๅ AI SDK๏ผๅธฎๅฉไฝ ๅฟซ้ๅฎๆ AI SaaS ้กน็ฎๅผๅใ
็ปไปถ
ImagePromptBox - AI ๅพ็็ๆ่พๅ ฅๆก
ไธไธชๅ่ฝไธฐๅฏ็ AI ๅพ็็ๆ่พๅ ฅๆก็ปไปถ๏ผๆฏๆๆ็ๅพๅๅพ็ๅพๆจกๅผใ
ๅบๆฌ็จๆณ
import { ImagePromptBox } from '@/shared/blocks/generator/image-prompt-box';
export default function Page() {
return (
<ImagePromptBox
showResults={true}
onGenerated={(images) => console.log('Generated:', images)}
/>
);
}Props
| ๅฑๆง | ็ฑปๅ | ้ป่ฎคๅผ | ่ฏดๆ |
|---|---|---|---|
maxSizeMB | number | 5 | ๅ่ๅพ็ๆๅคงๆไปถๅคงๅฐ (MB) |
className | string | - | ่ชๅฎไนๆ ทๅผ็ฑปๅ |
srOnlyTitle | string | - | ๅฑๅน้ ่ฏปๅจๆ ้ข |
showResults | boolean | true | ๆฏๅฆๆพ็คบ็ๆ็ปๆ |
onGenerated | (images: GeneratedImage[]) => void | - | ๅพ็็ๆๅฎๆๅ่ฐ |
ๅ่ฝ็นๆง
ไป่ดน็จๆท vs ๅ ่ดน็จๆท
็ปไปถๆ นๆฎ็จๆท็ไป่ดน็ถๆ (isPaidUser) ่ชๅจ่ฐๆดๅ่ฝใ
ไป่ดน็จๆทๅคๆญๆกไปถ๏ผๆปก่ถณไปปไธๅณๅฏ๏ผ๏ผ
- ๆฅๆๆดป่ท็่ฎข้
(Subscription status:
ACTIVEๆTRIALING) - ่ดญไนฐ่ฟ็งฏๅๅ
(One-time credit pack with
PAYMENTscene)
| ๅ่ฝ | ๅ ่ดน็จๆท | ไป่ดน็จๆท |
|---|---|---|
| ๅ่ๅพ็ๆฐ้ไธ้ | 3 ๅผ | 9 ๅผ |
| Aspect Ratio ้้กน | ไป Auto ๅ ่ดน | ๅ จ้จๅฏ็จ |
| Resolution ้้กน | ไป Standard ๅ ่ดน | ๅ จ้จๅฏ็จ |
| Skip Validation ๅผๅ ณ | ๆพ็คบ | ้่ |
| "Need Custom Settings" ๆ้ฎ | ๆพ็คบ | ้่ |
| "ๅ็บงไปฅไธไผ ๆดๅคๅพ็" ๆ็คบ | ๆพ็คบ | ้่ |
ๆฏๆ็ๅ่ฝ
- ๐ Prompt ่พๅ ฅ: ๆฏๆๆๅค 2000 ๅญ็ฌฆ็ๆ็คบ่ฏ่พๅ ฅ
- ๐ผ๏ธ ๅ่ๅพ็: ๆฏๆไธไผ ๅ่ๅพ็่ฟ่กๅพ็ๅพ
- ๐ ๅฎฝ้ซๆฏ้ๆฉ: Auto, 1:1, 16:9, 9:16, 4:3, 3:4
- ๐ ๅ่พจ็้ๆฉ: Standard, 1K, 2K, 4K
- ๐ข ๆฐ้้ๆฉ: 1-4 ๅผ ๅพ็
- โณ ็ๆ่ฟๅบฆ: ๅฎๆถๆพ็คบ็ๆ่ฟๅบฆ
- ๐พ ๅพ็ไธ่ฝฝ: ๆฏๆไธ่ฝฝ็ๆ็ๅพ็
็ธๅ ณๅธธ้
// constants.ts
export const MAX_PROMPT_LENGTH = 2000;
export const MAX_REFERENCE_IMAGES_FREE = 3;
export const MAX_REFERENCE_IMAGES_PAID = 9;ๅญ็ปไปถ
DropdownSelector- ้็จไธๆ้ๆฉๅจ๏ผๆฏๆ่ชๅฎไน้้กนๅๅพๆ ReferenceImagesDisplay- ๅ่ๅพ็ๅฑ็คบ็ปไปถGenerateButton- ็ๆๆ้ฎGeneratedImagesGrid- ็ๆๅพ็็ฝๆ ผๅฑ็คบProgressIndicator- ่ฟๅบฆๆ็คบๅจ