* Analyze a screenshot to produce a detailed description for re-generation.
(apiKey: string, imageBase64: string)
| 109 | * Analyze a screenshot to produce a detailed description for re-generation. |
| 110 | */ |
| 111 | async function analyzeScreenshot(apiKey: string, imageBase64: string): Promise<string> { |
| 112 | const controller = new AbortController(); |
| 113 | const timeout = setTimeout(() => controller.abort(), 30_000); |
| 114 | |
| 115 | try { |
| 116 | const response = await fetch("https://api.openai.com/v1/chat/completions", { |
| 117 | method: "POST", |
| 118 | headers: { |
| 119 | "Authorization": `Bearer ${apiKey}`, |
| 120 | "Content-Type": "application/json", |
| 121 | }, |
| 122 | body: JSON.stringify({ |
| 123 | model: "gpt-4o", |
| 124 | messages: [{ |
| 125 | role: "user", |
| 126 | content: [ |
| 127 | { |
| 128 | type: "image_url", |
| 129 | image_url: { url: `data:image/png;base64,${imageBase64}` }, |
| 130 | }, |
| 131 | { |
| 132 | type: "text", |
| 133 | text: `Describe this UI in detail for re-creation. Include: overall layout structure, color scheme (hex values), typography (sizes, weights), specific text content visible, spacing between elements, alignment patterns, and any decorative elements. Be precise enough that someone could recreate this UI from your description alone. 200 words max.`, |
| 134 | }, |
| 135 | ], |
| 136 | }], |
| 137 | max_tokens: 400, |
| 138 | }), |
| 139 | signal: controller.signal, |
| 140 | }); |
| 141 | |
| 142 | if (!response.ok) { |
| 143 | return "Unable to analyze screenshot"; |
| 144 | } |
| 145 | |
| 146 | const data = await response.json() as any; |
| 147 | return data.choices?.[0]?.message?.content?.trim() || "Unable to analyze screenshot"; |
| 148 | } finally { |
| 149 | clearTimeout(timeout); |
| 150 | } |
| 151 | } |