\n {/* Header */}\n

AI Product Lister

\n\n {/* Error Display */}\n {error && (\n \n Error:\n {error}\n setError(null)}\n className=\"absolute top-0 bottom-0 right-0 px-4 py-3 text-red-700 hover:text-red-900 focus:outline-none\"\n aria-label=\"Close error\"\n >\n ×\n \n

\n )}\n\n {/* Chat Messages Area */}\n

\n {messages.map((message) => (\n \n {/* Display image if it was part of the user message */}\n {message.role === 'user' && message.imageUrl && (\n $\"User$ \n )}\n\n {/* Message Content using

 for whitespace preservation */}\n            {message.content}
\n\n            {/* Speak Button for Agent messages with voiceText */}\n            {message.role === 'agent' && message.voiceText && isSpeechSupported && (\n               handleSpeak(message.voiceText)}\n                disabled={isLoading} // Only disable if overall loading, allow stopping speech\n                className={`mt-2 px-3 py-1 text-xs rounded transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-1 ${\n                    isSpeaking\n                        ? 'bg-red-100 text-red-700 hover:bg-red-200' // Style for \"Stop\"\n                        : 'bg-teal-100 text-teal-700 hover:bg-teal-200' // Style for \"Speak\"\n                } ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}\n                aria-label={isSpeaking ? \"Stop reading summary\" : \"Read price summary aloud\"}\n              >\n                {isSpeaking ? '⏹️ Stop Reading' : '🔊 Read Price Summary'}\n              \n            )}\n

\n ))}\n {/* Loading Indicator */}\n {isLoading && (\n

\n Generating Listing...\n

\n )}\n \n\n {/* Input Area */}\n

\n {/* Optional Text Input */}\n setInputMessage(e.target.value)}\n placeholder=\"Optional: Add any specific details or focus points...\"\n disabled={isLoading}\n aria-label=\"Optional text input\"\n onKeyPress={(e) => { if (e.key === 'Enter' && !isLoading && selectedFile) generateListing(); }} // Submit on Enter if image selected\n />\n {/* File Input, Preview, and Submit Button */}\n

\n \n {selectedFile ? \"Change Image\" : \"Upload Image\"}\n \n \n {/* Preview and File Name */}\n {previewUrl && $\"Preview\"$ }\n {selectedFile && {selectedFile.name}}\n\n {/* Submit Button - moved to the right */}\n \n {isLoading ? \"Generating...\" : \"Generate Listing\"}\n \n

\n \n );\n}\n\n\n// --- Client Execution Logic ---\nfunction client() {\n const rootEl = document.getElementById(\"root\");\n if (rootEl) {\n createRoot(rootEl).render(); // Use StrictMode\n }\n else {\n console.error(\"Root element #root not found.\");\n // Provide a more visible error message in the body\n document.body.innerHTML =\n \"

