| @@ -3,8 +3,50 @@ | ||
| 3 | 3 | import { useImageGenerationStore } from '@shared/state/generate-images'; |
| 4 | 4 | import apiFetch from '@wordpress/api-fetch'; |
| 5 | 5 | import { __ } from '@wordpress/i18n'; |
| 6 | 6 | |
| 7 | +const imageErrorMessage = (status) => { | |
| 8 | + if (status === 'content_policy_violation') { | |
| 9 | + // translators: shown when the AI image generator refuses a prompt on safety grounds. | |
| 10 | + return __( | |
| 11 | + 'That request was blocked by our safety system. Try a different description.', | |
| 12 | + 'extendify-local', | |
| 13 | + ); | |
| 14 | + } | |
| 15 | + if (status === 'no_image_returned') { | |
| 16 | + // translators: shown when the AI image generator returns nothing, cause unknown. | |
| 17 | + return __( | |
| 18 | + "Couldn't create that image. Try describing it differently.", | |
| 19 | + 'extendify-local', | |
| 20 | + ); | |
| 21 | + } | |
| 22 | + return __('Service temporarily unavailable', 'extendify-local'); | |
| 23 | +}; | |
| 24 | + | |
| 25 | +const creditsFromHeaders = (headers) => { | |
| 26 | + const read = (name) => { | |
| 27 | + const value = headers.get(name); | |
| 28 | + return value === null ? null : Number(value); | |
| 29 | + }; | |
| 30 | + return { | |
| 31 | + remaining: read('x-ratelimit-remaining'), | |
| 32 | + total: read('x-ratelimit-limit'), | |
| 33 | + }; | |
| 34 | +}; | |
| 35 | + | |
| 36 | +export const fetchImageCredits = async () => { | |
| 37 | + const url = new URL(`${AI_HOST}/api/draft/image`); | |
| 38 | + // The limiter keys on the site id, which a GET can only carry in the query. | |
| 39 | + url.searchParams.set('siteId', reqDataBasics.siteId ?? ''); | |
| 40 | + const { headers } = await fetch(url, { mode: 'cors' }); | |
| 41 | + const credits = creditsFromHeaders(headers); | |
| 42 | + | |
| 43 | + if (credits.remaining === null) | |
| 44 | + throw new Error('Response reports no credits'); | |
| 45 | + | |
| 46 | + return credits; | |
| 47 | +}; | |
| 48 | + | |
| 7 | 49 | export const generateImage = async (imageData, signal) => { |
| 8 | 50 | const response = await fetch(`${AI_HOST}/api/draft/image`, { |
| 9 | 51 | method: 'POST', |
| 10 | 52 | mode: 'cors', |
| @@ -18,28 +60,12 @@ | ||
| 18 | 60 | }); |
| 19 | 61 | |
| 20 | 62 | const body = await response.json(); |
| 21 | 63 | |
| 22 | - const imageCredits = { | |
| 23 | - remaining: response.headers.get('x-ratelimit-remaining'), | |
| 24 | - total: response.headers.get('x-ratelimit-limit'), | |
| 25 | - refresh: response.headers.get('x-ratelimit-reset'), | |
| 26 | - }; | |
| 64 | + const imageCredits = creditsFromHeaders(response.headers); | |
| 27 | 65 | |
| 28 | 66 | if (!response.ok) { |
| 29 | - if (body.status && body.status === 'content-policy-violation') { | |
| 30 | - throw { | |
| 31 | - message: __( | |
| 32 | - 'Your request was rejected as a result of our safety system. Your prompt may contain text that is not allowed by our safety system.', | |
| 33 | - 'extendify-local', | |
| 34 | - ), | |
| 35 | - imageCredits, | |
| 36 | - }; | |
| 37 | - } | |
| 38 | - throw { | |
| 39 | - message: __('Service temporarily unavailable', 'extendify-local'), | |
| 40 | - imageCredits, | |
| 41 | - }; | |
| 67 | + throw { message: imageErrorMessage(body.status), imageCredits }; | |
| 42 | 68 | } |
| 43 | 69 | return { |
| 44 | 70 | images: body, |
| 45 | 71 | imageCredits, |