Error: Application could not start because the root HTML element (#root) was not found.

\";\n }\n}\n\n// Ensure DOM is ready before running client-side React code\nif (typeof document !== \"undefined\") {\n if (document.readyState === \"complete\" || document.readyState === \"interactive\") {\n client();\n } else {\n document.addEventListener(\"DOMContentLoaded\", client);\n }\n}\n\n\n// --- Server-Side Code ---\nexport default async function server(request: Request): Promise {\n // Server-side imports (dynamic import within the function)\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n // Server-side logging utility\n function logServer(level: \"INFO\" | \"WARN\" | \"ERROR\", message: string, context?: any) {\n const timestamp = new Date().toISOString();\n // Using console.log for compatibility with various serverless environments\n console.log(JSON.stringify({ timestamp, level, message, context, environment: \"server\" }));\n }\n\n // Initialize OpenAI Client\n let openai: OpenAI;\n try {\n // Assumes OPENAI_API_KEY is set as an environment variable in the runtime (e.g., Val Town Secrets)\n openai = new OpenAI();\n } catch (e: any) { // Type assertion for error\n logServer(\"ERROR\", \"Failed to initialize OpenAI Client\", { error: e.message });\n // Return a structured error response\n return new Response(JSON.stringify({\n response: \"Error: The AI backend could not be initialized. Please check server configuration.\",\n error: `OpenAI Initialization Failed: ${e.message}`\n }), {\n status: 503, // Service Unavailable might be appropriate\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // --- Tool 1: Generate Listing Description (using Vision LLM) ---\n const generateListingDescription = async (\n imageDataUrl: string,\n userPrompt?: string,\n ): Promise<{ success: boolean; data?: ListingGenerationOutput; error?: string }> => {\n logServer(\"INFO\", \"Executing Tool 1: Generate Listing Description\", { promptProvided: !!userPrompt });\n\n // Validate imageDataUrl presence and basic format\n if (!imageDataUrl) {\n return { success: false, error: \"Image data URL was missing in the request.\" };\n }\n if (!imageDataUrl.startsWith('data:image/')) {\n logServer(\"WARN\", \"Invalid image data URL format received\");\n const preview = imageDataUrl.substring(0, 100) + (imageDataUrl.length > 100 ? '...' : '');\n return { success: false, error: `Invalid image data format provided. Starts with: ${preview}` };\n }\n\n // Construct the prompt for the vision model\n const generationPrompt = `\n You are an expert product description writer for online marketplaces (like eBay, Etsy, Poshmark, etc.).\n Analyze the following image VERY carefully. Generate a highly detailed and verbose product listing description.\n\n **Instructions:**\n 1. **Identify the Item:** Clearly state what the item is.\n 2. **Detailed Description:** Describe its appearance, color, material (make educated guesses if unsure, e.g., \"appears to be cotton\"), style, pattern, key features, and any visible details or branding. Be descriptive and use appealing language.\n 3. **Condition:** Assess the condition based *only* on the image. Note any visible flaws (scratches, stains, wear, tear). If it looks new, say so. If condition is ambiguous, state that. Use terms like \"Excellent condition (appears unused)\", \"Good used condition with minor signs of wear (see photos)\", \"Fair condition with notable flaws (describe)\". Avoid making definitive claims if not clearly visible.\n 4. **Measurements/Size (if applicable/estimable):** If possible, estimate size or mention if size tags are visible. State clearly if size cannot be determined from the image.\n 5. **Keywords:** Suggest 5-10 relevant keywords for search optimization.\n 6. **Potential Title:** Suggest a concise, keyword-rich title for the listing (max 80 characters).\n 7. **Tone:** Professional, descriptive, and appealing to potential buyers.\n 8. **Verbosity:** Aim for a thorough, multi-paragraph description. Avoid being overly brief.\n\n ${userPrompt ? `\\n**User's Specific Request:** Please pay special attention to: \"${userPrompt}\"\\n` : \"\"}\n\n **Output Format:** Respond ONLY with a valid JSON object containing the following keys:\n {\n \"suggestedTitle\": \"Concise Title Here\",\n \"description\": \"Full multi-paragraph description here...\",\n \"keywords\": [\"keyword1\", \"keyword2\", ...]\n }\n `;\n\n try {\n // Call the OpenAI API (using gpt-4o or a similar vision model)\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\", // Recommended model for vision and JSON output\n response_format: { type: \"json_object\" }, // Ensure JSON output\n messages: [\n {\n role: \"user\",\n content: [\n { type: \"text\", text: generationPrompt },\n {\n type: \"image_url\",\n image_url: {\n url: imageDataUrl,\n // Detail level can be 'low', 'high', or 'auto'\n // 'high' might be better for condition assessment but costs more/slower\n detail: \"high\"\n },\n },\n ],\n },\n ],\n temperature: 0.5, // Balance creativity and factual description\n max_tokens: 1200, // Increased token limit for potentially long descriptions\n // Consider adding user field for abuse monitoring if needed: user: \"user-id-from-your-app\"\n });\n\n const content = completion.choices[0].message.content;\n if (!content) {\n throw new Error(\"LLM returned empty content for description generation.\");\n }\n\n logServer(\"INFO\", \"Received description JSON from LLM\");\n let parsedData;\n try {\n parsedData = JSON.parse(content);\n } catch (parseError: any) {\n logServer(\"ERROR\", \"Failed to parse JSON response from description LLM\", { response: content, error: parseError.message });\n throw new Error(`AI response for description was not valid JSON: ${parseError.message}`);\n }\n\n\n // Validate the structure of the parsed data\n if (!parsedData.description || !parsedData.suggestedTitle || !Array.isArray(parsedData.keywords)) {\n logServer(\"WARN\", \"Description LLM JSON response missing expected fields or wrong type\", { parsedData });\n // Attempt to salvage what we can, or return error\n return {\n success: false, // Indicate failure due to structure\n error: \"AI response for description had an unexpected structure.\",\n // Optionally return partial data if useful: data: { ... }\n };\n }\n\n // Success\n return {\n success: true,\n data: {\n description: parsedData.description,\n extractedTitle: parsedData.suggestedTitle,\n keywords: parsedData.keywords,\n }\n };\n\n } catch (error: any) {\n logServer(\"ERROR\", \"Listing Description tool execution failed\", { errorMessage: error.message, stack: error.stack });\n // Provide a user-friendly error message\n return { success: false, error: `Failed to generate description: ${error.message}` };\n }\n };\n\n\n // --- Tool 2: Find Comps & Suggest Price (using LLM knowledge) ---\n const findCompsAndPrice = async (\n itemTitle: string,\n itemDescription: string\n ): Promise<{ success: boolean; data?: PricingCompsOutput; error?: string }> => {\n logServer(\"INFO\", \"Executing Tool 2: Find Comps & Suggest Price\", { title: itemTitle });\n\n // Create a concise context for the pricing model\n const contextForPricing = `Item Title: ${itemTitle}\\nItem Description Summary (first 300 chars): ${itemDescription.substring(0, 300)}...`;\n\n // Construct the prompt for the pricing model\n const pricingPrompt = `\n You are an AI Pricing Assistant simulating market analysis based on your general knowledge up to your last training date.\n **Important Disclaimer:** You do NOT have access to real-time, current marketplace data or live listings. Your analysis is an *estimate* based on patterns in your training data.\n\n **Item Context Provided:**\n ${contextForPricing}\n\n **Instructions:**\n 1. **Estimate Price Range:** Based on the item title and description summary, suggest a plausible price *range* (e.g., \"$25 - $40\") for which this item *might* sell on a common online marketplace (like eBay, Poshmark, Mercari). If a range seems inappropriate, provide a single approximate price (e.g., \"~$30\"). Consider factors like perceived item type, potential brand (if mentioned), and apparent condition (as inferred from the description).\n 2. **Simulate Comparable Examples:** Describe 2-3 *hypothetical* examples of similar items and what they *might* have sold for, based on general knowledge. Phrase these carefully to reflect simulation and avoid claiming current data access. Examples: \"A similar [item type] described as 'good condition' might list online for around $X.\" or \"Based on past observations, listings for [brand] [item type] often fall between $Y and $Z depending on specific condition and platform.\"\n 3. **Pricing Rationale:** Briefly explain the reasoning behind your suggested price range/estimate. Mention the key factors considered (e.g., item category, condition notes from description, brand recognition if applicable, general perceived demand).\n 4. **Reiterate Disclaimer:** Conclude by clearly stating the disclaimer that this is an estimate and lacks real-time market data verification.\n\n **Output Format:** Respond ONLY with a valid JSON object containing the following keys:\n {\n \"suggestedPriceRange\": \"$X - $Y\" OR \"~$Z\",\n \"comparableExamples\": \"Text describing 2-3 hypothetical comparable examples...\",\n \"pricingRationale\": \"Brief explanation for the price suggestion...\",\n \"disclaimer\": \"Reminder statement: This is an estimate based on general knowledge, not real-time market data.\"\n }\n `;\n\n try {\n // Call OpenAI API (gpt-4o-mini or similar is often sufficient and faster/cheaper)\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\", // Use a cost-effective model if appropriate\n response_format: { type: \"json_object\" },\n messages: [{ role: \"user\", content: pricingPrompt }],\n temperature: 0.6, // Allow for reasonable estimation variance\n max_tokens: 600, // Sufficient for the requested fields\n });\n\n const content = completion.choices[0].message.content;\n if (!content) {\n throw new Error(\"LLM returned empty content for pricing analysis.\");\n }\n\n logServer(\"INFO\", \"Received pricing/comps JSON from LLM\");\n let parsedData;\n try {\n parsedData = JSON.parse(content);\n } catch (parseError: any) {\n logServer(\"ERROR\", \"Failed to parse JSON response from pricing LLM\", { response: content, error: parseError.message });\n throw new Error(`AI response for pricing was not valid JSON: ${parseError.message}`);\n }\n\n\n // Validate the structure of the parsed data\n if (!parsedData.suggestedPriceRange || !parsedData.comparableExamples || !parsedData.pricingRationale || !parsedData.disclaimer) {\n logServer(\"WARN\", \"Pricing LLM JSON response missing expected fields\", { parsedData });\n return { success: false, error: \"Pricing analysis response from AI was incomplete or had an unexpected structure.\" };\n }\n\n // Success\n return { success: true, data: parsedData };\n\n } catch (error: any) {\n logServer(\"ERROR\", \"Pricing/Comps tool execution failed\", { errorMessage: error.message, stack: error.stack });\n return { success: false, error: `Pricing analysis failed: ${error.message}` };\n }\n };\n\n\n // --- Helper Function to Generate Voice Summary Text ---\n const generateVoiceSummary = (pricingInfo?: PricingCompsOutput): string | undefined => {\n if (!pricingInfo?.suggestedPriceRange) {\n // Return a specific message if pricing step failed or produced no range\n return \"Sorry, I couldn't generate a price estimate for this item.\";\n }\n\n const priceRangeText = pricingInfo.suggestedPriceRange.trim();\n\n // Simple approach: Just read the suggested range directly, cleaning it slightly\n // Modern TTS often handles symbols like $ and - well.\n // Remove potential tilde for smoother reading.\n const cleanedPriceText = priceRangeText.replace('~', 'approximately ');\n\n // Construct the voice response\n // Using a leading phrase makes it sound more conversational\n return `Based on the analysis, the suggested price is: ${cleanedPriceText}.`;\n\n /* --- Alternative More Complex Parsing (if needed) ---\n // Try to parse a range like \"$X - $Y\" or \"$X-$Y\"\n const rangeMatch = priceRangeText.match(/\\$?([\\d.,]+)\\s*-\\s*\\$?([\\d.,]+)/);\n if (rangeMatch) {\n const minPrice = rangeMatch[1].replace(/[$,]/g, ''); // Remove symbols for cleaner speech if TTS struggles\n const maxPrice = rangeMatch[2].replace(/[$,]/g, '');\n return `Based on the analysis, the suggested price is around ${minPrice} to ${maxPrice} dollars.`;\n }\n\n // Try to parse a single estimate like \"~$X\" or \"$X\"\n const singleMatch = priceRangeText.match(/[\\d.,]+/);\n if (singleMatch) {\n const price = singleMatch[0].replace(/[$,]/g, '');\n return `Based on the analysis, the suggested price is around ${price} dollars.`;\n }\n\n // Fallback if parsing fails but range exists - read as is\n return `The suggested price range is ${priceRangeText}.`;\n */\n };\n\n\n // --- Main Server Request Handling Logic ---\n const url = new URL(request.url);\n\n // Endpoint: /process (Handles listing generation POST requests)\n if (request.method === \"POST\" && url.pathname === \"/process\") {\n let requestBody: ProcessRequestPayload;\n try {\n // Parse request body\n requestBody = await request.json();\n const { imageDataUrl, userPrompt } = requestBody;\n logServer(\"INFO\", \"Processing POST /process request\", { hasImage: !!imageDataUrl, hasPrompt: !!userPrompt });\n\n // Validate required input\n if (!imageDataUrl) {\n throw new Error(\"Missing image data in request payload.\");\n }\n\n // === Step 1: Generate Listing Description using Tool 1 ===\n const descriptionResult = await generateListingDescription(imageDataUrl, userPrompt);\n\n // Handle failure in description generation\n if (!descriptionResult.success || !descriptionResult.data) {\n logServer(\"ERROR\", \"Description generation step failed\", { error: descriptionResult.error });\n // Throw error to be caught by the main catch block, providing specific reason\n throw new Error(descriptionResult.error || \"Failed to generate listing description due to an unknown tool error.\");\n }\n const listingInfo = descriptionResult.data;\n logServer(\"INFO\", \"Description generated successfully\", { title: listingInfo.extractedTitle });\n\n\n // === Step 2: Get Pricing/Comps using Tool 2 ===\n // Use the generated title (or a fallback) and description\n const pricingResult = await findCompsAndPrice(\n listingInfo.extractedTitle || \"Item described\", // Use generated title or a generic fallback\n listingInfo.description\n );\n\n let pricingInfo: PricingCompsOutput | undefined;\n let pricingError: string | undefined;\n if (pricingResult.success && pricingResult.data) {\n pricingInfo = pricingResult.data;\n logServer(\"INFO\", \"Pricing/Comps generated successfully\", { range: pricingInfo.suggestedPriceRange });\n } else {\n // Pricing step failed, log it but don't stop the process. Include error note in response.\n pricingError = pricingResult.error || \"Could not retrieve pricing/comps analysis due to an unknown tool error.\";\n logServer(\"WARN\", \"Pricing/Comps step failed\", { error: pricingError });\n }\n\n // === Step 3: Generate the NLP Voice Summary Text ===\n const nlpVoiceText = generateVoiceSummary(pricingInfo);\n if (nlpVoiceText) {\n logServer(\"INFO\", \"Generated NLP Voice Text\", { text: nlpVoiceText });\n }\n\n\n // === Step 4: Synthesize the Final Agent Response for the Chat UI ===\n // Combine the generated parts into a single, formatted string.\n let finalResponseText = `Okay, I've analyzed the image! Here's a draft listing and pricing suggestion:\\n\\n`;\n finalResponseText += `✨ **Suggested Title:**\\n${listingInfo.extractedTitle || \"(Could not suggest title)\"}\\n\\n`; // Handle potential missing title\n finalResponseText += `📝 **Generated Description:**\\n${listingInfo.description}\\n\\n`;\n finalResponseText += `🔑 **Suggested Keywords:**\\n${(listingInfo.keywords && listingInfo.keywords.length > 0) ? listingInfo.keywords.join(\", \") : \"(No keywords suggested)\"}\\n\\n`; // Handle potential missing keywords\n finalResponseText += `--- --- ---\\n\\n`; // Separator\n\n // Append pricing information if available\n if (pricingInfo) {\n finalResponseText += `💰 **Pricing & Comparables Analysis:**\\n\\n`;\n finalResponseText += ` • **Suggested Price:** ${pricingInfo.suggestedPriceRange}\\n`;\n finalResponseText += ` • **Rationale:** ${pricingInfo.pricingRationale}\\n`;\n finalResponseText += ` • **Simulated Comparables:** ${pricingInfo.comparableExamples}\\n\\n`;\n // Ensure disclaimer is included\n finalResponseText += ` *${pricingInfo.disclaimer || \"Remember: Pricing is an estimate based on general knowledge, not real-time market data.\"}*\\n`;\n } else {\n // If pricing failed, include a note about it.\n finalResponseText += `⚠️ **Pricing Analysis Note:**\\n I encountered an issue generating a price suggestion for this item. ${pricingError || \"\"}\\n`;\n finalResponseText += ` *You may need to research current pricing manually.*\\n`;\n }\n\n finalResponseText += `\\n--- --- ---\\n\\n`;\n finalResponseText += `Remember to review and edit this information before posting your listing!`;\n\n\n // === Step 5: Construct the Final JSON Response Object ===\n const finalAgentResponse: AgentResponse = {\n response: finalResponseText, // Full text for chat display\n listingDetails: listingInfo, // Structured description data\n pricingDetails: pricingInfo, // Structured pricing data (if successful)\n nlp_voice_text: nlpVoiceText, // Short text summary for TTS\n };\n\n // Return the successful response\n return new Response(JSON.stringify(finalAgentResponse), {\n status: 200,\n headers: { \"Content-Type\": \"application/json\" }\n });\n\n } catch (error: any) {\n // Catch errors from parsing, validation, or tool failures\n logServer(\"ERROR\", \"Main processing loop failed in /process\", { errorMessage: error.message, stack: error.stack });\n // Return a user-friendly error response\n const errorResponse: AgentResponse = {\n response: `Error generating listing: ${error.message}`, // Display error in chat\n error: error.message // Include error detail in JSON\n };\n return new Response(JSON.stringify(errorResponse), {\n status: 500, // Internal Server Error\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n // Endpoint: / (Serves the HTML UI for GET requests)\n else if (request.method === \"GET\" && url.pathname === \"/\") {\n // Serve the basic HTML structure that includes the React app script\n return new Response(\n `\n \n \n \n AI Product Lister\n \n \n 📸\">\n \n \n \n

\n JavaScript is required to run this application. Please enable JavaScript in your browser settings.\n

Loading AI Lister Application...

\n \n \n `,\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } }, // Specify charset\n );\n }\n // Handle Favicon requests quietly\n else if (request.method === \"GET\" && url.pathname === \"/favicon.ico\") {\n return new Response(null, { status: 204 }); // No Content\n }\n // Default 404 for any other unhandled routes/methods\n else {\n logServer(\"WARN\", \"Unhandled route requested\", { path: url.pathname, method: request.method });\n return new Response(\n JSON.stringify({ error: \"Not Found\", message: `The requested endpoint ${request.method} ${url.pathname} does not exist.` }),\n { status: 404, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n} // End of server function\n\n","deleted","label",[98],"permalink","https://www.val.town/x/Get/Pricing/code/main.tsx","extension","actionData","errors"]